【Illustrator】アセット機能を使ってみた

スポンサードリンク

皆様ご無沙汰しております。
富田です。

時間の流れは早いものでIllusrator CCはもうバージョン2017が出ているそうですが、
色々と不具合が怖いので最新バージョンの導入はまだまだ保留にしております。

というわけで私はまだAdobeのIllusratorCC2015を使用しているのですが、
ちょっと便利な機能を発見したので共有したいと思いますー！

「アセットの書き出し」機能について

「アセットの書き出し」とはWebサイトのデザインなどでpngやjpeg、SVGへの書き出しを
ドラッグ＆ドロップで容易に完了させられることが出来る画期的な機能です。

私が仕事で使っているIllustratorCC2015のツールボックスにはこのような項目があるのですが、
コイツをクリックするとこのような「アセットの書き出し」という名前のパネルが出てきます。

ここに書き出したいオブジェクトをそのままどんどんドラッグしてくれば
このスクショのようにアセットを溜めていくことが出来ます。

ここが便利

アセットはライブでそのオブジェクトとリンクされているので、
例えばパーツの色などを修正したときには書き出しパネルに置かれている色も変化します。

ちなみにパスファインダなどでオブジェクトを一体化させたり、
変形などを変更させるとこのようなメッセージが出てきて書き出しパネルから削除されてしまいます。

書き出し

書き出しはSVG、png、jpegが選択出来て、
大きさもｘ2、ｘ3、ｘ4などが選べるようです。
書き出しキューは「スケールを追加」ボタンで追加が出来ます。

ここから書き出し先のフォルダーを選択して書き出します。

こんな感じで超便利な「アセットの書き出し」機能ですが、
一つだけ弱点がありました。

マスクされた画像の書き出しサイズがなんか変

上の画像はこの作業画面の「アセット3」という画像をJpegで書き出したものなのですが、
謎の余白が生まれています（ブログの背景が白なので、わかりにくくてスミマセン。。）

原因はおそらく書き出し時にマスクされた部分まで書き出されてしまっていることだと思うのですが、
少し不便です。

改善を心待ちにしたいところですが（もしかしたらCC2017で改善されているかも？）
私は苦肉の策でこのようにしました。

どのように解決した？

一旦Illusratorからpngでアセット書き出ししたものを
Photoshopで開くと、このようになっていました。

レイヤー部分を右クリックでコンテキストメニューを開いて「書き出し形式」を選択します。

「書き出し形式」からやっと必要な形式に書き出せました。

まとめ

このように、トリムした画像の扱いに関してはPhotoshopを噛ませる必要があるなど多少難があるアセット書き出し機能ですが、
アイコン等のベクター画像に関してはてきめんの効果を発揮するので、是非使ってみてはいかがでしょうか～！

以上、ケートミィのブログでしたっ！

Advertisement