【デザインワークショップ】vol.19 写真？動画？不思議なアニメーションの「シネマグラフ」を作ってみる
ウェブデザインのトレンドとして少し前から、ちらほら耳にするようになってきました「シネマグラフ」ですが、一体どういうものなのでしょうか？今回のワークショップではPhotoshopを使って不思議なアニメーションであるシネマグラフを作ってみたいと思います。
2. ベースの動画レイヤーをコピーします。
3. 2つの動画レイヤーを「ビデオグループ」の外に出してグループを解除した状態にします。こうすると、タイムライン上には2つの動画にそれぞれ対応するタイムラインが表示されています。
4. ここからコピーした表面レイヤーの静止画を準備していきます。まずは、静止画にしたいフレームを決めて、タイムライン上のマーカーを合わせます。
5. 表面の動画レイヤーを「ラスタライズ」して、静止画に変換します。こうするとタイムラインの表示が変わったのが確認できます。
6. ラスタライズした静止画用のレイヤーを選択して、「クイックマスクモード」に切り替え「ブラシツール」で、動きを見せたい範囲を塗りつぶしていきます。
7. 塗りつぶしたところから選択範囲を作成します。
8. 選択範囲からマスクを作成します。こうすることで先ほどクイックマスクモードで塗りつぶしたところ以外にマスクがかかっている状態で、塗りつぶしたところは背面の動画が見えていることになります。
9. 次にタイムラインでアニメーションで見せたい範囲をカーソルで調整して決めていきます。この範囲のアニメーションがシネマグラフで表示されるようになります。
10. 最後に「Web用に書き出し」で「GIFアニメーション」形式で書き出します。書き出し方式をGIFに設定すれば基本的にはデフォルトの設定で問題ないですが、アニメーションのループオプションを「無限」にしておくことでアニメーションをループさせることができます。
これで不思議なアニメーションのシネマグラフが完成しました。Photoshopを使うと意外に簡単にできますね。
いかがでしょうか、一見すると不思議なシネマグラフも意外とシンプルな仕組みで出来ていますので気軽に作ってみてはいかがでしょうか。ウェブサイトにオリジナリティや目を引くような要素が欲しい時には使えるデザインだと思います。 （参考にさせて頂いたサイト） 動く写真 一 シネマグラフの作り方
動画でもない写真でもないシネマグラフとは
シネマグラフとは、写真の一部だけ動くようになっていて、それ以外は静止画という、少し変わったアニメーションのことを指します。一見すると、時が止まっている中で、一部だけ時間が進んでいるような印象を与えるので、非現実的で不思議な雰囲気があります。 静止画の要素と動画の要素を併せ持つシネマグラフはそれだけでかなりのインパクトを持っています。不思議に見えるトリックアートのような感じでユーザーの目を引くことができます。 シネマグラフはPhotoshopを使うことで比較的簡単に作ることができます。具体的な仕組みでいうと、ベースとなる動画の表面に、動きを見せる部分以外にマスクをかけた静止画を重ねることで、マスクがかかっていない部分だけ、背面の動画が見えるという形になっています。では、実際に作ってみたいと思います。今回はこちらの動画を使わせていただきました。 [video width="320" height="180" mp4="https://designsupply-web.com/wordpress/wp-content/uploads/2018/05/dws-20180526-000.mp4"][/video]Photoshopで作るシネマグラフ
1. まずはベースとなる動画をPhotoshopで読み込みます。デフォルトでは「ビデオグループ」という名前でグループ化されています。また画面下には動画のタイムラインも表示されています。
2. ベースの動画レイヤーをコピーします。
3. 2つの動画レイヤーを「ビデオグループ」の外に出してグループを解除した状態にします。こうすると、タイムライン上には2つの動画にそれぞれ対応するタイムラインが表示されています。
4. ここからコピーした表面レイヤーの静止画を準備していきます。まずは、静止画にしたいフレームを決めて、タイムライン上のマーカーを合わせます。
5. 表面の動画レイヤーを「ラスタライズ」して、静止画に変換します。こうするとタイムラインの表示が変わったのが確認できます。
6. ラスタライズした静止画用のレイヤーを選択して、「クイックマスクモード」に切り替え「ブラシツール」で、動きを見せたい範囲を塗りつぶしていきます。
7. 塗りつぶしたところから選択範囲を作成します。
8. 選択範囲からマスクを作成します。こうすることで先ほどクイックマスクモードで塗りつぶしたところ以外にマスクがかかっている状態で、塗りつぶしたところは背面の動画が見えていることになります。
9. 次にタイムラインでアニメーションで見せたい範囲をカーソルで調整して決めていきます。この範囲のアニメーションがシネマグラフで表示されるようになります。
10. 最後に「Web用に書き出し」で「GIFアニメーション」形式で書き出します。書き出し方式をGIFに設定すれば基本的にはデフォルトの設定で問題ないですが、アニメーションのループオプションを「無限」にしておくことでアニメーションをループさせることができます。
これで不思議なアニメーションのシネマグラフが完成しました。Photoshopを使うと意外に簡単にできますね。
良いシネマグラフを作るポイントを考えてみる
このシネマグラフですが、作成自体はそんなに複雑ではありませんが、素材選びと見せ方がとても重要になってきます。素材の動画がシネマグラフにあっていないと、かなり不自然になってしまったり、普通の動画と変わらなくなってしまうので注意が必要です。そこで、シネマグラフにあった動画選びのポイントは主にこのような点があります。 1：アニメーションは全体の一部で限られた部分に絞る あまりアニメーションの範囲が広い場合は、普通の動画とあまり変わらない印象が出てしまいます。 2：人物全体もしくは一部を静止画の中に入れてみる 人物を静止画の中に入れることで、時間が止まったように見え、より不思議な印象を与えることができます。全体でなくとも一部だけでも効果的ですね。 3：ループさせるところのつなぎ目をスムーズにする シネマグラフはGIFアニメーションなので基本的にループさせて使うことが多いのですが、ループのつながりが不自然だと、シネマグラフの不思議な世界観が崩れてしまいます。ループのつなぎ目を綺麗にするためには、ループ部分の時間をあまり長くしない方がいいかもしれません。 4：アニメーションは規則的なものが使いやすい シネマグラフで見せるアニメーションは複雑で不規則だと、作るのが難しくなるだけでなく、仕上がりも不自然になりやすいです。できるだけシンプルで規則的な動きのものを採用することがポイントです。 よく見かけるのは、今回でも使っている液体を注ぐシーンや、時計の針が動くシーン、またろうそくなど炎が燃えるシーンが比較的作りやすいのではないでしょうか。いかがでしょうか、一見すると不思議なシネマグラフも意外とシンプルな仕組みで出来ていますので気軽に作ってみてはいかがでしょうか。ウェブサイトにオリジナリティや目を引くような要素が欲しい時には使えるデザインだと思います。 （参考にさせて頂いたサイト） 動く写真 一 シネマグラフの作り方
