[포토샵]Slice툴을 활용한 이미지 쉽게 자르고 분할하기

한번씩 이런 생각을 할수 있다. '아.. 이 식빵을 나는 10등분 하고 싶어.. 어떻게 하면 정확하게 10등분 할 수 있을까?' 물론, 실제로 칼을들고 식빵을 10등분 한다는건 눈대중으로 보며 나름 10등분이라 생각하고 자를 것이다. 하지만 정확한 수치로 따지자면.. 정확하게 10등분이 된건 아니다. 왜냐? 눈대중으로 잘랐기 때문이다.  하지만, 디지털에서는 당연히.. 10등분으로 정확하게 자를 수 있다. 이번 글에서 포토샵을 활용하여 이미지를 슬라이스 하는 방법을 알아보자.

예를들어, 위의그림처럼 아래 탭바의 즐겨찾기 부분을 슬라이스(자르기)한다고 치자. 일단, 즐겨찾기 부분을 포토샵의 Slice Tool을 이용하여 자르기 위해서는 우선적으로 가이드라인이 필요하다.(가이드라인이 없어도 슬라이스가 가능하기도 함)

▲ 툴박스의 Crop툴을 꾸욱 누르면 나타나는 Slice툴

01.편하게 이미지를 슬라이스하기위하여 일단 View - Rulers를 활성화 시킨다.

02.Rulers가 활성화 되면 위의 그림처럼 가로세로에 룰러가 활성화 된다.

03.이제, 내가 원하는 부분(슬라이스할 부분)에 룰러창 바로위에 마우스를 올려놓고 드래그&드롭으로 가로 가이드라인은 가로에서, 세로 가이드라인은 세로에서 끌고와서 원하는 위치에 떨어트린다.(다시 가이드라인을 삭제하고 싶다면 가이드라인을 잡고 다시 룰러바로 떨어트리면 삭제된다)

04.대략적으로 즐겨찾기를 자를 가이드라인을 그어놨으면 이제, Slice Tool을 이용하여 드래그하여 즐겨찾기 부분을 정확하게 슬라이드 한다.

05.슬라이스를 하였다면, 위의 그림처럼 갈색 박스가 생기며 숫자가 나타난다.(이숫자는 슬라이스 된 순서를 말하며, 어떤 이미지가 있는데 아랫쪽을 슬라이스하면 자동으로 윗쪽부분도 같이 잘려서 위의 그림처럼 1번과 3번 슬라이스가 생긴다)

06.(하지만 이런씩으로 슬라이스는 잘 하지 않는다. 보통 슬라이스를 하면 어느정도는 정확하게 몇등분하여 잘라놓고 나머지 가이드라인을 활용하여 이미지를 자른다.)

자!! 이제 정확하게 내가 원하는 만큼 이미지를 슬라이스 해보자. 우선, 슬라이스툴이 활성화 되어있으면 이미지위에 마우스 오른쪽버튼을 누르고 위의 그림처럼 Divide Slice를 누르자.

07.Divide Slice를 누르면 위의 그림처럼 Horizontallt(가로), Vertically(세로)로 얼마만큼의 갯수로 자르고 싶냐는 박스가 있는데 미리보기를 보며 내가 원하는 수치를 입력하고 OK를 누른다.

08.Divide Slice툴을 이용했다면 위의 그림처럼 정확하게 세로로 5등분 되어 아래의 탭바를 정확한 수치를 자를 수 있게 슬라이스라인이 생겼다.

09.하지만, 뭐 물론 어떤 이미지를 정확하게 몇등분 하고 끝이라면, Divide Slice툴을 이용하여 잘라놓고 바로 저장을 하면 되지만, 그게 아니고 위의 그림처럼 탭바는 정확하게 5등분, 그리고 나머지는 눈대중으로 잘라야 하는 부분이 있다면, 일단, 미리 그어진 슬라이스라인에, 가이드라인을 끌고와 정확한 위치에 겹쳐 놓는다.

10.그리고 이제, 더이상 슬라이스라인을 볼 필요가 없기에(나중에 다시 순서대로 잘라야함), View - Clear Slice를 눌러 슬라이스라인을 모두 제거한다.(단,01번 전체 라인은 자동적으로 생성되어있음)

▲ 슬라이스라인은 지우고 가이드라인만 표시된 모습

11.이제 더 자를 부분을 가이드라인으로 모든곳을 다 표시해놓은뒤, 자를 부위를 생각하며 항상 위에서 부터 하나씩 Slice Tool을 이용하여 슬라이스를 해야한다.(내가 슬라이스할 부분이 10개라면 나중에 모두 슬라이스가 완료되었을땐 끝번호가 10번 슬라이스가 되어야 한다.)

12.만약 슬라이스를 하는데 위의그림처럼 다음 번호가 안나온다면 잘못 슬라이스 한거니, 화면을 확대하여 다시 그 슬라이스를 잡고(ctrl + 마우스클릭)크기를 키우거나 줄여서 정확하게 가이드라인에 맞춰야 한다.

13.자.. 이제 모든 슬라이스가 끝났다면 이미지로 저장하기 위해, File - Save For Web을 클릭한다.

▲ Save for Web 창

14.Save for Web창이 떳다면 우선, 위의 그림처럼 화면을 작개해서 모든 슬라이스를 드래그하여 활성화(조금 이미지가 밝아짐)시키고 이미지 포맷형식을 선택하고 저장만 하면된다.

15.오른쪽편에 내가 원하는 이미지 포맷형식과 퀄리티를 설정하고 하단의 Save 버튼을 누른다.

16.세이브 창이 뜬다면 아랫쪽에 포맷형식은 Images Only, 슬라이스는 All Slices를 누르고 저장한다.(보통 슬라이스는 웹용으로 자를 때 많이 쓰므로, HTML로 저장하는 기능도 있고, 또한 전체 슬라이스 말고 일부만 선택하여 저장 할 수도 있다) 참고로, 분명히 포맷형식은 JPEG를 선택했는데 위에 저장 확장자는 PNG는 그냥 무시하면 된다. 나중에는 JPG로 저장된다.

17.저장이 완료 되었다면 이처럼, 바탕화면에 images라는 절대 폴더안에 슬라이스 된 이미지가 들어간다.

images폴더를 열어보면 10개의 슬라이스 이미지가 파일명_01, 파일명_02.... 이런씩으로 _01,02,03 의 순서대로 저장된 것을 볼 수 있다.  사실 아주 쉽게 자른것처럼 보일진 몰라도 슬라이스 할때는 아무리 가이드라인이 있어도 그냥 대충 잘라놓고 확대해보면 조금씩 엇갈려 있는걸 쉽게 볼 수 있다. 그러므로 항상 슬라이스 할 때는 가이드라인을 미리 그어놓고, 위에서 부터 순서대로 확대를 하여 확실하게 슬라이스 하여야 한다.