アニメバナーどうやって作るの？ って聞かれたので、超カンタンに解説。

まあ、わかってるとは思うけど、同じサイズの画像用意して、パラパラアニメの要領でくっつけただけなんだけどね（笑）。

それじゃあまりに不親切なんで、一応、ちょこまか解説！
「朝日巨額脱税疑惑」などをわかりやすく世に広めるために、みんなやってみよう！

といっても、あんまり長いのになると、気が狂ってる人くらいしかやらんだろう（汗）。
というわけで、画像10枚制限でやってみたよ（実際には9枚だけどな）。

まずは画像をつくらないとね、ってことで、ソフトを用意しよう。
おいらはたまたま前職が前職なんで、イラストレーターとかフォトショップとかあるんだけど、プロパガンダ目的に買うのもなんなので、フリーソフトを使うといいと思うね。

ちなみに、画像をわざわざべつに作らなくても、下の方に書いたGIFアニメ制作ソフトの機能だけでも作れるヤツもあるみたい。
おいらはやってないのでよくわらんけどね。


●フォトショップみたいなことができるヤツ

GIMP
http://www.gimp.org/（公式）
http://www.geocities.co.jp/gimproject/gimp2.0.html（日本語解説）

●イラストレーターみたいなことができるヤツ

INKSCAPE
http://inkscape.org/index.php?lang=ja（公式、日本語）

OpenOffice（Draw）
http://ja.openoffice.org/（公式、日本語）


要は、文字が入れられて、できれば画像も入れられるヤツを選べばいいというわけだ。
おいらはフリーソフトの需要がないので、よくわからんのだけど、もしかするとほかにもいろいろあるかもね。
ちなみに、ウインドウズ版、マック版、ともにあるので、マカーのお仲間も大丈夫でっせ！

あとは、もっといいフォントが欲しい！ という人もいるだろう。
これは正直グーグルさんに聞いたほうが早い。→Google検索「フォント 無料」
昔と違って、いまは漢字対応の無料フォント山ほどあるからなあ…。

で、画像を作るときには、あらかじめ、サイズを決めておくこと。
おいらのブログの場合、見てのとおり記事の幅が500ピクセルなので、それに合わせたというわけだ。

では、スタート！


1　最初に基本画像を作っておこうね！

このように、ケイ線で囲んだ基本画像があると便利。
背景色によっては、目立たなくなるので、ケイ線あったほうがいいよ。
色はそれぞれ個人の好みのイメージで。
ファイル形式はどうせGIFファイルになるので、GIFにしておくのが一番いいと思う。

おいらはいつも、最初の1枚はこのブランクの画像にしている。
あと、実は、場面切り替えのときにも、挿入していたりする。




2　次々に画像を作ろう！

以下のように、基本画像を元にしてどんどん作ろう。
文字だけでも結構なんとかなるよ！

ちなみに、画像はただのサンプルな（笑）。


















3　作ったファイルをアニメにしよう！

ソフトがあればカンタンにできるよ。
ちなみに、ウェブでやる方法もあるので、ソフト入れるのメンドクセーって人も問題なし。


●ウインドウズな人

GIAM
http://homepage3.nifty.com/furumizo/giamd.htm

※おいらマカーなので、よくわからんけど、適当に見つけたの入れておくわ、いいかげんですまん（笑）。

●マックな人

GIFQuickMaker
「App Store」からダウンロードできるよ。

※いまこれ使って作ってる、作者の方、どうもありがとう！

●ウェブでやるという人

GIFアニメ工房
http://www.animegif.net/


よくわからないという人は、最後のウェブがおすすめ。
ただし、

・画像は10枚まで（ただし、分けて作ったGIFアニメを10枚まで入れて結合もできる）。
・切り替え時間は均一でしかできない（ただし、分けて作ったヤツをそのままの切り替え時間を維持して結合することはできるし、同じ画像を2回表示させて時間を倍にする手もある）。
・容量はだいたい1MBくらいまで（普通は問題ないはず）。
・画層サイズは縦横640ピクセルまで（大きい画像を入れるとリサイズされる）。

という制限があるのでその点だけ要注意ってことで。


4　あとはできたファイルを載せるだけ！

上のウェブで作ってみたものがこれね（http://grnba.com/pub_tools/bn/sample.gif）。
切り替え時間は1.5秒、最初の画像はブランク、最後の画像は2回表示（3秒維持）としている。


※原寸は500×100、ここでは450×90にて表示。

表示させる方法は以下のとおり（きのこ組方式の解説、＜＞を半角に変えてね）。

＜img src="画像のアドレス" width="幅" height="高さ"＞


意外とこれだけでもどうにかなるもんでしょ？（笑）
ぜひぜひやってみよう！

文字のチカチカとかは、画像を互い違いで切り替えればできるよ。

ちなみに、フラッシュを使うという方法ももちろんある。
そんなのわからんしソフトねえよ！ と、言われそうだが、そんな問題も実はない。
いくらでも、フラッシュアニメーションの素材が転がってるからね（しかも、FC2なんかのウェブサービスでも、わりと使えるよ）。

http://elz.jp/manual/fpe/p_sample_easy.html

ただ、最近はフラッシュ非対応のスマートフォンとかが多いので、あんまり勧めないけどね。

自分でフラッシュ作りたい…って人は、恐縮だけど、教則本かウェブでやってくださいまし（汗）。
あんなの解説してたら、専門のブログになっちまう…。
HTML5？
まあ、そのへんも自分でどうにかしてくださいまし！

やっぱり、画像のほうが文字よりも伝わるよねえ。
というわけで、みんな頑張りましょ。

さて、まとめとしてどうでもいい話。
こだわりにこだわると、狂ったものがいくらでもできるよ（http://grnba.com/pub_tools/bn/shindeiru.gif）。


※原寸は500×100、ここでは450×90にて表示。

って、いくら暇な時期だからって、なにやっとんじゃ、オレは…。
まあ、TPPの作ろうと思って、なかなかアイデアがまとまらなかっただけなんだけどね。

なにが大変って、構成考えるのが一番大変。
もうちょっとお待ちあれ！

トラックバックURL

FC2ブログユーザー専用トラックバックURLはこちら