透明PNGの実践テクニック!

2008年12月25日(木)
たにぐち まこと

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

 「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)。

  • 「透明PNGの実践テクニック!」サンプルプログラム(1)

  • 「透明PNGの実践テクニック!」サンプルプログラム(2)

株式会社エイチツーオー・スペース
東京代々木でWeb制作業を営む、デザインユニット。「ちゃんとWeb」というコーポレートテーマで、なんとなくキレイ、なんとなく動いているサイトではない「ちゃんとした」サイト作りを心がける。現在は、「ちゃんとWeb.net」や「aquanotes Shop.」などのサイト運営を通じて、Webの運営担当者に啓蒙中。http://h2o-space.jp

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています