シネマグラフとは？

シネマグラフとは、静止画と動画を組み合わせ、画像の一部にだけ動きを取り入れたGifアニメーションのことです。
その不思議さからついつい見入ってしまうため、WebサイトやWeb広告にも効果的に取り入れられることが増えています。

たとえばこんなシネマグラフがあります。

参照元： Cinemagraph: 28 Still Photos With Subtle Motion

写真かと思いきや一部だけ動いていて、不思議な感覚に襲われます。

前から気になってはいたのですが、難しそう・・・と勝手に尻込みしていましたが、Photoshopで簡単に作れるという情報を手に入れたのでさっそくやって作成してみました！

Photoshopを使ったシネマグラフの作成手順

Photoshopを使ってシネマグラフを作成していきます。
初めてのシネマグラフなので多少下手な部分もありますが、ご愛嬌でお願いします・・・

ちなみに手順の中で一番の時間がかかったのは動画探しでした。

動画を用意する

まずは動画を用意します。

今回はvidsplayで配布されているフリー素材「
Free People Fishing Stock Video Footage」を使用しました。

動画を選ぶときは以下の点を考慮しましょう。

• カメラ固定で定点で撮影されているもの
  定点で撮影した動画でないと、静止画と動画にずれが出てしまいます。必ず定点に固定されている動画を使いましょう。もし撮影する場合は、必ず三脚などを使用し、カメラをしっかり固定して撮影するようにしましょう。
• 動かす部分の背景には動きがないもの
  静止画の上に動画の一部を重ねるため、動かす部分の背景に動きがあると背景も一緒に動いてしまい違和感が出てしまいます。
• ループの継ぎ目が気になりにくもの
  シネマグラフは短い動画をループさせて作ります。継ぎ目がなめらかでないと不自然にブチっと切れたようになってしまうので、できるだけ気になりにくいような動画にしましょう。

使用する動画をPhotoshopに取り込む

[ファイル] → [開く]で選択するか、直接ファイルをドラッグして使用する動画をPhotoshopに取り込みます。

動画を取り込むと下にタイムラインが表示されます。

動画をカットする

次は動画をループさせる部分でカットします。

このとき、ループの繋ぎ目がわかりにくくなるような位置を選んでください。

タイムライン上の再生ヘッドをループの開始位置まで動かし、左のハサミマークをクリックすると、動画がカットされ分割されます。

ループの停止位置でも同様の手順で動画を分割します。

前後の不必要な部分は、選択して[delete]ボタンで削除することができます。

削除すると、必要な部分だけが残り短い動画になりました。

静止画のレイヤーをつくる

次は静止画のレイヤーをつくります。

カットした動画の中で、静止画にしたい部分までタイムライン上の再生ヘッドを動かします。

動かしたら、以下の手順で静止画を貼り付けます。

command (Ctrl) + A で全選択
↓
command (Ctrl) + C でコピー
↓
command (Ctrl) + shift + V で貼り付け

静止画が動画の後ろに貼り付けされました。

静止画レイヤーは動画レイヤーの上に重ねたいので、静止画レイヤーをビデオグループの外に出します。

外にでました。

これで動画レイヤーの上に静止画レイヤーが重なりました。

しかし、タイムラインを確認すると、動画レイヤーと静止画レイヤーの開始位置がずれた状態になっているので、静止画レイヤーをドラッグして一番最初まで移動させます。

また静止画レイヤーが少し長くなっているので、動画レイヤーと同じ長さになるように調整します。

これで動画レイヤーの上に同じ長さの静止画レイヤーを作成することができました。

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

次は静止画レイヤーにレイヤーマスクで穴をあけ、動かしたい部分だけ動画レイヤーが見えるようにします。

静止画レイヤーを選択した状態でレイヤーマスクのボタンをクリックし、レイヤーマスクを追加します。

レイヤーマスクを選択した状態で、動かしたい部分を黒のブラシツールでなぞっていきます。

赤で表示されているのが、今回動かしたい部分です。

これで静止画レイヤーに穴があき、一部だけ動画レイヤーが見えている状態になりました。

出来栄えはタイムラインで確認し、必要であればレイヤーマスクを調整します。

解像度を変更する

アニメーションの解像度が高いままになっているので、Web掲載用に調整していきます。

ブログに掲載するサイズを考えて設定しました。

gifアニメーションとして書き出す

最後に、gifアニメーションとして書き出します。

[ファイル] → 　[書き出し] → [Web用に保存]をクリックします。

画像の種類を「gif」にし、ループオプションを「無限」に変更し、保存してください。

完成したシネマグラフ

完成したシネマグラフはこのようになりました。

継ぎ目が不自然な点など多々不出来な部分はありますが、なんとかシネマグラフらしいものが完成しました！

さいごに

難しいテクニックが必要だと思っていたシネマグラフですが、案外簡単に作れることがわかりました。

ユーザーの目を引くようなシネマグラフにぜひみなさんも挑戦してみてください！