美しくて機能するウェブデザインを作成するPhotoshopの7つのテクニック

クリーンで、エレガントで、美しく、そしてしっかりと機能するウェブデザインを作成するのに役立つPhotoshopのテクニックを紹介します。

7 Photoshop tips for designing clean and modern websites

[ad#ad-2]

下記は各ポイントを意訳したものです。

• 1. Space(ホワイトスペース)
• 2. Depth(奥行き)
• 3. Detail(ディテール)
• 4. Definition(明確)
• 5. Interest(興味)
• 6. Perspective(遠近法)
• 7. Readability(リーダビリティ)

1. Space(ホワイトスペース)

スペースはボックスやラインやグラフィックなどを使用しないで、デザインエレメントの見た目での分離を可能にするもので、モダンデザインの中でも最も重要なテクニックです。これはコンテンツのプレゼンテーションとリーダビリティに欠くことはできません。スペースを正しく使うことで、レイアウトにクリーンで優雅さを与えることができます。

スペースをPhotoshopで使用する際のポイントは、ガイドとグリッドです。これらはエレメントを正確に置くことを可能にするだけでなく、見えないボーダーをセットするためにも利用することができます。

ガイドやグリッドのPhotoshopのショートカット

ガイドを動かす

Ctrl+ガイドをクリック

ガイドの表示・非表示

Ctrl+;

グリッドの表示・非表示

Ctrl+'

※Macは「Ctrl」を「Cmd」に変更してください。

スマートガイドの使用

スマートガイドはテキストやエレメントを一列に並べると、自動的に表示されるガイドです。これを活用しない手はないでしょう。

スマートガイドの表示

[表示]-[表示・非表示]-[スマートガイド]

ガイドやグリッドを使用してオブジェクトを一列に並べることは、あなたのデザインを理解することがより容易になり、全体的な結果としていっそう洗練された印象を与えます。

2. Depth(奥行き)

エレメントにライトとシャドウを使って奥行きを与えると、より鮮明になり、リアルであるかのように見えさせます。
シャドウのエフェクトはエレメントやテキストなどあらゆるオブジェクトに適用可能で、利用する際のポイントは背景と同系色を選択することです。デフォルトのブラックを使用することはやめましょう。

すべてのシャドウが暗いわけではありません。例えば、レタープレスのエフェクトの場合、そのフィールドを形成するためにシャドウはホワイトか明るいカラーを組み合わせます。

3. Detail(ディテール)

グラデーションツールとグラデーションレイヤーエフェクトは共に、モダンデザインにおいて大きい役割を果たします。グラデーションはシャドウとハイライトから背景やボタンまで、ウェブページのすべての局面に存在しています。

グラデーションツール

Shift+G

グラデーションは線状のもの、放射状のものなど自由に作ることができます。
また、レイヤースタイルでグラデーションを使用することもできます。

レイヤースタイル：グラデーション

「レイヤーパレット」から「レイヤー効果-グラデーションオーバーレイ」

レイヤースタイルでは、主にボタンやナビゲーションバーなどに微妙な次元を与えたり、紙や布、金属などのテクスチャをスタイルするために使用します。

4. Definition(明確)

エッジとボーダーを明確にすることで、エレメントに充分なコントラストを与えることができます。

ストロークレイヤーエフェクトは、テキストやボタンなどのエレメントのアウトラインを明確にします。このエフェクトは、ドロップシャドウやインナーシャドウでも適用することができます。

ペンツールで直線や水平線を描くことは魅力的ですが、グラデーションやシャドウを適用するのであれば、「一行選択ツール」を使うとより容易にできます。
「一行選択ツール」は、新規レイヤーとホワイトや明るいカラーのドロップシャドウで区切りに沿ってハイライトを作成するために使用すると便利です。

[ad#ad-2]

5. Interest(興味)

クリーンでモダンなデザインにするために、必ずしもホワイトやミニマルにする必要はありません。テクスチャやパターンを巧みに使用することで、ブランドとスタイルを伝え、デザインを際立たせることができます。

例えば、ノイズフィルターで繊細なノイズを背景やテクスチャに加え、インターフェイスエレメントを目立たせることができます。エレメントはいっそうリアルでクリアーな外観を備え、ビジターに誘惑的に見せるでしょう。

6. Perspective(遠近法)

遠近法は対称とグリッドにフォーカスを合わせないという理由だけで、最新のウェブデザインの中でも最も十分利用されていないテクニックと言えるでしょう。もし、デザインに遠近法を使ったイメージやエレメントを適用することで、深さや次元をコントロールすることができます。

遠近法をPhotoshopで使うには、「パス選択ツール」で右クリックし「パスの自由化」を選択し、「ワープツール」を起動します。グリッドを動かすことで簡単に変形できます。

遠近法は非対称の形やフレームを作り、オブジェクトを配置するためにグラデーションやシャドウを適切に使用することで、作り出すことができます。

7. Readability(リーダビリティ)

力強いタイポグラフィは美しいデザインの強いコンポーネントとして、デザインコミュニティでも好まれています。これは、デザインを過度に複雑にするかもしれないイメージやグラフィックを置き換えて、シンプルで簡単な方法でデザイン全体を整えることができます。

例えば、テキストにテクスチャを加え、それをスマートレイヤーオブジェクトに変換します。スマートオブジェクトに換えることで、フィルターなど他のテクニックを適用することができます。
テキストのエレメントを使用するときは、カーニングとトラッキングをすることを忘れないでください。

テキストとオブジェクトに適度なスペースを置き、明確と興味を加え、コンテンツを配置するために使用すると、あなたのデザインは最適な効果を発揮するでしょう。

jeroenhoman.com