Fireworks を使用してアイコンに絶妙なディテールを作成する

この記事では、Fireworks ソフトウェアを使用して既製のアイコン画像に詳細を作成し、アイコンをより洗練され、美しくします。

Fireworks（以下FW）を使ってアイコンをデザインする場合の注意点は主に2つあります。

まず、FW は Web デザインに重点を置いており、過度に複雑な PS エフェクトの作成には適していません。FW CS5 の PS フィルターに期待してください。
次に、FW の編集方法は AI に似ています。PS のようなピクセル シェーディング環境での作業に慣れている場合は、このチュートリアルを無視してかまいません。

次に、誰でも理解しやすいように、比較的標準的なアイコンをコピーして説明しましょう。

下の写真は、国内の有名なeicoデザインで作成されたアイコンのセットです。コピーしたいオブジェクトは、写真の枠内にある封筒のアイコンです。チュートリアルのテーマ上、このアイコンに詳細を追加するため、最終的なコピー結果は元の画像とは異なることを事前に説明しておきます。

ステップ01

コピーしたいアイコンを参考に切り抜き、レイヤーをロックします。ここで使用しているFWのパスパネルはFireworks CS4から抽出したものですが、CS3に含まれる機能はすべて使用しているため、以降の動作には影響ありません。

ステップ02

[角丸長方形] ツールを使用してサンプル イメージと同様の角丸長方形を描画し、4 つの角丸制御点を使用して角丸の半径を調整し、Ctrl+Shift+G を押して形状を分割します。

次に、最初の角丸長方形をコピーし、白い矢印ツールを使用して 1 ピクセルを 4 方向に移動し、図に示すように 2 つの角丸長方形を作成します (丸い角の 8 つのノードは白い矢印で処理されていることに注意してください。整列しています）。

ストロークを使用して四角形に外側の境界線を追加することはできません。仮想境界線が役に立たないからです。 [角丸長方形] ツールで描いた角丸長方形にストローク以外の仮想エッジがある場合は、ノードを散布し、黒い矢印ツールでパスを選択し、[パス] パネルで [ポイントをピクセルに丸める] をクリックして、パスのすべてのノードを返します。 . ピクセル交差点に位置します (白い矢印ツールを使用して、個別のホーミングのノードを選択することもできます)。

ステップ03

大きな丸い長方形をコピーし、白い矢印と Shift+矢印キーを使用して逆三角形を作成し、それをコピーして、下の逆三角形を茶色で塗りつぶします。 1pxのフェザリングを設定します。

ステップ04

白い矢印を使用して中央に表示されているノードを選択し、キーボードの矢印キーを使用して 2 ピクセル下に移動してエンベロープを長く見せます (ここにある 1 つのアイコンが全体のスタイルに制約されないため)。

ステップ05

先ほど描いたグラデーション塗りつぶし逆三角形を上下反転してコピーし、配置すると下図のような位置関係になります。 2 つの逆三角形は上から下まで 1px 強離れています。白い矢印ツールを使用して、ダークブラウンの逆三角形の上にある 4 つのノードを選択し、補助線を使用してマウスをドラッグしてノードを 0.3 ～ 0.5 ピクセル上に移動します。これにより、最初にダークブラウンのぼやけが軽減されます (その後、もう一度言いますが、境界線にストロークを使用するという考えはできるだけ早く放棄してください。これはPhotoshopではありません）。

ステップ06

サンプル画像のアイコンの上にハイライトがありますが、これは一般的な 1 ピクセルの放射ハイライトではないことに注意してください (約 2 ピクセルのハイライトの上にある 1 ピクセルのハイライトは、下の 1 ピクセルより明るい)。 Ellipse のような楕円形のラジエーターはこの効果を実現します。

一番下の角丸長方形を 2 回選択してコピーし、位置を移動した後、2 ピクセル離れた 2 つの角丸長方形を取得し、2 つの長方形のパスを減算して新しいパスを取得し、それを楕円 (白い 0) で塗りつぶします。 -100 透明度)、最後にこのハイライト パスのオーバーレイ モードをオーバーレイに設定します。

ステップ07

下部に1pxのハイライトを追加します。

ステップ08

現在の結果は以下の通りです。次に、お茶を飲みながら休憩しましょう。

ステップ09

背景を一時的に白に変更すると、前の逆三角形で使用されたフェザリングにより、一部のピクセルがエンベロープの両側から少しはみ出していることがわかります。

これらのピクセルを処理するには 2 つの方法があります。1 つはビットマップとしてフラット化する方法、もう 1 つはパスを保持したままマスクする方法です。操作は図に示すとおりです。下に：

ステップ10

暗い背景に戻りましょう。エンベロープの側面が少し平らだと感じますか? バーまたは放射状の塗りつぶしを使用して効果を加えてみましょう。

ステップ11

次に、エンベロープの上下の三角形に単一ピクセルのハイライトを追加します。パスの減算の操作 (パンチ パス、[修正] – [パスの結合] メニューにあります) については、これまでに繰り返し説明したので説明しません。ここでは、以下に示すように:

ステップ12

同様に、下の三角形にハイライトを追加します。

ステップ13

背景が暗い色なので、グローを追加することを検討できます。ここでは FW の投影や発光フィルターを使用せず、パスを使用します。理由は、個人的な好みによるものです。エンベロープの下部の角丸長方形よりも上下左右に 1 ピクセル大きい、フェザリングなし、透明度 30 の新しい角丸長方形を作成できます。

ステップ14

次に、下に 1 ピクセルのハイライトを追加します。

ステップ15

この時点でアイコンは基本的に完成し、次は磨きの段階に入ります。すべてのレイヤーを選択して「コピー」し、すぐに Ctrl+Alt +Shift+Z を押してレイヤーをビットマップに平坦化し、オーバーレイ モードをオーバーレイに、透明度を 60 に設定して、彩度を確認できるようにします。アイコンの度数とコントラストが向上しました。これは私が個人的に気に入っている簡単な研磨方法ですが、カーブやコントラストなどのパラメータを手動で調整する必要がある場合もあります。そして飽和。

仕上げる

最終的なエフェクト (エンベロープの下の三角形はパスを投影として使用します)