ウェブデザインにおけるテクスチャやパターンの使い方をしっかり学びたい人用のまとめ
Post on:2012年10月12日
sponsors
当サイトでもテクスチャやパターンなどを素材として紹介しますが、ダウンロードして満足するだけでなく、どのように使うかが大切です。
テクスチャやパターンを効果的に使った実例を見ながら、その使い方を紹介します。
The What, Why and How of Textures in Web Design
下記は各ポイントを意訳したものです。
- 1. ノイズのテクスチャ
- 2. リアルにするためのテクスチャ
- 3. ビジュアル効果を与えるテクスチャ
- 4. トーンや印象を明確にするテクスチャ
- 5. シンプルなピクセルパターンの繰り返し
- 6. 大きなインパクトを与えるパターン
1. ノイズのテクスチャ
ノイズのテクスチャは最近のウェブデザインでとても人気があります。これは背景からボタンまで、あらゆるデザインほとんどのエレメントにマッチします。
ノイズの使い方は使う場所に依存しますが、良いノイズというのはぱっと見では識別できないくらい繊細にすることです。
ノイズのテクスチャの代表的な使い方を見てみましょう。
デザインに奥行きを与え、エレメントにユーザーの視線が集まるように照明効果でビジュアルの興味を引き起こしています。
ノイズを使った繊細な照明のエフェクトで、二つのサービスの相違を強調しています。
シンプルでかっこいいノイズテクスチャの作り方
新規で、サイズ：150x150、カンバスカラー：透明、で作成します。
[Ctrl+A]で全体を選択し、カラーオーバーレイで「#007dba」で塗ります。
新規レイヤーを「#000000」で塗り、[フィルター-ノイズ-ノイズを加える]で、量：200、分布：均等でノイズを加えます。
[レイヤー-新規調整レイヤー-白黒]を選択し、ノイズをグレースケールにします。
ノイズをレイヤーを右クリックし、クリッピングマスクを作成します。
ノイズレイヤーを選択し、塗りを6-8%にします。
仕上げにかかります。
ベースのレイヤーの上に新規レイヤーを作成し、グラデーションオーバーレイで、描画：焼き込みカラー、不透明度：15、グラデーション：黒白、スタイル：線形、にします。
グラデーションのレイヤーの塗りは「0」にします。
2. リアルにするためのテクスチャ
テクスチャは現実世界のリアルさを演出するエフェクトを与えるために使用することもできます。
背景に使われている木のテクスチャだけでなく、ダイヤルのメタリックなグラデーションと影にも注目してください。
Six11Ink
文字通りにリアルにしなければならないわけではありません。この例ではコピーの背景に紙のテクスチャを使い、単にプレーンな背景より質の高い感じを演出しています。会社のビジネスにフォーカスをあわせた完璧な組み合わせです。
3. ビジュアル効果を与えるテクスチャ
最近のウェブデザインのトレンドとして、テクスチャを独創的に使用し、ビジュアルにインパクトを与える方法があります。
かなりシンプルなテクスチャですが、大胆なカラーを選択し、ビジュアルにインパクトを与えています。
サイト全体のデザインにテクスチャを使い、美しさを強めています。こういった使い方は、遠慮がちにするのがポイントです。
ビジュアル効果を与えるテクスチャの作り方
「Subtle Patterns」のパターン素材を使って、インパクトのあるテクスチャを作ってみましょう。
新規で、サイズ：500x500、カンバスカラー：白、で作成します。
[レイヤー-新規塗りつぶしレイヤー-パターン]から「Bright Squeares」で塗ります。
パターンは全てモノクロなので、カラーを調整します。
「トーンカーブ」で、入力：132、出力：109。
「色相・彩度」で「色彩の統一」をチェックし、色相：360、彩度：100、明度：-28。
「レベル補正」で、黒：30、グレー：1.1、白：200。
「明るさ・コントラスト」で、明るさ：-10、コントラスト：10。
「新規塗りつぶしレイヤー」から「#00b4ff」で塗り、モードを「カラー」にします。
4. トーンや印象を明確にするテクスチャ
ここまでの使い方は、テクスチャでどのようにビジュアル的な興味を加えるかでした。
ここでのアイデアは少しステップアップして、テクスチャがサイトの全体的なデザインコンセプトと矛盾せずに、トーンや印象を明確にするためにどのように使うかを見てみましょう。
メインのイラストと見出しのフォントはレトロな雰囲気を与え、全体的にフレッシュでモダンな見た目となっています。背景に使われているサンバーストと水玉のテクスチャは、レトロな雰囲気と各エレメントを強調するために使用されています。もしこのテクスチャを取り除いてしまうと、デザインは全く違う印象になってしまうでしょう。
これもイラストの背景に効果的に繊細なノイズのテクスチャが使用されています。また、コンテンツにも1950年代の雰囲気を演出するためにテクスチャが利用されています。
5. シンプルなピクセルパターンの繰り返し
テクスチャから少し離れて、ピクセルパターンの使い方を見てみましょう。ピクセルパターンはテクスチャに比べて、シンプルでなくてはいけません。パターンの多くは10px程度の小さなもので、劇的なエフェクトを与えます。
ブラウザいっぱいに表示された写真に目を奪われることでしょう。ただし、写真をそのまま使うのではなく、イメージの影響を減らすよう12x12のピクセルパターンをオーバレイで表示しています。これにより、デザインの印象だけでなく、ロゴやナビゲーションなどの他のエレメントにもイメージのトーンとコントラストを効果的にしています。
もう一つの例は、ブログの記事などの見出しの背景としてピクセルパターンを使用したものです。ピクセルパターンを使用すると、単に塗りの背景より洗練された面白い外見を与えることができます。
6. 大きなインパクトを与えるパターン
ここまでは、デザインを補完したり、拡張したりする使い方でした。ここではパターン自体が大きなインパクトを与える使い方を見てみましょう。
このデザインは大きなパターンを使ったテクスチャが非常に大きなインパクトを与えています。大胆にパターンを使用する際のポイントは、パターンとサイトのバランスをどのようにとるかで、ここでは右側に充分なホワイトスペースを確保しています。
もう一つ大胆で、繊細な例を見てみましょう。背景に使用されているテクスチャは大胆なタータンチェックの柄で、コンテンツの背景には繊細な布地のテクスチャが使用されており、サイトの目的に対してユーザーに明確な方向性を示しています。
sponsors
