1 PS チュートリアルPhotoshop でVista(ビスタ)風レイアウトを作成する方法 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.]
選択範囲を反転させ、レイヤーの不透明度を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.]
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.]角丸長方形ツールを選び、長方形を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.]角丸長方形ツールを再度選択し、一番最初に作成したのと同じボタンを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 翻訳:幕澤]
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.]
選択範囲を反転させ、レイヤーの不透明度を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.]
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.]角丸長方形ツールを選び、長方形を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.]角丸長方形ツールを再度選択し、一番最初に作成したのと同じボタンを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 翻訳:幕澤]