スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > モダンなボタンの作り方

モダンなボタンの作り方

投稿日:2008年4月22日   レベル:初心者    ソフトウェア:PhotoShop
このチュートリアルでは、モダンなボタンを描いてみたいと思います。


Step1:新規ドキュメントの作成
新規ドキュメントを作成します。

大きさは130ピクセル×80ピクセル、背景を白にします。


Step2:角丸長方形ツールの設定
角丸長方形ツールを使って、次の画像のように設定します。

ps_14208_01.jpg


Step3:ボタンのシェイプを作る
ボタンのシェイプを作ります。

ps_14208_02.jpg


Step4:ボタンのシェイプの設定
では、ボタンのシェイプにこのように設定します。

ドロップシャドウ:

ps_14208_03.jpg

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

ps_14208_04.jpg

境界線:

境界線のサイズを1ピクセルに、色を「#9EAB48」に設定します。

ボタンはこのようになります。

ps_14208_05.jpg


Step5:新規レイヤーの作成
新規レイヤーを作成します。

楕円形選択ツールを使って右側に小さい選択範囲を作ります。

この画像をご覧ください。

ps_14208_06.jpg


Step6:スタイルの追加
白く塗ってからこのようにスタイルを追加します。

シャドウ(内側):

ps_14208_07.jpg

境界線:

境界線のサイズを1ピクセルに、色を「#95A339」に設定します。


Step7:ボタンの完成
ボタンはこのようになります。

ps_14208_08.jpg


Step8:新規レイヤーの作成
新規レイヤーを作成します。

長方形選択ツールを使って3つの選択範囲を作り、この画像のように色を塗ります。

それぞれの選択範囲の幅 、1ピクセルです。

ps_14208_09.jpg


Step9:テキストの追加
あとはボタンにテキストを追加するだけで完成です。

ここでは12ピクセルの「MS Trebuchet」フォントを使い、「スムーズ」を設定しました。

また、テキストに「#7D8928」の色で1ピクセルの境界線を追加しました。


Step10:完成


ps_14208_10.jpg

これで完成です!

楽しんでください!


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



スポンサードリンク

コメント

ランダム記事5件

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