こんにちは。ナガタです。
ナガタは非常に興奮しています。
それはタイトルの通り、「Adobe Illustrator CCでついに画像アセットができる」ようになったからにほかなりません。Photoshopが画像アセット対応してからというもの、スライス作業が楽になったこと楽になったこと。
画像アセット…Photoshopで標準機能とされる書き出し機能。レイヤーにxxx.png等つけることで一括で書き出すことが可能。詳しくはこちらの記事を参照ください。
データはフォトショですか？イラレですか？イラレは２倍料金ください。
画像アセットになれてからの日々、画像アセットができないイラレファイルでデザインが来るのを非常に嫌がっていました。懇意にしてくださる制作会社さんから「案件のお願いがあるんだけど〜」と言われた日には即「データフォトショですか？イラレですか？」と確認をし、イラレだった場合には非常に嫌な顔をするというのが日常でした。
もちろん私の不勉強による不慣れも大いにあると認めます。ただそれを鑑みてもイラストレーターのスライスは非常に面倒でした。
ほんと、２倍とか上でいってますけど、２倍貰いたいし、２倍貰ってもやりたくないほどに。
ついにきたー！イラレで画像アセットぉぉぉ！
ほんと今日イチ盛り上がってます。あくまで今日イチですけどね。そもそもイラレをあまり使わないし使えないから。
Photoshopとはちょっと違うけどこれはこれで簡単そう。
Photoshopは先程ご紹介したように、レイヤーに.pngなど拡張子をつけることで一括書き出しができます。意外と面倒なこともあって、まとめたかったらレイヤーをまとめる必要があったり、分散させる必要があったりしたんですね。
ただ、イラレはアセット用のウィンドウまであるというのだから驚きです。
むしろPhotoshopにも入れてほしいと思いました。
イラレの画像アセット手順
アートボードを書き出す
- File -> Export -> Export for Screens
- ■書き出す形式や大きさを複数選択できる！
- ■Export Artboardを押す!
- ■書き出す形式や大きさを複数選択できる！
以上！
まじか！すごい！
要素ごと書き出し
これですよこれ。これがやりたい。
- Window -> Asset Export
- ■ここにアセットしたい要素をD&D
- ■もしくは要素を選択してAddボタン
- ■あとはそれぞれ書き出す形式や大きさを複数選択できる！
- ■ここにアセットしたい要素をD&D
- File -> Export -> Export for Screens -> [[Assets]]
- ■書き出したいのをチェック！（全部でも）
- ■Export Artboardを押す!
以上！
※ Asset Export Windowからも書き出し出来ます！
まとめ
どうぞ、今後はイラレデータでもどうぞ。
これまでイラレっていわれて嫌な顔をしてしまった皆さま、深く謝罪申し上げます。
今後ナガタは歓迎いたします。仕事ください。
参考：Adobe公式
Author Profile
- 株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。
Latest entries
Web制作のファイル管理ツール「universions」
バージョン管理ができて、いつでも最新版を確認できるWebサーバーも提供中。
制作からテスト、公開までWeb制作のフローを完璧にサポートし、1人の作業も複数人での協業も円滑になります。