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

2부입니다.
아이콘에 들어갈 해상도별, 색깔 수별 그림들을 만들어 하나의 .ico 파일로 합쳐보겠습니다요.
(혼자 신났다 )

---

아이콘 제작 단계

1. Conceptualize

이제 아이콘을 스케치합니다. 아이콘을 디자인할 때 유의할 점들입니다(Windows XP 그래픽 스타일가이드 참조함).

1. 가능한 한 사용자에게 익숙한 의미를 가진 컨셉들을 사용하여 혼동이 없도록 합니다.
2. 전체 UI에서 어떻게 보일 것인지, 여러 아이콘들 중의 한 부분으로서 어떻게 작동하는지 고려합니다.
3. 문화적인 상황을 고려합니다. 여러 문화권에서 쓰여야 할 경우, 글자, 단어, 손 모양, 얼굴 등을 넣지 않도록 합니다. 아이콘에 사람을 넣어야 할 경우 최대한 '사람이라는 것만 알 수 있게(general하게)' 표현해야 합니다.
4. 한 아이콘에 여러 사물들이 합쳐져 들어갈 경우, 사물의 수를 3개 이하로 합니다. 최소 크기인 16 X 16 픽셀 아이콘에서는 사물의 수를 더 줄이거나 이미지를 단순화시킬 수 있습니다.

예) XP 기본 아이콘들

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

예) XP 기본 툴바 아이콘들

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

2. Illustrate

아이콘을 그립니다. 나중에 크기를 쉽게 변경할 수 있도록 프리핸드나 일러스트레이터, 플래쉬 등의 벡터 도구를 사용할 것을 권장합니다(저는 주로 플래쉬에서 그립니다).

1. 이미지를 48, 32, 16픽셀의 3가지 크기로 제작합니다. 나중에 드랍 쉐도우 필터를 사용할 것이므로 각각 2픽셀 정도씩 작게 만들어야 합니다(46x46, 30x30, 14x14). Windows 2000의 경우 알파 채널을 지원하지 않기 때문에 아예 드랍 쉐도우 필터를 사용하지 않는 버전도 만들어두는 것이 좋습니다.
2. 벡터 이미지를 복사해서 포토샵에 붙입니다.

3. 32비트 이미지 제작

이제 실제로 ico 파일에 붙일 이미지들을 포토샵 .psd로 만듭니다. 나중에 GMG(GIF Movie Gear)라는 프로그램을써서 .ico 파일을 만들게 되는데, 이 프로그램에서는 .psd로 해상도별, 색깔 수 별 각 이미지들을 불러올 수 있거든요.
자, 먼저 XP에서 나타날 32비트 이미지를 만듭니다.

1. 3가지 크기의 이미지를 포토샵에 붙인 후 그래픽이 잘 보이는지, 특히 16x16 픽셀에서 제대로 보이는지 확인합니다. 잘 보이지 않는다면 포토샵에서 픽셀 단위의 수정을 하거나 다시 벡터 어플리케이션으로 돌아가서 그래픽을 더 단순화합니다.
2. 이미지 레이어에 다음과 같이 드랍 쉐도우 필터를 적용합니다 (Windows XP 스타일가이드에서는 이렇게 권장하고 있으나 필수는 아닙니다).

   

3. 새 레이어를 하나 만들고 현재 레이어와 합쳐서(Merge Visible) 드랍 쉐도우 필터를 이미지 레이어의 한 부분으로 합칩니다.
4. 48, 32, 16 픽셀 크기의 psd 파일을 이런 방식으로 모두 만들어서 저장합니다. 배경은 투명하게 뚫려야 하므로 배경(background) 레이어를 삭제하고, 그림이 들어있는 하나의 레이어만 남깁니다.

4. 24비트 이하의 이미지 제작

24비트 이하의 디스플레이에서 보여질 아이콘 이미지들을 만듭니다. 24비트 이하는 알파채널을 사용할 수 없기 때문에 어떤 배경에서도 어색하지 않게 보이도록 다음과 같은 과정을 통해 경계선을 anti-aliase 없이 정리해주어야 합니다.

1. 24비트 레이어를 하나 더 복제하고, 새 레이어를 만들어 배경을 파란색 등의 어두운 색으로 채웁니다.
2. 복제된 레이어와 새 레이어를 merge합니다.
3. 경계선을 그림과 같이 정리합니다.
4. 흰색 배경에서도 경계선이 자연스러운지 확인합니다.

   

   * 그림출처 : Windws XP 스타일가이드
   
   
5. 각각 48, 32, 16 픽셀로 만들어 경계선을 또 정리해줍니다.
6. 이미지들을 커스텀 팔레트의 256 이하 컬러로 색 수를 줄입니다.
   1. 48X48 이미지의 배경을 아이콘에 잘 쓰이지 않는 색(예 : 마젠타 R255 G0 B255)으로 채웁니다(이 부분은 나중에 투명하게 처리될 부분입니다).
   2. Image > Mode > Indexed Color로 가서 Palette 부분에서 Custom을 선택하고 ‘확인’을 누른다.
   3. 파일을 psd로 저장합니다.
   4. 다른 두 크기의 아이콘 그래픽 역시 이런 식으로 저장합니다.

Windows XP 이전 버전에서도 아이콘이 문제없이 보이도록 하려면 16컬러(4비트) 버전 역시 포함시켜야 합니다. 특히 Windows 2000의 트레이에 나타나는 아이콘은 무조건 16컬러(4비트)로 디더링되기 때문에, Windows 2000에서도 쓰일 어플리케이션이라면 16컬러 버전을 꼭 넣어주어야 합니다.

1. 8비트 이미지를 다시 Windows 기본 16컬러(4비트) 팔레트로 색 수를 줄입니다. 이건 그다지 쉬운 일이 아니죠. 게다가 그냥 indexed color가 아닌 '윈도우즈 기본' 16컬러란 말입니다...

   이것이 문제의 윈도우즈 기본 16 컬러!

2. 16색으로 줄여놓고 보면 색이 많이 깨졌을 겁니다. 이제 하나하나 점을 찍어 이미지를 다시 재정비합니다(고된 픽셀작업... 픽셀작업에 관해서는 여기에 잘 나와있습니다.)
3. 아래쪽과 오른쪽에 검은색의 아웃라인을 주고 왼쪽과 위쪽은 다크그레이나 다크 컬러의 아웃라인을 줍니다(Windows XP 스타일가이드에는 그렇게 나와있으나 필수는 아닙니다).
4. 같은 배경색(마젠타)으로 3개 크기의 이미지를 제작합니다(마젠타 색 부분은 나중에 .ico 파일에 들어갈 때 투명하게 처리될 부분입니다).

   

5. .ico 파일 만들기

이렇게 해상도와 색깔 수별로 여러 개의 파일을 만들었는데, 다시 정리해보면 3개의 크기, 3개의 color depth를 지원하는 아이콘을 만들기 위해 다음 9가지의 파일이 필요합니다(3 곱하기 3은 9). 이중 꼭 필요한 것과 아닌 것들을 좀 추려보자면 다음과 같습니다.

1. 48x48 / 24 bit (필수)
2. 32x32 / 24 bit (필수)
3. 16x16 / 24 bit (필수…이지만 16픽셀인데 수만컬러 써봤자 별로 차이없음.)

4. 48x48 / 8 bit (필수…이지만 XP를 뭐 256컬러에서 돌릴 사람은 없을 듯 -_-)
5. 32x32 / 8 bit (필수)
6. 16x16 / 8 bit (필수)

7. 48x48 / 4 bit (글쎄… 별로 필요없는듯 -_-)
8. 32x32 / 4 bit (글쎄… 별로 필요없는듯 -_-)
9. 16x16 / 4 bit (필수. 2000에서 트레이에 들어가는 아이콘은 무조건 16컬러로 나옵니다)

그러니까 대략 4~5개 정도의 이미지를 준비하면 된다는 것이죠. 이것들을 모두 하나의 psd 파일에 레이어로 구분해 놓아도 되고, 각각 다른 psd 파일로 저장해두어도 됩니다.
그럼 이제 준비한 모든 이미지를 하나의 ico 파일로 만듭니다. 32비트 아이콘을 만들기 위해서는 Gif Movie Gear(GMG)라는 어플리케이션을 사용합니다(www.gamani.com/foricons에서 무료로 다운로드할 수 있습니다). Gif Movie Gear 어플리케이션에서는 RGB 모드, 알파 채널이 포함된 포토샵(.psd) 파일의 레이어를 그대로 가져올 수 있습니다. 즉, 이미지나 레이어의 투명한 부분이 그대로 아이콘 파일에 적용됩니다.

1. GMG를 열고 각각의 psd 파일을 끌어다놓습니다 (혹은 File > Insert Frames). 모두 하나의 psd 파일에 저장한 경우, 즉 psd 파일 안에 레이어가 여러 개일 경우는 다음과 같은 대화상자가 뜨는데, 아래 그림과 같이 설정해준 후 ‘OK’를 누릅니다.

   꼭 이렇게 해야해욥!

2. 각각의 psd 파일이 하나의 프레임(frame)이 됩니다. 이전에 말한 대로 다음과 같이 9개의 프레임이 있어야 하나… 없으면 없는 대로 갑니다. 각각의 프레임 위로 마우스를 가져가면 크기, 투명한 부분이 있는지 여부, 비트수가 나타납니다.

   

3. 8비트와 4비트 버전에서 배경을 뚫어주어야 합니다.
   프레임을 선택하고 툴바에서 dropper를 선택한 후 뚫릴 부분을 클릭!

   

4. 아이콘으로 저장하려면 File > Save Icon As하여 ico 파일로 저장합니다.

다음 글에 계속...