Photoshopでシネマグラフを作る方法[第5回]GIFアニメの作り方

本記事で制作するGIFアニメ

写真の一部が動くシネマグラフGIFアニメを制作します。

使用した素材ファイル

サンプルファイルをダウンロードする。
動画サンプル(mov形式)が入っています。サンプルファイルはご自由にお使い下さい。

解説の流れ

1. 動画を読み込みます。
2. 動かさない部分にレイヤーマスクをかけます。
3. GIF形式で保存をします。

1.動画を読み込む

1-1.サンプル動画をダウンロードし、Photoshopで読み込みます。

[ファイル]メニュー→[読み込み]→[ビデオフレームからレイヤー]を選択しましょう。

1-2.[読み込む範囲]を[最初から最後まで]として[OK]を選択します。

読み込みが完了すると以下のようになると思います。

1-3.画面の中の動かない場所を作るために、レイヤー１を一度コピーします。

この図では、わかりやすいように「背景(レイヤー１のコピー)」と名前を変更しています。

コピーができたら、次にレイヤー１〜レイヤー８の動く部分を指定していきます。

2.動かさない部分にレイヤーマスクをかけます。

2-1.レイヤー１を選択し、[自動選択ツール]などを使って、黄色のネオンの部分全体を範囲指定します。

2-2.[レイヤー]→[レイヤーマスク]→[選択範囲外をマスク]を選択します。

ここまで来たら、レイヤーパネルを確認してみましょう。うまくレイヤーマスクをかけることができると、レイヤー１のサムネイルの右にマスクのサムネイルが表示されます。

2-3.[option]キーを押しながら、レイヤーマスクのサムネイルを、レイヤー２〜８にドラッグ&
ドロップします。

背景以外の全てのレイヤーにレイヤーマスクをコピーできたら、作業は終了です。試しに、タイムラインパネルでGIFアニメをプレビューしてみて下さい。今回、レイヤー7、レイヤー8のせいでループがスムーズになってないことがわかります。ですので、下図のように、フレーム７，フレーム８を削除してみるとよいでしょう。

それでは最後にGIF形式に保存をしてみます。

3.GIF形式で保存をします。

3-1.[ファイル]メニュー→[Web用に保存]を選択します。

3-2.保存形式をGIFにして、[保存]を選択すると完了です。

雑踏の中、ネオンのみが光るシネマグラフが完成しました。

スクランブル交差点や、雲、夜景など、様々な場所を動画で撮影してシネマグラフを作成してみてください。

PhotoshopでつくるGIFアニメ(全５回)を通して

みなさん、いかがだったでしょうか？本連載は、Photoshopを用いて、GIFアニメを作成する方法を５回に分けて解説してきました。タイムラインパネルの使い方から始まり、GIF形式の保存の仕方、動画をGIFに変換する方法、２つのフレームだけで簡単にアニメーションが作成できるトゥイーンの使い方、写真１枚からアニメーションが作れるパペットワープ、最後にはシネマグラフという手法を用いて、幻想的なGIFアニメを制作しました。少しでもGIFアニメ作りに貢献できれば嬉しいです。また、次回から、iPhoneで作るGIFアニメ、パペットワープで作るGIFアニメ、無料フォトレタッチツールのGIMPを用いたGIFアニメ、また、GIFMAGAZINEの使い方などの記事を連載していきますのでご期待ください。

「PhotoshopでGIFアニメを作る方法」(大野謙介 連載)
第１回 タイムラインパネルの使い方、GIF形式の保存方法
第２回 動画をGIFに変換する方法
第３回 トゥイーンの使い方(位置・不透明度・効果)
第４回 パペットワープで写真１枚でGIFアニメを作る方法
第５回 シネマグラフの作り方

クリエイター：大野謙介(@SeKai_SeiFuKu)

GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。Adobe Pinch Inにて「Photoshopで作るGIFアニメバナー」を連載
Follow @SeKai_SeiFuKu

シネマグラフの制作依頼はこちら

株式会社creative box

http://creative-box.in/
株式会社creativeboxはGIF・超短尺映像のプロダクション・エージェンシー。GIFアニメとは1秒~3秒ほどの超短尺動画のこと。スマホで見やすく、シェアされやすい動画表現方法です。芸術性・バズ拡散性・おもしろ・シネマグラフ・ラグジュアリーなど、各ジャンルに特化した作家と共にスマホ時代のコンテンツを制作・配信します。

株式会社creative box
〒103-0021 東京都中央区日本橋本石町4-4-20 三井第二別館 201
TEL：03-6262-5234
Mail：info@creativebox.co.jp
http://creative-box.in/