Slice Tool(Slice Selection Tool) / Save for Web [포토샵 CS6]

Slice Tool (분할영역 도구)

 

이미지를 여러 조각으로 자르는 기능을 한다. HTML 테이블을 사용하는 웹 페이지에서 사용할 이미지의 용량이 클 경우 이를 여렇으로 나눠 다시 재조합해 사용(용량이 큰 이미지를 그대로 사용할 때보다 로딩 속도가 빨라진다) 하거나 나눠진 이미지에 별도의 하이퍼 링크를 걸때 등에서 사용한다.

 ☞ 슬라이스 툴 사용 시 Ctrl키를 누르는 동안에는 슬라이스 셀렉트 툴 변경되어 기능한다.

 

· Style

 - Fixed Aspect Ratio: 유저 슬라이스 비율(가로, 세로)을 지정한다.

 - Fixed Size: 사용할 사이즈(단위)를 지정한다.

· Slices From Guides: 가이드 라인을 기준으로 슬라이싱 한다.

 

해당 툴을 선택한 후 이미지에 드래그를 통해 선택영역을 지정하면 간단하게 이미지가 잘리게 된다.

 

 

User Slice와 Auto Slice

이미지에 표시된 부분을 슬라이스 툴을 이용해 잘라보자.

 

한곳을 잘라냈기 때문에 자른 부위와 남겨진 부위로 두곳이 나눠져야 하지만 결과적으로 총 3조각으로 이미지가 나뉘졌다.

 ☞ 슬라이스 툴로 자른 이미지는 직사각형의 형태로 지정되기 때문에 위와 같이 두개가 아닌 셋으로 이미지가 나눠진다.

 

자른 부분을 유저 슬라이스라 하고 남겨진 부분을 오토 슬라이스라 하는데 이는 유저 슬라이스를 이동하거나 변경하게 될시 나머지 부분들이 자동으로 유저 슬라이스에 맞춰 변화되기 때문이다.

 ☞ 슬라이스의 이동 및 크기를 조절은 유저 슬라이스에서만 가능하다.

 

이미지가 슬라이스 되면 좌측 상단에 슬라이스 넘버와 배지가 표시되는 것을 볼 수 있다.

상단의 표시의 색으로 유저 슬라이스와 오토 슬라이스를 구분 할 수 있는데, 유저 슬라이스는 파란색으로 표시되며 오토 슬라이스는 회색으로 표시된다. 슬라이스 넘버는 이미지 저장시 파일 이름이 되며 배지는 해당슬라이스의 속성을 나타낸다. 그런데 오토슬라이스 배지의 옆을 보면 링크 표시가 하나 더 생기는데 이는 유저 슬라이스에 영향을 받아 해당 슬라이스의 형태가 변할 수 있음을 표시하는 것이다.

 ☞ 슬라이스 툴을 사용하고 나면 자동으로 슬라이스 넘버와 배지가 나타나게 되는데 View - Show - Slices 항목의 체크를 해제하면 표시가 나타나지 않는다.

 

 

 

 

Slice Select Tool (분할영역 선택 도구)

 

슬라이스 셀렉트 툴은 유저 슬라이스의 위치를 옮기거나, 크기를 조절하거나 해당 이미지에 하이퍼 링크를 걸거나 속성을 부여할때 사용되는 도구이다.

☞ 유저 슬라이스는 파란색 라인을 보이는데 슬라이스 셀렉트 툴로 선택이 되면 테두리 선이 갈색으로 변화한다.

 

· Bring to Front / Bring Forward / Send Backward / Send to Back: 아이콘을 이용해 슬라이스를 배열한다.

 ☞ 겹쳐지는 슬라이스 영역의 층을 조절하여 보이고자 하는 부분과 가리고자 하는 부분을 조정한다.

· Promote: 오토 슬라이스를 유저 슬라이스로 변경 시킨다.

· Divide: 이미지 전체나 유저슬라이스를 수치에 따라 가로/세로로 정확히 등분 또는 지정된 픽셀 간격에 따라 슬라이스 한다.

 ☞ 캔버스에 여러 이미지를 일정하게 배치하고자 할때 Divide Slice를 활용할 수도 있다.

· Align: 2개 이상의 유저 슬라이스를 선택하면 활성화된다. 위, 아래, 왼쪽, 오른쪽, 가운데 정렬을 할 수 있다.

· Distribute: 3개 이상의 레이어를 선택하면 활성화 된다. 레이어 간의 간격을 균일하게 맞출 수 있다.

 → Top Edges / Vertical Centers / Bottom Edges / Left Edges / Horizontal Edges / Right Edges

· Hide / Show Auto Slices: 오토 슬라이스를 감추거나 보이게 한다.

· Slice Options: 슬라이스의 속성을 편집한다. (해당 슬라이스를 더블 클릭해도 같은 기능)

 ☞ Slice Options 대화상자를 통해 슬라이스의 이름/하이퍼링크 등의 태그를 삽입하거나 해당 슬라이스의 위치와 크기 등을 조절할 수 있다.

· Slice Type (타입 선택에 따라 배지 모양이 다르게 나타난다)

· Image: 해당 슬라이스 영역을 이미지 파일로 저장한다.

 - Name: 저장할 파일명

 - URL: 해당 슬라이스에 하이퍼링크를 걸 경우의 URL 기입

 - Target: 하이퍼링크를 클릭할 경우 새로운 페이지를 표시할 영역을 지정

 - Message Text: 해당 슬라이스에 마우스를 가져갈 경우, 웹 브라우저 상태바에 표시할 텍스트를 기입

 - Alt Tag: 웹 사이트에서 해당 이미지를 표시하지 못할 경우 출력할 메세지를 표시

· No Image: 슬라이스 영역이 이미지로 저장되지 않고 공백인 상태로 남는다.

 ☞ 주로 웹사이트제작을 목적으로 하는 슬라이스 작업에서 이미지가 차지하는 용량을 아끼기 위해 사용하거나, 별도의 텍스트 혹은 html 코드를 입력하기위해 No Image 타입을 선택한다.

· Dimensions: 슬라이스의 가로/세로 크기와 위치를 지정한다.

· Slice Background Type: 해당 슬라이스가 투명한 배경을 가질 경우 또는 No Image로 슬라이스 타입을 사용할 경우의 배경색을 선택한다.

 → None, Matte, White, Black, Other중 하나를 선택할 수 있어요.

 

 

※ 우클릭 옵션 (Slice Select Tool의 포함된 옵션은 생략)

· Delete Slices: 선택한 유저 슬라이스를 삭제한다. (Delete 키로 삭제할 수도 있다.)

· Combine Slices: 인접한 슬라이스를 합친다. (합치고자 하는 슬라이스들을 Shift키를 사용해 선택)

 

※ Layer Based Slice: 레이어를 기준으로 슬라이스 영역을 분할/저장한다. [Layer - New Layer Based Slice]

Layer Based Slice는 슬라이스 셀렉트 툴로 수정을 하지 않고 선택 툴 및 무브 툴을 활용해 수정해야 한다. 수정된 이미지에 따라 오토 슬라이스가 작용한다.

 ☞ Layer Based Slice는 레이어 슬라이스 배지를 따로 가지고 있다. (배지의 모양이 다름)

 

 

 

 

보통 웹용 및 장치용으로 용량을 줄여 저장 해야 할 경우에 사용한다. 웹용으로 사용하기 위해 이미지를 슬라이스 툴을 이용해 조각 냈다면 Save for Web(웹용으로 저장)으로 저장 후 사용한다. 

 

 

 

[좌측 상단 툴]

· Hand Tool(1): 미리보기 창 확대 시 핸드 툴을 이용해 미리보기 창을 움직여 해당 부위를 확인 할 수 있다. 

· Slice Select Tool(2): 미리보기 창에서 슬라이스 이미지를 지정해준다.

  ☞ 슬라이스 이미지가 선택되면 우측 패널을 통해 해당 이미지를 설정 할 수 있으며 슬라이스 이미지의 확장자가 같을 경우 Shift를 이용해 복수의 슬라이스를 선택 해 한번에 확장자를 바꾸어 줄 수도 있다.

· Zoom Tool(3): 미리보기 창의 이미지를 클릭하면 확대, Alt를 누른 상태로 클릭하면 이미지가 축소된다.

· Eyedropper Tool(4): 이미지를 클릭하면 해당 부위의 컬러가 Eyedropper Color(5)에 표시되고 하단 (C)에 컬러의 정보가 나타난다.

· Toggle Slice Visibility(6): 클릭 시 슬라이스 영역을 보이거나 보이지 않게 한다.

· Preview dialogue(7): 옵션의 세팅 결과물을 미리보거나 원본 이미지와 비교해 볼 수 있다.

  → Original / Optimized / 2-Up / 4-Up

 

[하단 항목]

· 이미지 속성(A): 설정한 이미지의 속성(확장자, 파일 용량, 속도별 전송 예상 시간)등을 확인할 수 있다.

· 줌 레벨(B): 줌 툴로 확대 및 축소의 정도가 표시되며, 줌 레벨에서 직접 수치를 입력하여 확대/축소를 할 수도 있다.

· 스포이트 컬러 정보(C): 스포이트 샘플의 컬러 정보가 표기된다.

· Preview(D): 웹브라우져 상에서 보여질 이미지를 미리보기 한다. 설정(E)을 통해 사용 브라우져를 선택할 수 있다.

 

[우측 패널]

· Preset Optimize Menu(8)

· Save Settings: 옵션 사항을 프리셋으로 저장한다.

· Delete Settings: 옵션 사항을 프리셋에서 삭제한다.

· Optimize to File Size: 지정된 파일 사이즈로 슬라이스 이미지를 자동으로 최적화시킨다.

· Repopulate Views: Preview dialogue 4-Up에서만 활성화된다. 원본을 제외한 나머지 3개의 미리보기를 자동으로 최적화 시킨다.

· Link / Unlink (All) Slices: Save for Web상의 슬라이스 셀렉트 툴로 다중 선택시 활성화 된다. 링크가 걸린 슬라이스 중 하나의 설정만 변경해도 나머지 링크 슬라이스들의 설정이 따라서 변경된다.

· Edit Output Settings: 출력할 파일에 대한 기타 설정들을 편집할 수 있다.

 

· Optimized file format(9): 저장시 확장자에 따른 옵션을 설정한다.

  ☞ 확장자에 따라 다른 옵션들이 나타난다. 웹 환경 사용에 적합하도록 옵션을 조정해 줄 수 있다.

1. GIF

· Color Reduction

 - Perceptual: 보기에 가장 좋은 컬러 테이블의 조합을 사용한다.

 - Selective: Perceptual과 비슷하나 웹 환경에 더 적합한 컬러를 사용한다. (GIF 저장시 기본값 )

 - Adaptive: 원본 이미지에 가장 충실한 색상을 사용한다.

 - Restrictive: 8비트 컬러 테이블을 사용한다.

· Color: 웹상에서 지원되는 컬러(2~~256)를 설정한다. 숫자가 낮을수록 파일의 용량이 작아지고 높을수록 색이 풍부해진다.

· Dithering: 한정된 색상을 이용해 이미지를 더 잘 표현하기 위한 기술

 - Diffusion: 랜덤 패턴을 디더링에 적용한다. (Pattern 방식에 비해 자연스럽지만 디테일이 약간 떨어짐)

 - Pattern: 하프톤과 같은 사각형태의 패턴을 적용한다.

 - Noise: Diffusion 방식과 같이 랜덤 패턴을 디더링에 적용한다. (거친 느낌이 특징)

· Transparency: 투명한 부분을 이미지에 적용할지의 여부를 결정한다.

· Matte: 투명한 부분을 표현할 색상 지정한다.

· Transparency Dither: 이미지 반투명 부분의 디더링 적용 여부와 방식을 지정한다.

· Interlaced: 웹 환경에서 이미지가 다운로드 되기전 낮은 해상도로 이미지를 표현하는 방식의 사용 여부를 결정한다.

· Web Snap: 웹 환경에서 사용되는 컬러로 시프트하는 비율을 설정한다.

· Lossy: 이미지 압축시 허용되는 손실값으로 높을 수록 이미지의 화질은 떨어지지만(입자가 굵어짐) 용량은 감소한다.

 

2. JPEG

· Compression Quality: 이미지 파일을 압축할때의 품질을 지정한다.

 → Low(0~29) / Medium(30~59) / High(60~79) / Very High(80~99) / Maximum(100)

· Progressive: 웹 환경에서 이미지가 다운로드 되기전 낮은 해상도로 이미지를 표현하는 방식의 사용 여부를 결정한다.

· Blur: 파일 용량을 줄이기 위해 이미지에 흐림 효과를 적용정도를 설정한다.

· Optimized: 파일 용량을 줄이기 위한 최적화 여부를 결정한다. (보통 Maximum 사용)

· Matte: 투명한 부분을 표현할 색상 지정한다.

· Embed Color Profile: ICC 프로파일에 기반한 컬러를 포함시킨다.

 

3. PNG-8 / PNG-24 / WBMP

 ☞ GIF 동일 옵션항목 생략

 

· Convert to sRGB(10): 출력될 이미지에 sRGB 색 공간을 적용시킨다.

· Preview: 미리보기에 사용될 컬러 프로파일을 선택한다.

· Metadata: 포함 시킬 메타 데이터를 선택한다.

 

· Color Table(11): 이미지 저장 포멧이 GIF, PNG-8, WBMP 일 경우에 활성화된다. 이미지 표현 시 사용할 컬러를 보여주며 임의로 컬러 테이블을 편집, 저장 및 저장된 컬러 테이블을 불러올 수 있다.

 

· Image Size(12): 저장될 이미지의 크기를 픽셀값을 입력하거나 퍼센트 수치를 입력해 조절할 수 있다. (원본과는 별개로 출력 사이즈 이미지만 변경됨)

 

· Quality: 이미지 변형에 사용될 인터폴레이션(이미지의 형태나 변화에 따라 픽셀의 조합)형식을 선택한다.

  → Nearest Neighbor: 확대/축소시 보정없이 중간값으로 조정(화질↓속도↑)

  → Bilinear: 확대/축소시 주변값의 평균값으로 부드럽고 흐릿하게 조정

  → Bicubic: 그라데이션에 최적하게 조정

  → Bicubic Smoother: 이미지확대시 픽셀의 경계를 보다 부드럽게 조정

  → Bicubic Sharper: 이미지축소시 픽셀의 경계를 보다 선명하게 조정

 

· Save: 설정이 완료되면 세이브를 클릭하여 저장한다.

 → Save Optimized As 대화상자: 저장경로, 파일이름, Format (HTML and Images)형식, 저장할 슬라이스 형식 등을 선택하여 저장한다.

 ☞ 웹에서 이미지들을 재조합하기 위해서는 HTML 파일이 필요하기 때문에 이미지와 HTML을 함께 저장해줘야 한다. 생성된 이미지는 이미지 파일에 저장되며, HTML 파일을 웹페이지 제작 프로그램이나 메모장 등에서 확인할 수 있다.

 

 

 

<Slice Tool(Slice Selection Tool) / Save for Web [포토샵 CS6]>