Adobe Illustrator ファイルのインポート

Microsoft Expression Blend プロジェクトで開いているドキュメントに PDF 互換の Adobe Illustrator ファイル (.ai) を直接インポートできます。

Illustrator ファイルを Expression Blend にインポートすると、Illustrator のレイヤー、グループ、オブジェクトが、関連プロパティ付きで Expression Blend のコンテナーとオブジェクトに変換されます。Illustrator オブジェクトが Expression Blend にインポートされるしくみを理解しておくと、Illustrator ファイルを Expression Blend プロジェクトにすばやく効率的に統合できます。

Illustrator でファイルを保存するときに、Illustrator の [オプション] ダイアログボックスにある [PDF 互換ファイルを作成] チェックボックスをオンにしてください。この処理を行わないと、Illustrator ファイルを Expression Blend にインポートできません。

[PDF 互換ファイルを作成] チェックボックス

Illustrator ファイルをインポートするには

.ai ファイルのインポート先のドキュメントを開きます。
[ファイル] メニューで、[Adobe Illustrator ファイルのインポート] をクリックします。
[Adobe Illustrator ファイルのインポート] ダイアログボックスで、インポートする Illustrator ファイルを見つけて、[開く] をクリックします。
[OK] をクリックします。

インポートしたファイルと同名の新しい Canvas オブジェクトがドキュメントに追加されます。[オブジェクトとタイムライン] パネルで、Canvas オブジェクト (この例では AvatarSymbols という名前のオブジェクト) の下に、Expression Blend オブジェクトとしてインポートされた Illustrator オブジェクトがすべて表示されます。イメージを .ai ファイルの一部としてインポートした場合は、[プロジェクト] パネルのルートフォルダー内に、変換後のイメージファイルがすべて入った新しいフォルダー (この例では AvatarSymbols_Images という名前のフォルダー) が作成されます。

メモ :
プロジェクトにイメージが関連付けられていない場合は、[プロジェクト] パネル内にフォルダーは作成されません。

Adobe Illustrator ファイルを Expression Blend にインポートする

.ai ファイルに関連付けられているイメージを保存するために、[プロジェクト] パネル内にカスタムフォルダーを作成することもできます。

カスタムのイメージフォルダーを作成するには

[プロジェクト] パネルで .csproj ファイルを右クリックして、[新しいフォルダーの追加] をクリックします。
フォルダー名ボックスに新しいフォルダーの名前を入力します。
[プロジェクト] パネルで新しいフォルダーを選択した状態で、「Illustrator ファイルをインポートするには」の手順に従って、Illustrator ファイルをインポートします。

レイヤー、グループ、およびオブジェクト

Illustrator のレイヤーとグループは、パスやイメージを入れ子状にした XAML Canvas オブジェクトとして Expression Blend にインポートされます。入れ子状の Canvas オブジェクトをレイアウトコンテナーとして使用すれば、Expression Blend でこれらを簡単に操作できます。インポート後の Illustrator ファイルの操作方法については、以下の情報を参照してください。

レイヤー名

上位グループのレイヤー (前出の画像の Avatars) のレイヤー名は維持されます。Expression Blend に Illustrator ファイルをインポートした後に、このレイヤー名を変更できます。変更するには、[オブジェクトとタイムライン] パネルで目的のオブジェクトを右クリックして [名前の変更] をクリックするか、オブジェクト名をダブルクリックしてオブジェクト名フィールドに直接名前を入力します。

ファイル構造とグループ

Illustrator のグループは PDF 互換ファイルには存在しないため、Expression Blend にもインポートされません。ただし、Illustrator のグループ内のオブジェクトは、Illustrator グループの構造を維持したまま個々のオブジェクトとしてインポートされます。

オブジェクトの種類

Illustrator で作成したイメージは PNG ファイルとしてインポートされ、[プロジェクト] パネルのイメージフォルダーに追加されます。[オブジェクトとタイムライン] パネルには Image オブジェクトとして追加されます。テキストオブジェクトとベクトルオブジェクトは編集可能なパスとしてインポートされ、[オブジェクトとタイムライン] パネルに表示されます。

表示設定とロック設定

Expression Blend にインポートされた Illustrator レイヤーの表示設定は維持されます。ただし、インポートされるのはレイヤー内で表示されているオブジェクトだけです。Expression Blend に特定の種類のオブジェクトだけをインポートする場合は、Illustrator で各レイヤー内のオブジェクトの表示設定を変更しておきます。

ロック設定は無視されます。

編集可能なコンテンツ

インポートしたコンテンツが編集可能なコンテンツの場合は、Expression Blend でオブジェクトのプロパティを変更して、コンテンツの外観を変更できます。次に、Expression Blend で編集できる Illustrator の要素について説明します。Expression Blend でオブジェクトのプロパティを変更する場合は、「説明」列で該当するプロパティを確認してください。

Illustrator の要素	Expression Blend の要素 (XAML)	説明
グループ	Canvas	Illustrator のグループは無視されます。ただし、グループのコンテンツは個々のオブジェクトとしてインポートされ、[オブジェクトとタイムライン] パネルに表示されます。
テキスト (文字オブジェクト)	Canvas	Illustrator の文字オブジェクトは TextBlock という名前の Canvas オブジェクトとして、テキストは Path オブジェクトとしてインポートされます。テキストスタイルは個別の Path オブジェクトとしてインポートされます。たとえば、Strikethrough スタイルが適用された 5 文字の単語は、単語を形成する文字ごとに 1 つずつ、さらに Strikethrough スタイル用に 1 つの、計 6 つのパスを持つ Canvas オブジェクトとしてインポートされます。
線	Path	Illustrator の線はパスとしてインポートされます。Stroke のプロパティは、Expression Blend では [プロパティ] パネルの Stroke ブラシに割り当てられます。
べた塗り	Path	Illustrator のべた塗りは Path としてインポートされます。元の Fill プロパティは、Expression Blend では [単色ブラシ] に適用されている Color プロパティに割り当てられます。 [単色ブラシ] のプロパティは、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。
線形グラデーション塗り	Path	Illustrator の線形グラデーション塗りは Path としてインポートされます。元の Fill プロパティは、Expression Blend では [グラデーションブラシ] に適用されている [線状グラデーション] ブラシのプロパティに割り当てられます。 [線状グラデーション] ブラシのプロパティは、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。
円形グラデーション塗り	Path	Illustrator の円形グラデーション塗りは Path としてインポートされます。元の Fill プロパティは、Expression Blend では [グラデーションブラシ] に適用されている [放射状グラデーション] ブラシのプロパティに割り当てられます。 [放射状グラデーション] ブラシのプロパティは、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。
イメージレイヤー	Image	Illustrator のイメージオブジェクトは、Image オブジェクトとして Expression Blend にインポートされます。また、PNG ファイルがプロジェクトに追加されます。この PNG ファイルが、Image オブジェクトのソースとなります。
カスタム塗り	OpacityMask (ImageBrush に適用)	Illustrator では、1 つのオブジェクトに複数の塗りを設定できます。Illustrator で 2 つ目の塗りを適用し、この塗りにアルファチャネルを設定した場合、この塗りは ImageBrush に適用された OpacityMask としてインポートされます。Expression Blend で最適な結果を得るためには、Illustrator ファイルで不透明度マスクとして使用する塗りを 1 つだけに抑える必要があります。 OpacityMask プロパティは、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。また、PNG ファイルがプロジェクトに追加されます。この PNG ファイルが、ImageBrush のソースとなります。メモ : 2 つ目の塗りがオブジェクトに適用されているかどうかを確かめるには、Illustrator の [アピアランス] パネルでオブジェクトのプロパティをチェックします。
クリッピングマスク	Clip プロパティ	Illustrator のクリッピングマスクは、Clip プロパティとしてインポートされます。 Clip プロパティは、[プロパティ] パネルの [その他] カテゴリに表示されます。メモ : Clip プロパティは、Windows Phone プロジェクトでサポートされますが、一部機能に制限があります。

Expression Blend でサポートされる Illustrator 機能

Expression Blend では、次の Illustrator 機能をサポートしています。Expression Blend で編集できる機能については、その旨を記載しています。

メモ :
Expression Blend では以下の Illustrator 機能をサポートしていますが、最高の出力を得るためには、Illustrator ファイルに含めるベクトルアートを 1 つだけに抑える必要があります。

テキスト

Illustrator からインポートされたテキストレイヤーはキャンバスに変換され、個々の文字はこのキャンバスの子として別のパスオブジェクトになります。テキストの外観は維持されますが、インポート後はテキストとして編集できなくなります。

1 つのテキストレイヤーにハードリターンが含まれている Illustrator ファイルを Expression Blend にインポートすると、段落ごとに個別のキャンバスオブジェクトしてインポートされます。

重要 :
Illustrator{\f11 からテキストをインポートするときに、予期しない結果が発生することがあります。}このような結果には、予期しない文字の回転、カーニング、ポイントサイズ、配置などが含まれます。

文字スタイル

Illustrator の以下の文字効果を Expression Blend にインポートすると、個別にパスが作成されます。

Subscript
Superscript
StrikeThrough
Underline
SmallCaps
AllCaps

効果

効果は Expression Blend でサポートされますが、編集はできません。効果はラスタライズされ、Image オブジェクトとしてインポートされます。PNG ファイルはイメージオブジェクトのソースとして使用され、[プロジェクト] パネル内に作成されたフォルダーに格納されます。

グラデーション

Expression Blend では、線形グラデーションと円形グラデーションをインポートして編集できます。カラーの分岐点はグラデーションブラシとしてインポートされ、Expression Blend ではグラデーションの適用先オブジェクトの Fill プロパティになります。透明度の分岐点もグラデーションブラシとしてインポートされ、OpacityMask プロパティに設定されます。

線

カスタムの線は個別のパスとしてインポートされます。

Illustrator ファイルを PDF 互換形式で保存すると、線と塗りがそれぞれ別のパスとして保存されます。PDF 互換ファイルを Expression Blend にインポートした場合も、同じオブジェクト上の線と塗りがそれぞれ別のオブジェクトとしてインポートされることがあります。ただし、線と塗りが同じである場合は、Expression Blend へのインポート時に 1 つのオブジェクトとして結合されます。