슬라이스 툴 (Slice)

Design 2014. 12. 28. 12:58 Posted by mine4sw

슬라이스툴은 이미지를 구획을 나누어서 쪼개주는 기능이다. 웹 이미지를 제작한 뒤 홈페이지를 올려 놓으면 이미지의 용량이 커 로딩속도가 늦어지는 경우가 발생하는데 이런 경우에는 이미지를 쪼개서 배치하는 것이 좋은데, 이때 슬라이스툴을 사용하면 웹 이미지를 정교한 형태로 쪼갤 수 있다.


슬라이스툴은 이미지를 구획을 나누어서 쪼개주는 기능이다. 웹 이미지를 제작한 뒤 홈페이지를 올려 놓으면 이미지의 용량이 커 로딩속도가 늦어지는 경우가 발생하는데 이런 경우에는 이미지를 쪼개서 배치하는 것이 좋은데, 이때 슬라이스툴을 사용하면 웹 이미지를 정교한 형태로 쪼갤 수 있다.

슬라이스툴
은 이미지를 쪼개는 기능만 제공한다. 그외 다른 기능은 제공하지 않는다. 쪼개진 이미지는 화면상에는 보이지 않지만 File-Save for Web 메뉴로 저장하면 이미지를 쪼개진 상태로 저장한다.

Style 옵션
슬라이스툴의 사용 방법을 설정한다. 
Nomal : 일반적인 방법(마우스 드래그)으로 슬라이스 영역을 지정할 수 있다.
Contrained Aspect Ratio : 가로, 세로 일정비율로 슬라이스 영역을 지정할 수 있다.
Fixed Size : 입력한 수치대로 무조건 슬라이스 영역이 지정된다.
 
Show Slice Numbers 옵션
슬라이스 순서를 말하는 슬라이스 번호의 화면 표시여부를 선택할 수 있다. 일반적으로 슬라이스 번호가 보이는 상태가 작업하기 쉽다.
 
Line Color
슬라이스 선의 색상을 선택할 수 있다. 작업이미지가 어두울 경우엔 밝은 색으로 선택한 뒤 작업하는 것이 좋다.

슬라이스 선택툴은 작업슬라이스를 선택할 때 사용한다. 선택된 슬라이스는 슬라이스 라인이 반전되어 표시된다.

슬라이스 정렬 옵션
슬라이스를 겹치게 그리면 활성화되는 기능이다. 작업중인 슬라이스를 맨 뒤로 올릴지 아니면 맨 아래로 보낼지를 결정할 수 있다. 왼쪽에서부터 Bring slice to Front, Bring slice Backward, Send slice to Back 기능이다.
 
Promote to User Slice 옵션
주인이 되는 슬라이스를 결정해준다. 마우스로 클릭할 때 최초로 그려진 슬라이스가 주인 슬라이스이며, 그 옆에 파생되어 있는 다른 조각들을 주인으로 승격하려면 해당 슬라이스를 선택할 뒤 이 버튼을 클릭한다.
 
Slice Options 옵션

슬라이스된 각각의 이미지에 홈페이지 html 코딩 값을 입력할 때 사용한다.


1. Extract 기능을 사용해서 배경을 지우고 투명한 이미지로 만들는 방법을 알아보도록 하겠습니다. 작업할 이미지를 불러옵니다.


2 . Fliter 메뉴에서 Extract 를 클릭합니다.

3. Extract 대화상자가 나타납니다. Tool Options 항목에서 브러시 크기를 15로 입력하고, Smart Highlighting을 체크 표시가 나타나게 합니다. 이옵션은 자석 선택 툴처럼 색상 차이가 분명한 경계선을 자동으로 선택해 줍니다.

4. 아무 곳이나 시작점을 클릭한 후 이미지의 외관선을 그리면 초록색으로 표시됩니다. 외관선을 그리다 조금 실수를 하더라도 나중에 수정할 수 있으니 대충 경계선을 그려줍니다.

5. 다 그렸으면 채우기(Fill Tool)을 선택한 후 테두리 안쪽을 클릭합니다.

6. 파랑색으로 채워지면 잘 된 것입니다. 상태를 확인하기 위해 Preview 버튼을 클릭합니다.

7. 파랗게 칠해진 부분을 제외하고 나머지 부분는 다지워집니다. 필요 없는 배경이 지워진 부분도 있고 지저분하게 남아 있는 부분도 있음으로 현재 상태를 자세히 보기 위해 Preview 항모에서 Display 드롭다운 단추를 클릭후 Gray Matte 를 선택합니다.

8. 이제 확실하게 보이겁니다. 클린업 툴(Cleanup Tool)을 사용해서 지우고 싶은 부분을 정리합니다. 원래 이미지를 살려야 할 부분은 [Alt] 키를 누른 채 클린업 툴로 드래그하면 됩니다. 테두리 다듬기 툴(Edge Touchup tool)도 사용하여 가장자리를 다듬어 보세요. 작업이 끝났으면 OK 버튼을 클릭하여 익트랙트 창을 빠져나갑니다.

9. File 메뉴에서 Save for Web 을 클릭합니다.

10. Save For Web 대화상자에서 4-Up 탭을 클릭한 후 Transparency 에 체크가 되었는지 확인합니다. Matte 드롭다운 단추를 클릭하여 Other 를 클릭한 후 이미지의 바탕색으로 쓰일 색을 결정합니다. 이때 바탕색을 선택하는 이유는 투명 이미지를 저장할 때 기본적으로 이미지의 외관에 흰색의 Anti-aliasing이 적용되는데, 다른 색의 바탕에서는 지저분한 테두리가 보이기 때문에 이것을 방지하기 위해서 바탕색으로 Anti-aliasing을 적용하는 것입니다.

※ Anti-aliasing 이란?
그래픽 프로그램에서 화면의 영상을 자연스럽고 매끄럽게 표현하도록 해 주는 화면 처리 기법. 모니터 화면의 영상 정보는 2차원으로 배열된 점에 의해 전달되는데, 화면의 점의 개수가 적으면 들쑥날쑥한 계단 현상이 일어나 화면이 매끄럽지 못합니다. 이를 방지하기 위해 각 점 사이에 배경 색과 중간 색조의 점을 추가하여 화면을 자연스럽게 표현하는 화면 처리 기술입니다.

 

 Edge Highlighter Tool - 배경에서 추출 이미지의 테두리를 그려줍니다.

 Fill Tool - 테두리가 완성된 후에 남겨질 부분을 칠해줍니다.
 Eraser Toll - 칠해진 부분을 지웁니다.
 Eyedropper Tool - 이미지의 한 가지색으로 이루어진 부분만을 남기고 나머지 부분을 제거할 때, 남길 색을 지정합니다. 오른쪽의 Force Foreground 를 사용할때만 필요한 툴입니다.
 Cleanup Tool - Preview 버튼으로 추출된 이미지에서 필요 없는 부분을 지웁니다. [Alt] 를 누르면 추출 과정에서 잘려나간 부분도 다시 나타나게 합니다.
 Edge Touchup Tool - Preview 버튼으로 추출된 이미지에서 지저분한 테두리를 깔끔하게 정리합니다.
 돋보기 툴 - 이미지를 확대/축소 ([Alt] 를 클릭한 경우 축소) 합니다.
 손 툴 - 확대된 이미지를 이동합니다.
 Brush Size - 브러시의 크기를 조절합니다.
 Highlight - Edge Highlighter Tool 로 칠해지는 색을 지정합니다.
 Fill - Fill Toll 로 채워지는 색을 결정합니다.
 Smart Highlighting - 경계선을 자동으로 찾아줍니다.
 Extraction 항목 - 이미지에서 선택된 색으로 이루어진 부분만을 남기고 모두 지웁니다.
 Preview 항목 - 미리보기의 세부 항목을 결정합니다.

 

1. 작업을 하다보면 자기도 모르게 슬라이스 툴을 잘못 누러 이미지에 선택 영역 표시가 생기는 겨우 없애버리는 방법을 알아보겠습니다. 

2. View 메뉴에서 Show - Slices 를 클릭 하시면 됩니다.


안드로이드 아이콘 만들기

Design 2014. 12. 28. 11:40 Posted by mine4sw

안드로이드 아이콘(.ico) 파일 만들 때,

아래 사이트에서 하시면 매우 편리합니다.


안드로이드 개발의 경우 다양한 사이즈의 아이콘이 필요하기 때문에

사이즈별 아이콘을 디자이너에게 요청하게 됩니다.


http://romannurik.github.io/AndroidAssetStudio/


(1) 아래와 같이 "Launcher icons" 클릭하시고,



(2) "Foreground" -> "Image" 버튼 클릭 하셔서 아이콘 만드실 이미지 업로드 하시면 됩니다.


저의 경우,

최근에 배경 없이 아이콘만 보여주는 것이 좋아서

투명 이미지가 되는 PNG 포맷으로 대부분 작업합니다.


그럼 편리하게 이용하세요~ ^^

지난 번 하수-마술봉툴 누끼 따기에 이어 펜툴 누끼 따기 포토샵을 하려고 해요~

마술봉 툴은 색상을 구분해서 그 경계로 영역을 선택하죠

그래서 흰배경의 흰물체 , 즉 누끼를 따려고 하는 물체와 배경색상이 비슷하면 누끼를 딸 수 없어요.

그래서 일반적으로 펜툴 누끼를 많이 이용합니다.

 

먼저 포토샵에서 누끼를 따려는 이미지를 열어주셨죠?

자 그럼 중수 버젼-펜툴

궈 궈~

 

1. 펜툴을 클릭해 주세요.

펜툴 : 영역을 지정하거나 오브젝트를 그릴 때 사용하며 패스를 따라 선,면,선택 영역을 만들 수 있어요.

곡선의 이미지 누끼를 딸 때 좋아요~

 

2. 옵션바의 두번 째 paths를 선택하세요.

 

 -Shape layers: 벡터형식으로 도형을 그림
-paths: 좌표로 영역을 선택하여 그림

  

3. 추출하고자 하는 영역의 시작기준점을 클릭+드래그 합니다.

펜툴로 누끼를 딸 때에는

이미지를 확대해서 보시는게 편해요

단축키: Ctrl + '+'


4. 다음 기준점을 클릭 한 상태에서 드래그하면 곡선모양의 형태가 생깁니다.

추출할 이미지에 맞게 곡선을 그려줍니다.

 

5. 내가 클릭한 점을 앵커포인트라고 하며 드래그 해서 나온선을 방향선이라고 해요.

내가 가려고 하는 방향과 방향선의 방향이 같으면 다음 앵커포인트를 클릭하고

드래그 하는 방식으로 진행해 주세요.

 

하지만 다음과 같이 내가 진행하려고 하는 방향과 방향선의 방향이 틀릴 경우

art+앵커포인트 클릭 을 하여 방향선을 제거해 줍니다.


6. 처음 기준점과 마지막 점을 연결합니다.

 

 

   



 

 

 

7. 완성된 패스에 오른쪽 마우스 버튼을 클릭한 뒤 make selection을 선택합니다.
 Feather radius: 0
Anti-aliased:0 
Ok를 클릭합니다.

 

패스가 선택영역으로 바뀌었죠?

이대로 새창을 열어서 이동툴로 이동해 주셔도 되구요.

만약 저장을 하실 것이라면 마술봉툴 누끼포스팅과 같아요~

그래서 자료도 그대로 재활용;


8. Layer > Layer via Copy를 선택해 주세요.

단축키 : ctrl + j


레이어 팔레트의 Background의 눈을 꺼주시면

모자 이미지 누끼가 따졌습니다~

희,.,...흰모자라고 생각해 주세요;

누끼를 딴 이미지를는 이동툴로 이동하시거나 투명이미지로 저장하셔서 사용하시면 됩니다^ ^


포토샵 이미지에서 원하는 부분만을 오려내는것을 이미지 누끼 따기 라고 하죠

누끼 따기 방법은 여러가지가 있는데 하수,중수,고수의 방법으로 알려드리려고 해요~

이건 제 기준으로 나눈것이니 뭐라고 하지는 말아주세요~

 

하수-마술봉

중수-펜툴,퀵마스크

고수-채널 정도?

 

그럼 궈 궈~

 

1. 마술봉툴을 클릭하세요.

마술봉툴 : 이미지의 같은 색상이나 비슷한 색상을 선택영역으로 잡아주는 툴입니다.

그래서 배경이미지와 내가 누끼를 따고싶은  

이미지의 색상이 같거나 비슷할 경우에는 

사용 할 수 없어요!

 

 

 

 

 

2. 마술봉 툴의 옵션바에서 Add to sellection을 선택하시고 Tolerance를 32(기본 값)를 주세요

 

3. ①번 클릭 > ②번클릭을 해서 배경의 흰부분을 모두 선택해 주세요.

혹시 2번까지 클릭해도 배경이 모두 선택되지 않았으면 나머지 부분도

클릭+클릭을 해서 선택해 주세요

마술봉 툴은 주로 배경이 흰색같은 단조로운 색일 경우에 이미지를 잡아주는 것 보다 배경을 먼저 선택영역으로 잡아주고 선택영역을

반전 Select > Inverse 시켜 빠르게 이미지를 선택영역으로 잡아줄 수 있어요. 

 

이렇게 배경이 모두 선택되었으면

 

4. 선택영역 반전 Select > Inverse를 선택해 주세요.

 

모자만 선택되었죠?

 

5. Layer > Layer via Copy를 선택해 주세요.

단축키 : ctrl + j

 

레이어 팔레트의 Background의 눈을 꺼주시면
 

땨란~모자 이미지 누끼가 따졌습니다~

 

누끼를 딴 이미지를 이동툴로 이동하시거나 투명이미지로 저장하셔서 사용하시면 되요^ ^

사진에서 사람 또는 글씨 등을 지켜줘야 할 때

이미지를 가려주는 모자이크 효과를 해보도록 할게요~

 

1. 먼저 모자이크 효과를 줄 사진을 열어줍니다.

 

2. 다각형 올가미툴을 선택해 주세요.

모자이크를 줄 형태에 따라 사각형선택툴 원형 선택툴 등 선택모양을 다르게 해주시면 됩니다.


3. 다각형 올가미 툴로 클릭! 클릭! 하며 선택영역을 만들어 주세요. 

 




4. Filter > Pixelate > Mosaic 를 선택해 주세요.

모자이크 효과를 주는 필터 입니다.

 

5. 모자이크의 크기를 조절해 주신 후 ok를 클릭하세요.

Cell Size가 커질 수록 모자이크의 크기가 커져서 이미지가 더 안보이게 되요~ 


6. Select > Deselect 를 선택해서 선택영역을 해제해 주세요.


포토샵 모자이크 효과 내기가 완성되었습니다~

짝짝짝!!