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

公開日: : 最終更新日:2015/12/18 作業効率化

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

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

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

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

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

そんな時、スライスの一般的な作業手順は…
 
手順1:
psdファイルをフォトショで開く

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

scene1-2

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

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

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

 
手順6:
保存をクリック

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

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

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

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

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

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

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

scene2-4

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

 

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

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

■logo.png

■background.jpg

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

google ad

関連記事

途切れたボタン画像

【IE8】透過pngにopacityアニメ!jquery.belatedPNG.jsで画像がボヤける・切れる時の対処方法

IE8で透過PNG画像にopacityで半透明アニメーションをかけたい時、jquery.belate

記事を読む

google ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

PAGE TOP ↑