PerfectVector
著者: Irene Kim

EPSの透明背景:何が塗られずに残るのか

EPSの白い四角を、未描画の空間、不透明な背景の塗り、保持された不透明度に分けて診断します。実際の描画と書き出し機能の制限を確認します。

2 分で読める
目次

EPSはデザインの周囲を塗らずに残せます。それは、デザイン内の部分的な不透明度をそのまま保持することとは異なります。 白い周囲は、ビューアーのページ、実際の白い長方形、分割・統合した結果のいずれかかもしれません。何かを削除する前に、どれなのかを診断します。

製品固有の制限もあります。PerfectVectorの現在のEPS書き出しは、不透明な白または黒のページ背景を塗り、保持可能な透明効果は残しません。 透明EPSを書き出す手順ではありません。以下の独立して作成したEPS例は、ファイル上の違いを示すもので、PerfectVectorの出力ではありません。

白い領域が何を表すか特定する

観察するもの考えられる理由次の確認
あるプレビューでデザインが白地に見えるビューアーが白いページを表示している、またはファイルが白を塗っている受け取り側の工程で実際のデザインを色付き背景に重ねる
白い長方形が色付き背景を覆う不透明オブジェクトや統合した画像がある可能性元のオブジェクトと埋め込みラスター内容を調べる
周囲の空白は機能するが、半透明オブジェクトが不透明になる書き出しが不透明度の効果を保持していない形式と書き出し機能を調べ、編集可能な元データと比較する
作成元アプリと別アプリで開き直した結果が異なるアプリが異なる表現を読んでいる可能性元アプリでの再表示だけでなく、配置・受け渡し後の結果を確認する

塗られていないとは、その領域を覆う描画操作がないことです。部分的な不透明度とは、背後のものと合成するときに、オブジェクトが一部だけ寄与することです。周囲が空いた不透明な青い船と、不透明度が半分の青い船では要件が異なります。

Adobeの透明と分割・統合の文書は、Illustrator EPSに、分割・統合したEPSデータとネイティブなIllustratorデータを併存できると説明しています。Illustratorで開き直すとネイティブ表現を読み、別アプリへの配置ではEPS表現を読む場合があります。そのため、元アプリで正しく開けても、どこでも同じ不透明度の動作になるとは分かりません。

分割・統合は透明デザインを別の表現へ分け、ラスター化した領域を含む場合があります。後で不透明度や背景を変えることが重要なら、編集可能な原本を残します。

2つのEPSと別のSVG対照例を比較する

新しい紙の船のエンブレムを、2つの単純なEPSファイルに作りました。どちらも 240 × 160 の同じ範囲と、同じ不透明な描画命令を使います。2つ目は船の前にページ全体の白い塗りを加えます。

1 1 1 setrgbcolor
0 0 240 160 rectfill

2つ目の例から、この既知の背景操作を除くと、1つ目のファイルを正確に再現できます。これは条件を揃えた組であり、任意のEPSファイルから文字をむやみに消す方法ではありません。

Ghostscript 10.08.0の pngalpha デバイスで、両方を144 dpiで描画しました。保存PNGで、アンチエイリアスの境界から離れた内部点を調べました。

例周囲のアルファ船内部のアルファ解釈
独自に作成したページ塗りなしのEPS0255描画エンジンは周囲を覆わず、船は不透明
同じEPSデザインの前に白いページ塗りを追加255255白いページが塗られ、不透明
グループの不透明度が 0.5 の別SVG0約128このSVG対照例では、船自体が部分的に透明

値は8ビットのアルファで、0が透明、255が不透明です。SVG対照例はSharp/librsvgで別に描画し、EPSには変換していません。

独立した未描画背景と白塗り背景のEPSの実際のGhostscript描画と、部分的な不透明度を持つ別SVGの対照例を、市松模様と黄褐色の背景に重ねたもの
独立したEPS例と別のSVG対照例です。EPSから作ったPNGが示すのはGhostscriptの出力カバー率で、EPSが持つ透明アルファではありません。PerfectVectorの書き出し、レイアウトアプリのテスト、実物の印刷結果ではありません。

Ghostscriptの出力デバイスの文書は、PNGのアルファをピクセルのカバー率と定義し、明示的に塗らない限り背景は透明としています。これが結果の理由です。船の周囲が透明なPNGは描画エンジンの出力であり、SVGの保持された不透明度に相当するEPSの項目があると示すものではありません。

ブラウザーで保存画像をデコードし、黄褐色の背景に重ねました。1つ目の船の周りは背景が見え、2つ目は白い長方形で覆われ、部分的な不透明度のSVG船は背景と混ざりました。この確認が示すのは保存例とそれらの描画エンジンの動作であり、すべてのレイアウトアプリのEPS読み込みではありません。

条件を揃えたファイルで描画確認を再現する

以下の検証済みソースを unpainted.eps として保存します。

%!PS-Adobe-3.0 EPSF-3.0
%%BoundingBox: 0 0 240 160
%%HiResBoundingBox: 0 0 240 160
%%LanguageLevel: 2
%%Pages: 1
%%Title: Original paper-boat background specimen
%%Creator: Independently authored article fixture
%%EndComments
gsave
% ORIGINAL BOAT ARTWORK
0.192157 0.364706 0.435294 setrgbcolor
newpath 55 65 moveto 185 65 lineto 165 40 lineto 75 40 lineto closepath fill
newpath 115 75 moveto 115 135 lineto 65 100 lineto closepath fill
newpath 125 75 moveto 170 75 lineto 125 120 lineto closepath fill
grestore
showpage
%%EOF

2つ目の例では、コピーを white-painted.eps として保存します。上の白い塗りの3行を、gsave の直後、% ORIGINAL BOAT ARTWORK の前へ挿入します。船の命令は変えません。

Ghostscriptがインストール済みなら、実行します。

gs -dSAFER -dBATCH -dNOPAUSE -dEPSCrop \
  -sDEVICE=pngalpha -r144 \
  -sOutputFile=unpainted.png unpainted.eps

2つ目のコマンドでは、ファイル名を white-painted.png と white-painted.eps に置き換えます。通常のRGB PNGデバイスでは同じアルファテストになりません。結果も透明表示を有効にした画像として確認します。透明PNGの背後が白いキャンバスだと、違いが再び隠れる場合があります。

この例では、塗りなしの角が覆われず、塗った例の角が不透明な白で、船の内部は両方とも不透明なら比較完了です。別のSVG対照例が調べるのは、塗った形の内部の部分的な不透明度という別の特性です。

編集可能なデータで原因を直す

白いオブジェクトがある場合: 元の編集可能ファイルのコピーで作業します。どのオブジェクトが周囲を白くしているか確認して非表示にし、残るデザインを対照的な色に重ねます。文字やハイライトなど意図した白い細部は保ちます。周囲を実際に塗らずに残す方法で再書き出しし、受け取り側アプリで納品ファイルを確認します。

白がプレビューのページだけの場合: デザインを変えると、すでに意図した空白の周囲を持つファイルを損なう場合があります。受け取り工程で背景に重ねるか、適切なカバー率の描画を使い、白が塗られているか確認します。

白がビットマップや分割・統合した結果に焼き込まれている場合: ページの長方形1つを除いても、元の縁や不透明度は戻らないかもしれません。可能ならレイヤー付き・ベクターの元データへ戻ります。フラットなラスターのシルエットは、パスが必要ならトレースや描き直しができますが、柔らかい影やぼかした縁には、意図した見た目を保つ手順が必要です。

部分的な不透明度を編集可能に保つ場合: 対応する形式と書き出し機能を使い、依頼先が受け付けるものを確認します。SVGのfill-opacity仕様は部分的な塗りの描画を定義し、今回のSVG対照例はグループの不透明度を使います。Adobeは透明性を保つPDFの手順も説明しています。どちらも、形式名だけで特定の書き出しや読み込みが全効果を保つ保証にはなりません。

SVGで問題が始まる場合は、SVGの透明背景ガイドが背景オブジェクトと書き出し確認を扱います。EPSがパスと埋め込み画像のどちらを含むか調べる場合は、EPS構造の確認ガイドを使います。

現在のPerfectVectorのEPS書き出しの動作

PerfectVectorのEPS書き出しガイドは、不透明な白または黒の背景を持つ、フラットな塗り付きベクターパスを出力するとしています。現在のライターはページ全体の背景を塗り、中間のアルファを保持可能なEPS効果として残さず拒否します。

再構成前にラスターの背景を除いても、このEPS書き出しの仕様は変わりません。編集段階で不要な周囲の形がないデザインでも、選んだ出力ライターから不透明なページが出る場合があります。

適切なラスターだけのロゴにパスの再構成が必要で、不透明なEPS背景を受け入れられる場合は、PerfectVectorで確認用候補を作れます。文字、角、ネガティブスペース、色領域を比べ、必要な受け取り工程で書き出したEPSを開き直します。独自に作った塗りなしEPSは、製品が同じ出力を提供する証拠ではありません。

未描画のEPSの周囲が特に必要な仕事では、適した元データ編集・書き出し方法を使い、実際の結果を確認します。保持可能な部分的な不透明度が必須なら、透明性に対応する適切な納品を別に合意します。既存のネイティブなベクターはそのまま保ち、写真、質感、柔らかい影は、ラスターや編集可能な元データで残すほうがよい場合があります。

JPGからEPSへの説明は、再構成と、ピクセルを別の入れ物に包むことの違いを扱います。業者の要求があまり具体的でない場合は、ロゴ形式ガイドで、まずファイルとオブジェクトの要件を確認できます。

よくある質問

EPSに透明背景を持たせられますか? EPSは周囲を塗らずに残せます。独立した例では、GhostscriptのアルファPNG出力で周囲が覆われずに描画されました。それは、デザインに保持可能な部分的不透明度があることや、すべてのEPS読み込みが同じ動作になることを意味しません。

EPSに白い四角が出るのはなぜですか? 白はビューアー、塗ったオブジェクト、ビットマップ、分割・統合した表現から来る可能性があります。削除前に、受け取り工程で色付き背景と比較し、元のオブジェクトを調べてください。

PerfectVectorは透明EPSを書き出しますか? いいえ。現在のEPSライターは、不透明な白または黒の背景を塗り、保持可能な透明効果は残しません。その出力が仕事に合う場合に使い、未描画の周囲や保持可能な不透明度が必要なら、別の検証済み手順を選びます。

Illustrator EPSを開き直せれば、他アプリへの配置でも不透明度が保たれる証拠ですか? いいえ。Adobeは、IllustratorがEPS表現と一緒に保持したネイティブデータを読める一方、他アプリへの配置は分割・統合したEPSデータを読むと説明しています。実際の依頼先での結果を確認します。

出典

  1. Adobe — 透明なアートワークの印刷と保存 — 分割・統合と、ネイティブIllustratorデータと受け渡すEPSデータの違いを説明。
  2. Ghostscript 10.08.0 — 出力デバイス — カバー率としてのPNGアルファと、明示的に塗った背景の効果を説明。
  3. W3C — SVGの塗りの不透明度 — 部分的な塗りの不透明度を定義し、グループの不透明度と区別。
  4. PerfectVector — 画像からEPS — 不透明背景とフラットなパスを持つ、現在のEPS書き出し範囲を示す。

フラットなラスターからパスが必要で、不透明なEPS背景を受け入れられますか。デザインを再構成し、EPS候補を確認します。未描画の周囲や保持可能な不透明度が必要なら、それを実際に納品できる手順を選び、検証してください。

ブログのその他の記事

PerfectVector

画像ファイルを
編集可能なSVGに変換

クレジットカード不要