この記事では、Photoshopでよく使っている「スライスからの書き出し」「画像アセットの生成」の操作について説明しています。コーダーとしてコーディングを行っていく中では必須の操作です！
それまでは、Photoshop（フォトショップ）やIllustrator（イラストレーター）などのデザインツールを全く触ったことがなかったのですが、Web制作のアルバイトをする中で、当たり前のようにPhotoshopやIllustratorを使うので、今回は、Photoshopでよく使っている操作である「スライスして書き出しを行う」、「画像アセットの生成」について書いていきます。
なので、
コーダーのアルバイトをしたいと考えているけど、その際によく使うPhotoshopの機能について知りたい。「スライス」「書き出し」「画像アセット」って何のこと？
という方は是非読んでみてください！
コーダー（アルバイト）として働いている中で、よく使っているPhotoshopのスライス、画像アセットの生成の操作
コーダーとしてアルバイトをしている中で、Photoshop（フォトショップ）でよく、「スライスして書き出し」を行なったり、「画像アセットの生成」を行ったりするので、それらについて説明していきます。
- スライスして書き出しを行う
- 画像アセットの生成
Photoshop（フォトショップ）で画像をスライスして書き出しを行う
「スライスして書き出しを行う」という言葉を最初に聞いたときは、何のことを言っているのか分かりませんでした…
ここでいう「スライスする」とは「画像を切り出す」ということです。画像が複数枚あった際にそれを分割する用途で使います。
「書き出す」とは「ファイル形式を変える」ことで、Photoshopの場合、拡張子が「.psd」のPSDファイルを「.jpg」や「.png」に変換することが多いです。
それでは、実際に「スライスして書き出しを行う」手順について説明していきます！
- STEP1
ツールバーにある「スライスツール」を選択（スライスツールで指定した範囲を修正したい場合は「スライス選択ツール」を使用）
- STEP2
スライスツールでスライスする範囲を囲う
- STEP3
「ファイル」→「書き出し」→「Web用に保存」を選択
- STEP4
スライスした部分をカーソルでドラッグして選択（今回は一枚の画像しかスライスしていないので必要なし）し、拡張子のタイプを選択
- STEP5
保存を押すと、次のような画面が出てくるので名前を適当に指定し、場所は画像を保存したい場所に設定。
またフォーマットは画像を選択し、設定は初期設定のままに。
スライスに関しては2つ以上スライスした画像がある場合「すべてのユーザー定義スライス」を選択すると良いです。
Photoshop（フォトショップ）で画像アセットの生成を行う
先ほどは「スライスして書き出し」を行なっていましたが、Photoshop CC以降で追加された機能である「画像アセット生成」を使えばスライスを行わずとも画像を生成することができます。
画像アセット生成を使うメリットとしては、スライス作業を行わなくて良いことでしょう。1pxずれていたのでスライスし直すといった面倒な作業をしなくても済みます。
- STEP1
レイヤーパネルで書き出したいレイヤーを選択、名前を変更し、拡張子に.jpg、.png、.gifのいずれかを指定（複数枚書き出したい場合はレイヤーグループの名前を変更してあげれば良い）
- STEP2
「ファイル」→「メニュー」→「画像アセット」
- STEP3
PSD と同じ階層に「（PSD ファイル名＋ assets）」の形でフォルダが作成され、その配下に指定した画像が書き出される。
結局、Photoshop（フォトショップ）のスライスと画像アセット生成のどちらを使えば良いのか？
Photoshop（フォトショップ）を使い始めた頃はスライスで書き出していましたが、現在は、画像アセットの生成を主に使っています。
画像アセットを使っている理由としては、以下です。
- Photoshopのオブジェクトを編集、変更した際に自動で書き出してくれるので、一度設定をするだけで済む
- 画像の重なりがある場合の書き出しがスライスに比べると圧倒的に楽
ただ、「このサイズで書き出したいけどサイズ変更が面倒」という時にはスライスも使ったりしています。
Photoshop（フォトショップ）でよく使う「スライスからの書き出し」「画像アセットの生成」｜まとめ
ここまで、Photoshop（フォトショップ）の「スライスして書き出しを行う」「画像アセットの生成」を行う方法について書いてきました
まとめると…
- スライスして書き出しを行う
- スライスツールで書き出す範囲を選択→ファイルメニュー内にあるWeb用に保存を選択→拡張子を指定し、書き出す範囲を選択し保存→各種設定を行い保存
- 画像アセットの生成
- 書き出したいレイヤーの名前を拡張子を指定して変更→ファイルメニュー内にある画像アセットを選択
以上、最後まで読んでいただきありがとうございました。
コメント
いつも参考になる記事をありがとうございます。画像を書き出すために、スライスとアセットの2つの方法があるとのことですが、シンタローさんは、この2つをどういう状況で使い分けされていますか？もしよろしければ、教えて頂けましたら幸いです。
記事を見ていただきありがとうございます！！
Photoshopを使い始めた頃はスライスで書き出していましたが、
今は画像アセットの生成を主に使っています。
画像アセットを使っている理由としては、
・Photoshopのオブジェクトを編集、変更した際に自動で書き出してくれるので、一度設定をするだけで済む
・画像の重なりがある場合の書き出しがスライスに比べると圧倒的に楽
という感じです。
ただ「このサイズで書き出したいけどサイズ変更が面倒」という時にはスライスも使ったりしています！
なるほど！確かにサイズ指定で書き出したい時には、スライスの方が便利ですね。よく分かりました、ありがとうございます。これからも記事楽しみにしています！
そうですね。たまに余白も含めて書き出すこともあるので！
記事を楽しみにしていただいて嬉しいです！！
こうさんに質問いただいた内容も記事の方に追加いたしました。