IllustratorCCの画像アセットの書き出しで、余白やピクセルずれを無くす方法

IllustratorCCからアセットの書き出しという機能が追加され、
画像書き出しの際にはアセット書き出しを使っていますが、
クリッピングマスクがかかっているアセットは余白が出来てしまいます。

今まではそこからFireworksなど他の画像処理ソフトで余白を削除していましたが、
IllustratorCCのCCライブラリという機能を使って
余白を無くした状態で書き出し出来ることを知りました。

余白を作らないアセット書き出し方法

まず書き出したいオブジェクトを選択してCCライブラリに追加します。

CCライブラリからオブジェクトをアートボードに配置します。
（項目選択後ドラッグしてアートボード上をクリック）

それを改めてアセット書き出しに追加して書き出します。
すると余白が無くなっています。

しかし、まだわずかな隙間が残っていることがあります。

それはピクセルずれが原因です。
画像は1ピクセルごとに書き出すのですが、
0.1ピクセルでも半端なサイズだと、このような隙間が出来てしまいます。

ピクセルずれの隙間の解消方法

メニューの[表示]→[ピクセルプレビュー]と、
メニューの[表示]→[ピクセルにスナップ]をオンにします。

レイヤーに鍵がかかっていたら外して該当オブジェクトを選択後、
メニューの[オブジェクト]→[ピクセルグリッドに最適化]をクリック。
※アウトライン化されたテキストなど細かいパスは形が崩れることがありますので、長方形など単純な形のオブジェクトのみに使用してください。

それから改めてCCライブラリを使ってアセット書き出ししてみると…

隙間が無くなりました！

まとめ

画像書き出しがとても楽になりました。
これでFireworksが手放せそうです。

この記事を読んだ方はこちらも読まれています

WEBページ全体のスクショがきれいに撮れる「Full Page Screen Capture」