画像アセット

みなさんこんにちは。
エヌケー・テック講師の橋本です。

昨日、横田講師と夕飯にラーメンを食べに行ったら、お店がすでに閉まっており、
代替案として別の店に行ったのですが、そこもスープが切れたのか閉店でした。
2回も振られてしまい、しょんぼりと通りがてら近場の店に入ったのですが
そこが意外とおいしくて、三度目の正直ってあるんだなと思いました。


さてさて、割とどうでもよい前置きでしたが
今回は久しぶりにチュートリアル系の記事を書きたいと思います。


Webサイトを作成するときには、Photoshopなどのデザインソフトで
「デザインカンプ」というWebデザインの完成イメージを作成し、
そこから必要な画像をパーツ単位で書き出します。

従来はこの書き出しに「スライスツール」という機能を使って、素材を準備するのが一般的でした。

これはスライス チー…やめて！殴らないで！

画像アセットについて

今回紹介する「画像アセット」もスライス同様、Web用の素材を書き出す機能です。
スライスツールを用いて書き出しの範囲を指定していた従来のやり方と違って、
レイヤー名に拡張子を追加するだけで、自動的に書き出しをしてくれる機能で、
Web素材の作成が非常に効率的に行えるようになりました。

これはバージョンがCCになってから追加された機能で、CC2014以降では
SVGも書き出せるようになっています。
Webサイトの素材としてよく利用されている以下のファイル形式に対応しています。

 ・JPG
 ・GIF
 ・PNG
 ・SVG

使い方

画像アセットを利用するには、2つの設定を有効にする必要があります。

①「ファイル」＞「生成」＞「画像アセット」で機能を有効化。

②「編集」＞「環境設定」で「プラグイン」の「Generator を有効にする」が「ON」

これらの設定が有効になっていれば、対象のレイヤー名を変更するだけでファイルが書き出せます。
スライスのように一度画像の書き出し範囲を選択して、
オプションでファイル名などを事前に設定しておいて…というような
面倒なことをしなくていいので、非常に効率的です。

あとは画像を書き出したいレイヤーの名前を変更するだけ

画像アセットは元のPsd（Photohsop形式）のファイルが保存されている場所にデータを書き出します。
保存場所には[Psdファイルのファイル名]＋[-assets]というフォルダーが自動的に作成され、
そのフォルダー内に書き出したデータが納められることになります。


例えば、下図であれば「WebDesign.psd」というファイルの保存場所に
「WebDesign-assets」というフォルダが作成されており、
レイヤー名に指定した「Logo.gif」が保存されたことが確認できます

この方法で生成されるファイルがデフォルトの設定となっており、
書き出し設定は以下ようになります。

その他オプションについて

画像アセットの機能では、拡張子の後にパラメーターを指定し、
書き出し時の設定を変更することも可能です。
そのような場合には、レイヤーの命名ルールを次のように指定します。

また、レイヤー名の先頭にサイズを指定することで、書き出す画像の大きさも指定できます。
接頭内容とファイル名の間には半角のスペースを空けてください。

さらにカンマ（,）でファイル名を区切ることで、複数のファイルを書き出すことができます。
サイズ違いやファイル形式を変えたものが必要な時に便利です。

↓

こんな感じで2つ書き出せば、解像度が2倍のロゴ画像も簡単に。

…
……
ということで、Webの素材作成では非常に重宝しそうな画像アセットについてのご紹介でした。
CC以降の比較的新しいバージョンから追加された機能はPhotoshopやIllustratorでいくつかありますが、
そういったものも今後ご紹介していければと思います。


ちなみにエヌケー・テックの求職者訓練「DTP-Webデザイン科」は
Adobeスクールパートナーの認定を受けておりますので、最新版のAdobe CCが授業でも利用可能です！
今回紹介したような新しい機能も利用することができちゃうかも！？

さらに該当コースの受講者はアカデミック版（学生版）ライセンスの利用が可能となっておりますので、
ご利用希望の方にはアカデミック版ライセンスの販売もご用意させていただきます！



現在募集中の「DTP-Webデザイン科」は来週の月曜日(6/25)が締め切りです。
締め切りまで残りわずかとなりますので、お申し込みの方はお急ぎくださいね！

http://www.nk-school.com/training/DTP-Web_course.html