
Theme Option > Posts > Advertisement / Custom Codeで出力可能 上
↑ クリックで原寸大表示になります。
今回は、フォトショップでシンプル&なめらかなポートフォリオサイトを作る方法をご紹介します。
最近ではウェブサイト作成の基本となりつつある、「グリッド」を使うことによって、整ったウェブレイアウトを完成させることができます。
ポートフォリオサイトの場合、ユーザーに伝えたい内容をシングルページの中に集約することがポイントになりますが、余白を十分に取った見やすいデザインが特長です。
今回、このチュートリアルより学ぶことのできるテクニックは
・ グリッドを使ったすっきりとしたウェブレイアウト方法
・ 立体的なリボンの作り方
・ 影をつけることで、立体感のあるサムネイル枠を作る方法
・ apple(アップル)のホームページで使われているような枠組みの作り方
などがあります。
詳細は以下から。
こんな立体的なリボンの作り方を学ぶことができます。
「特集記事」なんかの枠につけるとインパクトがありそうです。
サムネイルの枠の下に新しいレイヤーを追加することで、影をデザインして立体的なデザインが完成します。
さりげないエフェクトがかかった、apple(アップル)風の枠組みの作り方。
レイヤースタイルのみで作成できるのも便利です。