スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopで近未来のボタンをデザインする方法

Photoshopで近未来のボタンをデザインする方法

投稿日:2009年02月17日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopで近未来のボタンを作ってみたいと思います。


Step1:はじめに

新規ファイルを作成しましょう。
ここでは450ピクセル×350ピクセル、解像度72dpiのキャンバスを使い、背景を黒にします。
新規レイヤーを作成して「ボタン」と名前をつけます。
新規レイヤーで大きな円を描きます。
影の色を「#003637」にして大きさを194ピクセル×194ピクセルにします。

「ボタン」レイヤーを作成


Step2:レイヤースタイルを適用する

レイヤースタイル(「レイヤー」−「レイヤースタイル」を選択)で、ダークグリーンの円のレイヤーに、「シャドウ(内側)」、「光彩(内側)」、「グラデーションオーバーレイ」を適用します。

シャドウ(内側)

光彩(内側)

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

適用後

新規レイヤーに147ピクセル×147ピクセルの白い円を描いてダークグリーンのボタンの中央に配置します。

白い円を描く


Step3:白い円のレイヤーにスタイルを適用する

レイヤースタイル(「レイヤー」−「レイヤースタイル」を選択)で、白い円のレイヤーに「光彩(内側)」、「グラデーションオーバーレイ」、「境界線」を適用します。
それからレイヤーのブレンドモードを「比較(暗)」に設定します。

光彩(内側)

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

境界線

ブレンドモードを比較(暗)に設定

「ボタン」レイヤーと「白い円」のレイヤーを結合します。その後結合したレイヤーを複製します。
複製したレイヤーの大きさを70%の大きさに変更します。
「編集」−「変形」−「拡大・縮小」を選択して、ロゴデザインの中央に配置します。

「編集」−「変形」−「拡大・縮小」を選択し中央に配置

前のステップで作業した円形のレイヤーを複製して大きさを変更してデザインの中央に配置します。

複製、大きさを変更して中央に配置


Step4:レイヤーを結合しスタイルを適用する

レイヤーパレット上でそれぞれのレイヤーを指定したら、「レイヤー」−「表示レイヤーを結合」を選択します。
すると、ユニークな円形のデザインのレイヤーが1つできあがります。

レイヤースタイル(「レイヤー」−「レイヤースタイル」を選択)で、このステップで結合した円形のレイヤーに「光彩(内側)」、「サテン」を適用します。

光彩(内側)

サテン


Step5:完成

Photoshopを使った近未来のボタンの完成です。

完成


引用:Web Design Library 著者:www.psdrockstar.com 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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