Tutorial
웹디자인
2011.08.24 16:05

Slice Tool을 이용한 이미지 쪼개기

조회 수 8545 추천 수 0 댓글 0



보통 포토샵에서 슬라이스툴을 사용하는 경우가 별로 없는데요.

웹디자인에서는 아주 유용하게 사용하실 수 있습니다.

(사실 슬라이스툴 자체가 웹&디바이스 디자인을 더욱 편리하게 하게하기 위한 툴입니다)




000.jpg

툴박스에 보이는 바로 저 아이콘이 바로 Slice Tool입니다.





001.jpg

사용법은 아주 간단합니다. 클릭->드레그





002.jpg

영역에 자동으로 넘버링이 되며, 사용자가 지정한 슬라이스는 파란색,

미지정 슬라이스는 회색으로 표시됩니다.

슬라이스툴이 항상 켜져있으면 디자인하기 불편하므로

Ctrl+H를 사용하여 화면에서 보이지 않도록 합니다. 다시 보이길 원할땐 다시 Ctrl+H



003.jpg

레이아웃에 맞게 자르고, 1px의 오차없이 꼼꼼히 조정합니다.

다 되셨으면 Ctrl+Alt+Shift+S를 누릅니다.




004.jpg

Save For Web&Device라는 창이 나옵니다.

이 창에서는 슬라이스별로 파일설정을 할 수 있으며, 미리보기도 가능합니다.




005.jpg

SAVE를 누르면 위와같은 저장옵션이 나오는데요

파일형식은 IMAGE ONLY, HTML ONLY, HTML&IMAGE 를 설정할 수 있습니다.


HTML&IMAGE를 선택하시면 이미지가 자동으로 HTML에 얹히며(테이블테그사용), 이미지는

images라는 폴더에 따로 저장됩니다.


Settings의 경우 보통 DEFAULT를 사용하므로 생략

(펼침목록을 펼쳐보셔도 어떤 기능이다 금방 아실 수 있습니다^^)


Slicese의 옵션은 다음과 같습니다.

All Slice : 모든 슬라이스를 저장 (사용자 미지정 슬라이스인 회색슬라이스까지 포함)

All User Slice : 모든 지정슬라이스(파란색)가 저장됩니다.

Selected Slice : 사용자가 웹&디바이스창에서 선택한 이미지만 저장합니다.