技術:フレスコでアニメーション Part2

前回、Frescoの動画作成を行ったが、手書きで絵を書く事が、これほど難しいとは思わなかった。今回もペンタブで手書き処理を行っていくのだが、手書きで正円すら書けていない。ヘタなりに続けていけばいつかはうまくなるだろう。そんな希望的観測を抱きながらな一歩一歩と進んでみる。今回はモーションパス機能について勉強していく。

動画デザイン:【原本】

動画デザイン:【FRESCO加工】

Fresco作成手順
 Fresco立ち上げ
 1.Frescoを立ち上げ、新規ドキュメント作成で、正方形(2100×2100px)を選択
   する。
 2.キャンパスが立ち上がったあと、ツールバーのピクセルブラシを選択する。
   ピクセルブラシ管理画面が表示されるので、スケッチ→ペン33pxを選択。
   ツールバーの下にあるカラーチップ:黒。ブラシサイズ:33px。流量:100。
   滑らかさ:50。を選択後、上記絵をキャンパス上に描いていく。

 ヘルメットを書く
 1.最初に丸い正円を書いて行くが、正円が美味く書けなかったら、ツールバーの
   移動と変形→ゆがみを選択すると、四角枠が書いた絵の上に現れるので、四角
   い四隅をドラッグしながら正円に整えていく。
 2.正円の大きさを調整したい場合は、ツールバーの拡大縮小・回転を選択し、四角
   い四隅をドラッグしながら拡大・縮小して整えていく。
 3.正円に整ったら、オプションバーの完了ボタンを押下して、正円を確定させる。

 宇宙服を書く
 1.宇宙服を書いて行く際、ヘルメットと少し離して書く方が良い。
 2.宇宙服が美味く書けなかったら、ツールバーのなげなわを選択して、宇宙服を
   囲むように、ドラッグすると、宇宙服だけが選択された状態になる。
 3.あとは、ヘルメットの調整時と同じように、ツールバーの移動と変形→ゆがみ。
   ツールバーの拡大縮小・回転を選択し、宇宙服の四角い四隅をドラッグしながら
   整えていく。
 4.宇宙服が整ったら、オプションバーの完了ボタンを押下して、宇宙服を確定させ
   る。すると、なげなわツールで選択した状態になるので、キャンパス下のオプ
   ションパネルの選択解除ボタンを押下し、選択解除させる。

 宇宙服アイテムを書く
 1.ヘルメットにフェイスガードを2本の線で書いて行くが、ヘルメットより、
   フェイスガードの方が大きいはずなので、ツールバーの消しゴムブラシを
   選択し、フェイスガードの左右を消していく。その後、ツールバーのピクセル
   ブラシに選択しなおし、左右大きめのフェイスガードに書き換える。
 2.酸素ボンベ、首、手袋、ライン、胸のエンブレム等、宇宙服アイテムを付加して
   いけば、宇宙飛行士の線画が完成。

 宇宙飛行士の色付け
 1.線画が完了したら、ツールバーの塗りを選択すると、オプションパネルが表示
   されるので、各アイテムに色を塗っていく。
 2.ヘルメット  :オプションパネルのカラーチップを選択すると、カラーチッ
           プが表示されるので、白を選択後、ヘルメットを選択しなお
           すと、白色に塗り替えられる。
 3.フェイスガード:カラーチップのRGBスライダーを選択し、R:0。G:
           217。B:192。を選択後、フェイスガード選択で、指定の
           色に変更。
 4.宇宙服    :カラーチップのRGBスライダーを選択し、白を選択後、宇
           宙服選択で指定の色に変更。
 5.酸素ボンベ  :カラーチップのRGBスライダーを選択し、白を選択後、酸
           素ボンベ選択で指定の色に変更。
 6.首      :カラーチップのRGBスライダーを選択し、R:181。G:
           168。B:168。を選択後、首選択で、指定の色に変更。
 7.胸のエンブレム:カラーチップのRGBスライダーを選択し、R:181。G:
           168。B:168。を選択後、胸のエンブレム内側選択で、指
           定の色に変更。
           カラーチップのRGBスライダーを選択し、R:45。G:
           45。B:51。を選択後、胸のエンブレム外側選択で、指定
           の色に変更。
 8.手足のライン :カラーチップのRGBスライダーを選択し、R:196。G:
           4。B:13。を選択後、手足のライン選択で、指定の色に
           変更。
 9.手袋     :カラーチップのRGBスライダーを選択し、R:181。G:
           168。B:168。を選択後、手袋選択で、指定の色に変更。
  
 宇宙飛行士のサイズ変形
 1.宇宙飛行士が書けたら、宇宙飛行士を選択後、ツールバーの移動と変形→拡
   大縮小・回転を選択し、四角い四隅をドラッグしながら、縮小し、真ん中に
   移動させる。宇宙飛行士の位置が整ったら、オプションバーの完了ボタンを
   押下して、位置を確定させる。

 背景作成
 1.キャンパスの右側のレイヤーパネルより、レイヤーを追加ボタンを押下する
   と新しいレイヤーが追加される。
 2.新しいレイヤーをレイヤーパネルの一番下にドラッグする。
 3.新しいレイヤーを選択した状態で、ツールバーの塗りを選択すると、塗りつ
   ぶしレイヤーの種類ダイアログが表示されるので、ピクセルを選択し、
   オプションパネルのカラーチップを選択後、RGBスライダーを選択し、
   R:2。G:30。B:109。を選択後、新しいレイヤー選択で、指定の色に
   変更。
 
 星作成
 1.キャンパスの右側のレイヤーパネルより、レイヤーを追加ボタンを押下する
   と新しいレイヤーが追加される。
 2.新しいレイヤーをレイヤーパネルの背景レイヤーの上にドラッグする。
 3.新しいレイヤーを選択した状態で、ツールバーのピクセルブラシを選択する。
   ピクセルブラシ管理画面が表示されるので、スケッチ→ペン33pxを選択。
   ツールバーの下にあるカラーチップ:白。ブラシサイズ:33px。流量:100。
   滑らかさ:50。を選択後、星をキャンパス上に描いていく。
 4.いくつか白い星を書いたら、ツールバーの下にあるカラーチップ:水色。
   ブラシサイズ:33px。流量:100。滑らかさ:50。を選択後、水色の星も
   キャンパス上に大小サイズを散りばめながら描いていく。
 5.星を書き終えたら、ピクセルブラシを選択し、ピクセルブラシ管理画面の
   特殊効果→星空を選択。ツールバーの下にあるカラーチップ:水色。
   ブラシサイズ:33px。流量:100。滑らかさ:50。を選択後、星空を
   キャンパス上に満遍なく描いていく。

 惑星作成
 1.キャンパスの右側のレイヤーパネルより、レイヤーを追加ボタンを3回押下
   し、色違いの惑星用に、新しいレイヤーを用意する。
 2.追加したレイヤーの1個を選択し、ツールバーのピクセルブラシを選択する。
   ピクセルブラシ管理画面が表示されるので、スケッチ→ペン33pxを選択。
   ツールバーの下にあるカラーチップ:ピンク。ブラシサイズ:33px。流量:
   100。滑らかさ:50。を選択後、ピンクの惑星を描いていく。
 3.大きい惑星には、クレーターが存在するので、カラーチップ:紫。に変更し、
   クレーターを描いて行く。
 4.上記、2~3を繰り返す。尚、2番目の惑星のカラーチップ:水色。クレー
   ター:萌葱色。3番目の惑星のカラーチップ:黄緑。クレーター:緑。でそれ
   ぞれのレイヤーに惑星を描いていく。
 5.ここまでがイラストを描くパーツになる。

 惑星アニメーションの作り方
 1.キャンパスの右側にあるレイヤーパネルより、動かしたい惑星レイヤーを選択
   し、キャンパス右横にあるタスクバー下部の「アニメーション」ボタンをクリ
   ックすると、アニメーションフレームがキャンパスの下に表示される。
 2.アニメーションフレームの真ん中の「パス」ボタンをクリックすると、キャン
   パスの動かしたいレイヤーの上に×印が現れる。
 3.X印を板タブペンシルでキャンパスをはみ出しながらも、外を回るように円を
   描いていくと、動かしたいレイヤーが描いた円に沿って動く。
 4.キャンパス右側のレイヤープロパティを選択すると、レイヤープロパティが
   表示されるので、パス効果→複数追加を2にすると、惑星レイヤーが2つに
   なる。
 5.レイヤープロパティのフレーム数を48にすると、フレーム数が増え、惑星
   レイヤーが細かい動きをする。
 6.上記作業をほかの惑星レイヤーを選択しながら、1~5を繰り返す。
 7.全て再生ボタンを押下すると、3つの惑星が円を描くように動く。

 星アニメーションの作り方
 1.キャンパスの右側にあるレイヤーパネルより、動かしたい星のレイヤーを選択
   し、「パス」ボタンをクリックすると、キャンパスの動かしたいレイヤーの上
   に、x印が現れるので、Ⅹ印を板タブペンシルでキャンパスをはみ出しながら
   も、外を回るように円を描いていく。すると、動かしたいレイヤーが円に沿っ
   て動く。
 2.キャンパス右側のレイヤープロパティを選択すると、レイヤープロパティが
   表示されるので、パス効果→複数追加を4。フレーム数:62。ランダム化:
   26。にすると、宇宙飛行士が宇宙空間を飛び回っているように見える。

 宇宙飛行士アニメーションの作り方
 1.キャンパスの右側にあるレイヤーパネルより、動かしたい宇宙飛行士のレイ
   ヤーを選択し、「パス」ボタンをクリックすると、キャンパスの動かしたい
   レイヤーの上に、x印が現れるので、Ⅹ印を板タブペンシルでキャンパス内で
   小さい8の字を描いていく。すると、動かしたいレイヤーが小さい8を描く
   ように動く。
 2.キャンパス右側のレイヤープロパティを選択すると、レイヤープロパティが
   表示されるので、パス効果→複数追加を1。フレーム数:10。にすると、
   宇宙飛行士がガタガタと動いているように見える。

 アニメーションを書きだす
 1.完成したアニメーションを保存するために、メニューバー→共有→公開と書き
   出し→モーションを選択。
 2.モーションダイアログが表示されるので、ファイル名:任意。形式:GIFを
   選択し、フレームを生成ボタンをクリック。
 3.確認画面が表示されるので、書き出しボタンをクリックすると、保存先ダイア
   ログが表示されるので、任意の名前を入力御、保存ボタンを押下。
 4.保存先に、任意のアニメーション.GIFが登録されれば、完成。

動画デザイン:アニメーション