ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでスポーツチームのナビゲーションメニューを作る方法

Photoshopでスポーツチームのナビゲーションメニューを作る方法

投稿日:2009年05月1日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopでスポーツチームのナビゲーションメニューを作りたいと思います。


Step1:はじめに

まずはじめに1024ピクセル×140ピクセルの新規ドキュメントを作成します。

新規ドキュメントを作成する


Step2:背景を作る

背景を「#000000」の色で塗ります。

長方形選択ツール長方形選択ツールで、次のように選択範囲を作って、「#FFFFFF」の色で塗ります。


「#FFFFFF」の色で塗る

長方形のレイヤーを右クリックしたらブレンドオプションを次のように設定します。

レイヤースタイルを設定する


グラデーションを設定する


レイヤースタイルを設定する

すると次のようになります。

結果

長方形選択ツール長方形選択ツールで次のように選択範囲を作って「#000000」の色で塗ります。

「#000000」の色で塗る

レイヤーの不透明度を26%以下に設定すると次のようになります。

不透明度を26%以下に設定する


Step3:区切り線を入れる

リンクエリアの区切り線を作ります。
次のように幅2ピクセルの選択範囲を作って「#FFFFFF」の色で塗ります。

「#FFFFFF」の色で塗る

このレイヤーのブレンドオプションを次のように設定します。

レイヤースタイルを設定する


グラデーションを設定する

不透明度を56%に設定すると次のようになります。

不透明度を56%に設定する

このステップは選択自由です。
長方形選択ツールで10ピクセル程度の選択範囲を次のように作ります。

長方形選択ツールで10ピクセル程度の選択範囲を作る

「編集」−「消去」を選択して、気に入った仕上がりになるまで繰り返します。
次のようになります。

気に入った仕上がりになるまで「編集」−「消去」を繰り返す


Step4:テキストを入力する

区切り線のレイヤーをコピーして、テキストを入力します。
選択されていないリンクの色を「#828282」にして選択されるリンクの色を「#0987b7」にします。
すると次のようになります。

テキストを入力する

テキストと区切り線のレイヤーの下に、光沢を追加します。
長方形選択ツール長方形選択ツールで選択範囲を作って「#FFFFFF」の色で次のように塗ります。

「#FFFFFF」で塗る

不透明度を56%に設定してブレンドオプションをオーバーレイにすると次のようになります。

不透明度を56%に設定してオーバーレイにする

選択されるリンクを作業します。
次のように選択範囲を作ります。

選択範囲を作る

不透明度を84%に設定してブレンドオプションをオーバーレイにします。

不透明度を84%に設定してオーバーレイにする

レイヤーのブレンドオプションを次のように設定します。

レイヤースタイルを設定する


グラデーションを設定する

すると次のようになります。

結果

最後のステップでリンクの下側に「光」を入れます。
楕円形選択ツール楕円形選択ツールで10ピクセル程度の選択範囲を作って「#FFFFFF」の色で塗ります。

光を入れる



Step5:完成

ブレンドオプションをオーバーレイに変更したら、レイヤーをコピーして光を明るめにします。
完成すると次のようになります。

完成


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



スポンサードリンク

コメント

ランダム記事5件

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