戻る


バナーの作り方

リクエストを受けたのでバナーの作り方です。
…しかし…私もめっちゃ苦手なんですが(^^;)

さて、バナーを作る際に念頭に置くことは

一、サイズを軽く
ニ、目を引くものを
三、なるべく標準サイズを

の三点を押えていれば良いと思います。

一、サイズを軽く
見る人の負担を軽減する、というのも当然ですが、リンク先のHP管理者さんの負担も減る、ということを覚えておきましょう。重過ぎたりデカすぎたりするバナーは、表示が遅く、見る人はイライラします。また、そのリンクページ自体の表示が遅れたりしてしまう場合もあります。3KB以内が理想ではないでしょうか。

ニ、目を引くものを
あまりに地味なデザインや配色はやはり考えものです。バナーは広告の役割を果たすので、それなりの集客効果を考えなければなりません。(…いや…あんまり考えた試しはありませんが)また、色んな人が見る可能性がある為、あまりに常識の外れたデザインやイラストを使う…というのもやめておきましょう(笑)

三、なるべく標準サイズのものを
バナーの大きさに決まりはありませんが、一応よくある大きさがあります。例えば…
←横200ピクセル×縦40ピクセル。GIFで重さは3KBです。
←横80×縦32。GIFで重さは1KBです。
大きい方は通常使われるサイズです。サーファーズパラダイス等の検索エンジンに登録する際の規定サイズでもあります。小さい方はよく素材ページのバナーに使用されるサイズです。HPなんかのトップに置いて頂く場合に使われます。
取り敢えずこの大きさで作っておけば間違いはないでしょう。
大きさの設定が面倒な場合、このGIFを保存しておいて上書きして使えばラクチンです。
何故このよく使われるサイズをおススメするかというと、リンクページを作る際、大きさが不揃いだとデザイン的に悪くなります(笑)だから「規定サイズのバナーしか…」っていうサイト管理者さんもいたりするんですね〜。

ではでは、作ってみましょう。

バナーを作るのですが、私的にバナーには3種類あると思います。
1、イラスト入りバナー
2、デザインのみバナー
3、アニメーションバナーです。
同人系サイトに多いのは1番ですね。取り敢えずこれを作ってみましょう。

■画像サイズ200×40で新規ファイルを作ります。
当然、このままの解像度では綺麗なバナーにはなりません。解像度を2倍にしましょう。
■バナーに入れる絵を適当な解像度に落として貼り付けます。

ぺたっとね!使いまわし失礼☆
バナーに使う画像はなるべく色のメリハリがあるものの方が良いでしょう。あと元から解像度が低いとか…。
私のCGはメリハリない上に解像度は高めなので出来上がりはショボいです。見ていればわかるでしょう(笑)
■HPタイトルを入れます。

文字ツールでHPタイトルを入れます。この際、アンチエイリアスは外さないでやりませう。汚くなっちゃうよ。
解像度が高い場合はOKですがね。
■イメージを整えます。
このままでもまぁ良いんですが、ちっとはソレらしく見えるようにします。

…って地味だねオイ。
■ボタンっぽくします。
フィルタをかけてボタンに見えるようにします。これはフリーのプラグインフィルタを使用しています。
←ここから頂いてきましょう。
ちなみに「NVR border mania」の「instant button」を使用しました。ラクチンです。
解像度を元に戻して完成です。保存は色数が多い場合JPG,少ない場合はGIFにしましょう。
←32色GIFファイル。重さ3KBです。

←圧縮率1JPGファイル。5.75KB…重い!
京のイラストの色調を統一した為、色数が少なくてもそれなりに見えます。また、軽いです。

…う〜む…やはり私の絵だと不鮮明ですね〜(^^;)
ちなみに今まで作ったバナーどもです。

表の標準バナーです。
何のHPかわからんトコが難点…。
表の小さいバナーです。
色数はかなり少なく、一ドットずつ直してあります。
ねこさんのHPのバナーです。
ちょっと地味だったかな?(^^;)