君はもう体験したか!Adobe Illustrator CCでついに画像アセットができるようになったぞ!

こんにちは。ナガタです。
ナガタは非常に興奮しています。

それはタイトルの通り、「Adobe Illustrator CCでついに画像アセットができる」ようになったからにほかなりません。Photoshopが画像アセット対応してからというもの、スライス作業が楽になったこと楽になったこと。

画像アセット…Photoshopで標準機能とされる書き出し機能。レイヤーにxxx.png等つけることで一括で書き出すことが可能。詳しくはこちらの記事を参照ください。

データはフォトショですか?イラレですか?イラレは2倍料金ください。

画像アセットになれてからの日々、画像アセットができないイラレファイルでデザインが来るのを非常に嫌がっていました。懇意にしてくださる制作会社さんから「案件のお願いがあるんだけど〜」と言われた日には即「データフォトショですか?イラレですか?」と確認をし、イラレだった場合には非常に嫌な顔をするというのが日常でした。

もちろん私の不勉強による不慣れも大いにあると認めます。ただそれを鑑みてもイラストレーターのスライスは非常に面倒でした。

ほんと、2倍とか上でいってますけど、2倍貰いたいし、2倍貰ってもやりたくないほどに。

ついにきたー!イラレで画像アセットぉぉぉ!

ほんと今日イチ盛り上がってます。あくまで今日イチですけどね。そもそもイラレをあまり使わないし使えないから。

Photoshopとはちょっと違うけどこれはこれで簡単そう。

Photoshopは先程ご紹介したように、レイヤーに.pngなど拡張子をつけることで一括書き出しができます。意外と面倒なこともあって、まとめたかったらレイヤーをまとめる必要があったり、分散させる必要があったりしたんですね。

ただ、イラレはアセット用のウィンドウまであるというのだから驚きです。
むしろPhotoshopにも入れてほしいと思いました。

イラレの画像アセット手順

アートボードを書き出す

  1. File -> Export -> Export for Screens Screen Shot 2016-06-21 at 16.45.03
    • ■書き出す形式や大きさを複数選択できる! Screen Shot 2016-06-21 at 16.45.16
    • ■Export Artboardを押す!

以上!

まじか!すごい!

要素ごと書き出し

これですよこれ。これがやりたい。

  1. Window -> Asset Export Screen Shot 2016-06-21 at 16.47.00
    • ■ここにアセットしたい要素をD&D Screen Shot 2016-06-21 at 16.47.14
    • ■もしくは要素を選択してAddボタン Screen Shot 2016-06-21 at 16.52.17
    • ■あとはそれぞれ書き出す形式や大きさを複数選択できる!
  2. File -> Export -> Export for Screens -> [[Assets]] Screen Shot 2016-06-21 at 16.56.21
    • ■書き出したいのをチェック!(全部でも)
    • ■Export Artboardを押す!

以上!

Screen Shot 2016-06-21 at 16.53.50

※ Asset Export Windowからも書き出し出来ます!

まとめ

どうぞ、今後はイラレデータでもどうぞ。
これまでイラレっていわれて嫌な顔をしてしまった皆さま、深く謝罪申し上げます。
今後ナガタは歓迎いたします。仕事ください。

Adobe公式

フォローして続編をチェック

@universionsをフォロー