私独自のWebバナー制作方法

私独自のバナー制作方法 Design

まだまだ未熟者なのですが、「バナー制作の手順とか書いてほしいかも!」と言ってくれた方がいるので、書いておこうと思います!

前提条件としてデザインに関してはまったくの初心者だということをご了承のうえ、お読みください!

まずざっくりですがやること!

  • バナーに流し込む文言や画像の確認
  • 文言のレイアウト
  • Photoshopでパーツの着色

こんな感じです。

では、順番に一つ一つ工程書いていきますね!

バナーに流し込む文言や画像の確認

運営側からバナーに表示させてほしい文言や画像などの希望がある場合、一通り確認します。

重要度の参考画像

(私の会社の場合なので、適宜クライアント側とご相談を!)

文言のレイアウト

時間があればノートに手書きでさっと書いて決めるのですが、時間があまりない場合Illustratorで直に流し込んで決めています(最近後者が多いです…)。

好みの問題なので、どちらでレイアウトを決めてもいいと思っています!
ただ注意点としては、Illustratorで文言を打ち込む際、まだ黒文字のままにしておいた方が良いかと。。後々Photoshopにコピーして着色するので、今の段階ではまだモノトーンでいいと思います。

左上から右下に視線がいくように配置し、打ち込んだ文字を大きさを変更したり、フォントを変更して整えます。

フォントの使いすぎなどに気をつけましょう。あまりばらばらだと統一感が薄れてしまうので、多くても3種類くらいがいいと思います。
※この時に、打ち込んだテキストファイルをバックアップにコピーしておくことをお勧めします。

キャッチコピー流し込みの参考画像

大きさやフォントが決定したらアウトライン化します。アウトライン化したら細かく一文字ずつ大きさなど変更ができるので、適宜変更します。

私は、ひらがな小さめに、句読点などは字詰めしたりなどを特に意識しています。。
日付の場合は年月日の部分を小さくしたりとか!(こんな感じに)

アウトライン化して文字を調整する参考画像
もともと細めのフォントだと、パスのオフセットなどで文字を太くしたりもします。が、やりすぎてしまうと濁点などが全然わからなくなってしまうので、パスを修正したりしなければなりません…

文言のフォントなどが整ったら移動しやすいようにグループ化をして、Photoshopに移動させまーす。

Photoshopでパーツの着色!

Illustratorからオブジェクトをコピーします。とりあえず全て。
配色が決まらないと文字の色など細かく決められませんので、サイトのイメージや商品の特徴などを確認しましょう。

私はいつも運営側が「まがまがしい感じ」や「熱い感じ」と提示してくれるので、それに従っています。(胡散臭く、もありました。笑)

上記確認しましたら、そのイメージを元に配色を考えます。
普段参考にさせていただいてるサイトはこちらが多いです。

背景画像(色)→ メインコピーの色 → サブコピー
のような順番で決めます。
背景とコピーに関しては、コントラストが強い色味を選びます。それでももし目立たなかったり存在感が薄かったら、境界線やドロップシャドウで装飾します。

色が決まったら画像などを追加しましょー!

jpgで白い背景がある画像などはすべて別ファイルで加工し、なるべく細かく配置できるようにしておきます。めんどくさいのですが、この工程結構重要です…のちのち楽ができるので、ぜひやってしまいましょう。

画像にもドロップシャドウなどの装飾をつければ、存在感が増すと思います。
画像よりは文字がメインなので、画像と文字が被っても」視認性が高まるように調整します。少しだけぼかしたり、不透明度下げたりするのがおすすめです!

すべてのパーツの着色が終了しましたら、とりあえず書き出してみましょう。
そして周りの人に見てもらいましょう。。。

私だけなのかもしれませんが、長々と自分一人で作っていると「これ以上どうしたらよくなるのかわかんねえ…」ってなると思うので、誰かに客観的に見てもらうことが大切です。
自分の中では「最高!」な出来でも、選ぶほうは「ん?」ってなってたりとかするし、自分の中でのイメージはほかの人とは違ったりするものなので…。

そんな感じで私は客観的にバナーを見られなくなったらクライアントにポーンと投げることが多いです。
「こんな感じで仕上がってますけどどうでしょうか!」みたいな。

まとめます

  • 運営側(クライアント)と事前に相談し、文言や画像などの重要度を決定する。Illustratorに文言を流し込んで調整。
  • Photoshopに移動して着色 + 画像挿入。
  • 完成したら書き出して提出。

最近では書き出したあと、iromiru(http://higashi-dance-network.appspot.com/iromiru/)で使われている色の割合を調べたりしています。
ピッカーでざっくり選んでいると微妙な色の違いなどがわからないので、着色が終わってから確認して、カラーコードだけ修正したりするのもいいかもしれないです!

まぁこんな感じで作っているはずなんですが、まだまだ稚拙なものしか作れないのでもっとスキルアップしたらまたこの作業工程も見直したいなと!
それとなのですが、何度も「運営側」と表記している部分、「クライアント側」だと思っていただいて問題ないかと思います…!

また役に立ちそうなリンクや、ツールなどご存知の先輩方いらっしゃいましたら是非ご教授していただけるとうれしいです。

(ω` )ノよろしくお願いします

コメント