출처 : Tong - mermaid_love님의 작업 통~통



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 파일로 다운로드 ▶



아이콘 제작 단계

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 없이 정리해주어야 합니다.

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

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

  • 각각 48, 32, 16 픽셀로 만들어 경계선을 또 정리해줍니다.
  • 이미지들을 커스텀 팔레트의 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 파일로 저장합니다.

    • + Recent posts

    티스토리툴바