Advertisement

darkportfoliosite1

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

 

今回はフォトショップでダーク系のシンプルなポートフォリオサイトを作る方法をご紹介します。

伝えたいことを簡潔にまとめたシンプルなデザインとなっており、背景画像にダーク系のグラデーションを使うことで透明感がアップします。

やはりグリッドを基本としたすっきりとしたレイアウトが最近は人気ですね。

 

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

・ Web2.0風のつるつるした黒のメニューバーの作り方

・ 人気のグリッドを使ったすっきりしたウェブレイアウト

・ 余白を十分にとり、ユーザーにわかりやすいアイコンなどのレイアウト方法

などがあります。

 

詳細は以下より。

 

ダーク系のウェブサイトをデザインしようとしているひとにはぴったりのメニューバーの作り方です。

英語のみのチュートリアルですが、簡単なステップのみで、詳しく図解されているのでとてもわかりやすいです。

27-10_very_simple_portfolio_step07

 

メニュー部分のすぐ下に、余白を大きく取ったスペースを作り、伝えたいことが的確にユーザーに伝わるレイアウト。

これはお手本にしたいところです。

27-16_very_simple_portfolio_step13

 

等間隔に配置された枠組みは見た目もすっきりしています。

細かいですが、枠組みを選択したときに周りの境界線の色が変更するだけでも、ユーザーにとってはとてもわかりやすいですよね。

こういうレイアウトはブログサイトなどでも応用できそうです。

27-17_very_simple_portfolio_step14