PR

透明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)。

Think IT会員限定特典
  • 「透明PNGの実践テクニック!」サンプルプログラム(1)

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

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

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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