共通デスクトップ環境 スタイル・ガイド

フロントパネルのアイコン・スタイルのオプション

フロントパネルにデフォルトで表示されるアイコンは、ファイル・マネージャのアイコンとは若干異なる外観をしています。これらのアイコンは表面にエッチングが施されたように見えます。これらのアイコンはドラッグ&ドロップできないため、このように安定した外観になっています。

デスクトップのデフォルト・アイコンのようにエッチングが施された外観を持つ、サイズ 48 のアイコンを用意する必要はありません。アイコンがフロントパネルで使われるか、使われるとしたらどういうときなのかを判定するのは簡単なことではありません。このため、この使用法のために設計を行うのではなく、より一般的なファイル・マネージャでの使用のために設計を行うことを推奨します。

フロントパネルのアイコンを設計することを決めた場合は、次に示すエッチングが施された外観を作成するための指示を参考にしてください。このスタイルを実装する際には、視覚上の設計者の協力を得ることを強く推奨します。

エッチングの施された外観の実現

エッチングを適用するためには、ダイナミック・カラーのことを理解しておく必要があります。まず、48*48 のスペースを完全には使用していないサイズ 48 のアイコンから作業を始めます。アートワークは、エッチング用に、すべての辺に 2、3 ピクセルの余裕を持たせておく必要があります。

図 4-18 左上から照らされたアイコンの例

Graphic

アイコンは明るいカラーと暗いカラーの両方で、できればグレーで描かれなければなりません。アイコンは左上から照らされていなければなりません。上と左の辺には明るいカラーを、下と右の辺には暗いカラーを使用します。図 4-18 に、エッチングを適用する前のデスクトップのテキスト・エディタ・アイコンを示します。

図 4-19 ボトムシャドウ・カラーおよびトップシャドウ・カラーの適用

Graphic

エッチング効果は、アイコンのアートワークの上と左の辺のすぐ外に 1 ピクセルのボトムシャドウ・カラーの行を描き、アイコンのアートワークの下と右の辺のすぐ外に 1 ピクセルのトップシャドウ・カラーの行を描くことによって実現されます。

アイコンとエッチングの影の照明モデルに一貫性がないと効果が出ません。アイコンが黒い線で描かれている場合、上と左の辺に黒い線を重ねるとエッチングの外観はおかしくなります。

外観に適切なエッチング効果を与えて、アイコンをフロントパネルの他のアイコンと調和させるには、アイコンのスタイルが非常に重要です。デスクトップに付属するフロントパネルのアイコンを参考にして研究してください。遠近感のあるアイコン、黒いアウトラインを持つアイコン、および「板」が浮き出たようなアイコンは使用できません。

エッチングの外観の発展

エッチングは、アイコンをエッチングが施されている表面の一部に見せかける 1 つの手段です。アイコンのすべての部分が表面にエッチングされている必要はありません。選択的なエッチングを施して、オブジェクトのアンカーの一部をパネルの中に固定し、別の一部をパネルの上に置いたり、少しだけ飛び出しているように見せかけることもできます。

図 4-20 鉛筆を表面から突き出して、ページのアンカー処理を行う例

Graphic

たとえば、[ヘルプ] アイコンは、右側の本の下と横のトップシャドウ・カラーで作られたエッチングを取り除き、これを選択カラーのシャドウに置き換えています。これにより、1 冊の本が本棚から若干飛び出しているように見えます。プリンタ・アイコンでは用紙トレーが突き出しています。[スタイルマネージャ] アイコンでは、パレット、文字、およびマウスが、エッチングされたウィンドウ枠の上方にあります。[ファイルマネージャ] アイコンはさらに先に進んで、オープニングの端だけがエッチングされており、引き出しの前面と、そこから出ているフォルダは飛び出して、影さえも付いています。

原理としては、アートワークの中の何かをアンカー処理し、オブジェクトの 3 次元的な性質も強調することが重要です。アイコンの中の可変的な内容、たとえばプリンタ・ページや [メール・プログラム] アイコンのメール封筒などは、アンカー処理するべきではありません。