【初心者脱却】Photoshopでよく使う「スライスからの書き出し」「画像アセットの生成」とは?

Photoshopでよく使っている「スライスからの書き出し」「画像アセットの生成」についてPhotoshop
シンタロー
シンタロー

この記事では、Photoshopでよく使っている「スライスからの書き出し」「画像アセットの生成」の操作について説明しています。コーダーとしてコーディングを行っていく中では必須の操作です!

 

最近Web系のエンジニアとして内定をもらい、その企業とは別の企業でコーダーとして大学卒業までアルバイトをすることになりましたシンタローです。

 

関連記事

文系未経験の僕が自社開発系のWebエンジニアになりました!〜就職活動について〜
この記事では僕が実際に行ったエンジニアとしての就職活動について書いています。Web系のエンジニア職としての就活です。文系の僕でもエンジニアとして自社開発系企業から内定をいただくことができたので、Webエンジニアとして就職や転職を考えている方の参考になればと思っています。

 

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

 

なので、

コーダーのアルバイトをしたいと考えているけど、その際によく使うPhotoshopの機能について知りたい。「スライス」「書き出し」「画像アセット」って何のこと?

 

という方は是非読んでみてください!

 

コーダー(アルバイト)として働いている中で、よく使っているPhotoshopのスライス、画像アセットの生成の操作

コーダーとしてアルバイトをしている中でPhotoshopでよく「スライスして書き出し」を行なったり、「画像アセットの生成」を行ったりするので、それらについて説明していきます。

 

  • スライスして書き出しを行う
  • 画像アセットの生成

 

Photoshopで画像をスライスして書き出しを行う

 

シンタロー
シンタロー

僕自身「スライスして書き出しを行う」という言葉を聞いて最初何のことを言っているのか分かりませんでした。

 

ここでいう「スライスする」とは「画像を切り出す」ということです。画像が複数枚あった際にそれを分割する用途で使います。

 

「書き出す」とは「ファイル形式を変える」ことで、Photoshopの場合、拡張子が.psdのPSDファイルを.jpgや.pngに変換することが多いです。

 

それでは、実際に「スライスして書き出しを行う」手順について説明していきます!

 

①ツールバーにある「スライスツール」を選択(スライスツールで指定した範囲を修正したい場合は「スライス選択ツール」を使用)

ツールバーにあるスライスツールを選択

 

②スライスツールでスライスする範囲を囲う

スライスツールでスライスする範囲を囲う

 

③「ファイル」→「書き出し」→「Web用に保存」を選択

ファイルメニューを選択しWeb用に保存を選択

 

④スライスした部分をカーソルでドラッグして選択(今回は一枚の画像しかスライスしていないので必要なし)し、拡張子のタイプを選択

拡張子のタイプを選択

 

⑤保存を押すと次のような画面が出てくるので名前を適当に指定し、場所は画像を保存したい場所に設定。またフォーマットは画像を選択し、設定は初期設定のままに。スライスに関しては2つ以上スライスした画像がある場合「すべてのユーザー定義スライス」を選択すると良いです

画像の保存を行う

 

画像アセットの生成

先ほどは「スライスして書き出し」を行なっていましたが、Photoshop CC以降で追加された機能である「画像アセット生成」を使えばスライスを行わずとも画像を生成することができます。

 

画像アセット生成を使うメリットとしてはスライス作業を行わなくて良いことでしょう。1pxずれていたのでスライスし直すといった面倒な作業をしなくても済みます。

 

それではどのように画像アセットの生成を行うのか手順を追っていきます。

 

①レイヤーパネルで書き出したいレイヤーを選択、名前を変更し、拡張子に.jpg、.png、.gifのいずれかを指定(複数枚書き出したい場合はレイヤーグループの名前を変更してあげれば良い)

レイヤーパネルで書き出したいレイヤーを選択し、名前を変更(拡張子に.jpg、.png、.gifのいずれかを指定)

 

②「ファイル」→「メニュー」→「画像アセット」

「ファイル」→「メニュー」→「画像アセット」

 

③これでPSDと同じ階層に「(PSDファイル名+assets)」の形でフォルダが作成され、その配下に指定した画像が書き出される。

画像アセットが生成される

 

結局スライスと画像アセット生成のどちらを使えば良いの?

Photoshopを使い始めた頃はスライスで書き出していましたが、現在は画像アセットの生成を主に使っています。

 

画像アセットを使っている理由としては、

  • Photoshopのオブジェクトを編集、変更した際に自動で書き出してくれるので、一度設定をするだけで済む
  • 画像の重なりがある場合の書き出しがスライスに比べると圧倒的に楽

という感じです。

 

ただ「このサイズで書き出したいけどサイズ変更が面倒」という時にはスライスも使ったりしています。

 

おわりに

 

シンタロー
シンタロー

ここまで、「スライスして書き出しを行う」「画像アセットの生成」を行う方法について書いてきました。

 

まとめると…

  • スライスして書き出しを行う → スライスツールで書き出す範囲を選択→ファイルメニュー内にあるWeb用に保存を選択→拡張子を指定し、書き出す範囲を選択し保存→各種設定を行い保存

 

  • 画像アセットの生成 → 書き出したいレイヤーの名前を拡張子を指定して変更→ファイルメニュー内にある画像アセットを選択

 

今後もデザインツールを使っていく中で重要だと感じた部分やよく使っているなあと感じた機能や操作については随時まとめていきたいと思います!

 

関連記事

知識が0の状態からコーダーになるなら、どういう風に勉強していくか
この記事では「コーダーとして働くために必要な技術やスキル、勉強方法」について書いています。この記事を書いている僕自身は、現在(2020/01/17)、Web制作会社でコーダーとしてアルバイトしており、2020年4月からはWebエンジニアとして働く予定です。

 

コメント

  1. こう より:

    いつも参考になる記事をありがとうございます。画像を書き出すために、スライスとアセットの2つの方法があるとのことですが、シンタローさんは、この2つをどういう状況で使い分けされていますか?もしよろしければ、教えて頂けましたら幸いです。

    • シンタローシンタロー より:

      記事を見ていただきありがとうございます!!

      Photoshopを使い始めた頃はスライスで書き出していましたが、
      今は画像アセットの生成を主に使っています。

      画像アセットを使っている理由としては、
      ・Photoshopのオブジェクトを編集、変更した際に自動で書き出してくれるので、一度設定をするだけで済む
      ・画像の重なりがある場合の書き出しがスライスに比べると圧倒的に楽
      という感じです。

      ただ「このサイズで書き出したいけどサイズ変更が面倒」という時にはスライスも使ったりしています!

      • こう より:

        なるほど!確かにサイズ指定で書き出したい時には、スライスの方が便利ですね。よく分かりました、ありがとうございます。これからも記事楽しみにしています!

        • シンタローシンタロー より:

          そうですね。たまに余白も含めて書き出すこともあるので!
          記事を楽しみにしていただいて嬉しいです!!

          こうさんに質問いただいた内容も記事の方に追加いたしました。