【Photoshop】スライスツールの使い方を徹底解説forフォトショ初心者

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）のスライスツールの使い方を完全解説します。

Webデザインのパーツや複数のバナーを書き出す際に便利なスライスツール。
フォトショ初心者やWebデザイン初心者の方にも分かりやすくスライスツールを解説します！

基本操作から効率的な画像の書き出し方法まで現役プロのデザイナーが優しく教えます。

この記事の目次

スライスツールとは？

Webデザインやバナー制作等を行い、1つのPSDにデザインを作成します。
スライスツールを使うと各パーツ画像をJPGやPNGに書き出す際に、書き出しエリアやファイル形式・ファイル名などを指定して一括で書き出す事ができます。

特にWebデザイナーにとって必須となるツールの一つなので、使い方をマスターしましょう！

スライスツールの使い方

スライスツールの使い方と画像の書き出し方を解説します。
主にWebデザイナーの方がよく使うツールですよ！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

スライスを作成

STEP.1

フォトショップでデザインを作成

フォトショップでデザインを作成します。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

例えば左図のようなレイアウトの「画像のみ」をJPGで書き出してみましょう。

何も設定せずに書き出すと「デザイン全体が1枚のJPG」として書き出されます。

STEP.2

スライスツールに切り替える

[ スライスツール ] に切り替えます。

ツールバーに無い場合は [ … ] アイコンからツールバーを編集しましょう。
詳しい方法はコチラで解説しています。

STEP.3

ドラッグでスライスを作成

スライスツールで書き出したい個所をドラッグで囲みます。
すると自動的にスライスが作成されます。

FINISH

スライスの作成完了

他の画像も同様にスライスツールでドラッグし、スライスを作成します。

オプション設定

Photoshop画面上部のオプション内容です。スタイルは初期設定では [ 標準 ] になっていますが、[ 縦横比を固定 ] と [ 固定 ] が選択でき、幅と高さが指定できます。
なお、[ ガイドに沿ってスライス ] はガイドを設定した際に有効化されます。

スライスを編集

STEP.1

編集したいスライスを選択

スライスを作成中にエリアサイズを修正したり削除したくなりますよね。

スライスツールの状態で [ Ctrl ] (Mac：Command) を押しながら編集したいスライスをクリックします。
するとクリックしたスライスがオレンジ色の線で囲われて選択されます。

STEP.2

ドラッグでスライスを変形

スライスエリアの上にカーソルを合わせ、ドラッグで変形する事ができます。

STEP.3

スライスの削除方法

削除したいスライスを選択し、[ Delete ] または [ Back Space ] を押すと選択スライスを削除できます。

Photoshop画面上部の [ 表示 ] → [ スライスを消去 ] で全スライスを削除できます。

※スライスを消去のすぐ上にある [ スライスをロック ] を有効にすると、スライスが編集できなくなります。

スライスの名前を変更

スライスツールの状態で [ Ctrl ] (Mac：Command) を押しながら名称を変更したいスライスをダブルクリックします。

[ スライスオプション ] が開くので [ 名前 ] に好きな名称を入力します。最後に右上の [ OK ] をクリックしたら完成！

書き出す前にファイル名を付けておくと後々楽ですよ。

画像の書き出し方法

STEP.1

Web用に保存を開く

[ Alt + Shift + Ctrl + S ] を同時押しすると [ Web用に保存 ] が開きます。
Macは [ Option + Shift + Command + S ]

[ ファイル ] → [ 書き出し ] → [ Web用に保存(従来) ] でもOK。
Webデザイナーならショートカットがオススメですよ！

STEP.2

書き出したい画像を選択

書き出したい画像を選択します。
[ Ctrl ] (Mac：Command) を押しながクリックすると複数選択できます。

画面右側で画像形式と画質を選択します。
サンプルは [ JPEG ] の [ やや高画質 ] を選択しました。

設定が完了したら右下の [ 保存 ] をクリックします。

STEP.3

保存場所を指定

[ 最適化ファイルを別名で保存 ] のダイアログ画面が開きます。

保存したい場所を選択します。
サンプルはデスクトップを指定。

フォーマット：画像のみ
設定：初期設定
スライス：選択したスライス

右下の [ 保存 ] をクリックしましょう。

FINISH

書き出しの完了

デスクトップに [ imagesフォルダ ] が自動的に作成されます。
中にスライスツールで設定したJPEG画像が入っています。

書き出しエリアと画像形式、ファイル名を設定して一括出力はサイト制作でよく使う機能です。
未導入の方はAdobe公式サイトで入手できますよ。

スライスツールを使ったバナー制作

アートボードツールを活用して1つのPSD内に複数のバナーデザインをする方法について解説しています。スライスツールを使った効率的な書き出し方法も解説！
併せてチェックされてみませんか？

【Photoshop】アートボードを使ったバナーを複数作る方法

【Photoshop】スライスツールで複数のバナーを書き出す方法【GDN・YDA対応】

高品質なWEBデザインテンプレート

Photoshopで使える高品質なWEBデザインテンプレートです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。

#01 Business Website Layout with Blue Accents

コーポレートサイトに向いているデザインカンプテンプレートです。
ブルーの差し色は簡単に別の色に変更できます。

ダウンロード

#02 4 Web Pages on a Smartphone Mockup

スマホ用のWebデザインカンプ4パターンセットです。
モバイル主体のサイトを考えられている方にオススメ！

ダウンロード

#03 Web Site Questionnaire Layout for Health Coach

フィットネス系のサイトデザインに適したテンプレートです。
もちろん画像とテキスト内容を変更するとフィットネス以外の分野でも活用が可能です。

ダウンロード

#04 User Interface E-Commerce Website Page Layout Set

通販サイトのデザインカンプです。
汎用的なレイアウトなのでどんなECサイトにも合うでしょう。

ダウンロード

#05 Personal Website Layout with Yellow Accents

様々なサイトで使える汎用的なWebサイトテンプレートです。
個人・企業、何でも使えます。

ダウンロード

Photoshop用とIllustrator用のバナーテンプレート

【商用可】Webサイトのデザインカンプ用テンプレート35選！サイトデザインを瞬殺【Photoshop・Illustrator】

フォトショップとイラストレーター用の高品質なWEBデザインテンプレート35選です。
全て商用利用可能！

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート45選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）のスライスツールの使い方についてでした。

スライスツールは特にWebデザインをしている方にとって必須となるツールの一つです。
1つの画面から複数の画像書き出しをスライスツール無しで行うと非常に面倒…
効率的な画像の書き出し方をマスターしておくとサイト制作の時間短縮に繋がりますよ！

ではまた！