Advertisement

simplesleekportfolio1

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

 

今回は、フォトショップでシンプル&なめらかなポートフォリオサイトを作る方法をご紹介します。

最近ではウェブサイト作成の基本となりつつある、「グリッド」を使うことによって、整ったウェブレイアウトを完成させることができます。

ポートフォリオサイトの場合、ユーザーに伝えたい内容をシングルページの中に集約することがポイントになりますが、余白を十分に取った見やすいデザインが特長です。

 

今回、このチュートリアルより学ぶことのできるテクニックは

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

立体的なリボンの作り方

・ 影をつけることで、立体感のあるサムネイル枠を作る方法

・ apple(アップル)のホームページで使われているような枠組みの作り方

などがあります。

 

詳細は以下から。

 

こんな立体的なリボンの作り方を学ぶことができます。

「特集記事」なんかの枠につけるとインパクトがありそうです。

sleekportfolio18

 

サムネイルの枠の下に新しいレイヤーを追加することで、影をデザインして立体的なデザインが完成します。

sleekportfolio24

さりげないエフェクトがかかった、apple(アップル)風の枠組みの作り方。

レイヤースタイルのみで作成できるのも便利です。

sleekportfolio26