• ベストアンサー

バナーの作り方

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

質問者が選んだベストアンサー

  • ベストアンサー
  • kaduki
  • ベストアンサー率25% (8/31)
回答No.3

まず、バナーサイズについてですが、広告掲載してもらうサイトに指定されることが多いようです。 Yahoo!さんのサイトでしたら、サイト内に書いてあります。参考URLに書いておきますので、是非ご覧になって下さい。結構これが一般的なサイズなのではないでしょうか? アニメーションなどについても、「何秒以内で停止すること」などという規定があるようです。 作り方ですが、Adobe社のPhotoshp5.5でしたらImageReadyというソフトはありますでしょうか?(バージョンが古いとついていないようです?) アニメーションGIFはそちらのソフトで作れるようです。 でも、Fireworksを持っていらっしゃるのでしたら、そちらで作られた方が良いかもしれませんね。 結構簡単に作れますので、Fireworksでの作り方をざっとおおまかに下に書きますね。 アニメーションGIFは下でも回答されているように、パラパラ漫画みたいなものなので、画像が複数枚必要になります。 しかし、ファイルを何個も作成するのではなく、同じファイル内で、何枚もの画像を用意します。 一枚画像を用意したら、[ウィンドウ]→[フレーム]で「フレーム」とかかれた小さなウィンドウを表示させ、フレームを必要枚数だけ増やして(もしくはコピーして)編集してゆきます。 フレームを順番にクリックするとパラパラ漫画みたいに動くと思いますが、このままではアニメーションとして保存されませんので、[ファイル]→[書き出しのプレビュー]を選択して、そのウィンドウの左上に「オプション」というタブのところの「ファイル形式」を、「アニメーションGIF」にして下さい。 そのまま「書き出し」というボタンを押せばアニメーションGIFとして保存できます。 アニメーションのスピードを変えたりなどなど、色々設定がありますので、まずはいろいろな所をいじって研究してみて下さい。 また、ヘルプも参考になりますし、Fireworksのメーリングリストなどもありますので、そういったものを参考にされて、勉強されるのも良いかと思います。 頑張って下さい。

参考URL:
http://www.yahoo.co.jp/docs/advertising/banner/index.html
tariran
質問者

お礼

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

その他の回答 (2)

  • reis
  • ベストアンサー率46% (402/864)
回答No.2

動きのあるGIF、つまりアニメGIFですが。 動的でインパクトがあり、面白い……という反面、 枚数を使いすぎると重くなる(原理は「パラパラまんが」 なので、枚数を増やせば、それなりに複雑なものを 作れますが、重くなるわけです)とか、GIFのライセンス 問題などがひっかかってきます。 ライセンス問題は、「GIFで圧縮保存する技術」を使用 することに対してですので、たとえばライセンス問題を クリアしていないソフトでGIF(アニメGIFも含む) ファイルを制作しサイトで使用した段階で、使用者にも かかわってきます。 サイズの問題ですが、これは必ずそろえなければいけない サイズがあるわけではありません。 ただ、検索や登録系のサイトでバナー表示させるときは 200×40(ピクセル)がほとんどです。 ふつうに自分のサイトのバナーとして制作するなら、その サイズが便利でしょう。 あと、ミニサイズは88×31がありますね。

tariran
質問者

お礼

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

  • linus127
  • ベストアンサー率38% (22/57)
回答No.1

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
tariran
質問者

お礼

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

関連するQ&A

  • バナー制作の仕方について

    会社より「バナーが作れるようになれ!」と 超ざっくりとしたことを言われました。。 とりあえず、フラッシュバナーはさておき・・・ gif、jpgでバナーを作れるように勉強しないといけません。。 PCにはフォトショップ、イラストレーター、ドリームウェーバー?を 早速、入れてもらいました。(CS3とかいうやつです。) ただ今まで外注していたので出来上がったバナーを見ることは ありましたが、自分で作るとなると全くもって知識ゼロです。。 何から勉強すれば良いのでしょうか。。 お勧めの参考書・サイトを教えてください!! よろしくお願いします。

  • ドリームウェーバー上の画像をファイヤーワークスで開くには?

    ドリームウェーバー3.0上で配置した画像をダブルクリックするなどしたらファイヤーワークス3.0で開けるようにしたいのです。 イラストレーターは画像をoption+ダブルクリックでフォトショップで開きますよね。ああいう感じで。 今は出来ないのでファイル名を覚えて、ファイヤーワークスで「開く」→そのファイル、というふうにしていて面倒です。 どなたかご存じの方いたら教えて下さい。 宜しくお願いします。

  • GIFアニメの作り方

    こんばんわ。 現在HP作りに挑戦しています。 ツールはフォトショップとイラストレータとメモ帳を使ってます。 GIFアニメを作りたいのですが、フォトショップで作れるようなのですが 何からしたらよいのかわかりません。 そんなに難しい物を作ろうとは思ってなく、ちょっと文字が動いたり すればよいのですが、簡単に作れる方法はありますか? また、ファイアーワークスもあるのですが、フォトショップとファイアーワークスと ではどちらの方が簡単に作れるでしょうか?

  • アニメーションバナーの貼り付け方

    イラストレーターとフォトショップでHPを作りました。 リンクのページに友達のHPのバナーを貼りたいのですが、 そのバナーはアニメーションで、貼り付けた後、プレビューで見ると アニメーションが動いていませんでした。 元となるリンクページ(イラストレーターで作ったもの)をフォトショップで開いて、バナーもファイルから開き、リンクページにコピー、ペーストしました。アニメーションなのでImageReadyじゃないとダメなのかと思い、ImageReadyでも同じようにやってみましたが、プレビューを見ても動いていませんでした。アニメーションになったバナーを貼り付けるにはどのようにしたらよいのでしょうか? HP作りは初めてで このような質問ですみませんが、 どうぞよろしくお願いいたします。

  • フォットショップとイラストレーターを覚えるのとファイヤーワークス覚えるのとどっちが需要があるの?

    僕が通おうとしている学校が、ドリームウェーバーとファイヤーワークス、フラシュを教えてくれるのですが、フォットショップとイラストレーターを覚えなくても就職とかは大丈夫ですか? 似たようなソフトなのでどちらかが使えれば、良いのでしょうか? 実際 アドビ社とマクロメディア社は就職にはどちが有利なのでしょうか?

    • ベストアンサー
    • CSS
  • バナーの作成方法について

    今ビジネスブログを作っているのですが、企業っぽいバナーを作りたいと思っています。 フォトショップ、イラレ、ファイアーワークスなどソフトはあるのですが、バナーの作り方がわからないので、いわゆる宝の持ち腐れ状態です。 バナー作成で検索しても、フリーソフトによるバナー作成方法ばかりなので、こうしたフォトショなどのソフトを用いたプロっぽいバナーの作り方を教えているサイトをどなたかご存知でないでしょうか??

  • ドリームウェバー4とファイアーワークスのアニメーション作成について

    ファイアーワークス4で作成したアニメーションをアニメーションGIFに書き出したのですが、ドリームウェバー4にどうしたら読み込ませることができるかわかりません。 どなたか教えてください。

  • イラストレーターとフォトショップについて教えて欲しい

    以下の3つの質問にどなたか分かる方ご教授願います。 (1)WEBクリエーターさんの必要スキルに イラストレーターとフォトショップがよくあるけど、 イラストレーターとフォトショップは何に使うの? (2)フォトショップはエレメントと普通版があるけど、どう違うの? (3)ホームページビルダーとドリームウェーバーってどう違うの? 何でクリエーターさんはドリームウェーバーの方ばっかりつかってるの?

  • ソフト同士の色合いや雰囲気を近づけたい

    基本的にファイヤーワークスを利用しております。 ウェブサイトを作るときはほとんどこれです。 ですが…より細かいレベルでデザインしていこうと するとイラストレーターやフォトショップを 使った方がよいことがあります。 しかし、ファイヤーワークスでウェブ用の画像をつくるのと イラストレーターやフォトショップで 画像を作るのとでは、なんだか見た目の印象が違います。 うまくいえませんが ファイヤーワークスの方が、よりウェブデザインに近いというか メリハリがついた色合い表現をしてくれます できればイラストレーターやフォトショップで 作っても、ファイヤーワークスの用に色合いをしゃきっと させた感じにしたいのですが…… 何かよい方法はないものかと 思案中です。ぼやっとした質問ですが ご理解いただける方、お教えください。 ちなみに イラストレーター、フォトショップ は CS2 ファイヤーワークス 2004 mx です。

  • _notes _notes ってなんのこと?

    ファイヤーワークスとドリームウェーバーを使ってウェブを作っています。 書き出すたびに「_notes」というファイルができるのですが これはなんの為に必要なのでしょうか? アップロードする時はよけておいてはいけないのでしょうか? 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML