こんにちは。タニグチです。来てますね。春が。花粉が。
今週はgif動画の新しいアプローチ、シネマグラフという手法について紹介します。
シネマグラフとは
静止画像の一部のみ、アニメーションで動かすという手法です。
昨年、Twitterへの投稿にgif動画が対応したことや、Flexilというシネマグラフ作成アプリが一定期間無料だったことも受け、webに従事する方以外にも話題になりました。
Photoshopでシネマグラフを作ってみました
[美しいシネマグラフを作る上での最も大事な前提]
1. カメラが固定されていること
2. ループの繋ぎ目が気になりにくい動きであること
3. 動いてる部分の背景に動きがないこと
LIGさんのブログ記事から文章を使わせて頂きました。特殊な効果を狙う場合もありますが、基本はこちらの前提をクリアした動画で作成するようにしましょう。
1.動画の取り込み
動画ファイルをPhotoshop作業スペース上にドラッグ&ドロップします。調べたらほとんどの動画形式に対応しているらしく、なんでも取り込めるみたいです。
Photoshopの入出力対応フォーマット(アドビ公式サイトより)
動画ファイルを取り込むとビデオレイヤーができ、下部にタイムラインが現れると思います。無い場合は上部メニューのウィンドウ→タイムラインで表示しましょう。
2.動画のトリミング
タイムライン上の動画レイヤーをドラッグし、動画を繰り替えしたい部分のみの状態にトリミングします。ループさせ、違和感のない場所で止めます。
3.静止させる画像の指定
タイムラインをスクロールし、静止させたいフレームをまで持ってきたら。ctr＋A、(全選択)、ctr＋shft＋C（コピー）、ctr＋shft＋V（同じ場所に貼り付け）で静止画レイヤーを作ります。
4.レイヤーを整える
静止画レイヤーをビデオグループの外に移動します。タイムライン上にも反映されますので、動画と長さを同じにし、動画の上に重ねます。
5.静止画をマスクする
静止画レイヤーにレイヤーマスクを追加し、動かしたい部分をブラシなどで消していきます。細かく指定する必要がある場合はパスを使ってもいいかもしれません。
ある程度なぞったら、Ctrlを押した状態でレイヤーマスクをクリック、選択範囲を表示してどこに消えているかか確認しましょう。マスクを効かせすぎてしまったら、ショートカット「X」で色を白に切り替えてなぞるとマスクが消えます。
6.再生
再生してみましょう。マスク部分に違和感があれば5に戻り、ループのつなぎに問題があれば2に戻り調整しましょう。
違和感がなくなればOKです。初めに紹介した3つの前提をクリアしていない動画で作成した場合、どう頑張っても自然にはなりません。実は今回少しだけですが背景が動いていたため失敗しました。（微妙な揺れ程度だったので調整で何とかなると思ったのですが…。)でもどりに違和感があります。前提は必ずクリアしましょう…。
7.書き出し
ctr＋shft＋alt＋SでWeb用に保存で、gifを選択し,ループオプションで無限を指定しましょう。
これで完成ですが、悔しいのでもう一つ作りました。こっちは大丈夫…？
シネマグラフのポイントは、人に「不思議さ」を感じさせることだと思います。画像はその時点で人の視線を集め、興味を抱かせたことになります。バナークリエイティブに導入することで、クリック率を上げる効果も期待できると思われます。
おまけ
海外のサイトですが、CSSのみでシネマグラフを作る方法も紹介しています。
