画像は一枚だけで、さまざまなカラーの背景にするチュートリアル
Post on:2011年8月17日
使用する画像は一枚の透過PNG画像だけで、背景にさまざまなカラースキンをスタイルシートの変更で簡単に適用するチュートリアルを紹介します。
透過PNGを作るPhotoshopのテクニックは、他のパターンにも応用できます。

Creating Reusable & Versatile Background Patterns
[ad#ad-2]
下記は各ポイントを意訳したものです。
デモ
まずは、デモからご紹介。
デモでは、3枚の画像を使い、それぞれ16色のカラースキンを適用しています。

デモページ:Pattern 1

デモページ:Pattern 2

デモページ:Pattern 3
Photoshopで画像を作成
ここで紹介するPhotoshopのテクニックは、たいていのパターン画像で利用できます。
下記のパターン画像を使用して、作成してみます。
※画像は元記事と異なります。

Step 1
まずは画像を白黒にします。[イメージ]-[色調補正]-[白黒]を適用します。
次に[イメージ]-[色調補正]-[レベル補正]を選択し、透明にしたい箇所を完全に白くするようスライダーを移動します。

Step 2
これで画像は白と黒のパターンになりました。
[イメージ]-[色調補正]-[階調の反転]を選択し、全てを選択しコピーします。チャンネルパネルに移動し、新規チャンネルを作成し、そこにペーストします。

[ad#ad-2]
Step 3
レイヤーパレットに戻り、新規レイヤーを作成します。
[選択範囲]-[選択範囲を読み込む]を選択し、「ソース」の「チャンネル」にStep 2で作成したアルファチャンネルを選択します。

選択した範囲をソリッドなカラー(例:黒)で塗ります。
不透明度の設定
レイヤーの不透明度でパターンの不透明度をコントロールします。

画像の保存
画像は透過PNGで保存します。

不透明度50%
※薄めの方がさまざまなカラーになじむと思います。
スタイルシートの指定方法
スタイルシートで透過PNGを背景画像として指定します。
カラーの指定は「background-color」で行い、カラー変更も簡単です。
CSS
.pattern { background-image: url(pattern.png); background-color: #666; }
sponsors