ツールのここがお気に入りシリーズの2回目はPhotoshopです。
一つの機能ごとで分けようかどうしようか。と思いながら書いています。お気に入りがありすぎるので。

アセット

ファイル＞生成＞画像アセットで画像の書き出しがめちゃくちゃ楽になるアレです。

他にもこの機能すごいよね、ありがたいと思う被写体の選択とかコンテンツに応じた塗りとかもあるんですが、画像の書き出しはWeb制作には欠かせないということで、まずはアセットについて書こうと思います。

アセットが登場するまでは、スライスツールを使って書き出しをしていた方も多いのではないかと思うんですが、私はどうもスライスが苦手でした。
（スライスの線がいっぱい重なったりしていると迷子になる）

そもそもスライスとは

スライスツールを使うことで、一枚の画像を切り分けて保存することができます。
レイヤーが重なっていてもスライスが指定してある部分は一枚の画像として書き出されます。
便利なんですが、一緒に書き出したくないレイヤーを非表示にしなくてはいけなかったり、スライスのために新規レイヤーに複製をしたりと手間がかかり、苦手でした。

スライスが設定されているデザインカンプだと、あ、この区切りで画像を書き出しているんだね。とわかりやすくていいのですが、修正が入った時に周辺の画像も併せて書き出す必要が出てくることもあるので、スライスを設定し直して…となんて手間なんだ。と思っていました。


話がとてもそれましたが、スライスで納品と指定されている以外は、苦手だったので当時からアセットの概念で画像を書き出していました。
どういうことかというと、画像にしたい部分のレイヤーをフォルダにまとめたり、切り抜きたい部分でマスクを適用して書き出していました。

アセットのここが好き

アセットを使用する場合も書き出したいレイヤーやフォルダにあらかじめ名前をつけて…という手間はあるのですが、そのレイヤー名やフォルダ名さえつけておけば保存するだけで自動で画像ファイルが生成されます！

保存するだけで複数のファイルを生成してくれる

アセットでの書き出しは倍率を指定して複数の画像を書き出せます。
この時使用している画像によってはボヤけてしまう可能性もあるので、スマートオブジェクトなどの画像のサイズもあらかじめ確認しておきます。

フォルダ名から指定できる

このように保存するフォルダも名前に含めておけば、コーディング時にも利用しやすくなります。

img/about/photo-01.jpg , 200% img/about/ photo-01@2x.jpg

エラーを教えてくれる

名前の付け方に失敗すると、error.txtファイルが作られ、名前の付け方に失敗している箇所を確認することができます。

さいごに

Figmaでもフォルダ名から名前をつけることができたら、書き出しがほんの少し楽になるかもしれないのに。