Adobe Illustrator CC forLuckyTemplatesチートシート

Illustratorの使用方法における最も劇的な変化の多くは、ベクター画像をWebに変換する領域で行われており、過小評価されているSVG形式がそのプロセスの重要なリンクです。SVGファイルは、ベクターアートワークの貴重なスケーラビリティ機能を維持し、WebサイトおよびWeb開発環境でほぼ普遍的にサポートされています。Web用のベクターアートワークを準備するときは、Illustratorの標準的な効果を避け、代わりにSVGフィルターを使用することが重要です。

Illustratorには、まともでありながら最小限のSVGフィルターのセットが付属していますが、SVGフィルターを見つけて追加する方法に関するヒントと、独自のSVGフィルターを作成するためのリソースを以下に示します。Webおよびアプリの開発者と協力している場合は、SVGコードを渡すためのチートシートを確認して、生活をより簡単で生産的にしてください。

IllustratorでSVGフィルターを適用する方法

Illustratorで画面用のSVGファイルを作成し、効果（ドロップシャドウなど）を適用する場合は、それらをSVGフィルターとして適用する必要があります。そうすれば、SVGファイルは歪みなしで無限のスケーラビリティを維持します。

次の手順では、IllustratorのグラフィックにSVGフィルターを適用する手順を説明します。

フィルタを適用するオブジェクトを選択します。

[効果]→[SVGフィルター]を選択します。

表示されるリストからフィルターを選択します。
ほとんどのフィルターにはわかりやすい名前が付いています。たとえば、名前に影が含まれているものはドロップシャドウであり、名前にガウスが含まれているものはガウスぼかしです。ワークフローは少し奇妙で回りくどいですが、最初にフィルターを選択して、フィルターを適用するために使用できるすべてのオプションにアクセスする必要があります。

選択したフィルターを変更するには：

• フィルタが適用されたオブジェクトを選択したままにし、[ウィンドウ]→[外観]を選択して[外観]パネルを開きます。
• [外観]パネルで、パネルの[塗りつぶし]セクションに表示されるSVGフィルターをクリックします。[SVGフィルターの適用]パネルが開きます。
• [SVGフィルターの適用]パネルで、適用されたフィルターを変更します。
• フィルタがどのように表示されるかを確認するには、図に示すように、[プレビュー]チェックボックスをオンにします。
  

フィルタを決定したら、[SVGフィルタの適用]パネルで[OK]をクリックします。

IllustratorにSVGフィルターを追加する方法

IllustratorのSVGフィルターのセットは最小限ですが、独自のフィルターを設計するか、オンラインソースからパッケージ化されたSVGフィルターのセットをダウンロードすることで拡張できます。フィルタの設計にはコーディングが含まれますが、HTMLに慣れている場合は実行可能です。SVGフィルターを作成するには、w3Schoolsのチュートリアルをお勧めします。または、オンラインでフィルターのセットを購入したり、Creatingoで無料のSVGフィルターの素敵なセットを見つけたりすることもできます。

独自のSVGフィルターを購入または作成した後、Illustratorにそれらをインストールする方法は次のとおりです。

「効果」→「SVGフィルター」→「SVGフィルターのインポート」を選択します。

開いたダイアログで、無料で作成またはダウンロードしたSVGフィルターファイルに移動してダブルクリックします。
探しているファイルはSVGファイルである必要があります（複数のフィルターが単一のSVGファイルにバンドルされています）。
新しいフィルターがSVGフィルターサブメニューで利用できるようになりました。

[効果]→[SVGフィルター]を選択して、選択したオブジェクトに新しいフィルターを適用します。

Illustratorから開発者にSVGコードを渡す方法

多くの場合、Illustratorで作成したSVGグラフィックは、ゲームデザイナー、アニメーター、インフォグラフィック、またはその他の出力に渡され、開発者はSVGグラフィックの背後にあるコードを操作します。イラストレーターとして、そのコードを作成する方法を知る必要はありませんが、コードを取得して開発者に引き渡す方法を知る必要があるかもしれません。方法は次のとおりです。

SVGグラフィックをコードとしてエクスポートするための経路は、Illustratorの保存機能を介して実行されます。[保存]メニューには、ファイルをSVGコードとしてエクスポートするオプション（見つけるのは簡単ではありません）があります。コードの使用方法によっていくつかのオプションが決定されるため、コードを生成するときに、画面開発者とリアルタイムで通信することをお勧めします。

[ファイル]→[保存]（またはファイルを再保存する場合は[名前を付けて保存]）を選択します。

開いたダイアログで、[フォーマット]メニューから[SVG]を選択します。
ブラウザに表示されない圧縮ファイル用のSVGZファイルオプションは無視してください。

[保存]をクリックして、[SVGオプション]ダイアログを開きます。

[SVGプロファイル]ドロップダウンで常に[SVG1.1]を選択してください。他のバージョンは廃止されました。

SVGファイルに画像を埋め込みまたはリンクしている場合は、[画像の場所]ドロップダウンから[埋め込み]を選択します。ただし、最初にこの選択についてWeb開発者に相談してください。

ファイルをIllustratorで編集可能にするには、[Illustratorの編集機能を保持する]を選択します。
この選択によりファイルサイズが増加しますが、編集、更新、およびWeb開発者との共有が可能な単一のSVGファイルを操作できます。

[その他のオプション]ボタンが表示されている場合は、それをクリックして詳細オプションにアクセスします。そしてあなたの選択をします。
基本的に、さまざまなオプションにより、次の方法でプロパティを定義するファイルでCSSが生成されます。これらのCSSプロパティを定義する方法については、Web開発者のチームメイトに相談してください。

• プレゼンテーション属性は、SVGコードにスタイルを埋め込みます。このオプションは最も単純でデフォルトです。Webまたはアプリの開発者と共同作業を行っていない場合は、これを使用してください。
• 2つのスタイル属性オプションは、可能な場合はCSSに依存してスタイルを管理します。
• Style Elementsは、スタイリング用のクラススタイルセレクターを生成します。
• [未使用のスタイルを含める]オプションは、機能的な値を追加せずにSVGファイルサイズを増やす可能性のあるコードを生成します。

開発者パートナーから選択を要求されない限り、[SVGオプション]ダイアログの下部にある5つのチェックボックスの選択を解除します。
これらのオプションは、高度に専門化されたアプリケーション向けです。

[SVGオプション]ダイアログでの選択に基づいてSVGコードを生成するには、[ SVGコード]ボタンをクリックします。
生成されたSVGコードは、オペレーティングシステムのテキストエディタに表示されます。オペレーティングシステムのテキストエディタを使用して、そのコードをテキストファイルとして保存し、そのファイルを開発者に渡すことができます。

コードを生成したら、[OK]をクリックしてファイルを保存します。
Illustratorでこのファイルを再度開いて編集できます。