Adobe Photoshopの「画像アセット」（Image Asset）機能は、PSDファイルからさまざまな形式の画像ファイル（JPG、PNG、GIF、SVGなど）を簡単に生成できる便利な機能です。

今回は、この機能の使い方を初心者向けに詳しく解説します。

是非、最後までお読みください。

PSDファイルとは？

PSDファイルは、Adobe Photoshopで作成されるデザインファイルです。

Webデザインやグラフィックデザインのプロジェクトで主に使用され、画像やテキストなどの要素がレイヤーとして保存されます。

画像アセット機能とは？

画像アセット機能を使えば、PSDファイル内の画像や要素を、設定したフォーマットとサイズで簡単にエクスポートできます。

この機能を利用することで、同じデザインを異なる形式で利用したり、Webサイトやアプリに組み込む準備がスムーズになります。

画像アセットの機能の使い方

①書き出したいレイヤーに拡張子をつける　(jpg/png/svg/gifの4種類が作成可能)

サイズを指定するときはレイヤー名の前に記述します。

・200% example.jpg → サイズ 200%

※%とレイヤー名の間には半角スペースを入れましょう。

②メニューバー:「ファイル」>「生成」>「画像アセット」の順に選択し、チェックがついたらOK！

③assetsフォルダが生成されたのを確認

Photoshopデータの保存場所が決まっている場合は、そのフォルダー内にassetsフォルダが自動生成されます。

決まっていない場合はデフォルトの場所(デスクトップ)に生成されます。

これで完了です！

画像アセットの注意点

スマートオブジェクトに変換したレイヤーを200%のサイズで画像アセット生成したときに、レイヤーのファイル形式の違いにより画像がボヤけることがあるので注意しましょう。

まとめ

Web制作では画像のエクスポートが頻繁に行われます。

作業効率を上げたい方は、ぜひ「画像アセット」機能を活用してみてください。