days

日々の徒然

【Photoshop】ついつい見入っちゃう?シネマグラフで遊ぼう!

スポンサーリンク


f:id:aya_ino:20180815181208j:plain

シネマグラフって?

http://cinemagraphs.com/

こちらの動画群、なんだか不思議で見入ってしまいますよね・・
これは、全部「シネマグラフ」です。


「シネマグラフ」とは文字通り「動く」「写真」で、画像の一部だけ動きを入れたGIFアニメーションのことを言います。
GIFアニメというと個人的にはドット絵で動かすイメージでしたが、世間一般的にPCのスペックも一昔前と違い格段に上がってきたためか、最近ではサイトでの活用も目立ってきました。

 

例えば

・ザ・ドッグデイズ

ザ・ドッグデイズ - 犬、猫、ペットのためのウォーターサーバー
水面だけを動かしています。
静止画だと寂しい印象を与えてしまいそうな画像ですが、水面を動かすことによって空気感を出し、より魅力的なトップ画像に仕上がっています。

 

・伊藤久右衛門

京都 宇治 伊藤久右衛門
お茶がずっと注がれていたり、湯気だけゆらゆらしていたり、抹茶蜜が永遠ととろーりとしていたり(美味しそう…)。
画像の一部だけを動かすことによって、それぞれのコンテンツに目線を誘導し、動的な印象を与えます。
また、商品の魅力を伝えるのに一役買っていますね(美味しそう…)。


こんな風にサイトに動きをつけてみたいなって、思いませんか?
動画編集のスキルがないとすごく大変そう、特別なソフトが必要なのでは?という気がしますが、シネマグラフは動かす動画素材さえあれば、Photoshopだけでできるんです。

 


早速作ってみよう!

最初は難易度低めな素材を選びましょう。
動画選びのコツはやっているうちにつかめてくると思いますが、まず必須なのは

  1. カメラ位置が固定されている動画
  2. ループしやすいもの
  3. 動かしたいオブジェクトの背景に別の動くオブジェクトが無いもの・少ない動画

少なくともこの3点が満たされていれば良いかと思います。

すぐに動画素材を用意できなかったので、NHKアーカイブ様から動画素材をお借りします。

NHKクリエイティブ・ライブラリー


条件3点を満たす動画ということでこちらをチョイス。


マティーニを注ぐ(笑)

www2.nhk.or.jp

 

1. 動画をPhotoshopで開く

f:id:aya_ino:20180815181524j:plain


レイヤーに「ビデオグループ」というフォルダができて、そこに開いた動画のデータが入ります。
動画データを開くと、同時に「タイムライン」ウィンドウが出てきます。

 

f:id:aya_ino:20180815181538j:plain


出てこない場合、メニューから「ウィンドウ」→「タイムライン」で表示させます。

 

 

2. 開いた画像を、必要な(ループしたい)ところだけ切り取ります。
青色のスライダーを動かしながら、はさみツールを使って切ります。

f:id:aya_ino:20180815181636j:plain


不要な部分はクリック選択→[delete]で削除できます。

f:id:aya_ino:20180815181652j:plain

 

3.次に静止させておきたい背景を作ります。
ビデオグループ内の動画レイヤーを選択し、静止させたいところでタイムラインのスライダーを止め、レイヤーをコピーします。

f:id:aya_ino:20180815181738j:plain


タイムラインとレイヤーに、それぞれコピーしたものが新たに「レイヤー1」として追加されます。

f:id:aya_ino:20180815181759j:plain

 

4. コピーした画像は背景として利用するので、ビデオグループフォルダから外します。

f:id:aya_ino:20180815181822j:plain

 

5. タイムラインで、レイヤー1の長さを元画像と同じ長さにします。
タイムラインでレイヤー1の右端をドラッグすると、長さを調節できます。

f:id:aya_ino:20180815181844j:plain

 


6. 次に、背景としてコピーしてきたレイヤー1にレイヤーマスクをかけます。

f:id:aya_ino:20180815181906j:plain

 

 

7.アニメーションする部分の背景画像を削ります。

レイヤー1のレイヤーマスクのリンクを外し、マティーニが注がれている部分だけレイヤーマスクを消しゴムツールで消します。

f:id:aya_ino:20180815182012j:plain

f:id:aya_ino:20180815182020j:plain

 

8.Web用に保存

タイムラインで動作を確認し、OKだったらメニューより[ファイル]→[書き出し]→[Web用に保存]で保存します。

f:id:aya_ino:20180815182049j:plain


形式は「GIF」、ループオプションを「無限」にするのをお忘れなく。

f:id:aya_ino:20180815182107j:plain

動作の確認はタイムラインに再生ボタンがあるのでそちらを押すか、スライダーを動かして確認してください。
再生の際にタイムライン再生ボタンの並びにあるギアアイコン内のメニューから、再生を1度だけにするか、ループにするかを選べます。

 

で、


出来上がりです!!

f:id:aya_ino:20180815181312g:plain


ちょっとループが途切れてしまいましたが、ザッとの流れとしてはこのような感じになります。
最初のうちは何度も調整することになりますが、慣れればこのくらいのものであればものの數十分でできるようになると思います。

 


他のフリー動画素材は以下。
サイトによっては使ってはいけないものもあるかもしれないので、利用規約等をよく読んでからご利用くださいね。

 

vidsplay

Totally Free Stock Video Footage - Vidsplay.com

 

ハイビジョン映像素材集

4K HD フリー映像素材 [Royalty Free 4K HD Footage]

 

Coverr

Beautiful, free stock video footage for your homepage

 

MotionElements
https://www.motionelements.com/ja/free/stock-footage

 

いかがでしたか?
アイデアと工夫次第で面白いシネマグラフができそうですよね。
近頃都内の鉄道などで見かける、デジタルサイネージ広告にシネマグラフを使うのも面白いかもしれませんね!

 

 

 

デザインの学校 これからはじめるPhotoshopの本 [CC2017対応版]

デザインの学校 これからはじめるPhotoshopの本 [CC2017対応版]

  • 作者: I&D,宮川千春木俣カイ,ロクナナワークショップ
  • 出版社/メーカー: 技術評論社
  • 発売日: 2017/02/04
  • メディア: 大型本
  • この商品を含むブログを見る
 
Photoshop 10年使える逆引き手帖【CC/CS6/CS5 対応】 (ああしたい。こうしたい。)

Photoshop 10年使える逆引き手帖【CC/CS6/CS5 対応】 (ああしたい。こうしたい。)

 

 

 


スポンサーリンク

 

プライバシーポリシー