アニメバナーの作り方

（14.6.10掲載、16.5.16更新、20.1.20最終更新）

ーペイントソフト、アニメメーカーの使い方ー

ペイントソフトでバナーの画像を作りながら、

Animetion ＧＩＦ Maker を使ったらどうだろう・・・と、

思いついて試作してみました。

このバナーの作り方を解説します。

例として、

管理人ほのぽん氏のＨＰタイトルをお借りしました。

解説

PC環境は、

windows９８SE　MSペイント　IE５．０１

アニメ作成ソフトは、Animetion ＧＩＦ Maker

必要なもの

ペイントソフト、Animetion ＧＩＦ Maker

※同じwindowsのペイントでも、

　ＧＩＦ（ｇｉｆ）形式保存ができるものと、できないものがあります。

　ＧＩＦ（ｇｉｆ）形式保存ができない場合は、

　bmp画像で作り、フロントページエクスプレスで画像表示して、ページ保存をすると、

　bmp画像がｇｉｆ画像に変換されます。

　ホームページ（ＨＰ）作成ソフト、フロントページエクスプレスがない場合は、

　雑誌の付録ＣＤやmicrosoftのHPで

　インターネットエクスプローラー（IE）ごと入手できます。

ペイントの起動

ペイントソフトは、

ＯＳがｗｉｎｄｏｏｗｓの場合、

スタート、アクセサリ、ペイント、で起動します。

ショートカットを作る

ペイントを頻回に使う場合は、

デスクトップにペイントのショートカットアイコンを置いておくと便利です。

ペイントを起動する前に、右クリックして、ショートカットを作成。

ペイント（２）の文字をクリック、ドラッグして、

デスクトップの何もないところでドロップ（手を離す）

アニメーション作成ソフトを手に入れる

フリーソフトの、Ａｎｉｍａｔｉｏｎ　ＧＩＦ　Ｍａｋｅｒ　をダウンロード（ＤＬ）します。

「ダウンロードはこちら」をクリック。

デスクトップに自己解凍ソフト「gifan071.exe」ができます。

クリックすると、インストール画面になります。

インストール先は、C:\Program Files\Gifanimになります。

Ｃドライブ、プログラムファイルの中に、Gifanimフォルダーができます。

この中のgifanim.exeをクリックすると、起動します。

gifanim.exeアイコンを右クリックして、ショートカットを作って

デスクトップに置いておくと便利です。

画像を作る

例：

このアニメは、１１枚の画像でできています。

基本画像と１枚目画像を作る

ペイントを起動。

左のＡボタン（テキスト）をクリック。

白い背景（パレット）の中でクリックしたまま、右下へ移動（ドラッグ）すると、

下図のようになります。

書式バーが表示されない時は、表示、書式バーをクリック。

下図の画面を説明します。

１　書体選択　　２　文字サイズ選択

３　文字の背景付きで表示　　４　文字だけを表示（背景は透けて見える）

５，６，７　はパレットの範囲（大きさ）の移動。

小さい黒四角にマウスを合わせると、矢印に変わる。

５　矢印に変わった状態でクリックしたまま、上下に移動。

６　斜めに移動。パレット全体の大きさが変わる。

７　左右に移動。

文字入力

テキストボックスの中に文字を入れる。

例：HABARIGANI

文字を枠で囲む

四角ボタンをクリック、

始点でクリック、終点までドラッグ。

間違えたり、表示をやり直したかったら、

編集、元に戻すをクリック。一つ前の作業画面に戻る。

拡大

作業をやりやすくするため、画面表示を拡大します。

拡大縮小ボタンをクリック、２×をクリック。

文字の色を変える

パレットの赤をクリックすると、パレット左に選択した色が出る。

塗りつぶしボタンをクリック。インクの先端を文字に合わせてクリック。

背景を塗る

パレットで水色を選択。文字の背景部分でクリック。

囲まれた範囲内は塗りつぶせないので、

白い部分でクリック。

画像を切り取る

背景を水色に塗れたら、選択ボタンをクリック。

必要な画像の範囲を囲み、

編集、切り取り、

ファイル、新規作成、

切り取った残り画像を保存するか、というコメントが出るので、いいえをクリック。

新規の画面になるので、編集、貼り付けをクリック。

背景パレットの大きさを、画像に合わせるので、

背景の右下端の小さい四角にマウスを合わせてクリック、

画像の右端まで移動。

これで下図の画像が完成。

保存

ファイル、名前を付けて保存をクリック。

１　をクリックして　２　保存場所をデスクトップ

３　ファイル名を適当に、この場合は、例として、ｂａｎａ1　

４　ファイルの種類を　24ビット　ビットマップ（＊bmp；dib）にして、

５　保存

これでbmp画像として保存完了。

この画像を基準にして、アニメ画像を作ります。

ＧＩＦ保存

各画像を作る（加工）するには、ｂｍｐ形式が便利ですが、

アニメ画像は、ＧＩＦ形式画像を使用するので、

出来上がり画像はＧＩＦ形式保存をします。

今、開いているペイント画面の左上が、「bana○．bmp−ペイント」

となっているので、もう一度、ファイル、名前を付けて保存で、

ファイル形式をＧＩＦを選んで保存。

下図のコメントが出るので、はい　をクリック。

これでＧＩＦ保存が完了。

２枚目画像を作る

もう一度、先程のｂｍｐ画像を表示します。

ファイル、開く、

デスクトップの中の、ファイル形式をｂｍｐにして、

bana1.bmpを開きます。

最初に作ったこの画像を表示して、

選択ボタンをクリック、ABARIGANI　を囲って、

編集、切り取り、

すると、下図のように、選択した部分が切り取られます。

パレットの水色をクリックして、塗りつぶしをクリック、

切り取った白い部分でクリックすると、

下図のようになります。

この画像を保存します。

ファイル、名前を付けて保存をクリック、

ファイル名をbana2　ファイルの種類をＧＩＦ形式にして、保存。

これで２枚目の画像が完成。

３枚目画像を作る

次に、ファイル、開く、で、また最初の画像　bana1.bmp　を表示します。

下図のように、RIGANI　を切り取り、

パレットの水色をクリックして、塗りつぶしをクリック、

切り取った白い部分でクリック。

ファイル、名前を付けて保存、ファイル名を　bana3　ＧＩＦ形式で保存。

こうして、作業を続けて、下図の画像が　bana10．ｇｉｆ

下図の画像が　bana11.gif

これで、ＧＩＦ画像がすべて完成。

bana １

bana 2

bana 3

bana 4

bana 5

bana 6

bana 7

bana 8

bana 9

bana１0

bana１1

画像の整理

デスクトップのｇｉｆ画像bana１〜１１を、

このままデスクトップに置いたままでもいいですが、

一つのフォルダーに入れた方が、すっきり作業が進みます。

デスクトップの何もない所で、右クリック、新規作成、フォルダをクリック

デスクトップに新しいフォルダができます。

「新しいフォルダ」というタイトルが反転文字になっているので、

BackSpaceキーで消して、フォルダ名を「bana画像」にします。

このフォルダに、今まで作ったｇｉｆ画像１１枚を、ドラッグ、ドロップ（手を離す）

bana画像フォルダをクリックすると、中に１１枚の画像が入っています。

アニメを作る

Ａｎｉｍｅ　ＧＩＦ　Ｍａｋｅｒ　を起動します。

左下の窓の中、bana画像のフォルダをダブルクリックすると、

左上に１１枚のｇｉｆ画像が表示されます。

もし、デスクトップーbana画像が表示されない時は、

ｃ￥の下でｗｉｎｄｏｗｓを探してダブルクリック、

ｗｉｎｄｏｗｓの下で、デスクトップをダブルクリック、bana画像をダブルクリック。

画像の表示順序を設定

まず、bana.1ｇｉｆ　をクリック、追加をクリック。すると、下図のように、

右の窓に　bana1.gif　が表示されます。

続けて、１１、２，３，４，５，６，７，８，９，１０，１、１１，１，１１　と追加。

すると、下図のようになります。

表示速度（ディレイ）を設定

1パラメータタブをクリック 、２右のbana1.gif　をクリックしたままま、

bana11.gif　まで移動して、１５枚を反転させる。

３左のディレイに５０を入力、４更新をクリック

すると、右のディレイ部分が５０に設定されます。

作成をクリック。

保存場所をデスクトップ、ファイル名を「bana-ani」にして、保存。

その他、のタブをクリック。作成画像確認をクリック。

すると、インターネットエクスプローラー（IE）が起動して、

下図のようなアニメが表示される。

画像の表示内容と速度の変更

IEでアニメを見て、画像表示順序や、速さを変えたい場合は

先程の作業画面に戻って作業を繰り返す。

画像順序の変更：ファイルタブ

速度の変更：パラメータタブ

　　ディレイで、５０は50/100秒でが画像が変わる。

　　数字が少なくなると早く、数字が多くなるとゆっくり表示される。

変更したら、先程と同じように、

作成をクリックして、ファイルに保存。

保存は、上書きでも、名前を変えても、どちらでも可。

それからIEで確認。

完成画像使用

アニメが完成したら、そのファイルだけをHPに表示して、ファイル転送。

例の場合だと、HP作成ページで、bana-ani.gif　を表示。

この時はアニメの動きにはなりません。

ページを保存、通常の転送。bana-ani.gif　も転送。

web上で見ると、アニメ画像で見られます。

※アニメｇｉｆファイル（bana-ani.gif）は、

　１１枚の画像ファイルをまとめたものです。

　従って、１１枚の画像ファイルはもう使いません。

　１１枚は、あとで変更する時のために、ＰＣに保存しておいてもいいし、

　基本のbmp画像だけを保存して、他は削除しても構いません。

アニメ画像の応用

作り方の基本は同じです。画像全体を最初に作り、

それを基本に部分的に切り取って背景を塗りつぶして保存。

○で囲った外側を黒で塗りつぶして、

○の位置を変えると、スポットライトが当たったようになります。

色々作ってみて下さい。

バナーの例は文字だけの動きですが、絵の動きを表示させることもできます。

バナーは、小さい物を完成品としますから、作成過程では大きい画像を使い、

完成したら、アニメ画像全体を縮小して使えます。

Animetion ＧＩＦ Maker　はアニメ作成ソフトですから、本来のアニメを作れます。

トレードマークや、看板など、色々なものに使うことができます。

ペイントで画像を描く方法及び、

Animetion ＧＩＦ Maker の入手方法、使用方法は、

「アニメの作り方」

でも多少解説しています。

ホームページのｔｏｐへ