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 でVista(ビスタ)風レイアウトを作成する方法
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 でVista(ビスタ)風レイアウトを作成する方法 on Thu Mar 17, 2011 5:39 am

Admin


Admin
このチュートリアルでは、Vista(ビスタ)風レイアウトを作成する方法を紹介します。



Step1:はじめに

透明な背景の新規ドキュメントを、800x950ピクセルで作成してください。




Step2:ヘッダーをつくる

[You must be registered and logged in to see this image.]長方形選択ツールを選び、高さ215ピクセル、幅800ピクセルの長方形を描いてください。
次に、その長方形を黒とダークグレーの線型グラデーションで塗りつぶします。
[You must be registered and logged in to see this image.]ペンツールを選び、ブラシサイズを2~6ピクセル、色を#4c842dにセットしてください。くねくねと曲がった線を描きます。
描いた線へ、レイヤースタイルの「光彩(外側)」を下記のように適用してください。
[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.]ペンツールを選び、#389fa4の色で別の線を描いてください。
「光彩(外側)」を下記のように適用します。
[You must be registered and logged in to see this image.]
こんな感じになっているはずです。
[You must be registered and logged in to see this image.]
先ほどの色を使って1本ずつ、さらに2本の線を描きます。
今回はレイヤースタイルを適用せず、「フィルター」-「ぼかし」-「ぼかし(ガウス)」で線を3~5ピクセルほどぼかします。
[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.]
[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.]
選択範囲を反転させ、レイヤーの不透明度を20%に設定してください。両方のボタンに行うと、こんな風になります。
[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.]
[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.]




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.]
[You must be registered and logged in to see this image.]角丸長方形ツールを選び、長方形を3つ描きます。
白で塗りつぶし、下記の設定で線を加えます。
[You must be registered and logged in to see this image.]
レイアウトはこんな感じになっているはずです。
[You must be registered and logged in to see this image.]
3つのボックスにそれぞれタイトルを付けます。
[You must be registered and logged in to see this image.]
「Start Here!」のボックスに、[You must be registered and logged in to see this image.]楕円形選択ツールを使って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.]
タイトル文字を追加します。
[You must be registered and logged in to see this image.]
ここで、[You must be registered and logged in to see this image.]角丸長方形ツールを再度選択し、一番最初に作成したのと同じボタンを2つ作成してください。
ただし今回はもっと大きなものにして、「Start Here!」ボックスの下に置きます。
[You must be registered and logged in to see this image.]
これら2つのボックスは、サイトの広告用に使います。
[You must be registered and logged in to see this image.]
チュートリアル用のエリアを作りましょう。
好きなようにアイコンを作ってください。
私はカスタムシェイプライブラリーのシェイプを使用しました。
それらのアイコンをページの中央に、2セット配置してください。
[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.]




Step5:フッターをつくる

再度、[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

 

Free forum | © PunBB | Free forum support | 連絡先 - | Report an abuse | Sosblog