記事の詳細

前の記事で堂々と「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の画像アセットはレイヤー名、あるいはフォルダ名に「画像拡張子」をつけることによって下準備が出来上がります。

Photoshopアセット アセットの書き出し方サンプルファイル

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

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

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

IllustratorアセットIllustratorアセット

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

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

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

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

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

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

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

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

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る