デザインのヒント /

Web制作者必見!Photoshop CC のアセット機能を使って社内分業の効率を上げるコツ

はじめに

Photoshop CC に新たに導入されたアセット機能。みなさんは使っていますか?このアセット機能はとても便利な機能ですが、ある程度大規模な制作で複数人で分業をする際はあらかじめルールを作っておくとより効率良く作業を行うことができます。 今回はまだ使ってないと言う人もすでに活用している人も押さえておきたいチームで作業を行う時に気をつけておきたいことをまとめてみました。    

アセット機能のおさらい

そもそもアセット機能とはどんな機能なのか。おさらいします。 アセット機能は Adobe Photoshop CC に追加された新機能で、Photoshop上のレイヤーやフォルダに一定のルールに沿って名前をつけると、自動的にWeb用の画像として専用フォルダ(アセットフォルダ)に書き出してくれる機能です。今までのスライスツールで切り出す方法と比べ、かなり時間短縮ができるようになりました。    

その1 チーム全員がPhotoshop CCを使う

CCでない人がPSD上の画像を修正してWeb用に書き出そうとした場合、アセット機能がないため画像の修正がアセットフォルダに反映されません。そうした場合、新たにスライスするか、CCが使える人にもお願いして修正することになります。二度手間になってしまいとても非効率です。当たり前ですがプロジェクトに関わる人はみんながPhotoshop CCを使うことが大前提になります。    

その2 画像名はデザイナーが決める

プロジェクトをデザイナー/コーダーで分業して行う場合、画像名はPSDファイルに一番よく触れるデザイナーが決めるべきです。デザインによっては複雑になってしまいがちなPSDファイル。コーダーがアセットの画像名を決めるためには、まず、 作られたPSDファイルの構造を知る必要が出てきます。デザイナーがコーディングのことも意識してPSD内のフォルダ分け/画像名をつけておけば、コーダーはPSDファイルに手を加える必要がなくなります。そのためにはデザイナーはコーディングを考えたデザインをする必要がありますが効率は格段にアップします。また、チームやプロジェクト全体でコーディングガイドラインなどがあればより効率化ができます。(コーディングガイドラインについてはまた次の機会に)    

その3 アセットでは切り出せない画像はスライスする

便利この上ないアセット機能ですが、書き出せない(書き出しが苦手な)画像もあります。そうした場合はスライスツールを使ってスライスします。下記のような画像はアセットでは書き出しができません。   アセットが苦手な画像   ・リピートして使う背景画像 アセットはレイヤーの大きさで画像を生成するので、レイヤーの一部分のみを切り出して背景画像として使用する場合はスライスする必要があります。 ・透過GIF 現在のPhotoshop CC(2014年9月現在)のアセット機能では、GIFのマット部分(透明部分との境界線)の色を指定することは出来ません。 ・カンバスサイズからはみ出している画像 アセット機能では、画像がPhotoshopのカンバスからはみ出していてもフルサイズで書き出しを行います。はみ出している箇所を書き出したくない場合はレイヤーマスクなどの処理をする必要があります。    

いかがでしたでしょうか?

Photoshop CC にはアセット機能以外にも作業効率が格段にアップする機能がたくさんあります。まだCCにしてない方はぜひ検討してみてはいかがでしょうか? (Adobeの回し者みたいになってしまいましたね…)

この記事を書いた人

斧山

PAGE TOP