バナー作成について(photoshop使用)
WEBデザイナーがまず最初に任されるであろう仕事、バナー作成について
書いてみようと思います。
慣れがものをいう作業だと思いますが、下記の手順は私のやり方なので
参考程度になさってください。
★手順
①サイズを決める
②文言を決める
③ノートに下書き(おもにレイアウトを決める)
④配色を決める
⑤使うフォント&大きさを決める
⑥素材(写真、イラストなど)を集める
⑦組立&調整
こんな感じでしょうか?
現場では①、②は指定があることが多いと思うので割愛します。
ディレクターおよびライターさんのお仕事だと思いますので、
最初はスルーして大丈夫でしょう。
本題のデザインの部分を以下で書きます。
----------------------------------
③イラストが書けなくても、どこに何を配置するのかの図で構いません。
文字やイメージなんかをコメント書きで補足しましょう!
最初からデザインソフトを立ち上げてどうにかしようとする人がいますが、
頭の中で構成がしっかりと出来ていないうちは遠回りです。
似たようなテーマのバナーなどの検索をかけてみると雰囲気がつかみやすいです。
④~⑥
こちらは順不動で時と場合によって変わってきます。
ページのレイアウトに大きく左右される部分だと思いますので、
ページのデザインをよく観察して、
「何のフォントが使われているのか」
「使用しようとしている素材がページの雰囲気と合っているのか」
「目立たせる為に補色を使うのか or 馴染ませるために同系色でまとめるのか」
自問自答しながら行いましょう。
-------------------------------
「デザインは連想ゲーム」
私の持論ですが、素材を集める際には、テーマから連想されたものを組み合わせて
配置していくとうまくいくことが多々あります。
EX.春のキャンペーンバナー
春→桜→散る→池→カエル→泳ぐ
デザイン出来ましたよね?
イラストが描けなくてもいいのです。フリー素材を拾ってきて組立れば。
描画モードとか透明度、効果を弄ることでPhotoshopがなんとかしてくれますw
一番時間を掛けた方がいいプロセスではないでしょうか?バナーの出来はここで
決まってくると思っています。
⑦
④~⑥で考えた構成を形にする時ですね。
一番言いたい文言を大きく太字で、補足を小さく英語なんかで書いてもいいと思います。
整列を掛けながら配置していきましょう。
最後に。
出来上がったバナーはページデザインに当てはめて検証してみるといいと思います。
しっくりくることもありますし、何か違う!!違和感を覚えることもあるでしょう。
違和感を覚えた場合は、配色を変えてみるのが一番手っ取り早い気がしますw
グダグダですが、みなさんよいバナーライフを!!