|
 , Hit : 123156 |
|
|
||||
|
|||||
|
|
 1. 前言 테마에 사용되는 이미지는 특별한 가공없이도 그냥 사용은 가능하다. Pocket PC 2002 테마 생성기 자체에서 Crop(부분사용), Stretch(전체사용)의 옵션을 가지고 있기 때문이다. 하지만, 그것만으로는 부족하다. 때로는 이미지가 아주 극히 일부분만 나오거나 아니면 상하좌우로 찌그러지기 때문이다. Start 메뉴에 표시되는 부분까지를 이미지의 최대 표시가능 부분이라고 한다면 이미지 사이즈는 전체 240*290 픽셀이 된다. 이 비례에 맞는 이미지는 Stretch를 통해서 바로 사용할 수 있다. 이미지 가공을 위해서 쉽게 구할 수 있고 비교적 간단한 기능만을 가지고 있는 ACDSEE Suite 중에 하나인 FotoCanvas만을 이용해서 작업을 해보도록 하겠다. 이제부터 설명하는 것은 필수가 아닌 보다 보기 좋은 테마를 만들기 위한 선택사항임을 알려둔다. 2. 이미지 가공하기 Requirements: -FotoCanvas 또는 Photoshop과 같은 이미지 프로세싱 툴(설명은 FotoCanvas 기준)  <그림 1. FotoCanvas 1.1> * FotoCanvas는 Photoshop과는 달리 기능을 단순화시키고 프로그램이 비교적 가볍고 기본적으로 필요한 기능은 갖추고 있어 간단한 작업을 위해서라면 Photoshop보다 유리하다고 할 수 있다.  <그림 2. 원본 이미지> * 원본이미지의 원래 사이즈는 1280*1024이다. PDA의 협소한 공간을 생각한다면 우리가 필요로하는 주된 이미지외에 배경 부분이 너무 넓은 편이다. 최대한 캐릭터의 이미지를 크게 PDA 화면에서 보기 위하여 이미지를 Crop한다.  <그림 3. Zoom Out> * 화면에 표시되는 그림의 크기가 너무 커서 작업하기 불편하니 상단 툴바의 Zoom Out을 통해서 크기를 줄인다.(Zoom out은 파일 자체의 크기 변화와는 무관하다. 단지, 편집의 편의를 위해서 늘이고 줄이는 것 뿐이다.)   <그림 4. Crop> * 하단 툴바에서 Crop을 선택하여 원하는 만큼의 영역을 지정해 준 뒤 더블클릭을 한다.  <그림 5. Crop 후> * 더블클릭을 하고 나면 <그림 5.>와 같이 영역 바깥의 이미지는 삭제된다.   <그림 6. Resize> * Zoom은 파일 자체에 변화를 주는 것이 아니므로 Resize를 통해서 원하는 크기로 줄인다. 이때 반드시 Maintain orginal aspect ratio를 체크한 상태로 한다. 그러면 픽셀을 기준으로 높이 또는 폭 둘 중 한 값만 입력하면 자동으로 나머지 입력된다. 이미지에 따라서 기준점이 달라지는데 이 이미지의 경우 높이를 기준으로하면 폭이 241을 넘지 않으므로 높이를 기준으로 택한다.(기준점은 보통 한쪽을 기준으로 택할때 나머지가 241*290 기준 또는 240*270의 기준을 넘지 않는 것을 기준값으로 택한다.) * 여기서 높이가 변수이다. 290을 높이의 최대치로 잡을 경우 하단 Command바에 20 픽셀 정도가 가려지게 된다. 이것을 피하고 싶다면 높이는 270 픽셀이 기준이 된다. 하지만 어떤 기준 이건 간에 최종적으로 파일을 생성할 단계에서는 241*290으로 완성할 것이다.(이 예제에서는 270을 높이 최대치로 잡았음)  ==>  <그림 7. Resize 후 Zoom In> * Resize를 한 뒤 이미지가 기존의 Zoom out 상태를 그대로 유지하기때문에 작아서 작업하기가 곤란하다. 따라서 상단 툴바의 Zoom in을 해주어 보기 편한 크기로 다시 바꾼다.    <그림 8. eyedropper> * Eyedropper는 이미지중에 사용자가 원하는 부분의 색을 찾아내주는 역할을 하는 기능이다. 이 기능은 앞으로 설명할 몇가지 테크닉에서 지속적으로 사용될 것이므로 숙지하도록 한다. * 현재 Resize된 이미지는 194*270 픽셀로 241*290 픽셀이 최종적으로 필요하기 때문에 이미지 크기를 241*290 픽셀로 만들어 주어야 한다. 애니메이션 캐릭터의 경우 많은 이미지들이 배경색을 단색으로 사용하는 경우가 많으므로 배경색을 나머지 모자란 부분에 채우는 방법으로 최종 이미지를 만들어볼 것이다. * Eyedropper 툴을 배경부분 중 한 곳에 클릭하면 우측의 전경 컬러가 배경색으로 바뀐다. 그부분을 다시 클릭해서 Hue/Sat/Lum 값 또는 RGB 값을 기록해둔다. 나중에 테마 생성기에서 다시 이 값을 활용하게 될 것이다.   <그림 9. New> * 이제 상단 툴바의 New를 선택하여 241*290 픽셀의 새로운 이미지를 만든다. 일단, 이미지 사이즈 값만 정하고 아직 OK는 누르지 않도록 한다. * 이제 배경색을 맞추기 위한 작업으로 Canvas Color를 설정한다. 콤보박스 버튼을 누르면 Color Selection이 나오는데 여기서 Other...를 선택한다.  <그림 10. 배경색 설정> *배경색 값을 앞 서 적어 놓은 것을 직접 입력한다. Hue/Sat/Lum 또는 RGB 중 하나만 적으면 된다. 나머지는 자동으로 값이 채워진다. * 입력이 되면 배경색과 동일한 컬러가 선택되어 있는 것을 확인할 수 있다. 그러면 OK를 눌러 선택을 마무리하고 또 다시 OK를 눌러 새로운 이미지 생성을 마무리 한다.  <그림 11. 새로운 이미지> * 새로운 이미지를 작성하면 배경색만 채워져 있는 빈이미지가 만들어진다. 이제 이곳에 앞선 과정에서 Resize까지 마친 이미지를 복사한다. 복사방법은 간단하다. 먼저 이미지를 Selection 버튼을 눌러 선택상태로 만들고 Ctrl+C를 누르면 된다. 이때 영역 선택은 이미지 외곽 선을 맞춰 줄 필요없이 그냥 검은 부분에서부터 전체가 다 지나가게 선택하면 전체 이미지를 선택할 수 있다.  <그림 12. 이미지 복사> * 새로 만든 241*290 픽셀의 이미지에 Ctrl+V 버튼을 눌러 복사한다. 복사하면 언제나 좌상단에 이미지가 위치한다.(0,0 좌표) 이때 마우스로 복사된 이미지를 클릭하고 있는 상태에서 위치를 옮길 수 있다. 원하는 위치로 잘 옮긴 후 위치가 정해지면 마우스로 선택된 영역 이외의 부분을 한번 클릭한다. * 참고: 현재까지 설명한 모든 단계 중에 실수를 했을 경우 Undo 버튼을 눌러주면 바로 직전 상태로 몇단계고 옮겨 갈 수 있으므로 걱정하지 말고 다양하게 시도해보자.  <그림 13. 완성된 이미지> * 이제 바로 테마 생성기에서 사용할 수 있는 이미지를 완성했다. 테마 생성기에서 Crop을 선택해도 이미지가 중간에 잘려나가거나 제대로 보여지지 않는 현상 없이 테마를 만들 수 있다. * 첨언 1: bmp 이미지의 경우 eyedropper를 이용해서 컬러를 찾으면 RGB 또는 Hue/Sat/Lum의 값으로 나타나지 않는다. 따라서 bmp 파일을 미리 JPG로 바꾸어 저장해준 뒤 작업하면 편하다. * 첨언 2: JPG로 저장할 때는 저장화면에서 Options를 선택하여 슬라이드바를 Best Quality 쪽으로 맞춰놓고 진행한다. 그렇지 않을 경우 이미지가 원본과 달리 손상된 모습을 눈으로 확인할 수 있다. 3. 추가 Tip A. 전체적인 테마 컬러 분위기 맞추기. * 색깔의 조화는 절대값이 없다. 개인의 취향과 같은 주관적 요소가 지배적인 요소이기 때문이다. 하지만 너무 동떨어진 색을 선택하면 전체적으로 테마의 통일감이 부족해 보일 수 있다. 테마의 통일감을 강조하기 위해서는 컬러의 톤을 전체적으로 비슷하게 맞추는 방법을 가장 손쉽게 생각해 볼 수 있겠다. 앞서 eyedropper로 배경값을 찾아 기록해 둔 것이 있다. 흰색이 아닌 컬러가 있는 배경값의 경우 테마 생성기에서 Command Bar, Navigation Bar, Navigation Tray등등의 색을 비슷한 계열로 맞춰주면 통일감을 줄 수 있다. 방법은 간단하다. 기록해 두었던 값을 입력하고 그 값에 명암만을 조절하여 색구성을 하는 방법이다. (완성된 예제는 스킨/테마 자료실 91번 게시물을 참고하자. tsk 파일을 받아서 테마 생성기에서 열어보고 어떤 색으로 구성했는지 살펴보면 감각을 익힐 수 있을 것이다.) B. Command Bar 라인 연장하기 * Start Menu와 Today 배경 이미지를 동일한 것으로 선택하였을 경우 또는 그 경우가 아니라고 하더라도 Start Menu를 열면 Command Bar 하단으로 20 픽셀 정도 이미지가 더 길게 나오기 때문에 Command 바의 검은 경계선이 잘린 것처럼 보인다. 또한 Command Bar와 이미지의 배경색이 다를 경우 Command Bar가 잘려 나간 것 처럼 보인다. 이것을 해결하는 방법은 간단하다. FotoCanvas에서 이미지를 편집하는 과정에서 가로줄을 하나 그려주면 간단하게 Command Bar 경계선 문제는 해결된다. 그리고 색깔의 문제는 그 부분만 Command Bar와 같은 색으로 변경해 주면 된다. Command Bar 역시 컬러 값이 RGB 과 Hue/Sat/Lum 값이 주어지므로 그 값을 이용하여 같은 컬러를 넣어주면 된다. 경계선이 위치할 픽셀값은 높이에서 268 픽셀이고 컬러는 그 이하 부분에 넣어주면 된다. Fill 툴을 이용하여 넣으면 전체 배경색이 다 바뀐다. 이것 역시 간단하게 해결할 수 있다. 241*30 픽셀 정도되는 새로운 이미지를 배경색을 Command Bar와 같은 값을 같도록 정해주고 하나 만든 다음 복사해서 필요로하는 위치에 붙여 넣으면 된다.(완성된 예제는 스킨/테마 자료실 92번 게시물) 경계선의 경우 완성된 예제는 스킨/테마 자료실 70번 게시물을 참고한다. * Start Menu의 배경 그림을 달리 하고 싶다면 이미지 준비 과정에서 최종 이미지 픽셀 값이 151*287이 되도록 하면 된다. 4. 결어 이 정도 공을 들인 스킨이라면 누가봐도 못만들었다는 소리는 듣지 않을 것이다. 테마를 정함에 있어서 가장 중요한 요소는 뭐니뭐니 해도 사용될 주 된 이미지이다. 이번 강좌에서 설명하는 것은 단순히 설명만 듣는 것이 아닌 직접 해보는 것이 더 중요하다. 글은 비록 길지만 직접 몇번만 해보면 그리 많은 이야기를 담고 있는 것이 아니라는 것을 알 수 있을 것이다. 이것은 아주 기초적인 것을 다룬 것이며 보다 다양하고 복잡한 이미지 처리는 Photoshop 강좌등을 통하여 익히거나 직접 시행 착오를 거치면서 습득하는 것이 좋을 것이다. 마지막으로 이미지나 테마의 전체 컬러는 너무 밝은 색 계통은 피하는 것이 좋다. 대체적으로 PDA의 디스플레이들이 일반 모니터보다 색표현력이 떨어지고 보통 더 밝게 나온다.(흰색이 섞인 것처럼) 추천:손님 추천:손님 |
|
||||||||
|
||
|
||
| ||
|
||
|
||
|
||
| ||
|
||
|
||
|
||
| ||
|
||
|
||
|
||
| ||
|
||
|
||
|
||
| ||
|
||
|
||
|
||
| ||
|
||
|
||
|
||
| ||
|
||
|
||
|
||
| ||
|
||
|
||
|
||
| ||
|
|
|||||
|
|
