スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでクールなブルーボタンを作る方法

Photoshopでクールなブルーボタンを作る方法

投稿日:2009年04月14日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopでクールなブルーボタンを作りたいと思います。


Step1:はじめに

新規ファイルを作成します。
ここでは500ピクセル×400ピクセル、解像度72dpiに設定して背景色を黒にします。
新規レイヤーを作成して色を「#6FB5E3」、サイズを118ピクセル×118ピクセルの円を描きます。

118ピクセル×118ピクセルの円を描く


Step2:背面の円にレイヤースタイルを設定する

レイヤースタイル(「レイヤー」−「レイヤースタイル」)で「光彩(内側)」と「グラデーションオーバーレイ」を次のように設定します。

光彩(内側)の設定


グラデーションオーバーレイの設定


設定の結果


Step3:前面の円にレイヤースタイルを設定する

新規レイヤーで色を「#5F9AC1」、サイズを88ピクセル×88ピクセルの円を描きます。

88ピクセル×88ピクセルの円を描く

レイヤースタイル(「レイヤー」−「レイヤースタイル」)で小さい方の円の「光彩(内側)」と「グラデーションオーバーレイ」を次のように設定します。

光彩(内側)の設定


グラデーションオーバーレイの設定


設定の結果


Step4:円を結合してボタンにする

2つの円を結合してボタンにします。
それからレイヤースタイル(「レイヤー」−「レイヤースタイル」)で「ドロップシャドウ」と「シャドウ(内側)」を次のように設定します。

ドロップシャドウの設定

シャドウ(内側)の設定

設定の結果


Step5:シンボルを置く

新規レイヤーを作成して黒い色でサイズを73ピクセル×73ピクセルの円を描いてボタンの真ん中に配置します。

黒い色でサイズを73ピクセル×73ピクセルの円を描いてボタンの真ん中に配置

レイヤースタイル(「レイヤー」−「レイヤースタイル」)で黒い円のレイヤーの「光彩(内側)」と「境界線」を次のように設定します。
それからレイヤーのブレンドモードを「比較(明)」にします。

光彩(内側)の設定

境界線の設定

設定の結果

横書き文字ツールでフォントを「Webdings」、サイズを72ポイント、アンチエイリアスを「強く」、色を白にします。
テキストレイヤーで「%(「Shift」+「5」キー)」を入力するとトロフィー型のアイコンが表示されますが、それとは別に好みのシンボルを選択してボタンの真ん中に配置することもできます。

シンボルを配置する

レイヤースタイル(「レイヤー」−「レイヤースタイル」)でテキストレイヤーに「グラデーションオーバーレイ」を次のように設定します。
それからレイヤーのブレンドモードを「比較(暗)」にします。

グラデーションオーバーレイの設定


設定の結果



Step6:完成

次のようなボタンを作ってみましたが、このチュートリアルに沿って作業すればまったく同じでなくとも似たようなものを作ることができます。

完成


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



スポンサードリンク

コメント

ランダム記事5件

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