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

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

チュートリアルのキャプチャ

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

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

1. 基本のレイアウト

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

チュートリアルのキャプチャ

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

2. コンテンツの配置

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

チュートリアルのキャプチャ

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

チュートリアルのキャプチャ

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

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

チュートリアルのキャプチャ

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

チュートリアルのキャプチャ

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

3. スタイルの適用

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

チュートリアルのキャプチャ

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

チュートリアルのキャプチャ

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

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

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

チュートリアルのキャプチャ

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

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

チュートリアルのキャプチャ

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

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

チュートリアルのキャプチャ

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

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

チュートリアルのキャプチャ

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

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

チュートリアルのキャプチャ

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

チュートリアルのキャプチャ

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

チュートリアルのキャプチャ

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

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

チュートリアルのキャプチャ

sponsors

top of page

©2018 coliss