Photoshopの画像アセットで余白そのままで書き出しする方法

photoshop 画像アセット 余白 そのまま やり方

こんにちは!YOUKNOWです。

明日からはお盆なのでお休み中は更新を停止して、実家に帰省します。

そんなことよりも

Photoshopの画像アセットめっちゃ便利

なのですが、痒い所に手が届かないんだよなぁと思っていて、個人ではずっとSlicyを使っていました。

しかしお仕事だとインストールできるアプリケーションに制限があるため、画像アセットを使い始めました。

画像アセットには微妙な所があって、そのうちの一つが大きさ(余白を保ったまま)書き出しして欲しいのに!という時です。

画像アセットは、オブジェクトのサイズを基準にして書き出しを行うため、オブジェクトの大きさで書き出しされてしまい、意図的に余白を含ませたい時などに非常に不便です。

今回はその余白を保ったまま書き出す方法をご紹介します。

※PhotoshopCC2014以上が対象です。

Photoshopの画像アセットで余白そのままで書き出しする方法

とはいってもすっごく簡単ですが、

書き出ししたいレイヤー(グループ)にベクトルマスクを追加するだけです。

少し詳しく説明すると、書き出したいレイヤー(グループ)に画像アセット用の名前をつけて、(例:btn_assets.png)そのレイヤー(グループ)にベクトルマスクを追加します。

photoshop 画像アセット 余白 そのまま やり方

ベクトルマスクの追加方法は、ベクトルマスクを追加したいレイヤー(グループ)を選んで、レイヤーウィンドウの下の方にある■の中に●が書いてあるマークをクリックするだけです。

photoshop 画像アセット 余白 そのまま やり方

こうなればベクトルマスクが追加されています。

後はそのまま画像アセットのフォルダの中に、余白が保持されたまま書き出しされた画像があるはずです。