マウスを使ってイラレとAEでアニメは熱い？第2回
みなさん、こんにちは！
株式会社FORKの、webデザイナーのNorishioです。
今回は
オリジナルキャラのキーフレームアニメーション作るよ！の第２回です。
イラレで素材の準備2（応用編。ループ背景など）ということで、アニメーションの前の準備回になります。全3回で終了する記事です。
▼1回目はコチラ
◆背景作成
今回はループ背景要素として木やちょうちょなどを作ります。
ちなみに背景っていうと後ろにある風景と捉えがちですが・・それだと私がつまらないので、前景・中景・遠景という構成で作ってみたいと思います。
前景から順に重なり、3つのレイヤー構造からなる風景です。
舞台なんかでよくある構成ですね。どういう状況・場所にいるのかなど情報が伝わりやすく、ものの重なりにより奥行きが出やすいです。
このときに大体どう動かすかも考えておくとパーツわけまで一気に片付くのでおススメです。
花を揺らすか・・。ついでにちょうちょとか飛ばしたらいい感じじゃない？
「ちょうちょを横向きに入れて花に止まらせてはばたかせよう・・」なんて空想しアイデアを出しながら作成します。（背景はスライドの動き以外は動きを入れなくても人物が動いているので大体間がもちます）
こんな感じでイラレ上で作成しています。
今回は下記のようにパーツわけをしました。
・前景
ちょうちょ（正面1パーツ）・花①・②（ちょうちょがとまる花）、草むらや石などの塊を①・②・③３つのブロックに分けます
・中景の木々
こちらも①・②・③３つのブロックに分けます
・遠景
雲はそれぞれ別パーツ。奥の緑・空とパーツを分けます
また遠景のような地面などの箇所や、一枚絵でループ絵をつくるときは下記のように複製して横に並べたときに始まりと終わりのラインがぴったり合うように作ってあげる必要があります。
※イラレでデータを作成していますが、アートボードの大きさで素材が切れてしまうので切れると困る箇所はアートボード内に入れてあげましょう。
※キャラはトンマナや大きさの比較用などに入れておくと便利です。
今回、効果でドロップシャドウ・ブラーを一部入れていますがAE上でイラレを読み込んだ際問題なく表示できました！（´∀｀*）ｳﾌﾌ
うまくいかなかったら調整しようかと思っていましたが、思いのほかAEが優秀でしたｗ( ^^)
◆さいごに･･･
今回は短いのですが、以上です。
次回は実際にAEで動かしていきたいと思います。
そして全3回と言ったのですが･･･今さら4回にした方が良さそうだということに気づきました(゜-゜)
▼FORK動画部の記事もよろしくお願いいたします～！m(_ _)m
FORKの公式アカウント
▶インスタはこちら ▶マガジンはこちら
マガジンでは新卒入社の方の自己紹介の記事が公開されています～🌹
👚🍸SUZURIも販売中です🍸👚
フォロー・スキ・いいね大歓迎です(*´з`)ノ
noteではサイトレビューのマガジンもあります！
FORKはweb制作の会社です～📢