ホーム ⇒ フォトショップ講座  ⇒ GIFアニメ講座4

  4:バナーを作ろう!  
◆◇オリジナルの動くバナーを作ってみよう◇◆

たぶん、最もよく使われているGIFアニメはバナーでしょう。
あなたのサイトのアクセスアップにGIFアニメバナーを活用しましょう。
2006年07月28日更新

前超簡単GIFアニメ!

戻る

写真でGIFアニメ!次

バナーって何?

バナーとは、バナー←のような、サイトへのリンクに使われる画像です。bannerは英語で「旗・垂幕(たれまく)」という意味です。

サイトをお持ちの方は、ご自分のサイトのバナーをはっている方が多いでしょう。リンクしてくださる方用や、検索エンジンに投稿する時にもバナーがあると便利ですね。

バナーは普通GIF形式で作りますが、JPEG形式のバナーやFlashのバナーもあります。動くバナーはGIFとFlashです。

GIFアニメバナー作りで大切なこと(重さ・大きさ)

バナー作りで最も大切なことは軽く作ることです。

ではどのくらいの重さで作ったらいいのでしょうか? 常識的な重さとしては、1〜5キロぐらいで、いくら重くても10キロバイトぐらいまでだと思います。

GIFアニメって、うっかりしているとあっという間に重くなるんですよね。ちなみにGIFアニメがどのくらいの重さになるのかの目安として、長編のバナーを作ってみました。見てみたい方はこちらへどうぞ。ただしページ全体で100キロもあって重いですよ。こんなバナー作ったら迷惑以外の何ものでもありません。

それから大きさ。バナーには「絶対このサイズ」という決まりはありませんが、88×31ピクセルバナーの大きさのバナーが最もよく使われています。中途半端な数字ですが、世界的に一番よく流通している大きさなので、これを作っておけば間違いありません。

他には200×40ピクセルバナー2のものも、日本の中だけですがよく使われています。

材料

Windowsの方は右クリックで Macintoshの方はドラッグ&ドロップでデスクトップにダウンロードして下さい。

背景(2.5kb)

完成作品

Flower Flower

作り方

文字のレイヤーの複製を作っておく文字のレイヤーの複製を作っておく

今回は「FLOWER・FLOWER」という架空のサイトのバナー作りに挑戦してみましょう。

ImageReadyで作ってもいいのですが、今回はPhotoshopで材料となる画像を作っておきましょう。

背景となる画像の上に、お好きな色でタイトルの文字を書きます。 その文字のレイヤーの複製を作ります。

そのままOKをクリックそのままOKをクリック

作った複製をぼかします。 【フィルタ→ぼかし→ぼかし(ガウス)】を選ぶと、左のようなウィンドウが出ますので、そのままOKします。

ぼかし(ガウス)のウィンドウぼかし(ガウス)のウィンドウ

するとぼかしウィンドウが出ますので、スライダをお好きなところまで動かして文字をぼかしてください。

アニメーションパレットでコマを作る

ImageReadyを起動して、アニメーションパレットを見てください。GIFアニメ講座3でやったように、アニメのコマを作ってゆきます。

それぞれ図のようにレイヤーの表示・非表示を変えてください。 2番目と4番目のコマは同じものです。

二つのコマはどちらも文字のレイヤー(FLOWER・FLOWER)の不透明度は50%にしてください。 これで4コマのアニメの元ができました。

時間を設定する

次に、表示時間の設定をします。 あまりチカチカと画面が動くと見にくいので、少し長めに設定しました。時間の設定の仕方はGIFアニメ講座3を参照してください。

赤い丸の部分の再生ボタンをクリックして上手く動くか試してみましょう。 これでOKという場合は保存してできあがりです。

完成作品

Flower Flower

今回は「ぼかし」フィルタを使いましたが、Photoshop6.0からある文字の変形「ワープツール」を使ったり他のフィルタで様々に文字を変形させると、いろんなバナーを作れますよ。

応用作品

様々なアニメバナーの例を作って置いてみました。皆さんも工夫を凝らしたオリジナルバナーを作ってみて下さいね。

ドット絵イラスト型

静止画表示型

タイプライター型

ワープテキスト型

フィルタ(ぼかし)型

1.5キロバイト

1.6キロバイト

1.0キロバイト

4.2キロバイト

5.5キロバイト

少しずつ変化したイラストを表示させるもの。

静止画を次々に表示させるもの。

文字が一つ一つ表示されるもの。

ワープテキストで少しずつ変化させたもの。

イラストを移動したものと、文字をフィルタで加工したもの。

前超簡単GIFアニメ!

戻る

写真でGIFアニメ!次

幻想画廊」 (c) Maria Garcia, 2002-2008

ホーム ⇒ フォトショップ講座  ⇒ GIFアニメ講座4