WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

かと

2022/08/08

【Photoshop】スライスツールで簡単に!Web画像の書き出し方!

投稿者: かと
カテゴリー: デザイン >Photoshop

「画像の中で一部分だけ切り取りたい。」「一つのデータでまとめて作ったアイコンをそれぞれ一つずつ保存したい。」と思ったことはありませんか?
今回はPhotoshopの便利な機能を使って、画像を好みの大きさに切り取って保存する方法をご紹介します!

使用する機能

今回使うPhotoshopの機能はスライスツールです。

スライスツールの使い方

まずはツールバーの切り抜きツールを長押ししてスライスツールを選択します。

次に書き出したい部分の端から端を選択します。

スライスツールで書き出したい部分を囲むことができると、指定した部分は左上にスライスの番号と茶色の線で囲われます。他の書き出したい部分も同様にスライスツールで選択することができます。

スライスした線を修正する

スライスツールで囲んだ際に、ズレてしまったり、範囲の大きさを変えたい場合は修正することができます。

カーソルを選択した茶色の線に合わせると範囲が修正できます。

スライスの消し方

一部のスライスを消す場合

一部のスライスだけ消したい場合は、消したいスライスの部分をctrlキーを押しながらクリックして選択します。選択できたらdeleteキーを押すと消すことができます。

すべてのスライスを消す場合

すべてのスライスを消したい場合は、メニューバーの「表示 → スライスを削除」をクリックするとすべてのスライスを消すことができます。

書き出し方

書き出したい範囲を作ることができたら、次は書き出してみましょう。

まず、メニューバーの「ファイル → 書き出し → Web用に保存(従来)」を押します。
保存パネルが表示されます。
内容が確認できたら「保存」ボタンをクリックします。

書き出されたファイルを確認すると、複数のファイルが書き出されています。
一部のみ保存したい場合は、保存パネル後に表示されるパネルで変更できます。

スライスツールで囲んだ部分だけを書き出したい場合は、保存パネル後に表示されるパネルで、スライス:「すべてのスライス」から「すべてのユーザー定義スライス」に変更して保存をします。
スライスツールで囲んだ中の1つを書き出したい場合は、書き出したいスライスを選択し、保存パネル後に表示されるパネルで、スライス:「すべてのスライス」から「選択したスライス」に変更して保存をします。

選択したスライスのみ書き出されました。

まとめ

このようにスライスツールを使うだけで簡単に書き出したい部分だけ画像にすることができます。
便利な機能ですので、ぜひ使ってみてください。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ