[포토샵] 슬라이스 툴(Slice Tool)을 활용한 이미지 분할 저장

피그마와 같은 프로타이핑 툴이 등장한 이후 웹디자인을 포토샵으로 작업하는 일이 거의 없어지면서 최근에는 거의 사용할 일이 없어진 기능이 바로 슬라이스 툴(Slice Tool)이다. 다만, 상세페이지 같은 경우는 여전히 포토샵으로 작업하는 일이 많아서 원본파일을 분할해서 저장할 때 유용하게 쓸 수 있는 기능이다.

 

슬라이스 툴(Slice Tool)

툴 바에서 크롭(Crop) 메뉴를 길게 누르거나 오른쪽 클릭하면 하단에 숨겨진 슬라이스 툴(Slice Tool)을 발견할 수 있다.

 

 

슬라이스 툴(Slice Tool)을 선택한 뒤에, 이미지 위에 드래그하면 아래와 같이 이미지가 자동으로 슬라이스 된다. 이따 슬라이된 영역 상단에 숫자가 표시되는데, 파란색은 User Slice, 회색으로 표시되는 것은 포토샵이 자동으로 생성한 Auto Slice다.

 

 

슬라이스 셀렉트 툴(Slice Select Tool)을 사용해서 원하는 슬라이스 영역을 선택한 뒤 마우스를 우 클릭하면 Divide Slice 옵션을 선택할 수 있다.

 

 

슬라이스 설정 창에서 가로, 세로를 숫자 또는 픽셀 단위로 분할할 수 있다.

 

 

상세 페이지를 슬라이스 하는 경우, 가이드를 배치한 다음 여기에 따라서 이미지를 자르는 옵션을 사용한다. 가이드를 배치하고 나면 상단의 Slices From Guides 버튼이 활성화된다.

 

New Layer Based Slice

레이어가 여러 개라면, 레이어를 베이스로 한 옵션을 선택할 수 있다. 예를 들어, 아래와 같이 로고를 기준으로 이미지를 슬라이스 한다고 하면 레이어 패널에서 로고 레이어를 선택한 상태로 상단의 Select > New Layer Based Slice를 선택한다.

 

 

 

이렇게 하면 로고 레이어를 기준으로 아래와 같이 이미지가 슬라이스 된다.

 

 

슬라이스 된 이미지 저장하기

이미지 슬라이스 작업이 완료되었다면, 이제 이미지를 분할 저장한다. 상단의 File > Export > Save for Web (Legacy)를 선택한다.

 

 

옵션창이 열리면 슬라이스 선택 툴이 기본적으로 선택되어 있다. 드래그해서 모든 슬라이스를 선택하거나 Shift 키를 눌러서 아래 화면처럼 일부 슬라이스만 선택할 수 있다. 만약 특정 슬라이스만 저장하고 싶다면 이 단계에서 저장하고자 하는 슬라이스를 선택한다. 슬라이스 선택이 완료되면 선택이 완료되면 Save 버튼을 누른다.

 

 

저장 버튼을 누르면 슬라이스 된 이미지를 저장할 폴더를 설정하는 창이 뜬다. 하단의 Slices 드롭다운을 누르면 총 3가지 저장 옵션이 존재한다.

 

• All Slices - 내가 생성한(User) 슬라이스 이미지와 포토샵이 자동으로 생성한(Auto Slice) 슬라이스 이미지, 즉 모든 슬라이스 이미지를 저장하는 옵션
• All User Slices - 내가 생성한 슬라이스 이미지 영역만 저장(왼쪽 상단에 파란색 태그가 붙어있는 표시된 영역)
• Selected Slices - Export 설정화면에서 내가 선택한 슬라이스 이미지만 저장

원하는 옵션과 저장위치를 지정한 후 Save 버튼을 누른다.

 

지정한 폴더에 들어가 보면 아래와 같이 이미지가 슬라이스 되어 분할 저장된 것을 확인할 수 있다: