PSD から PNG へ: RGBA を出荷するときは、アルファ エッジ、カラー プロファイルの意図、および「可視のマージ」の実際の意味を詳しく説明します。
PNG は、クリーンなアルファを必要とするアイコン、カットアウト、ステッカーに適しています。JPEG とは異なり、ソフト エッジのブロック状の損傷は回避されますが、フルカラー マスターは大きくなる可能性があり、半透明のピクセルはビューアの合成ルールによっては依然として異なって見えます。サーバー側の PSD から PNG への変換は、実質的に「表示されるコンポジットをラスタライズしてからエンコード」します。ライブ タイプやベクトルは保持されないため、PSD がマスターのままで、PNG がハンドオフになります。フルアルファが必要かどうか、ターゲットが sRGB かどうか、アートがダーク UI に表示されるかどうかを書き留めます。そうしないと、デザイン、Web、プリプレスが 3 つの背景を持つ同じファイルについて議論することになります。 QA をライト マット + ダーク マット + 実際の CSS 背景として標準化し、ハッシュをログに記録することで、議論がスクリーンショットではなく証拠に戻るようにします。
オンラインで PSD から PNG を使用する方法: サインオフされたファイルをアップロードし、可視レイヤーのマージを待ってダウンロードし、アセットをバージョン管理する前に明るいマットと暗いマットの両方で透明なエッジを検証します。
- Photoshop で外部可視状態をフリーズします。注釈とスクラッチ レイヤーを非表示にし、透明にしておく必要がある領域を白いプレートがブロックしていないことを確認し、ブリーフでアートボード サイズと @2x/@3x ターゲットを確認し、アップロードし、ツールのマージ表示メモを読みます。これにより、誰も PNG からレイヤー化されたセマンティクスを期待できなくなります。
- アルファ チャネルをダウンロードして検査し、白、ブランドダーク サーフェス、およびライブ ページの背景の上に PNG を合成します。髪、影、細いストロークにズームして、グレーのフリンジ、色のハロー、またはギザギザを表示します。失敗した場合は、PNG をやみくもにレタッチするのではなく、PSD のマット/クリッピングを修正して再実行してください。
- バージョン管理されたファイル名、レコードの色空間、ICC 埋め込みポリシー、ロングエッジ、および承認者とともに出荷されます。 CDN がサービスを提供する場合、URL のフィンガープリントが行われるため、「アセットを置き換えた」ことが 1 か月にわたるキャッシュと衝突しません。
PSD から PNG への FAQ (アルファ、マージ表示、ファイル サイズ)
黒い背景ではエッジがグレーに見えますが、白ではきれいに見えます。変換が壊れているのでしょうか、それともアルファの事前乗算とコンテキストの表示でしょうか?
半透明のアンチエイリアス処理されたピクセルは背景色と相互作用します。一方の側がストレート アルファを想定し、もう一方の側が事前乗算されている場合、古典的な「ダーク マット グレーのフリンジ」が得られます。実際の Web またはエンジンの背景で検証し、合成の前提を文書化し、Photoshop でマットやエクスポート オプションを調整します。計算を変更せずに「別の PNG エクスポート」を要求しても、問題が解決されることはほとんどありません。
Photoshop の「名前を付けてエクスポート」とオンライン結合出力は若干異なります。サービスを非難する前に何を確認すべきでしょうか?
差分は、多くの場合、PNG エンコーダーではなく、可視性スタック、クリッピング グループ、調整スコープ、または古いスマート オブジェクトから取得されます。スクラッチ レイヤーに表示されているものをローカルでマージし、ROI を比較します。ローカル マージが既に名前を付けてエクスポートに一致していない場合は、パイプラインをエスカレーションする代わりに PSD を修正します。
ヒーロー PNG は巨大であり、CDN 請求は痛手です。サイト全体で PNG を禁止すべきでしょうか、それとも PNG がまだ正しい取引になるのはいつですか?
滑らかなアルファまたは鮮明なカットアウトが必要な場合は PNG を使用してください。長いエッジを制限し、アートが承認されたときにパレットに量子化し、写真の背景を JPEG/WebP/AVIF に分割し、どの領域が本当にアルファを必要とするかを文書化することにより、サイズを攻撃します。全面的な禁止はバイトを節約するよりも多くのハッキングを生み出します。
小さな文字やヘアラインは、大きな PNG では鮮明に見えますが、ブラウザーを拡大縮小するとぼやけてしまいます。PSD または CSS を修正する必要がありますか?
出荷時のサイズのピクセル グリッドに合わせて、奇数の寸法や半ピクセルのナッジを避け、「画像レンダリング」と整数のスケーリング パスに同意します (1x と 2x で確認します)。レイアウトのスケーリングを修正せずに PNG 内でのみストロークを太くすると、通常、あるアーティファクトが別のアーティファクトと交換されます。
クライアントは、PNG には「レイヤーがなく」コピーを編集できないと言います。引き継ぎ前に期待値を設定するにはどうすればよいでしょうか?
PNG はラスターハンドオフであり、編集可能なレイアウトではありません。編集が約束されている場合は、PSD (または合意されたソース) を一緒に発送し、ファイルに RASTER_FINAL と EDITABLE_MASTER のラベルを付けます。オンライン PSD から PNG へのフラット化は「プロジェクト ソースのエクスポート」ではなく、フラット化していることを書面で明確にします。