↑ クリックで原寸大表示になります。
今回は、フォトショップで立体的でシンプルなウェブサイトをつくる方法をご紹介します。
最近のウェブレイアウトの基本となっているグリッドを利用したデザインになっており、すっきりシンプルなレイアウトになっています。
ところどころにうまく影をつけることで、立体的なデザインを作り出しています。
チュートリアル情報
プログラム : Photoshop
バージョン : CS4で作成 （古いバージョンでも可能）
難易度 : 初心者から中級者
所要時間 : 1時間ほど
このチュートリアルから学ぶことのできるポイントは、
・ グリッドを使ったすっきりとしたウェブレイアウトの組み方
・ ヘッダー部分に高級感のあるライティングエフェクトをデザインする方法
・ 影をデザインすることで、平面的なデザインを立体的なウェブデザインにする方法
・ クリックしたときに、本当に押したようボタンのデザインの方法
などがあげられます。
詳細は以下から。
ウェブレイアウトは、グリッドと呼ばれる等間隔に分けられたフレームを使ってデザインすることで、すっきりとした印象のウェブサイトが完成します。
ボタン部分も通常時とクリック時の2タイプを用意します。
型押し風のデザインにすることで、クリックした様子を表現しています。
人間の心理的にタブのついたものは全部クリックしたくなる傾向があるそうです。
こんな立体感のあるタブメニューバーをつければ、ユーザーにもわかりやすく、クリック率もアップしそうですね。
フッター部分にもグラデーションを加えることで、エレガントな雰囲気になっています。
また、レイヤースタイルを使うことで立体的なフッターが完成します。
型押し文字をすべてに使い、統一感もあっていいですね。
サンプル用PSDファイルを無料でダウンロードすることができるので、サンプルで確認しながら作業をするとより分かりやすいかもしれません。
サンプル用フォトショップPSDファイルをダウンロードする
