Windows XP 用アイコン作成法

  • [アーティクル]

Windows User Experience Team
Microsoft Corporation

July 2001

概要: この記事では、 FreeHand や Illustrator などのドロー系 アプリケーションおよび Photoshop を使用して、Windows XP 向けにカラフルで動的なアイコンのデザインおよび作成方法を説明します。

目次

はじめに
アイコンのデザインの概要
手順 1: 概念化
手順 2: 描画
手順 3: 24 ビット イメージを作成する
手順 4: 8 ビットおよび 4 ビット イメージを作成する
手順 5: ICO ファイルを作成する
ツール バーの作成
AVI の作成

はじめに

Microsoft(R) Windows(R) XP では、アイコンのデザインの新しいスタイルを紹介します。このガイドラインでは、Windows XP スタイルのアイコンのデザインおよび作成手順を説明します。

Windows XP のアイコンのスタイルでは、楽しみながら、カラフルで、力強い表現ができるようになりました。新しい 32 ビット バージョンのアイコンでは、滑らかなエッジも可能です。アイコンは、ドロー系 アプリケーションで描画され、Adobe Photoshop での操作を経て、美しいイメージになります。

この記事はグラフィック デザイナーを対象としています。イメージを作成する際には、優れたグラフィック デザイナー (特に、ドロー系または 3D アプリケーションの使用経験がある方) と作業することをお勧めします。

図 1. アイコンのサンプル

アイコンのデザインの概要

このセクションの目的は、オリジナルのアイコンを作成する下準備として、新しい Windows XP スタイルのアイコンに親しむことです。

アイコンのスタイルの特徴

  1. Windows XP のアイコンは、色が豊富で引き立ちます。
  2. アングルおよび透視図法によって、イメージに動的な表現力が加わりました。
  3. エッジおよびエレメントの角は滑らかになり、微妙な丸みが加わりました。
  4. 光源が左上の角から入り、補助的な環境光がアイコンのほかの部分を照らします。
  5. グラデーションを利用することにより、広がりが加わり、豊かな表現が可能になりました。
  6. ドロップ シャドウがコントラストと広がりを感じさせます。
  7. アウトラインによって、境界が際立ちます。
  8. コンピュータやデバイスなど、日常的なオブジェクトがより新しいデザインになります。

アイコンのサイズ

Windows のアイコンには、 48 × 48、32 × 32、24 × 24、および 16 × 16 ピクセルの 4 つのサイズがあります。

アイコンには、次の 3 つのサイズを設定することをお勧めします。

  • 48 × 48 ピクセル
  • 32 × 32 ピクセル
  • 16 × 16 ピクセル

図 2. 一般的なアイコンのサイズ

[スタート] メニューの右のアイコンのサイズは 24 × 24 ピクセルで表示されています。 これは、用意する必要があるサイズではありません。

図 3. [スタート] メニューにある 24 × 24 サイズのアイコン

ツール バーのアイコンを作成する場合、Windows の標準サイズは 24 × 24 および 16 × 16 ピクセルです。

図 4. 標準のツール バーのアイコン サイズ

お勧めするアイコンの色深度

Windows XP は、32 ビット アイコンに対応しています。この 32 ビット アイコンは 24 ビットのイメージと 8 ビットのアルファ チャネルで構成されています。これによって、アイコンの境界をどんな背景でも溶け込むように滑らかに表示できます。

Windows XP アイコンはそれぞれ、これらの 3 種類の色深度を持ち、異なるモニタ表示設定に対応しなければなりません。

  • 24 ビットと 8 ビット アルファ (32 ビット)
  • 8 ビット (256 色) と 1 ビットの透明色
  • 4 ビット (16 色) と 1 ビットの透明色

図 5. 32 ビット、8 ビット、および 4 ビットの [マイ ピクチャ] アイコン

カラー パレット

これらはアイコンに使用する原色です。

図 6. Windows XP のアイコンのカラー パレット

オブジェクトのアングルとオブジェクトのグループ化

Windows XP スタイル アイコンで使用する透視図法グリッドです。

図 7. Windows XP アイコンの透視図法

すべてのオブジェクトがアングル付で 16 × 16 のアイコンとして適切に機能するわけではありません。次のオブジェクトは通常、平面図で表示されます。

  • ドキュメント アイコン
  • 警告や情報のアイコンなどの記号アイコン
  • 虫眼鏡などの 1 つのオブジェクトを示すアイコン

図 8. 平面図 アイコンの例 ([JPG ドキュメント]、[検索]、および [お気に入り] アイコン)

平面図で描画されたオブジェクトが、判読のしやすさと一貫性の観点から、分かりやすくするために、重ね合わせるアングル付きの 2 次的なオブジェクトを作成します。 アイコンが一組のものとしていかに見せるかということも考えると、オブジェクトをグループ化する方法を決めるのに役立ちます。

図 9. 重ね合わせた例 ([アプリケーションの追加と削除]、[画像の印刷]、[最近使ったファイル])

ドロップ シャドウ

Windows XP アイコンでは、ドロップ シャドウを使用して、イメージを鮮明にし、広がりを加えます。Photoshop を使用すると、この効果を得ることができます。この効果についてはあとで説明します。

ドロップ シャドウをイメージに加えるには、Photoshop のイメージ レイヤーをダブルクリックし、[ドロップ シャドウ] をクリックします。 次に、[角度] を 135、[距離] を 2、[サイズ] を 2 に変更します。 ドロップ シャドウは、不透明度 75% の黒にします。

図 10. ドロップ シャドウ追加前後のアイコン

アウトライン

XP スタイル アイコンを描画する場合、イメージにアウトラインを加えて輪郭を際立たせ、異なる背景色でさらに映えるようにします。

手順 1: 概念化

新たにアイコンをデザインするときは、ペンと紙で自分のアイディアをスケッチすることをお勧めします。

これは Windows XP [マイ ピクチャ] アイコンの初期のスケッチの例です。

図 11. [マイ ピクチャ] アイコンのスケッチ

アイコンをデザインする際の注意事項

  • ユーザーが意味を取り違えることがないよう、一般的な概念を使用します。

  • ユーザー インターフェイスの流れの中で、どのようにアイコンが表示され、アイコンの一部としてどのような役割を果たすのかを考えます。

  • ユーザーの文化の違いを考慮してグラフィックスを決めます。アイコンに文字、単語、手、および顔は使用しません。人やユーザーを表す必要がある場合は、一般的な描き方をします。

  • アイコンの 1 つのイメージに複数のオブジェクトを組み合わせる場合、イメージをさらに縮小する方法を考えます。1 つのアイコンに使用するオブジェクトは、3 つまでにすることをお勧めします。16 × 16 サイズの場合は、さらにオブジェクトを減らし、イメージをはっきりさせ、わかりやすくします。

    注 : アイコンに Windows Flag を使用する際は、次のガイドラインに従ってください。

    • 登録商標、および Windows の商標ガイドラインに従うために、Windows Update アイコンを除き、アイコンに Windows Flag を使用しないでください。
    • Windows Flag は、Microsoft(R) Windows(R) オペレーティング システムの一部として出荷されたアイコンだけに使用してください。
    • 当社の商標管理部門では、アイコンに Windows Flag をどのように使用しても調査することになります。

共通アイコン

図 12. Windows XP の共通アイコン

共通ツール バー アイコン

図 13. Windows XP の共通ツール バー アイコン

手順 2: 描画

Microsoft Windows XP のスタイル アイコンを描くには、Macromedia FreeHand または Adobe Illustrator のようなドロー ツールの使用をお勧めします。「アイコンのデザインの概要」で説明したパレットおよびスタイルの属性を使用します。

  1. FreeHand または Illustrator を使用してイメージを描きます。

  2. 3 つのサイズのイメージを作成します。イメージにはあとでドロップ シャドウを加えるので、46 × 46、30 × 30、および 14 × 14 ピクセルの 3 つのサイズを作成します。

  3. Photoshop にベクトル イメージをコピーし、貼り付けます。

    図 14. [ペースト] ダイアログ

    注 : ICO ファイル作成ツールである Gif Movie Gear に Photoshop ファイルを直接インポートできるので、イメージ作成ツールには Photoshop をお勧めします。 "RGB" モードを使用して Photoshop で作成したイメージには、アルファ チャネルがあります。イメージまたはレイヤーを透明にする場合は、アイコンの作成にアルファ チャネルが必要です。

手順 3: 24 ビット イメージを作成する

ベクトル イメージを Photoshop に貼り付けたら、次の手順は 24 ビット イメージの仕上げです。

  1. 作成した 3 つのサイズのイメージを Photoshop に貼り付けたら、イメージのわかりやすさおよび解像度を、特に 16 × 16 サイズでチェックします。ピクセルプッシングが必要な場合があります。 16 × 16 サイズでは見にくい場合は、FreeHand に戻り、イメージをこのサイズで単純化することを考えます。

  2. イメージにドロップ シャドウを加えるには、Photoshop のイメージ レイヤーをダブルクリックし、[ドロップ シャドウ] をクリックします。 次に、[角度] を 135、[距離] を 2、[サイズ] を 2 に変更します。 ドロップ シャドウは、不透明度 75% の黒にします。

    図 15. ドロップ シャドウを設定する

  3. ドロップ シャドウと 24 ビット イメージを結合するには、透明な新規レイヤーを作成します。[レイヤー] メニューで、[表示部分を結合] をクリックし、3 つのレイヤーを結合します。

    図 16. レイヤーを結合し、ドロップ シャドウを付ける

  4. それぞれ 48 × 48、32 × 32、および 16 × 16 ピクセル サイズで 3 つの Photoshop ファイルを新たに作成します。該当するイメージをコピーし、貼り付けます。イメージのドロップ シャドウが切れている場合、FreeHand に戻ってイメージのサイズを縮小し、この手順をやり直します。

  5. それぞれのファイルは PSD ファイル形式で保存します。 イメージ レイヤーと背景レイヤーは結合させません。 ファイル名の一部に、サイズおよび色深度を入れておくと便利です。

手順 4: 8 ビットおよび 4 ビット イメージを作成する

8 ビット イメージを作成する

32 ビット アイコンになる 24 ビット イメージが完成したので、8 ビット イメージを作成します。8 ビットのアイコンは、32 ビット未満のカラー モードで表示されます。

8 ビット イメージには、8 ビットのアルファ チャネルがありません。アンチエイリアスを行えない、つまり、エッジはぎざぎざの状態のままなので、エッジを丸めておく必要があります。

  1. Photoshop で、24 ビット イメージ レイヤーをコピーし、レイヤー名を 8 ビット イメージに変更します。

  2. 透明色の新規レイヤーを作成し、青などの暗い色に塗りつぶします。

  3. 8 ビット イメージ レイヤーと新しいレイヤーを結合させます。

  4. エッジを無地の色で消し、アンチエイリアスされたピクセルを削除します。ぎざぎざを 1 つずつ確実になぞり、エッジをさらに滑らかにします。

  5. 白などの明るい背景でイメージをチェックします。

    図 17. 8 ビット 色深度のイメージを削除する

  6. それぞれ 48 × 48、32 × 32、および 16 × 16 ピクセル サイズで 3 つの Photoshop ファイルを新たに作成します。該当するイメージをコピーし、貼り付けます。

  7. 次に、イメージの色を 256 色に下げる必要があります。8 ビットのアイコンには、ユーザー設定のパレットがあります。

    1. 48 × 48 イメージの背景を、イメージに使用していない 1 色で塗りつぶします。通常はマゼンタ (R255 G0 B255) を使用します。
    2. [イメージ] メニューの [モード] をポイントします。[インデックス カラー] をクリックし、最後に [レイヤーのつや消し] をクリックします。
    3. [パレット] ドロップダウン メニューの [カスタム] を選択します。 [カスタム] ダイアログ ボックスの [OK] をクリックします。 [インデックス カラー] ダイアログ ボックスの [OK] をクリックします。
    4. ファイルを PSD ファイル形式で保存します。
    5. 同じ背景色を使用し、ユーザー設定のパレットを適用したまま、別の 2 つのサイズのファイルを保存します。

  8. それぞれのファイルを PSD 形式で保存します。

4 ビット イメージを作成する

ダウン レベルで見栄えよくする場合、アイコンを 16 色にします。

  1. 8 ビット イメージに Windows の 16 色パレットを指定します。

  2. 16 色パレットの色だけを使用して、イメージを塗り直します。

  3. イメージの下および右のエッジには黒のアウトラインを使用します。

  4. イメージの左および上のエッジには濃い灰色または別の濃い色のアウトラインを使用します。

  5. 同じ背景色を使用して、3 つのサイズのイメージを保存します。背景色は透明になるので、イメージに背景色と同じ色を使用していないことを確認します。

    図 18. 4 ビット アイコンの例

手順 5: ICO ファイルを作成する

すべてのイメージが準備できたら、ICO ファイル形式にして完成させます。32 ビット アイコンの作成には、Gif Movie Gear (GMG) と呼ばれるツールを使用します。 このツールは、Gamani (英語) にアクセスして入手できます。

これらの手順では、3 種類のサイズおよび 3 色の色深度を持つ、一般的な ICO ファイルの作成手順を説明します。

  1. 色深度ごとに 3 種類のサイズの合計 9 つのファイルがあります。

    24 ビットの 48 × 48

    24 ビットの 32 × 32

    24 ビットの 16 × 16

    8 ビットの 48 × 48

    8 ビットの 32 × 32

    8 ビットの 16 × 16

    4 ビットの 48 × 48

    4 ビットの 32 × 32

    4 ビットの 16 × 16

  2. Gif Movie Gear (GMG) を開き、ウィンドウにイメージ ファイルをドラッグします(または、[File] メニューの [Insert Frames] を使用します)。 それぞれのイメージがフレームになります。

  3. 24 ビット イメージ (またはレイヤーあり PSD ファイル) を GMG にドラッグする場合は、ダイアログ ボックスが表示されます。

    図 19. Gif Movie Gear で 24 ビット イメージの設定を行う

    次の設定を確認します。

    • アニメーションで複数のフレームとしてのレイヤー
    • ブレンドがないこと。それぞれのレイヤーが 1 つのフレームであること
    • 背景は透明色であること

  4. それぞれの 24 ビット イメージの背景レイヤーはフレームとして表示されます。それら透明のフレームをクリックし、Delete キーを押して削除します。

  5. ここまでで、合計 9 つのフレームがあります。アイコンをカラー解像度順に並べます。最初の 3 つは 4 ビット (16 色)、次の 3 つは 8 ビット (256 色)、最後の 3 つは 24 ビット カラーと 8 ビットのアルファチャネル (合計 32 ビット) です。

    図 20. Gif Movie Gear におけるフレームの順番

    注 : イメージの属性を確認するには、画像の上でマウスを動かします。それぞれのイメージの解像度情報が表示される [Tooltip] ボックスがあります。既定値では、大きさ、透明度、およびビット数を示します。示された項目を追加または削除するには、[Edit] メニューの [Preferences] をポイントし、[Frame Tips] をクリックします。

  6. 8 ビットおよび 4 ビットのイメージでは、背景を透明にする必要があります。GMG ではライム グリーンを使用して、"透明" 色を示します。 独自の色を設定する (または、既定の背景色のままにする) には、[View] メニューの [Transparency As] を使用します。設定した色は表示されますが、イメージには適用されません。

  7. 8 ビットおよび 4 ビットのイメージを透明にするには、次の手順に従います。

    1. フレームを選択し、[Pick Transparency Color] ツール バー アイコン (アイ ドロッパー) を選択します。

      図 21. [Transparency] ツールを使用する

    2. ダイアログ ボックスが開いて、作成しているアイコンが表示されます。 ドロッパーで、アイコンの背景色をクリックします。この色がライム グリーン (または、GMB で透明な背景色として選択した色) に変わります。

    3. 同様に 4 ビットおよび 8 ビットのフレームでも繰り返します。

  8. アイコンを保存するには、[File] メニューの [Save Icon AS] をクリックします。

ツール バーの作成

ドロップ シャドウを使用する場合を除き、Windows ツール バー アイコンの作成も同じ手順に従います。ツール バー アイコンは非常に小さいので、イメージをシンプルにすることをお勧めします。イメージをわかりやすくできるのであれば、角度を設定しないで、イメージをそのまま使用することができます。

Windows のツール バーでは、24 × 24 および 16 × 16 ピクセルの 2 つのサイズのアイコンを表示します。 既定値およびホット (マウスオーバー) の 2 つの状態です。ホットの状態では、イメージの彩度を若干上げます。

アイコンの順番でイメージをビットマップ ストリップに入れることを除いて、ツール バー アイコンの作成はほかのアイコンの作成方法とほぼ同じです。

  1. それぞれのサイズのアイコンを FreeHand で描いたら、コピーして Photoshop に貼り付けます。1 つのレイヤーに 24 × 24 サイズのアイコンを貼り付け、別のレイヤーに 16 × 16 サイズのアイコンを貼り付けます。

  2. 別のレイヤー上にそれぞれのサイズの 1 列のボックスを描きます。16 × 16 ボックスに 1 列、24 × 24 ボックスに 1 列です。

    図 22. ツール バー アイコンのボックスの例

  3. それぞれのイメージを並べる順番にボックスに置きます。イメージ間の重複がないか確認します。

    図 23. ツール バーのフレームにアイコンを置きます。

  4. Photoshop ファイルを保存します。

  5. 次に、Photoshop でホット バージョンを作成します。

    1. 24 × 24 および 16 × 16 レイヤーを複製します。 ホット バージョンであることがはっきりとわかるようにレイヤー名を変更します。

    2. それぞれのホット バージョンに対して、1 つのレイヤーを選択し、[イメージ] メニューの [調整] をポイントします。次に、[レベル補正] をクリックし、中央の矢印を 0.75 になるまで動かします。[OK] をクリックします。

      図 24. レベルを変更し、"ホット" バージョンを作成します。

  6. ホット バージョンを作成したら、それぞれのストリップに対して 1 つのレイヤーが必要です。つまり、1 つの既定の 24 × 24 のストリップに対して 1 つのホット状態の 24 × 24 レイヤー、1 つの既定の 16 × 16 ストリップに対して 1 つのホット状態の 16 × 16 レイヤーが必要です。

  7. 次に、ストリップごとに個別のファイルを作成する必要があります。

    1. [切り抜き] ツールを使用し、ファイルをストリップの大きさにトリミングし、そのファイルを保存します。各ストリップを最初のボックスの初めから最後のボックスの終わりまで測定する必要があります。

    2. ストリップごとに個別の 24 ビット PSD ファイルとして保存します。

      図 25. Photoshop の 24 ビット ツール バー ストリップ

  8. ストリップを 32 ビット イメージとして保存するには、GMG にストリップをドラッグします。 空白のフレームを削除します。[File] メニューの [Export] をポイントし、[Filmstrip] をクリックします。 [Film Export] ダイアログ ボックスで、[BMP/DIB and 24-bit with Alpha] がオンであることを確認します。

AVI の作成

Microsoft Windows XP では、8 ビットの AVI を使用します。 AVI ファイルの作成プロセスは、アイコンの場合と同じです。つまり、Photoshop で作成し、GMG にドラッグします。 8 ビット アイコン用を作成するには、次の手順に従います。

GMG を使用して AVI を保存するには、[File] メニューの [Export As] をポイントし、[AVI file...] をクリックします。

AVI ファイル作成時の注意事項

  • 背景の透明色としてマゼンタ (R255 G0 B255) を使用してください。
  • Photoshop で、余分なピクセルがないことを確認してください。 [Fill Tolerances] を 0 に設定し、アンチエイリアスがオフであることを確認してください。