このレシピはあくまで作業を効率よく行うための小技を紹介するものであり、美しいデザインを作るためのチュートリアルとは異なります

はじめに

PSDから画像を書きだすのってめんどくさい

CSS3が一般的になり、Webサイトでできる表現の幅が増えて、デザイナーさんたちは俄然いろんな工夫がほどこされたサイトデザインに挑戦してみたいはず。

ですが、コーディングをするにあたって、ちょっと凝った効果を使いたかったり、複雑なデザインにしようとすればするほど、画像の書き出しってスーパーめんどくさいですよね。

今回は、そんな不満をちょっとだけ解消してくれるかもしれない、意外と知られていない便利機能をご紹介しようかと思います。

レイヤーごとに1枚の画像に書き出し

たとえば、このようなデータがあったとします。

これを、パーツごとに切り分けてpngにしたい場合みなさんはどうしますか?

ひとつひとつスライスツールで切り分けてもいいのですがこの場合は
もっと簡単な方法があります。

「ファイル」→「スクリプト」→「レイヤーをファイルに書き出し」

を選んでください。

このようなダイアログが表示されるかと思います。

とりあえず、この設定で「実行」をクリックしてみましょう。

実行結果が上記画面です。おわかりいただけますでしょうか。

つまり各レイヤーのデータを1枚の画像として保存するといういたって単純な作業をPhotoshopが自動的にやってくれているのです。

こんな便利な機能があったのに案外見過ごしていた方、多いんじゃありませんか?

各項目の設定

では、ダイアログの設定方法です。

①ファイルの保存先

ここで選択したフォルダに画像一式が書き出されます

②ファイル名の先頭文字

書き出したファイルは

「《先頭文字》_《通し番号》_《レイヤー名》.《拡張子》」

という名前で保存されます。

③ファイル形式

下記の形式への書き出しが可能です。

  • BMP
  • JPG
  • PDF
  • PSD
  • Targa
  • TIF
  • PNG-8
  • PNG-24

④背景透過(PNGの場合)

チェックを入れると透過PNGに、チェックをはずすと白い背景が付きます。

⑤レイヤーをトリミング(PNGの場合)

チェックを入れるとそのレイヤーのアウトラインで自動的にトリミングされた画像にチェックをはずすとカンバスサイズを維持した画像にそれぞれ書き出されます。

いかがでしょうか。

このやり方を覚えておくとたとえば最近よく見るパララックスなど透過画像を何枚も重ねるようなデザインのコーディングでだいぶ手間が省けるのではないかと。

うまく使って効率よく制作を進めてみてくださいね。