엘남매아빠

슬라이스 툴- Slice Tool (단축키 K)

· 19년 전 · 2717
슬라이스 툴- Slice Tool (단축키 K)

 

5.5 버전에서는 이미지 레이디를 통해서만 할수 있었던 슬라이스 기능이 6.0에서는 포토샵에서도 할 수 있게 되었다.
이 기능은 웹용 이미지를 제작할 때 쓰는 기능이다. 웹에 큰 이미지를 올리게 되면 로딩속도가 길어지고 또 이미지내의 특정부분에 링크를 걸 때는 불편함을 가지게 된다. 이 때는 이미지를 나누어 배치하는 것이 좋은데 바로 이 슬라이스 툴이 이미지를 나누는 툴이다. 이 때 File 메뉴의 Save For Web 을 이용하여 저장하면 나눈 이미지와 함께 html 문서로 저장할 수 있다.
 

bcb42da2e0.gif

확장 메뉴 (아이콘을 길게 누르고 있으면 나타난다)

 

742d452baa.gif

슬라이스 툴(Slice Tool - K)

다른 도구들과 마찬가지로 마우스 왼쪽 버튼을 누른 채로 드래그 앤 드롭으로 사용한다. 이때
이미지는 직사각형의 형태로만 나누어 진다. 이미지 내의 중앙 부분을 드래그 하게 되면 이미
지가 5개로 나뉘어 지는 것을 볼 수 있는데 이는 이미지가 직사각형의 형태 외에는 다른 형태
를 가질 수 없기 때문이다. 만약 슬라이스를 취소하고 처음부터 다시 작업을 하고 싶다면 키
보드의 Delete 키를 누르거나 마우스 우측버튼을 눌러서 나오는 창에서 delete slice를 선택
하면 된다.
 

d80e6886d6.gif

슬라이스 선택툴(Slice Select Tool-K)

슬라이스 툴로 나눈 이미지를 선택하는 툴이다. 원하는 부분을 선택하여 슬라이스 크기
등을 조절할 수 있다.
 

슬라이스 툴로 이미지를 나눈 상태

63608489eb.jpg

 
* 슬라이스 툴 옵션

d3c9e0bc44.gif

Style : 슬라이스 툴의 사용방법을 설정
Nomal : 드래그 앤 드롭으로 슬라이스 영역을 정할 수 있다.
Constrained Aspect Radio : 가로 세로의 일정한 비율을 정할 수 있다.
Fixed Size : 슬라이스 영역의 크기를 미리 정할 수 있다.
 
Show Slice Numbers
슬라이스의 순서를 말하는 번호의 화면 표시 여부를 정하는 옵션이다
 
Line Color
슬라이스 된 영역과 영역의 경계를 나타내 주는 선의 색을 지정하는 옵션이다. 어두운 이미지는 밝은 색을 밝은 이미지는 어두운 색을 지정해 주는 것이 보기 편하다.
 
 
* 슬라이스 선택툴 옵션
 

9ff7f42e54.gif

슬라이스 정렬 옵션

cd29766b17.gif

슬라이스로 나누어진 이미지들의 정렬 옵션이다. 맨 위로, 한단계 위로, 한단계 아래로, 맨 아래로 등이 있다.

 

Promoto to User Slice

슬라이스로 이미지를 나눈후 크기 등을 변경할려면 활성화가 되어 있어야 한다. 하지만 모든 부분이 활성화가 되어 있는 것은 아니고 직접 드래그 를 해서 그려준 부분만 활성화가 되어 있다. 나머지 슬라이스 부분을 편집할려면 이 버튼을 누르고 활성화를 시켜주어야 한다.

 

Slice option

슬라이스된 각각의 이미지에 html을 코딩할 때 사용하는 옵션이다.

Slice Type: Image와 Html에서 선택

Name: 슬라이스 된 이미지의 이름을 결정

URL: 슬라이스 된 이미지의 하이퍼 링크

Target: 하이퍼 링크가 열릴 타켓

Message Text: 마우스를 위치했을 때의 설명

Alt Tag: 마우스를 위치했을 때 브라우저 하단에 나타날 설명

Dimensions: 이미지 크기의 재설정

8904990085.jpg


 


슬라이스 된 이미지의 저장

슬라이스 된 이미지를 저장하려면 Save For Web을 사용해야 한다. Save For Web은 슬라이스 된 이미지의 저장 뿐 아니라 웹 이미지 저장에 필요한 여러 옵션들을 가지고 있다. Menu 를 공부할 때 다시 다루기로 하겠습니다.

[이 게시물은 관리자님에 의해 2011-10-31 16:52:33 Photoshop에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
19년 전 조회 3,513
19년 전 조회 1,466
19년 전 조회 1,523
19년 전 조회 1,820
19년 전 조회 2,261
19년 전 조회 1,882
19년 전 조회 1,748
19년 전 조회 2,159
19년 전 조회 2,247
19년 전 조회 5,006
19년 전 조회 2,373
19년 전 조회 3,250
19년 전 조회 2,690
19년 전 조회 2,467
19년 전 조회 4,742
19년 전 조회 2,605
19년 전 조회 2,447
19년 전 조회 1,991
19년 전 조회 1,778
19년 전 조회 3,394
19년 전 조회 2,370
19년 전 조회 6,196
19년 전 조회 2,063
19년 전 조회 1,948
19년 전 조회 2,745
19년 전 조회 1,854
19년 전 조회 2,323
19년 전 조회 2,150
19년 전 조회 3,602
19년 전 조회 2,618
19년 전 조회 2,786
19년 전 조회 4,405
19년 전 조회 3,581
19년 전 조회 2,368
19년 전 조회 4,337
19년 전 조회 3,323
19년 전 조회 4,176
19년 전 조회 2,047
19년 전 조회 2,254
19년 전 조회 2,185
19년 전 조회 3,383
19년 전 조회 2,757
19년 전 조회 3,556
19년 전 조회 2,712
19년 전 조회 2,558
19년 전 조회 2,386
19년 전 조회 2,270
19년 전 조회 2,163
19년 전 조회 4,298
19년 전 조회 2,718
19년 전 조회 2,193
19년 전 조회 2,291
19년 전 조회 2,892
19년 전 조회 1,993
19년 전 조회 3,245
19년 전 조회 2,797
19년 전 조회 2,305
19년 전 조회 1,844
19년 전 조회 2,284
19년 전 조회 2,048
19년 전 조회 1,938
19년 전 조회 2,495
19년 전 조회 2,357
19년 전 조회 3,933
19년 전 조회 3,772
19년 전 조회 2,281
19년 전 조회 3,335
19년 전 조회 1,992
19년 전 조회 2,433
19년 전 조회 2,318
19년 전 조회 2,380
19년 전 조회 2,208
19년 전 조회 2,846
19년 전 조회 2,857
19년 전 조회 3,200
19년 전 조회 3,071
19년 전 조회 2,746
19년 전 조회 2,968
19년 전 조회 3,206
19년 전 조회 2,918
19년 전 조회 2,648
19년 전 조회 2,965
19년 전 조회 4,546
19년 전 조회 2,465
19년 전 조회 2,474
19년 전 조회 3,527
19년 전 조회 3,196
19년 전 조회 2,842
19년 전 조회 2,088
19년 전 조회 1,816
19년 전 조회 2,907
19년 전 조회 1,772
19년 전 조회 2,342
19년 전 조회 3,985
19년 전 조회 3,773
19년 전 조회 3,484
19년 전 조회 3,444
19년 전 조회 1,601
19년 전 조회 1,967
19년 전 조회 1,890