SONICMOOV Googleページ

え、簡単すぎない?Photoshopでシネマグラフを1分で作成する方法

え、簡単すぎない?Photoshopでシネマグラフを1分で作成する方法

  • このエントリーをはてなブックマークに追加

以前の記事えっ、これだけ?Photoshopの切り抜きが爆速になる「選択とマスク」機能で進化しているPhotoshopの便利な機能を紹介しましたが、今回は、2017年5月22日にAdobeさんが、Photoshopの機能を使ってシネマグラフを作成する動画を公開していましたので、それをちょいと紹介してみようと思います。

シネマグラフとは

シネマグラフとは、写真の一部が動くちょっと不思議な感覚があるGIFアニメーション画像のことです。

チェックしておきたいシネマサイト

百聞は一見にしかず、こちらのCinemagraphsを見てもらうと分かりやすいかと思います。

内容にもよりますが、ファッションなどブランドを押し出すようなサイトとの相性は抜群と言えます。実際にそれらを取り入れたサイトをたまに見かけることがありますので、そういった案件があったらぜひとも検討してみるといいかもしれません。

シネマグラフの作り方

流れが分かってしまうと今回のサンプルなんかは1分もかからずに作業できてしまいます。それでは、実際のやり方を解説していきたいと思います。

シネマグラフ用素材の用意

動画素材自体もAdobeさんが用意してくれているので、これをダウンロードして使ってみたいと思います。
https://adobe.ly/2rzdsOj (zipファイル直リンク)

自分で用意する場合は、なるべく動きがループしているような箇所がある動画を用意するといいでしょう。こちらのテープの動画なんかは作りやすいかと思います。

上記の動画以外にも同サイト上には様々な動画素材があるので、色々と探してチャレンジしてみるといいでしょう。
https://www.videvo.net/

動画素材の読み込み

ダウンロードしたZipファイルを展開すると「Coffee Video.mp4」がありますので、それをPhotoshopのメニューから開きます。

そしたら、「レイヤー1」を「ビデオグループ1」から取り出し、「ビデオグループ1」を削除します。
動画をPhotoshopに呼び込む

続いては、「レイヤー1」を複製しておきます。
レイヤーを複製

タイムラインウィンドウの表示

次はメニューの「ウィンドウ」から「タイムライン」を表示させます。
タイムラインを表示

静止画像のトリミング

今回のサンプル動画は、両手と置かれたコーヒーカップの中身が主な動きとなっていて、使用したいのはカップの中のコーヒーの動きです。それ以外は静止している状態となります。Adobeさんのサンプルでは一番右側のコーヒーカップに手を当てている静止画像を使用していますが、次の作業はタイムライン上で使用したい静止画像の位置をトリミングすることです。
フォトシネマ用サンプル動画

タイムラインが表示されたら再生バーを動かして内容を確認しつつ、トリミングして使用したい位置を決めます。個人的には上図の真ん中の位置なんかもおすすめです。というのも、「手に動きがまだありそう」という錯覚をさらに与えることで画に動きが出せるからです。
静止画箇所を探す

レイヤーのラスタライズ

位置を決めたら今度はコピーした上のレイヤーをラスタライズして、静止画像に変換します。
レイヤーをラスタライズ

マスキング作業

続いては、メニューの「選択範囲」から「選択とマスク」を選択します。
Photoshopの選択とマスクを選択

そしたら、表示された属性ウィンドウのサムネイルのプルダウンメニューから「オーバーレイ」を選択します。
オーバーレイを選択

次はツールメニューのブラシツールを選択してコーヒーの表面を塗りつぶします。
マスクを掛ける

再び属性ウィンドウの「反転」をクリック、出力先を「レイヤーマスク」にセットして、最後に「OK」をクリックします。
Photoshopでシネマグラフの作成

再生範囲の指定と確認

そしたら、タイムラインで再生の範囲を指定し、実際に再生ボタンをクリックして動きを確認してみましょう。
シネマグラフの作り方はこれで完了

GIFに書き出し

後は、いつも通りの例のショートカットキー「Alt + Shift + Ctrl + S (Web用に保存)」でGIF画像に書き出しです。なお、動画自体の画面サイズが大きいので書き出す前に予め縮小しておくといいでしょう。

今回参照したAdobeさんの動画です。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事

mautic is open source marketing automation