こんにちは山形です。いつもは開発系の記事だけですがたまにはプログラマー目線でデザインツールの使い方でも書いてみたいと思います。
さてWeb制作には欠かせないPhotoshopですがデザイナーが作成したデータを貰ってプログラマーがWeb用画像を書きだすなんてこともたまにあるかと思います。
なんとなく保存はできたものの「あれ、そんなファイル名なの…」とか「いやいやどこに保存してんだよ」「そのファイルいらねえし！」みたいな事が起きた場合の対処方法をまとめました。
Photoshopスライスツールとは
そもそもまずはソレ何？旨いの？という話はこちらからどうぞ。
シンプルな使い方としては「スライスツールで範囲を選択」＞「Web用に保存メニューから形式を選んで保存」です。
Web用に保存のショートカット
shift + option + command + S です。（windowsはコマンドの代わりにcontrol）
通常の保存が command + S なのでそこに shift + options が加わった形ですね。
今回の素材
PAKUTASOさんから選びました。
クオリティの高い画像が無料で使えるのでブログには最適ですね。
画像名を変える（ファイル名に _3 とかいらない）
まずはここ。いざ保存したファイル名に “_”（アンダースコア）と番号がふられてて削除するのめんどくさい！と思いますよね。
そんな時はスライスした範囲を右クリックして出てくるコンテキストメニューから”スライスオプションを編集…”を選択し、”スライスの種類”を”イメージ”に選択した状態で名前の欄を変えましょう。
こうしておくとWeb用に保存の時のファイル名と違くても先に設定した名前が優先されます。_3とかもつきません。
そもそも１つしか保存してないのに _3 ってなんだ？と僕は思ったのですが、スライスで囲った範囲の上に１と書いてある範囲があり左に２がありますので、画像の左上から自動で分割して番号をふるんですね。
フォルダ名を変える（いつでも images とは限らない。もしくはいらない）
デフォルトだとスライス画像が一枚でもimagesフォルダに入れて保存されますよね。
これはこれで便利な時もあるんだけど（imagesフォルダをまだ作成していない時とか？）名前変えたいとかフォルダにいれないでほしい時もあります。
そんな時はWeb用に保存のパネルから一番右上にあるメニューを開いて出力設定の編集を開きましょう。
現れたウィンドウから”ファイルの保存”を選択します。
一番下の範囲に”画像をフォルダーに保存”という項目があるので、フィールドに任意の名前を入力するかチェックを外すとフォルダーが作成されないようになります。
スライスを分割
スライス領域を右クリックして”スライスを分割”を選択するとできます。
縦横を等間隔に分割設定できます。
あまり使いどころ無い感じしますが、例えばグリッドレイアウトされている場合とか一つずつ範囲選択するよりは早いかもしれないですね。その場合、各要素の隙間があると適応できないですが…
テーブルレイアウト時代の名残なのかも。
保存と同時に縮小（Retina用素材から、非Retina用にしたい場合とか）
最近はどんどんスマートフォンのアクセスが増えてきてますよね。半分以上スマフォユーザーのサイトも珍しくないんじゃないでしょうか。
高精細なディスプレイ用に大きめにデザインしてもらうのはいいんですが、一旦保存したファイルを開いて小さくしてまた保存…とかめんどくさいですよね。
そんな時に役立つのがWeb用に保存パネルの右下にある”画像サイズ”オプションです。
ここでサイズを指定すれば縮小版とかを作ってくれます。
ただ気をつけてください！このサイズは全体の画像サイズです。なのでスライスに設定したつもりでいると出来上がる画像のサイズが違うので戸惑います（ました）。あと同時に２つのサイズを保存してくれるわけではありません！
また画質の選択肢が以下のように別れておりそれぞれに特性があります。
ニアレストネイバー法
一番単純な拡大・縮小が行われます。ドットをそのまま扱う感じなので縮小するとカーブが大分ギザギザします。逆に小さいカンバスでドット絵を書いて大きくする場合にはこれを使うのが最適です。写真の縮小には向いてないと思います。
バイリニア法
ピクセルの色濃度を元に平均値を求めて空いたピクセルを補うという方法みたいです。機械的に平均値を計算するだけなので元画像に含まれていない色が含まれる可能性があり若干画質が劣るようです。
バイキュービック法（デフォルト）
これがデフォルトの設定です。バイリニア法が平均値の計算だけだったのに対して、元画像に含まれる周辺の色も考慮に入れて計算するようです。なのでバイリニア法に比べるとより自然な仕上がりになるかもしれません。
バイキュービック法（滑らか）
バイキュービック法の計算を調整したものですね。素人には何が変わったのかわかりませんが、暗い色の境界のエッジが目立ってしまう場合に使うと良いようです。
バイキュービック法（シャープ）
これもバイキュービック法の計算を調整したもので、暗い色の領域のエッジをもっと目立たせたい場合に使うと良いようです。
こちらを参考にしました：PhotoShopで最適な画像保存をする為に。ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。
htmlも生成する（tableとかダサいのでcssでクラス指定で）
あんまり使うことは無いと思いますが、Web業界が長い人には胸アツのtableレイアウトか、Web標準なcssのhtmlコードを出力してくれます。
これはまずフォルダ名を変更した時と同じWeb用に保存のパネルから一番右上にあるメニューを開いて出力設定の編集を選択します。
現れた出力設定からまずはHTML設定を選択します。
ここではhtmlの書き方の設定ができます。そのまま使うことはあまりないと思うので適当でいいと思いますが僕はインデントが半角スペース２文字にしてほしいので以下のようにしました。
次にスライス設定に切り替えます。
tableレイアウトとかもう滅んでいいと思うけど、htmlメールにはまだ必要なんですかね。htmlメール作ったこと無いのでよくわかりませんが。とりあえずcssを選択しました。
好みですがid属性を降ることも出来るようです。何度も言いますがここで出力したhtmlをそのまま使うことなんてほぼ無いと思うので適当でいいと思います。
で、保存すると (psdファイル名).html と images フォルダが作成されます。
htmlを開いてみるとこんな表示なっていたのでPhotoshop上でスライスした見た目がそのまま表現されるってことですね。
まとめ
どうでしたでしょうか。以外にも細かいオプションがあって普段スルーしていた自分には結構驚きでした。
特にファイル名なんかはいちいち保存してから修正していると意外と時間かかるんですよね。例え１ファイルに５秒しか短縮できないとしても、日々の積み重ねで１００個直せば８分半かかると考えればなかなか侮れません。
