pickup
イラストで魅せるバナー

今回は、クライアント様からご依頼いただた自然派化粧品のホームページへ飛ぶためのバナーをPhotoshopで作成してみました!

簡単なイラストでも映えて見えるバナー作りのコツなどをご紹介しますので、初心者の方や、イラストを描くのが好きな方など是非バナー作りの参考にしてみてくださいね(^。^)

まずはバナーをデザインする上でのポイントや注意点を説明していきます。

スポンサーリンク

デザインを考える

バナー

バナー

伝えたい情報の優先順位を決める

伝えたい情報
商品情報
・目元をカバーしケアするコンシーラー・ローズマリー、ラベンダーなどの自然派エキス配合
クライアント様のご要望
指定テキストの入力
・美容液コンシーラー・商品名・初回75%OFF・詳しくはこちら(フォント指定、カラー指定あり)
指定画像の挿入
・ロゴ・商品画像

まずは、クライアント様の要望と、その商品について正しく理解した上でバナーに載せる優先順位を決める事がポイントです。

以上の事で一番伝えたい情報は実物の商品なので、商品画像を一番真ん中に配置しました。

次に伝えたい事は、見た人が興味を持って押してもらえるバナーにする事です!

このバナーを押そうと思うのは大半が女性だと思うので、コンシーラーのおおよその値段は想像がつくと思います。

75%OFF』を目立たせる事で自分の想像するコンシーラーの値段から75%引いた値段を連想させるのでお得感を演出できるのです。

しかしバナーは押してもらわないと意味がないので『詳しくはこちら』も同時に目立たせるために『75』だけをあえて大きく強調し、商品名とのバランスを取って見ました。

背景には目を瞑る女性とにローズマリーやラベンダーなどの草花のイラストを描くことで優しく柔らかい印象にしました。

ラフ画

ラフ画

私の場合、イラストを用いてのデザインを考える時はこのように紙に簡単なラフ画を描く事が多いです(^。^)

アナログ人間なので・・・笑

そのほうがイメージがつきやすく、このラフ画を書いている時点でだいたいのレイアウトを決めておけば、後の作業がスムーズに進む事が多いです。

デザインとレイアウトが決まったらカラーを決めていきます。

カラーを決める

ホームページのテイストが水彩画風の優しい自然派化粧品なイメージだったので、背景は暖かい手書きのイラストを引き立たせる明るいクリームイエローにしてみました。

そこに水彩ペンのタッチで薄くピンクを重ねるとより女性らしい柔らかい印象になります。

ポイント
基本的にバナーやPOPを作成する時はあまり色を多様し過ぎず3色くらいまでで抑えましょう!
伝えたい文章やイラストを目立たせるためにカラーデザインの引き算をする事で、綺麗でまとまり感のある広告に仕上がります。

テキストも商品名や75%OFFなどの右上の文字は緑で統一してあるので、『詳しくはこちら』の文字は補色の赤色にしてあります。

補色については別記事で詳しく紹介しています!是非ご覧下さいね♪

作成方法

テキストの優先順位やレイアウトが決まったら、早速制作開始です!

メインとなる商品画像をセンターに配置します。

商品画像を『レイヤーマスク』で表示する

商品画像のマスク

商品画像をマスクで表示

Photoshopを立ち上げ商品画像をドラックで挿入します。

レイヤーパネルのレイヤーマスクを追加をクリックすると、青枠のようなレイヤーができ上がります。

左部分が元の画像で、右の部分がマスクになっている状態で、右のマスク部分を選択した状態でツールバーのペンツールを選択し、の塗りの色を黒色に設定して、隠したい部分を塗っていきます。

をダブルクリックすると『カラーピッカー』が表示されるのでそこで白色を選択するとマスクの画像部分が再度表示され修正ができます。

レイヤーマスクについて別記事でさらに詳しく説明しています。

こちらも是非ご覧下さい!

テキストの装飾

テキストの装飾

テキストの装飾

伝えたい優先順位を決めたテキストを入力して装飾をしていきます。

今回はテキストの縁に白い境界線をつけているのですが、背景が白いとわかりにくいので背景をツールバーの塗りつぶしツール』でクリームイエロー(f8f6da)に塗りつぶしました。

次にレイヤーパネルのレイヤースタイルを追加』をクリックして『境界線』にチェックを入れます。

するとレイヤースタイルパネルが表示されるので『カラー』をクリックで境界線のカラーを変更する事ができます。

イラストで装飾する

イラスト挿入

イラスト挿入

最後にイラストで装飾していきます。

商品画像とテキストのレイヤーは非表示にしておき、ペンツールで女性のイラストを描いていきます。

下書きレイヤーを作り、でペンの太さが調節できるのでなるべく細い設定にし、の不透明度を50%くらいにしてバランスを見ながら下書きをしておきます。

下書きが完成したら、新たなレイヤーを作成し、正書をして下書きレイヤーは消去しておきます。

背景のピンクの水彩タッチの装飾はペンの太さを50pxくらいにして、不透明度を30%、10%、5%に設定を変更しながらピンクと黄色で描いていきます。

あとは先ほど非表示にしておいたレイヤーを表示させれば完成です!

(^_−)−☆

まとめ

いかがでしょうか?

自分で描くイラストを使用すると、思い通りの位置に思い通りのカラーでデザインでき制作もしやすく、愛着もわくと思います(^。^)

また、ブラシの設定を変えると、水彩画っぽいイラストになったり、油絵みたいなイラストになったり、色々なテイストのバナーを作る事ができます。

ブラシの設定についてはこちらで詳しくご紹介しています!是非ご覧下さいね♪

スポンサーリンク

Twitterでフォローしよう

おすすめの記事