↑ クリックすると原寸大表示されます。
今回は、フォトショップで水彩画風のウェブデザインレイアウトをつくる方法をご紹介します。
グリッドを使った見やすいレイアウトになっており、ヘッダー部分の水彩画風デザインも写真画像を加工する形になっているので、お好み写真を使ってデザインすることもできます。
詳細は以下から。
チュートリアル情報
プログラム : Photoshop
バージョン : CS4で作成 （古いバージョンでも可能）
難易度 : 初級者から中級者
所要時間 : 1時間30分から2時間ほど
このチュートリアルから学ぶことのできるポイントとしては、
・ グリッドを使ったシンプルで見やすいウェブレイアウトの作成方法
・ ヒストリーブラシを使って写真画像を水彩画風に加工する方法
・ コーディングが簡単な半透明ボックス枠の作り方
などがあります。
チュートリアルハイライト
最近のウェブサイトレイアウトの基本となりつつある「グリッド」を使ったデザイン。
960 Grid Systemよりグリッド用テンプレートをダウンロードすることができます。
無造作にパーツを並べるよりも見やすく、ユーサビリティもアップします。
フォトショップのツールのひとつ「ヒストリーブラシ」を使うことで、写真画像を水彩画風ペイントに加工することができます。
ヒストリーブラシのサイズや不透明度を変更することで自然な仕上がりを表現しています。
こちらも最近のウェブレイアウトで多用されているテクニックのひとつである「1pxライン」を使うことで、半透明のボックス枠に質感を加えています。
レイヤーマスクを使用して、ボックス枠をぼかし、背景画像と溶け込ませるようにデザインしていきます。
これは質感をアップするために使えるテクニックのひとつではないでしょうか。
とてもきれいなうレイアウトになっており、これからウェブデザインを制作する人は参考になるのではないでしょうか。
詳しいチュートリアルに関しては、参照元サイトを参考にしてみてください。
ステップごとにサムネイル画像と一緒に分かりやすく解説されています。
