Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||PS チュートリアルPhotoshop でカーボンファイバーをはめ込んだナビゲーションを作る方法
INB 日本語掲示板
ようこそ(産業・自然科学者)ここでは、工業化時代のファイティングスピリットに満ちている、あなたと私の両方を通してこのネットワーク空間の自国の生物学的精神科学者と狂気の所に来ました。ホームinbforum.com、永久の名前:jp-inb.forumotion.com
INB 日本語掲示板

ようこそ(産業・自然科学者)ここでは、工業化時代のファイティングスピリットに満ちている、あなたと私の両方を通してこのネットワーク空間の自国の生物学的精神科学者と狂気の所に来ました。ホームinbforum.com、永久の名前:jp-inb.forumotion.com


You are not connected. Please login or register

《《《《《《《上一页INBforum   Go down

上一页INBforum》》》》》》》前のトピックを表示 次のトピックを表示 Go down  メッセージ [Page 1 of 1]

1 PS チュートリアルPhotoshop でカーボンファイバーをはめ込んだナビゲーションを作る方法 on Thu Mar 17, 2011 5:40 am

Admin


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



Step1:背景を作る

1200ピクセル×600ピクセルの新規ドキュメントを作成し、背景を透明にします。
描画色を「#bebebf」にして背景色を「#d2d2d2」にしたら、[You must be registered and logged in to see this image.]グラデーションツールで線形グラデーションを選択します。
[You must be registered and logged in to see this image.]
グラデーションを選択したら、キャンバスの上から下に向けてドラッグします。
[You must be registered and logged in to see this image.]
キャンバスにノイズを追加するときは、「フィルタ」-「ノイズ」-「ノイズを加える」で次のように設定します。
[You must be registered and logged in to see this image.]
背景にぼかしを入れます。
「フィルタ」-「ぼかし」-「ぼかし(移動)」で次のように設定します。
[You must be registered and logged in to see this image.]
キャンバスの両端にぼかしが入りすぎました。
選択範囲を作って、ぼかしの入りすぎたところを取り除きます。
[You must be registered and logged in to see this image.]
キャンバスに作った選択範囲を切り抜きます。
明るいメタルの背景が現れるので、「ぼかし(移動)」の設定を調整してメタルを程よく調整します。




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

半径10ピクセルの[You must be registered and logged in to see this image.]角丸長方形ツールをドラッグし、ナビゲーション用の長方形をキャンバスの真ん中に描きます。
[You must be registered and logged in to see this image.]
レイヤースタイルを次のように設定します。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
すると次のようになります。
[You must be registered and logged in to see this image.]
カーボンファイバーのテクスチャをカスタマイズします。
4ピクセル×4ピクセルの新規ドキュメントを作成し、次のようにコピーします。
[You must be registered and logged in to see this image.]
カーボンファイバーのパターンができたら、「編集」-「パターンの定義」を選択して、ナビゲーションの作業に戻ります。
ナビゲーションの周囲の選択範囲を読み込みます。
「選択範囲」-「選択範囲を読み込む」でナビゲーションの長方形のレイヤーを選択します。
ナビゲーションのレイヤーの上に新規レイヤーを作成したら、[You must be registered and logged in to see this image.]塗りつぶしツールを選択して、パターンメニューからカーボンファイバーのパターンを選択します。
パターンを選択したら、読み込んだ選択範囲を塗ります。
[You must be registered and logged in to see this image.]
カーボンファイバーのレイヤーのブレンドモードを「差の絶対値」にします。
次のようになります。
[You must be registered and logged in to see this image.]









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

[You must be registered and logged in to see this image.]文字ツールでナビゲーション領域の下側に文字を入れます。
[You must be registered and logged in to see this image.]
文字を入力したら、次のようにレイヤースタイルを設定します。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
それぞれの文字の間に、隣接する1ピクセルの線を2本、ナビゲーションの上から下まで入れます。
線の1つを黒にして、もう1つを白にします。
線を作ったらレイヤーの不透明度を50%にし、ブレンドモードをソフトライトにします。
[You must be registered and logged in to see this image.]




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

[You must be registered and logged in to see this image.]楕円形選択ツールをドラッグしてナビゲーションの文字の上に小さい円を描きます。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]グラデーションツールの線形グラデーションを選択して、黒(#000000)からグレー(#828282)を設定したグラデーションをドラッグします。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]楕円形選択ツールをもう一度使用し、最初に作った円の内側にもう一つ選択範囲を作成します。
[You must be registered and logged in to see this image.]
選択範囲を「#8e8e8e」で塗ります。
選択範囲を指定した状態のまま、グレーの円の上に新規レイヤーを作成します。
描画色を白(#FFFFFF)にし、[You must be registered and logged in to see this image.]グラデーションツールの円形グラデーションを選択したら、グラデーションのタイプを「白から透明へ」に変更します。
[You must be registered and logged in to see this image.]
選択範囲をズームし、円形グラデーションを左上の角からドラッグします。
グラデーションを大きくしたくない場合は、ドラッグを短か目にします。
[You must be registered and logged in to see this image.]
選択範囲が指定された状態のまま、グラデーションのタイプを線形グラデーションに変更します。
もう1つ新規レイヤーを作成し、線形グラデーションで下から上にドラッグします。
[You must be registered and logged in to see this image.]
それぞれのレイヤーの不透明度やグラデーションの位置を変えてハイライトを加えると、次のようになります。
[You must be registered and logged in to see this image.]
球体とハイライト全部を複製し、隣のボタンへ移します。
全部のボタンに球体を作ります。




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

例として、「Portfolio」ボタンを使って説明します。
好みの色で、球体にグラデーションオーバーレイを適用します。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]長方形選択ツールで、仕切り線の間へ、ボタンを囲むように選択範囲を作ります。
[You must be registered and logged in to see this image.]
選択範囲を「#dddddd」で塗ったら、レイヤーのブレンドモードを「オーバーレイ」に設定します。
[You must be registered and logged in to see this image.]
最後に[You must be registered and logged in to see this image.]多角形選択ツールで三角形のシェイプを作り、背景と同じ色で塗ったら、次のような設定でドロップシャドウを入れます。
[You must be registered and logged in to see this image.]




Step6:完成

オンマウス状態の画像ができました。
完成です。
[You must be registered and logged in to see this image.]





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

ユーザーのプロフィールを表示 http://jp.inbforum.com

上一页INBforum   Go down

上一页INBforum前のトピックを表示 次のトピックを表示 トップに戻る  メッセージ [Page 1 of 1]

Permissions in this forum:
返信投稿: 不可

Copyright ©2009-2010 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Create a forum on Forumotion | © PunBB | Free forum support | 連絡先 - | Report an abuse | Sosblog