画像と写真 · ブラウザー画像 & 描画エディター
ラスター グラフィックスとベクター グラフィックス: 写真上の描画がピクセルになる理由
· 背景
画像編集 キャンバス ブラウザ処理
ラスター イメージはピクセルのグリッドです。ベクター グラフィックスは、形状を描画するための命令です。この投稿では、その違い、なぜ写真はラスターしかできないのか、そしてなぜ写真に描画したものはエクスポート時に同じ運命を引き継ぐのかについて説明します。
ぼやけたロゴと決して「ベクター化」できない写真 — 2 つの日常的な混乱と 1 つの説明
ぼやけたロゴと注釈付きの写真は、同じ問題のせいであることがよくありますが、それらは異なる種類の素材として始まります。ベクター ロゴは、パス、ストローク、塗りつぶしに関する一連の命令です。写真はサンプリングされた色の有限フィールドです。エディターは写真をキャンバス サイズのラスター ビットマップとして開くため、線や四角形が描画される前に、その作業世界はすでにピクセルのグリッドになっています。
写真の上にボックスを描画してエクスポートし、端を拡大します。結果は、注釈が写真の横のピクセルを占めるラスター画像になります。そのファイルを、より大きな表示サイズで元の SVG と比較すると、違いが明確になります。エクスポートを拡大するとグリッドが再サンプリングされ、SVG を拡大するとパスが再計算されます。このエディタは、最初のオブジェクトを 2 番目のオブジェクトに変換しません。
ラスター: 色付きセルのグリッド — PNG、JPEG、WebP が画像を保存する方法と、スケールアップによってピクセルが発生する理由
ラスター イメージは、グリッド内の位置に色を記録します。 PNG、JPEG、および WebP はエンコードと圧縮が異なりますが、エクスポートされた画像は表示時にピクセルに解決されます。 1 ピクセルの境界、アンチエイリアス処理された曲線、および小さなキャプションはすべて、最終画像の有限サンプルです。ファイルを上方にスケーリングすると、追加のサンプルを推定するために補間プロセスが要求されます。元の描画命令は復元されません。
この制限は、注釈がさまざまなサイズでも鮮明なままでなければならない場合に重要です。 1 つの固定ディスプレイを対象としたスクリーンショットの吹き出しは、ラスター エクスポートとして正確に使用できますが、標識、印刷物、および複数のインターフェイスを対象としたブランド マークは、通常、ベクター アセットとして利用可能なままにする必要があります。エディターは、独立して拡大縮小する必要があるソース アートワークの代わりとしてではなく、合成イメージに使用します。
ベクトル: 数学的に記述された形状 — SVG などの形式のパス、ストローク、塗りつぶし、およびそれらが損失なく拡大縮小される理由
ベクトルは、表示されるすべてのピクセルを格納するのではなく、ジオメトリを記述します。 SVG パスでは、曲線、ストローク幅、塗りつぶし、変換を指定できます。次に、レンダラーが現在のサイズに適したピクセルを計算します。同じ単純なマークを複数の次元に配置してもきれいなままにできるのはこのためです。この説明はフォーマットレベルの背景であり、このエディタがそのような命令を発行または保持するという主張ではありません。
ブラウザ エディターは、線と形状のジェスチャに一時的に幾何学的情報を使用します。これにより、リリース前にプレビューがポインターを追跡できるようになります。ジェスチャが終了すると、結果がラスター レイヤーにペイントされます。エクスポートでは、表示されているレイヤーを合成し、PNG、JPEG、または WebP の Canvas.toBlob を呼び出します。このパスには SVG エクスポートまたはベクター プロジェクト ドキュメントが存在しないため、ジオメトリは独立したオブジェクトとして存続しません。
写真が本質的にラスターである理由 — センサーは形状ではなくサンプルをキャプチャし、変換によって変化するものはありません
カメラはセンサーを通過する光のサンプルを記録し、それらのサンプルを画像データとして保存するため、写真はラスター マテリアルです。写真をベクトルとして記述するには、そのテクスチャ、ノイズ、陰影、不規則な細部を発明された形状に置き換える解釈が必要になります。別の方法でアップスケーリングまたはエクスポートするとグリッドが変更される可能性がありますが、どちらの操作でも元のキャプチャに含まれる情報の種類は変わりません。
この区別は、写真とロゴが 1 回の編集で同じものになることなく共存できる理由も説明します。ロゴは他の場所ではベクトルとして開始される場合がありますが、このエディターでラスター写真に描画されると、結合された結果はピクセル グリッドになります。将来の再利用が重要になる場合は、元のロゴを個別に保存し、ブラウザのエクスポートを現在の目的の完成イメージとして扱います。
ラスター上での描画: エディターの機能 — 編集中の注釈は形状になる可能性がありますが、エクスポートされた画像は単一のグリッドです
ジェスチャ中、線および形状ツールはコンパクトな幾何学的命令のように動作できます。エディターは開始点、終了点、アウトライン、および現在のプレビューを認識します。リリース時に、これらの命令はラスター レイヤーにレンダリングされます。ブラシ マークは作成された時点でラスター ペイントであり、テキストは移動可能なテキスト オブジェクトとして保持されるのではなく、配置時にラスター化されます。したがって、セッションは、後でオブジェクトレベルで編集できることを約束することなく、利便性を提供します。
エクスポートすると境界が明確になります。表示されているラスター レイヤーは 1 つのキャンバスに合成され、ブラウザーを通じて PNG、JPEG、または WebP としてエンコードされます。そのファイルを再度開くと、写真とマークが通常のピクセルとして表示されます。受信者に選択可能な四角形、再利用可能なパス、または編集可能なキャプションを提供するわけではありません。単に画像を共有するのではなく、注釈を変更する必要がある場合は、レイヤー化されたセッションまたはソースアセットを保持してください。
ジョブに適した種類の選択 - ベクター ロゴを要求する場合と、ラスター エクスポートがまさに希望どおりの場合
マーク自体を移動する必要がある場合は、ベクター アセットを選択します。ロゴに複数のサイズが必要な場合、図を修正する必要がある場合、シンボルを多くの背景に配置する必要がある場合などです。目標が、すぐに共有できるスクリーンショット、吹き出し付きのプルーフ、または目に見えるメモを含む写真である場合は、ラスター エクスポートを選択します。正しい決定は、ある形式が常に優れているという信念からではなく、次回の使用から導き出されます。
ブラウザ画像および描画エディタは 2 番目のカテゴリに適しています。写真上にブラシ、線、長方形、楕円、ラスター テキスト マークを配置し、その合成結果をラスター ファイルとしてエクスポートできます。 SVG を出力したり、ベクトル オブジェクト モデルを保存したりすることはできません。クライアントがロゴを独立したアセットとして要求した場合は、編集されたピクセルからより大きなバージョンを抽出するのではなく、元のベクター ソースに戻ります。
要点: どれを保持しているのかを把握してください。設計上、ブラウザ イメージおよび図面エディタがどのようにラスター イメージを編集し、ラスター イメージをエクスポートするのかを理解してください。
信頼できるメンタル モデルはシンプルです。エディターはジェスチャを記述するためにジオメトリを使用しますが、ドキュメントとそのエクスポートはラスター イメージです。開かれているすべての写真とエディターのレイヤーには、有限のピクセル グリッドがあります。そのグリッドを拡大すると既存の情報がリサンプリングされ、エクスポートすると表示されているレイヤーが別のラスターに合成されます。このワークフローのどのステップも、すでにピクセルになっている線から再利用可能なベクトル パスを作成しません。
描画する前に、ファイルの種類と対象の受信者を確認してください。受信者が 1 つの完成した画像を表示する必要がある場合は、ラスターをエクスポートし、実際の表示サイズでそのエッジを検査します。受信者がマークを編集したり、ロゴの色を変更したり、アートワークを繰り返し拡大縮小したりする必要がある場合は、適切なベクターまたはレイヤー化されたソースを提供してください。この区別により、技術的に有効なエクスポートが別の種類の成果物と間違われることがなくなります。