もっとPhotoshopのビデオレイヤーを使ってみるでな(アニメーション編) | .

.

 

※2018.1.11追記

暫くの間「空のフレームを挿入」すると挿入したフレーム以降が全部クリアされるというバグがあり、ビデオレイヤーなんて使えたもんじゃなかったのですが、
Photoshop CC2018から、新規ビデオレイヤーを作り直すことで回避されることが確認できました。(もっと前からあったかもしれませんが 、自分がちゃんと確認できたのはこのバージョンからです…)
制作前には一度フレーム挿入してみて、バグが起きたら新規ビデオレイヤーで作り直し、フレーム挿入を確認し、以降がクリアされないことを確認してから制作に入るといい…かもしれません。
 
 
(もっと詳しく可愛く説明されている方がいらっしゃったのでこちらもぜひ!)
 
Photoshopビデオレイヤー機能を使用したアニメーション制作方法
 
 
追記以上
 
ーーーーーーーーーーーーーーーー
 
 

前記事の続きです。
→Photoshopのビデオレイヤーを使ってみるでな


さて、あのびゅんびゅんした例よりもっと詳しくアニメーションをやっていきます。
前回も言っていましたが色々なところでGIFアニメが投稿できるようになってきているので、もっと増えないかな~と思いつつ。


まずアニメーションの一般的な描き方ですが、動きのキーとなる原画を描いてから、動きの間を描いて詰めていく流れが一般的です。
上手い説明のサイトはたくさんあるのでぜひおググり下さい。

 


 

では、ビデオレイヤーで1フレーム足すには!

レイヤー>ビデオレイヤー>空白のフレームを挿入

で、現在表示されているフレームの次に空白のフレームが増えます。
つまり0コマ目に足せないという。
いざというときのために、0コマ目には描かず1コマ目から描き、ワークエリアを1からにしておく、とかで一応対処できます。

 


 

 

 

中割の際、前後の線の色が一緒だと分かりにくかったりしますね。
そういうときは、新たにレイヤーを作り見やすい色(画像では赤)で塗りつぶし→クリッピングマスクをかける→タイムラインにて表示の長さを短くし、1コマしか映らないようにする
これを作業フレームの前もしくは後ろのフレームに配置することで解決・・・
・・・分かりにくいので画像参照で。

 

こうして前後の間を描いていきます。

※バグだか仕様だかわかりませんが(おそらくバグ)、位置を直す際普通に動かすとレイヤーごとうごいてしまい、全コマの位置が変わります。投げ縄からの自由変形は可能です。
・・・が、周囲のいらないところが真っ白になるときがあります。何か適当にぐちゃっと描いてアンドゥする、もしくはタイムラインのインジケーターを動かせば透明に戻るので焦らず。

※もう一つ、アンドゥした際に違うフレームに行ってしまうことがあるので、インジケーターの位置に注意してください。
オニオンスキンが入っていればすぐに気付くと思いますが、オフになっていると描けていないように見えるので、そこで何度もぐちゃぐちゃっと描いたりすると復帰できなくなる可能性も。

 


キャラが二人いる場合、キャラごとにレイヤーを分けるとやりやすいです。
本当は動きの多いツインテールも別に分けて描いた方がやりやすいんですが、気づくのが遅かった。
ミクさんだけに赤いレイヤーをクリッピングして見やすくしています。


 


ミクと魚が重なっているところを消す際、マスクが使えたらなーと思ったんですがビデオレイヤーのマスクは動かず。
ミクの線画は複製してバックアップを取ったのち普通に消しゴムで重なるところを消しました。
 

さて色も塗っちゃいます。

 

2値の絵とかだったらバケツドーンで塗りつぶせて楽なのですが、線のタッチもあるので一枚一枚ちゃんと塗っていきます。
こんな時もビデオレイヤーは1枚で済むので比較的楽!


そんなわけでこうなります。

 

これ作ってたらすぎちゃったけどミクさん7周年おめでとうございます。早いもんだ。

 

-----
追記。

Photoshop使うにあたってお世話になりました。
Photoshopのアンドゥをちょっとだけ便利にする方法


あとGIFアニメのプレビューは此方がおすすめです。サクサク動きます。
MassiGra