illustratorのスライスで透過PNGを生成する

illustratorを使い始めたばかりで全然機能を使いこなせていません。

そんな中で最近使い始めたスライス機能。

前まで素材をPNGで書き出す場合、1つならオブジェクトサイズで書き出し、複数なら書き出したPNGをPhotoshopで切り抜いて個々の素材に書き出すという面倒な作業をしていました。

しかし、スライス機能を使用すればそんな面倒な作業をする必要はありません!

そんなスライス機能を使いつつ透過PNGで書き出しちゃおうというのが今回のお題です。

まず素材にしたい部分を選択します。

スライスしたい箇所を選択
スライスしたい箇所を選択

そして

「オブジェクト」>「スライス」>「選択範囲から作成」

スライス手順
スライス手順

でスライスを作成します。

するとこんな感じでスライスが作成されます。

スライス後
スライス後

他も同様にスライスを作成します。

全部スライス
全部スライス

そして

「ファイル」>「WEB用に保存」

を選択。

WEB用に保存
WEB用に保存

するとこんな画面になります。

プレビュー
プレビュー

分かり辛いですが、現在MELCHIORが選択されている状態です。

この状態で「プリセット」に表示されるのは選択されているスライスの情報です。

なので、この画像ではMELCHIORが「PNG−24」に設定されている事になります。

左にある「スライス選択ツール」を選択した状態で、スライスしたい画像一つ一つを選択し「PNG-24」で、かつ「透明部分」にチェックが入っているか確認してください。

今回は透過PNGで書き出すのでこの設定ですが、JPG等で書き出したいときは設定をJPGにしてください。

あとは保存をそして出力先を選びます。

すると「images」というフォルダが作成され、その中にスライスされた画像が入っています。

出力状態
出力状態

この機能を使えばこんな簡単に素材が切り出せます。

さすがillustrator。


コメントを残す