Advertisement

texturedweblayout1

↑ クリックすると原寸拡大表示されます。

 

今回はフォトショップを使って、ザラザラした背景の質感が印象的なシンプルなウェブレイアウトをデザインする方法をご紹介します。

紙テクスチャを背景デザインに使うことで、ザラザラとしたユニークなデザインに仕上げています。

またウェブトレンドのひとつでもある型押し文字を簡単にデザインする方法も一緒に学ぶことができます。

 

 

詳細は以下から。

 

チュートリアル情報


 

プログラム : Photoshop

バージョン : CS4で作成 (古いバージョンでも可能)

難易度 : 初級者から中級者

所要時間 : 1時間30分から2時間ほど

 

このチュートリアルから学ぶことのできるポイントとしては、

・ グリッドを使ったすっきりとして使いやすいウェブレイアウトの方法

・ テクスチャを使ったユニークな背景画像をデザインする方法

・ 型押し文字を簡単にデザインする方法

・ サムネイル画像に影を加えて立体的なデザインをつくる方法

などがあります。

 

 

チュートリアルハイライト


 

ウェブレイアウトを作成するときに、最近必ずと言っていいほどグリッドを使ってデザインされることが多いようです。

今回もグリッドの補助ツールとして960 Grid Systemを使用しています。

portfolio_1e

 

グリッドをダウンロードすることで以下の様な半透明のラインレイヤーを使ってデザインすることになります。

これによって、ピクセルのずれなどを考えずに自由な発想でレイアウトをすることができそうです。

portfolio_1f

 

今回背景に使用したテクスチャは500x500pxの継ぎ目のないテクスチャパターンをデザインすることで表現しています。

薄茶色(#d9cfc0)でペイントしたカンバスに紙テクスチャを重ねます。

重ねた紙テクスチャの彩度を下げ(Ctrl+Shift+U)、レイヤーの描画モードを「乗算」とし、不透明度を20パーセントに下げます。

さいごにメインメニューより「編集」>「パターンを定義」を適用しましょう。

テクスチャ素材はそのまま使うよりもこのように描画モードを変更したりして使うこともできますね。

portfolio_1d

 

このウェブレイアウトのアクセントとなっている型押し文字。

portfolio_4e

 

型押し文字のデザインはレイヤースタイルを適用するだけのお手軽なデザイン方法となっています。

まず「文字ツール」を選択し、お好みのテキストを「白」(#ffffff)で入力しましょう。

portfolio_4a

 

メインメニューより「レイヤー」>「レイヤースタイル」を選択し、順番に適用していけば完成です。

 

レイヤー効果 : カスタム

portfolio_4b

 

シャドウ(内側)

使用する色(#4e2e09)がポイントになってきます。

portfolio_4c

 

カラーオーバーレイ

シャドウ(内側)よりも薄い色(#978667)を使用するようにしましょう。

portfolio_4d

 

サムネイル画像を掲載する枠にもちょっとした工夫を加えることで立体的なデザインとなります。

作成したボックス枠を複製し、「黒」(#000000)で塗りつぶします。

続けてメインメニューより「編集」>「変形」>「ゆがみ」を選択し、以下の用にボックス枠から少しずらします。

portfolio_5f

 

変形を適用後、メインメニューより「フィルタ」>「ぼかし」>「ぼかし(ガウス)」を適用します。

portfolio_5g

 

ツールボックスより「消しゴムツール」を選択し、ソフトブラシを使って部分的に消去していきましょう。

ウェブレイアウトに立体的なデザインを加えたいときなどに応用することができるテクニックではないでしょうか。

portfolio_5h

 

詳しいチュートリアルに関しては参照元サイトを参考にしてください。

パーツごとに詳しい説明がされているので、英語表記でも比較的分かりやすくなっていますよ。