ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング