Adobe Fireworksで作る、季節のバナー制作テクニック(制作データダウンロード付き)

Adobe Fireworksで作る、季節のバナー制作テクニック(制作データダウンロード付き)

仕事で季節のバナーを作る仕事があったのでバナーを作る工程も説明します。今回は少し色に関してもテクニックを使いましたのでご紹介します。

photo credit: ….Tim via photopin cc

バナーの制作過程

よく「バナーを作ってそこからリンクを付けてください」という依頼を頂きます。
頂く素材・イメージは

  • 写真(商品写真など)2、3枚
  • 文言
  • クライアントが抱くイメージ(「こんな感じで」とか、参考にしてほしいバナー)

バナーを作るときにはこれぐらいの最低限の素材・イメージをヒアリングがほしいところです。よくあるのが「バナー作っといて」と簡単に言われて素材も何も用意してくれないクライアントは注意です。

やり直しが何回もあるパターンですね。クライアントのイメージが出来ていない、とりあえず出来たものを見て判断する。こういった感じのクライアントには最低限ヒアリング(どんなバナーを望んでいるのか)だけでもしてください。

では作っていきます。

春のバナー

矩形

サイズは300px 160pxのバナーを作ります。

文字を入れる帯の矩形

文字を入れる帯の矩形

サイズは300px 40pxの矩形を作ります。ここに文字を入れます。

色に関して

わたしは芸術の学校を出ていないし、センスもないです。
会社に勤めていたときにデザイナーの先輩から教わったテクニックです。

「失敗しない色の組み合わせ」

先輩が同じ色の濃淡で作れば色がなじむって教えてもらいました。

どの色の選択

色の選択

カラーを見ると多すぎて選べない!ことがあります。
駆け出しデザイナーの時、わたしはいろんな色を試して先輩に駄目だしされて「なんでこの色選んだの?」ってよく言われてました。

色の選択

ひとつひとつ色を変えてやるのは大変ですね。

ベースの色を決める

ベースの色が決まれば、上手くいきます!

春のバナーということで勝手に桜をイメージしてベース色をピンクにしました。

ベースの色

ベースの矩形と、文字を入れる帯の矩形(矩形と同じ色にしました)を分けました。

色の選択

右側のスライダーで濃淡を調整します。

色を薄く

色の選択

色を濃く

色の選択

同じ色で色を薄く・濃くするだけで、失敗しない色になります。
あとはどっちがいいかだけの判断になります。

帯に文字を入れる

文字を入れる

今回は架空のバナーなので文字も「春のリゾートを満喫。」「詳しくはこちら」入れました。

メイン画像

春のイメージ画像なので桜の画像を使ってみます。

春の画像

透過のやり方はAdobe Fireworks使い方、いつも使っているバナー制作テクニック その2(制作データダウンロード付き)にあります。

透過させると
透過画像

画像を重ねると下記のようになります。

春の画像

メインの文言

春の画像

「春のプラン」という文言をいれます。

「春」を強調したいので春だけを大きくしました。他の文字は少し小さくしました。また「春のプラン」に「フィルタ」→「光彩」をつけています。

これで完成です。

他の季節のバナー

Adobe Fireworksで作る、季節のバナー制作テクニック(制作データダウンロード付き)

今回も、作ったpngファイルをダウンロードできるようにしました。
よかったら、使ってみてください。

ダウンロード[banner_04.png](756KB)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*