ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > フォトショップで光沢のあるボタンを作る方法

フォトショップで光沢のあるボタンを作る方法

投稿日:2007年8月17日   レベル:初心者    ソフトウェア:PhotoShop


Step1:キャンバス/バックグラウンドの準備
まず、好きな大きさの新規ドキュメントを作ります。わたしは400x340のサイズを使いました。完全なテンプレートを作るつもりがないからです。

薄いグレーのグラデーションをバックグラウンドに加えました

キャンバス・バックグラウンドの準備

Step2:形を作る
長方形ツールを使って、キャンパスのどこかに140x140ピクセルの大きさの選択範囲を作ります。

形を作る

形を作る2

形を作る3
Step3:形に色を塗る
選択範囲を選んだ状態で、新しいレイヤーを選んでいることを確認し、放射状グラデーションで色を塗ります。

私は#3e94d4と#336fc1のカラーを選びました

また、白(#FFFFFF)のストロークカラーもメインのレイヤーに適用しました。

形に色を塗る

Step4:選択範囲を縮小
まず、メインのレイヤーを選ぶことから始めます(コントロールキーを押しながらレイヤーのサムネイルをクリックします)

選択範囲 > 選択範囲を変更 > 縮小を選び、4を入力し、選択範囲を4ピクセル縮小します。

選択範囲を縮小

Step5:グラデーション
グラデーションツールを使って白から透明のグラデーションを、画面の上から下に適用します。

以下の様になります。

グラデーション操作

グラデーション追加後

Step6:反射の設定
次に、ペンツールペンツールを使って曲線を描きます。

ペンツールペンツールを選択した状態で、パスを右クリックして選択します。デフォルトのオプションを仕様します。

ペンツール選択範囲

新規レイヤーを作成します。その後、再度、グラディエントツールを使って白から透明のグラディエントを、画面の上から下に適用します。

このレイヤーのモードをソフトライトに変え、必要なら不透明度を下げますが、私は下げませんでした。

ソフトライト

Step7:詳細設定
左端に不透明度の低いアイコンを加えました。

テキストを加えます。わたしはTahoma, 11PT, #FFFFFFのフォントを使って、ドロップシャドウを加えました。

詳細設定

色相・彩度を変更することで、バリエーションが増えます。

完成

引用:Web Design Library 著者:PhotoshopStar翻訳:中山



スポンサードリンク

コメント

ランダム記事5件

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