adobe Illustrator web技術 ツール

イラストレーターの透過pngがうまく書き出せない時の対処法

最近webデザインをするときにPhotoshopではなくイラストレーターをメインで使用するようになってきました。
Photoshopでは重すぎ、XDでは機能が限られすぎということで、Illustratorを使用しております。
Photoshop同様Illustratorにもアセットで一気に書き出し機能があるのですが、Photoshopとは使い勝手が違います。

例えばこんなデータがあるとします。イラストレーターの透過pngがうまく書き出せない時の対処法

六角形の画像をアセットでpng書き出してみます。

こちらが書き出された画像。透過はされましたが、元画像の幅も含まれてしまっていて、よくありません。

この画像をPhotoshopで開いて、イメージ>トリミング>透明ピクセルを選択しましょう。

きれいにトリミングできました。

しかし、元画像の幅が必要だという製作者ってそんなにいるのかな。
Jpg書き出し時なんてもっとひどくて、透過部分がないからマスク以外が真っ白くなってしまいます。トリミング

そういう場合はIllustratorでオブジェクトをライブラリに登録しましょう。そしてライブラリに登録されたオブジェクトをアートボードに配置します。そして更にアセットに追加します。それでようやくトリミングができる様になりました。

イラストレーターのアセットまとめ

ベクターデータなら問題なく自動書き出しに対応したデータを作成することができるのですが、画像、ことマスクで切り抜いてある画像に関しては全然だと思います。
上記の対処法を行っても数ピクセルの余白ができてしまい、結局Photoshopでトリミングをすることもありました。
使い勝手は良いんですが、イラストレーターのアセット書き出しはまだまだだと思いました。

-adobe, Illustrator, web技術, ツール