スライスの書き出しで一部はjpgなのに、pngにできない原因の対処をご案内します。
Photoshopスライス保存で、名前が変更できなくてどうしたらよいかわからない方のために、効率的な保存方法をお伝えします。
複数のファイルを同時に書き出す便利なPhotoshopスライスはWeb用に保存から行います。
今ではレスポンシブやリキッドレイアウトが主流で従来の方式になりつつありますが、どんな使い方があるのか探ってみましょう。
目次
PhotoshopスライスをPNGにするには
Photoshopのスライスはデフォルトでは、以前にWeb用に保存していた保存形式をすべてのスライスに踏襲（引き継ぐ）するようになっています。
これをスライス個々に保存形式を変更すれば、.png形式で保存することが可能です。
通常のカンバスで、スライスツールを使ってスライスをダブルクリックすると出てくるウィザードでは、主に書き出しの名前の情報しか出てきません。
しかし、保存形式を変更するにはWeb用に保存画面で行います。
スライスをpngにするには、Web用に保存画面で個々にスライス部分を選択して書き出し形式を設定するということになります。
一括で全て変更されることはないので、個別にpngにしていく必要があります。
前回Web用に保存した形式を踏襲するので、一旦pngで何かを保存しておいてから、pngにしたいファイルを新規にWeb用に保存すれば「すべてpng」で保存することができます。
前回JPEG標準で他のファイルで書き出しをしている場合、何も選択して設定していない場合は、右下のオレンジのスライスはJPEG標準になっています。
このように１枚のファイルでスライスでは書き出し形式は、pngとjpgとバラバラに混在することが可能です。
最初はすべてのスライスが前回形式なので、各スライスを選択してpngにできますね。
Photoshopスライスの作り方をおさらい
スライスツールを使う
スライスは、切り抜きツール(c)の中にあります。
- スライスツール
- スライス選択ツール
２種類のスライスツールがあり、スライスツールは分割する領域を文字通りスライスするツールで、スライス選択ツールはスライスされた領域を選択するツールです。
スライス選択ツールは、一つのスライスをコピーして均等な領域を別の場所に作ることもできます。⌥オプションキーを押しながら移動することでスライスの複製が可能です。
レイヤーに基づく新規スライス
スライスツールではなくても、スライスすることができます。
レイヤー＞レイヤーに基づく新規スライス
から、レイヤー領域をそのままスライスする方法もあるんですね。
こちらは、スライスツールでドラッグして作ったスライスと違い、スライス選択ツールで複製⌥オプションを押しながらが使えません。
そもそも、スライスを選択しても四つ角に切り抜きマークの四角が出てこないのです。レイヤーに基づく場合は、スライスツールで刻んだ時とは扱いが違います。
レイヤーで領域ができあがっている場合は、こちらの方法が断然速くスライスできるのが特徴です。
Photoshopスライスの名前
保存名を変更する場合は、スライスをダブルクリックします。
- スライスツール選択ツールで、カンバス上でダブルクリック
- Web用に保存画面で、スライス部分をダブルクリック
スライス名前変更の情報は、.psdの中に保存されるので閉じてしまっても次回開く時に保存名は保たれています。
Photoshop複数の書き出しフォルダ
複数ファイルを書き出す場合は、Web用に保存ウィンドウの右上にある項目から、書き出しフォルダを設定しておくと便利です。
出力設定の編集…を選択すると出力設定の画面になります。
ファイルの保存を選択します。
画像をフォルダーに保存をチェックして、「images」などフォルダ名を設定すれば保存した時にフォルダが作成され、その中にスライス書き出しした複数ファイルが保存され便利です。
デスクトップに保存して、ファイル一面で埋もれる。。なんてこともなくなりますね。
スライスって今更？機能と書き出し形式
Web用に保存にも（従来）という表記があるように、確かに今のWebでは今更感があります。
Retinaディスプレイで@2x画像や解像度違いが書き出しできる「書き出し形式」が主流です。
スライスは過去のツールというか、今は逆でCSSスプライトを使う方法なんかは、発想が真逆でスライスしないで画像をつないで一枚の画像にしてURLリクエストの数をできるだけ減らそう、ファイルサイズもトータルでは軽減されるよという流れになっています。
スライスでは等倍にしか書き出すことができません。書き出し形式はスライスは無視されるというか非対応です。
スライス＝Web用に保存なのですね。
エラーになる原因等は、こちらの記事を参考にしてください。
書き出し形式を使う方法
スライスでは、スライスツールとレイヤーに基づくスライスがあることをご説明しましたが、レイヤーに基づくと同じような感覚で「書き出し形式…」も行えます。
レイヤー＞書き出し形式…
から行えます。これは、
ファイル＞書き出し＞書き出し形式…
の場合と異なり全面ではなく、レイヤー部分だけを対象に書き出しが可能です。
レイヤー項目にある「PNG としてクイック書き出し」も、レイヤーだけを対象に保存できます。
あとがき
今回は、Photoshopでスライスpng保存できないところから始まりましたが、スライスをつかわなくても頭の中でWebデザインのコーディングを想定して書き出しを考えられるようになれば最高かなと思います。
過去のツールとなりますが、元々@2xで作っておくことが普通となってきているので、とはいえまだまだ場面によっては使い所があるPhotoshopスライスです。
参考にしていただければ幸いです。
