ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでウェブサイト用の地球ボタンを作る方法

Photoshopでウェブサイト用の地球ボタンを作る方法

投稿日:2009年10月20日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、Photoshopでウェブサイト用の地球ボタンを作ってみたいと思います。

Step1:はじめに

まずはじめに、解像度500X300でこのチュートリアル用に新規ファイルを作成し、カンバスカラーを白にします。
続いて、角丸長方形ツール角丸ツール(赤)(丸み:30px)を選択し、#d61d23の色で次のようにシェイプを描きます。

角丸シェイプ



Step2:レイヤースタイルを追加

次にこのレイヤーに下記のようなレイヤースタイルを適用します。

シャドウ(内側)

グラデーション

ボタンは次のようになっているはずです。

スタイル効果




Step3:ボタンに反射を追加

ここで、ボタンに反射を追加します。
「Ctrl」+「J」で現在のレイヤーを複製した後、新しいレイヤーを作成し、
コピーしたレイヤーと共に反転させ、ひとつのレイヤーに結合します。
次に、「編集」−「変形」−「垂直方向に反転」を適用し、下記のようにします。

反射

ボタンの下の反射をもっと透明にするために、クイックマスクモードで下記のようなグラデーションをかけます。

クイックマスク



Step4:画像編集

次に画像編集モードに戻ります。
これで選択範囲が作成されます。
「Delete」キーを押して選択範囲の画像を消します。

画像編集



Step5:ボタンに輝きを追加

「Ctrl」+「D」で選択を解除し、次のステップに進みます。

ボタンに輝きを追加したいと思います。
角丸長方形ツール角丸長方形ツール(丸み:80px)を選択し、白で下記のような形を作ります。

角丸ツール(白)

このレイヤーを「レイヤー」−「ラスタライズ」−「シェイプ」でラスタライズします。
次に、もう一度クイックマスクモードを選択して次のようにグラデーションをかけます。

ラスタライズ



Step6:画像の消去

画像編集モードに戻ると選択範囲が作成されています。
「Delete」キーを押して、画像の選択部分を消去します。

選択部分消去

「Ctrl」+「D」で選択を解除して、現在のレイヤーの描画モードを「オーバーレイ」に変えます。

オーバーレイ



Step7:ボタンにデザインを追加

これでボタンは完成です。
ここから次のステップに移ります。
ボタンに何かデザインを加えた方が見栄えが良くなると思います。
そこで、楕円ツールを楕円ツール選んで、次のように白の丸いシェイプを描きます。

白丸シェイプ



Step8:様々なスタイルを追加

次に、下記のようなレイヤースタイルを追加します。

シャドウ

光彩

グラデ

境界線

結果をご覧ください。

スタイル効果



Step9:画像を加工する

ここでは、丸いデザイン要素に絵を追加します。
これをお使いください。他から探してきても結構です。
画像を開いて縮小し、下の図のように配置します。

地球

「イメージ」−「色調補正」−「彩度を下げる」(「Ctrl」+「Shift」+「U」))
で白黒にして、このレイヤーの描画モードを「オーバーレイ」に変えます。

彩度

シャープツール(ブラシ:100px、モード:通常、強さ:40%)を選んで、この部分をさらにシャープにします。

シャープ



Step10:テキストを追加

いよいよ最後の工程です。
チュートリアルの最後にテキストを追加しましょう。
横書き文字ツールで次のように白を使って何か書きます。

テキスト

この上の画像ではSegoe UIというフォントを白で使っています。
ただ、これは商業用のフォントなので、お持ちでない場合はいくらでも代用が利きます。

たとえばArial Blackです。
最後に、このレイヤーに次のレイヤースタイルを適用します。

レイヤースタイル

すると、こんな風になります。

シャドウ



Step11:完成

これで作品は完成です。
自分で作成したかっこいい地球ボタンをお楽しみください。
色を変えてみるのもいいでしょう。

完成



引用:Web Design Library 著者:www.photoshopstar.com 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

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