days

日々の徒然

【Photoshop】アートボード+画像アセットで待ち時間を減らして作業効率UP!

スポンサーリンク


f:id:aya_ino:20180728161817j:plain

 

アートボードを使えばいいことづくめ

PhotoshopCC 2015からアートボードが扱えるようになってから数年が経ちましたが、割と最近アートボードを使うようになりました。
バナーの色違いや差分を1つのファイルで並べて見比べながら作れたり、トップページのホバー状態を書き分けたり、PC/スマホでの表示を隣に並べながら作ったり、使いだしたらとても便利で使わないわけにいかない機能です。
並べてデザインを見られるという点も良いのですが、通常、普通にPSDデータとして使用する場合、長さのMAXは3万ピクセルまでで、それ以上大きくすることはできません。(そこまで長いサイトは個人的には超非推奨ですが、どうしてもそうなってしまうことが残念ながらままあります…)


そんなときにアートボードを利用すると、拡張子はPSDではなくPSBになってしまいますが、3万ピクセル以上のデータを作ることが可能になります。
※アートボードでも3万ピクセル以内のサイズであればPSDで保存できます。

逆に言うとアートボードを使用しなくても、拡張子をPSBにすれば3万ピクセル以上のものは作れますが、修正で長さが変わってしまうことが多い場合、カンバスサイズをいちいち調整していたらそれこそストレスです。
重いデータであればサイズ変更のたびに数分の時間ロスです。ましてやページ数が多かったら…((((;゚Д゚))))

アートボードならマウス操作で縦横幅のサイズをすぐに変更できますから、アートボード推奨っ。


アートボードを知らなかった時代には、3万ピクセルになる前に画像を区切って別ファイルで分割して保存していました。
今思うとなんという時間の無駄…。

そんなわけで、もう、アートボードなくしてはサイトデザインはできません。
ってくらい大事です。


アートボードのデメリット?

しかし、便利なアートボードですが一つだけ不満点がありました。

「(ファイルサイズによっては)書き出しが遅い!」

という点です。


自分が扱う案件は1枚700M overはザラという過酷なものがありまして。
毎回ここで待ち時間で時間を無駄に費やしていました。
なにせ、書き出しの間に別の仕事をやろうと他のソフトなどをいじっているとPhotoshohpが落ちたり、書き出しに失敗したりするのです。特にIllustratorを同時起動していると落ちる確率大です_ノ乙(、ン、)_
PCのスペックはそこそこに良いはずなのに…嗚呼諸行無常。

 

通常、アートボードで作成したデータをJPGなりPNGなりに書き出すときには「ファイル→書き出し→(*任意の書き出し方法。自分は「アートボードからファイル」を使用)」となると思われますが、ちょっとばかり重いデザインの場合、書き出しに数分かかります。


なのでクライアントの確認用などにサイトデザインをJPGに保存するとき、修正などがあった時に結構な時間のロスになっていました。
「書き出し」を使わなくても通常の「保存」でも画像は作れますが、カンバスサイズに自分が作ったつもりの範囲と違う余白などが入ってしまい、おかしなことになってしまいます。
(この調整はどこかでできるのかもしれませんが、さらっと調べた結果未だわかっていません。ご存じの方良かったらお教えください…m(_ _)m)
結局「保存」の後にトリミング作業が発生してしまうので、あまり現実的とは言えませんね。


解決策発見!

で、先日、別件で画像アセットの機能に気がついて色々調べてちょっと思いついたのですが、この作業を「画像アセット」で保存してしまえば良くない??wと。
アートボードが複数ある場合、かなり有効な手段になると思われます。

使い方としては、レイヤー名またはフォルダ名に保存したい形式の拡張子をつけるだけです。

つまり
元々のフォルダ名or画像名が
「company_img001」 なのだとしたら、このフォルダ名orファイル名を

「company_img_001.jpeg」(pngにしたかったら「company_img_001.png」)
と変えて、

「ファイル→生成→画像アセット」の順に保存します。

すると、そのファイルが存在する同ディレクトリ内に画像アセット用のフォルダが生成され、そこに名付けた通りのファイル名と拡張子で画像が保存されます。


混乱を招くかもしれないので、デザインがFIXしてコーダーさんにデータを渡す際にはフォルダ・ファイル名の拡張子は取っておくと良いかもしれませんw
あるいは事情を説明しておくか。


画像の書き出しにお悩みのWebデザイナーさんはぜひお試しください。
コーダーさんでもご存知なければ使わない手はないかと…!

 

補足---------


・画像アセットができないときは

「環境設定」→「プラグイン」「generatorを有効にする」にチェックを入れてみてください。

 

f:id:aya_ino:20180728154657j:plain

 

・アートボードとは?

Illustratorではおなじみですが、似たようなものですね。

 

アートボードは、特殊なタイプのレイヤーグループと考えることができます。アートボードは、含まれた要素の内容を境界にクリップします。アートボードの要素の階層は、レイヤーおよびレイヤーグループとともにレイヤーパネルに表示されます。アートボードには、レイヤーおよびレイヤーグループを含めることができますが、他のアートボードを含めることはできません。

アートボードは、視覚的にドキュメント内の個々のキャンバスとして機能します。アートボード内に含まれていないドキュメントのレイヤーは、レイヤーパネルの最上部でグループ化され、アートボードでクリップされていない状態のままとなります。

 

helpx.adobe.com

 

・画像アセットとは??

Photoshopでデザインしてコーディングする時、「スライス」と言う作業が発生します。
つまり画像の切り出しです。
スライスはPhotoshopの機能を使って手動で切り出すか、レイヤーに基づいてスライスするかのどちらかが一般的かと思いますが、その手動の手間をさらに省けるのが「画像アセット」です。

・画像アセットの使い方

helpx.adobe.com

 

・PSBとは

PhotoshopBigdocument の略で、レイヤーや効果などの機能をサポートしつつ、その名の通り大きいファイルを扱うのに適した形式ということのようです。
が、分ける理由ってなんだろう…?(笑)謎です。
用途としては大きい印刷物などが主のようですが、それだとIllustratorの方が楽じゃない?というところですね。謎。

 

 

Photoshop しっかり入門 増補改訂 第2版 【CC完全対応】[Mac & Windows対応]

Photoshop しっかり入門 増補改訂 第2版 【CC完全対応】[Mac & Windows対応]

 
プロの現場で使われているPhotoshopの「超速」テクニック

プロの現場で使われているPhotoshopの「超速」テクニック

 
Photoshop 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応] (ああしたい。こうしたい。)

Photoshop 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応] (ああしたい。こうしたい。)

 
ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

 

 

 


スポンサーリンク

 

プライバシーポリシー