画像は一枚だけで、さまざまなカラーの背景にするチュートリアル

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

Creating Reusable & Versatile Background Patterns

[ad#ad-2]

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

• デモ
• Photoshopで画像を作成
• スタイルシートの指定方法

デモ

まずは、デモからご紹介。
デモでは、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;
}