単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル

ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。

How a Simple Layout Can Be Mixed 'n' Matched with Patterns, Photos and Backgrounds

下記は、そのポイントをピックアップした意訳です。

• 1. 基本のレイアウト
• 2. コンテンツの配置
• 3. スタイルの適用
• 4. 背景にタイル状の画像
• 5. 背景に透過をミックス
• 6. 透過PNGの簡単なテスト
• 7. 背景のバリエーション
• 8. 背景にピクセルのパターン
• 9. 背景に大きい写真画像

1. 基本のレイアウト

レイアウトのエリア設計は、下記のようになっています。

幅は多くの環境でも背景が表示できるように、1000pxより少なくしています。

2. コンテンツの配置

各エリアにコンテンツを配置します。

ワイヤーフレームとカラースキームを適用します。

赤い矢印の箇所に注目してください。
各エレメントには均等のスペースを与えて配置しました。

これは単に均等に配置しただけに過ぎません。
しかし、ベストなスペースに自信がないなら、まずは均等に配置することから始めてみるのもよいでしょう。

見出しとなる「About」のフォントにRockwellで特徴をだし、その他のテキスト箇所にはHelveticaとArialを使用しています。
ビジュアルエレメントとして、紙飛行機のイラストを配置しました。

素朴で暖かいトーンのカラーパレットを使用しました。

3. スタイルの適用

スタイルを与えるために、まず二つのビジュアルエレメントを追加します。

一つ目はサイドバー上部のアローです。これはその上のパネルを吹き出しに見せる効果もあります。
二つ目はドットです。ラインのエレメントにドットのテーマを適用しました。

ポイントとなる見出しの頭にはハイライト、各パネルのエッジには1pxのハイライトのラインを適用しました。

これで全部で三つのキーとなるビジュアルエレメントを使用しました。イラスト、グリッドの断ち切り（アロー）、シンプルな形状のテーマ（ドット）です。
あとは、四番目のエレメントとして背景を加えます。

4. 背景にタイル状の画像

シームレスなタイル状の画像を背景に使用しました。
こういった草の画像のような明るいカラーを背景する際には、コンテンツのカラーを暗くすることがポイントとなります。

5. 背景に透過をミックス

ナビゲーションと上部のパネルに透過を与えました。
パネルのエッジに1pxのハイライトを与えることで、透過性を強調し、イメージに深さを与えています。

6. 透過PNGの簡単なテスト

Photoshopで新規レイヤーに背景をコピーし、背景のレイヤーを非表示にすることで簡単にレビューすることができます。
透過PNGを使用する時は、PNG-24で保存するようにしてください。

7. 背景のバリエーション

草のようなテクスチャは扱いが難しいので、より簡単な紙のテクスチャを使用してみました。
こういったパターンをシームレスにする時は、タイルのサイズもより大きく作成するのが簡単にできます。

8. 背景にピクセルのパターン

背景にシンプルなピクセルのパターンを使用するのも魅力的です。
このようなパターンは作成するのも簡単で、上記のものは4x5ピクセルからできています。

9. 背景に大きい写真画像

使用する写真画像に合わせてカラースキームを変更します。
写真画像の水平ラインとパネルの水平箇所を調整し、コンテンツ箇所より下はグラデーションで処理をしました。

上部の箇所は、中心にソフトなライトを適用しています。