. -2ページ目

.

 


震えるぜ・・・

今回もまたRabbitMACHINEさんのお手伝いです。
前回のくら寿司の仕事紹介の時もお世話になりました。
今回は前より表に出るようなところを多くやらせていただきました。(ラフを線画に起こしたりとか)
実は1カットだけ、ラフから起こして原画中割~とほとんどやらせていただいたりしてます。ド恐縮です。




基本的にはラフもらって清書とか中割とかしました。
背景・エフェクト・陰影・コンポジットなどは全部ラビットさんです、ほんと、ほんともうすごいよ・・・師匠・・・
それで絵がすごく丁寧で、すっごいきれいな原画がね、来るんですよ。感動でずっとうめいておりました。
こんなかっこいいエフェクト類描けるようになりたいなあ。背景も。演出も。
学ぶことがたくさんございました。ヒィ。
これから先自分でアニメーション描くぞなんてことあまりないと思いますし、技術も恥ずかしいものですがやっぱりアニメーション楽しいなあ・・・



そしてファンアート。自分絵。
んでな、最初にもらったVコンの時からスゥちゃんめちゃくちゃ天使やったん・・・完成になったら本当に天使の羽見えるかと思ったん・・・



※2018.1.11追記

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

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


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


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

 


 

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

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

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

 


 

 

 

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

 

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

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

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

 


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


 


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

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

 

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


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

 

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

 

-----
追記。

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


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


久々にアニメーションだァ!

Photoshopで動画を扱えるのは知っていたけど、まーなんかFlashっぽいぐらいにしか思ってなかったんですが。
ビデオレイヤーを使えばアニメーションとかロトスコープとか簡単にできちゃうじゃんスゲー!
が、ネット見てもあんまり触れられてなかったので、メモがてらビデオレイヤーまとめ。
自分も探り探りなもので、もっといい方法があればぜひ教えてください。
ちなみにCS5での作業になります。CCとかとメニューとかボタンの場所が違ったりするかも・・・ご了承ください。


ビデオレイヤーっていうのは、簡単に言えば時間軸を持ったレイヤーです。
時間が進むとぱらぱらと動くんです。
実際に何か作りながら説明していきます。画像はクリックで拡大表示できます。



1.タイムラインを召喚する



2.新規キャンバスを作り、ビデオレイヤーを作る

レイヤー>ビデオレイヤー>空白の新規ビデオレイヤーを追加




3.ドキュメント設定
最初にやっておかないと、場合によってはあとで痛い目にあいます。
デュレーションは映像全体の長さ、フレームレートは1秒に何フレームで再生されるか、の設定です。(詳しいことはおググり下さい)
今回は余裕をもってデュレーション5秒、アニメーションなので12フレームで作ります。



4.なんか描いてみる
インジケーター(名前よくわからなかった。あのなんか扇みたいなやつ)のさしている場所が現在表示されているフレームです。
とりあえず0コマ目に顔を描きます。



進めると次のコマに行きます。
ここで次の絵を描きます。



さらに次、



次。



スペースキーで再生してみると

ヒュンヒュンしますね。
じゃあ書き出してみましょう。

5.書き出し



QuickTime・連番書き出しで他のソフトにもっていく事も出来ます。
簡単なアニメーションの素材とかビデオレイヤーで作ると簡単楽ちんですね。



GIFアニメは、ファイル>Web及びデバイス用に保存 で保存可能です。



最近PixivとかTwitterがGIFアニメに優しくなってきて、公表の場が増えていいですね。


6.オニオンスキン

描いているとき、前後の絵が見えなくて不便だな~と思ったりしませんか?
そんなあなたにオニオンスキン!
その名の通り、玉ねぎの皮の様に薄く透けて見える機能です。



アニメーションには必須の機能ですね。


--------------

そんなわけで一通り説明してきましたが、こちらのビデオレイヤーさんはロトスコープにも絶大な効果を発揮します。
ロトスコープっていうのは実写素材をなぞってアニメーションを作る手法です。有名なものだと惡の華とかでしょうか。


レイヤー>ビデオレイヤー>新規ビデオレイヤーをファイルから作成
で動画ファイルを読むことができます。


その辺にあった猫に襲われる動画を読み込んでみました。

iPhoneとかで撮った映像だとアス比がずれることがあるので注意・・・
1920x1080のキャンバスを作って自分で直してあげてください。



読み込んだビデオの不透明度を下げ、その上に新規ビデオレイヤーを作って上からなぞって





最後に元素材を非表示にして書き出せば、数百枚のファイルを開いて保存して・・・とかせずに、ロトスコープが出来たりします。
それ以外にも、作った動画にちょっと書き足したりとか。使い方次第ですごく便利な機能です。

-----------

それにしても、アニメーションがこんな例じゃアレだと思うので、次記事でもっとちゃんとアニメーションの説明をしていきます。
今回はこれにて!


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



8/17 コミケ3日目 東“ラ”11a
にいます。おひましてるかもしれないので、ぜひ声かけてくれたらうれしいな。な。

しばいぬさんのミニアルバムのジャケットかいたっす。しばいぬさんのCDのジャケットは4回目ですが全部絵柄というか雰囲気が違うので誰だテメーと思われても仕方ない。ていうかホント誰だテメー。
それはさておき。とってもいい曲入ってます。よしなに。






しばいぬさんのブログにて
しばいぬの作り方



どうぞよろしくお願いします!