ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

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