creatersnest123

写真が動く!?Photoshopでシネマグラフを作る方法


最近よく聞くシネマグラフということば。写真の一部だけが動くようにして見せるgifの動画ことですが、静止画の一部だけがうごくのでこれまでの動画にない新鮮さがあり、CMなどでもよく用いられるようになりました。Photoshopでつくればこのシネマグラフも簡単にできます。

まず動画をPhotoshopに取り込みます

Photoshopoでファイルメニュから開くを選び編集対象の動画ファイルを開きます。

写真1

 

 

動画から再生させる部分をトリミングして抜き取ります

動画を再生してシネマグラフにする始まりの部分を探します。始まりの部分でヘッドを止め、
はさみマークのボタンをクリックして動画を分割します。

写真3

次はシネマグラフの終わりの部分にヘッドを移動し、はさみツールで動画を分割し、不要な部分を削除します。

写真5

静止画をつくります

動画レイヤーを選択し、Altキー(MacはOptionキー)を押したままレイヤーパネルの一番上に移動させます。
これでタイムライン上に2つの動画が配置されます。

写真6

複製した動画をレイヤーパネルで選択しておき、ヘッドを静止画にしたい部分に移動させます。

写真7

レイヤー>ラスタライズ>ビデオと選びます。すると静止画ができます。

写真8

静止画レイヤーをアクティブにしておき、マスク追加ボタンを押します。

写真9

マスクを選択しておき、選択ツール(ここでは「なげなわツール」)で動かしたい部分だけを選択範囲で囲みます。
複雑な場合はクイック選択マスクなどのツールを使って選択します。

写真10

選択範囲を描画色で塗りつぶします。

写真11

これで完成です!

おわりに

シネマグラフは簡単にできますが、センスのある作品を作るのは意外に難しいものです。
コツは画像の中の1部が動いているのに他の部分が止まっているのを見たときの不思議さや面白さを表現できる
素材動画を撮ったり探したりして選ぶことです。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticlePhotoshopで簡単に「飛び出す写真」を作る方法