大江戸UFOメモ

【ケルブレ】超会議個人企画:フリーソフトでGIFアニメ

2017/05/14 01:07 投稿

  • タグ:
  • ケルベロスブレイド
  • アニメーション
  • FireAlpaca
  • AnimeEffects


 超会議で色々な場所にお邪魔し遊んでいたら、気付けば夜中になってしまいましたが
 ケルベロス超会議2017個人企画と称し、無料のフリーソフトのみを使っての
 GIFアニメ作成の解説をリアルタイムで行いたいと思います。
 とりあえず超会議終了までに完成させられるようがんばります。

 GIFアニメ作成の大まかな流れは

 1:使用ソフトを用意する
 2:『ペイント』を使用して下絵~素材を作成する
 3:『かんたん透過くん』を使用して素材の透過処理をする
 4:『AnimeEffects』を使用して動きをつける

 といった感じになります。


========================================

【1】使用ソフトを用意(ダウンロード)する

・Windowsのペイント
 アクセサリ内にあるお絵描きソフトです。
 このソフトでキャラクターの各パーツ素材を作ります。

・かんたん透過くん(ダウンロード
 Windowsのペイントでは素材画像を透過させられないので
 ペイントで作成した画像のBMPファイルを
 このソフトで透過ありのGIFファイルに変換します。

AnimeEffectsダウンロード
 作成した素材を合成し、アニメーションを編集します。



========================================

【2】『ペイント』を使用して下絵~素材を作成する



 ペイントを開きます。
 Windows7のペイントはこんな画面です。

【2-1】何を作るか考える
 どんなキャラを作って、どんなアニメーションをさせるか考えます。
 どんな動きをさせるかにより、分けるパーツが決まるので
 初めにしっかり考えておくと良い感じです。  


【2-2】キャラと動きのラフを描く
 だいたいこんな感じ、といったラフな線で
 頭にイメージした絵をキャンバスに描いていきます。


【2-3】下絵を描く
 下絵(パーツを描く際の目安)になる程度に絵を整えます。
 わかりやすいようざっくり色も付けます。
 スポイトで色が取れるよう、色パレットを画面の余白に作っておくと便利です。



攻撃モーションも考えましたが、時間的に呼吸(待機)運動になりそうです…


 ★ポイント★
 絵は後ほどanimeeffectsにて形の変形や移動が可能なので
 絵の正確さではなく、だいたいこんな感じといった程度の絵でOKです 
 

【2-4】下絵を保存する
 保存形式は『24ビット ビットマップ』です。
 他の形式を選ぶと画像が劣化し、正確な色で保存されません。
 ペイントで作成する画像は全て『24ビット ビットマップ』で保存します。
 
 また、この下絵を元に各パーツを作成していくことになるので
 間違って上書き保存してしまわないよう、保険として下絵ファイルをコピーし
 二つ作っておくと安心です。


【2-5】パーツ分けを考える

 一枚絵を動かす場合、パーツを組み合わせて合体させるプラモデルの要領で
 各パーツを素材として作成する必要があります。



 この絵の場合だと最終的な素材数は

・右耳
・左耳 
・頭
・顔
・体
・右手
・左手
・右足
・左足
・武器

 以上の10パーツが必要になります。
(耳や顔を一切動かさないのであれば、頭に統合して作成するのでパーツ数は7
 更に左手と武器をくっつけるならパーツ数は6)
 素材は少ない方が作るのは楽なのですが
 animeeffectsではパーツをくつけることはできても切り離すことはできないので、
 可能な限りパーツは分離させておいた方が動きの幅は広がります。
 表情もアニメさせたい場合は、目や眉(各左右)、口など、更にパーツは増えます。


【2-6】パーツを描く
 下絵を元に、素材となる各パーツを描いていきます。
 下絵を開き、最初に『別名で保存→パーツ名称』で保存します。
 ここでは右耳から描こうと思うので、名前は『右耳』で保存します。

 まず、後で画像を透過させるため
 透過色(透明にする部分)を初めに決め、その色を背景色にする必要があります。
 GIFファイルは『この色だけを透明にする』という処理が行われるためです。

 今回は分かりやすく、透過色は完全な白色を指定したいと思いますので
 素材には完全な白色を使わないよう注意して描きます。
 (完全な白の数値はR:255・G255・:B:255ですが
 数値が1でも違えば素材にも使用できます。
 R:254・G254・:B:254なら見た目は白色と殆ど変わりません。)




 描きたいパーツ周辺と色パレット以外の部分を透過色で塗り潰します。
 図形ツールで塗り潰しを使うと便利です。



 下絵を元に形を整えます。

 素材を描く際、気をつけなければいけない事は
 パーツの輪郭を必ずギザギザしたドットにすることです。



 GIFでは背景色である1色しか透過させることができないため
 ブラシのように輪郭を滑らかにするため素材と背景の境界線に何色も使われていると
 透過が綺麗にできません。(周囲に隙間が出来ます)





 最後にパレット部分も透過色で塗り潰して完成です。


 それでは、こんな感じで他のパーツも作って…



 ……と思ったのですが。




 なんということでしょう。




AnimeEffectsはPSDファイルでしか
レイヤー構造のある素材を読み込めないッ!

 という事に気付きました。

透過GIFファイルの素材作ったって
ひとつのファイルとして組み込め無いなら無理じゃん!
どうしよう?!?!?!


 なんとか……
 なんとかならないのか?!
 無料でレイヤーとフォルダ管理が使えてPSDファイルも作れる、
 そんな夢のようなフリーソフトなんてあるわけ…………










ありました。





FireAlpaca[ファイア アルパカ]
』というソフトは
 Mac、Windows 両対応のフリー ペイントツール。
 シンプルな機能と操作性で、初心者でも気軽にイラスト制作が楽しめます。との事。

 無料でここまでできてしまうソフトがあるなんて、正直びっくりです。
 ちゃんとレイヤーのフォルダ管理も出来るよ!
 これにはアルパカさんもニッコリ。
 
 という事で急遽予定を変更して
 ペイントの代わりに、このアルパカちゃんを使用して作成していきたいと思います。
 この行きあたりばったり感、まさしくリアルタイム。

 このソフトでは問題なくPSDデータでの画像が透過できるようなので
 素材をGIFファイルにする必要はありません。
 さっきの透過色だとかギザギザにしろとかいう説明は一体なんだったのかって?
 忘れてください。
 アルパカ「OS標準のペイント野郎の事なんて、オレが忘れさせてやるよ…」


 それでは気を取り直して、萌えるアルパカたんを使用して素材を作り直します。
 手順的には、みなさんはもう初めからペイントではなくアルパカ推奨です!



【2】『ファイア アルパカ』を使用して下絵~素材を作成する


【2-6】パーツを描く



 素材作成の流れはざっとこんな感じになりました。
 作画の際に関して、各所のポイントを解説します。



 下絵を含めて初めからアルパカを使って描く場合
 新規レイヤーボタンを押して背景の上に下絵用の新しいレイヤーを作り
 そのレイヤーに下絵を描きます。



 下絵を元に各パーツを描いていきます。
 下絵は不透明度を下げて、見えやすくします。(0で完全な透明になります)
 新規レイヤーを作り、まずはラインを描きます。
 尚、下絵を複製して
 一番上と、一番下から二番目(背景の真上)に下絵を置いておくと確認が便利です。
 (レイヤーサムネイル左横の●マークでレイヤーを表示・非表示にできます)



 ラインのすぐ下に新規レイヤーを作り、色を塗ります。

顔パーツ完成!


 覚えておくと便利な機能は

●透明度の保護
 チェックを入れると、そのレイヤーに既に塗った色の範囲が保持され
 色を上から塗ってもはみ出さなくなります。

●クリッピング
 下のレイヤーに塗られた色の範囲内だけ色を塗る事ができます。
 この絵では顔の上にレイヤーを作成し、模様の黄色をクリッピングしています。


 どちらも似たような機能ですが
 慎重に行きたい人はクリッピングを使いましょう。
(基本的にクリッピングは影を塗ったり模様を入れる際に活躍します)


 こんな感じで他のパーツを作っていきます。
 レイヤーの順序に関しては
 手前に表示させたいものは上へ、奥に表示させたいものは下へ作ります

 例えばこの絵では、体の後ろに右手があるので
 右手を作る際は体の下にレイヤーを作ります。
 体の下にある足も同様です。(足の順番は上から左足→右足)


 また、パーツを作る際は奥にあるパーツが
 手前パーツのアニメーションで見え隠れする都合により
 一枚絵では見えていない部分も想像して描いておく必要があります。


おてて

 パーツの色(特に明るい色)のはみ出しは、背景色を暗い色にすると分かりやすいです。



【2-7】インポート用にレイヤーを整理する




 全てのパーツを描き終わったら
 AnimeEffectsへ組み込む(インポート)ため、最後にレイヤーの整理が必要になります。
 線画と塗りが分かれていると、各パーツのレイヤーを統合しなければいけないので
 まずは現在の作業データを複製(名前をつけて保存)し、インポート用の名前をつけ
 ファイルの種類をPSD形式で保存します。
 こうしてレイヤー未統合の作業用データと、
 インポート用のレイヤー整理後のデータを作っておくと

 後で塗り直したい箇所が出てきた時にレイヤー統合前の作業用データで
 編集できるので安心です。


●パーツのレイヤー統合
 ひとつのパーツに複数のレイヤー(線画・着色範囲・影など)を使用した場合、
 レイヤーをひとつに統合します。
Ctrl+Eで下のレイヤーに統合


●フォルダの作成
 AnimeEffectsで動かす際、一緒に動くパーツは一緒のフォルダにしておきます。
 フォルダを作成し、クリック&ドラッグで各レイヤーを中へ放り込んでください。
(本来は頭・体の2つのフォルダになりますが
 この絵では武器を持つ左手が頭の手前に表示させる可能性があるので
 左手フォルダは頭フォルダを挟んで体フォルダと分離させています)



 最後に『全体』のフォルダを作成し、作ったフォルダ全てをここに放り込みます。


 AnimeEffectsではレイヤーの順番を入れ替えたり、
 フォルダを作ることは出来ないので

 最後にここでレイヤーの順番にミスがないかしっかりと確認しましょう。



========================================


【3】『AnimeEffects』を使用して動きをつける

 キャラクターの素材データとなるレイヤー整理済みのインポート用PSDが完成したら
 AnimeEffectsを開き、プロジェクト(アニメーションの編集データ)を作っていきます。


【3-1】新規プロジェクトを作る
 『ファイル』→『プロジェクトの新規作成』を選ぶと、ダイアログが出てきますので
 『初期リソース』の部分で、作成したインポート用PSDファイルを指定します。



 最大フレーム数(アニメーションの時間)は後で変更できるのでこのままでもOKます。
 キャンバスサイズは後で切り抜けない(拡大縮小は可能)ので、ここで決めておきます。
(サイズを指定しない場合、インポートするPSDデータサイズそのままで読み込まれます)
 正常にPSDデータの読み込みが完了したら、
 まずはプロジェクトの保存(ファイル→プロジェクトを保存する)をします。



【3-2】各パーツの重心を設定する

 アニメーションは基本的に各パーツの移動・回転で行います。
 動かしていく前に各パーツの重心(パーツのどこを中心として移動・回転させるか)を
 設定していきます。
 画面左にあるツール類の十字マークが回転・移動・縮小、
 その下にある●マークが重心の設定です。




 ※アニメーション編集中、もしこのように
 画面中央に黒い斜め線が表示され何も編集できない状態になった時は
 上図の赤丸印のようにツールやパーツが選択されているかチェックしてみてください。
(この画像の場合はツールは選択されていますが
 ターゲットのパーツが選択されていないため編集不可の状態になっています。
 PSDファイル名の左側にある三角ボタンを押して下層を表示させ、
 フォルダやパーツを選択してください。)




●動くパーツについて

 ターゲットの『全体』を選択して、移動をさせると
 『全体』フォルダの中には全てのパーツが入っているため
 キャラクター全体が動きます。



 『全体』の階層の下を開き、『頭』を選択した状態で動かすと
 『頭』フォルダに入っている頭パーツ・耳パーツ・表情パーツの頭の部分だけ動きます。




●回転について

 初期状態では各フォルダ・各パーツの中央に重心が設定されています。
 この画像の『左手』フォルダの場合だと、中に左手パーツと武器パーツが入っているため
 二つの形の中央に重心が設定されています。


 ツールを重心マークから矢印マークに変更し、重心を変更しないまま回転をさせると…


 こんな感じで重点を中心に回転が行われてしまうため
 左腕の重心は、左腕の付け根に移動させる必要があります。



ウフフ、オッケー☆

 武器を左手から離したり、武器だけ角度を変更させたい場合は
 後ほど左手フォルダの下にある階層を開き、左手パーツ・武器パーツにも
 個別で更に重心を設定する必要があります。


 キーフレームを少し先に打ち、左手を手前に回転させ…



 更にその少し先にキーフレームを打ち、一番初めの動きを丸ごとコピーすると……



 
  左手、動きます!


 と、こんな感じでアニメ-ションをさせていきます。



【3-2】キーフレームを打っていく
 バーを右へ動かすと時間が経過します。
 フレームのメモリ0.0~0.1間は60フレームです。

 まずは画面左側のターゲットドックの中で、動かしたいパーツを選択します。

 次にターゲットドック右側にあるバーを、動きを終了させる時間の所まで移動させます。

 右側のプロパティドックの項目の中から移動や回転等、変更したい部分の名前左にある
 ▼印をクリックし下層を開き、画面上のツールで画像を編集または数字を入力します。 
 
 

 アニメーションの確認はターゲットドック右端にある縦列ボタンの中から
 上から三番目の
三角ボタンを押すと再生します。



【3-3】GIFファイルに出力する
 キーフレームでのアニメーション編集が完成したら
 『ファイル→指定の形式で出力→GIFアニメーション』を選択し
 名前をつけて保存をします。



 キーフレーム編集方法の注意点や、GIFの保存方法の詳細に関しては
 こちらの記事も併せてご参考にして頂けると幸いです。






 ということで……




 完成ッ!! 

 お疲れ様でした~。





※ソフトの機能は記事公開時のものですのでアップデート後の最新版とは異なります。
 最新のバージョンでは機能が変更されている可能性がありますのでご注意ください。

コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事