Advertisement

simplemodernlayout1

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

 

今回は、自己紹介用のウェブサイトの作成に便利な、フォトショップを使った、シンプルでモダンなウェブレイアウトの作り方をご紹介します。

シンプルで、ユーザーに伝えたい情報が分かりやすく、的確にレイアウトされています。

また、「知っていそうで知らない、トップウェブデザイナーになる為の20の方法」などでも紹介したウェブトレンドを多用しており、フォトショップテクニックとしてもとても参考になります。

 

サンプル用PSDファイルも無料で公開されているので、サンプルを見ながらテクニックを学ぶこともできます。

download-icon 

 

このチュートリアルから学ぶことのできるポイントをいくつか整理してみると、

・ グラデーションが美しい背景画像の作成方法

・ つやつやした質感がスタイリッシュなメニューバーの簡単な作り方

・ 影をデザインすることで、立体感をアップする方法

・ 1pxラインと影をうまく使い、立体的なラインの作成の仕方

・ レイヤースタイルを適用するだけの簡単なクールなボックス枠の作り方

などがあります。

 

 

詳細は以下より。

 

 

類似色をうまく使うことで、スタイリッシュな背景画像の作り方が掲載されています。

しかもグラデーションツールを使うだけの簡単バージョンですね。

27-09_minimal_modern_layout_06

 

透明感たっぷりで、エレガントなヘッダー部分。

ツヤツヤした質感がとても印象的で、ユーザーにも分かりやすいデザインです。

27-14_minimal_modern_layout_11

 

影をうまくデザインすることで、立体的なデザインに仕上げることができます。

作り方に関しては、日本語で「デザイン力をアップする5つのフォトショップテクニック (初心者向け)」にて紹介しています。

27-21_minimal_modern_layout_18

 

こんな立体感のあるデザインは、シンプルなウェブデザインのアクセントにもなっていいですね。

ウェブサイトを作成するときに、覚えておきたいテクニックのひとつではないでしょうか。

27-26_minimal_modern_layout_23

 

立体的なボックス枠もレイヤースタイルを適用するだけで、簡単に作成することができます。

グラデーションもとてもきれいで、ユーザーにも伝えたいことが分かりやすく伝わります。

27-36_minimal_modern_layout_33