CTR

【作ってみようバナー広告】詳細ボタンの作り方

バナー広告でよく見かける「詳細」や「続きはこちら!」というボタン。バナー広告から次のアクションを促す要素なので、つい目を引くと感じる方も多いかと思います。
今回はPhotoshopを使って、立体感のある詳細ボタンの制作に挑戦してみましょう。
ちなみに今回の制作環境は、Windows Vista, Photoshop CS2です。

まずはツールから「角丸長方形ツール」を選択し、ボタンの背景となるシェイプを作ります。
角の丸みは、ツールバーの下にあるオプションに数値で変更できます。デザインに応じて変えていきましょう。

次に、レイヤー上にある先ほど作ったシェイプの項目で右クリックをして、「レイヤー効果」を選択します。レイヤー効果はその名の通り、レイヤーに対して様々な効果を適用させることができます。
今回はこの中で、「グラデーションオーバーレイ」「境界線」「ドロップシャドウ」の三項目を使っていきたいと思います。

それでは、「グラデーションオーバーレイ」をクリックしてみましょう。これを使うと、レイヤー全体にグラデーションをかけることができます。
真ん中の「グラデーション」という項目をクリックして、グラデーションエディタを立ち上げましょう。

真ん中の帯のようになっている部分、ここが実際に適用されるグラデーションです。
上下に四角いマークが付いていますが、これは上側が「不透明度」、下側が「カラー」となっています。今回は不透明度を変更する必要はないので、カラーを調整していきましょう。

立体感のある配色のコツは、色の変わり目のコントラストです。今回は全体的にグレーの配色でメタリックな印象にしましたが、特に重要なのが中央の部分。ここで暗めのグレーと明るめのグレーを対比させて、立体感を出しています。
配色が難しい時は、他のバナーなどを参考にしてみるといいでしょう。

img05.jpg

次に、「境界線」をクリックしてみましょう。
境界線をつけることでボタンと周りの画像との差がはっきりと出るので、よりクリックできそうなボタンに見えてきます。
ここでは「カラー」と「サイズ」を調整していきます。基本的にはグラデーションと同系色で、かつ明度を変えれば無難でしょう。

img06.jpg

そして最後に「ドロップシャドウ」をクリックしましょう。
ドロップシャドウはレイヤーの後ろ側に影を落とす効果です。「不透明度」「角度」「距離」「サイズ」あたりの項目を調整すれば、だいたい大丈夫です。(より細かく調整するときは他の項目も使う必要があります)
数値をいじりながらプレビューを見て丁度いい塩梅を見つけていくのですが、この時のポイントとしては「濃すぎないこと」です。
濃すぎる影はチープになってしまうことが多く、そういった効果を狙う場合以外はあまりオススメしません。

img07.jpg

あとは文字をのせれば完成です。ね、簡単でしょう?
一度作った効果は「スタイル」に登録すると、別のバナーを作るときに再利用できて便利です。また、Photoshopのスタイルを配布しているサイトもありますので、それらを利用するとより素早く作ることもできます。

img04

img04

img03

img03

GROUP CREATEとは?

【クリエイターの方へ】
新着案件が発生した際にメールにてご連絡いたします!登録は
job-banner@hotcocoa.biz まで空メールをお待ちしております!

クリエイターの皆様に決まったテーマに対してバナーデザインを
投稿して頂き、各バナーのクリック率を運営事務局がテストします。
上位のバナーには採用バナー数に応じてamazonギフト券をプレゼント!
更に、あなたのバナーが企業に正式採用されちゃうこともあります!
◆GROUP CREATEのクリエイター賞金について
1位・・・amazonギフト券10000円分
2位・・・amazonギフト券5000円分
3位・・・amazonギフト券3000円分
#4位以降は案件により報酬が発生します。
【バナー制作希望の方】
バナー大量生成によりCTR2倍!
ECサイト(ネットショップ)様向け!バナー(パーツ)画像の新規作成/画像修正・加工を格安で承ります!
募集中の案件を探そう

月別アーカイブ