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

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

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

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

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

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

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

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

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

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

タグ:,,,,,,,,

モバイルバナー広告、現時点では192×53ピクセルが主流

広告バナー画像作成・制作-モバイル専門「クリックバナー!」/現時点では192×53ピクセルが主流
http://banner.mobilesystem.jp/information.html

でのモバイルバナー広告の主流サイズについての記載が面白かったので紹介します。

現時点では192×53ピクセルが主流

2010年時点で、もっとも流通している携帯用広告バナーのサイズは192×53ピクセルです。
ポータルサイトのような様々な種類の携帯端末がアクセスする媒体ではない限り、このサイズ1つで問題なく対応できる場合がほとんどです。
しかし、通常のヘッダー広告・フッター広告以外の場合だと、それぞれの媒体ごとに特徴のあるサイズが出てきます。

とのことです。

注意すべきレギュレーションABC

A:外枠のさらに外設定する白い1ピクセルの空白部分
最近のモバイル広告のバナー画像作成時のレギュレーション(規則)に増えているのは、枠線のさらに外に白い1ピクセルの余白を作るというもの。
枠線がサイトのページ背景と同化しないように、明確に分けるのが目的。

B:バナー広告の枠線
Bは一般的な枠線。一部に枠線の色を黒に指定してくる媒体があることから、黒で作られることが多い。
これも、サイトのデザインとバナー広告が同化するのを避ける目的で設定が義務づけられています。

C:レスポンスフォーマット
もともとは、CLICK!などの文字のことで、広告のクリックを喚起する為の文言だったのですが、最近では広告領域とサイトのページを区別する目的で、設置を義務づけているところが半数以上を占めています。
レスポンスフォーマットの特徴としては、「CLICK!」「AD」「広告」「PR」など様々な種類があることです。
もっとも一般的なのは「CLICK!」なのですが、媒体によっては「AD」を指定していたりする場合があります。

※これらABCは厳密に寸法が決められていることが多いのですが、実際にはレスポンスフォーマットの幅などは多少前後しても問題ないようです。

それぞれの細かなレギュレーションの種類はこちら
⇒82×30サイズ|モバイルバナーのレギュレーション一覧
⇒94×26サイズ|モバイルバナーのレギュレーション一覧
⇒192×53サイズ|モバイルバナーのレギュレーション一覧
⇒192×121サイズ|モバイルバナーのレギュレーション一覧
⇒240×75サイズ|モバイルバナーのレギュレーション一覧

とのことです。

弊社サービスでも、モバイルバナー広告を100個25万円にて作成しておりますが、
モバイルバナー広告を作成している会社って少ないので、上記サイトとかも要チェックです!

(編集:永上)

タグ:,,,,,,,,,,,,,,,,,,,,,,,,,

【無料作成バナー工房】 で自動でバナーが作れる!?

無料作成バナー工房
http://www.bannerkoubou.com/

という、サイトがあることを皆さんはご存知でしょうか?

このサイトは、超お手軽に自分のホムペバナーなどをブラウザー上で作れてしまうサービスです。

無料作成バナー工房で出来るバナー広告加工

◆バナー工房でできる加工

・バナー・アイコンの作成
・バナー切り取り
・チカ画(チカチカした効果)の加工
・GIFアニメ
・スクリーンショット
・QRコード画像
・画像への文字入れ
・写真素材
・タグ発行

です。

弊社のクラウドソーシングでバナーを作るモノと違い、
こういったテキストを入れるだけでバナーを大量に作れるというツールも魅力的ですね!

(編集:永上)

タグ:,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

GROUP CREATEとは?

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

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