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

3부, 마지막입니다.
지금까지는 어플리케이션의 실행 아이콘(.ico 파일), 즉 더블클릭해서 어플리케이션을 실행하는 아이콘을 만드는 법이었습니다. 그 외에 각 어플리케이션의 툴바(맨 위 주메뉴 아래에 나오는 버튼들 모음)에 들어가는 아이콘(버튼)들에 관해 알아보죠.

---

툴바(tool bar) 아이콘 제작

1. 빠른 시작 메뉴 아이콘

Windows XP와 2000의빠른 시작 메뉴 아이콘입니다. 기본은 16x16 픽셀이며 사용자가 ‘큰 아이콘’으로 지정하면32x32 픽셀이 됩니다.

예) Windows XP의 빠른 시작 메뉴 (32픽셀 크기와 16픽셀 크기)

예) Windows 2000의 빠른 시작 메뉴 (32픽셀 크기와 16픽셀 크기)

2. 기본 툴바 아이콘

아래는 XP의 브라우저(IE) 툴바 아이콘입니다. 기본은 24x24픽셀이며 사용자가 ‘작은 아이콘’으로 지정하면 16x16픽셀이 됩니다.

예) Windows XP의 브라우저 툴바 아이콘 (24픽셀 크기와 16픽셀 크기)

고로 XP/2000 겸용 어플리케이션의 경우 툴바에 들어갈 24x24픽셀 크기의 아이콘도 제작해주어야 한다는 것이지요. 16픽셀짜리 툴바 아이콘은 매우 작기 때문에 이미지를 단순화해야 하고, 그래서 사각을 잘 사용하지 않습니다. 또, XP에서는 hot(마우스를 가져갔을 때)과 default(보통때)의 두가지 상태 그래픽을 만들어 주어야 하는데, 대개 hot의 상태에서 약간 채도가 높아지도록 합니다. Hot 상태의 그래픽이 없다면 마우스를 가져가도 아무 변화가 없게 되죠(이 역시 없어도 상관은 없으며, 2000에서는 있어도 나타나지 않습니다).

IE나 시작 메뉴 줄 등 Windows에 기본으로 들어있는 어플리케이션들 외에 우리가 만드는 어플리케이션의 경우, 메인 툴바에 들어갈 아이콘 크기는 비교적 자유롭습니다. 만드는 사람 맘입니다(사실은 개발자 맘인가? ). 대개는 마이크로소프트 오피스처럼 16x16 픽셀의 아이콘을 사용합니다만 아주 크게 만드는 경우도 있고 말이죠.
Xpyder V.1의 경우 모두 16x16 픽셀의 아이콘만을 사용했습니다.

예) Xpyder 이전 버전과 신 버전의 툴바 아이콘. 나중꺼는 크기를 엄청 줄였습니다.

툴바 아이콘 제작 방법은 보통 어플리케이션 아이콘 제작 방법과 비슷하지만 결과물을 bmp strip(아이콘이 주욱 이어진 하나의 bmp 파일)으로 만들어야 한다는 점이 다릅니다. 하지만 이 역시 개발자 맘…이 아니라 개발 플랫폼에 따라 포맷이나 형태가 다를 수도 있다고 하니 먼저 개발자에게 물어보는 것이 좋겠습니다.

이제 Bmp strip을 만들어 봅니다.

1. 새 레이어에 다음과 같이 16x16, 24X24 크기의 박스들을 그립니다.

   

2. 16x16과 24x24 크기의 이미지들을 박스 안에 위치시킵니다.

   

   * 그림출처 : Windws XP 스타일가이드
   
   
3. Hot 상태의 이미지 제작 : Level을 다음 그림과 같이 0.75로 조절해서 Hot 상태를 만듭니다(XP 스타일가이드에서 그러랬는데 꼭 그래야하는 건 아닙니다).

   

4. 각각의 strip마다 다음과 같이 1개씩의 레이어가 있어야 합니다.
   • 24x24 크기의 default레이어
   • 24x24 크기의 hot 레이어
   • 16x16크기의 default레이어
   • 16x16크기의 hot레이어

5. 모든 레이어를 각각 32비트 psd 파일로 저장합니다.

6. GMG로 끌어다 놓습니다. File > Export as > Filmstrip을 선택하고, 대화상자에서 BMP/DIB의 24-bit(with Alpha)를 선택합니다. 이렇게 하면 bmp strip 파일로 저장이 됩니다.

   

Xpyder V.1의 경우, 툴바 아이콘은GMG를 거치지 않고 그냥 포토샵에서 바탕색을 마젠타로 한 후, 각각의 아이콘 그룹별로 하나의 8비트 bmp 파일로 묶어 개발자에게 넘겨주었습니다. 이 경우 각각의 아이콘이 16픽셀씩 정확히 떨어져 있도록 간격을 맞추어 주어야만 합니다.

예) Xpyder V.1.0에 쓰인 툴바와 기타 아이콘들

• Main toolbar
  
• Tree structure
  
• RSS feed list
  
• Browser toolbar
  

doc 파일로 다운로드 ▶