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

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

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

監修してくれたメンター

ノマリカ

印刷会社で校閲とDTPオペレーションを5年、Web制作会社でデザイナーを8年、一般企業でWeb担当を1年経験した後、フリーランスのデザイナーとして独立。
伝わりやすくて明快なデザインを得意としている。

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

スライス機能は1つの画像を分割して複数の画像に書き出したい時に便利です。

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

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

目次

 

田島悠介

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

大石ゆかり

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

田島悠介

スライスを使うことで、1つの画像を複数の画像に一度に分割して保存できるんだ。

Webデザインでも使われる機能なので、覚えておくと便利だよ。実際にやってみよう。

大石ゆかり

はい!

 

スライス機能とは

スライス機能とは、1つの画像を複数に分割できる機能です。

スライス機能は切り抜きツールを発展させたもので、並べられた画像などを一度に切り抜くのに便利です。

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

今回は以下の画像をもとに、スライス機能を使って画像を書き出す方法を紹介します。

スライス対象の画像

 

領域を指定する

まずは1つのつながった画像の中から、画像として書き出したい領域を指定します。

今回、指定方法として以下の2つを紹介します。

どちらを使っても大丈夫です。

 

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

まずは対象の画像を開きます。

次に、Photoshop画面の左側のツールバーにある切り抜きツールのアイコンを長押ししてください。

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

スライスツールを選択

 

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

画像内の範囲を選択

 

すると、指定した領域の左上に「02✉」と表示され、その他の部分も自動で領域が作成され「01✉」「03✉」「04✉」といった具合に番号が付けられます。

自動でスライス領域が作成されている様子

 

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

他の領域も指定します

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

 

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

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

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

定規

 

次に横の分割線1本と縦の分割線2本を引きます。

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

こうして3本の境界線を引きます。

境界にガイドを引いた様子

 

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

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

ガイドに沿ってスライスボタン

 

この操作で、6枚の画像の領域が指定できました。

6枚の画像にスライスされた様子

 

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

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

画像情報を登録する

続いて、画像を利用しやすいように情報の登録を行います。

ただし、画像の分割だけする場合は、この工程は飛ばしても構いません。

 

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

Photoshop画面左側のツールバーの切り抜きツールのアイコンを長押しすると、サブメニューが表示されるので、その中の「スライス選択ツール」という項目を選択します。

スライス選択ツールを選択

 

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

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

スライスオプションのダイヤログ

情報の登録は以上です。

 

Web用に画像を保存する

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

メニュー「ファイル」の「書き出し」の中にある、「Web用に保存」をクリックします。

Web用に保存を選択

単純に「保存」や「別名で保存」を選択しても、スライスツールで分割した画像は保存されません。

なので必ず「Web用に保存」を選ぶ必要があります。

 

Web用に保存画面が開くと、画像形式や画質などの調整ができるようになっています。

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

Web用に保存画面の様子

 

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

画像が保存されている様子

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

Photoshopを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • Photoshopを調べたけど分かりづらい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

Photoshopの学習や情報収集をしていて、このように思ったことはありませんか?

テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。