ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでクールなweb2.0風バッジを作成する方法

Photoshopでクールなweb2.0風バッジを作成する方法

投稿日:2011年9月9日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルではPhotoshopでクールなweb2.0風バッジを作成する方法を紹介します。

Step1.シェイプの作成をする

クールなweb2.0風バッジを作ります。

多角形ツール多角形ツールを選び、以下のように設定してから、シェイプを作成します。

シェイプを作成する

シェイプを作成したら、右クリックから「レイヤーをラスタライズ」を選びます。

シェイプをラスタライズする

「レイヤー」−「レイヤースタイル」−「グラデーションオーバーレイ」を追加します。

レイヤー効果からグラデーションオーバーレイを適用する

そうすると、次のような状態になっていると思います。

Step1.終了時の画像



Step2.境界線を追加する

Ctrlキーを押しながらレイヤーパレットのサムネイルをクリックし、図形を選択します。
「選択範囲」−「選択範囲を変更」−「縮小」を選択し、2pxと設定します。

シェイプの大きさの選択範囲を縮小する

新しいレイヤーを作成し、適当な色で塗りつぶします。
塗りつぶしたレイヤーの不透明度を0%に変更します。
それから、「レイヤー」−「レイヤースタイル」−「境界線」を選び、1pxの白い境界線を追加します。

境界線を設定する

現時点ではこのようになっているはずです。

Step2.終了時の画像



Step3.光の表現を作る

新しいレイヤーを作成し、多角形ツール楕円形選択ツールを使って、シェイプの半分以上を囲むように選びます。

楕円形選択ツールでシェイプを囲む

境界線のレイヤーに移動し、「選択範囲」−「選択範囲を反転」を選び、Delキーを押します。
すると多角形ツール楕円形ツールに囲まれた分、バッチから明るい部分が削除され、暗くなります。
境界線のレイヤーの、レイヤーの描画モードをソフトライトにします。

レイヤーの描画モードをソフトライトにする



Step4.テキストを入力する

Segoeフォントを使って白色のテキストを追加します。 「Ctrl」+「T」キーを押し、テキストを回転させます。

テキストを入力し回転させる

「レイヤー」−「レイヤースタイル」−「ドロップシャドウ」を選び、テキストに影をつけます。

テキストに影をつける

同じくレイヤー効果から「グラデーションオーバーレイ」を追加します。

テキストにグラデーションをつける



Step5.完成

これで完成です。

完成図



引用:Web Design Library 著者:avivadirectory.com 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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