PDFからブランドアセットを管理する

単一のファイルからさまざまなサイズ、色合い、調整でロゴをデプロイできると想像してみてください。ブランディング、アイコノグラフィ、UI要素を集約し、非破壊的な編集を行い、わずかなキーストロークでサイト全体で代替のRetina対応アセットを利用可能にすることができます。imgixは、PDFファイル内のベクターオブジェクトをリアルタイムで操作し、ウェブ用のラスターアセットとしてレンダリングするユニークな能力を提供します。

IX ロゴベクターとして

これは、異なるサイズで提供され、プラットフォーム全体でアクセスされる必要があるロゴやカスタムアイコンセットなどのブランディング要素を扱う際に特に便利です。imgixを使用すると、必要なサイズや形式でブランドアセットを提供するために、一つのマルチページベクターファイルソースだけが必要です。

このチュートリアルでは、imgixを使用してベクターソースファイルの利点を活かした「ウェブセーフ」な画像をレンダリングする方法をデモンストレーションします。imgixのAPIとPDFファイル形式を組み合わせることで、以下の機能を提供します：

ウェブに適した形式へのベクターからラスターへの変換
ロスレスのスケーリングと編集
ロゴやアイコンセットを1つのマルチページファイルとして保存
リアルタイムの色調整、クロッピング、および画像操作のためのimgixのAPI全体へのアクセス

ベクター画像の作成

ベクター画像の作成のベストプラクティスチュートリアルを読んで、Adobe IllustratorとBohemian CodingのSketchでベクターファイルを最適に設定する方法を学びます。以下のサンプルをダウンロードして、実践での最適な設定がどのようなものかを確認してください。

ベクタープレビュー

ダウンロード (opens in a new tab) Adobe Illustrator ソース/エクスポートされたPDF
ダウンロード (opens in a new tab) Sketch App エクスポートされたPDF

Vector PDFとimgix API

以下は、ベクターをラスター化してリアルタイムで調整するために使用した例とURLです。これらの効果はサーバー側でロスレスに発生し、適用された後にキャッシュされ、ソースPDFに適用されます。

ロゴの外観を変更するには、PDFの処理方法を調整するためにURLパラメータを追加できます。例えば、w または w を使用すると、サイズを簡単に調整できますが、page パラメータを使用するとPDFの異なるページが得られます。

ウェブに適した形式への変換

まず、グラフィックを出力する方法を指定します。fm パラメータでサポートされている形式の中から選択できますが、一般的にはJPEG、WebP、またはPNGが好ましいです。JPEGを選択した場合、q パラメータで圧縮の品質を設定できます。値は0から100までです。

グラフィックから切り取られた空白の領域や不透明度が低いオブジェクトがある場合、PNGとしてフォーマットすると透明性が維持されます。bg パラメータで背景色の値を指定することもできます。

背景透明のPNGに変換

形式: fm=png

icons-adobe.pdf?fm=png

圧縮品質80でJPGに変換

形式: fm=jpg
品質: q=80

icons-adobe.pdf?fm=jpg&q=80

黒背景で保存されたJPG

形式: fm=jpg
幅: w=256
背景色: bg=000000

icons-adobe.pdf?fm=jpg&w=256&bg=000000

スケーリング

ベクター画像はさまざまなサイズでデプロイする必要があります。ベクターフォーマットの利点は、ロスレスであり、ベクターソースを持つことでグラフィックをラスター化する前にアップスケールでき、視覚品質の損失がありません。このタイプのスケーリングには2048pxの制限があります。

w または w パラメータを使用して、グラフィックのサイズを定義できます。

幅128pxでアイコンを比例表示

形式: fm=png
幅: w=128

icons-adobe.pdf?fm=png&w=128

高さ512pxでアイコンを比例表示

形式: fm=png
幅: w=512

icons-adobe.pdf?fm=png&h=512

グラフィックセットとページネーション

Adobe IllustratorのアートボードやPDFページは個別に要求できます。これにより、複数のブランドアセットやアイコンコレクションを1つのファイルで整理できます。

グラフィック、ページ2を表示

形式: fm=jpg
幅: w=512
ページ: page=2

icons-adobe.pdf?fm=png&w=512&page=2

グラフィック、ページ4を表示

形式: fm=jpg
幅: w=512
ページ: page=4

icons-adobe.pdf?fm=png&w=512&page=4

色調整

ベクターグラフィックの外観を変更するために、色相や彩度の色調整を行うことができます。

オレンジからグリーンへの色相

形式: fm=png
色相: hue=80

icons-adobe.pdf?fm=png&hue=80

オレンジからブルーへの色相

形式: fm=png
色相: hue=180

icons-adobe.pdf?fm=png&hue=180

グレースケール

形式: fm=png
彩度: sat=-100

icons-adobe.pdf?fm=png&sat=-100

Retinaとデバイスピクセル比のスケーリング

デバイスピクセル比は、CSSピクセルとデバイスピクセルの間を容易に変換するために使用されます。これにより、RetinaディスプレイのAppleデバイスやAndroidデバイスなど、さまざまなプラットフォームで画像を正しいピクセル密度で表示できます。このパラメータを機能させるためには、幅、高さ、またはその両方を指定する必要があります。デフォルトは1です。