バナーの作り方

質問

こんばんわ。
バナー作りに挑戦してみたいのですが、どうやって作ったらよいか悩んでます。
作りたいバナーは、よくサーチエンジンの上部にはってあるバナーのように、動きがあるもの（いろいろと変わる）
を作ってみたいのです。
バナー作りには、規定などあるのでしょうか？
例えば、大きさとか・・・。
HTMLを使ってHPのコーディング、画像加工などは出来るのですが・・・。
ちなみに使っているソフトは、フォトショップ、イラストレータ、メモ帳くらいでしょうか・・
最近はファイアーワークスとドリームウェイバーにも挑戦
しているのですが、なかなか使い方が把握できなくって。
どなたか親切な方、アドバイス宜しくお願い致します。

回答No.3

kaduki · ベストアンサー

まず、バナーサイズについてですが、広告掲載してもらうサイトに指定されることが多いようです。
Yahoo!さんのサイトでしたら、サイト内に書いてあります。参考URLに書いておきますので、是非ご覧になって下さい。結構これが一般的なサイズなのではないでしょうか？
アニメーションなどについても、「何秒以内で停止すること」などという規定があるようです。

作り方ですが、Adobe社のPhotoshp5.5でしたらImageReadyというソフトはありますでしょうか？（バージョンが古いとついていないようです？）
アニメーションGIFはそちらのソフトで作れるようです。

でも、Fireworksを持っていらっしゃるのでしたら、そちらで作られた方が良いかもしれませんね。
結構簡単に作れますので、Fireworksでの作り方をざっとおおまかに下に書きますね。

アニメーションGIFは下でも回答されているように、パラパラ漫画みたいなものなので、画像が複数枚必要になります。
しかし、ファイルを何個も作成するのではなく、同じファイル内で、何枚もの画像を用意します。
一枚画像を用意したら、[ウィンドウ]→[フレーム]で「フレーム」とかかれた小さなウィンドウを表示させ、フレームを必要枚数だけ増やして(もしくはコピーして)編集してゆきます。
フレームを順番にクリックするとパラパラ漫画みたいに動くと思いますが、このままではアニメーションとして保存されませんので、[ファイル]→[書き出しのプレビュー]を選択して、そのウィンドウの左上に「オプション」というタブのところの「ファイル形式」を、「アニメーションGIF」にして下さい。
そのまま「書き出し」というボタンを押せばアニメーションGIFとして保存できます。
アニメーションのスピードを変えたりなどなど、色々設定がありますので、まずはいろいろな所をいじって研究してみて下さい。

また、ヘルプも参考になりますし、Fireworksのメーリングリストなどもありますので、そういったものを参考にされて、勉強されるのも良いかと思います。
頑張って下さい。

参考URL：

http://www.yahoo.co.jp/docs/advertising/banner/index.html

お礼

ご丁寧に、教えていただけてとてもありがたく思って
おります。
なんとか頑張ってこつこつと、失敗しながらでもやってみます。
有難うございました。

回答No.2

reis

動きのあるGIF、つまりアニメGIFですが。

動的でインパクトがあり、面白い……という反面、
枚数を使いすぎると重くなる（原理は「パラパラまんが」
なので、枚数を増やせば、それなりに複雑なものを
作れますが、重くなるわけです）とか、GIFのライセンス
問題などがひっかかってきます。
ライセンス問題は、「GIFで圧縮保存する技術」を使用
することに対してですので、たとえばライセンス問題を
クリアしていないソフトでGIF（アニメGIFも含む）
ファイルを制作しサイトで使用した段階で、使用者にも
かかわってきます。

サイズの問題ですが、これは必ずそろえなければいけない
サイズがあるわけではありません。
ただ、検索や登録系のサイトでバナー表示させるときは
200×40（ピクセル)がほとんどです。
ふつうに自分のサイトのバナーとして制作するなら、その
サイズが便利でしょう。
あと、ミニサイズは88×31がありますね。

お礼

一つ詳しくなりました。ありがとうございました。
まず大きい方のさいずから挑戦したいと思います。

回答No.1

linus127

webページで良く見かける動きのあるバナーはGIFファイルで作られている場合が多いようです．
>バナー作りには、規定などあるのでしょうか？
>例えば、大きさとか・・・。
特にありません．小さいと良く見えないし，大きいとロードに時間がかかったり，ページのバランスが取れなかったりしますので，そのページのバランスということになります．400×70ピクセルくらいが多いのかな・・・

アニメーションGIFの作り方は参考URLなどに出ていますので参考にしてください．

作り方はパラパラマンガのように絵を何枚か用意して，アニメーションGIF作成ソフトに順番に貼りつけていきます（ここで，その絵をどのくらいの時間ずつ表示するかを指定します）．元となる絵はGIF形式で保存しておきます．
＃この時にGIFの色パレットを全ての絵について合わせておくとうまくいきます．

注意点としては，動きを細かくするとスムーズに動きますがファイルが大きくなり，ロードに時間がかかります（webではこれは致命的）．
また，全体がチャカチャカ変わるようなアニメーションは派手でいい（？）のですが，見ててうっとおしいし，全体のページの雰囲気が変わります．
＃それを狙っててという手法もありますが・・・ :-)

ちなみに私が使っている作成ソフト(Mac)は，
Photoshop,Illustrator... 素材作成用
Object Dancer... アニメーションGIF作成ソフト
他に，編集済みのGIFファイルを貼り合わせる（？）もので
GifBuilder（たしかフリーウェアだったような）

ちょっと反則ワザですが，一部のビデオ編集ソフトでは，出力ファイルにAVIやQuickTime以外にアニメーションGIFを指定できるものもあるそうです．

参考URL：

http://www.ed.gifu-u.ac.jp/~network/1999/Win_Animations/anigif.html

お礼

とても参考になりました。有難うございました。
まだまだ勉強不足ですね・・・（笑）
がんばります。