読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

【Photoshop】効率的に「web用に書き出し」ができないか考えてみました。

Webデザイン Photoshop

f:id:takahironakamori:20160204102437j:plain

ウェブサイトの実装を行う場合に、デザインデータをPSDファイルでいただく場合があります。そして、いただいたPSDファイルから画像部分をJPEGやPNGに書き出し、HTMLに挿入します。最近、この「書き出し作業」に時間がかかっているのではないか?という疑問を感じたので、「書き出し作業」を見直すことにしました。

なぜ「書き出し作業」に時間がかかるのか?

例えば、上図のあんぱんの画像を「あんぱん」の画像文字と「背景のあんぱん」を分けて書き出す場合のいままでの私の手順は次の通りです。(…理由はおいておいて)

基本的には、

f:id:takahironakamori:20160204103442j:plain

スライスツールで、1つずつ書き出しています。

具体的には、まず、「背景のあんぱん」のレイヤーを非表示にして…

f:id:takahironakamori:20160204103526j:plain

① 丁寧にスライス
② スライスを選択して「Web用に保存(従来)」
③ pngを選択して、確認して書き出し。

次は、「背景のあんぱん」の画像です。

f:id:takahironakamori:20160204103800j:plain

① 丁寧にスライスして「あんぱん」の画像化文字のスライスを削除して、「あんぱん」の画像化文字を非表示します。
② 「背景のあんぱん」の画像をスライスして「Web用に保存(従来)」

いままで10年以上、いろいろなウェブサイトを作ってきましたが、書き出しの方法は特に変わっていませんでした。Fireworkを使って「ここはこうスライスして、ここはspacer.gifを使うから…」とか考えていたときが懐かしいです。

最近のPSDファイルは、画像の数が多かったり、PSDファイルの容量が大きくなっているため、上記の作業のようにしていると時間がかかります。上記の方法だと、1ページの実装時間より書き出し作業の方が時間がかかるというケースもありそうです。そこで、少し書き出し方法を考えてみたのが、次の「PNGとしてクイック書き出し」を使う方法です。

PNGとしてクイック書き出し

f:id:takahironakamori:20160204103131j:plain

「あんぱん」の画像化文字だけを書き出したい場合は、

① 書き出したい「あんぱん」レイヤーを選択し、
②「PNGとしてクイック書き出し」を選択し、保存します。

これで、

f:id:takahironakamori:20160204104718j:plain

いい感じに書き出せています。僕の場合は、ファイル名を都度変更したいので、レイヤーメニュー内の「PNGとしてクイック書き出し」を使っています。

「PNGとしてクイック書き出し」は、不必要なレイヤーを非表示にしなくていいのも助かります。今までのやり方だと非表示にしたレイヤーを表示し忘れて書き出しをミスしたことも多々あります。このようなミスも防げそうです。

ちなみに、

f:id:takahironakamori:20160204104741j:plain

「レイヤーに基づく新規スライス」だと、レイヤー効果をつかている場合は、スライスがずれてしまい使えません。

しかし、「PNGとしてクイック書き出し」にも注意しなければならない点があります。

「PNGとしてクイック書き出し」の注意点

f:id:takahironakamori:20160204105051j:plain

上図のように「背景のあんぱん」の画像は、実はアートボードからはみ出している部分があります。このようにアートボードからはみ出している部分がある場合は、レイヤーを選択して、「PNGとしてクイック書き出し」しても思うように書き出なかったです。

レイヤーマスクなどを試しましたが…。

f:id:takahironakamori:20160204105321j:plain

クリッピングマスクを用いたら思うように書き出せました。上図の場合は、マスクのレイヤーを選択して、「PNGとしてクイック書き出し」をします。でも、クリッピングマスクで対応は、スライスツールを使う書き出しとあんまり変わらないかもしれないなぁ…。

まとめて書き出し

「あんぱん」の画像化文字と「背景のあんぱん」をまとめて1つの画像として書き出したい場合は、グループを活用するとうまくいきました。

f:id:takahironakamori:20160204105500j:plain

① 1つの画像にしたいレイヤーをグループにまとめて
② 書き出したいグループを選択して、
③「PNGとしてクイック書き出し」を選択し、保存します。

f:id:takahironakamori:20160204111945p:plain

AdobeCreativeStationを見て新機能をチェック

PhotoshopもIllustratorも10年以上使っていますが、新機能はやっぱり一度は勉強しないといけないと思います。私の場合は、YoutubeにAdobeCreativeStationというチャンネルがあり、それを見ています。

www.youtube.com

下の動画のように新しい機能をいろいろ紹介してくれていますので、それを見たりしています。


WEB_01 | 新しいWeb制作フローwith Creative Cloud 2015 | Adobe Live 2015 - Best of MAX

東京まで行かなくてもいいし、本買わなくても勉強できるようになってよかったなーと思ったりします。