【Illustrator】アセット書き出しでクリッピングマスク範囲外に余白が出来てしまう場合の対処法！

みなさん、こんにちは。

Illustratorの「アセットの書き出し」でクリッピングマスクがかかっている要素の場合、書き出された画像に余分な空白が出来てしまいます。
その余分な空白が出来ない様に「アセットの書き出し」する方法をご紹介します。

クリッピングマスクをかける前の範囲で書き出されてしまう

まずは普通に「アセットの書き出し」をおこなってみます。

上部の画像が元の画像でその下がクリッピングマスクをかけて正方形にトリミングした画像です。
正方形にトリミングした画像をアセット書き出しします。

するとこの様に元の画像と同じ大きさ分の余白が出来てしまっています。

アセット書き出しはすごく便利な機能ですが余白があるとWebでは使いにくいですよね。
そこで、この余白がない状態でアセット書き出しをする方法をご紹介します。

余白がない状態でアセット書き出しをする方法

まずはクリッピングマスクが掛かっているオブジェクトをライブラリに入れます。

次にライブラリからそのオブジェクトを配置します。

ライブラリから配置した画像をアセット書き出しすると余白のない状態で書き出されます。
ライブラリに入れると一枚の画像になるのでクリッピングマスクと画像を結合させる機能として利用するわけですね。

Illustratorで作成されたデザインデータからコーディングする機会が多い方は便利かと思います！

使用素材

https://pixabay.com/