Contact us
   Blog

Blog

Photoshop 画像アセット機能、1行条件を書くと全体指定が可能になってより便利に

普段、Photoshopで画像を書き出す時は、アセット生成機能を使うことが多いと思います。
画像を出力したいレイヤーに対して、このように『****.png, 200% ****@2x.png, 300% ****@3x.png』命名することで、アセット生成機能から一括書き出しができる機能です。

たとえば、こういう作業中ファイルがあったとして、画像を出力したいレイヤーに拡張子をつけるとします。

ここで、レイヤー毎に1枚ずつ、拡張子と、画像のサイズ、画像名を命名します。
****.png, 200% ****@2x.png, 300% ****@3x.png と命名した場合は、等倍、二倍、三倍の画像をpngで書き出します。

生成→画像アセットにCHECKを入れて、保存してください。

書き出されました。この時、特に指定をしていなければ、サイズ違いの画像もすべて「assetフォルダ」に自動的に生成されます。
フォルダを指定したい時は、「[フォルダ名]/****.png」と指定します。

とても便利なのですが、レイヤーに1枚ずつ拡張子と条件を記載するのは、面倒ですし、わかりづらいですよね?
リネーム用のエクステンションを活用するという手もありますが、もうすこし手間を省いて、一括で出力できるようにしたいと思います。

もっと手間を省いて、ドキュメント全体に一括指定する方法

まず、何もオブジェクトが入っていない空のレイヤーを作成してください。

作成した空のレイヤーに、「default」と命名してください。この「default」は必須条件になります。

レイヤーの先頭に default を付けたら、次は、書き出しの条件を記載します。

例として「default @1x/, 200% @2x/ @2x, 300% @3x/ @3x」と命名した場合、全ての画像の等倍と2倍と3倍の画像が生成されます。

それぞれのレイヤーには、画像名に出力したい拡張子を振っておいてください。

命名したら、いつも通り、アセット画像を生成しましょう。

この方法で書き出した場合は、1から3倍の画像が、フォルダ分けされて出力されます。

@1x のフォルダには、等倍の画像が出力されています。

@2x のフォルダには、2倍の画像が出力されています。

@3x のフォルダには、3倍の画像が出力されています。

拡張子がある画像だけが条件に応じて生成されますので、書き出す必要がない画像には、拡張子を振らないようにしてください。

もちろん、フォルダにも対応していますし、フォルダ名を指定したい時は、「default フォルダ名」としてください。

たとえば「default hi-res/@2x」とした場合、「hi-res」というフォルダに画像を書き出してくれます。

1枚ずつ命名するよりは、はるかに便利で、特別なエクステンションも必要ありません。PhotoshopCC2019でも動作することを確認しました。

もっと細かくいろいろな設定が可能ですので、Adobeの公式ブログを参考にしてみてください。

[blogcard url=”https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html” title=”レイヤーからの画像アセットの生成” content=”参考 レイヤーからの画像アセットの生成 Adobe”]

Follow me

WEBの企画と制作の流れ

WEB制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

いきなり完成したものを作って納品するのではなく、徐々に積み上げてゆくように、側でクライアントを支えながら完成させてゆく新しいスタイルの制作です。

lalan with you