スタッフブログSTAFF
BLOG

Web業界で流行中!『シネマグラフ』をiPhoneで作る

昨年あたりからweb業界でジワジワと流行中!
これから絶対に流行ること間違いない「シネマグラフ」を
iPhoneのビデオ撮影で制作してみましょう!

「シネマグラフ」って何??

簡単に言うと、写真のある一部分だけを動かすという手法を使った写真のことです。
作り方から考えると、「まず最初に動画素材があって一部分以外を静止させる」と言った方が正しいかもしれません。

そして、今回作ってみたシネマグラフがこちらです。

cinemagraph_01

cinemagraph_02

それにしても、写真の一部分だけが動くだけで、とても印象深い写真に変わります!
さぁ、シネマグラフを作ってみたくなったでしょ??

そんなあなたに、iPhoneアプリで簡単にシネマグラフが作れるモノがあります!『Cinemagraph Pro』というアプリです。

スクリーンショット 2015-07-17 18.46.48

 

操作は非常に簡単で、シネマグラフにしたい動画を選択(撮影)し、動かしたい部分に色を塗っていくだけです。

スクリーンショット 2015-07-17 18.59.24

無料でダウンロードでき、とても面白いアプリなんですが、作ったシネマグラフを「書き出し」or「共有」する機能が有料となっております!
価格はなんと6000円!
これが高いと思うか、安いと思うかはあなた次第…ですが
今回は課金は断念し、別の方法でシネマグラフを作成することにします。

〜シネマグラフの作り方〜

【シネマグラフ撮影方法】

まずは動画を撮影します。注意するのは、3つです!

iPhoneは必ず三脚などで固定し、絶対に動かないようにする!

動いている部分の背景が静止していること

ループのつなぎ目(動画の頭とケツ)が気になりにくい動きであること
出来上がりは、GIFファイルで無限ループ再生するので、動きの最初のカットと最後のカットが全く違っていると
動きがジャンプしてしまい不自然な動きになってしまいます。

【PhotoShopでの加工】

今回は撮影した動画素材を、PhotoShopで編集し、GIFで書き出します。
(本来であれば、加工部分もiPhoneだけで完結させたかったのですが、シネマグラフ初挑戦ということで、PhotoShopの力を借りました!)

まず、iPhoneから動画素材をPCにコピーしておきます。
(Macならユーティリティの中にあるイメージキャプチャを使うと、iPhone内にある写真や動画の一覧で出てくるので、使いたい素材だけをMacにコピーする事ができます)

コピーした動画を、「QuickTimePlayer」で開きます。
「編集」から「トリム」を選択し、シネマグラフにしたい動画部分だけを抽出します。
(素材は3秒から5秒くらいにするのが良いかと思います。)

次に、PSを立ち上げ、「ファイル」→「読み込み」→「ビデオフレームからレイヤーに読み込み」で動画素材を選びます。
読み込む範囲は「最初から最後まで」、フレームアニメーションを作成にはチェックを入れておきます!

すると、動画が読み込まれ、レイヤーウインドウに動画が1コマずつレイヤー分けされて表示されます。

一番下にある「レイヤー1」から一番上の最後のレイヤー全てを選択し、「Command+G」でグループ化します。

スクリーンショット 2015-07-17 17.36.22スクリーンショット 2015-07-17 17.36.37

次に作業をしやすくするために、「ウインドウ」→「タイムライン」を表示させます。タイムラインの設定は、無限にしておきます。

スクリーンショット 2015-07-17 19.24.23

タイムラインで最初のカットを表示させ、「選択範囲」→「すべてを選択」。さらに、「編集」→「結合部分をコピー」、「編集」→「ペースト」します。

するとグループ化したレイヤーの上に、新しいレイヤーが追加されます。
タイムライン上は、このようになっています。

スクリーンショット 2015-07-17 17.51.48

この時点で、動画のレイヤー(グループ1)の上に、静止画レイヤーが乗っている状態になっているので、再生すると、静止画の状態で見えることになります。ここから、静止画に穴を開けて、下に隠れている動画部分を覗かせるように加工していきます。

まず、上に乗っている静止画レイヤーを選択し、キーボードの「Q」を押します。
クイックマスクモードに切り替わるので、「ブラシツール」を選び、動かす部分を塗り潰していきます。

スクリーンショット 2015-07-17 18.12.39
塗りつぶしたら、もう一度「Q」を押して、クイックマスクモードを切り替えます。
すると、塗り潰した部分が選択されるので、レイヤーウインドウから「レイヤーマスクを追加」を選択し、静止画のレイヤーにマスクを追加します。

スクリーンショット 2015-07-17 18.14.44

これで、静止画のレイヤーに穴が開いて、下地にある動画が覗いている状態になります!再生してみておかしいところがある場合は、「編集」→「1段階戻る」で作業を戻し、クイックマスクモードで塗りつぶす作業まで戻って、塗り方を調整してみてください。

出来上がったら、「ファイル」→「web用に保存」から好みのサイズを選択して、保存すれば「シネマグラフ」完成です!

今回は、iPhoneで撮った動画を、PhotoShopを使って作ってみましたが、
もうちょっと綺麗に仕上げるために、もう少しシネマグラフ作りを勉強していこうと思っております!
本業の企業VP制作でも、この手法を取り入れて印象的なシーンを作っていくこともできるかな。

 

記事検索



月別アーカイブ


カテゴリー

CONTACTお問い合わせ


お電話でのお問い合わせはこちら
03-6386-8409
受付時間:平日10:00〜19:00 ( 夏季休暇、年末年始除く )
メールでのお問い合わせはこちら
メディアフォーユー株式会社とは、東京都世田谷区にある映像制作会社です。動画作成はもちろんのこと、映像企画・動画編集・動画やデジタルメディアを使ったマーケティングまでを幅広く手掛け、新卒者のための採用動画、セミナーや就職説明会のための企業紹介ビデオ、集客のための広告動画や販売促進のためのプロモーションビデオ(PV)、社内イベントや式典などで上映するための社史動画なども取り扱っております。今やウェブでの集客や販売、あるいはプロモーションやマーケティング活動において動画作成や映像制作は欠かせない重要な戦略ツールになっています。プロとしてテレビ業界で活躍し、多くの実績を持つメディアフォーユー株式会社だからこそ提供できるハイクオリティな映像は、お客様のご期待にも十分応えることができる仕上がりをお約束いたします。