슬라이스 툴 (Slice)

슬라이스툴은 이미지를 구획을 나누어서 쪼개주는 기능이다. 웹 이미지를 제작한 뒤 홈페이지를 올려 놓으면 이미지의 용량이 커 로딩속도가 늦어지는 경우가 발생하는데 이런 경우에는 이미지를 쪼개서 배치하는 것이 좋은데, 이때 슬라이스툴을 사용하면 웹 이미지를 정교한 형태로 쪼갤 수 있다.

슬라이스툴은 이미지를 구획을 나누어서 쪼개주는 기능이다. 웹 이미지를 제작한 뒤 홈페이지를 올려 놓으면 이미지의 용량이 커 로딩속도가 늦어지는 경우가 발생하는데 이런 경우에는 이미지를 쪼개서 배치하는 것이 좋은데, 이때 슬라이스툴을 사용하면 웹 이미지를 정교한 형태로 쪼갤 수 있다. 슬라이스툴은 이미지를 쪼개는 기능만 제공한다. 그외 다른 기능은 제공하지 않는다. 쪼개진 이미지는 화면상에는 보이지 않지만 File-Save for Web 메뉴로 저장하면 이미지를 쪼개진 상태로 저장한다. Style 옵션 슬라이스툴의 사용 방법을 설정한다.  Nomal : 일반적인 방법(마우스 드래그)으로 슬라이스 영역을 지정할 수 있다. Contrained Aspect Ratio : 가로, 세로 일정비율로 슬라이스 영역을 지정할 수 있다. Fixed Size : 입력한 수치대로 무조건 슬라이스 영역이 지정된다.   Show Slice Numbers 옵션 슬라이스 순서를 말하는 슬라이스 번호의 화면 표시여부를 선택할 수 있다. 일반적으로 슬라이스 번호가 보이는 상태가 작업하기 쉽다.   Line Color 슬라이스 선의 색상을 선택할 수 있다. 작업이미지가 어두울 경우엔 밝은 색으로 선택한 뒤 작업하는 것이 좋다. 슬라이스 선택툴은 작업슬라이스를 선택할 때 사용한다. 선택된 슬라이스는 슬라이스 라인이 반전되어 표시된다. 슬라이스 정렬 옵션 슬라이스를 겹치게 그리면 활성화되는 기능이다. 작업중인 슬라이스를 맨 뒤로 올릴지 아니면 맨 아래로 보낼지를 결정할 수 있다. 왼쪽에서부터 Bring slice to Front, Bring slice Backward, Send slice to Back 기능이다.   Promote to User Slice 옵션 주인이 되는 슬라이스를 결정해준다. 마우스로 클릭할 때 최초로 그려진 슬라이스가 주인 슬라이스이며, 그 옆에 파생되어 있는 다른 조각들을 주인으로 승격하려면 해당 슬라이스를 선택할 뒤 이 버튼을 클릭한다.   Slice Options 옵션 슬라이스된 각각의 이미지에 홈페이지 html 코딩 값을 입력할 때 사용한다.

1. Extract 기능을 사용해서 배경을 지우고 투명한 이미지로 만들는 방법을 알아보도록 하겠습니다. 작업할 이미지를 불러옵니다.

2 . Fliter 메뉴에서 Extract 를 클릭합니다.

3. Extract 대화상자가 나타납니다. Tool Options 항목에서 브러시 크기를 15로 입력하고, Smart Highlighting을 체크 표시가 나타나게 합니다. 이옵션은 자석 선택 툴처럼 색상 차이가 분명한 경계선을 자동으로 선택해 줍니다.

4. 아무 곳이나 시작점을 클릭한 후 이미지의 외관선을 그리면 초록색으로 표시됩니다. 외관선을 그리다 조금 실수를 하더라도 나중에 수정할 수 있으니 대충 경계선을 그려줍니다.

5. 다 그렸으면 채우기(Fill Tool)을 선택한 후 테두리 안쪽을 클릭합니다.

6. 파랑색으로 채워지면 잘 된 것입니다. 상태를 확인하기 위해 Preview 버튼을 클릭합니다.

7. 파랗게 칠해진 부분을 제외하고 나머지 부분는 다지워집니다. 필요 없는 배경이 지워진 부분도 있고 지저분하게 남아 있는 부분도 있음으로 현재 상태를 자세히 보기 위해 Preview 항모에서 Display 드롭다운 단추를 클릭후 Gray Matte 를 선택합니다.

8. 이제 확실하게 보이겁니다. 클린업 툴(Cleanup Tool)을 사용해서 지우고 싶은 부분을 정리합니다. 원래 이미지를 살려야 할 부분은 [Alt] 키를 누른 채 클린업 툴로 드래그하면 됩니다. 테두리 다듬기 툴(Edge Touchup tool)도 사용하여 가장자리를 다듬어 보세요. 작업이 끝났으면 OK 버튼을 클릭하여 익트랙트 창을 빠져나갑니다.

9. File 메뉴에서 Save for Web 을 클릭합니다.

10. Save For Web 대화상자에서 4-Up 탭을 클릭한 후 Transparency 에 체크가 되었는지 확인합니다. Matte 드롭다운 단추를 클릭하여 Other 를 클릭한 후 이미지의 바탕색으로 쓰일 색을 결정합니다. 이때 바탕색을 선택하는 이유는 투명 이미지를 저장할 때 기본적으로 이미지의 외관에 흰색의 Anti-aliasing이 적용되는데, 다른 색의 바탕에서는 지저분한 테두리가 보이기 때문에 이것을 방지하기 위해서 바탕색으로 Anti-aliasing을 적용하는 것입니다.

※ Anti-aliasing 이란?
그래픽 프로그램에서 화면의 영상을 자연스럽고 매끄럽게 표현하도록 해 주는 화면 처리 기법. 모니터 화면의 영상 정보는 2차원으로 배열된 점에 의해 전달되는데, 화면의 점의 개수가 적으면 들쑥날쑥한 계단 현상이 일어나 화면이 매끄럽지 못합니다. 이를 방지하기 위해 각 점 사이에 배경 색과 중간 색조의 점을 추가하여 화면을 자연스럽게 표현하는 화면 처리 기술입니다.

 

 Edge Highlighter Tool - 배경에서 추출 이미지의 테두리를 그려줍니다.

 Fill Tool - 테두리가 완성된 후에 남겨질 부분을 칠해줍니다.
 Eraser Toll - 칠해진 부분을 지웁니다.
 Eyedropper Tool - 이미지의 한 가지색으로 이루어진 부분만을 남기고 나머지 부분을 제거할 때, 남길 색을 지정합니다. 오른쪽의 Force Foreground 를 사용할때만 필요한 툴입니다.
 Cleanup Tool - Preview 버튼으로 추출된 이미지에서 필요 없는 부분을 지웁니다. [Alt] 를 누르면 추출 과정에서 잘려나간 부분도 다시 나타나게 합니다.
 Edge Touchup Tool - Preview 버튼으로 추출된 이미지에서 지저분한 테두리를 깔끔하게 정리합니다.
 돋보기 툴 - 이미지를 확대/축소 ([Alt] 를 클릭한 경우 축소) 합니다.
 손 툴 - 확대된 이미지를 이동합니다.
 Brush Size - 브러시의 크기를 조절합니다.
 Highlight - Edge Highlighter Tool 로 칠해지는 색을 지정합니다.
 Fill - Fill Toll 로 채워지는 색을 결정합니다.
 Smart Highlighting - 경계선을 자동으로 찾아줍니다.
 Extraction 항목 - 이미지에서 선택된 색으로 이루어진 부분만을 남기고 모두 지웁니다.
 Preview 항목 - 미리보기의 세부 항목을 결정합니다.

1. 작업을 하다보면 자기도 모르게 슬라이스 툴을 잘못 누러 이미지에 선택 영역 표시가 생기는 겨우 없애버리는 방법을 알아보겠습니다.  2. View 메뉴에서 Show - Slices 를 클릭 하시면 됩니다.