以前はwebサイト制作のワークフローとして、Photoshopでカンプを作成し、画像を書き出す為に「スライスツールで各画像を切り出す」という作業を行なっていましたが、この「スライスツールで画像を切り出す」という作業が色々と制約があり、とても細かい作業の為、非常に面倒でした。
これがPhotoshopのCCになってから「画像アセットの生成」という機能に変わり、面倒なスライスツールを使う必要が無くなりました。
さらにレイヤー構造を保ったまま、複数のレイヤーを1枚の画像にまとめる事など、今までのスライスツールでは出来なかった事も出来るようになり、作業効率も非常に上がるので、ぜひ覚えましょう。
「画像アセットの生成」の作業手順
- photoshopの作業（psdデータ）データを名前を付けて適切な場所（フォルダー）に保存
- レイヤー、もしくはフォルダーに画像のファイル名と拡張子（jpgやpngなど）を付ける
- 「ファイル」の生成→「画像アセット」にチェックを入れる
これだけでpsdデータを保存したフォルダーに「〇〇-assets」というフォルダーが生成され、その中にファイル名を付けたレイヤーが画像として書き出されます。
万が一、上手く生成されない場合は「環境設定」の「プラグイン」の項目の一番上の「Generaterを有効にする」にチェックが入っているか確認してみましょう。
レイヤーの命名規則
アセット機能を使用する際に一番重要なのは適切なレイヤー名を付ける事です。アセットで書き出す事の出来る画像拡張子は「jpg」「png」「gif」「svg」の4つです。
また、複数のサイズや複数の拡張子で書き出したい時はファイル名とファイル名の間にカンマを入れます。
例「200% logo@2x.jpg,logo.jpg」
そうすると「〇〇-assets」フォルダーに以下のように複数の画像が生成されます。
また複数のレイヤーをフォルダーにまとめ、フォルダーに拡張子を付けると、ファルダーの中の各レイヤーが1つにまとまった画像が生成されるので、こちらも実際にやってみましょう。
詳しい命名規則はこちら
blogs.adobe.com
コメント