ベクター画像作成のためのベストプラクティス

ベクター画像は、アイコンやロゴのようなシンプルで形状ベースのグラフィックスを管理するのに適しています。いくつかのシンプルな設定ステップを行うことで、これらのグラフィックスの作成を大幅に効率化し、どのデバイス解像度でもクリーンにスケールできるようにすることができます。

このチュートリアルでは、Adobe Illustrator および Bohemian Coding の Sketch を使用して、PDFからブランドアセットを管理する チュートリアルで使用するためのベクター画像の設定の基本とベストプラクティスをいくつか紹介します。

ベクターファイルをラスタライズに最適化するための方法やアプローチをいくつか強調しています。これらは提案であり、特定のプロジェクトや目的の出力によってアプローチが変わる場合があります。

Adobe Illustrator の使用

ドキュメントの設定

新しいドキュメントを作成する際は、Illustrator が提供する Web プリセットを使用するのが最適です。このウィンドウから、ドキュメントを必要に応じてカスタマイズできます。このウィンドウから、アートボードのデフォルトサイズと順序を設定できます。これについては後で詳しく説明します。

RGB カラーモードで作業していること、単位がピクセルに設定されていることを確認してください。ピクセルグリッドに新しいオブジェクトを揃える オプションは選択解除し、リサイズ、編集、または別のファイルからのアートワークの貼り付けに関して予期しない問題が発生する場合があります。オブジェクトが選択されている間に、トランスフォームパネルからピクセルグリッドに直接影響されるオブジェクトを選択的に選ぶことをお勧めします。

概要

• Web プロファイルから開始
• カラー > RGB
• 単位 > ピクセル
• 「詳細」の下で「新しいオブジェクトをピクセルグリッドに揃える」の選択を解除

グリッドと単位

Illustrator > 環境設定 > 単位 に進みます。一般とストロークの値をピクセルに設定するのが最適です。

Illustrator > 環境設定 > ガイドとグリッド に進みます。ここでは、Illustrator でグリッドが表示される方法を調整し、オブジェクトの配置と整列をより制御できるようにします。

私たちは、グリッドライン毎 を 2 ピクセル、細分化 を 2 に設定することをお勧めします。これにより、オブジェクトをグリッドにスナップし、ピクセルの配置をよりよく理解できます。各人が異なるスケールで作業しますが、始点としては良いでしょう。

グリッドを背面に表示 の選択を解除すると、アートワークの上にグリッドが表示されます。

ベクターがどのようにラスタライズされるかを知りたい場合は、ビューメニューの下の ピクセルプレビュー オプションを選択できます。

ショートカット

• グリッドの切り替え: コマンド + ’
• グリッドにスナップ: シフト + コマンド + ’
• ピクセルプレビューの切り替え: コマンド + オプション + Y

注: ピクセルにスナップ を使用している場合は、ビューメニューの下にある ポイントにスナップ をオフにすることをお勧めします。

概要

• ピクセルで作業する
• 適切なグリッドの増分を設定する
• 2px グリッドライン、2 細分化

アートボードとアートボードパネルの使用

アートボードを使用することは、Illustrator でネイティブにマルチページの PDF を作成する簡単な方法です。アートボードはツールバーのアートボードツールとウィンドウメニューのアートボードパネルで最も簡単にアクセスできます。

アートボード編集モード (Shift + O) に入ると、ドキュメント内に新しいアートボードを描画できます。アートボードは、レイヤーと同じようにアートボードパネルを使用して管理および配置できます。

選択されたアートボードは、その周囲に太く黒く線が引かれます。アートボードが選択されると、メインメニューオプションの下にあるオブジェクトプロパティパネルを使用してそのプロパティを調整できます。これには、その物理サイズと原点が含まれます。

原点は適切に管理され、完全なピクセル値に存在する必要があり、ベクターアートワークのピクセル完璧を保証します。

アートボードパネルでのアートボードの配置は、ページの順序を決定します。アートボードパネルの任意のアートボードをダブルクリックすると、そのアートボードに直接移動します。

アイコンの場合、64x64ピクセルのアートボードから始めると、32、64、256、512、1024px などの一般的な値へのクリスプで均等なスケーリングと後続のラスタレンダリングが容易になります。適切な開始値と乗数を選択するのに役立つスケーリングプランを心に留めると良いでしょう。

オブジェクトメニューの下には、アートボードを管理および作成するための追加オプションがあります：オブジェクト > アートボード。これらのオプションを使用すると、アートボードを作成、縮小、整理、およびよりよく配置することができます。そのようなツールの一つが、アートボードの配置と配置を自動化する アートボードの再配置 オプションです。

ショートカット

• アートボード編集モード: Shift + O

このモードを終了するには、他のショートカットキーを押します—デフォルトの矢印カーソル選択ツールである「V」は良い選択です。

概要

• アートボードを使用してベクター画像を整理する
• アートボードパネルを使用してアートボードを管理する
• アートボードの原点に偶数、完全なピクセル値を割り当てる
• アートボードの寸法に偶数、完全なピクセル値を使用する
• 指定されたスケールを念頭に置く: 32, 64, 512, 640, 1024ピクセルなど
• ファイルを整理するために アートボードの再配置 ツールを使用する

グラフィックの配置と複雑さ

クリスプなアイコンとブランディングビジュアルを得るためには、常に偶数ピクセルを使用し、グラフィックアセットの配置を意図的に行うことが最善です。アートワークをドキュメントに貼り付ける前に、一部のアセットまたはラインに ピクセルグリッドに揃える がオンになっている可能性があり、要素が歪むことがあります。このオプションはトランスフォームパネルで切り替えることができ、オブジェクトごとに動作します。ピクセルグリッドに揃える の代わりに、オブジェクトを移動する際には グリッドにスナップ に依存する方が良いでしょう。

トランスフォームパネルを信頼して使用してください！ 一般的に、トランスフォームパネルを使用するときは、すべてのグラフィックを左上から向けるのが便利です。これにより、サイズを変更して配置することがはるかに簡単になります。トランスフォームパネルでグラフィックを監視することで、オブジェクトの配置が正確に確定し、完全な偶数ピクセルに登録されることが保証されます。

Retina ディスプレイを念頭に置いて画像を提供する場合は、常に偶数ピクセル値を使用し、エッジやハードポイントを 2 で割り切れる値に設定する必要があります。Imgix を使用すると、デバイスのピクセル比を設定して、Retina ディスプレイで適切なサイズのアイコンを提供することができます。エッジとポイントを偶数値に設定すると、ラスター画像にレンダリングされた後のピクセルの完璧性が保証されます。

透明度、グラデーション、複雑さのすべてが Imgix の PDF からラスターへの変換でサポートされます。画像をテストする最良の方法は、サーバーに配置して PNG または JPG として処理することです。

与えられたページのパスの数が多くなると、処理時間が増加する可能性がありますが、それでもミリ秒のうちにラスターグラフィックにレンダリングされます。複雑なグラデーション、ブレンドモード、ブラシスタイルを備えたベクターイラストレーションをテストしましたが、デザインの品質に顕著な損失はありませんでした。

概要

• 最適な結果を得るために、偶数ピクセルを使用し、グラフィックアセットの配置を意図的に行う
• Illustrator の複雑な機能はサポートされており、レンダリングについて疑問がある場合は実験する

PDF ファイルの保存

ベクターファイルを Imgix 用の PDF として準備するには、まず元の Illustrator ドキュメントを保存することをお勧めします。その後、ファイル > 別名で保存… > Adobe PDF に進みます。

特にベクターグラフィックのみをレンダリングする場合は、Adobe のデフォルト設定で十分です。Illustrator の編集機能を保持 をオンのままにしても、Imgix によるグラフィックのレンダリングには影響しません。ファイルサイズを小さくしたい場合はオフにすることもできます。

このファイルを Web ディレクトリに配置すれば、Imgix の API と組み合わせて使用する準備が整います。

概要

• 別名で保存 > Adobe PDF
• 編集しやすくするために Illustrator の編集機能を保持 をオンのままにする

Sketch の使用

ここでは、Bohemian Coding の Sketch を使用してベクター画像を設定するための基本とベストプラクティスを紹介します。

このアプリケーションはグラフィック制作に特化しており、Adobe Illustrator よりもかなり安価です。Sketch は PDF ファイル形式を幅広く活用しており、Imgix でのベクターからラスターへの変換に適したアセット作成ツールです。

ドキュメントの設定

Adobe Illustrator と比べて、Sketch はアイコンや Web グラフィックの作成により適しています。新しいドキュメントを作成する際に必要な設定はほとんどありません。プリセットとデフォルト設定は、Web アセットの作成に求められるものに沿っています。カラーは RGB で、測定にはピクセルが使用されます。

グリッドと単位

ツールバーのビューメニューには、ドキュメントで作業するためのグリッド設定に役立つオプションが多数あります。ここでは、グリッド、定規、各種ユーティリティや測定値の表示を切り替えたり、グリッドの値を調整したりできます。

ビュー > グリッド設定 に進むと、ドキュメント表示の設定が開きます。ここでは、グリッドのブロックを 2px ごと、太線を 1 ブロックごとに設定しています。これにより、重要なポイントやエッジを偶数値に配置しやすくなります。

ビューメニューの ピクセルを表示 を使用すると、グラフィックのラスタライズ版を 1 対 1 のスケールでプレビューできます。

ショートカット

• ピクセルを表示: Control + P
• グリッドを表示: Control + G
• キャンバスを中央に表示: Command + 1

概要

• Sketch はネイティブで RGB とピクセルで動作する
• 偶数かつ整数のピクセルで作業する
• グリッド設定を 2px、太線を 1 ブロックごとに設定する

ページ、アートボード、スライスの使用

Sketch には、Imgix で適切に機能するようにアートワークを書き出し用に準備する方法がいくつかあります。これらのグラフィックをマルチページの PDF として書き出すことを想定しているため、ドキュメントを設定する方法は複数あります。

Adobe Illustrator では、マルチページの PDF を保存する方法としてアートボードを使用することを主に推奨しました。Sketch では、グラフィックごとにページを使用し、ページ内のグラフィックの周囲にアートボードを作成して、アートボードからスライスを作成 オプションを使用することをお勧めします。

まず、作成したいグラフィックごとにページを作成して名前を付けます。ページを管理 オプションを使用すると、1 つのドキュメント内でグラフィックの名前を変更したり、整理し直したりできます。

次に、アートボードツールを使用してアートボードのサイズを設定します。アートボードツールは Illustrator と同様に「アートボードモード」を開き、アートボードのサイズを編集できます。これにより、作品の周囲にキャンバスを作成でき、最終的にそれを使用してスライスを作成できます。

1 つのページに複数のアートボードを配置でき、左側のレイヤーツリーを使用して各アートボード内のグラフィックの配置を簡単に確認できます。

概要

• グラフィックアセットのセットを整理するためのページ
• グラフィックを整理するためのページ内のアートボード
• レイヤーツリーを使用して、ページとアートボード内のグラフィックを把握する

グラフィックの配置と複雑さ

常に偶数かつ整数のピクセル値で作業し、グラフィックの配置を把握してください。インスペクターパネルに注目してください。すべてのオブジェクトの原点は左上に設定されています。スケーリングやラスタライズの際にグラフィックの鮮明さと忠実度を保つため、オブジェクトの向きが正しく、エッジが整数のピクセル値に揃っていることを確認してください。

ベクターエフェクトやグラデーションは、Imgix の API でラスタライズされた後も適切に表現されます。グラフィックに適用されたラスターエフェクトは、元のサイズの 100% より大きく拡大する場合、ロスレスにならず、きれいに表現されません。

概要

• ベクターエフェクトはスケーリングしてもロスレス
• ガウスぼかしなどのラスターエフェクトは拡大するときれいにスケールしない

保存と書き出し

グラフィックを書き出すには、書き出しモードを使用してスライスを設定します。書き出し ツールを使用して、オブジェクトを書き出す準備ができます。ここでは、スライスを自分で設定するか、アートボードから生成するかを選択できます。

すべてのスライスを 1 つのマルチページ PDF として書き出すには、ファイル > スライスを PDF として書き出す に進みます。

Sketch から書き出した PDF は、Illustrator ファイルと同じ方法では編集できません。

このファイルを Web ディレクトリに配置すれば、Imgix の API と組み合わせて使用する準備が整います。

概要

• 書き出し > アートボードからスライスを作成
• ファイル > スライスを PDF として書き出す