|
Webデザイン |
 |
| Lesson 11 | 質感を加えるテクスチャと グラデーション |
| 制作・文 | 山田岳史（ROSTRATA） | |||
| ＞ | To Use | CSS | ||
| ＞ | Browser | Firefox 3over | Safari 4over |
 |
背景テクスチャの陰影情報だけを透過画像として用意したり、CSSgradients を併用して背景に奥行きを与える。最小限の画像とCSSの工夫だけで最大限にリッチな質感表現を実現しよう。 |
01
実際の紙や布などをスキャンしたり、Photoshopのフィルタを活用するなどしてテクスチャ素材を用意する。文字を乗せる場面等を考慮すると、Webデザインではきめ細かいザラツキ感があるような画像が使いやすいだろう【1-1】。
【1-1】色みについては後からいくらでも加工できるため、面白い素材を見つけたらスキャンしておこう。画像処理ソフトのエフェクトを駆使するだけでも多様な素材を表現することができる
【1-1】色みについては後からいくらでも加工できるため、面白い素材を見つけたらスキャンしておこう。画像処理ソフトのエフェクトを駆使するだけでも多様な素材を表現することができる
02
background-repeat で使用することを想定し、最小限の繰り返しパターンを見つける。使用する画像のサイズは小さいに越したことはないが、繰り返しパターンがある程度大きくないと表現できない素材もある。素材に応じて最小限の繰り返しができるようにうまく画像を作成する【2-1】。
【2-1】タイル状にしても違和感のないポイントを探す。大きな模様がある場合は繰り返しでしつこくならないように大きく切り取る
【2-1】タイル状にしても違和感のないポイントを探す。大きな模様がある場合は繰り返しでしつこくならないように大きく切り取る
03
ここまでの状態で書き出して使用しても問題ないが、今回はこれらを汎用的な素材ライブラリとして使えるよう、素材の質感を表現している陰影情報だけを透過画 像として用意する。
画像の彩度を0にしてモノクロにしたも のを不透明度30％程度に落としてもよいし、色域選択でうまく陰影部分だけを抽出するなどしてもよい。画像処理の手法は素材によって異なるので、そのつどトライアンドエラーを繰り返してみよう【3-1】。
【3-1】彩度を0にして色域選択で抽出している状態。許容量の値、またレイヤーの透明度などで加減を調整する
【3-2】透過状態のレイヤーを拡大した所。細かいノイズのような画像になっている
画像の彩度を0にしてモノクロにしたも のを不透明度30％程度に落としてもよいし、色域選択でうまく陰影部分だけを抽出するなどしてもよい。画像処理の手法は素材によって異なるので、そのつどトライアンドエラーを繰り返してみよう【3-1】。
【3-1】彩度を0にして色域選択で抽出している状態。許容量の値、またレイヤーの透明度などで加減を調整する
【3-2】透過状態のレイヤーを拡大した所。細かいノイズのような画像になっている
04
陰影を表す部分だけをうまく抽出できているかどうかは、背景レイヤーの色を変えてみるとよくわかる。不透明度を下げて適切な陰影が出るような状態にできれば、 どのような背景色にもなじみやすくなる【4-1】。完成した画像を透過PNGファイルとして書き出す。様々なテクスチャのものを何パターンも素材ライブラリとして作っておくことで、コーディング作業だけで多彩なテクスチャ表現を試すことができるようになる【4-2】。
【4-1】背景に水色のレイヤーを重ねてみると、水色の素材感のある表現になる。その他の色でも試してみよう
【4-2】
【4-1】背景に水色のレイヤーを重ねてみると、水色の素材感のある表現になる。その他の色でも試してみよう
【4-2】
05
CSSのbackgroundプロパティを利用し、通常通り背景の素材を読み込む。画像は透過PNGを利用しているため、背景の指定色をベースにしたテクスチャ背景として表示される【5-1】【5-2】。
【5-1】
【5-2】印刷誌面では判別しづらいかもしれないが、指定した濃紺色をベースにテクスチャが表現されている
【5-1】
【5-2】印刷誌面では判別しづらいかもしれないが、指定した濃紺色をベースにテクスチャが表現されている
06
面積の広い背景部分ではグラデーションをかけることにより自然な奥行きを感じさせ、深みのある印象を与えることができる。このような効果を表現するにはあらかじめグラデーションを適用した大きな背景画像を用意する手法もあるが、ここでは先ほどの素材ファイルとCSSgradients を利用して実装する。CSS gradients は背景画像の代わりに指定する値として扱われるため、背景画像を指定しているボックスの前面に新たにボックスを用意する【6-1】【6-2】。ここでは画面の中心から四隅に向かって暗くなるように円形のグラデーションを適用した【6-3】。１つのサイト内では１つのテクスチャ表現が一貫性を持って使われることが多い。たとえばアナログな紙の質感を出す場合、テクスチャの表現として透過PNG １つでサイトすべてのテクスチャ表現をまかなうことも可能だ。自分なりのテクスチャライブラリを集め、デザイン実装作業を効率化するとともに、少ないデータ量でリッチなデザインにできるので、ウェブアプリケーションの高速化にも役立つ【6-4】。
【6-1】#gradientというdiv要素を用意し、webkit向けの指定とmozilla向けの指定を行う
【6-2】webkitブラウザ、またGecko 1.9.2から（Firefox 3.6等）はradial-gradient()関数とほぼ同等の細かい指定が行える。指定方法詳細についてはmozilla、safariの各ブラウザの公式リファレンスで解説されている
【6-3】【5-2】に比べて画面に奥行きが生まれ、深みのある表現になった。シンプルな画面でもテクスチャ表現と距離感表現を加えるだけで印象が全く違ってくる
【6-4】これだけの表現をしても、画像データとしては数十KBのPNGファイル1つを読み込んでいるのみで、転送データサイズは非常に小さい
【6-1】#gradientというdiv要素を用意し、webkit向けの指定とmozilla向けの指定を行う
【6-2】webkitブラウザ、またGecko 1.9.2から（Firefox 3.6等）はradial-gradient()関数とほぼ同等の細かい指定が行える。指定方法詳細についてはmozilla、safariの各ブラウザの公式リファレンスで解説されている
【6-3】【5-2】に比べて画面に奥行きが生まれ、深みのある表現になった。シンプルな画面でもテクスチャ表現と距離感表現を加えるだけで印象が全く違ってくる
【6-4】これだけの表現をしても、画像データとしては数十KBのPNGファイル1つを読み込んでいるのみで、転送データサイズは非常に小さい
