複数のバナー画像制作に、Photoshopのアートボードが大変捗った話

Photoshop WEBデザイン 効率化

こんにちは!YOUKNOWです。

お仕事でよくバナーを作る機会があるんですが、ふと思い立ってPhotoshopの2015で追加されたアートボードを利用して作ってみました。

バナーってGoogleのバナーだったりYahooのバナーだったりうんちゃらかんちゃらで結構な個数を作ることが多いんじゃないでしょうか。

加えてやっぱり修正も多く発生しがちですよね。
数が多いとその分だけ修正の手間も増えてきます。
その度に書き出しを行うのだけでも以外と時間がかかってしまったり…

Photoshopのアートボードツールを利用してバナーを作ったら修正にも対応しやすくなるし、書き出しもラクそうで良いのではないかと考えました。

結論からいうととてもラクで良い!大正解でした。

どうラクだったのかというと

  • スマートオブジェクトの更新がラク
  • パーツのコピーもラク
  • パーツをアートボード外にストックしておくことができる
  • 書き出しに手間がかからない

が大きかったなぁ…と。

Photoshopのアートボードがバナー制作で捗る点

スマートオブジェクトの更新がラク

Photoshop 2015 アートボード バナー

どうしても文字でこだわりたかった所や、小物の制作はIllustratorを使用して制作します。

それをスマートオブジェクトとしてPhotoshopに落としこむのですが、別のファイルでバナーを制作していると、こっちのバナーのスマートオブジェクトは更新されたが、こっちは更新されない…などの問題が発生します。

しかしアートボードで作る場合、同じPSDファイル内なので一つのスマートオブジェクトを更新すれば同じスマートオブジェクトは全て更新されます。

これで頻発する文言修正対応にも捗るってもんです。

パーツのコピーもラク

まだまだ便利さは続きます。

Yahooバナー GDPバナーなどの種類の豊富さに加え、サイズも豊富と来ているバナー達。

圧倒的数量でやってきます。けれども入れる要素は同じかつ、バナーをクリックして飛ぶ先も変わるわけではないので、同じパーツや賑やかしを使うことが多いです。

別のPSDファイルで制作していると、このパーツをこっちのPSDに持ってこよう..。Photoshopのウィンドウを調整して…こっちに持ってきて…ああ!このPSDも開かないと!

アートボードなら一発です。コピーしたいものを選んで、command+J で複製して移動ツールで移動するだけです。

アートボードの特性で、アートボードの上にあるパーツは自動的に適切なアートボードにレイヤーを移してくれるので、本当に移動するだけでOKです。素晴らしい

パーツをアートボード外にストックしておくことができる

例えば、そのバナーがシリーズものだった場合など、参考になりそうなものをおいておけば、作業が捗るでしょう。

パーツの一時退避としても使える子です。

書き出しに手間がかからない

全てのアートボードを一斉に書き出すことが出来ます。

command+alt+SHIFT+W

これで保存場所・保存形式を選ぶだけで全てのバナーが書き出されます。

まとめ

アートボードツールなかなかオススメです。