↑　クリックすると原寸拡大表示されます。

今回は、フォトショップを使って淡いグラデーションとピンクのカラーリングがオシャレなウェブレイアウトをデザインする方法をご紹介します。

行間幅や1pxの白ラインなどまで細かくていねいに説明されているチュートリアルで、覚えておきたいテクニックがたくさん使われています。

チュートリアルと同時にサンプル用PSDファイルも公開されているので、ダウンロードして確認しながらデザインすることができますよ。

詳細は以下から。

サンプル用PSDファイルダウンロード

英語表記のチュートリアルとなりますが、あらかじめデザインされているサンプル用PSDファイルも無料公開されています。

サンプルでレイヤーなどを確認しながらデザインすれば比較的簡単に完成させることができます。

ダウンロード詳細

ファイルサイズ : 3.0MB

ファイル形式 : psdファイル (rarファイルで圧縮されています。）

チュートリアル情報

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

難易度 : 初級者から中級者

所要時間 : 1時間から1時間30分ほど

このチュートリアルから学ぶことのできるポイントとしては、

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

・　淡い色のグラデーションを使うことでスタイリッシュでオシャレなウェブデザインを演出する方法

・　1pxの白ラインをデザインに加えることで光沢感を出す方法

・　レイヤースタイルを適用するだけの押したくなるようなボタンの作成方法

・　サムネイルに影をつけて立体的に魅せる方法

などがあります。

チュートリアルハイライト

ウェブレイアウトを作成する際に、等間隔に区切りをつけた「グリッド」を使うことで、見た目もすっきりしますし、デザイン作業も比較的簡単に進めることができます。

「(海外記事) Photoshopでシンプルなポートフォリオサイトデザインをつくる方法」でも紹介しましたが、グリッドラインデザインの補助ツールに関しては960.gsをオススメします。

（参照サイト） 960.gs

実際に定規を表示して、グリッドをガイドで表示すると以下のようになります。

ガイドをレイアウトに使用する場合は、Shiftキーを押しながらレイアウトすると、10px単位で正確にラインを挿入することができます。

真っ白のカンバスに淡いグラデーションを全体に加えてあげることで、ウェブデザインの雰囲気ががらりと変わります。

今回使用したグラデーションは「白」(#ffffff)から薄灰色(#dcdcdc)を使っています。

これはappleなどのサイトにも共通するカラーリングとなります。

ナビゲーションメニューの選択された状態を表す場合もべた塗りではなく、レイヤースタイルを使うように心がけてみましょう。

型押し風デザインを作成する場合は、レイヤースタイルのシャドウ（内側）、光彩（内側）を使うことでうまく表現することができます。

今回は、光彩（内側）を使っていますね。

このレイヤースタイルを適用することで、以下の様になります。

細かいところですが、ウェブデザインにおいて差が出るテクニックではないでしょうか。

テキストをレイアウトする場合もグリッドを念頭においてデザインしています。

すべてのテキスト、ボックス枠、ロゴなどが整列されているだけですっきりとした印象を与えることができます。

サムネイル画像を表示する際は、少しだけ影をつけることで立体感がまします。

楕円形ツールなどで選択範囲を指定した後、「黒」(#000000）でペイントします。

つづけてメインメニューより「フィルタ」＞「ぼかし」をてきようすることで、うまく影を表現できます。

影が濃い場合は、レイヤーの「不透明度」を下げてあげることで解決します。

こんなタイプのボタン見たことありませんか。

appleなど多くのウェブサイトで最近使われているボタンデザインですね。

こちらもレイヤースタイルを適用するだけで簡単にデザインすることができます。

ウェブデザインにおいて立体的に魅せるコツのひとつがこの1pxの白ラインです。

まず「鉛筆ツール」を使い、太さ1pxの灰色（#8d8d8d)のラインを描きます。

続けて「白」(#ffffff)のラインを引くことで、立体的なラインをデザインすることができます。

このラインを使うだけでとてもスタイリッシュな印象に仕上がります。

拡大してあるとよく分かりませんが、原寸サイズで見ると立体的に見えます。

今回ご紹介したテクニックの多くは、他のウェブデザインを行うときにも使うことができるのでぜひ、サンプルPSDファイルをダウンロードして確認してみてください。

詳しいチュートリアルに関しては、参照元サイトを参考してもらうようにお願いします。

英語でのチュートリアルとなりますが、サムネイル画像をたくさん使っているので、直感的にデザイン方法を覚えることができますよ。