作成したイラストやアイコンが「1px大きい」「1px小さい」状態で書き出された！
ということはありませんか。
予定のサイズから1pxズレると、状況次第では細かい設定が必要になりますよね。
対処法はいくつかありますが、今まで悩まされてきた身としては「ピクセルグリッドに最適化」が一番手っ取り早いと感じました。
ただし、データがやや大きくなる場合があります。
サイズ制限があるときは他の方法にするか、後から画像圧縮ツールで調整することをおすすめします。
1pxズレたファイルとは
イラストなどをアートボードに作成します。
分かりやすくするため、縦と横どちらかもしくは両方を切りのいい数値にします。
アセットの書き出しパネルにドラッグ＆ドロップします。
拡大縮小は任意で、形式はJPEGもしくはPNGで書き出します。
画像のプロパティを見ると幅は「301px」。
「300px」に設定していたので「1pxズレて」書き出されたことが分かります。
ピクセルグリッドに最適化
先ほどのアートボードに戻ります。
イラストなどを選択した状態で右クリック。「ピクセルグリッドに最適化」を適用。
書き出して大きさを確認
アセットの書き出しパネルから書き出します。
画像のプロパティを見ると幅が「300px」になりました。
データサイズを確認
念のため、データサイズを最適化する前と後で比較します。
サイズが「0.01KB」増えました。
画像の大きさが大きければ、データサイズの増え方も変わります。
書き出したあとは、画像を「右クリック＞プロパティ」で内容を確認してください。
データサイズを圧縮するときは
圧縮するときは、オンラインツールの「TinyPNG」が便利。
「Drop your…」の囲みに画像をドラッグ＆ドロップするだけでOK。データサイズ、圧縮率が表示される親切設計です。
これで「1pxのズレ」もスマートに対処できますね。
いくつか方法を試してきましたが、そのうちの9割が「ピクセルグリッドに最適化」で解決できました。
データサイズが気になるときは「TinyPNG」を使うなど、状況に応じて調整してくださいね。
