main

やーまん!草食系デザイナーのジミーです。
最近バナー制作作業が多くなってきので、今回は効率的にフォトショップでバナーを大量生産する為の便利なアートボードと画像アセットを軽くご紹介したいと思います。

アートボードでバナーをつくる

01

まずは新規ドキュメントで「ドキュメントの種類:Web」「アートボードのサイズ:Web(1280,800)」を選びます。※アートボードサイズはバナーを掲載するサイトのサイズに合わせて任意で選択

02

すると、新規ドキュメントの中にアートボードが出てくるので、この中にバナーを作っていきます。

今回は例として、ケーワンブログ右カラム上部バナーのデザイン差し替え依頼がきたとします。

03

アートボード名は自由に変更できますが、後述する画像アセットのために今回はPC.jpgとして、その中にケーワンブログのスクショをペタッと貼り付けて、バナーを作りました。

とまあ作ったはいいものの、ここまでは、まだアートボードのメリットがわかりませんね。

このバナーをスマホでも使いたいので、640×100で作って欲しいという依頼がきた場合
今までならpsdをもう一個作って作成、、って感じになると思いますが、、、せっかくなのでアートボードを複製して一つのpsd内に複数のバナーを作っていきましょう。

アートボードをワンクリックで複製

04

画面左のツールパネルの上から2番目のアートボードツールを選択すると、四方に→が出てくるので、右の矢印をaltを押しながらクリックしてみましょう。

05

するとアートボードが複製されます。

アートボードのサイズを変更

06

ツールパネルのアートボードツールが選択された状態で、レイヤーパネルの複製したアートボードを選択すると、上のオプションバーにアートボードのサイズ変更画面が表示されるので、任意のサイズに変更しましょう。

07

試しにiphone5を選択すると、アートボードのサイズが640×1136に変更されるので、その中にスマホ版ケーワンブログのスクショをペタッと貼り付けて、バナーを作りました。

画像アセットでアートボード・レイヤーフォルダを画像生成

画像アセット機能を使うと自動で画像(JPEG、PNG、GIF)が生成されるので、「スライス」や「Web用に保存」の手間が省けます。

08

「アートボード名」「レイヤーフォルダ名」をそれぞれ「画像アセット名(任意の名前.画像の拡張子(JPEG、PNG、GIF))」を命名し、「ファイル」→「生成」→「画像アセット」にチェックをいれます。
※この時、それぞれ画像アセット名がかぶらないようにして下さい。(エラーになって画像アセットが生成されません

09

すると、バナーのbnr-wanted.psd(バナー制作したpsd)と同階層にbnr-wanted-assetsというフォルダができ、その中に前述で命名した「4つの画像アセット(SP.jpg、sp-banner-wanted.jpg、PC.jpg、banner-wanted.jpg)」が自動生成されます。
※アートボードはアートボードのサイズ、フォルダはレイヤーマスク及びベクトルマスクのサイズで画像アセットとして生成されます。

10

もちろんアートボードはメモリの許す限り何個でも(たぶん)作れるし、マルチデバイスのサイトを作成する時は何個もPSDを作る必要もないし、非常に便利です。

このアートボードや画像アセットでデザインのバージョン管理や共有の仕方も変わってくると思うので、バイブスがアガるような便利な方法があったらまた書きたいと思います。
ロッケンロー!

この記事を書いた人

ジミー
ジミー
ネットサーフィンしまくって、気づいたらwebデザイナーに。とにかく音楽が大好きッス。マジで好きすぎて、たまに変な音作ってます。デザイン・アルコール・ロッケンロー!