画像は一枚だけで、さまざまなカラーの背景にするチュートリアル
Post on:2011年8月17日
使用する画像は一枚の透過PNG画像だけで、背景にさまざまなカラースキンをスタイルシートの変更で簡単に適用するチュートリアルを紹介します。
透過PNGを作るPhotoshopのテクニックは、他のパターンにも応用できます。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011081701.png)
Creating Reusable & Versatile Background Patterns
[ad#ad-2]
下記は各ポイントを意訳したものです。
デモ
まずは、デモからご紹介。
デモでは、3枚の画像を使い、それぞれ16色のカラースキンを適用しています。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011081702-01.png)
デモページ:Pattern 1
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011081702-02.png)
デモページ:Pattern 2
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011081702-03.png)
デモページ:Pattern 3
Photoshopで画像を作成
ここで紹介するPhotoshopのテクニックは、たいていのパターン画像で利用できます。
下記のパターン画像を使用して、作成してみます。
※画像は元記事と異なります。
![パターン画像](/wp-content/uploads-2011-2d/2011081703.png)
Step 1
まずは画像を白黒にします。[イメージ]-[色調補正]-[白黒]を適用します。
次に[イメージ]-[色調補正]-[レベル補正]を選択し、透明にしたい箇所を完全に白くするようスライダーを移動します。
![Photoshopのキャプチャ](/wp-content/uploads-2011-2d/2011081703-01.png)
Step 2
これで画像は白と黒のパターンになりました。
[イメージ]-[色調補正]-[階調の反転]を選択し、全てを選択しコピーします。チャンネルパネルに移動し、新規チャンネルを作成し、そこにペーストします。
![Photoshopのキャプチャ](/wp-content/uploads-2011-2d/2011081703-02.png)
[ad#ad-2]
Step 3
レイヤーパレットに戻り、新規レイヤーを作成します。
[選択範囲]-[選択範囲を読み込む]を選択し、「ソース」の「チャンネル」にStep 2で作成したアルファチャンネルを選択します。
![Photoshopのキャプチャ](/wp-content/uploads-2011-2d/2011081703-03.png)
選択した範囲をソリッドなカラー(例:黒)で塗ります。
不透明度の設定
レイヤーの不透明度でパターンの不透明度をコントロールします。
![Photoshopのキャプチャ](/wp-content/uploads-2011-2d/2011081703-04.png)
画像の保存
画像は透過PNGで保存します。
![パターン画像](/wp-content/uploads-2011-2d/2011081704.png)
不透明度50%
※薄めの方がさまざまなカラーになじむと思います。
スタイルシートの指定方法
スタイルシートで透過PNGを背景画像として指定します。
カラーの指定は「background-color」で行い、カラー変更も簡単です。
CSS
.pattern { background-image: url(pattern.png); background-color: #666; }
sponsors