Vector Studioでアイコンごとに正方形のアートボードを1つ作成し、Slice Studioを使って必要なサイズのファイルを個別に書き出します。このMacでのワークフローでは、アートボードの寸法を統一する方法、分かりやすい名前の付け方、スライスの書き出しに影響するドキュメントのDPI設定を説明します。

これらの手順は、Vector StudioとSlice Studioを使用する現行のAffinityデスクトップヘルプセンターのインターフェイスに沿っています。目的は、1つのドキュメント内に小さなアイコンセットを作り、各アイコンを個別に書き出すことです。Affinityのヘルプでは、Vector Studioのアートボードツールと、Slice Studioを使って複数のアートボードを同時に書き出す方法が説明されています。アートボードツール、アートボードの書き出し。

別々のアートボードが必要な違いを見極める

異なるアイコンの図形ごとにアートボードを1つ使います。この例では、円、正方形、ひし形という3つのシンプルな幾何学アイコンを、それぞれ別の64 × 64 pxのアートボードに作成します。目に見える図形がキャンバスより小さくても、描画領域はすべて同じ寸法になります。

同じ図形を複数のサイズで書き出すだけなら、1つのアートボードにまとめ、書き出しサイズを複数設定します。Affinityでは、各スライスの書き出し設定で複数の形式とサイズを指定できます。図形を個別に編集したい場合は、別々のアートボードが便利です。たとえば、小さいサイズ用に余白を変えた簡略版を作る場合です。これは書き出し機能を踏まえたデザイン上の選択であり、Affinityで必須とされているものではありません。スライスパネル。

要件 推奨する設定
キャンバス寸法が同じ3つの異なるアイコン 同じサイズのアートボードを3つ
変更のない図形を複数サイズで書き出す 複数の書き出しサイズを設定した1つのアートボード
小さいサイズ用に異なる図形が必要なアイコン 修正版の図形用に別のアートボード
確認用にアイコンを1つだけ書き出す ［書き出し］ダイアログで名前を指定したアートボード

この例では、アートボードを3つ作り、それぞれからPNGを2サイズ（64 × 64 pxと128 × 128 px）書き出します。出力ファイルは合計6つです。このように出力数を決めておくと、書き出し後に具体的な項目を確認できます。

最初のアイコン用アートボードを正確に作る

Vector Studioで［ファイル > 新規］を選びます。［ドキュメントの単位］をピクセルに、［ページ幅］と［ページ高さ］を64 pxに設定し、この例では［DPI］を72にします。背景を透明にする場合は［背景を透明にする］を有効にし、ドキュメントの作成前にアートボードのオプションも有効にします。新規ドキュメントのヘルプでは、このオプションは［アートボード］と表記されています。アートボードに関する手順では［アートボードを作成］と表記されています。新規ドキュメントの作成、アートボードの追加と削除。

DPIを72に設定するのには理由があります。AffinityのSlice Studioのドキュメントでは、64 × 64 px、72 DPIのドキュメントを、1xでは64 × 64 px、2xでは128 × 128 pxで書き出す例が示されています。ドキュメントのDPI設定によっては、スライスの倍率と書き出されるピクセル寸法の関係が変わります。Slice Studioを使った書き出し。

既存のドキュメントを使う場合は、Vector Studioで［アートボードツール］を選択します。カスタム寸法を正確に指定するには、Mac向けの手順に従い、ツールを選択した状態でページ上をCommandキーを押しながらクリックし、［アートボードを作成］ダイアログに寸法を入力します。ツールのコンテキストツールバーには［W］、［H］、［サイズ］、［アートボードを挿入］の各コントロールもあります。アートボードの追加と削除、アートボードツール。

納品物で正確なピクセルサイズが必要な場合は、ドラッグでキャンバス寸法を見積もらないでください。ドラッグしてアートボードを作成する方法も使えますが、数値を入力すれば必要な寸法が明確になります。また、アートボードツールは直接選択してください。現行のヘルプには、このツールに既定のキーボードショートカットがないと記載されています。アートボードの追加と削除、アートボードツール。

同じ寸法のアートボードを追加し、内容を整理する

確認しやすくするため、アイコンを描く前に残りのアートボードを作ります。最初の空のアートボードを選択し、［編集 > 複製 > 選択範囲］を選びます。複製したアートボードを別の場所に移動し、3つ目のアートボードも同様に作成します。Affinityのヘルプには、移動ツールまたはアートボードツールで選択したアートボードをCommandキーを押しながらドラッグして複製する方法も記載されています。アートボードの追加と削除。

見やすいようにアートボードを横一列に並べます。アートボードツールの［間隔］コントロールでは、複製したアートボードの配置を調整できます。また、別のアートボードの近くに移動するときのスナップ方法にも役立ちます。この間隔は作業領域の整理に使うもので、アイコンのキャンバスは64 × 64 pxのままです。アートボードツール。

アートボードの名前をcircle、square、diamondに変更します。ペーストボード上のアートボード名をダブルクリックするか、レイヤーパネルでその名前をダブルクリックします。短い名前を付けておくと、後で各アートボードと書き出し項目を照合しやすくなります。アートボードの追加と削除。

各アートボード内に対応する図形を描き、プロジェクトに必要な余白を設けます。レイアウトの例として、64 pxの正方形キャンバスの中央に40 × 40 pxの図形を配置すると、各辺に12 pxの余白ができます。（64 − 40）÷ 2 = 12。これはレイアウト例であり、Affinityのプリセットや、すべてのアイコンに共通する仕様ではありません。

作業中はレイヤーパネルを確認し、各アイコンのオブジェクトが対応するアートボードに属していることを確かめます。Affinityでは、アートボード内に作成したオブジェクトは、既定でアートボードの内側にクリップされます。また、内容を別のアートボードに移動すると、レイヤースタック内の親が変わります。レイヤー階層を見れば、どのアートボードに各図形が属しているか確認できます。アートボードの内容を移動する。

この所属関係は書き出し時にも重要です。レイヤーを書き出しから作成したスライスには、元のレイヤーの内容だけが含まれます。スライスツールで作成したスライスには、その範囲内にあるすべての表示レイヤーの内容が含まれます。アイコンのキャンバスを統一するには、アートボード全体を基準にスライスを作成し、各図形を対応するコンテナ内に配置します。Slice Studioを使った書き出し。

Slice Studioでアイコンを個別に書き出す設定をする

［スタジオマネージャー］から［Slice Studio］を有効にします。Affinityのアートボード書き出し手順では、アートボードのスライスはあらかじめスライスパネルに表示されています。各アートボードの項目を展開して、出力を設定します。パネルが表示されていない場合は、［ウィンドウ > 一般 > スライス］を開きます。アートボードの書き出し、スライスパネル。

アートボードにスライスが必要な場合は、［ウィンドウ > 一般 > レイヤーを書き出し］を開き、アートボードを選択して［スライスを作成］をクリックします。キャンバス全体を書き出すには、アートボード全体を選択します。アイコンのオブジェクトだけを選択すると、そのオブジェクトがスライスの対象になります。レイヤーを書き出しパネル（Slice Studio）。

最初のアートボードのスライスを次のように設定します。

  1. ［スライス］パネルでその項目を展開し、ファイル形式にPNGを選びます。
  2. 1xの書き出しサイズを設定します。
  3. サイズ項目の下にある字下げされた［+］を使い、2xの書き出しサイズを追加します。
  4. ファイル名を確認し、circle-64やcircle-128のように、2つのサイズで異なる出力名になるようにします。
  5. 残りのアートボードのスライスにも同じ設定をします。Affinityのヘルプでは、スライスのコントロールから追加形式や複数サイズを指定し、書き出しファイル名を設定する方法が説明されています。スライスの書き出し、アートボードの書き出し。

アイコンが多い場合は、1つのスライスを設定してから、［書き出し設定をクリップボードにコピー］と［クリップボードから書き出し設定を置き換え］を使うと、形式と倍率の設定を別の選択済みスライスに適用できます。その後、適用先のファイル名を確認します。これにより、名前を意識して確認しながら、繰り返しの設定作業を減らせます。スライスパネル。

目的のアートボードスライス3つにチェックが入っていることを確認します。ページ全体またはすべてのアートボードを表す不要な［ページ］項目があれば、チェックを外します。［スライスを書き出し（n）］をクリックし、保存先フォルダーを選んで書き出します。一括書き出しボタンは、パネル内でチェックされた項目を書き出します。行を選択しただけでは一括書き出しの対象になりません。スライスパネル。

寸法と、ヘルプに記載された書き出し時の制約を確認する

アイコンをさらに増やす前に、この例の6つの出力ファイルを確認します。各ファイルにアイコン全体が1つ含まれていること、キャンバス寸法が意図した64 × 64 pxまたは128 × 128 pxであること、ファイル名から図形とサイズを判別できることを確認します。図形だけでなく、その周囲の余白も見直します。

寸法が異なる場合は、ドキュメントのDPIとスライスの倍率を合わせて確認します。Affinityが公開している例では、64 × 64 pxのドキュメントについて次の結果が示されています。

ドキュメントのDPI 1xの出力 2xの出力 3xの出力
72 64 × 64 px 128 × 128 px 192 × 192 px
144 32 × 32 px 64 × 64 px 96 × 96 px

これらの値は、AffinityのDPI表に記載されています。同じ「1x」という表示でも、ドキュメントのDPIによってピクセル寸法が異なることが分かります。Slice Studioを使った書き出し。

Affinityでは、100wのような絶対サイズのスライスも設定できます。正方形のアートボードで幅を明示する必要がある場合は、絶対幅の書き出し設定を使う方法もあります。その場合は、書き出し後の高さも確認してください。この例の1xと2xの関係をそのまま使う場合は、上記の72 DPI設定を維持します。アートボードの書き出し。

確認用に1つだけ書き出す場合は、［ファイル > 書き出し > 書き出し］を選び、［領域］で名前を付けたアートボードを選択します。［ドキュメント全体］については、ドキュメント間で説明に食い違いがあります。アートボードの書き出しページでは連結された出力と説明されていますが、［書き出し設定］では、形式に応じてアートボードごとの画像またはPDFページと説明されています。この記事のように複数のファイルを一括で個別に書き出す場合は、明確に手順が示されているSlice Studioの方法を使います。アートボードの書き出し、書き出し設定。

図形が書き出されていない場合は、アートボードへの所属と、レイヤーを書き出しの［書き出しで項目を表示］の両方を確認します。このコントロールは通常の表示設定とは別です。後日ドキュメントを開き直す場合は、保存先も改めて確認してください。Affinityのヘルプによると、スライスの書き出し先フォルダーが記憶されるのは、現在の編集セッション中だけです。レイヤーを書き出しパネル（Slice Studio）、スライスの書き出し。

アートボード3つの例で、意図した寸法と正しいファイル名のファイルが6つ書き出せたら、同じ設定を残りのアイコンセットにも適用します。異なる図形ごとにアートボードを1つ使い、確認済みの書き出し設定を再利用します。キャンバスサイズや書き出し要件を変更したら、その都度出力を確認します。

参照資料