残った画像の処理
1度目のスライスで切り出していない画像を処理する。
手順は、１回目と全く同じである。
１．スライス選択ツールで[shift] キーを押しながら、画像を選択していき、保存する。
２．保存時のダイアログ：［選択したスライス］に設定。
レイヤーで書き出し機能を使った画像書き出し
スライスして書き出すよりも、楽でスピーディー。
表示されているレイヤーだけを書き出すこともできる。
１．書き出したい画像をレイヤー毎に分ける。
書き出し機能は、「レイヤー毎に」書き出す。
２．レイヤー名を画像ファイル名に。
レイヤーで書き出し機能を使った場合のファイル名は、Photoshopのルールに基づいて自動で付与されます。
レイヤーで書き出し機能を使った場合のファイル名
ファイルの先頭文字_連番_レイヤー名
レイヤー名を任意のファイル名に変更する。
この時、画像アセットの生成と異なり、拡張子を付けて置く必要はありません。
３．書き出す
メニューバーから、「書き出し」を選び「レイヤーからファイルを書き出し」へ進んでください。
書き出して保存する保存先の設定や、ファイル形式、ファイルの先頭文字などを設定してください。
表示されているレイヤーのみ
チェックを入れると、現在表示されているレイヤーのみを書き出し対象とすることができます。
png画像の場合、背景を透過させることもできます。
レイヤーをトリミングにチェックを入れれば、書き出す際に、透明ピクセルをトリミングしてくれます。
４．ファイルを確認して完了！
出力先に登録したフォルダには、レイヤー数分の出力画像が格納されていれば、出力完了です！
拡張子を変えたい時など
レイヤーで書き出し機能は、表示されているレイヤーだけを書き出すということが可能です。
表示されているレイヤーだけのところにチェックを入れて、それぞれの拡張子ごとに出力を分けましょう。
また、同じく、表示されているレイヤーだけを出力する機能を使って、 ファイルの先頭文字を変更すればheader_*****.png や footer_*****.pngなど、整理しやすい名前を自動で付けることができます。
【参考記事】
Photoshopから画像を書き出す レイヤーで書き出し 機能を使ってみようレイヤー機能を使った画像切り出し方法は知らなかったのですが、「Photoshop スライス 画像 書き出し」で検索し、この記事で初めて知りました。
レイヤー別にファイルを書き出す方法 （Photoshop CC） Photoshopから画像を書き出す レイヤーで書き出し 機能を使ってみようこの記事を読んだ人はこんな記事にもご興味があるかも
2017-12-22 [ jQuery ] jQuery を利用する
2021-05-07 読みやすい文字レイアウトーレイアウトの基本
2021-05-05 フォントの選び方、使い方、複数のフォントを選ぶ場合
2017-08-14 [ CSS ] CSS の優先順位と詳細度
2016-05-22 Illustrator カラー設定を設定する- 2014-07-23 WordPressオリジナル・テーマ作成、制作へのアプローチ
(Visited 244 times, 1 visits today)