FC2ブログ

動くイラストと猫漫画

鉄道・猫・イラスト・音楽のブログ。15年目に突入。

Entries

連載「GIFアニメと私」第6章-鉄道アニメの作り方-


これまでの話

13.鉄道GIFアニメーションの作り方

12項では、動画撮影のキャプチャー画像を使って鉄道GIFアニメーションを作る方法を紹介しましたが、今回は2枚の画像だけで横に動くGIFアニメーションを作る方法を紹介します。
ホームページの3000点以上のフリー素材のうち、半分を占める鉄道イラストアニメーションが、この方法で作られています。
これは、私が試行錯誤の上編み出した方法なので、もっと楽な方法もあるかもしれませんが、今のところ鉄道アニメと乗り物アニメはほとんどこの方法で作っています。

 ①原画2枚を用意する 

まず、背景となる画像電車やバス・車など動かす画像を用意します。

例として、こんなGIFアニメーションを作る場合を想定します
GIFアニメーション作り方

このとき、次の条件が必要です。

1.背景と列車の大きさのバランスの調整
2.列車の画像は、必ず透過ファイルにする(gif)
3.背景は、写真でもよいが、256色に減色されるので、イラストの方がうまくできる
4.列車の横幅は、背景より短くする
  ※長い列車も表現できますが、それは後の項で説明します。

たとえば
背景400x120ピクセルなら
背景

動かす列車や乗り物は、それより小さい画像でなければなりません。
↓200x67ピクセル 背景透過gifファイル
猫電

②GIFアニメ作成のおおまかな流れ

1.2枚をGIFアニメ作成ソフトで読み込む
2.効果で「左から右へ移動」を選択
3.できたコマを並べ替える
4.効果で「右から左へ移動」を選択
5.電車の消去方法を変更
6.背景の消去方法を変更

これだけだと、「何をめんどくさいことやってるんじゃ?」って感じですが、実はこれで右から現れて、左へ移動して消え、ループするというGIFアニメが半ば自動的にできるんですよ。

この方法、見つけるまでは、背景こみのイラストを少しずつ動いているように1コマ1コマ作成したり、いきなり右に現れて、左まで行ったらそこで終わりというアニメしか作れなかったり、いろいろな試行錯誤がありました。

③詳しい作り方の説明

例によって「ウェブアニメーター」での作成方法なので「Giam」やフォトショやイラレの方は、適当に読み替えて下さい。

作り方
(1)ウェブアニメーター(その他のGIFアニメ作成ソフト)のスタート画面で「アニメーションウィザード」を選択
GIFアニメーション作り方

(2)「複数の画像ファイルを選択してアニメーションを作成」
(3)画像の追加で必要な画像を追加する
GIFアニメーション作り方

(4)背景画像と列車画像を追加して「次へ」

(5)画像の位置は「下中央」を選択して「次へ」
GIFアニメーション作り方


(6)繰り返し「無限」と秒数「500」(初期値)を選択して「次へ」
GIFアニメーション作り方


(7)下の画面のようになります(順番は「背景」→「列車」の順になるように入れ換える)

GIFアニメーション作り方

(8)列車の画像を右クリックして「アニメーション効果」選択
GIFアニメ作り方


(9)効果の種類は「左から右」を選択して(秒数・コマ数は画像ぐらいが適当)
※「右から左」ではありません。
GIFアニメーション作り方


(10)できたアニメーション↓
GIFアニメ作り方

(11)列車の画像1番目を消す。最後の空白も1つ残して消す

(12)画像の順番をすべて逆に入れ換える(マウスでつかんで移動)
GIFアニメ作り方

(13)最後の画像を右クリックして「アニメーション効果」
GIFアニメ作り方

(14)今度は「右から左」を選択。(秒数・コマ数は(9)と同じで決定する

GIFアニメ作り方


(15)その後↓
GIFアニメ作り方

(16)最後の空白が1コマ以上あったら1コマ残して消しておく

(17)真ん中のコマ(18コマぐらい)に同じ位置のコマが2つあるので1つ消す

(18)列車のコマを全部選択して右クリック
(ctrl押しながら選択すると全選択できる)

(19)プロパティの一括変換
(20)消去方法の窓で「フレームが表示される前の画像に戻す」選択してOK
GIFアニメ作り方


(21)背景画像(先頭コマ)を右クリックして「プロパティ」開き、消去方法を「画像を残す」選択

GIFアニメ作り方


(22)完成。動作確認。

GIFアニメーション作り方

(23)左上のファイルから名前をつけて保存する(nekoden.gifなど)

nekodenmake04.png

以上です。
けっこう面倒ですが、原画作成に時間がかかるので、GIFアニメ変換は10分ぐらいでできます。
背景は、列車や乗り物の大きさによって最適サイズが違うので、いろいろな背景をいろいろな大きさで作ってあります。おそらく200種類ぐらいあるのでは・・・知らんけど(^_^;

④ 作ったアニメの応用編 


また、1つ作れば、背景が同一サイズのものに変更するだけで別のアニメにできます。

たとえば↓のことこと列車(平成筑豊鉄道)のアニメは
ことこと列車のイラスト素材

400x70ピクセルなので 同じ大きさの背景を何枚か前後に追加すると
こういう風に変わります
踏切GIFアニメーション
踏切を通過することこと列車

列車の動いている部分のコマは、いじらずに作成できます。

ホームページの鉄道イラストフリー素材は、背景別に季節感を変えた素材がたくさんありますが、そういうふうに種類を増やしています。

また、背景の大きさが違っていても、たてサイズの小さいアニメから縦サイズの大きいアニメをつくることも可能です。(横サイズは変更できない)

たとえば「観光列車ながら」(長良川鉄道)の↓のアニメを
観光列車ながらイラスト素材

このように↓縦幅の大きいアニメに変えることもできます。
(列車が動くコマを全選択してY座標を変えればOK)
観光列車ながらイラスト素材
菜の花畑とキハ

 次回予告 

次回は、2.3年前にようやくつかんだ長い列車を動かすアニメの作成方法についてです。
たとえば貨物列車のアニメとか↓
銀釜gif


今日も最後までお読みいただきありがとうございました。
銀釜

鉄道の動くイラストフリー素材1500点ぐらいがあります↓


↑応援ありがとうございます。




関連記事

コメント

Re: マイラさん 

作品を大切にしていただきありがとうございます。
ずっと前の作品は稚拙なものばかりで恥ずかしいです。
長くやっている間に少しはマシなものも作れるようになりました。

連載を読んでいただきとても励みになります。

Re:峠さん 

私も一つのソフトをずーっと使い続けているだけで
特別なことはしていません(^_^;
新しいものにはついていけないです。
フラッシュではなくGIFが生き残ったので
運がよかったとしか思えません。

たぶんフラッシュ一辺倒の世界になっていたら
とっくに消えています。

無題 

猫たちが乗っている電車は楽しくて大好きです。
何年も前ですが”Welcome”と”また来てね”のメッセージと共に猫の車のイラストを作って戴いてそれらは宝物にしています。本当にありがとうございました。
長い列車になっていったりとどんどん進化していて素晴らしいですね。
  • posted by マイラ 
  • URL 
  • 2021.02/09 06:07分 
  • [Edit]

無題 

ソフト 使いこなす頭脳持ち合わせ
ない
 と言うより
 ソフト導入がこわ~い 私 (:_;)

 誰でもは できないわぁ
 ちいこさんは特別な方です
 私がボケるまで お世話になります
 
  • posted by 峠 美千子 
  • URL 
  • 2021.02/08 18:15分 
  • [Edit]

Comment_form

管理者のみ表示。 | 非公開コメント投稿可能です。

Menu

最新記事一覧(サムネイル画像付き)

猫漫画「カツラ猫とチコちゃん」 May 18, 2022
美しく変身「銀釜EF81 303」動画・写真・イラストgif鉄 May 15, 2022
猫漫画「エコ暖房でくつろぐ猫」 May 14, 2022
描き鉄GIF鉄「ガンダムと九州新幹線など(ららぽーと福岡)」 May 13, 2022
生観戦「東浜投手ノーヒットノーランおめでとう!」 May 12, 2022
描き鉄GIF鉄「若桜鉄道観光列車3両編成イラスト素材」 May 10, 2022
描き鉄GIF鉄「若桜鉄道その3若桜号のイラスト」フリー素材 May 09, 2022
描き鉄GIF鉄「若桜鉄道気動車 八頭号のイラスト素材」 May 08, 2022

ブロとも申請フォーム

シンプルアーカイブ

シンプルアーカイブの使い方
2007~2012ヤフーブログ

プロフィール

ちいこ

Author:ちいこ
ホームページ「動くイラストフリー素材」で3000点以上のフリー素材配布中

FC2ブログカウンター

ランキング参加中

応援ありがとうございます

鉄道コム にほんブログ村 イラストブログ フリーイラストへ
にほんブログ村