画像アセットで不具合？

Photoshopの「画像アセット」機能使っていますか？

レイヤー単位でWeb用の画像を書き出してくれる機能です。

例えば、レイヤー名を「○○○○.png」としておけば、そのレイヤーに含まれる部分だけを画像化できるので、透過画像を簡単に作れて便利ですね。

すでにウェブ制作においては無くてはならない機能ではないでしょうか。

画像アセットの使い方

①レイヤー名を書き出したいファイル名に変更
②ファイル　＞　生成　＞　画像アセット　を選ぶ
③開いているドキュメントと同じフォルダ内に新規フォルダができてその中に①でつけたファイル名の画像が書き出される

すっかりその便利さに頼り切っていた私ですが、先日つまずいたことがあったのでメモしておきます。

上では「レイヤー名を書き出したいファイル名に変更」としていますが、複数のレイヤーを組み合わせたものを1つの画像として書き出したいというパターンも多いと思います。

そんな場合は、書き出したいレイヤーをグループ化してそのレイヤーグループ名を書き出したいファイル名にすればOKです。

こんな感じですね。

これで画像アセットを使えば一気に書き出し完了！

・・・と思いきや、画像サイズがおかしい！？

カンバスサイズいっぱいに画像が入っているはずなのに、画像サイズがカンバスサイズよりも小さくなっています…。

拡大して確認すると右端が切れて書き出されていました。

レイヤーにマスクをかけていることが原因？

う～ん・・
はっきりとした原因がわからずモヤモヤが残りますが、以下の方法で解決できました！

①すべてを選択でカンバスサイズ全てを選択
②レイヤーグループを選択した状態でレイヤーマスクを追加

解決方法はわかりましたが、思わぬ落とし穴でした。
反映前に気が付いて良かったです。

便利な機能は積極的に使いたいですが、確認は怠ってはいけないと改めて感じました。

毎日欠かさずチョコレートを食べています。マイブームはマーブルチョコ。
丈夫な体が自慢です。

デザイン業務を担当しています。
最近、イラスト制作の機会が増えて仕事がますます楽しくなってきました。幅広く任せてもらえるようになったので、リピートしてもらえる仕事を心掛けていきたいです。