透明PNGの実践テクニック！［2ページ目］

はみ出したギザギザバッジを作る

　「Web2.0」といった言葉が流行していた時に、サイト上に図2-1のようなギザギザバッジをつけることが流行していました。ドロップシャドウをつけた上で、少しはみ出して貼（は）り付けてあるような演出が施されます。場面によっては十分活用できるテクニックなので、ぜひ実践してみましょう。

　まずは、ツールバーの「多角形ツール」を使って、図2-2のようなギザギザの図形を描きましょう。「多角形オプション」で「星形」のチェックボックスを選ぶのがポイントです（図2-3）。

　続いて、立体感をつけたりなどの演出を施します。レイヤーパレットで多角形のレイヤーをダブルクリックして「レイヤースタイル」ダイアログを開きます。左側のメニューから「グラデーションオーバーレイ」を選び、光の入る位置などを想定しながら影を作っていきます（図2-4）。

　次に、同じく左のメニューから「境界線」を選び、さらに立体感がつくように調整を加えていきます。この時、グラデーションの角度を先ほど設定した「グラデーションオーバーレイ」と同じ設定にし、色の設定をグラデーションオーバーレイよりも「少し濃い色」から「少し薄い色」に向かってグラデーションを作ると、美しい処理ができるでしょう（図2-5）。

光沢をつける

　続いて、光沢をつけていきます。レイヤーパレットで、サムネール画像の隣にあるグレーの「ベクトルマスクサムネール」という部分（図2-6）を、Ctrl（Macの場合はCommand）キーを押しながらクリックします。すると、多角形の形に添うように選択範囲が作られます。

　このまま光沢をつけてしまうと、境界線も含めて処理が施されてしまうため、メニューの「選択範囲 → 選択範囲を変更 → 縮小」を選んで、出てくるダイアログボックスに境界線と同じ幅の数値を入れて、選択範囲を縮小します。

　レイヤーパレットで、新規レイヤーを作成してパレット上部の「通常」となっているプルダウンリストを「オーバーレイ」に、塗りを「50%」に変更します（図2-7）。こうすることで、下に重なっているレイヤーを透かしてさまざまな効果を与えることができます。

　この状態でツールバーの「グラデーションツール」を使って、白黒でグラデーションを塗ると、色が塗られる代わりに、背景となっている下の色が変化します。何度か調整して、うまい光沢が出るように調整してみましょう（図2-8）。最後にメニューの「選択範囲 → 選択を解除」で選択を解除します。

　次にドロップシャドウをつけていきましょう。多角形本体のレイヤーをダブルクリックして「レイヤースタイル」ダイアログを表示し、左メニューから「ドロップシャドウ」を選びます。先と同様に各数値を調整して、貼（は）り付けたような演出になるよう、影をつけていきましょう。

　さらに、もっと立体感をつけてつるっとした質感を出すこともできます。

　まずは、ツールバーの「楕円（だえん）選択ツール」で、多角形の上に図2-9のような選択範囲を作ります。レイヤーパレットで、多角形のレイヤーを選択した状態で、レイヤーパレットの下部にある「塗りつぶしまたは調整レイヤーを新規作成」ボタンを、Alt（Option）キーを押しながらクリックします。すると、メニューが表示されるので「トーンカーブ」を選びましょう。

　トーンカーブの設定ダイアログボックスが表示されたら、「下のレイヤーを使用してクリッピングマスクを表示」にチェックを入れ、「OK」ボタンをクリックします。トーンカーブを調整して、微妙な質感を出していきます（図2-10）。