Internet Explorer のツール バー アイコンの設計

1. グラフィック ソフトウェアで 16 色または 256 色の画像を 2 つ作成し、それらを別々のファイルに保存します。
2. 各ファイルに適切なパレット (Windows 標準の 16 色パレットまたはハーフトーン パレット) を適用します。透明色を示すために、特定の色を予約します。
3. 各ファイルを .bmp 形式で保存します。

次に、必要な画像の概要を示します。

アイコンの状態	サイズ (ピクセル単位)	色深度/パレット	枠線	外観	例
アクティブ	20 × 20 ピクセル	Windows 標準 256 色ハーフトーン パレット	アイコン スタイルの枠線 : 上部と左側はカラー、下部と右側は黒。	カラー画像 影付けを強めにし、16 色の画像より視覚的に奥行きをもたせる。 左上からの光源で、適宜、影を付ける。
	20 × 20 ピクセル	Windows 標準 16 色パレット	黒 (枠線によってアイコンが見にくくなる場合は除く)。	カラー画像 軽い影付け。平坦な外観。
	16 × 16 ピクセル	Windows 標準 16 色パレット	黒 (枠線によってアイコンが見にくくなる場合は除く)。	カラー画像 軽い影付け。平坦な外観。
既定	20 × 20 ピクセル	Windows 標準 256 色ハーフトーン パレット	アイコン スタイルの枠線 : 上部と左側にグレー トーン、下部と右側に黒。	グレースケール画像 影付けを強めにし、16 色の画像より視覚的に奥行きをもたせる。 左上からの光源で、適宜、影を付ける。
	20 × 20 ピクセル	Windows 標準 16 色パレット	黒 (枠線によってアイコンが見にくくなる場合は除く)。	グレースケール画像 軽い影付け。平坦な外観。
	16 × 16 ピクセル	Windows 標準 16 色パレット	黒 (枠線によってアイコンが見にくくなる場合は除く)。	グレースケール画像 軽い影付け。平坦な外観。

既定の画像とアクティブの状態の画像が交互に切り替わったときに自然に見えることを確認します。フォト レタッチ ソフトウェアなどで既定の画像とアクティブな状態の画像を別のレイヤーに置き、各レイヤーを交互に表示すると、これを簡単にテストできます。

アイコンごとに、.ico ファイルを 2 つずつ作成する必要があります。

• 一方の .ico ファイルには、特定のサイズおよび色深度のアクティブな状態の画像 (カラー画像) を格納します。
• もう一方の .ico ファイルには、特定のサイズおよび色深度の既定の状態の画像 (グレースケール画像) を格納します。

アイコンの描画にはグラフィック ソフトウェアを使用し、.ico ファイルの作成には Microsoft Visual C++ Development Studio などの開発環境を使用することをお勧めします。

例

[ホーム] ボタンの 2 つのアイコン ファイルには、次の画像が格納されています。

アクティブな状態	既定の状態

1. 各 .bmp ファイルを開きます。
2. [ファイル] メニューの [新規作成] をクリックし、[アイコン] をクリックします。 既定では、標準の 32 × 32 ピクセルのデバイス画像がアイコン ウィンドウに表示されます。
3. アイコン ウィンドウで [新規デバイス イメージ (ins)] をクリックします。[カスタム] をクリックして、次のデバイス画像を作成します。
   • 22 × 20 ピクセルの 16 色画像
   • 22 × 20 ピクセルの 256 色画像
   • 18 × 16 ピクセルの 16 色画像

   注

   • デバイス画像は、元の画像よりも 2 ピクセル分、幅が広くなっています。デバイス画像の領域内で画像を中央に揃えてください。
4. 既定の 32 × 32 ピクセルのデバイス画像を削除します。
5. .bmp ファイルからカラー画像をコピーして、適切なサイズおよび色深度のデバイス画像に貼り付けます。
6. 背景を透明にするには、カラー パレットから透明色を選択して、各画像の背景の透明にする部分を塗りつぶします。
7. 画像を .ico ファイルとして保存します。

同様に、既定の状態 (グレースケール画像) の .ico ファイルを作成します。