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画面左側のツールバーの切り抜きツールのアイコンを長押しすると、サブメニューが表示されるので、その中の「スライス選択ツール」という項目を選択します。
先ほど分割した画像の領域をダブルクリックすると、それぞれの画像用に入力ウィンドウが表示されるので必要事項を入力します。
なお、すべての項目を埋める必要はありませんので、必要な項目だけ入力してください。
情報の登録は以上です。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
Web用に画像を保存する
最後に画像を保存します。
メニュー「ファイル」の「書き出し」の中にある、「Web用に保存」をクリックします。
単純に「保存」や「別名で保存」を選択しても、スライスツールで分割した画像は保存されません。
なので必ず「Web用に保存」を選ぶ必要があります。
Web用に保存画面が開くと、画像形式や画質などの調整ができるようになっています。
ここで保存のボタンを押します。
保存するフォルダを指定すると、中にimagesというフォルダが生成され、そこに先ほど分割した画像が保存されます。
スライス機能の使い方は以上です。
ファイル名を見ると、最初に指定したものに準拠した連番の名前になっているのが分かるね。
なるほど、管理しやすくていいですね。
スライスによる処理を行った画像を保存する場合は、いつものファイル保存ではなくてこの「Web用に保存」を使うということを忘れずに覚えておこう。
普段とは少し保存の手順が違うということですね。分かりました！
Photoshopを学習中の方へ
これで解説は終了です、お疲れさまでした。
- Photoshopを調べたけど分かりづらい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？
テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
