スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > かっこいいメニューボタンの作り方

かっこいいメニューボタンの作り方

投稿日:2008年4月4日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、かっこいいメニューボタンを作ってみたいと思います。

Step1:背景を塗りつぶす
新規ドキュメント(サイズは350×128)を作成してから塗りつぶしツールを使って背景色を「#FFFFFF」にします。


Step2:新規レイヤーの作成
「長方形選択ツール」で四角形のシェイプを選択し、新規レイヤーを作成してから塗りつぶしツールを使って任意の色を塗ってステップ2を終わらせます。
ここではこのガイドで指定した通りに選択していませんが、それはこれからボタンの一番下をカットするからです。
理由については後ほど説明します。

ps_13696_01.jpg


Step3:ボタンの端を滑らかにする
長方形が選択されていることを確認してから、「選択範囲」−「選択範囲を変更」−「滑らかに」で3ピクセルを選択します。
続けて「選択範囲」−「選択範囲を反転」を選択し、「Delete」キーを押すと色のついたボタンの端が滑らかになります。

ps_13696_02.jpg


Step4:ブレンドオプションの調整
次のステップでブレンドオプションを調整します。
次のスクリーンショットの通りに調整をしてください。

ps_13696_03.jpg

ps_13696_04.jpg

ps_13696_05.jpg

ps_13696_06.jpg

ps_13696_07.jpg


Step5:レイヤーの複製
続けて「レイヤー」−「レイヤーを複製」を選択してレイヤーを複製し、同じ操作を2度繰り返します。
あるいは必要に応じてもっと増やします。
このように最初に作った画像の隣に並べます。
これでだいぶ見栄えが良くなり、横書き文字ツールでテキストを追加できますが、ここではこの操作を後回しにします。

ps_13696_08.jpg


Step6:ボタンの一番下をカットする
ステップ2でお伝えしたとおり、ボタンの一番下をカットしますので、次のように選択範囲を作ってください。
それから「Delete」キーを押してボタンの一番下を削除します。

ps_13696_09.jpg


Step7:テキストの追加
この最後のステップで、「#626262」の色で横書き文字ツールを使ってテキストを追加します。
フォントは「Microsoft Sans Serif」、サイズは9ピクセルです。
Caps Lockがオンになっていることに注意してください。


Step8:完成
完成です。

ps_13696_10.jpg


引用:Web Design Library  著者:phonuts.org 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2014年8月の人気記事ランキング