
この記事では、Photoshopでよく使っている「スライスからの書き出し」「画像アセットの生成」の操作について説明しています。コーダーとしてコーディングを行っていく中では必須の操作です!
最近Web系のエンジニアとして内定をもらい、その企業とは別の企業でコーダーとして大学卒業までアルバイトをすることになりましたシンタローです。
関連記事

それまではPhotoshopやIllustratorなどのデザインツールを全く触ったことがなかったのですが、アルバイトをする中で当たり前のようにPhotoshopやIllustratorを使うので、今回はPhotoshopでよく使っている操作である「スライスして書き出しを行う」、「画像アセットの生成」について書いていきます。
なので、

コーダーのアルバイトをしたいと考えているけど、その際によく使うPhotoshopの機能について知りたい。「スライス」「書き出し」「画像アセット」って何のこと?
という方は是非読んでみてください!
コーダー(アルバイト)として働いている中で、よく使っているPhotoshopのスライス、画像アセットの生成の操作
コーダーとしてアルバイトをしている中でPhotoshopでよく「スライスして書き出し」を行なったり、「画像アセットの生成」を行ったりするので、それらについて説明していきます。
- スライスして書き出しを行う
- 画像アセットの生成
Photoshopで画像をスライスして書き出しを行う

僕自身「スライスして書き出しを行う」という言葉を聞いて最初何のことを言っているのか分かりませんでした。
ここでいう「スライスする」とは「画像を切り出す」ということです。画像が複数枚あった際にそれを分割する用途で使います。
「書き出す」とは「ファイル形式を変える」ことで、Photoshopの場合、拡張子が.psdのPSDファイルを.jpgや.pngに変換することが多いです。
それでは、実際に「スライスして書き出しを行う」手順について説明していきます!
画像アセットの生成
先ほどは「スライスして書き出し」を行なっていましたが、Photoshop CC以降で追加された機能である「画像アセット生成」を使えばスライスを行わずとも画像を生成することができます。
画像アセット生成を使うメリットとしてはスライス作業を行わなくて良いことでしょう。1pxずれていたのでスライスし直すといった面倒な作業をしなくても済みます。
それではどのように画像アセットの生成を行うのか手順を追っていきます。
結局スライスと画像アセット生成のどちらを使えば良いの?
Photoshopを使い始めた頃はスライスで書き出していましたが、現在は画像アセットの生成を主に使っています。
画像アセットを使っている理由としては、
- Photoshopのオブジェクトを編集、変更した際に自動で書き出してくれるので、一度設定をするだけで済む
- 画像の重なりがある場合の書き出しがスライスに比べると圧倒的に楽
という感じです。
ただ「このサイズで書き出したいけどサイズ変更が面倒」という時にはスライスも使ったりしています。
おわりに

ここまで、「スライスして書き出しを行う」「画像アセットの生成」を行う方法について書いてきました。
まとめると…
- スライスして書き出しを行う → スライスツールで書き出す範囲を選択→ファイルメニュー内にあるWeb用に保存を選択→拡張子を指定し、書き出す範囲を選択し保存→各種設定を行い保存
- 画像アセットの生成 → 書き出したいレイヤーの名前を拡張子を指定して変更→ファイルメニュー内にある画像アセットを選択
今後もデザインツールを使っていく中で重要だと感じた部分やよく使っているなあと感じた機能や操作については随時まとめていきたいと思います!
関連記事

コメント
いつも参考になる記事をありがとうございます。画像を書き出すために、スライスとアセットの2つの方法があるとのことですが、シンタローさんは、この2つをどういう状況で使い分けされていますか?もしよろしければ、教えて頂けましたら幸いです。
記事を見ていただきありがとうございます!!
Photoshopを使い始めた頃はスライスで書き出していましたが、
今は画像アセットの生成を主に使っています。
画像アセットを使っている理由としては、
・Photoshopのオブジェクトを編集、変更した際に自動で書き出してくれるので、一度設定をするだけで済む
・画像の重なりがある場合の書き出しがスライスに比べると圧倒的に楽
という感じです。
ただ「このサイズで書き出したいけどサイズ変更が面倒」という時にはスライスも使ったりしています!
なるほど!確かにサイズ指定で書き出したい時には、スライスの方が便利ですね。よく分かりました、ありがとうございます。これからも記事楽しみにしています!
そうですね。たまに余白も含めて書き出すこともあるので!
記事を楽しみにしていただいて嬉しいです!!
こうさんに質問いただいた内容も記事の方に追加いたしました。