[포토샵]Slice Tool (분할 툴) 사용방법

[o암흑o채찍o]

웹페이지 제작에 유용한 분활 툴

포토샵을 설치를 하면 기본적으로 웹 이미지를 전문적으로 제작을 할 수 있는 이미지레디가 자동으로 설치가 됩니다. 이미지레디에서는 전문적으로 이미지를 웹 페이제로 저장을 하기 위한 간단한 분할 방법 및 링크 설정으로 HTML 문서를 만들 수 있습니다.

Slice Tool(분할 툴)을 이용을 하여 원하는 부분의 이미지 자르기
분할툴을 자세하게 알아보기 위하여 첨부하여 드린 "home.jpg"파일을 엽니다.

slicetool-1.zip

1. 툴박스에서 분할 툴을 선택을 하고 이미지에서 버튼을 클릭을 했을 때 다른 웹 페이지로 이동을 할 수 있도록 첫번째 버튼을 아래와 같이 드래그를 합니다.

드래그한 이미지가 분할이 되어 영역이 표시됩니다.

2. 같은 방법으로 나머지 버튼들에 대하여 분할툴로 그래그 하여 분할 영역을 만듭니다.

지금과 같이 이미지를 분활을 시키는 이유는 여러가지가 있지만 이미지를 웹에서 불러올 때 하나의 이미지를 웹에서 불러오는 것보다 여려개로 분할된 이미지를 불러오는것이 웹 페이지의 로딩 속도를 높일 수 있기때문입니다.

분할 영역에 링크 설정 및 웹 브라우져에서 확인하기
위 방법으로 웹 페이지의 로딩 속도를 감안으로 하여 전체 이미지를 여려개로 분할이 되었습니다. 분할한 이미지에 링크를 설정을 하여 웹 브라우져에서 버튼을 클릭하였을 경우 이동할 위치를 설정을 해 보겠습니다.

1. 링크를 설정하기 위한 첫번째 버튼에서 오른쪽 마우스를 클릭을 한 뒤 "Edit Slice Option"을 선택을 합니다.

2. 옵션 대화상자가 나타나면 아래와 같이 URL 입력란에 이동할 웹페이지의 주소를 입력을 한 뒤 [OK]버튼을 누릅니다.

3. 링크 설정이 완료가 되면 이를 HTML 문서로 저장을 하기 위하여 "File>Save for Web"을 선택을 한 뒤 [Save]버튼을 클릭합니다.

4. 대화상자가 나타나면 저장을 할 위치를 지정을 하고 HTML로 저장하기 위한 파일의 이름을 선택을 하고 [저장]버튼을 누릅니다.

5. 저장 위치에 자동으로[ Image] 폴더가 생성이 되면서 분할된 영역의 이미지가 자동으로 저장된 것을 알 수 있습니다.

6. 저장된 HTML 문서를 더블 클릭을 하여 웹 브라우저에서 분할된 웹페이지의 이미지를 확인을 할 수 있습니다.

7. 또한 링크가 설정된 버튼을 클릭을 하면 지정한 웹 페이지로 이동이 됩니다.

안내선을 이용한 자동 분할영역 만들기
분할 영역을 만들 때 가장 중요한것은 이미지의 경계 부분에 맞추어서 정확하게 이미지를 분할을 하는 것입니다. 안내선을 분할하기 위한 경계에 위치 시킨 뒤 분할 툴 옵션에서 [Slice From Suides]를 선택을 하면 만들어진 안내선에 맞추어져 이미지가 분할됩니다.

1. View>Rulers(Ctrl + R)를 선택을 하여 이미지창에 자를 보이게 한 뒤 분할을 할 이미지의 영역에 맞추어서 가이드를 위치시킵니다.

2. 분할 툴의 상단 옵션에서 [Slice From Guides]를 클릭을 합니다.

가이드가 위치한 부분에 맞추어서 분할 영역이 만들어졌습니다.

분할 툴의 옵션바 알아보기

① Style : 자르기 영역을 지정을 할 때 영역을 지정할 스타일을 선택을 합니다.
- Normal : 사용자가 원하는 영역만큼 드래그를 하여 자유롭게 분할 영역을 만들 수 있습니다.
- Fixed Aspect Ratio : Width(폭), Height(높이)의 값을 입력을 하여 입력된 값만큼의 비율을 유지하여 분할 영역을 만들 수 있습니다.
- Fixed Size : Width(폭), Height(높이)에서 지정된 크기만큼 분할 영역을 만들 수 있습니다.

② Slice From Guides : 사용자가 만든 가이드의 위치에 따라 자동으로 분할 영역을 만듭니다.