スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでリボンを作る方法

Photoshopでリボンを作る方法

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

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

Step1:はじめに

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

背景

グラデーションオーバーレイ



Step2:影を加える

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

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

シャドウ効果





Step3:えんぴつツールで線を引く

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

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

ブレンドオプション

結果



Step4:リボンを作る

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

リボン

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

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

ドロップシャドウ

シャドウ(内側)

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

結果02



Step5:リボンに輝きを加える

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

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

結果03

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

ブレンドオプション

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

結果04



Step6:さらに輝きを良くする

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

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

リボン複製

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

ブレンドオプション

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

結果05



Step7:完成

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

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

完成

クリックして拡大



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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング