透過 PNG ファイルとは
グラフィック・アプリケーションが共通して扱えるファイル形式はいくつかありますが、ウェブ用によく使うのは JPEG と PNG です。なかでも PNG は「透過部分」を設定できるので、ウェブページのボタンその他のパーツに多用されます。(IE は PNG の透過で問題が長く残ったので、IE 対策として、いまでも旧式で色数が少ないけれど透過が安定している GIF ファイルも使われています。)
Painter 11 でやっと PNG の読み書きができるようになりました。透過 PNG も保存できます。が、このあたりヘルプにまだ記述がありません。以下、その手順です。
透過 PNG の作成
Painter は新規イメージを開いたときは、必ず不透明なキャンバスを開きます。このキャンバスは透明にすることはできません。全選択をして削除しても、ペーパーカラーにもどるだけです。
透過 PNG はベースが透明な必要があるので、作業は透明レイヤー上で行います。キャンバスは基本的に非表示にしておきます。(背景を想定しているときは、キャンバスを目的の背景色にして表示しておくのも便利かもしれません。)
この例では、円形のシェイプをいったん作成し、それを利用して「パスをなぞる」状態でアーティストオイルで描画したあと、シェイプレイヤーは削除しました。(すきまをあけて多色の線を引いたミキサーパレットから、多色スポイトで拾った色で描画しています。)
透過(アルファ情報)つきで保存
ポイントは次の 2 点。
- キャンバスは必ず非表示にしておく。
- 保存画面でファイル形式に PNG を選択したあと、Save Alpha(アルファ情報の保存)の項目にチェックを入れる。
左はこの手順で保存した PNG ファイル。PNG ファイルのアルファ情報は GIF と違って階調があるので、半透明の部分がきれいに保存されます。
この半透明部分の階調について、ファイルを PSD 形式で保存して Photohop に持っていき、背景削除後 PNG を透過保存したときのほうが、中間階調は正確に出ているようです。こだわる場合は Photoshop とか Fireworks 経由のほうがいいかもしれません。
ウェブ用の画像という視点をはなれて Painter 中心の視点で見ると、汎用のファイル形式(ビューワで内容確認ができる)、色の劣化なし、アルファ情報あり、という要素を満たしてくれる透過 PNG 形式はやはり貴重です。Painter 用のマスクつきパターンのやりとりなどにも便利ではないでしょうか。
透過 PNG 保存周辺の Painter の納得できない挙動などについては、Charako さんの詳しい検証レポート(Painter 11で透明PNG画像を作る)があります。ここで言及されているように、レイヤーの不透明度を下げて保存しても半透明の PNG になりません。また、レイヤーマスクの使用でも、単にレイヤーマスクを作成してグレーで塗り潰して表示を半透明にしただけでは、保存時に半透明になりません。レイヤーマスクを作成して適用したあとなら、意図したとおりに不透明度を下げて保存できます。
(2011/05/18 - 2011/07/11)