Entries
2021.02/08 [Mon]
連載「GIFアニメと私」第6章－鉄道アニメの作り方－
これまでの話
連載「GIFアニメと私」第5章・・複数画像から作るGIFアニメーション
連載「GIFアニメと私」第４章・・GIFアニメとブログパーツ
連載「GIFアニメと私」第３章・・Yahoo!ブログ時代
連載「GIFアニメと私」第２章・・ホームページ作成
連載「GIFアニメと私」第1章・・パソコン通信・ESCアニメ・音楽演奏ソフトRay
連載「GIFアニメと私」第３章・・Yahoo!ブログ時代
連載「GIFアニメと私」第２章・・ホームページ作成
連載「GIFアニメと私」第1章・・パソコン通信・ESCアニメ・音楽演奏ソフトRay
１３．鉄道GIFアニメーションの作り方
12項では、動画撮影のキャプチャー画像を使って鉄道GIFアニメーションを作る方法を紹介しましたが、今回は2枚の画像だけで横に動くGIFアニメーションを作る方法を紹介します。
ホームページの3000点以上のフリー素材のうち、半分を占める鉄道イラストアニメーションが、この方法で作られています。
これは、私が試行錯誤の上編み出した方法なので、もっと楽な方法もあるかもしれませんが、今のところ鉄道アニメと乗り物アニメはほとんどこの方法で作っています。
①原画2枚を用意する
まず、背景となる画像と電車やバス・車など動かす画像を用意します。
例として、こんなGIFアニメーションを作る場合を想定します
このとき、次の条件が必要です。
１．背景と列車の大きさのバランスの調整
２．列車の画像は、必ず透過ファイルにする(gif)
３．背景は、写真でもよいが、256色に減色されるので、イラストの方がうまくできる
４．列車の横幅は、背景より短くする
※長い列車も表現できますが、それは後の項で説明します。
たとえば
背景400x120ピクセルなら
動かす列車や乗り物は、それより小さい画像でなければなりません。
↓200x67ピクセル 背景透過gifファイル
②GIFアニメ作成のおおまかな流れ
１．2枚をGIFアニメ作成ソフトで読み込む
２．効果で「左から右へ移動」を選択
３．できたコマを並べ替える
４．効果で「右から左へ移動」を選択
５．電車の消去方法を変更
６．背景の消去方法を変更
これだけだと、「何をめんどくさいことやってるんじゃ？」って感じですが、実はこれで右から現れて、左へ移動して消え、ループするというGIFアニメが半ば自動的にできるんですよ。
この方法、見つけるまでは、背景こみのイラストを少しずつ動いているように1コマ1コマ作成したり、いきなり右に現れて、左まで行ったらそこで終わりというアニメしか作れなかったり、いろいろな試行錯誤がありました。
③詳しい作り方の説明
例によって「ウェブアニメーター」での作成方法なので「Giam」やフォトショやイラレの方は、適当に読み替えて下さい。
作り方
(1)ウェブアニメーター(その他のGIFアニメ作成ソフト)のスタート画面で「アニメーションウィザード」を選択
(2)「複数の画像ファイルを選択してアニメーションを作成」
(3)画像の追加で必要な画像を追加する
(4)背景画像と列車画像を追加して「次へ」
(5)画像の位置は「下中央」を選択して「次へ」
(6)繰り返し「無限」と秒数「500」(初期値)を選択して「次へ」
(7)下の画面のようになります(順番は「背景」→「列車」の順になるように入れ換える)
(8)列車の画像を右クリックして「アニメーション効果」選択
(9)効果の種類は「左から右」を選択して(秒数・コマ数は画像ぐらいが適当)
※「右から左」ではありません。
(10)できたアニメーション↓
(11)列車の画像1番目を消す。最後の空白も１つ残して消す
(12)画像の順番をすべて逆に入れ換える(マウスでつかんで移動)
(13)最後の画像を右クリックして「アニメーション効果」
(14)今度は「右から左」を選択。(秒数・コマ数は(9)と同じで決定する
(15)その後↓
(16)最後の空白が1コマ以上あったら1コマ残して消しておく
(17)真ん中のコマ(18コマぐらい)に同じ位置のコマが２つあるので１つ消す
(18)列車のコマを全部選択して右クリック
(ctrl押しながら選択すると全選択できる)
(19)プロパティの一括変換
(20)消去方法の窓で「フレームが表示される前の画像に戻す」選択してＯＫ
(21)背景画像(先頭コマ)を右クリックして「プロパティ」開き、消去方法を「画像を残す」選択
(22)完成。動作確認。
(23)左上のファイルから名前をつけて保存する(nekoden.gifなど)
以上です。
けっこう面倒ですが、原画作成に時間がかかるので、GIFアニメ変換は10分ぐらいでできます。
背景は、列車や乗り物の大きさによって最適サイズが違うので、いろいろな背景をいろいろな大きさで作ってあります。おそらく200種類ぐらいあるのでは・・・知らんけど(^_^;
④ 作ったアニメの応用編
また、１つ作れば、背景が同一サイズのものに変更するだけで別のアニメにできます。
たとえば↓のことこと列車(平成筑豊鉄道)のアニメは
400x70ピクセルなので 同じ大きさの背景を何枚か前後に追加すると
こういう風に変わります
踏切を通過することこと列車
列車の動いている部分のコマは、いじらずに作成できます。
ホームページの鉄道イラストフリー素材は、背景別に季節感を変えた素材がたくさんありますが、そういうふうに種類を増やしています。
また、背景の大きさが違っていても、たてサイズの小さいアニメから縦サイズの大きいアニメをつくることも可能です。(横サイズは変更できない)
たとえば「観光列車ながら」(長良川鉄道)の↓のアニメを
このように↓縦幅の大きいアニメに変えることもできます。
(列車が動くコマを全選択してY座標を変えればOK)
菜の花畑とキハ
次回予告
次回は、2.3年前にようやくつかんだ長い列車を動かすアニメの作成方法についてです。
たとえば貨物列車のアニメとか↓
今日も最後までお読みいただきありがとうございました。
鉄道の動くイラストフリー素材1500点ぐらいがあります↓
↑応援ありがとうございます。
- 関連記事
-
- 連載「GIFアニメと私」第７章－長い列車アニメの作り方
- 連載「GIFアニメと私」第6章－鉄道アニメの作り方－
- 連載「GIFアニメと私」第5章-イラストアニメや前面展望アニメ
- 連載「GIFアニメと私」第４章
- 連載「GIFアニメと私」第３章
- 連載「GIFアニメと私」第２章
- 連載「GIFアニメと私」その１
Re: マイラさん
ずっと前の作品は稚拙なものばかりで恥ずかしいです。
長くやっている間に少しはマシなものも作れるようになりました。
連載を読んでいただきとても励みになります。