Photoshop講座 ~ シネマグラフの作り方 ~

シネマグラフってなに?

 

シネマグラフとは、動きのある写真と表現することが合っているのかは分かりませんが、動画と静止画を組み合わせた画像の「オシャンティな言い方」になります。シネマグラフは基本GIF画像で作成されているので、TwitterなどのSNSにも投稿が可能です。

シネマグラフは画像を用いたウェブデザインに幅をもたせることができますし、目にとまりやすい、どう動くのか見続けてしまうというようなデザイン効果もあります。下記のAnnStreetStduioというサイトでは色々なシネマグラフがご覧いただけますので、興味あるかたはチェックしてみてはいかがでしょう?(リンク先は素材サイトではないので、画像の引用にはご注意ください。)

 

かっこいいシネマグラフがいっぱいの AnnStreetStduio

ずっと見ていたくなるシネマグラフ

 

上記で説明したように、シネマグラフは名称からちょっとオシャンティな雰囲気が漂っていますが、このシネマグラフを利用したデザインは何気に難しいんですよね。作る工程自体は簡単なのですが、素材を探したり、完成をイメージしながら動き方を考えて撮影するってのがなかなか普段使わない脳みそ使います。それでも、シネマグラフは写真などの静止画だけじゃ伝わらない雰囲気やイメージまでも伝えてくれるツールとなりえますので、使い方によってはその効果が発揮されるんじゃないかなぁと思っています。

シネマグラフってずっと見ていられるような不思議感覚ありますよね。個人的には結構好きなシネマグラフ。

 

 


シネマグラフの作り方

 

それでは、早速シネマグラフを作成していきましょう。作成するのは下記のシネマグラフになります。こちらのシネマグラフは私が作成したオリジナルのものですので、入用がありましたらご自由にお使い頂いても大丈夫です。なお、今回の記事で説明する環境は「Windows」環境下での「Photoshop」を使用しての説明となります。

1). ムービーを用意する

シネマグラフは一本のムービーから「動画」と「動画の一部を切り取った静止画」に分けて作ります。まずはシネマグラフの元となる動画を選びましょう。

上記のムービーはpixabayから拾ったCC0のフリー動画です。下記URLよりダウンロードしてお使い頂けますので、作成練習用にどうぞ。

https://fragment.love/wp-content/uploads/2019/03/Girl-12330.mp4

2). ムービーをPhotoshopで読み込む

ムービーファイルをPhotoshopにぶつけて開きます。動画レイヤーのまま読み込んでいきましょう。

3). 使用しない部分をカットする

当然動画の長さが長ければ長い程にファイル容量も重くなりマシンのメモリも食いやすくなるため、動画の中でいらない部分をカットしていきます。タイムラインにある青のスライダーを動かし、始点と終点でハサミをクリックし、動画を切り取ります。切り取った部分以外の余分なカットは「選択→Delete」で消してしまいましょう。

4). 動画レイヤーを複製する

「動画」と「静止画」に分けるためにレイヤーパネルにて動画レイヤーを複製します。また、ビデオグループフォルダは削除します。

5). 静止画用のレイヤーをラスタライズする

青いスライダーで元となる位置を決めたら、その部分を静止画として使用するために上記でコピーしたビデオレイヤーをラスタライズをします。これでレイヤーには「動画レイヤー」と「静止画レイヤー」のふたつができあがります。

6). 静止画レイヤーにマスクを作成する

動かしたくない部分にマスクを作成していきます。上記の場合は人物が動かしたくない部分ですので、人物の選択範囲を「選択とマスク」ツールなどを使用して作成していきます。マスクの境界線がくっきりしてしまうと、画像の動きが不自然に見えてしまうことがあるため、なるべくぼかした選択範囲を作成しましょう。

7). マスクの微調整を施す

仕上がった動画をタイムラインの「再生」で動かしてみましょう。ここからは微調整や仕上げの作業となりますが、動画ではもちろん人物も全てが動いているため、動かしたくない部分にのみマスクを作成してしまうと、その動きが見え隠れしてしまうなどの雑な作品となってしまいます。始めは大雑把にマスクを作り、再生を繰り返ししてみて気になる部分はレイヤーマスクを広げるなどの微調整をおこないます。

8). 全体の雰囲気を調整する

あとはイメージした完成形に近づける最終調整をおこなっていきます。このシネマグラフの場合では、色調補整レイヤーにて少しノスタルジックな雰囲気に調整しました。

9). Web用に書き出す

最後に、Web用にGifで書き出して終了となります。Gif書き出しの設定などはそれぞれのマシンスペック、何に使いたいかなどによりますが、参考に設定値画像を載せておきます。この保存時、思っている以上にメモリをくうのでフリーズに注意です。

 

 


おまけ:ループ再生時の動画のつなぎ目を無くす方法

 

地味に気になるのがループ再生時の終点→始点に戻る際の動画のつなぎ目です。カクっとなって動画が戻ってしまうと、前述したような「ずっと見ていたくなるような不思議な感覚」を損なってしまいますよね。オシャンティで不思議な雰囲気たくさんのシネマグラフを作成するためにも、今回のような動画では有効な「動画のつなぎ目を自然にする方法」を番外として解説していきます。

Ex 1). ビデオをレイヤーで読み込む

Photoshopでファイルを読み込む際に「ビデオフレームからレイヤー」にて動画ファイルを読み込みます。その際、読み込む長さによってはレイヤーの数がとんでもない事になるので、先の作業で決めた使いたいシーンのみを読み込みましょう。

Ex 2). 使いたいフレームを選択してコピー

タイムライン上から使いたいフレームを全選択しコピーアイコンをクリックします。すると、選択したフレームの後ろに同数のフレームがコピーされ、コピーされたフレームが選択状態となります。

Ex 3). コピーしたフレームを入れ替える

上記手順のまま、タイムラインパレットの右上にあるオプション表示から「フレームを入れ替え」を選択します。すると、先に選択していたフレームの始点が終点になり、終点が始点となるようなコピーフレームが生成されますので、動画のつなぎ目が戻らないカクっとならないループ再生が可能となります。

Ex 4). レンダリングする

ファイルの「ビデオをレンダリング」から動画として書き出し保存します。この状態をレンダリングしなくてもシネマグラフを作成することもできますが、今回の説明のうえでは上記の (4). に戻って作業をしていく流れとなります。

 

 


シネマグラフで効果的な広告戦略を

 

以上がシネマグラフを作る基本的な流れとなります。作業の手順的に多くもなく簡単です。難しいところ、時間のかかるところは根本的な「素材を集める」「完成形をイメージするところ」などの作製を始める前の部分です。最初から「こんなのが作りたいな!」ってイメージできていればすぐに作り始めることができます。

ご自身のホームページのアクセント、Webデザインや広告バナーなど幅広く応用の効くテクニックだとも思いますので、ご自身のキラリと光るアイデアを活かし、楽しいシネマグラフを作ってみてください。

作成フローの訂正ポイントや、こんなやり方もあるよなどのご意見を頂けますと幸いです。また、説明に意味不明な箇所などありましたらご指摘くださいませ。