Mac版Affinityで同じ背景を使ったバリエーションを一括書き出しするには、完成版ごとにアートボードを作成し、繰り返し使う背景にはシンボルを使用して、スライススタジオからアートボードのスライスをまとめて書き出します。

このワークフローは、たとえば背景が同一の幾何学模様のカードデザインを3種類など、完成したグラフィックを個別に必要とする場合に適しています。現在のAffinityデスクトップ版ヘルプに沿っており、そこでは「ベクタースタジオ」と「スライススタジオ」という名称が使われています。Affinityの説明によると、スライススタジオは複数のアセットを一度の操作で書き出すための作業スペースです。スライススタジオ

バリエーションのグループごとに書き出すと背景が含まれないことがある理由

重要なのは、スライスにどのようなコンテンツが含まれるかです。Affinityによると、「書き出しレイヤー」パネルの項目から作成したスライスには、そのソースレイヤーに属するコンテンツだけが含まれます。「スライスツール」で描画したスライスには、その範囲内にあるすべての表示レイヤーのコンテンツが含まれます。スライススタジオを使って書き出す

そのため、前景のバリエーショングループからスライスを作成しても、ドキュメント内の別の場所にある独立した背景レイヤーが自動的に組み合わされることはありません。また、1つのコンポジション上に複数のスライスを重ねて描画しても、書き出しごとに異なる表示状態の組み合わせが設定されるわけではありません。説明されている動作では、それぞれの範囲内にある表示コンテンツが含まれます。これは2種類のスライス動作から生じる実用上の結果であり、独立したバリエーション生成機能ではありません。

一括書き出しを確実に行うには、前景と背景のインスタンスを含む完全なアートボードをバリエーションごとに用意します。Affinityのシンボルを使えば、背景をリンクしたまま編集でき、複数のアートボードにまたがって変更を同期できます。シンボル

最初の配置 このワークフローでの準備
複数の前景グループが1つの背景に重なっている それぞれの前景を個別のアートボードに移し、そこに背景シンボルのインスタンスを配置します。
完成したデザインを含むアートボードがすでに別々にある 背景のインスタンスを確認し、アートボードのスライスを書き出します。
表示の切り替えでバリエーションを見せる1つのコンポジション 一括書き出しの前に、完成したアートボードを個別に組み立てます。
アートボードを準備せず、必要なファイルが少数だけ 表示状態の組み合わせごとに個別に書き出し、その都度書き出し範囲を確認します。

公式のスライス手順では、範囲や項目の書き出し方法が説明されていますが、同階層のすべてのバリエーショングループを指定の背景と自動的に組み合わせる機能は記載されていません。アートボードをこのように配置すれば、組み合わせを明示的に指定できます。

背景をリンクした状態で完全なバリエーションを作成する

最初のアートボードを作成する

まず、意図する出力比率で完成したコンポジションを1つ作成します。新規ドキュメントの場合は、「ファイル」>「新規」を選択し、プリセットを選ぶかカスタム設定を入力して、「アートボードを作成」を有効にし、「作成」をクリックします。既存のドキュメントにもアートボードを追加できます。アートボードの追加と削除

例として、circle、square、triangleという名前の800 × 800 pxのカードを3枚作成します。それぞれに淡い色の背景の長方形と前景の図形を1つ配置します。これらのサイズと名前は例であり、Affinityの必須要件ではありません。

背景と前景は、レイヤーパネルでアートボードの階層内に配置します。背景オブジェクトまたはグループを前景グループの下に置くと扱いやすくなります。背景は意図する出力範囲を覆うようにし、背景の装飾要素も同じ背景グループに含めます。

共通の背景だけをシンボルにする

背景オブジェクトまたはグループを選択し、「レイヤー」>「シンボルを作成」を選ぶか、シンボルパネルの「作成」をクリックします。Affinityでは、選択したオブジェクトやグループからシンボルを作成できます。シンボル

バリエーションごとに異なる図形は、このシンボルの外に置きます。前景オブジェクトを同期シンボルの内部に置くと、編集時の変更がほかのインスタンスにも反映される場合があります。共通部分には、繰り返し使うコンテンツだけを含めてください。

アートボードを複製して前景を変更する

完成したアートボードを選択し、「編集」>「複製」>「選択範囲」を選びます。Macでは、移動ツールまたはアートボードツールを使ってアートボードをCommandキーを押しながらドラッグして複製する方法もAffinityで案内されています。キャンバス上部またはレイヤーパネルでアートボード名をダブルクリックし、名前を変更します。アートボードの追加と削除

それぞれの複製で前景を置き換え、背景シンボルのインスタンスはそのまま残します。書き出しの準備をする前に、背景を少し編集してリンクを確認します。レイヤーパネルでシンボル項目を展開し、その中のオブジェクトを編集します。同期が有効なら、対応する背景オブジェクトが各インスタンスで更新されます。Affinityでは、複数オブジェクトのシンボル内にあるオブジェクトを編集することで変更が反映されると説明しています。シンボル

例では、ここまでで完成したカードが3枚含まれるドキュメントになります。各アートボードを個別に表示すると、それぞれに異なる図形と同じ背景デザインが配置されています。この準備によって、ファイルを書き出す前に目的の組み合わせを表示して確認できます。

アートボードのスライスをまとめて設定し、書き出す

スライススタジオを開いて完成したアートボードを選ぶ

「スタジオマネージャー」を開き、「スライススタジオ」を有効にします。初期状態では非表示になっているため、見つけるにはスクロールが必要な場合があります。スライススタジオ

「スライス」パネルでアートボードの項目を確認します。Affinityの複数アートボードの書き出し手順では、これらのアートボードスライスをそのまま使います。明示的にスライスを作成する必要がある場合は、「書き出しレイヤー」で完成したアートボードを選択し、「スライスを作成」をクリックします。組み立てたコンポジション全体をソースにするため、前景グループではなくアートボードを選びます。アートボードの書き出し、書き出しレイヤーパネル（スライススタジオ）

パネルが見つからない場合は、Macのメニューから「ウィンドウ」>「一般」>「スライス」、「ウィンドウ」>「一般」>「書き出しレイヤー」、「ウィンドウ」>「一般」>「書き出しオプション」を選びます。スライスパネル、書き出しレイヤーパネル（スライススタジオ）、書き出しオプションパネル

形式、サイズ、ファイル名を設定する

アートボードスライスを展開して、書き出し設定を確認します。Affinityでは、アートボードスライスに複数の形式や複数のサイズ倍率または絶対サイズを設定でき、書き出しファイル名も変更できます。最初の例ではPNGを選び、特定のピクセル幅が必要な場合は800wのように明示的に幅を指定します。アートボードの書き出し

「1x」が常にドキュメントに記載されたピクセル寸法と同じだとは限りません。Affinityの説明では、ドキュメントのDPIとスライスの倍率が関連しています。たとえば、64 × 64 px、144 DPIのドキュメントは、1xでは32 × 32 px、2xでは64 × 64 pxで出力されます。表示される出力寸法を確認するか、納品サイズが決まっている場合は絶対サイズを指定してください。スライススタジオを使って書き出す

最初のスライスを設定したら、「書き出し設定をクリップボードにコピー」と「クリップボードから書き出し設定を置き換え」を使って、同じ設定を別のスライスに適用します。その後、それぞれのファイル名を再確認します。これらの操作でコピーされるのは書き出し設定であり、背景と前景の組み合わせではありません。スライスパネル

対象のスライスを確認して一括書き出しする

書き出すスライス項目を有効にし、不要な項目を無効にします。不要なページ全体の項目も無効にしてください。「スライスを書き出し（n）」を実行すると、パネルでチェックされた項目がすべて書き出されます。行の選択と書き出し対象としてのチェックは別の操作です。スライスパネル

「スライスを書き出し（n）」をクリックし、保存先フォルダーを選んで「書き出し」をクリックします。1つのスライスに複数の形式やサイズを設定できるため、チェックしたアートボードが3枚でも、出力ファイルは3つを超える場合があります。たとえば、3枚のアートボードそれぞれに2種類のPNGサイズを設定すると、出力は6ファイルになります。Affinityの書き出し手順によると、一括書き出しにはチェックしたスライスに設定済みのすべての形式とサイズが含まれます。スライスの書き出し

最初の書き出しでは、アートボードごとに形式を1つ、サイズを1つだけ使います。3つのファイルをすべてFinderで開き、サイズ、背景、前景を確認してから、ほかの出力バリエーションを追加します。

書き出し形式の制約を考慮して形式を選ぶ

共通背景の配置によって各出力に含まれる内容が決まり、ファイル形式と書き出し設定によってその内容の表現方法が決まります。Affinityで使用できる操作項目は、選択した形式やプリセットによって異なります。書き出しオプションパネル

要件 関連する仕様
ベクターコンテンツを含むSVG出力 SVGの書き出しではラスタライズの設定があり、未対応のプロパティにはラスタライズが必要な場合があります。
SVG、PDF、EPSでラスタライズしない 「ラスタライズ：なし」では、未対応の要素は変換されずに省略されます。コンテンツが欠落していないか確認してください。
未対応の外観を維持する 「ラスタライズ：未対応のプロパティ」では未対応の要素がラスタライズされ、「すべて」ではすべての要素がラスタライズされます。
元のフォントがなくても表示できるSVGテキスト 「テキストをカーブとして書き出し」を使うと描画された見た目を維持できますが、テキストの編集はできなくなり、ファイルサイズが大きくなることがあります。
非常に大きなラスター出力 Affinityによると、形式の最大寸法を超える出力は収まるサイズに縮小されます。続行前に書き出しダイアログで警告が表示されます。

これらの条件はAffinityの書き出し設定で説明されています。

SVGが必要な場合は、PNGプリセットでベクター出力が設定されると思い込まず、スライス設定で形式と設定を確認してください。Affinityでは、スライスの「ファイル形式」セレクターとプリセットや倍率の設定は別々です。その設定で必要な形式や設定を選べない場合、公式に案内されている方法は書き出しダイアログを使うことです。そこでは、対応するすべての形式と完全な書き出し設定を利用できます。スライスパネル、書き出しについて

準備済みのバリエーションを1つだけこのダイアログから書き出すには、「ファイル」>「書き出し」>「書き出し」を選択し、必要な形式またはプリセットを選び、「範囲」をアートボード名に設定します。書き出す前にプレビューを確認します。選択範囲から書き出す場合、「選択範囲領域」には重なっているレイヤーが含まれますが、「選択範囲のみ」では、別途選択から除外された背景を含め、ほかの重なっているレイヤーは含まれません。書き出しダイアログ

この作業では、名前を付けたアートボードによって各出力のコンポジションを明示できます。「ドキュメント全体」に頼らず、個別ファイルを一括で作成するには、説明されている「スライスを書き出し」コマンドを使います。Affinityのアートボードのヘルプでは、「ドキュメント全体」はアートボードを連結して書き出すオプションと説明されています。アートボードの書き出し

背景の欠落や予期しない出力を確認する

形式の設定を変更する前に、ソースの構成を確認します。背景がない場合は、スライスがアートボード全体から作成されているか、背景のインスタンスがその内部にあるかを確認します。前景グループから作成したスライスに含まれるのは、そのソースのコンテンツだけです。複数のバリエーションが一緒に表示される場合は、手動で描画したスライスが、重なり合う表示状態のバリエーションすべてを含んでいないか確認します。スライススタジオを使って書き出す

また、「書き出しレイヤー」パネルの「項目を表示（書き出し）」も確認します。Affinityでは、これを「項目を表示」と区別しています。画面上での項目の表示状態と書き出し時の表示状態は別々に設定されます。親の設定が子オブジェクトに影響する場合もあります。書き出しレイヤーパネル（スライススタジオ）

コンポジションは正しくてもファイル名、数、サイズが予想と異なる場合は、チェック済みのスライス項目を確認し、形式とサイズの行を展開します。意図しない出力を削除してから、もう一度書き出します。編集を繰り返す場合は、「スライスを書き出し（n）」を一度実行すると、「連続」によって変更後にチェック済みのスライスを書き出せます。なお、書き出し先フォルダーが記憶されるのは現在の編集セッション中のみです。スライスの書き出し

確認を終える目安は、それぞれのファイルに意図した前景が1つと、共通背景全体が含まれていることです。ソースドキュメントでは背景のリンクを維持し、各バリエーションをアートボード上で完成させ、次回以降の書き出しにもチェック済みのスライス設定を使います。

出典