前の記事で堂々と「IllustratorでWEBデザインしてます」と言っていた私ですが、

＞WEBデザインをするツールとしてIllustratorとPhotoshopの違いを比較してみる

このたびですね、illustratorCCのアップデートでですね、

画像アセットがイラレに実装されたんですよ。

 

絶叫しましたよ？

 

おおおおまさに求めていたコレ！コレ！というものをピンポイントで実装してくださるAdobeさまにはもう頭があがらない足向けて寝てないもうIllustratorなしじゃ生きていけない！ありがとう！ありがとう！テンションあがった！！体温3度くらいあがった！

PhotoshopでもIllustratorでも、1つのファイルからたくさんの画像を一度に書き出すのが「画像アセット」

WEBを作っていると「同じサイズで違う画像」や「違うサイズだけど同じカテゴリのもの」といったような、パターンの決まった画像ファイルをたくさん作ります。

300-200ピクセルの写真が20枚、とか、フッターで使うアイコンが10個、とかですね。

こいつらを例えばPhotoshopで一個一個ファイルを作ったりしていたら気が狂うんですよ。

Illustratorでスライスを作成して一度に作成してもいいんですがファイル名の変更が面倒くさい。

画像アセットの「アセット」は資産や財産、利点、長所といったような意味で、まあ直に言えば画像アセットとは「画像を資産化（jpgやgifといった画像に統合）して管理するシステム」みたいなものです。

といってもpngにも出したいしjpgにも出したいし、やっぱり一個一個……とか言っていたら時間の無駄ー！

Photoshopの画像アセットはレイヤー、あるいはフォルダごとに書き出しができる

基本がレイヤーでなりたっているPhotoshopは、加工や要素が増えれば増えるほど、レイヤーの管理がとっても重要になってきます。

「たやすく修正できるデータ」は電子を扱うどのデザイナーにとっても永遠の課題で必須項目です。そのために必要なのが「整理整頓」。

 

Photoshopの画像アセットはレイヤー名、あるいはフォルダ名に「画像拡張子」をつけることによって下準備が出来上がります。

 

当然pngで書き出したければpngで書き出していいし、gifがいいならgifにすればいいのです。これで「生成」から「画像アセット」にチェックを入れて保存をすればOK！簡単！

これでPhotoshopでWEBページを作成してもみっちりスライスで飾らなくてよくなりました。

IllustratorCCの新機能「アセット機能」は何ができるか

選択したオブジェクトを書き出せる

• 選択したオブジェクトをアセットパネルにドラッグすると、書き出す準備ができます。
• 名前の変更もここで可能。
• 下の項目で書き出し設定。サイズも等倍二倍など選べるうえ、サフィックス（接尾辞）も入力可能。ファイル名の管理もばっちりです。
• iOSやAndroidにも対応している機能搭載

アートボードも書き出せる

• 今まではだいたいアートボード番号順にまとめて書き出されていたのが、今回は書き出したいアートボードの選択が可能に！
• 先頭文字列も記載可能。
• PDFやSVGも書き出し可能！

んあああああ超便利！　今まで泣きながら一個一個スライス作ってたのがウソみたいだ！

もっと詳しい方法は公式サイトをみるとわかりやすくムービーで説明されているので、こちらをどうぞ。

＞WEB・アプリデザイン用アセットの書き出し

世界はサプライズとハッピーで満ちていますねッ……！