Lesson 02 透過PNGを使用して背景や画像を透けさせる - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

Webデザイン 表現&技法の 新・スタンダード

Lesson 2

透過PNGを使用して 背景や画像を透けさせる

	制作・文			奥山寿史（ユルユラデザイン.）
＞	To Use			Photoshop | Illustrator
＞	Browser			IE 7over | Firefox 2over | Safari 2over

コンテンツの背景を半透明にしてバックグランドイメージを薄く見せるテク ニックは、スタイリッシュなデザインには欠かせない手法だ。また、複雑な オブジェクトの画質を落とさずまわりを透過させることもできる。

コンテンツの背景に、半透明で徐々に透明になっていく透過PNG を使用すると【1-1】のようなデザインが可能になる。


【1-1】

まずPhotoshopで950×500ピクセルの新規ファイルを[カンバスカラー：透明]で作成する。描画色を白に設定し、[ツール]の[グラデーションツール]を選択して、[グラデーションピッカー]で[描画色から透明に] に設定【2-1】。上から下へ イメージするグラデーションになるように描画する。レイヤーパレットで[不透明度：30%]に設定して【2-2】、背景を透過させる【2-3】。


【2-1】


【2-2】不透明度の設定値は下にくる背景画像に合わせて調整しよう


【2-3】この時点で下に新規レイヤーを作成し、背景画像を配置して透過具合を見てみるとよい

この透過する背景はHTML上で横方向に繰り返すので、1×500ピクセルのスライスを設定し、ファイルメニュー→" Webおよびデバイス用に保存..."を選択する。プ リセットで[PNG-24]を設定して保存する【3-1】。ここでは｢white.png｣のファイル名で、imagesフォルダに保存した。


【3-1】PNGのプリセットに「PNG-8」という設定もあるが、これでは半透明な透過にならないので注意

CSSで【4-1】を記述し、適用させたい箇所にクラス「class="bgwhite"」を定義づける。これで書き出した透過PNG｢white.png｣が、上で横方向にだけ繰り返される。


【4-1】

さらにその上に色のついた透過PNG を乗せると【5-1】のようなイメージになる。ここはグラデーションは使わないので、Photoshop で1×1 ピクセルの新規ファイルを作成し、【a】の場合はカンバスを黒で塗りつぶす。レイヤーの不透明度を40%にしたら[PNG-24]として書き出そう。この画像は｢black.png｣のファイル名で、imagesフォルダに保存した。この場合CSS の記述は【5-3】のようになり、適用させたい箇所にクラス「class="bgblack"」を定義づける。【b】の場合はカンバスを赤（#BE0028）で塗りつぶして、同様に操作していく。


【5-1】


【5-2】ここではグラデーションを利用しないため、1ピクセル四方の単色の透過PNG画像を作成する


【5-3】ここは範囲内いっぱいに繰り返すので、繰り返しと位置は指定しない

画像の背景を透過させたい場合は、切り抜きを行う【6-1】。元画像を開き【6-2】、レイヤーパレットで「背景」をダブルクリックしてレイヤー化しておく。[ツール]から[自動選択ツール]を選択し【6-3】、背景の白い部分をクリックすると、近似色のピクセルが自動選択される。選択範囲を確認するときは、[ツール]で[クイックマスクモードで編集]に切り替えると【6-4】、わかりやすい【6-5】（ここではクイックマスクの表示を【6-6】のように 設定している）。拡大表示し、エッジなどに選択しきれていない部分がある場合は【6-7】、画像描画モードに戻り、選択範囲メニュー→ " 選択範囲を変更" → " 拡張..." を[ 拡張量：1 ピクセル] で実行する。クイックマスクモードに切り替えて確認し、まだ白いエッジが残っていたら、再 度選択範囲を拡張しよう。調整が終わったら画像描画モードに戻り、deleteキーを押して背景を削除して【6-8】、[PNG-24]で書き出そう。


【6-1】


【6-2】


【6-3】


【6-4】ここで[クイックマスクモードで編集]と[画像描画モードで編集]を切り替える。また、ダブルクリックで[クイックマスクオプション]が開き、クイックマスクの表示を設定できる


【6-5】


【6-6】


【6-7】拡大してみると白く選択しきれていない部分が残っているのがわかる。選択範囲の拡張で調整する方法以外にも、自動選択ツールの［許容値］を増やす方法もある


【6-8】