【Photoshop】画像を複数枚トリミングして出力！便利な画像アセットの使い方

こんにちは、suzutoです。

Web制作をしていて、画像を用意する時に指定のサイズの画像を用意することってありますよね。でも一枚一枚トリミングするのが面倒くさい・・・と思ったことはありませんか？

Photoshopの「画像アセット機能」を使うと簡単に複数枚の画像をトリミングして出力することができるんです。

今回はそんな画像アセット機能の使い方を解説していきます。

僕も普段Web制作などで画像を複数枚編集する機会があって、一枚一枚編集していたら結構大変なんです。そんな時はこのアセット機能を使うと楽になります。

普段の作業にお役立てください。

Photoshopの画像アセット機能を使って複数枚の画像をトリミングする方法

画像を複数枚トリミングする方法は以下の通りです。

1. 画像を用意する
2. トリミングしたい画像サイズのアートボードを新規作成
3. 画像をアートボードに埋め込んでいく
4. レイヤー名を変更
5. Photoshopファイルを保存
6. 画像を書き出し

上記の手順で画像を作っていきます。

画像を用意する

まずはベースの画像を用意します。サイズはバラバラでもOKですが、リサイズしたいサイズより大きいサイズの画像を用意する必要があります。

なぜならサイズが足りないと画像を引き伸ばすことになり解像度が荒くなったり、トリミングが大変になるからです。

フリーの素材をお探しなら「O-DAN (オーダン）」がおすすめです。

トリミングしたい画像サイズのアートボードを新規作成

Photoshopを起動して新規アートボードを作成します。

出力したい画像サイズを指定してください。今回は例として「600×250(幅×高さ)」の画像を作ってみます。

画像をアートボードに埋め込んでいく

Photoshopメニューから「ファイル」→「埋め込みを配置」を選択して、先ほど保存した画像を一枚ずつ開いてアートボードに埋め込んでいきます。

アートボードの白い部分が見えないように埋め込んでください。（大きめに埋め込む分にはOK）

注意として、埋め込むときに縦横比を変更してしまうと、画像がおかしくなってしまうので縦横比を保ったまま埋め込みます。

一枚目が終わったら「ファイル」→「埋め込みを配置」で次の画像を埋め込んでいきます。

二枚目の画像は一枚目の画像と被って埋め込みがしにくくなってしまうので、レイヤーの目のマークを押して下の画像は非表示にすると作業がしやすくなります。

例としてお城の画像を三枚埋め込んでみました。レイヤーは上の画像の通りです。

レイヤー名を変更

埋め込みが完了したら、次に画像のレイヤー名を変更します。

出力したい画像の名前と拡張子を含んだ名前に変更します。（例として「01.jpeg」「02.jpeg」「03.jpeg」）

名称は何でも大丈夫ですが、出力したい画像の拡張子（「.jpeg」「.png」「.svg」など）はしっかり付けてください。

拡張子を適切につけないと画像が出力されません。

Photoshopファイルを保存

レイヤーに名前を付けたら、一度Photoshopデータ「.psd」を保存します。

Photoshopメニューから「ファイル」→「別名で保存」で任意の場所に保存してください。

※Photoshopファイルを保存した場所に画像が出力されますので、かならず自分がわかる場所に保存してください。

画像を書き出し

Photoshopデータを保存したら画像を書き出していきます。

Photoshopメニューの「ファイル」→「生成」→「画像アセット」を選択します。

選択したら、Photoshopファイルを保存した場所に画像が入ったフォルダが出力されます。

今回は例としてデスクトップにPhotoshopデータを保存したので、デスクトップにアセットフォルダが作成されました。中を確認してみると、レイヤーにつけた名前で画像ができています！

【まとめ】Photoshopでアセット機能を使う

今回はPhotoshopで便利なアセット機能の使い方を解説しました。もう一度手順をおさらいしましょう！

1. 画像を用意する
2. トリミングしたい画像サイズのアートボードを新規作成
3. 画像をアートボードに埋め込んでいく
4. レイヤー名を変更
5. Photoshopファイルを保存
6. 画像を書き出し

ポイントは「レイヤーに拡張子付きの名前をつけること」と「Photoshopデータを画像を出力させたい場所に保存すること」です。

地味だけどかなり使える機能なので、作業の時間短縮や効率化にお役立てくださいな。