え〜ッ！！10年経っちゃったんですか〜〜〜？！？！？

Pixiv

https://www.pixiv.net/member_illust.php?mode=medium&illust_id=70510257

YouTube

https://youtu.be/_FYzPTdNlpQ

7年目のときの動画が知らない人にようつべに転載アップロードされて「わ〜！！いい絵ですね！！」ってコメントいっぱいつけられていて

「おいお〜〜〜い描いたのワイやで〜！！こいつ誰やね〜〜〜〜〜ん！！！！！」って思ったので今回はYouTubeにも投稿しました。

何卒、よろしくお願いいたします。

ちゃんと転載された動画にも宣伝しに行きました

クモやムカデのラインスタンプ、無いこたないんですがとくにムカデに関しては愛ゆえにこだわりありけりなので

このように当社比大変あざといつくりになっております
が、目の数やこういうとこは絶対に譲れないのでそこは死守しつつ。

そんなわけで通った時にはよろしくお願いします。

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

前記事の続きです。
→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とかで撮った映像だとアス比がずれることがあるので注意・・・
1920ｘ1080のキャンバスを作って自分で直してあげてください。

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

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

-----------

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

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