投稿日：2010年01月15日　　　レベル：初心者　　　　ソフトウェア：

---

このチュートリアルでは、Photoshopでリボンを作ってみたいと思います。

• Step1 ： はじめに
• Step2 ： 影を加える
• Step3 ： えんぴつツールで線を引く
• Step4 ： リボンを作る
• Step5 ： リボンに輝きを加える
• Step6 ： さらに輝きを良くする
• Step7 ： 完成

まずはじめに、リボンなどを配置するのに適した背景と環境を作りましょう。
ここでは背景に「#83b70b」を使い、次のようにグラデーションレイヤースタイルを設定します。

続いて、背景に手を加えます。
長方形選択ツールで画面の上から50ピクセルほどドラッグし、程よい暗さ（#349005）の長方形を描きます。

それから消しゴムツールで、新しく作った長方形の下からスムーズに消していきます。
すると感じの良いシャドウ効果が残ります。

えんぴつツールを、1ピクセルの「#FFFFFF」に設定します。
シャドウの真上に線を引きます。

それから、レイヤー設定でブレンドオプションをオーバーレイにします。
ブレンドオプションの設定は次の通りに行います。

これから本題のリボンを作ります。
ペンツールでリボンのシェイプを作りますが、うまく作れない場合は、私の作ったリボンをトレースしてもかまいません。
シェイプを作ったら、背景色を「#e84200」にします。

リボンはできましたが、ご覧のように見た目が地味なので手を加えます。
ここではレイヤースタイルのリストをご紹介します。

「レイヤー」−「レイヤースタイル」−「ブレンドオプション」を選択すると操作できます。
次のように設定します。

すると次のようになります。

続いて、リボンに輝きを入れます。
最初に作ったリボンのシェイプを複製し、全てのレイヤースタイルを削除します。
背景を白くし、レイヤーを3-4ピクセルほど上に移動させます。

それから長方形選択ツールで両端を最低2ピクセル切り取ります。
切り取ったら少し小さくなったリボンができあがります。
消しゴムツールのサイズを100にして、レイヤーの上から徐々にブラシをかけます。
すると次のようになります。

レイヤースタイルを次のように設定します。

すると次のようになります。

最初に作ったリボンを複製して、背景を再び白くします。
長方形選択ツールで半分に切って片方を白くし、もう片方を消去します。

続いて、消しゴムツールを前に作業したのと同じ設定にして、
リボン（新しいレイヤー）の右側の上から下にかけて徐々にブラシをかけます。

輝きの見た目が少し良くなります。
ブレンドオプションを次のように設定します。

すると次のようになります。

これでリボンの完成ですが、さらに手を加えることもできます。
ここではこのリボンを使ってApple LED Cinema Displayのディスカウントバナーに使ってみましたが、
他の用途に使うこともできます。

いろいろ手を加えたら次のようになります。

クリックして拡大

引用:Web Design Library　著者:pstut.info　翻訳：菊池

スポンサードリンク