クリエイティブ

Photoshopスライス書き出しPNGにできない理由!名前の変更方法も

Photoshopスライス

スライスの書き出しで一部はjpgなのに、pngにできない原因の対処をご案内します。

Photoshopスライス保存で、名前が変更できなくてどうしたらよいかわからない方のために、効率的な保存方法をお伝えします。

複数のファイルを同時に書き出す便利なPhotoshopスライスはWeb用に保存から行います。

今ではレスポンシブやリキッドレイアウトが主流で従来の方式になりつつありますが、どんな使い方があるのか探ってみましょう。

PhotoshopスライスをPNGにするには

Photoshopのスライスはデフォルトでは、以前にWeb用に保存していた保存形式をすべてのスライスに踏襲(引き継ぐ)するようになっています。

これをスライス個々に保存形式を変更すれば、.png形式で保存することが可能です。

通常のカンバスで、スライスツールを使ってスライスをダブルクリックすると出てくるウィザードでは、主に書き出しの名前の情報しか出てきません。

しかし、保存形式を変更するにはWeb用に保存画面で行います。

Photoshopスライス部分を選択してpngに

スライスをpngにするには、Web用に保存画面で個々にスライス部分を選択して書き出し形式を設定するということになります。

一括で全て変更されることはないので、個別にpngにしていく必要があります。

前回Web用に保存した形式を踏襲するので、一旦pngで何かを保存しておいてから、pngにしたいファイルを新規にWeb用に保存すれば「すべてpng」で保存することができます。

スライス保存形式は前回を踏襲

前回JPEG標準で他のファイルで書き出しをしている場合、何も選択して設定していない場合は、右下のオレンジのスライスはJPEG標準になっています。

このように1枚のファイルでスライスでは書き出し形式は、pngとjpgとバラバラに混在することが可能です。

最初はすべてのスライスが前回形式なので、各スライスを選択してpngにできますね。

Photoshopスライスの作り方をおさらい

スライスツールを使う

スライスは、切り抜きツール(c)の中にあります。

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

2種類のスライスツールがあり、スライスツールは分割する領域を文字通りスライスするツールで、スライス選択ツールはスライスされた領域を選択するツールです。

スライス選択ツールは、一つのスライスをコピーして均等な領域を別の場所に作ることもできます。⌥オプションキーを押しながら移動することでスライスの複製が可能です。

レイヤーに基づく新規スライス

レイヤーに基づく新規スライス

スライスツールではなくても、スライスすることができます。

レイヤー>レイヤーに基づく新規スライス

から、レイヤー領域をそのままスライスする方法もあるんですね。

こちらは、スライスツールでドラッグして作ったスライスと違い、スライス選択ツールで複製⌥オプションを押しながらが使えません。

そもそも、スライスを選択しても四つ角に切り抜きマークの四角が出てこないのです。レイヤーに基づく場合は、スライスツールで刻んだ時とは扱いが違います。

レイヤーで領域ができあがっている場合は、こちらの方法が断然速くスライスできるのが特徴です。

Photoshopスライスの名前

保存名を変更する場合は、スライスをダブルクリックします。

  • スライスツール選択ツールで、カンバス上でダブルクリック
  • Web用に保存画面で、スライス部分をダブルクリック
スライス名前

スライス名前変更の情報は、.psdの中に保存されるので閉じてしまっても次回開く時に保存名は保たれています。

Photoshop複数の書き出しフォルダ

複数ファイルを書き出す場合は、Web用に保存ウィンドウの右上にある項目から、書き出しフォルダを設定しておくと便利です。

Web用に保存画面の右上項目

出力設定の編集…を選択すると出力設定の画面になります。

出力設定

ファイルの保存を選択します。

画像をフォルダーに保存をチェックして、「images」などフォルダ名を設定すれば保存した時にフォルダが作成され、その中にスライス書き出しした複数ファイルが保存され便利です。

デスクトップに保存して、ファイル一面で埋もれる。。なんてこともなくなりますね。

スライスって今更?機能と書き出し形式

Web用に保存にも(従来)という表記があるように、確かに今のWebでは今更感があります。

Retinaディスプレイで@2x画像や解像度違いが書き出しできる「書き出し形式」が主流です。

スライスは過去のツールというか、今は逆でCSSスプライトを使う方法なんかは、発想が真逆でスライスしないで画像をつないで一枚の画像にしてURLリクエストの数をできるだけ減らそう、ファイルサイズもトータルでは軽減されるよという流れになっています。

スライスでは等倍にしか書き出すことができません。書き出し形式はスライスは無視されるというか非対応です。

スライス=Web用に保存なのですね。

エラーになる原因等は、こちらの記事を参考にしてください。

Web用に保存するエラー画面
【検証】PhotoshopでWeb用に保存できない原因と書き出し形式Web用に保存できない場合は、Photoshopのサイズ制限を超えている場合を先ず疑ってみる必要があります。 続いて、macOSと...

書き出し形式を使う方法

スライスでは、スライスツールとレイヤーに基づくスライスがあることをご説明しましたが、レイヤーに基づくと同じような感覚で「書き出し形式…」も行えます。

レイヤー書き出し形式

レイヤー>書き出し形式…

から行えます。これは、

ファイル>書き出し>書き出し形式…

の場合と異なり全面ではなく、レイヤー部分だけを対象に書き出しが可能です。

レイヤー項目にある「PNG としてクイック書き出し」も、レイヤーだけを対象に保存できます。

あとがき

今回は、Photoshopでスライスpng保存できないところから始まりましたが、スライスをつかわなくても頭の中でWebデザインのコーディングを想定して書き出しを考えられるようになれば最高かなと思います。

過去のツールとなりますが、元々@2xで作っておくことが普通となってきているので、とはいえまだまだ場面によっては使い所があるPhotoshopスライスです。

参考にしていただければ幸いです。