【Affinity Designer】アートボードから画像を書き出す

TOMIX編集部

TOMIX編集部

株式会社トミックス

Affinity Designer 基礎テクニック第5回目です。
今回はアートボードの使い方の続き、アートボードの書き出し方をご紹介します。

アートボードの作成方法に関しては、前回の記事をご参照ください。

まず、各アートボードごとの内容をファイルを書き出すには、「書き出しペルソナ」という機能を使います。
書き出しペルソナは Affinity Designer 独自の機能ですが、要点さえ分かれば直感的に扱える機能かと思います。
今回の内容はすべてこの書き出しペルソナを使って解説していきます。

アートボードの書き出し方:複数のアートボードを一斉に

image5_1

まずはアートボードを複数作成した状態で、左上の「書き出しペルソナ」をクリックします。

image5_1_1

書き出しペルソナを選ぶと、下図のように各アートボードのステータスが透過表示されるようになります。

image5_1_0

スタジオ内のスライスパネルを見てみると、各アートボードがグループ分けされております。
ここでスライスパネル左側に表示されている、右向きの三角形をクリックしてみます。

image5_1_2

すると下図のようにサブメニューが展開され、各アートボードの書き出し内容の詳細が見られます。

ここで注目していただきたいのは「PNG」という表示と、「1x」という表示の部分です。
これらはそれぞれ書き出し時の「ファイル形式」と「画像の解像度」を表しており、任意の形式・値に変更することができます。
今回はひとまず初期値のまま書き出していきたいと思います。

image5_1_3

書き出しの前に、スライスパネル右側に表示されているチェックボックスを確認します。
一気に書き出す際は、この部分にチェックが入っているアートボードが対象となります。
もし一斉書き出しの対象から除外したい場合は、ここのチェックを外してあげればOKです。

image5_1_4

書き出したいアートボードにチェックが付いていることを確認したら、スライスパネル右下にある「スライスを書き出し(3)」をクリックします。

image5_1_5

エクスプローラーが立ち上がるので、書き出したファイルの保存先となるディレクトリを選択し、エクスポートをクリックします。

image5_1_6

これで複数のアートボードから内容を書き出し、ファイルを一斉に生成することができました。

image5_1_7

アートボードの書き出し方:一つのアートボードから複数のファイル形式で

image5_2

先ほどは全部のアートボードの内容を一斉に書き出しましたが、今度は一つのアートボードのみ書き出してみましょう。

書き出したいアートボードのサブメニューを展開すると、下図の位置に「+」が表示されているので、これをクリックしてみます。

image5_2_1

これによって、アートボードが書き出すファイル形式や解像度の設定項目が一つ増えたことが確認できます。
次に、増えた設定項目の中のファイル形式をクリックします。下図では「PNG」と書かれた部分です。

image5_2_2

プルダウンメニューが展開し、書き出せるファイル形式が一覧で表示されますので、今回は「JPG(高品質)」を選択します。

image5_2_3

これでアートボード1からPNG形式とJPG形式のファイルを書き出す準備ができました。
次にチェックボックスの右側に表示されているアイコンをクリックします。

image5_2_4

あとの流れは一斉に書き出す際と同様です。
エクスプローラーが立ち上がるので、書き出したファイルの保存先となるディレクトリを選択し、エクスポートをクリックします。

image5_2_5

これで一つのアートボードから複数の形式でファイルを一斉に書き出すことができました。

image5_2_6

アートボードの書き出し方:一つのアートボードから一つのファイル形式で

image5_3

先ほどの、アートボードが書き出すファイル形式や解像度の設定項目を、一つ増やした段階からスタートです。
今度は設定項目の中、解像度の項目の右側にあるアイコンをクリックします。

image5_3_1

あとはこれまでと同様、保存先を選んでエクスポートするだけです。

image5_2_5

これで一つのアートボードから一つの形式でファイルを書き出すことができました。

image5_3_2

最後に

これで書き出しペルソナという機能がいかに便利であるか、お判りいただけたかと思います。
今回の要領でいけば、一つのアートボードから大中小3種類の解像度の画像を書き出したり、SVGとPNGを同時に書き出したりすることもできます。

やはりWEBサイトのデザインとなると、たくさんの画像が必要になったり、後からファイル形式を変更しなきゃならなくなったり…といった手間が発生しがちです。
そんな時もこの書き出しペルソナがあれば、一括保存も個別保存も臨機応変に対応できるので、保存時の手間は大幅に削減できると思います。

TOMIX編集部

TOMIX編集部

株式会社トミックス