안녕하세요
임화연입니다.
9월 입니다.
쇼핑몰을 예쁘고 실용적으로 만들기 위해 시리즈로 제공하는 포토샵으로 꾸미는 기능은 이번이 마지막
이네요
오늘은 SLICE기능을 이용해서 디자인이 완성된 후에 이미지를 자르는 방법을 살펴보겠습니다.
웹상에서 작동하는 쇼핑몰은 빠른 로딩 속도가 생명입니다.
이미지를 빠르게 자르고, 최상의 퀼리티를 유지하는 쇼핑몰을 만드는데는 오늘 공부하는 SLICE기능이
절대적으로 필요합니다.
SLICE기능은 파일이름등이 저장되어
다음에 수정사항이 생겨도 파일이름을 그대로 저장해서 이미지의
이름이나 사이즈등을 다시 찾을 필요가 없습니다.
10월 부터는 포토샵을 접하는 초보분들을 위해서 포토샵 기본기능 부터 연재를 할 것입니다.
포토샵이 필요했지만, 접할 기회가 없거나 어렵다고 느끼셨던 분들은
10월 부터 기대해주세요. |
|
| |
| ▶ 쇼핑몰 디자인이 완료 되었다면,Slice기능으로 이미지를 잘라냅니다. |
| |
|
| |
| 1. Slice 기능 둘러보기 |
| |
 |
Slice Tool
:
이미지를 분할 하는 툴입니다.
Slice Select Tool :
분할된 이미지를 선택하여 속성등을 설정합니다. |
|
| |
|
|
| |
| 2.디자인된 쇼핑몰 파일을 열고 Slice Tool기능을 사용해
봅시다. |
| |
포토샵에서 완성된 쇼핑몰 디자인 입니다.
디자인이 완성되었으면 이미지를 분할하여 다시 나모,드림위버에서 편집하는 작업이 필요합니다.
그러한 과정중에 포토샵에서 이미지를 쉽고 편리하게 분할할 수 있는 기능이 Slice입니다.
다음의 순서대로 Slice기능을 하나씩 따라해 보세요. |
| |
 |
| |
Tool에서 Slice Tool을 선택하고,
분할하려는 이미지의 위에서 왼쪽 상단에서 오른쪽 아래로 드레그합니다.
드레그하는 만큼 이미지가 분할됩니다. |
| |
 |
| |
| 3.Slice Select Tool기능을 사용해 봅시다 |
| |
분할한 이미지에 대한 이름이나 기타 속성을 설정하기 위해
Slice Select Tool 을 선택합니다.
Slice Select Tool은 분할한 이미지를 선택해서 크기를 조절하거나, 위치를 이동하기도 합니다. |
| |
 |
| |
| 분할한 이미지 위에서 더블 클릭합니다. |
| |
 |
| |
| 아래와 같은 Slice Options 창이 활성화 됩니다. |
| |
 |
| |
- Slice Type : 분할할 타입을 Image로 선택합니다.
- Name : 저장할 이미지의 이름을 입력합니다.
여기에 입력하는 이름은 파일을 저장하면 모두 기억됩니다.
- URL : html페이지로 저장할 경우 이미지에 링크를 설정하는 것이 가능합니다.
편집할때, 링크를 다시 설정하는 불편함을 덜 수도 있습니다.
- Target : 링크를 설정할때, 창을 설정합니다.
- Alt Tag : 마우스가 오버했을때, 보여질 설명글을 입력합니다.
- Dimensions : X,Y좌표와 W,H가로 세로 크기를 설정합니다.(미세한 조정이 필요할때
사용합니다)
- Slice Background Type : 분할된 이미지의 배경을 처리할 색을 선택합니다.
|
| |
| 4.가이드 라인을 이용한 간편한 Slice기능 |
| |
|
오늘쪽에 있는 배너를 Guide라인을 이용해서 더 쉽게 분할해 보겠습니다.
1. 가이드라인을 자르려는 배너 주위에 그려줍니다.
2. 
상단의 속성바에서 Slices From Guides 를 선택합니다.
3. 왼쪽 가이드 이미지가 오른쪽의 슬라이스를 통해 이미지로 분할 되었습니다.
|
| |
| < Guide를 그린 모습 > |
|
< Guide가 Slice로
분할된 모습 > |
 |
|
 |
|
| |
| 이미지가 위의 배너 처럼 각이 정확한 것이라면, 가이드라인을 이용해서 분할하면 더욱 빠르게 분할하는
것이 가능합니다. |
| |
| 5. Divide Slice를 이용한 이미지를 정확한 사이즈로 분할하기 |
| |
이번의 경우는 이미지 4개가 정확히 사이즈가 동일합니다.
이럴때 편리한 기능은 Divide Slice 기능입니다.
1. Slice Tool을 이용해서 4개의 이미지를 포함하는 만큼을 드레그하여, 하나의 슬라이스로 분할합니다.
2. Slice Select Tool 을 선택해서, 방금 분할한 슬라이스를 선택합니다. |
| |
 |
| |
3. 
을 클릭합니다. |
| |
| 분할할 슬라이스의 갯수를 입력합니다. |
| |
 |
| |
- Divide Horizontally Into : 가로로 분할한 슬라이스의 갯수를 입력합니다.
- Divide Vertically Into : 세로로 분할한 슬라이스의 갯수를 입력합니다.
|
| |
4. 아래 보시는 것처럼 입력한 갯수 만큼 하나의 이미지가 4개로 분할되었습니다.
이렇게 하고 나면, 따로 사이즈를 조절하거나 하는 등의 기타 작업이 필요하지 않아 빠르게 작업이 가능합니다. |
| |
 |
| |
| 6. 최적화 상태로 저장하기 |
| |
이미지를 알맞은 크기로 분할 했다면, 이제 각각의 분할된 이미지를 저장합니다.
이미지를 적절한 압축 방식을 선택해서 저장하는 것은 쇼핑몰의 로딩 속도를 조절하는 핵심입니다.
File > Save for Web 을 선택해서 각각의 이미지의 압축을
조절하면서 저장해 봅시다. |
| |
 |
| |
Save for Web 기능은 이미지의 압축율을 조정해서, 최적화된 이미지를 만들기 위한 기능입니다.
Save for Web의 자세한 기능들을 살펴 봅시다. |
| |
 |
| |
|
|
| |
저장할 이미지들을 선택합니다.
① Slice Select Tool 을 선택합니다.
② Shift키를 누른 상태로 분할한 슬라이스들을 선택합니다.
선택한 이미지들은 노란색 테두리가 생깁니다.
③ 선택한 이미지들의 압축 방식을 선택합니다. (gif,jpg중에서 선택)
④ Save버튼을 누릅니다. |
| |
 |
| |
Save버튼을 누르면 아래와 같은 저장위치 선택 화면이 활성화 됩니다.
이미지만 저장하는 경우는 파일이름은 적용되지 않습니다.
각각의 이미지의 이름은 Slice Select Tool로 이미지를 더블클릭하고, 속성창에서 입력했습니다.
+ 파일 형식 : Images Only 를 선택합니다.
+ Settings : 기본 형으로 둡니다.
+ Slice : 선택한 이미지 슬라이스만 저장되도록 Selected Slices 를 선택합니다.
다 되었다면, 저장 버튼을 누릅니다. |
| |
 |
| |
| 선택한 이미지들이 차례대로 저장되었습니다. |
| |
Slice기능은 많은 이미지들을 한번에 저장하는데 아주 유용한 기능입니다.
천천히 따라해 보시고, 많이 활용하시기 바랍니다.
다음달에는 더욱 쉽게 접근하는 포토샵을 기대해주세요. ^^
|
: 선택한 슬라이스를 제일 위로 올립니다.
: 선택한 슬라이스를 한단계 앞으로 올립니다.
: 선택한 슬라이스를 한단계 뒤로 내립니다.
: 선택한 슬라이스를 제일 뒤로 내립니다.
: 큰 이미지의 경우 드레그하여 이미지를 이동합니다.
: 분할된 이미지를 선택합니다. (Shift + 
: 클릭하면 이미지가 확대, (Alt + 
