作るのは数字だけじゃない / デジタルハリウッド
作るのは数字だけじゃない / デジタルハリウッド
2015.09.29

Photoshopを使ってシネマグラフを作る方法

姐さん
(編集部注*2014年8月7日に公開された記事を再編集したものです。)

こんにちは、デザイナーの白浜です。
今回は当ブログでも何度か登場している、画像の一部のみをアニメーションさせた画像「シネマグラフ」の作り方を紹介したいと思います。

※最後の画像に登場しています

動画を準備する

シネマグラフの完成度は動画のできにかかっています。主な条件は以下の3つです。

シネマグラフがうまくできる条件

1. カメラが固定されていること
シャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚&リモートシャッターなんかがあるといいと思います。
2. ループの繋ぎ目が気になりにくい動きであること
髪の毛のふわふわとか水がチョロチョロ流れる動きなど、動きが単純で短い時間でも成立するものが向いています。しかしこういった動きはすでによく使われていて、マンネリなのも事実ですね……。アイデアをひねり出すのが一番大変な作業かもしれません。
3. 動いてる部分の背景に動きがないこと
後で詳しく説明しますが、動画の上に静止画を置いて、動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。

以上の点を踏まえ、今回は髪の毛ふわふわの動画を作ってみたいと思います。

Photoshopを使ったシネマグラフの作り方

実は、シネマグラフはPhotoshopひとつで簡単にできます! ということで、その方法を説明します。

動画をPhotoshopに取り込む

動画ファイルは「ファイル」→「開く」で選択するか、動画ファイルをドロップするだけでも開けます。
開くとこのようなタイムラインが表示されます。

01

動画を必要な部分だけにする

動画は基本ループさせて使うので、ループしたい部分をカットしたいと思います。

タイムライン上にある再生ヘッドを、ループさせたい開始位置まで持っていきます。

02

場所が決まったら右クリックで「クリップを分割」します。

03

動画が分割されました。

04

同様に終了地点もクリップを分割します。

05

動画が分割されたら、不要な部分を選択してdeleteキーで削除します。

06

動画が短くなりました!

07

動画が分割できたら、ループさせたい部分が自然かどうか再生して確認します。
長さや再生箇所は後から調整できるので、自然なループになる場所を見つけましょう。

08

静止画を動画の上に貼る

作りたいイメージは「朽木~貼り付いた笑顔と揺れ続ける髪~」なので貼り付いた笑顔を字のごとく動画の上に貼り付けたいと思います。

再生ヘッドを動かしてベスト「貼り付いた笑顔」を決めたら、Ctrl+Aで全面選択、Ctrl+Cで画面をコピーします。

09

次にCtrl+Shift+Vで同じ位置にペーストをします。

10

ただペーストしただけだと、動画のうしろに入ってしまうので、レイヤーの位置をビデオグループの外に移動します。

11

まだ静止画の位置が動画のうしろにあるので、手動でずいずいっと動画の上に持っていきます。

12

あとは静止画の長さを動画の長さと同じに調整します。

13

これで下準備ができました。

新規ビデオグループを先に作っておく方法

先に新規ビデオグループを作ってそこにペーストする方法もあります。

14

先にタイムライン上のネガのようなマークをクリック→「新規ビデオグループ」をクリックして新規ビデオグループを作成し、そこに上記と同じ手順でコピーした静止画を貼り付けます。

するとこんなかんじに。位置はずれないですが、静止画はやっぱり長いですね……。

15

先ほどと同じように、静止画の部分を動画の長さに合わせて終わりです。

手間はそんなに変わらないですが、位置がずれないのでこっちのほうが若干早いですかね?

動かしたい部分の静止画に穴をあける

次に、静止画の動かしたい部分にマスクで穴をあけます。

静止画のレイヤーにレイヤーマスクを追加します。

16

レイヤーマスクが選択されている状態で、黒のブラシで穴をあけたい部分をなぞります。

17

ある程度なぞったら、Ctrlを押した状態でレイヤーマスクをクリック、選択範囲が表示されたらショートカット「Q」を押してクイックマスク編集モードに切り替えてみましょう。

18

マスクがかかっている部分が赤く表示されるので、どこに穴が空いているかわかりやすいです。穴をあけすぎてしまったら、ショートカット「X」で色を白に切り替えてなぞるとマスクが消えます。

ここまできたら、一度再生してみましょう。穴をあけた部分が違和感なくアニメーションを繰り返していたら成功です!

  • 1
  • 2
2 0