Photoshop-動く画像『シネマグラフ』を作ってみよう。


Photoshop-動く画像『シネマグラフ』を作ってみよう。

最近お気に入りのシネマグラフ、不思議な感じのする画像に思わず見惚れてしまったりしています。
ちょっとしたアクセントとして、イメージをより目立たせ惹きつけるテクニックとして覚えておきたいものです。
シネマグラフの元となる動画に適しているものや作り方を検索すると沢山出てきますので、参考にして作ってみました。

シネマグラフについて。

  • シネマグラフは写真の一部に無限ループを加えたGif画像。
  • 背景の動かない、固定撮影された動画を用意。
  • ループさせるので繋ぎ目の気にならない単調な動きを狙う。


どんなものなのかは実際に見たほうがわかると思うので、いくつか載せてみます。
以下すべてvia GIPHYより。







作成ソフトについて。

 

Photoshop CCで実際につくってみた手順。

 

動画ファイルの用意

先に動画ファイルの不必要な部分をムービーメーカー等の動画編集ソフトでカットしておく。
カットしてシネマグラフに使いたい部分になった動画ファイルをPhotoshopで開く。
(Photoshopで動画の切り取りも出来るが、開くのに時間がかかるので先にカットした。)
cinemagraph_phtoshop

静止画を動画の上に重ねる

タイムラインにある下向き三角をドラッグしてベストなところへ持っていき、静止画を選択しコピーして貼り付けをする。

Ctrl+Aで選択

Ctrl+Cでコピー

Ctrl+Vで貼り付け
cinemagraph_phtoshop

新しく出来た静止画のレイヤー2をビデオグループの外側に持っていく。

次にビデオグループ1のレイヤーと静止画のレイヤー2を同じ長さに揃える。

cinemagraph_phtoshop

静止画の動かしたい部分に穴を開ける

動画の動きを見せるため上のある静止画にレイヤーマスクを追加して穴を開ける。

今回は髪の毛の動きをだしたいのでブラシで穴をあけてみる。

cinemagraph_phtoshop

ブラシで塗り塗りする。

塗ってる部分がわかりやすいように下の動画のレイヤーを目のアイコンをクリックして非表示するとわかりやすい。

シネマグラフ作り方

ここまで出来たら、再生ボタンを押して確認!

あとは色調補正するなど、お好みで仕上げる。

Web用に画像を保存する

ここでの手順は

  1. 画像解像度でサイズを変更する。
  2. gif画像として書き出す。

まずはweb用に画像のサイズを変更する。

「イメージ」→「画像解像度」

 

シネマグラフ

サイズを入力してOKボタンを押すと以下ダイアログがでるが気にせず、変換ボタンを押す

シネマグラフ

変換が終わったらいよいよWeb用にgif画像として書き出してみる。

「ファイル」→「Web用に保存」で「GIF」形式を選択。

下部のアニメーションループオプションは「無限」を選択し、保存で完了!

シネマグラフ

出来上がったシネマグラフ
cinemagraph_mizukazu_test

最後になりましたが、今回はフリーの動画を使わせて頂きました。
フリー動画を提供しているサイトを次回まとめてみよう。


この投稿へのコメント

コメントはありません。

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL