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