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

シンタロー

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

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

関連記事

文系未経験の僕が自社開発系のWebエンジニアになりました！〜就職活動について〜

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

aka-shin.com

2020.02.22

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

なので、

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

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

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

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

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

シンタロー

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

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

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

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

画像アセットの生成

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

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

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

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

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

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

という感じです。

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

おわりに

シンタロー

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

まとめると…

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

関連記事

知識が0の状態からコーダーになるなら、どういう風に勉強していくか

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

aka-shin.com

2020.01.18