Advertisement

3dsimplewebsite1

↑ クリックで原寸大表示になります。

 

今回は、フォトショップで立体的でシンプルなウェブサイトをつくる方法をご紹介します。

最近のウェブレイアウトの基本となっているグリッドを利用したデザインになっており、すっきりシンプルなレイアウトになっています。

ところどころにうまく影をつけることで、立体的なデザインを作り出しています。

 

チュートリアル情報

プログラム : Photoshop

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

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

所要時間 : 1時間ほど

 

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

・ グリッドを使ったすっきりとしたウェブレイアウトの組み方

・ ヘッダー部分に高級感のあるライティングエフェクトをデザインする方法

・ 影をデザインすることで、平面的なデザインを立体的なウェブデザインにする方法

・ クリックしたときに、本当に押したようボタンのデザインの方法

などがあげられます。

 

詳細は以下から。

 

ウェブレイアウトは、グリッドと呼ばれる等間隔に分けられたフレームを使ってデザインすることで、すっきりとした印象のウェブサイトが完成します。

white-line-web-design-photoshop-tutorial

 

ボタン部分も通常時とクリック時の2タイプを用意します。

型押し風のデザインにすることで、クリックした様子を表現しています。

feat-nav-textt-web-design-photoshop-tutorial

 

人間の心理的にタブのついたものは全部クリックしたくなる傾向があるそうです。

こんな立体感のあるタブメニューバーをつければ、ユーザーにもわかりやすく、クリック率もアップしそうですね。

three-buttons-web-design-photoshop-tutorial

 

フッター部分にもグラデーションを加えることで、エレガントな雰囲気になっています。

また、レイヤースタイルを使うことで立体的なフッターが完成します。

型押し文字をすべてに使い、統一感もあっていいですね。

footer-finished-web-design-photoshop-tutorial

 

サンプル用PSDファイルを無料でダウンロードすることができるので、サンプルで確認しながら作業をするとより分かりやすいかもしれません。

 

サンプル用フォトショップPSDファイルをダウンロードする

download-icon