ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

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件

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