バナーって何？
バナーとは、
←のような、サイトへのリンクに使われる画像です。bannerは英語で「旗・垂幕（たれまく）」という意味です。
サイトをお持ちの方は、ご自分のサイトのバナーをはっている方が多いでしょう。リンクしてくださる方用や、検索エンジンに投稿する時にもバナーがあると便利ですね。
バナーは普通GIF形式で作りますが、JPEG形式のバナーやFlashのバナーもあります。動くバナーはGIFとFlashです。
GIFアニメバナー作りで大切なこと（重さ・大きさ）
バナー作りで最も大切なことは軽く作ることです。ではどのくらいの重さで作ったらいいのでしょうか？ 常識的な重さとしては、1～5キロぐらいで、いくら重くても10キロバイトぐらいまでだと思います。
GIFアニメって、うっかりしているとあっという間に重くなるんですよね。ちなみにGIFアニメがどのくらいの重さになるのかの目安として、長編のバナーを作ってみました。
ただしこのバナー、100キロバイトもあってかなり重いですよ。こんなバナー作ったら迷惑以外の何ものでもありません。
それから大きさ。バナーには「絶対このサイズ」という決まりはありませんが、88×31ピクセルの大きさのバナーが最もよく使われています。中途半端な数字ですが、世界的に一番よく流通している大きさなので、これを作っておけば間違いありません。
他には200×40ピクセル
のものも、日本の中だけですがよく使われています。
2019年03月03日追記
この記事が書かれたのは2006年です。当時のサイト管理人はバナーをいかに軽く作るか悩んでいた時代でした。数メガの写真を貼り付けているブログもある2019年現在、たったの100キロバイトで何を言ってるんだ？ と思われるでしょうが、昔の人は大変だったのです。
材料
デスクトップにダウンロードして下さい。（2.5kb)
完成作品
作り方
今回は「FLOWER・FLOWER」という架空のサイトのバナー作りに挑戦してみましょう。
背景となる画像の上に、お好きな色でタイトルの文字を書きます。 その文字のレイヤーの複製を作ります。
作った複製をぼかします。 【フィルタ→ぼかし→ぼかし（ガウス）】を選ぶと、左のようなウィンドウが出ますので、そのままOKします。
するとぼかしウィンドウが出ますので、スライダをお好きなところまで動かして文字をぼかしてください。
ImageReadyを起動して、アニメーションパレットを見てください。GIFアニメ講座3でやったように、アニメのコマを作ってゆきます。
それぞれ図のようにレイヤーの表示・非表示を変えてください。 2番目と4番目のコマは同じものです。
二つのコマはどちらも文字のレイヤー（FLOWER・FLOWER）の不透明度は50％にしてください。 これで4コマのアニメの元ができました。
次に、表示時間の設定をします。 あまりチカチカと画面が動くと見にくいので、少し長めに設定しました。時間の設定の仕方はGIFアニメ講座3を参照してください。
赤い丸の部分の再生ボタンをクリックして上手く動くか試してみましょう。 これでOKという場合は保存してできあがりです。
完成作品
今回は「ぼかし」フィルタを使いましたが、Photoshop6.0からある文字の変形「ワープツール」を使ったり他のフィルタで様々に文字を変形させると、いろんなバナーを作れますよ。
応用作品
様々なアニメバナーの例を作って置いてみました。皆さんも工夫を凝らしたオリジナルバナーを作ってみて下さいね。
ドット絵型（1.5キロバイト）少しずつ変化したイラストを表示させるもの。
静止画表示型（1.6キロバイト）静止画を次々に表示させるもの。
タイプライター型（1.0キロバイト）文字が一つ一つ表示されるもの。
ワープテキスト型（4.2キロバイト）ワープテキストで少しずつ変化させたもの。
フィルタぼかし型（5.5キロバイト）イラストを移動、文字をフィルタで加工したもの。
このブログは2001年07月23日開設のサイト「幻想画廊」を2019年にWordpressで移築したものです。この記事は17年前の、2006年05月23日に書かれました。文章の内容を変えずにそのまま転載してあります。リンク切れなど不備もありますが、どうぞご了承くださいませ。
