あなたのお役に立ちたいわんど。

Photoshopでシネマグラフを作る

外を歩いていても、サイトを見ていても自分の視界に入った動くものってなんだか目を引きますよね。
今回は、流行っていた(らしい)一部だけ動く画像、シネマグラフについて紹介していこうと思います。

シネマグラフとは

シネマグラフとは画像の一部だけが動いているGIF画像のことです。
どいうこと?????となると思うので実際にシネマグラフを使っているサイトを紹介しようと思います。

gilgul
海外サイトです。topページの画像鍋の中のつゆっぽいのだけが動いているのがわかると思います。
スクロールしていくとわかりますが、他の画像も一部だけ動いているのがわかります。

電通クリエーティブX
TOPページ空の雲や草が止まったままだけど人だけはくるくる回って動いてます。
各ページへ行っても一部だけ動いている画像が使われています。

本来一緒に動いているものが止まって一部だけが動いて見えると不思議な感じがしますね。
また、一部のみ繰り返し動いているのでつい目で追ってしまう、見てしまう気がします。

実は簡単に作れる!

こう見ると難しそうですが、動画少し編集するだけで簡単に作れてしまいます。
実際にお試しで作っていこうと思います‼︎

 


まずはシネマグラフに使う動画を用意ます。
動画は自分で撮ったものでも大丈夫です!……が!このシネマグラフを作るにあったっていくつかの注意点があります。

・固定カメラで撮影

手ぶれしていたり、場面が短い時間で何度も切り替わるものだと編集に向かない場合があります。

・ループした時つなぎ目が気にならない動き

繰り返されていても違和感がないようなものがオススメです。
基本同じ動きをしているもの蛇口から出る水とかエスカレーターとかがやりやすいと思います。

・動かしたい部分の周辺が動いてない

編集の問題でめんどくさくなるかもしれないのでなるべく動いてない方がいいかと思います。

この条件が整ってないダメというわけではなく、条件が揃うとよりいいよ!ってだけです。
あまり不自然にならないなら大丈夫だと思います。

 

動画を読み込む

アプリで作る方法もあるらしんですが、フォトショップで作っていきたいと思います。
使用するバージョンはPhotoshop CC 2017です。

用意した動画をPhotoshopで読み込みます。
(今回の素材はこちらの動画サイトさんからお借りしました。海外サイトでフリー素材ではありますがものによって帰属表記が必要の場合もあるので注意が必要です。)

早速フォトショを開いて用意した動画を読み込みます。
【メニューバーからファイル>開く>用意した動画選択>開く】または【⌘O】で素材動画を開きます。
開くと【タイムライン】というものが表示されると思います。

水色で囲ったところで動画の編集をしていきます!
読み込んだ動画かレイヤー1として表示されています。

タイムライン内ざっくりボタンの説明で、タイムラインという文字付近にあるボタンは左から動画の最初のフレームに移動/一つ前のフレームに移動/再生(停止)/次のフレームに移動/音声オンオフ/解像度・ループ再生設定/分割/切り替え効果設定ボタンです。
多分ここら辺覚えておけば今回の作業は問題なさそうです。

切り替え効果設定今回使わないのでスパッと忘れてください。
作るものがGIFなので音声の設定などは特にしなくて問題ないかと思いますが動作確認中音が出るのも……と思って切ってます。ここは自由で大丈夫です。

 

繰り返したいところを決める

このままだと長いのである程度切ってしまいます。
繰り返した時に違和感がないように適度の長さでカットしつなぎ合わせなどをします。
再生ボタンを押しながらここなら大丈夫そう!というところで切って繰り返します。

最初の場所(一番最初の場面)に青のバーを持っていきます。(画像)
持って行ったらその場でハサミボタンを押します。

そうすると動画が二つに分かれていると思います。こんな感じに。
(上の目盛り数と違うのは目をつぶってください)

次に終わりを決めます。ここまでというところに先ほどと同じようにハサミを入れます。
終わりは、はじめの場面とつなげた時違和感がない場所で切ることをお勧めします。
(今回お試しなので違和感あるところで切ってしまっています……。)
繰り返して使わない部分はデリートキーで消します。

いらないところを選択したら選択されたところは白い枠で囲まれるので囲まれているのを確認したらデリートを押しましょう。

 

 

マスクをかける前の準備

静止した画像を動画の上に貼り付ける作業をします。
一番最初の場面を⌘Aを押した後に⌘Cを押します。次に⌘Vを押します。
そうすると新規レイヤーが追加されていると思います。

タイムライン上では新たに紫色のレイヤーが追加されていると思います。

次にコピペしたレイヤー(画面上レイヤー2)を一番上に持って行きます。
タイムライン上では紫色のレイヤーが一段上にきて後ろの方についているかとお思います。

再生してみるとわかりますがこのままだと、動画が流れて、そのあと静止画という流れになってしまいます。なので、タイムライン上でレイヤー2の位置をレイヤー1と同じ位置に持って行きます。


 

右側にずれているレイヤー2(紫色のレイヤー)をレイヤー1と同じ開始位置に持って行きます。

選択してぐぐぐっ〜と左端まで持って行きます。

次に、持ってきたレイヤー2の右端にカーソルを持っていくとこんなカーソルに変わると思います。変わったらクリックしたまま右へ引っ張って行きます。
レイヤー1と同じ長さになるまで引っ張って、終わりを揃えます。

マスクをかけるまでの準備はここまでです。

 

マスクをかける

レイヤー2にマスクかけていきます。
今回動かしたいのは男性です。なので、男性にマスクかけます。
マスクをかけたいレイヤーを選択(レイヤー2)後ツールバーから【ブラシツール】を選択します。同じくツールバーの色切り替えの下にある【クイックマスクモードで編集】を選択します。クイックマスクモード選択時はこんな感じのアイコンになります。解除時はこんな感じです。

押したら男性を塗りつぶしていきます。
塗り終わったら、ツールバーから【クイックマスクモードで編集】を選択。
そうすると塗りつぶしたところが点線で囲まれます。次にレイヤーから【レイヤーマスクの追加】をクリックします。

 

レイヤーマスクの追加を押すとレイヤー2にもう一つ四角いサムネが追加されたと思います。できていれば完了です!

マスクをしたら一回タイムラインでうまくいってるか確認してみましょう!
タイムラインの再生ボタンを押して、動かしたい部分だけが動いていたら大丈夫です!
もしもここで、うまくいってないとか変なとこで境界線が〜となったらもう一度マスクを編集するといい感じになります。

 

GIFにして保存

できたものを早速GIFで保存します。
保存する前にサイズを変更ます。イメージ>画像解像度>数値入れるOKします。

このままの画像サイズだと重すぎるので画像サイズをできるだけ1MB前後または1MB以下ぐらいになるようにサイズを調整します。(今回適当で幅600とやっています。)

サイズ調整ができたら【OK】を押します。
【OK】を押すと下のような警告が出てくると思いますが気にせず【変換】を押します。

 

【ファイル>書き出し>web用に保存>拡張子をGIF>ループ無限】に設定してOKを押す。

 

完成

 

完成しました!!!
自然じゃないですが、切るとこちゃんと考えてやると自然になります!

 

まとめ

いかがでしょう、動画さえあれば気軽に簡単に作れてしまうシネマグラフです。
いつも動いているものが止まってその中の一箇所だけ動いているとついつい見ちゃいますね。不思議な雰囲気や目を引く画像が欲しい時にどうでしょうか!
見るだけじゃく作ってみるのも楽しいのでぜひ!


おまけでもう一つ別の方法で作ってみました。
動画をフレーム書き出ししてゴリゴリ画像加工かけて作った方です。Photoshopで作ると画像加工もできるのでいいですね!雰囲気出したいぜ…!って時にはオススメです。
以上Photoshopでシネマグラフ作るでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Web制作の株式会社あんどぷらす
ECサイト構築サービス「ウルトコ」
マーケットプレイス「カウトコ」
CS-Cartの情報ポータル「STOCK」