シネマグラフをPhotoshopで作成したら意外と簡単だった【考察と作り方/練習素材の提供】

シネマグラフの作成方法について

シネマグラフという表現技法をご存知ですか？

一見すると静止画に見えて、写真全体像の一部がループされた動画になっているGIFアニメーションです。

どのようなものかを実際に紹介します。
以下の画像はcinemagraphs.comの中から引用。

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

情報源：http://cinemagraphs.com

このように、一部が動いてて面白いですよね。

考察

GIFならではのカラーノイズが、静止画っぽさを際立たせています。
動画の中から繰り返しのポイントを発見し、ループの繋ぎ目が自然なほど不思議さが増します。

また、画像内に人物が入っていると、動いている物との対比が分かりやすい。
人物の他にも、風になびく木々や海岸の波、群衆の中の一つ、動くはずのものの一部、炎や液体など発想次第でいろんな組み合わせがあるはずです。
「動かすもの」と「動かさないもの」を選び、違和感を生ませることで人の目を惹き付けることが出来ます。

動きのパターンとしては、常に動いて分かりやすい画像と、動いている箇所が分かりにくい画像がある。
前者は食品や商品などのウェブデザイン表現としても使いやすい。参考1や参考2のような画像
後者は見ている人を驚かせ、楽しませることができる。参考3のような画像

一定の動きを繰り返す画像は、見ていて飽きさせず心和ませます。
波打ち際や川の流れ、ゆっくりと動く空の雲、暖炉の炎、木々の揺らめき、深々と降る雪、浮遊感のあるクラゲなどは、ずっと見てられますよね。
自然を取り入れるのや、
生活の一部を切り取ったノスタルジックな雰囲気も良さそう。
裏路地のネコや公園のブランコ、線路と電車など

また、止まるはずの物や増えるはずの物、落ちるはずの物など物理法則を無視したような驚きを加えると面白い。
回転し続けるコインや注がれても増えない液体、空中で静止するリンゴなど

写真自体の品質の良さも重要です。
私は、デジタル一眼レフを使い、一回写真を取って構図を確認し、フォーカスをそのままに動画機能で撮影しました。
さらに単焦点レンズを使うと、奥行き感が出てオススメです。

用意したもの

• デジタル一眼レフ（ニコン D5500 18-55 VR II レンズキット）
  
  Yahoo!で確認する　amazonで確認する　楽天で確認する
• 単焦点レンズ（ニコン AF-S Micro NIKKOR 60mm f/2.8G ED）
  
  Yahoo!で確認する　amazonで確認する　楽天で確認する
• 三脚
  amazonで確認する　楽天で確認する
• Adobe Photoshop CC

練習用のサンプル素材

素材の動画を用意したので、シネマグラフ作成の練習がしたい方は、ダウンロードしてPhotoshopで加工してみてください。

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

編集する動画ファイル（注ぐジュース）:ダウンロード

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

撮影のコツ

撮影の際には、量が増減しないようゆっくり注ぎ、なおかつ液体の落ちる軌跡にブレが無いよう真っ直ぐに流すと上手くいきそう。
また、人物の一部（手や体）でも映ると、シネマグラフっぽさが出て良くなりそうです。

加工のコツ

シネマグラフは通常、一定の繰り返しを行う動き（振り子 など）や一瞬の動き（人物のまばたき など）、繋ぎ目の分かりにくい動き（炎 など）が加工しやすいのですが、今回はコップに注ぐ液体を題材にしました。
これは、コップ内の量が増えるので最初と最後では明らかに違いが生まれ、繋ぎ目が不自然になります。
そのため、Photoshopの編集では、通常再生コマを複製し、逆再生にして後ろに貼り付けます。
そうすることで進むと戻るの繰り返し動画が完成します。
ただ、撮影のコツでも言ったとおり、液体の増減が明らかに多いと再生と逆再生のループだと見た人に感づかれるはず。気づきましたか？

シネマグラフの仕組み

↑静止画の上にアニメーション↓を乗せています。

動く箇所を切り取って乗せているので、動く範囲が絞られていないと難しいです。

以上の点を踏まえて、作成方法に移ります。

加工の手順

Photoshopを開いて、動画を取り込みます。
動画を取り込む方法として「フレームアニメーション」と「タイムラインアニメーション」があり、動画を右クリックで「プログラムから開く」で行うと、「タイムラインアニメーション」になってしまいます。
タイムラインアニメーションでは、逆再生が出来ないので以下の方法から「フレームアニメーション」を作成します。

取り込む動画ファイルを選択します。

動画のすべてを取り込むのは長いので、「選択した範囲のみ」にします。

動画をトリミングして読み込む開始位置カーソルと終了位置カーソルをドラッグで移動させ、OK。
ループが上手く繋がるように開始と終了の差異が少ないシーンを切り取るのがポイントです。

静止画になる部分を用意したいので、最初のコマである「レイヤー1」を複製します。
「新規レイヤーを作成」に「レイヤー1」をドロップ。

複製された「レイヤー 1 のコピー」の名前を「レイヤー0」に変更し、一番下へ移動。

フレームをShiftで全選択し、右上にあるメニューを開きます。

「フレームをコピー」して、「フレームをペースト」。

ペースト方法は、「選択範囲の後にペースト(A)」を選択し、OK。

ペーストされた範囲が選択状態になっているので、そのままメニューを開く。

「フレームを入れ替え」をすると、選択範囲が逆再生になります。

再生を押して確認してみます。

後は、動く範囲を切り抜くだけです。

「レイヤー0」以外をShiftで選択し、Ctrl + Gでグループ化します。

フレームをすべて選択し、「レイヤー0」を一度、非表示にして表示に戻すと、すべてのフレームの背景に適用されます。

「グループ1」を選択した状態で、「レイヤーマスクを追加」をクリック。

追加されたレイヤーマスクをダブルクリックし、マスク編集します。

「選択範囲を消去」。

「多角形ツール」を選択し、動く部分を含めるように少し余裕を持って範囲選択。（ブラシツールでもOK）

「グループ1」と「レイヤー0」を選択し、明るさやカラーバランスなどお好みで色調補正します。

一度、書き出してみます。
ファイル > 書き出し(E) > ウェブ用に保存(従来)…

プリセットは「GIF」を選択し、アニメーションのループオプションは「無限」で保存。

書き出したGIFアニメーションを確認し、再生速度が速すぎたり遅すぎたりしたら、Photoshopの編集へ戻ります。

フレームを全選択した後に、秒数の部分をクリック。
フレームのディレイを変更します。
再度、書き出してみて自然な再生速度を探しましょう。

今回は、再生と逆再生をつなぎ合わせてループを作りましたが、切り取るポイントでループが出来るような動画は、手順が少なくて済みますが切り取りに時間がかかりそう。

要点まとめ

• ループの繋ぎ目が自然になるよう切り取る。
• 動くものと動かない物の対比が重要。
• 動きのパターンは、常に動くものか、一瞬だけ動くのかを決める。
• 題材には、人物や自然、ノスタルジックな雰囲気を取り入れると良い。
• 物理法則を無視したりすると、サプライズ感が生まれ、惹き付けられる。
• 写真自体の品質の良さや構図。

トレンドというだけではなく、ウェブデザインの表現方法として、
シズル感を出すのに良さげなので、覚えておくと引き出しが増えていいかもしれません。
飲食店のHPなどは使いやすそうですね。

参考にさせて頂いた記事: 思わず見とれるバナー「シネマグラフ」の作り方！　Photoshopチュートリアル！

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

 - WEBデザイン, 無料素材 Adobe, Adobe Photoshop CC, アニメーションGIF, サンプル素材, シネマグラフ, フォトショップ, 仕組み, 作成方法, 写真, 動画, 編集, 練習