読者です 読者をやめる 読者になる 読者になる

ELLY'S HATENA BLOG

Webデザイナーellyのデザインとゆるふわな日常。

Photoshopでスライスせずに「画像アセット生成」でラクチンに画像を書き出す方法

画像アセット生成とは、切り取りたい画像をいちいちスライスせず、レイヤーに「◯◯◯.jpg」など、レイヤー名+拡張子などを書くことにより、自動でかき出してくれる機能です。
スライスでも慣れていればこっちのほうが使い易いかもしれませんが、スライスずれで不要な部分がついていたり、切れたり、ミスが多いのは事実です。
それなら便利で新しい機能を使いこなしてみましょう。

基本は2つの操作

基本は2つのみです。

1.レイヤー名の後ろに拡張子をつける。
2.[ファイル]→[生成]→[画像アセット]にチェックを入れて書き出す。

チェックを入れた後でも、デザインを上書き保存したタイミングで最新のデータが自動で書き出されるので、修正するたびにチェックの付け外しをしなくても大丈夫です。

命名規則

簡単ですが命名規則があり、 書き出せる拡張子は下記の通り全部で4種類です。

  • JPG
  • GIF
  • PNG
  • SVG(CC2014以降)
指定したいこと レイヤー名のつけ方
JPGファイル ◯◯◯.jpg
GIFファイル ◯◯◯.gif
PNGファイル ◯◯◯.png
SVGファイル ◯◯◯.svg

ではこれを踏まえて、いろんな画像を書き出してみましょう。

PNGの画質を指定する

指定したいこと レイヤー名のつけ方
8ビットのPNG画像 ◯◯◯.png8
24ビットのPNG画像 ◯◯◯.png24
32ビットのPNG画像 ◯◯◯.png32

pngの後に数字を入れる感じですね。
未指定の場合はpng32ビットの画像になります。

JPGの画質を指定

指定したいこと レイヤー名のつけ方
画質50%のJPG画像 ◯◯◯.jpg5
画質100%のJPG画像 ◯◯◯.jpg10
画質83%のJPG画像 ◯◯◯.jpg83%

0~100%まで画質を指定することができます。
画質は10%単位ずつであれば「%」を省略することができます。83%なら「83%」とレイヤー名につけましょう。

サイズを指定

指定したいこと レイヤー名のつけ方
横100px、縦20pxのJPG画像 100 x 20 ◯◯◯.jpg
2倍サイズのPNG画像 200% ◯◯◯.png

200%サイズはRetina用に書き出す時に使うので、よく使うと思います。
ただ200%で書き出す際、ちょっとした落とし穴があるので気をつけて下さい。(下記に記載

複数書き出したい

指定したいこと レイヤー名のつけ方
通常サイズと2倍サイズ ◯◯◯.jpg, 200% ◯◯◯@2x.jpg
jpg画質100%とpng画像 ◯◯◯.jpg10, ◯◯◯.png

Retina用と通常サイズを書き出すやり方、拡張子が違っても上記のようにレイヤーに記述すれば一気に書き出すことができます。

2倍サイズで書き出したら画像がぼやけてしまう

原因は、psdやpsb(ビッグドキュメントデータ形式)データを縮小したもの以外だと解像度が足りないからだと思われます。
photoshopのネイティブデータ(psd /psb)で大きめに保存したものを埋め込みし、それを縮小したものであれば、2倍の大きさで出力してもぼやける心配がありません

f:id:elly_elly:20160614160638j:plain

こちらの記事に詳しく書かれているので、よかったら参考に見てみてください。
Photoshopのスマートオブジェクトを拡大して書き出すとぼける現象について - saucer

他にもいろんな問題がある

余白込みの画像を書き出すときはどうすればいいのか... svgのパスがちゃんと書き出されないなど...
まだ検証ができていないのですが、こちらのLIGさんのブログでやり方が優しく紹介されているので、使われるときはこちらを見てみてくださいね。
liginc.co.jp

ELLY'S HATENA BLOG © 2016. All Rights Reserved.