デザイナーのなり方

【バナーの作り方】初心者向けにPhotoshopでの制作手順を1から解説

【バナーの作り方】初心者向けにPhotoshopでの制作手順を1から解説

こんにちは、Webデザイナーのあおいです!

Photoshopなど画像編集ソフトの使い方を覚えた先にあるのが「バナー制作」ですね。

このスキルが身につけば、オンラインでお仕事を探して稼ぐこともできます。

 

レベルの高いバナーなら一枚1〜3万を出す人もいるので、仮に制作時間が一時間なら時給1万円以上になります。

とはいっても、納品レベルに達するバナーを作るのはそう簡単ではありません。

当記事では初心者向けに「バナーの作り方」を解説しているので、ぜひ参考にしてください!

 

バナーは手順を守って作ろう

実際にありそうなバナーの案件を用意して、制作の流れを解説します。

模擬案件

  • ターゲット:30〜40代の女性向け
  • 商品:美容液
  • デザインのイメージ:ピンク基調、優しい、効果がありそう
  • バナーのサイズ:幅300×高さ250px
  • 入れて欲しい文字:乾燥肌や混合肌が1本で解決!つばき美容液。初回価格1980円
  • その他要望:人物の写真を入れて欲しい

 

バナー制作の手順は以下の3ステップです。

3ステップ

  • 参考探し
  • 設計図作成
  • Photoshopで制作

ステップ1:参考探し

まずは参考バナーを探します。

初心者が1から自分で構想やデザインを考えると、どうしても素人くさい画像になってしまうからです。

 

参考は「レイアウト(設計)参考」「デザイン(装飾)参考」の2つを用意しましょう。

参考バナーの探し方

  • グーグルで「美容液 バナー」と検索する
  • バナーをまとめたサイト(Banner MatomePinterest)で探す

 

設計参考を探すコツ

  • 文字量が同じくらいのバナー
  • 写真を使う場合は、同じく写真(もしくはイラスト)を使っているバナーから選ぶ

装飾参考を探すコツ

  • 依頼内容のイメージに合ったバナー
  • 今回はターゲットが30代以降の女性なので、大人っぽいデザインがいい
  • 複数選んでもよい。ただバナー全体の統一感を失わないよう雰囲気が似たバナーを選ぶ

 

今回は「Banner Matome」から、以下2点を選びました。

設計参考

 

装飾参考

 

ステップ2:設計図作成

次に、入れる文字と参考バナーを元に「設計図」を描きます。

これは「ワークフレーム」と呼ばれるもので、Webデザインでは非常に重要なステップです。

オンラインで作成もできますが、バナーなら紙の上に手書きする方法が簡単です。

 

設計と装飾の要素をミックスして描きましょう。

ステップ3:フォトショップで制作

設計図を元にPhotoshopで制作していきます。

Photoshopを開き「新規作成」でサイズを設定します(今回は300×250px)。

 

次に設計参考のバナーを開き、新規画面の方へ持っていきます。

そちらを下書きとして置き、上から文字や画像を配置していけばレアアウトが崩れません。

文字や素材を入れ終わったら、装飾参考のバナーを開いて横に置きながら装飾をしていく流れになります。

 

まとめ:最終チェック

Photoshopでの制作が終わったら、最終チェックをします。

最終チェック

  1. 文字がハッキリ読める?
  2. 商品(または移転先サイト)とバナーのデザインはマッチしてる?
  3. 誤字脱字・切り抜き忘れ・文字詰め忘れはない?

 

今回完成したバナーはこちらです。

初心者は模写(トレース)をたくさんしよう

バナー制作のレベルをあげる方法は、一つだけです。

それは「いいバナーを模写(トレース)すること」。

トレースを繰り返すことでレベルは格段に上がりますし、使えるツールも増えていきます。

 

トレースに関してはこちら↓

Webデザインのバナートレースのやり方と手順。最速でレベルアップするコツ
【最速でレベルアップ】Webデザインのバナートレースやり方と手順

こんにちは、WEBデザイナーのあおいです! 今回は初心者デザイナー向け『バナーのトレース方法』を解説します。   トレースとは「模写」という意味で、参考そっくりにバナー作っていく練習のことで ...

続きを見る

無料で使える素材サイト一覧

・いらすとや
http://www.irasutoya.com/

・ぱくたそ
https://www.pakutaso.com/

・花イラスト素材
http://hanafree.seesaa.net/

・フード・フォト
http://food.foto.ne.jp/

・イラストAC
http://www.ac-illust.com/

・写真AC
http://www.photo-ac.com/

・シルエットAC
http://www.silhouette-ac.com/

・吹き出しデザイン
http://fukidesign.com/

・アイコン素材
https://icooon-mono.com/

・筆文字素材
https://brush-stock.com/

・pixaboy
https://pixabay.com/

・freepik
https://www.freepik.com/home

© 2021 デザインノウハウ倉庫 Powered by AFFINGER5