ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでカーボンファイバーをはめ込んだナビゲーションを作る方法

Photoshopでカーボンファイバーをはめ込んだナビゲーションを作る方法

投稿日:2010年06月15日   レベル:中級者    ソフトウェア:PhotoShop

このチュートリアルでは、カーボンファイバーをはめ込んだナビゲーションを作る方法を紹介します。
これは、テンプレートモンスターのテンプレートからヒントを得て作成しました。

Step1:背景を作る

1200ピクセル×600ピクセルの新規ドキュメントを作成し、背景を透明にします。
描画色を「#bebebf」にして背景色を「#d2d2d2」にしたら、グラデーションツールグラデーションツールで線形グラデーションを選択します。

グラデーションツールを選択する

グラデーションを選択したら、キャンバスの上から下に向けてドラッグします。

グレーのグラデーションの背景

キャンバスにノイズを追加するときは、「フィルタ」−「ノイズ」−「ノイズを加える」で次のように設定します。

ノイズを加える

背景にぼかしを入れます。
「フィルタ」−「ぼかし」−「ぼかし(移動)」で次のように設定します。

ぼかしを入れる

キャンバスの両端にぼかしが入りすぎました。
選択範囲を作って、ぼかしの入りすぎたところを取り除きます。

両端を取り除く

キャンバスに作った選択範囲を切り抜きます。
明るいメタルの背景が現れるので、「ぼかし(移動)」の設定を調整してメタルを程よく調整します。



Step2:ナビゲーションを作る

半径10ピクセルの角丸長方形ツール角丸長方形ツールをドラッグし、ナビゲーション用の長方形をキャンバスの真ん中に描きます。

黒っぽい角丸長方形

レイヤースタイルを次のように設定します。

シャドウ(内側)の設定

グラデーションオーバーレイの設定

境界線の設定

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

ナビゲーション

カーボンファイバーのテクスチャをカスタマイズします。
4ピクセル×4ピクセルの新規ドキュメントを作成し、次のようにコピーします。

カーボンのパターン

カーボンファイバーのパターンができたら、「編集」−「パターンの定義」を選択して、ナビゲーションの作業に戻ります。

ナビゲーションの周囲の選択範囲を読み込みます。
「選択範囲」−「選択範囲を読み込む」でナビゲーションの長方形のレイヤーを選択します。
ナビゲーションのレイヤーの上に新規レイヤーを作成したら、塗りつぶしツール塗りつぶしツールを選択して、パターンメニューからカーボンファイバーのパターンを選択します。
パターンを選択したら、読み込んだ選択範囲を塗ります。

カーボンパターンで塗りつぶす

カーボンファイバーのレイヤーのブレンドモードを「差の絶対値」にします。
次のようになります。

カーボンファイバーのナビゲーション





Step3:ナビゲーションのボタンを作る

文字ツール文字ツールでナビゲーション領域の下側に文字を入れます。

文字を入れる

文字を入力したら、次のようにレイヤースタイルを設定します。

ドロップシャドウの設定

カラーオーバーレイの設定

それぞれの文字の間に、隣接する1ピクセルの線を2本、ナビゲーションの上から下まで入れます。
線の1つを黒にして、もう1つを白にします。
線を作ったらレイヤーの不透明度を50%にし、ブレンドモードをソフトライトにします。

1ピクセルの線が2本入る



Step4:ナビゲーションの球体を作る

楕円形選択ツール楕円形選択ツールをドラッグしてナビゲーションの文字の上に小さい円を描きます。

円を描く

グラデーションツールグラデーションツールの線形グラデーションを選択して、黒(#000000)からグレー(#828282)を設定したグラデーションをドラッグします。

円にグラデーションをつける

楕円形選択ツール楕円形選択ツールをもう一度使用し、最初に作った円の内側にもう一つ選択範囲を作成します。

円形に選択する

選択範囲を「#8e8e8e」で塗ります。
選択範囲を指定した状態のまま、グレーの円の上に新規レイヤーを作成します。
描画色を白(#FFFFFF)にし、グラデーションツールグラデーションツールの円形グラデーションを選択したら、グラデーションのタイプを「白から透明へ」に変更します。

グラデーションを選択する

選択範囲をズームし、円形グラデーションを左上の角からドラッグします。
グラデーションを大きくしたくない場合は、ドラッグを短か目にします。

円形グラデーションを適用する

選択範囲が指定された状態のまま、グラデーションのタイプを線形グラデーションに変更します。
もう1つ新規レイヤーを作成し、線形グラデーションで下から上にドラッグします。

線形グラデーションを適用する

それぞれのレイヤーの不透明度やグラデーションの位置を変えてハイライトを加えると、次のようになります。

ハイライトを加える

球体とハイライト全部を複製し、隣のボタンへ移します。
全部のボタンに球体を作ります。



Step5:オンマウス状態の画像を作る

例として、「Portfolio」ボタンを使って説明します。
好みの色で、球体にグラデーションオーバーレイを適用します。

グラデーションオーバーレイを適用する

長方形選択ツール長方形選択ツールで、仕切り線の間へ、ボタンを囲むように選択範囲を作ります。

ボタンを選択する

選択範囲を「#dddddd」で塗ったら、レイヤーのブレンドモードを「オーバーレイ」に設定します。

選択範囲の色を変える

最後に多角形選択ツール多角形選択ツールで三角形のシェイプを作り、背景と同じ色で塗ったら、次のような設定でドロップシャドウを入れます。

ドロップシャドウの設定



Step6:完成

オンマウス状態の画像ができました。
完成です。

完成



引用:Web Design Library 著者:Hv-Designs.co.uk 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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