モックアップから画像を最適化、切り出す２つの方法

Tweet

[`yahoo` not found]

Share on Tumblr

[`evernote` not found]

Pocket

残った画像の処理

1度目のスライスで切り出していない画像を処理する。

手順は、１回目と全く同じである。

１．スライス選択ツールで[shift] キーを押しながら、画像を選択していき、保存する。

２．保存時のダイアログ：［選択したスライス］に設定。

レイヤーで書き出し機能を使った画像書き出し

スライスして書き出すよりも、楽でスピーディー。

表示されているレイヤーだけを書き出すこともできる。

１．書き出したい画像をレイヤー毎に分ける。

書き出し機能は、「レイヤー毎に」書き出す。

２．レイヤー名を画像ファイル名に。

レイヤーで書き出し機能を使った場合のファイル名は、Photoshopのルールに基づいて自動で付与されます。

レイヤーで書き出し機能を使った場合のファイル名

ファイルの先頭文字_連番_レイヤー名

レイヤー名を任意のファイル名に変更する。

この時、画像アセットの生成と異なり、拡張子を付けて置く必要はありません。

３．書き出す

メニューバーから、「書き出し」を選び「レイヤーからファイルを書き出し」へ進んでください。

書き出して保存する保存先の設定や、ファイル形式、ファイルの先頭文字などを設定してください。

表示されているレイヤーのみ

チェックを入れると、現在表示されているレイヤーのみを書き出し対象とすることができます。

png画像の場合、背景を透過させることもできます。

レイヤーをトリミングにチェックを入れれば、書き出す際に、透明ピクセルをトリミングしてくれます。

４．ファイルを確認して完了！

出力先に登録したフォルダには、レイヤー数分の出力画像が格納されていれば、出力完了です！

拡張子を変えたい時など

レイヤーで書き出し機能は、表示されているレイヤーだけを書き出すということが可能です。
表示されているレイヤーだけのところにチェックを入れて、それぞれの拡張子ごとに出力を分けましょう。

【参考記事】

レイヤー機能を使った画像切り出し方法は知らなかったのですが、「Photoshop スライス 画像 書き出し」で検索し、この記事で初めて知りました。

Tweet

[`yahoo` not found]

Share on Tumblr

[`evernote` not found]

Pocket