webコーダー必見! 最新のフォトショでスライス作業が超捗る〜!

全国のwebコーダーの皆様、いかがお過ごしでしょうか?お忙しいでしょうか?
忙しい中だと、最新技術の動向やら、普段使っているアドビ製品の最新バージョンの新機能について、なかなか目が行き届かない事も多いのではないでしょうか。まぁ、私も漏れなくその一人なのですが(笑)

作業の忙しい時期を乗り越えたので、作業効率化の為にワークフローのアップデートをしているさなか、Photoshop CC 2014において、すんばらしい機能を発見したので、是非ご紹介したいと思います。

今回のテーマはズバリ、「フォトショのスライス作業を超効率化!」です。

広告

これまでのスライス作業手順

webコーダーの皆様におかれましては、デザイナーからpsdファイルをポンと渡されて、「これ、コーディングしといて。スライスもお願いね。」なんて気さくに作業が降ってくることはよくあると思います。

そんな時、スライスの一般的な作業手順は…

手順1:
psdファイルをフォトショで開く

手順2:
スライスしたいレイヤーを選択する

手順3:
「レイヤー」→「レイヤーに基づく新規スライス」でスライスを作る

手順4:
「ファイル」→「web用に保存」

手順5:
スライスを選択してファイル形式を選択

手順6:
保存をクリック

手順7:
出力された画像ファイルのファイル名を変更

…ざっくりこんな感じだと思います。
これが最新のPhotoshop CC 2014だと…

これからのスライス作業手順

手順1:
psdファイルをフォトショで開く

手順2:
ファイル➡︎抽出をクリック

手順3:
スライスしたいレイヤーもしくはグループの名前を「ファイル名.jpg(もしくはpng)」等、出力したいファイル名に変更する。

はい、終わり!
上記の手順の中では一度も「保存」の操作はしていませんが…

psdファイルと同じ位置に、同名のフォルダが作られ、その中に先ほど名前をつけたファイル名で画像が出力されています。

背景だけ/前面のレイヤーだけ
スライスしたい場合

ちなみに、背景だけ/前面のレイヤーだけ出力したい場合でも、背景もしくは前面のレイヤーだけにファイル名をつければ…

■logo.png

■background.jpg

ちゃんと各レイヤー別に出力してくれてますね!

今回の件、日々ツールは進化しているということを改めて再認識いたしました。皆様もたまにはワークフローや使っているツール見直して作業効率化を促進してみてはいかがでしょうか。ご拝読いただき、ありがとうございました。

お問い合わせ

記事の感想・不明点・リクエストやWEBサイト制作の困りごとなど、お気軽にお寄せ下さい。

お問い合わせ

広告
Fundemicの最新情報

Fundemicの最新情報

FundemicのFacebookページでは、
制作実績とTECHブログの最新情報を掲載しております。

CTR IMG