LocoPartners 開発ブログ

LocoPartners 開発者達によるブログです

Photoshopの便利機能を活用した、Relux流バナー作成方法

こんにちわ、デザイナーの唐橋です。

2017年も早いもので3月になりましたが、まだまだ寒い日が続きますね!

さて今回は、Photoshopの便利な機能、

  • 「アートボード」
  • 「スマートオブジェクト」
  • 「ライブラリ」

を活用した、Relux流バナー作成方法をご紹介したいと思います。

私自身もまだ試行錯誤の段階ですが、 以前より作業が効率的に、そしてファイルの管理がとてもスマートになりました!

それでは、紹介していきます。

1 デザインは複数アートボードで並べてつくる

これまでは1つのファイル内で「マスク」を使用してバナーを並べたり、 1バナーごとに別ファイルで管理していましたが、 現在は1ファイルに複数のアートボードを作成して制作しています。

f:id:loco-dev:20170309182855p:plain

メリット

  • バナーデザインを並べて、俯瞰しながらデザインできる。
  • 1ファイルで済むので、管理が楽になる。
  • アートボード名をファイル名にすると、自動的にjpgで書き出してくれる。

デザインの確認が楽になったのが嬉しいポイントです♪

2 画像はスマートオブジェクトに変換する

スマートオブジェクトは、何度も同じ素材を利用する際は、 とても便利な機能です。

メリット

  • 画像を拡大縮小を繰り返しても、劣化しなくなる。
  • 複数使用しても、1画像分の容量で済む。
  • ひとつのオブジェクトを変更すると、すべてのオブジェクトを変更してくれる。

今回は「富士山の写真」と「スマートフォン」の画像をスマートオブジェクト化しています。 デザインを考えるうえで、何度も拡大縮小しましたが、劣化しておりません。

3 ライブラリでよく使うパーツを管理する

ロゴや色など、よく使用するパーツはライブラリに登録しておくと便利です。

今回はReluxのロゴをライブラリ登録しています。

f:id:loco-dev:20170309183117p:plain

メリット

  • 瞬時に呼び出して使うことができる
  • 元ファイルを開く必要がなくなる
  • Adobe製品内で同じライブラリを使用できる

上書きするとまずいロゴデータなど、「元データ」のaiファイルを毎回開かなくてよくなるので、 精神的にも安定します(笑)

さらにライブラリを、Creative Cloudで管理することで、 デザインチームメンバーと同じ環境を同期することができます。

4 jpgへの書き出しは自動化で!

1の「複数アートボードで並べてつくる」でも少し触れましたが、 アートボード名を「xxx.jpg」というように画像ファイル名にすると、 自動的にフォルダが生成され、そこにjpg画像がリアルタイムで書き出されます。

アートボード名だけでなく、レイヤー名にも適用されるので、 自分の好きなレイヤーごとにjpgに書き出すことも可能です。

もう「スライス」は過去の機能となりつつあります。

f:id:loco-dev:20170309183400p:plain

↑今回はアートワーク名に書き出されるファイル名を記述しています。

まとめ

Relux流バナー作成方法、いかがでしょうか?

私もまだまだPhotoshop勉強中の身ですから、もっと効率よくできないか模索中です。

そしてこういったデザインファイルの効率化に興味のあるデザイナーを大大大募集中です!!!!

一緒にReluxのデザインファイルの管理を考えませんか? ぜひお気軽に遊びにきてください♪

↓↓↓↓↓お問い合わせはこちらから!↓↓↓↓↓

www.wantedly.com

大学生のインターンも募集中ですよ!!

www.wantedly.com