雪降るGIFアニメの作成

BACKHOMENEXT


年賀のGIFアニメの作成方法についての御質問が有りましたが・・・
私自身が、長い時間をかけて試行錯誤の末に仕上げたのですが、未だに未完成の段階です。
今回は、仕上げの概容と言うことで、各自で更に完璧なGIF画像作成を目指して頂けたらとの思いで掲載することにしました。
作成前に、加工に用いる写真の元画像は別に保存しておいて下さい。


*色の数値は、左から色設定の中にある赤:緑:青の数値で、その他の :の横にある数値は、加工時に設定する数値です。
塗りつぶしの許容範囲の数値は、写真画像などを全面塗りつぶす場合は100ですが不要部分の塗りつぶしや一部分の塗りつぶしは許容範囲の数値が微妙に変わる場合がある為、自分で確認しながら設定して下さい。
画像の上にカーソルを置いてクリックで拡大画像が表示されます。文字の場合にはリンクします。

説明用に画面を合成していますので、実際の画面と異なる部分があります。(メニューバーの実行項目が2箇所表示されたり、ダイアログボックスまで、同一画面表示等...)

メニュバーの項目から入る表示方法を優先しますが、画像が隠れてしまう等の場合にツールバーのアイコンで表示する場合もあります。



(1枚目のJTrim)
1.
1枚目のJTrimを立ち上げて、ファイル→新規作成で200×150の黒いキャンバス作成。(白紙作成後に、黒色で塗りつぶしても良い!)

編集→文字入れをクリックする。
文字色を白色に設定する以外は、フォント   文字サイズ   
文字 全て任意で、左図の様な基本形を作る。

出来るだけバックに仕上がりの画像を掲示する様にしています。



キーボードからの直接入力で、好みの文字をサイズを変えて入力したり、二文字を組み合わせたりしながら、ある程度入力して数を増やしたら、コピーして、明るい画素優先で合成したり、複写/移動を用いて仕上げてゆく。

参考に張り付けた記号や雪の結晶風等は、リサイズを用いて縦長変形にしたり、文字を形成する許容範囲以下のpxにすると元の文字が変形することを利用して拡大後に複写/移動を用いて1px単位の移動で、いろんな形に仕上げることが出来る。

しかし、GIFアニメに仕上げると、殆どの加工文字を使う事無く、シンプルな十字形や四角形の大小を多用する結果になった。

(1枚目のJTrim)
2.
基本形をコピーしてから、

編集→連結をクリックする。

作成した画像に応じて左右のどちらかに連結するが、ミラーやフリップとの組み合わせを用いて出来るだけ同一パターンの繰り返しを避ける様にする。

横方向に3個連結して、600×150pxのサイズに仕上げる。

連結後の画像を編集→コピーする。



(1枚目のJTrim)
3.
編集→連結をクリックする。

上記2の600×150pxの画像を上下のどちらかに連結するが、ミラーやフリップとの組み合わせを用いて出来るだけ同一パターンの繰り返しを避ける様にする。

縦方向に3個連結して600×450pxのサイズに仕上げる。



(1枚目のJTrim)
4.
連結した画像の中で、縦と横の同一ライン上に並んだ記号の位置をずらしたり、同一記号やパターンが似通っている部分等が集中している箇所の調整や修正を  複写/移動と合成  を用いて行う。

仕上がった画像に、「背景基本画像」と言う名前を付けて保存する。

保存する場合の拡張子は「.bmp」で保存する。

*今回に限らず作成時の画像は全て「.bmp」で保存する様にする。



上記4や、下記5、今から作成する「背景@」〜「背景D」の画像は、作成過程の終わりに一括掲載します。
初心者の方で作成が不慣れな方は、持ち帰り、GIFアニメ作成練習用の参考資料として用いて下さい。

(1枚目のJTrim)
5.
この「背景基本画像」を、600×450の場合はそのまま用いる。

年賀用は550×413で切り取って用いています。

参考例は500×375のサイズに切り取るので
イメージ→座標指定切り抜きクリック、座標指定切り取りのダイアログボックスに
(座標1) X:0 Y:0 (座標2) X:500 Y:375 の数値を入れて、OKをクリックして切り取る。

イメージ→リサイズでは、画像が暗くなり、GIFアニメにした場合に、容量も増えて上手く仕上げることが出来ませんでした!



(1枚目のJTrim)
6.
切り取り後の画像にアニメにした際の上下の移動感を出す為の空間を作る。(空間にする部分の記号を、範囲指定して塗りつぶしたり、複写/移動で削除して仕上げる)

今回この部分が最も苦労し悩む部分ですが私の用いた画像を2諧調化した画像を参考資料用に掲載します。

この画像を600×450より小さい場合は、今度は、切り取らずにイメージ→リサイズで縮小して用いる。

500×375pxにリサイズした画像を編集→コピーする。



(1枚目のJTrim)
7.
上記5で、切り取った画像に編集→合成:暗い画素優先で合成して左図の状態に仕上げる。



(1枚目のJTrim)
8.
更に、複写/移動を用いて、微調整する。

最終的にGIFアニメの仕上がり状態を見て、各自の好みで修正する事。

この画像の名称を「背景@」と名前を付けて保存する。
名前は各自で分かり易い名前を付ければ良いが、bヘ間違えない様に注意!

以降2枚のJTrimを交互に用いて仕上げて行きます。



(1枚目のJTrim)
9.
「背景@」の画像を
イメージ→座標指定切り抜きクリック、座標指定切り取りのダイアログボックスに
(座標1) X:0 Y:360 (座標2) X:500 Y:375 の数値を入れて、OKをクリックして切り取る。

この作成例では、500×15px幅に切り取るが、画像サイズに応じて変える。600pxの場合は600×20px位の方が良いと思う。



(1枚目のJTrim)
10.
切り取った画像を編集→コピーする。

必ず、コピーしてから
元に戻すアイコンをクリックして、元に戻す。



(1枚目のJTrim)
11.
元に戻してから、編集→連結をクリックする。
上へ連結して左図の状態に仕上げる。

連結後の画像を編集→コピーしてから、2枚目のJTrimに行く。



(2枚目のJTrim)
12.
2枚目のJTrimを立ち上げてから、編集→貼り付けをクリックする。

イメージ→座標指定切り抜きクリック、座標指定切り取りのダイアログボックスに
(座標1) X:0 Y:0 (座標2) X:500 Y:375 の数値を入れて、OKをクリックして切り取る。

切り取り後の画像名称を「背景A」と名前を付けて保存する。

切り取り後の画像を編集→コピーしてから、1枚目のJTrimに戻る。



(1枚目のJTrim)
13.
1枚目のJTrimに戻って
編集→貼り付けをクリックする。

イメージ→座標指定切り抜きクリックすると、先程切り取った座標値が表示されるので、OKをクリックして切り取る。

切り取り後の画像を編集→コピーする。

必ず、コピーしてから
元に戻すアイコンをクリックして、元に戻す。



(1枚目のJTrim)
14.
元に戻してから、編集→連結をクリックする。
上へ連結して左図の状態に仕上げる。

連結後の画像を編集→コピーしてから、2枚目のJTrimに行く。



(2枚目のJTrim)
15.
2枚目のJTrimを開いて、編集→貼り付けをクリックする。

イメージ→座標指定切り抜きクリックすると、先程切り取った座標値が表示されるので、OKをクリックして切り取る。

切り取り後の画像名称を「背景B」と名前を付けて保存する。

切り取り後の画像を編集→コピーしてから、1枚目のJTrimに戻る。



(1枚目のJTrim)
16.
1枚目のJTrimに戻って
編集→貼り付けをクリックする。

イメージ→座標指定切り抜きクリックすると、先程切り取った座標値が表示されるので、OKをクリックして切り取る。

切り取り後の画像を編集→コピーする。

必ず、コピーしてから
元に戻すアイコンをクリックして、元に戻す。



(1枚目のJTrim)
17.
元に戻してから

編集→連結をクリックする。
上へ連結して左図の状態に仕上げる。

連結後の画像を編集→コピーしてから、2枚目のJTrimに行く。



(2枚目のJTrim)
18.
2枚目のJTrimを開いて、編集→貼り付けをクリックする。

イメージ→座標指定切り抜きクリックすると、先程切り取った座標値が表示されるので、OKをクリックして切り取る。

切り取り後の画像名称を「背景C」と名前を付けて保存する。

切り取り後の画像を編集→コピーしてから、1枚目のJTrimに戻る。



(1枚目のJTrim)
19.
1枚目のJTrimに戻って
編集→貼り付けをクリックする。

イメージ→座標指定切り抜きクリックすると、先程切り取った座標値が表示されるので、OKをクリックして切り取る。

切り取り後の画像を編集→コピーする。

必ず、コピーしてから
元に戻すアイコンをクリックして、元に戻す。



(1枚目のJTrim)
20.
元に戻してから

編集→連結をクリックする。
上へ連結して左図の状態に仕上げる。

連結後の画像を編集→コピーしてから、2枚目のJTrimに行く。



(2枚目のJTrim)
21.
2枚目のJTrimを開いて、編集→貼り付けをクリックする。

イメージ→座標指定切り抜きクリックすると、先程切り取った座標値が表示されるので、OKをクリックして切り取る。

切り取り後の画像名称を「背景D」と名前を付けて保存する。

以上の5枚で背景画像の完成!




合成に用いる画像が、夜景やイルミネーション画像等の場合に、合成に用いる1枚と、背景画像5枚を用いて、Giamで背景画像の5枚だけを「透過色の使用」と「ウエイト」と消去手段の「直前の画像に戻す」を用いて、アニメ作成出来ます。
瞬間的に動作が途切れる様に感じた為、今回はパスしますが、興味のある方は試みて下さい。

(1枚目のJTrim)
22.
1枚目のJTrimを開いて、ファイル→開くから、GIFアニメに用いる画像をJTrim上に開く。

リサイズや、トリミングをして、500×375のサイズにする。

画像のサイズ変更については、こちらの”合成する画像のサイズを作成する。” を、参照して下さい。

背景画像が5枚と少ない為、合成に用いる画像で仕上がり感がかなり変わりますので、動きが不自然な場合は、変えてみて下さい。
(参考サンプルの様に上側が雪背景に溶け込む様な画像を選ぶ)



(2枚目のJTrim)
23.
2枚目のJTrimを開いて、

ファイル→開くから、保存しておいた背景画像の画像名称:「背景@」を、JTrim上に開く。

編集→コピーしてから、1枚目のJTrimに戻る。



(1枚目のJTrim)
24.
1枚目のJTrimに戻って、編集→合成をクリックする。

合成:明るい画素優先で合成する。

合成後の画像名称を「アニメ用画像@」と名前を付けて保存する。

名前は各自で分かり易い名前を付けても良いが、bヘ必ず、合成に用いた背景bニ同じにすること!

合成保存後に、元に戻すアイコンをクリックして、元に戻してから、2枚目のJTrimに行く。



(2枚目のJTrim)
25.
2枚目のJTrimを開いて、

ファイル→開くから、保存しておいた背景画像の画像名称:「背景A」を、JTrim上に開く。

編集→コピーしてから、1枚目のJTrimに戻る。



(1枚目のJTrim)
26.
1枚目のJTrimに戻って
編集→合成をクリックする。

合成:明るい画素優先で合成する。

合成後の画像名称を「アニメ用画像A」と名前を付けて保存する。

合成保存後に、元に戻すアイコンをクリックして、元に戻してから、2枚目のJTrimに行く。



(2枚目のJTrim)
27.
2枚目のJTrimを開いて、

ファイル→開くから、保存しておいた背景画像の画像名称:「背景B」を、JTrim上に開く。

編集→コピーしてから、1枚目のJTrimに戻る。



(1枚目のJTrim)
28.
1枚目のJTrimに戻って
編集→合成をクリックする。

合成:明るい画素優先で合成する。

合成後の画像名称を「アニメ用画像B」と名前を付けて保存する。

合成保存後に、元に戻すアイコンをクリックして、元に戻してから、2枚目のJTrimに行く。



(2枚目のJTrim)
29.
2枚目のJTrimを開いて、

ファイル→開くから、保存しておいた背景画像の画像名称:「背景C」を、JTrim上に開く。

編集→コピーしてから、1枚目のJTrimに戻る。



(1枚目のJTrim)
30.
1枚目のJTrimに戻って
編集→合成をクリックする。

合成:明るい画素優先で合成する。

合成後の画像名称を「アニメ用画像C」と名前を付けて保存する。

合成保存後に、元に戻すアイコンをクリックして、元に戻してから、2枚目のJTrimに行く。



(2枚目のJTrim)
31.
2枚目のJTrimを開いて、

ファイル→開くから、保存しておいた背景画像の画像名称:「背景D」を、JTrim上に開く。

編集→コピーしてから、1枚目のJTrimに戻る。



(1枚目のJTrim)
32.
1枚目のJTrimに戻って
編集→合成をクリックする。

合成:明るい画素優先で合成する。

合成後の画像名称を「アニメ用画像D」と名前を付けて保存する。

以上の5枚でアニメ用画像の完成!





”以降は、Giamを用いたGIFアニメ作成過程です。”が、今回は省略形で簡単に記載しますので
詳細なアニメの作成方法については、こちらのソフトの使い方(giam)やJTrimRingの Giamの使い方
又、"JTrim Ringの「We Love JTrim」の" miyaさんのサイトに、詳しく掲載されていますので、参考にして頂きたいと思います。

初めての方は、"こちらTutorial"サイドメニューから、バックナンバーをクリックしてアニメや、Tipsの項目が参考になります。

(Giam)
33.
保存した画像をドラッグで「コマ表示窓」に読み込むか
「ファイルからコマの挿入、又はコマの付け足し」を用いて、一括読み込みにするか(但し、確実に順番を把握しておくこと)

各自の手慣れた方法で「アニメ用画像@」「アニメ用画像D」の画像を読み込む。

「画像は一番上が「アニメ用画像@」で、一番下側が「アニメ用画像D」になる様にする事!

ドラッグして入れる場合は、「アニメ用画像D」を最初に入れて、逆順番に大きい数の方からC,B,A,@と入れて行く。



(Giam)
34.
「全部選択」をクリックしてから、ウエイトを各自の好みに設定する。

VIEWをクリックして、動作状態をチェックする。
ウエイト参考数値:30

先ず、大きな数値を入れて、上記33での、画像順番の間違いチェックを行う。
ゆっくり動かして雪が上から下に移動するのを確認してから、早くする様にする!



(Giam)
35.
編集→各コマ最適化をクリックする。



(Giam)
36.
ファイル→名前を付けて保存をクリックする。

保存する場所とファイル名を記入して、保存ボタンをクリックする。



(Giam)
37.
GIF書き込みオプションに
出来るだけパレットを統一にチェックを入れて、最大色数を128色に設定して、OKをクリックする。



(Giam)
38.
完成GIFアニメ!



GIFアニメの仕上がりで、背景部分の雪が黒っぽくなる時は、上記37のGIF書き込みオプションに

@最大色数を256色に設定してみる。
Aパレットは個々に持つの方にチェックを入れてみる。
B各コマ最適化を省いてみる。
(但し、画像により容量増加の為注意)

以上のいずれかを単独で用いたり、又は組み合わせて、出来るだけ仕上がり容量の小さい方法を用いて仕上げる。





おもち帰り用参考画像です。先ず、画像をクリックして拡大してから、画像を右クリックして、「名前をつけて画像を保存」で持ち帰り、御使用下さい。

(参考画像)

基本背景

保存名称<kihonhaikei.gif>



(参考画像)

区分帯

保存名称<kubuntai.gif>



(参考画像)

背景@

保存名称<haikei1.gif>



(参考画像)

背景A

保存名称<haikei2.gif>



(参考画像)

背景B

保存名称<haikei3.gif>



(参考画像)

背景C

保存名称<haikei4.gif>



(参考画像)

背景D

保存名称<haikei5.gif>





おもち帰り用参考画像パターンAです。先ず、画像をクリックして拡大してから、画像を右クリックして、「名前をつけて画像を保存」で持ち帰り、御使用下さい。

(参考画像)

基本背景A

保存名称<kihonhaikei2.gif>



(参考画像)

区分帯A

保存名称<kubuntai2.gif>



(参考画像)

背景A−1

保存名称<haikei12-1.gif>



(参考画像)

背景A-2

保存名称<haikei2-2.gif>



(参考画像)

背景A−3

保存名称<haikei2-3.gif>



(参考画像)

背景A−4

保存名称<haikei2-4.gif>



(参考画像)

背景A−5

保存名称<haikei2-5.gif>



(参考画像)

パターンAを用いたサンプル画像



JTrim Ringへ行けます。


inserted by FC2 system