Slice Tool (분할 도구) 살펴보기

Slice Tool(분할도구) 단축키k



Slice Tool(분할도구)
슬라이스 툴은 웹이미지 작업할 때 사용하는 메뉴입니다
용량이 큰 이미지를 여러 조각으로 분할하여 전송 속도를 높여주는 도구 입니다 

Slice Selection tool
위의 슬라이스 툴을 이용해 분할된 그림파일을 선택, 편집 , 수정하는 툴입니다
슬라이스 선택 툴은 작업 슬라이스를 선택할 때 사용합니다  선택된 슬라이스는 슬라이스 라인이 

반전되어 표시됩니다.

 

 

 

_01 분할도구를 이용하여 작업자가 직접 영역을 지정한 곳을 분할 영역이라고 합니다
_02 사용자가 직접 영역을 지정하지 않아도 자동으로 생성되는 영역을 자동분할영역 이라고 합니다

Slice 옵션

슬라이스툴의 옵션바는 슬라이스툴을 선택하면 화면 상단에 나타납니다 슬라이스툴의 사용 방법을 설정합니다.

 

Slice 옵션

Normal :   마우스로 드래그하여 슬라이스 영역을 사용자가 원하는 크기로 지정할 수 있습니다

 

Ficed Aspect Ratio : width Height 항목에 입력한 비율을 유지된 상태에서 슬라이스 영역을 지정합니다
가로 세로 일정비율로 슬라이스 영역을 지정할 수 있습니다

 

Fixed Size : 가로 세로  입력한 수치 값으로 슬라이스 영역이 지정됩니다

Style옵션에서 Flxed Aspect Ratio 또는 Fixed Size를 선택하여 사용할 때  활성화 됩니다
width(가로)와height(세로)의수치 값으로  이미지가  분할 됩니다

가이드 선을 지정할 때  활성화 됩니다
Ctrl + R 단축키를 누르시면 Ruler 자가 활성화 됩니다  이동툴을 클릭하시고 룰자에서부터 드래그하시면
가이드라인이 생성됩니다 이미지에 가이드라인을 지정하여  그 가이드 라인을 기준으로  슬라이스 할 때
Slices From guides 버튼을 클릭하면 자동으로 이미지가 분할 됩니다
똑같이 나누어진 두개의 슬라이스 영역을 하나로 합치고 싶을때는 슬라이스 하나를 선택하여 오른쪽 단축메뉴의
Delete로 슬라이스된 영역을 지우고 다른 슬라이스 라인을 드래그 하여 영역을 합하여 줍니다

Slice Selection Option ( 슬라이스 선택 옵션)

 

Slice Selection Tool을 선택하면 Slice Selection Option이 활성화 됩니다

 슬라이스 정렬 옵션

슬라이스를 겹치게 그리면 활성화 됩니다. 선택된 슬라이스를 맨 위로 또는  맨 아래로 정렬을 지정할 수 있습니다

 Bring to Front, : 분할된 영역 중 선택된 영역을 맨 위로 올립니다
                        

 Bring forward : 분할된 영역중 선택된 영역을 한단계 위( 바로 위로 )로 올립니다

 

 Sand Backward,: 분할된 영역 중 선택된 영역을 한단계 밑(바로 아래로 )로 내립니다

                   
 Send to back : 분할된 영역 중 선택된 영역을 맨 밑으로 내립니다 

promote 자동 분할영역을 사용자 분할영역으로 변경해 줍니다 자동으로 생성되는 영역을 자동 분할 영역이라고 합니다
사용자(User) 슬라이스 툴로 이미지를 분할할 때 마우스를 드래그 하여  분할된 영역을 사용자 슬라이스라고  합니다.

 

사용방법
Slice Selection tool 선택한 후 Auto Slice(선택되지 않은 영역)을 마우스로 클릭하면 promote 버튼이 활성화 됩니다
선택된 영역안에서 마우스로 Slice Selection tool 포인터를 마우스로 드래그 하시면 선택영역 이동을 할수 있습니다.
조절점에 마우스 포인터를 가져 가시면 마우스 포인터가 화살표로 변하는데 그 때 화살표를 드래그하여 크기를 조절할
수 있습니다

예)Slice From guides 가이드라인을 지정하여 그 가이드 라인에 맞춰서 자동으로 이미지를  분할합니다 
그때 만들어지는 슬라이스를 직접 마우스를 드래그해서 만들 분할 영역으로 바꿔주는 역할을 합니다

 

 Divide Slice옵션 :  슬라이스 선택툴로 선택한 슬라이스 영역을 대화상자를 이용해 다시 분할 시키는 기능입니다

Divide Horizontally Into가로방향으로 분할하는 옵션

★slice down, eenly spaced 입력한 수치만큼 균등 분할됩니다

★pixels per silce 입력한 픽셀 수치 간격으로 분할됩니다

★Divide Vertcally Into 세로방향으로 분할하는 옵션

★slice down, eenly spaced 입력한 수치 만큼 균등 분할됩니다

★pixels per silce 입력한 픽셀 수치 간격으로 분합됩니다

 

 
①Divide Horizontally Into가로 방향으로 분할하여 OK버튼을 클릭하여 자동으로 슬라이스 합니다

②Divide Vertcally Into 세로 방향으로 분할하여 OK버튼을 클릭하여 자동으로 슬라이스 합니다

③ 3번은 Divide Horizontally Into(가로)와 Divide Vertcally Into (세로) 옵션을 모두 체크하고
수치 값을 입력하여 Ok버튼을 클릭하면 자동으로 슬라이스 합니다 

①Align top Edges 선택된 레이어를 기준으로 상단으로 정렬 ②align vertical edges 선택된 레이어를 기준으로 수평 중앙으로 정렬 ③Align bottom edges 선택된 레이어를 기준으로 아래쪽으로 정렬 ④Align left edges 선택된 레이어를 기준으로 왼쪽으로 정렬 ⑤Align horizontal center 선택된 레이어를 기준으로 수직 중앙으로 정렬 ⑥Align right edges 선택된 레이어를 기준으로 오른쪽으로 정렬	①Distribute top deges 링크된 이미지의 위쪽을 기준으로 간격을 균등하게 분배 ②Distribute vertical edges 링크된 이미지의 가로 중앙을 기준으로 간격을 균등하게 분배 ③Distribute bottom edegs 링크된 이미지의 아래쪽을 기준으로 간격을 균등하게 분배 ④Distribute left edges 링크된 이미지의 왼쪽을 기준으로 간격을 균등하게 분배 ⑤Distribute horizontal center 링크된 이미지위 세로 중앙을 기준으로 간격을 균등하게 분배 ⑥Distribute right edges 링크된 이미지의 우측을 기준으로 간격을 균등하게 분배

5 Show Auto Slice / Hide Auto Slice

자동으로 분할된 자동 슬라이스 영역을 화면에서 감추는 기능입니다. 다시 클릭하면 감추어진 자동 슬라이스 영역이
화면에 다시 표시 됩니다.

 

사용자가 직접 영역을 지정하지 않아도 자동으로 생성되는 자동분할영역을 Slice Selection 옵션 상단
오른쪽 끝에 있는 Show Auto Slice 버튼을 클릭하면 생성이 되고 다시 한번 클릭하면 Hide Auto Slice
숨겨집니다

Slice Option

Slice Option은 분할된 영역을 슬라이된 각각의 이미지에 Html을 코딩할 때 사용하는 옵션입니다

분할 영역에 다른  홈페이지 혹은 웹페이지를 링크시킬 때 사용합니다  주소를 링크시키면 나중에 그 분할 영역은
마우스로 클릭할 수 있는 버튼으로 동작합니다

슬라이스 선택영역에서 마우스를 더블클릭하거나 마우스 오른쪽 단축메뉴에서 Edit Slice Option을 클릭하셔서
Slice Option 을 불러 옵니다

 

 

Slice Type : Image 와 html에서 선택

선택된 분할 영역을 웹에서 이미지로 표시할 것인지 글자로 표시할 것인지 선택할 수 있습니다
Image를 선택하면 원래 있는 이미지가 사용되고 No Image를 선택하면 원래 이미지는 사라지고 Html 문서의
배경 부분이 표시됩니다   No Image를 선택한 후 메세지를 입력하면 그 메세지가 Image 대신 표시됩니다

 

Name
슬라이스 된 이미지의 이름을 지정합니다 다른 이름을 지정하지 않으면 분할된 이미지들은
_01, _02, _03..이름으로 자동 저장됩니다 Name을 클릭하여 다른 이름을 지정할 수도 있습니다

 

URL
해당 분할 영역에 사이트를 링크시키는 기능입니다 자신의 홈페이지 계정이 있는 하위 웹 페이지(html문서)를
링크시킬 경우에는 Html문서가 저장되어 있는 디렉토리 명과 함께 링크시킬 Html문서의  파일명을 정확하게
입력해야 합니다

 

Target
링크시킨 분할 영역을 마우스로 클릭했을 때 다른 홈페이지가 열리는 방법을 지정할 수 있습니다

_blank : 새로운 웹브라우저가 실행되면서 그곳에 링크시킨 주소가 표시됩니다

_self 또는 _main : 현재  홈페이지가 사라지고 그곳에 링크 시킨 주소가 표시됩니다

_parent : 프레임이 나뉘어져 있는 경우 현재 프레임의 하위 프레임으로 링크시킨 주소가 표시됩니다

_top : 현재 프레임에 링크시킨 주소가 표시됩니다

 

 

Message Text
링크시킨 분할 영역에 마우스를 가져갈 때 나타나는 메세지를 입력합니다
이메시지는 웹브라우저의 왼쪽 최하단에 표시되는 메시지입니다

Alt Tag
링크시킨 분할 영역에 마우스를 가져갈 때 나타나는 풍선 메시지를 입력합니다

 

Dimensions : 이미지 크기의 재설정
슬라이스 선택툴로 선택한 분할 영역의 크기를 수치를 입력해 조절합니다
X, Y는 분할 영역의 가로 세로 시작점의 위치를 말하며 W, H는 분할 영역의 너비, 높이 입니다

수치를 입력하면 그 위치로 분할 영역이 이동되거나 크기가 바뀌게 됩니다

Slice Background Type
No Image를 선택해 분할 영역에 있는 이미지를 표시하지 않을 경우 사용합니다 배경으로 보이는 Html
문서의 색상을 설정합니다 Background Color를 클릭하면 원하는 색상을 지정하실 수 있습니다

 

 

_01 슬라이스 이미지에 링크를 설정을 합니다.

 

 

 

Save for Web 단축키 Alt+Shift+Ctrl+S 작업한 파일 저장

PC 저장옵션

 

파일형식_images_HTML and Images(*html)_setting(디볼트셋팅)_Slices(All Slices)설정_저장 버튼을 클릭합니다
이미지로 저장을 하면 폴더가 생성이 되고 Html으로 저장을 하면 Html문서로 저장이 됩니다

 

바탕화면에 저장된 Html 문서를 클릭하여 실행하시면 새창이 열리면서 이미지가 표시됩니다
링크된 이미지를 클릭하시면 풍선말이 표시되고 링크가 걸린 홈페이지로 이동합니다



다른 도구상자 더 알아보기(클릭하면 이동합니다)

Rdctangular Marquee Too(사각 선택도구) 알아보기

이 포스트가 유용하셨다면 1918.tistory블로그를 구독하세요