この記事を読むのに必要な時間は約 11 分です。
Photoshop(フォトショップ)のスライスツールの使い方を完全解説します。
フォトショ初心者やWebデザイン初心者の方にも分かりやすくスライスツールを解説!
スライスツールの基本操作から効率的な画像の書き出し方法までプロのデザイナーが優しく教えます。
この記事の目次
Webデザインやバナー制作等を行い、1つのPSDにデザインを作成します。
スライスツールを使うと各パーツ画像をJPGやPNGに書き出す際に、書き出しエリアやファイル形式・ファイル名などを指定して一括で書き出す事ができます。
特にWebデザイナーにとって必須となるツールの一つなので、使い方をマスターしましょう!
未導入の方はPhotoshop公式サイトで入手しておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
スライスを作成
更に素材にこだわりたい方はAdobeStockが最強です。(今なら素材を10点無料でダウンロード可能!)
商用利用可能な2億5000万点以上もの高品質素材が制作を加速させてくれますよ。
例えば左図のようなレイアウトの「画像のみ」をJPGで書き出してみましょう。
何も設定せずに書き出すと「デザイン全体が1枚のJPG」として書き出されます。
スライスを編集
スライスの名前を変更
[ スライスオプション ] が開くので [ 名前 ] に好きな名称を入力します。最後に右上の [ OK ] をクリックしたら完成!
書き出す前にファイル名を付けておくと後々楽ですよ。
中にスライスツールで設定したJPEG画像が入っています。
書き出しエリアと画像形式、ファイル名を設定して一括出力はサイト制作でよく使う機能です。
Photoshopを未導入の方はAdobe公式サイトで入手できますよ。
併せてチェックされてみませんか?
Photoshopで使える高品質なWEBデザインテンプレートです。
全て商用利用可能!
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。





全て商用利用可能!
Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。
下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。
制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート35選
デジタル媒体向けポートフォリオテンプレ素材35選
様々なモックアップテンプレート50選
下記記事で良質な素材を紹介しております。併せてチェックしてください!
以上、Photoshop(フォトショップ)のスライスツールの使い方についてでした。
スライスツールは特にWebデザインをしている方にとって必須となるツールの一つです。
1つの画面から複数の画像書き出しをスライスツール無しで行うと非常に面倒…
効率的な画像の書き出し方をマスターしておくとサイト制作の時間短縮に繋がりますよ!
ではまた!

ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はInDesign公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート35選はコチラ!
フォトショ基本操作





















バナーやUIをデザイン






様々な質感を再現








写真の雰囲気を激変させる























便利な画像加工テクニック




















機能追加・その他の機能










フォトショップのお困りごと








画像を激変!エフェクトPSD








その他Photoshop用の素材










