遥かなるわらしべ長者への挑戦

お小遣いが一人で簡単に手に入ります、わらしべ長者は大袈裟ですが…



レンタルCGI Tool by きゃべつのお小遣いGet!
特別企画
訪問御礼イベント
目次
>>トップページ - >>特別企画 - >>バナーを作ろう!

[特別企画]バナーを作ろう!

AirCaasyバナーコンテスト第1位!

2005年5月、今は無きCID系列のリードメールサイトの一つである『Air Cassy』で会員サービスの一環としてバナーコンテストが開催されました。  このコンテストでは『参加者に100円進呈』と非常に太っ腹な条件を出していました。  リードメールで100円と言えば、1円でも100通、0.1円なら1000通分。  これは美味しいっとばかりに、あまり深く考えもせず、応募してみる事にしました。

ところが、投票が始まるや、大方の予想に反して、TOPの座に!  かなり驚愕&動揺しながら行く末を見守ってましたが、落ちていく事なく進んでいき、そのまま6末の投票期限も終了。  結局、棚からぼたもちが落ちてきて、1位となってしまいました。

これまでもサイトバナー等は自分で作ってました。  興味を引く、訪問者を誘う、クリックしたくなる、ようなバナーを創る事は大変だと思いますが、作る事だけなら簡単なんです。  このページでは、本当に簡単に出来るんだ、と言う事を分かって貰えるように、画面コピーで作成過程を説明してみました。
今度、どこかのコンテストでは、このページを見た皆さんがライバルになるかも?
■まずは準備
まずは、必要なツールを準備します。  とは言え、このサイトのモットーは『ノーリスク』。
ツールと言えども、すべて無料でまかなえます。

ペイント …Windows標準添付のツールですね。(Winユーザでない方はスイマセン)
簡単バナー …バナー作成ツール。 Vectorからのダウンロードはこちら
G・こんばーちゃ♪ …画像変換ツール。 Vectorからのダウンロードはこちら

これだけです。  ツールも全てVectorでダウンロードできるので安心ですね。
■バナー作成開始っ
早速、先ほどダウンロードした簡単バナーを起動してみましょう。
↓の画面が表示されましたか?
表示されたら、どんどん先に進みましょう。

■大きさを決めよう
一般的なバナーサイズは、大きめのサイズで468x60ピクセル、小さい物で88x31ピクセルかと。
今回のコンテストには468x60での応募に決め、[編集]⇒[サイズ変更]で描画サイズを指定します。

■背景色を決めよう
[背景]タグをクリックして設定します。
AirCassyのイメージカラーは『青』。
ただ、普通に青色だけだとおもしろくないので、今回は青と白のグラデーションにしてみました。
これだけでもツールのありがたさが身に染みます。。。
あっ、変更する度にハケのアイコンをクリックしないと画面に出てきませんのでご注意を。

■文字を入れよう
[文字列1]タグをクリックして、その下に表示する文字を入れます。
まずはサイト名の『AirCassy』。
サイト上のイメージと合わせるため文字色は『黄』に。
ここで大事なのは[フォント]のタイプとサイズ、試行錯誤してみましょう。

■文字を飾ろう(1)
黄色の文字では少しボケているようなので縁取りを入れる事にしました。
[縁取り]タグをクリックしてみましょう。
濃いめの青で縁取る事で、文字がハッキリ見えてきましたね。

■文字を飾ろう(2)
もう少し目立つように影を付けてみます。
[影付け]タグをクリックしてみましょう。
縁取りと同じ色で、長めの影を付ける事でる事で、ロゴらしくなってきました。

■文字を飾ろう(3)
あとは同じ事の繰り返しで[文字列2〜5]に紹介文字と設定を決めていきましょう。
[フォント][縁取り][影付け][文字位置][文字角度]で試行策後しながら仕上げていきます。
紹介文とURLを入れる事でバナーらしくなってきました。

■保存しよう
取り敢えず簡単バナーでの作業はココまで。
[ファイル][名前を付けて保存]で画像ファイルに保存します。
保存する時の形式は『BMP』にしましょう。
これは、このあとの『ペイント』で作業する時に便利なためです。(単なる経験則ですが)

■キャラを貼ろう(1)
AirCassyのイメージキャラはキツネ。
ペイントを起動してサイト画面のスクリーンショットを貼り付けます。
切ったり貼ったりで編集しましたが、こんな感じです。
[編集][全て選択]し、[編集][コピー]しておきます。
なお、ここで大事なのは『周りの無駄な色は消しておく』事、理由は次の工程で。

■キャラを貼ろう(2)
もう一つペイントを起動して、先ほどのバナーを開きます。
[編集][貼り付け]で直前でコピーしたキャラが貼り付きましたね。
ここで大事なのが、左下の方にある積み木のようなアイコン。
今、濃紺で選んでいる方が『透過モード』であり、キツネの外周が透けてますよね。
『周りの無駄な色は消しておく』のはこのためです。
もう一つは『非透過モード』なので、キツネの外周が白くなってしまいます。

■キャラを貼ろう(3)
で、貼り付けたキツネを右の方に移動すれば出来上がり♪
大した事はしてなくても立派なバナーに見えますよね。。。

■縁を飾ろう(1)
一旦は完成しました。
時間を置いてから見直してみると少しボヤけた印象を受けました。
そこでバナーに縁取りを入れようと簡単バナーに戻って試してみましたが決定打に至らず。
それなら自分で書こうと再度『ペイント』へ。
立体的な縁も、内情を知れば超簡単っ! 早速、次へ。

■縁を飾ろう(2)
[表示][拡大]で大きくして描画すれば簡単なんです。
灰色の線で四角を書き、1ピクセルずらして濃紺の影を入れているだけ。
これだけで立体感が出るから不思議です。

■最後の仕上げ
ここまで『BMP形式』で作成してきました。
BMP形式のままではHPでは表示できません。(理由は分からないのですが…)
そこで最後にネット上では標準の『GIF形式』に変換します。
別に難しい話でもなくG・こんばーちゃ♪で一発ラクラク変換です。
[GIF][256色]を選んでから先ほどのBMPファイルをドラッグ&ドロップ。

■これで完成


これで完成です。
どうだったでしょう?
難しかったでしょうか?
思ったより簡単だったでしょうか?

ツールを探す、バナーを作る、コンテストに応募する、HPを持っていない方でもできる事かと思います。
『バナー職人』への第一歩を踏み出すキッカケにでもなれば、このページを作った甲斐もあるってもんです。
なにせ、スクリーンショットの整理だけでもかなり疲れたもので…
■おまけ
サムネイル作成ツールとしてEasyサムネイル(Vectorダウンロードはこちら)を使ってました。
サムネイルとは、親指(thumb)の爪(nail)という意らしく、インターネットでは縮小した画像の事を指します。
最近このツールに簡単なフィルター機能が付いている事に気付きました。

カンパス

セピア

エンボス


どーでしょうか?
折角作ったバナーが壊れる気もしますが、アクセントとして上手く使えば面白いと思います。。。

- Copyright(C) 2004 遥かなるわらしべ長者への挑戦 All Rights Reserved. -
SEO [PR] おまとめローン Windows7 冷え性対策 動画 掲示板 レンタルサーバー ライブチャット SEO