윈도우즈 2000 / XP 어플리케이션 아이콘(ico) 제작 기법 - 1/3

제가 요즘 좀 시간이 널널합니다.
요즘 회사쪽 프로젝트가 거의 막바지에 다다랐는데, 어플리케이션 담당 디자이너분께 이전에 만든 아이콘 제작 관련 자료를 찾아서 드리다가 문득, 블로그에 올려놔야겠다는 생각이 들었습니다.
이 자료는 2003~2004년 RSS 리더인 Xpyder와 사진편집 소프트웨어인 Photopencil 디자인을 할때 아이콘(ico 파일)을 제작하느라고나름대로 자료를 찾고 번역하고 정리한 것입니다.그때도 블로그에 올려놓으려고 했는데 디자인 일을 그만두면서 잊어버렸네요.

ICO 파일 만드는 것, 별로 어렵지 않게 생각했는데 그렇지 않더군요. OS마다해상도와 색깔 수, 그리고 퍼스펙티브, 그림자 지정 등 아이콘 제작 룰이 있습니다. 단순히 그림 하나 만들어서 ico 파일을 만들게 되면... 좋지 않은 결과를 보게 되죠
(지금도 가끔 그런 어색한 어플리케이션들이 보입니다 허허)

2년 전 작업할 때만 해도 이런 자료를 구하기 쉽지 않았는데, 지금은 어떤지 모르겠습니다. 그때나 지금이나 XP와 2000이 그대로 쓰이고 있으니 내용에서 고칠것은 없을 듯 싶어요.
필요한 분들에게 도움이 되었으면 좋겠습니다.
목차는 대강 다음과 같고, 3회 정도에 연재할 생각입니다.
맨 마지막 회에는 3회가 모두 들어있는 doc 파일도 같이 올려놓을 예정입니다. 필요하신 분들은 기다렸다가 다운로드하셈.
* 이미지를 비롯한 자료들은 제가 작업하던 것을 화면캡쳐했거나 Windows XP 스타일가이드에서 가져온 것들이며, 직접 만들지 않은 이미지는 출처를 표기했습니다.

Windows 2000/XP용 application icon 제작 - 목차

1. 어플리케이션 아이콘의 종류
2. 아이콘의 크기
3. 아이콘의 color depth
4. 윈도우즈 XP 아이콘의 특징
5. 아이콘 제작 단계
   1. Conceptualize
   2.Illustrate
   3.32비트 이미지 제작
   4.24비트 이하의 이미지 제작
   5..ico 파일 만들기
6. 툴바 아이콘 제작

자, 그럼 1부를 시작해보겄습니다요.

---

어플리케이션 아이콘의 종류

어플리케이션 아이콘은 크게 어플리케이션의 대표 아이콘과 툴바 아이콘으로 나눌 수 있습니다.
어플리케이션의 대표 아이콘은 보통 아래의 예시들처럼 symbol+logotype 형태의 로고에서 symbol만을 따로 떼어 사용하는 경우가 많습니다.

예) 어플리케이션 로고와 어플리케이션의 대표 아이콘들
(2004년 당시 어플리케이션들이라 좀... 오래되었죠. 그냥 보셈 ^__^)

아이콘의 크기

어플리케이션 아이콘은 하나의 .ico 파일 안에 여러가지 크기와 색깔 수의 아이콘 그래픽을 가진 레이어(layer)를 포함할 수 있습니다. 이 레이어들 중 View mode나 사용자 모니터의 색상 설정, 그리고 아이콘이 들어가는 위치(바탕화면이나 탐색기, 트레이나 시작메뉴 등) 정보에 따라 적합한 아이콘 그래픽이 표시되게 되지요. 해당 크기나 색깔 수의 아이콘 그래픽이 .ico파일 안에 포함되어있지 않을 경우, 다른 그래픽 레이어를 확대하거나 축소, dithering해서 꼴보기싫게(!) 보여지게 됩니다.

예) 꼴보기싫게 되어버린 아이콘들 (가슴이 아픕니다 )

그러므로 XP/2000겸용의 어플리케이션 아이콘일 경우 다음 네가지 크기의 그림을 아이콘 파일에포함시켜야 합니다. 24 x 24 픽셀을 제외한 나머지 세개의 크기는꼭! 들어가는게 좋습니다.

48 X 48 픽셀 :XP에서 추가됨 32 X 32 픽셀 16 X 16 픽셀 24 X 24 픽셀 : 시작 메뉴 왼쪽의 아이콘이나 XP 툴바에 들어가는 크기 (아래 그림 참조)

아이콘의 Color Depth

XP에서는 8비트의 알파 채널을 포함한 32 비트의 아이콘을 지원하므로 어떤 배경에서도 경계선이 자연스럽게 표현되며, 그림자나 투명도 등을 주는 것이 가능합니다.
그러나 윈도우즈 2000과 16비트 컬러를 쓰는 사용자들 등 다양한디스플레이에서 아이콘이 제대로 보이기 위해서는 다음 세가지의 color depth를 아이콘 파일에 포함시켜야 합니다.

24-bit with 8-bit alpha (32-bit) (XP에서 추가됨) 8-bit (256 colors) with 1-bit transparency 4-bit (16 colors) with 1-bit transparency

* 그림출처 : Windws XP 스타일가이드

윈도우 XP 아이콘의 특징

1. 48x48픽셀 크기의 아이콘 추가

2. 풍부해진 컬러

   

3. 정면각이 아닌 사각과 퍼스펙티브 사용 :

   아이콘 오브젝트의 기본 각도는 다음과 같습니다. 하지만 모든 아이콘에 적용해야되는 것은 아닙니다. 다큐먼트 아이콘, 경고나 정보 아이콘과 같은 심볼들, 사각이라는 것이 그리 잘 드러나지 않는 오브젝트들(확대경 등)에는 적용하지 않아도 됩니다.

   
   

   * 그림출처 : Windws XP 스타일가이드
4. 부드럽게 처리된 경계선 :
   앤티앨리어싱(anti-aliasing) 처리가 가능한 32비트 버전(알파 채널 포함)까지 아이콘에 포함시킬 수 있습니다.

5. 조명과 그림자 :
   기본적으로 조명 위치는 왼쪽 상단 + ambient light이며, 드랍 쉐도우(drop shadow) 필터로 입체감과 명확함을 더합니다. 포토샵에서 angle 135, Distance 2, Size 2, 75퍼센트의 드랍 쉐도우 필터를 주며(필수는 아님), 명확함을 위해, 그리고 다양한 배경색 위에서도 문제가 없도록 진한 외곽선을 넣을 것을 권장하고 있습니다(이전의 픽셀 아이콘들에서는 거의 검정과 다크그레이의 아웃라인을 사용했었지만, 이제는 다크블루나 브라운, 혹은 아이콘의 메인컬러보다 약간 짙은 색 등을 아웃라인 색으로 많이 씁니다. 그러면 아이콘 자체가 아주 부드러워보이지요 ^^).

   
   

   * 그림출처 : Windws XP 스타일가이드

다음 글에 계속...