【Affinity Designer】アートボードを書き出すと画像サイズが1px広がる問題

TOMIX編集部

株式会社トミックス

前回は Affinity Designer の書き出しペルソナによる、アートボードの書き出し方をご紹介しました。
非常に便利な機能なのですが、保存した画像ファイルをよく見てみると、なぜか画像サイズ(解像度)が1px広がっていたことはありませんか?

image6_1

今回はこの事象が起こる理由と、その対処法についてご紹介していきます。

画像サイズが1px広がる理由とは

まずは書き出しペルソナから「デザイナーペルソナ」に切り替えましょう。
デザイナーペルソナに切り替えると、メインのベクターデータの編集画面に戻ることができます。

image6_1_1

次に、レイヤーパネルから該当のアートボードを選択し、スタジオ内の「変形」パネルを見てみましょう。
(変形パネルが見当たらない場合は、表示>スタジオ>変形 にチェックが入っているか確認しましょう)

image6_1_2

変形パネル内の「W:」はアートボードの横のサイズ、「H:」は縦のサイズをそれぞれ表しています。
まずはここの値が、実際に書き出された画像のサイズと合っているか確認しましょう。

image6_1_3

WとHの値に相違がない場合は、「X:」と「Y:」の値に注目しましょう。
この値は「選択中の要素の位置」を表しているのですが、ここに小数点以下の値が入っていると、画像サイズが1px広がる原因となってしまいます。

image6_1_4

ここまで分かれば解決方法は簡単ですね。
単純に小数点以下の値を切り捨てて、整数にしてあげれば良いのです。

image6_1_5

あとは書き出しペルソナを使ってファイルを書き出せばOKです。
これでアートボードのサイズ通り、画像をきっちり書き出すことができました。

image6_1_6

最後に

アートボードが複数あっても、ドキュメントは一つです。
どうやら書き出す際に、アートボードを「位置」と「サイズ」でスライス(切り出す)しているようなので、小数点以下の値があるとピクセル値の算出時にズレが生じるみたいですね。

もし小数点以下を消してもまだ1px増えてしまう場合は、XY値を適当にキリのいい数値に調整してあげてから、再度書き出してみてください。

今回のトラブル対処を合わせて覚えておけば、書き出しペルソナをほぼ使いこなせると思います。
WEBサイトはピクセル単位で組み上げるものなので、画像のサイズ管理もきっちりやっていきたい所ですね。

TOMIX編集部

株式会社トミックス