Photoshopでスライス機能を使う方法【初心者向け】
Photoshop（フォトショップ）で【スライス機能】を使う方法を初心者向けに解説した記事です。Webサイト用に分割して画像を保存したい時に使える機能です。初めてでも簡単に実践できるので、ぜひ試してみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Webサイト用の画像を作成する「スライス機能」の使い方を初心者向けに解説した記事です。
スライス機能は1つの画像を分割して複数の画像に書き出したい時に便利です。
やり方を覚えればすぐに実践できるので、自分で試してみてください。
(※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています)
目次
今回はスライス機能による画像の処理を行ってみるよ。
田島メンター！！スライス機能というのは何ですか～？
スライスを使うことで、1つの画像を複数の画像に一度に分割して保存できるんだ。
Webデザインでも使われる機能なので、覚えておくと便利だよ。実際にやってみよう。
はい！
スライス機能とは
スライス機能とは、1つの画像を複数に分割できる機能です。
スライス機能は切り抜きツールを発展させたもので、並べられた画像などを一度に切り抜くのに便利です。
この機能を使えば、Web ページに表示する画像を複数に分割し、1枚の画像のように表示できます。
今回は以下の画像をもとに、スライス機能を使って画像を書き出す方法を紹介します。
領域を指定する
まずは1つのつながった画像の中から、画像として書き出したい領域を指定します。
今回、指定方法として以下の2つを紹介します。
どちらを使っても大丈夫です。
個々に領域を指定する方法
まずは対象の画像を開きます。
次に、Photoshop画面の左側のツールバーにある切り抜きツールのアイコンを長押ししてください。
そうするとサブメニューが表示されるので、この中の「スライスツール」を選択します。
スライスツールが選ばれた状態で、画像として書き出したい領域の左上から右下にかけてドラッグし、四角形の画像領域を指定します。
すると、指定した領域の左上に「02✉」と表示され、その他の部分も自動で領域が作成され「01✉」「03✉」「04✉」といった具合に番号が付けられます。
同じようにして順次画像を指定していけば、すべての領域を指定できます。
また、自動の領域指定をうまく利用すれば領域を指定する回数を少なくできます。
ガイドに合わせて領域を指定する方法
もう1つの方法の紹介です。
まずガイドを表示するために、表示メニューの定規を指定します。
次に横の分割線1本と縦の分割線2本を引きます。
線を引くには、一度マウスを上端または左端の目盛のところに持って行き、そこから境界線の方向にマウスをドラッグします。
こうして3本の境界線を引きます。
この状態で先ほどのスライスツールを選びます。
（すでに選ばれていれば再度選択する必要はありません。）
すると、画面上部のオプションバーのところがスライスツール用になり、「ガイドに沿ってスライス」というボタンが表示されるので、そのボタンを押します。
この操作で、6枚の画像の領域が指定できました。
以上で領域の指定は完了です。
うーん、なかなか操作が難しいですね……
ガイドを使った方法もあるので、やりやすい方を使ってみよう。
分割ができたら、次は何をしたらいいんでしょうか？
画像の情報を設定して、「Web用に保存」を使用するよ。次の手順を見てみよう。
画像情報を登録する
続いて、画像を利用しやすいように情報の登録を行います。
ただし、画像の分割だけする場合は、この工程は飛ばしても構いません。
画像の情報を登録するにはスライス選択ツールを使います。
Photoshop画面左側のツールバーの切り抜きツールのアイコンを長押しすると、サブメニューが表示されるので、その中の「スライス選択ツール」という項目を選択します。
先ほど分割した画像の領域をダブルクリックすると、それぞれの画像用に入力ウィンドウが表示されるので必要事項を入力します。
なお、すべての項目を埋める必要はありませんので、必要な項目だけ入力してください。
情報の登録は以上です。
Web用に画像を保存する
最後に画像を保存します。
メニュー「ファイル」の「書き出し」の中にある、「Web用に保存」をクリックします。
単純に「保存」や「別名で保存」を選択しても、スライスツールで分割した画像は保存されません。
なので必ず「Web用に保存」を選ぶ必要があります。
Web用に保存画面が開くと、画像形式や画質などの調整ができるようになっています。
ここで保存のボタンを押します。
保存するフォルダを指定すると、中にimagesというフォルダが生成され、そこに先ほど分割した画像が保存されます。
スライス機能の使い方は以上です。
ファイル名を見ると、最初に指定したものに準拠した連番の名前になっているのが分かるね。
なるほど、管理しやすくていいですね。
スライスによる処理を行った画像を保存する場合は、いつものファイル保存ではなくてこの「Web用に保存」を使うということを忘れずに覚えておこう。
普段とは少し保存の手順が違うということですね。分かりました！
Photoshopを学習中の方へ
これで解説は終了です、お疲れさまでした。
- Photoshopを調べたけど分かりづらい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？
テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
