Photoshopでスライス機能を使う方法【初心者向け】

Photoshop(フォトショップ)で【スライス機能】を使う方法を初心者向けに解説した記事です。Webサイト用に分割して画像を保存したい時に使える機能です。初めてでも簡単に実践できるので、ぜひ試してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Webサイト用の画像を作成するときに必須の機能「スライス機能」の使い方を初心者向けに解説した記事です。

やり方を覚えればすぐに実践できるので、自分で試してみてください。

 

なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。

(※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)

 

田島悠介

今回はスライス機能による画像の処理を行ってみるよ。

大石ゆかり

田島メンター!!スライス機能というのは何ですか~?

田島悠介

スライスを使うことで、ひとつの画像を複数の画像に一度に分割して保存できるんだ。Webデザインでも使われる機能なので、覚えておくと便利だよ。実際にやってみよう。

大石ゆかり

はい!

 

スライス機能とは

スライス機能とは、画像を複数に分割できる機能です。スライス機能は切り抜きツールを発展させたもので、並べられた画像をいっぺんに切り抜くのに便利です。

この機能を使えば、Web ページに表示する画像を複数に分割し、1枚の画像として表示することもできます。

今回はこの画像をもとに、スライス機能を使って画像を整理する方法を紹介します。

元画像

 

 

作業の流れ

今回は下記3つの流れで紹介します。

  1. 領域を指定する
  2. 画像情報を登録する
  3. Web用に画像を保存する

 

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

1.領域を指定する

まずはつながった画像の中の領域を指定します。

今回、指定方法はとして2つを紹介します。どちらを使っても大丈夫です。

 

個々に領域を指定する方法

まずは対象の画像を開きます。次にPhotoshop画面の左側のツールボックス内の切り抜きツールのアイコンを、ドラッグしたまま保持してください。

そうするとサブメニューが表示されるので「スライスツール」を選択します。

スライスツール

 

スライスツールが選ばれた状態で、指定したい画像領域の左上と右下を指定して、四角形に画像領域を指定します。

領域指定

 

すると自分で選んだ領域が02✉と表示され、その他も自動で領域分割され01✉、03✉、04✉といった具合に記号が付けられます。

領域指定2

 

同じようにして順次画像を指定していけば、全ての領域を指定することができます。

領域指定3

また、自動の領域指定をうまく利用すれば領域を指定する回数を少なくできます。

 

ガイドに合わせて領域を指定する方法

もう1つの方法の紹介です。

まずガイドを表示するために、表示メニューの定規を指定します。

定規

 

次に横の分割線1本と縦の分割線2本を引きます。線を引くには、一度マウスを上端または左端の目盛のところに持って行き、そこから境界線の方向にマウスをドラッグします。こうして3本の境界線を引きます。

領域指定4

 

この状態で先ほどのスライスツールを選びます。(すでに選ばれていれば再度指定する必要はありません。)

すると、ツールバーのところがスライスツール用になり、「ガイドに沿ってスライス」というボタンが表示されるので、そのボタンを押します。

ガイドに沿ってスライス

これで6枚の画像に分割されます。

領域指定5

以上で領域の指定は完了です。

 

大石ゆかり

うーん、なかなか操作が難しいですね……

田島悠介

ガイドを使った方法もあるので、やりやすい方を使ってみよう。

大石ゆかり

分割ができたら、次は何をしたらいいんでしょうか?

田島悠介

画像の情報を設定して、「Web用に保存」を使用するよ。次の手順を見てみよう。

 

2.画像情報を登録する

続いて、画像を利用しやすいように情報の登録を行います。ただし、画像の分割だけする場合はこの工程は飛ばしても構いません。

 

画像の情報を登録するにはスライス選択ツールを使います。

Photoshop画面左側のツールの中の切抜きツールのアイコンにマウスを合わせ、ドラッグすると、サブメニューが表示されるので、その中の「スライス選択ツール」という項目を選択します。

スライス選択ツール

 

先ほど分割した画像の領域をダブルクリックすると、それぞれの画像用に入力ウインドウが表示されるので必要事項を入力します。

なお、全ての項目を埋める必要はありませんので、必要な項目だけ入力してください。

スライスオプション

情報の登録は以上です。

 

 

3.Web用に画像を保存する

最後に画像を保存します。

ここで注意が必要なのは、「Web用に保存」という処理をしなければ結果が保存されず、全ての作業内容が消えてしまうということです。

単純に「保存」「別名で保存」でをしてもスライス結果は保存されませんので、必ず「Web用に保存」を選ぶ必要があります。

 

まずファイルメニューの「Web用に保存」を選びます。

Web用に保存

 

ここで画像の調整と保存用のウインドウが開きます。

保存用ウインドウ

ここで保存のボタンを押します。

 

保存するフォルダを選択すると、指定した場所にimageというフォルダが生成され、そこに先ほど分割した画像が保存されています。

完了

 

スライス機能の使い方は以上です。

 

田島悠介

ファイル名を見ると、最初に指定したものを準拠にした連番の名前になっているのが分かるね。

大石ゆかり

なるほど、管理しやすくていいですね。

田島悠介

スライスによる処理を行った画像を保存する場合は、いつものファイル保存ではなくてこの「Web用に保存」を使うということを忘れずに覚えておこう。

大石ゆかり

普段とは少し保存の手順が違うということですね。分かりました!

 

さらにPhotoshopを使いこなしたい場合は、Photoshopで色を置き換える方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。