どうも、シンタローです。
この記事では、Photoshopでよく使っている「スライスからの書き出し」「画像アセットの生成」についての操作について説明しています。
最近Web系のエンジニアとして内定をもらい、その企業とは別の企業でコーダーとして大学卒業までアルバイトをすることになりました。
それまではPhotoshopやIllustratorなどのデザインツールを全く触ったことがなかったのですが、アルバイトをする中で当たり前のようにPhotoshopやIllustratorを使うので、今回はPhotoshopでよく使っている操作である「スライスして書き出しを行う」、「画像アセットの生成」について書いていきます。
なので、
コーダーのアルバイトをしたいと考えているけど、その際によく使うPhotoshopの機能について知りたい。「スライス」「書き出し」「画像アセット」って何のこと？
という方は是非読んでみてください。
コーダー（アルバイト）として働いている中で、よく使っているPhotoshopのスライス、画像アセットの生成の操作
コーダーとしてアルバイトをしている中でPhotoshopでよく「スライスして書き出し」を行なったり、「画像アセットの生成」を行ったりするので、それらについて説明していきます。
- スライスして書き出しを行う
- 画像アセットの生成
スライスして書き出しを行う
「スライスして書き出しを行う」という言葉を聞いて最初何のことを言っているのか分かりませんでした。
ここでいう「スライスする」とは「画像を切り出す」ということです。画像が複数枚あった際、それを分割する際に使います。
「書き出す」とは「ファイル形式を変える」ことです。Photoshopの場合、拡張子が.psdのPSDファイルを.jpgや.pngに変換することが多いです。
それでは、実際に「スライスして書き出しを行う」手順について説明していきます。
①ツールバーにある「スライスツール」を選択（スライスツールで指定した範囲を修正したい場合は「スライス選択ツール」を使用）
②スライスツールでスライスする範囲を囲う
③「ファイル」→「書き出し」→「Web用に保存」を選択
④スライスした部分をカーソルでドラッグして選択（今回は一枚の画像しかスライスしていないので必要なし）し、拡張子のタイプを選択。
⑤保存を押すと次のような画面が出てくるので名前を適当に指定し、場所は画像を保存したい場所に設定。またフォーマットは画像を選択し、設定は初期設定のままに。スライスに関しては2つ以上スライスした画像がある場合「すべてのユーザー定義スライス」を選択すると良い。
画像アセットの生成
先ほどは「スライスして書き出し」を行なっていましたが、Photoshop CC以降で追加された機能である「画像アセット生成」を使えばスライスを行わずとも画像を生成することができます。
画像アセット生成を使うメリットとしてはスライス作業を行わなくて良いことでしょう。1pxずれていたのでスライスし直すといった面倒な作業をしなくても済みます。
それではどのように画像アセットの生成を行うのか手順を追っていきます。
①レイヤーパネルで書き出したいレイヤーを選択、名前を変更し、拡張子に.jpg、.png、.gifのいずれかを指定。（複数枚書き出したい場合はレイヤーグループの名前を変更してあげれば良い）
②「ファイル」→「メニュー」→「画像アセット」
③これでPSDと同じ階層に「（PSDファイル名＋assets）」の形でフォルダが作成され、その配下に指定した画像が書き出される。
おわりに
ここまで、「スライスして書き出しを行う」「画像アセットの生成」を行う方法について書いてきました。
まとめると…
- スライスして書き出しを行う：スライスツールで書き出す範囲を選択→ファイルメニュー内にあるWeb用に保存を選択→拡張子を指定し、書き出す範囲を選択し保存→各種設定を行い保存
- 画像アセットの生成：書き出したいレイヤーの名前を拡張子を指定して変更→ファイルメニュー内にある画像アセットを選択
今後もデザインツールを使っていく中で重要だと感じた部分やよく使っているなあと感じた機能や操作については随時まとめていきたいと思います！
コメント