↑ クリックすると原寸拡大表示されます。
今回は、自己紹介用のウェブサイトの作成に便利な、フォトショップを使った、シンプルでモダンなウェブレイアウトの作り方をご紹介します。
シンプルで、ユーザーに伝えたい情報が分かりやすく、的確にレイアウトされています。
また、「知っていそうで知らない、トップウェブデザイナーになる為の20の方法」などでも紹介したウェブトレンドを多用しており、フォトショップテクニックとしてもとても参考になります。
サンプル用PSDファイルも無料で公開されているので、サンプルを見ながらテクニックを学ぶこともできます。
このチュートリアルから学ぶことのできるポイントをいくつか整理してみると、
・ グラデーションが美しい背景画像の作成方法
・ つやつやした質感がスタイリッシュなメニューバーの簡単な作り方
・ 影をデザインすることで、立体感をアップする方法
・ 1pxラインと影をうまく使い、立体的なラインの作成の仕方
・ レイヤースタイルを適用するだけの簡単なクールなボックス枠の作り方
などがあります。
詳細は以下より。
類似色をうまく使うことで、スタイリッシュな背景画像の作り方が掲載されています。
しかもグラデーションツールを使うだけの簡単バージョンですね。
透明感たっぷりで、エレガントなヘッダー部分。
ツヤツヤした質感がとても印象的で、ユーザーにも分かりやすいデザインです。
影をうまくデザインすることで、立体的なデザインに仕上げることができます。
作り方に関しては、日本語で「デザイン力をアップする5つのフォトショップテクニック (初心者向け)」にて紹介しています。
こんな立体感のあるデザインは、シンプルなウェブデザインのアクセントにもなっていいですね。
ウェブサイトを作成するときに、覚えておきたいテクニックのひとつではないでしょうか。
立体的なボックス枠もレイヤースタイルを適用するだけで、簡単に作成することができます。
グラデーションもとてもきれいで、ユーザーにも伝えたいことが分かりやすく伝わります。
