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

2019.07.05

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

みなさん、こんにちは。

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

Contents

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

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

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

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

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

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

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

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

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

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

使用素材

https://pixabay.com/

この記事が気に入ったらいいね!で
最新記事をお届けします

記事が気に入ったらシェアしよう