そこはかとなく好奇心を刺激するクリエイターの秘密基地。

そこはかとなく好奇心を刺激するクリエイターの秘密基地。

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

      2016/02/09

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

こんにちは、GIFMAGAZINEでデザイナーをしている大野謙介(@SeKai_SeiFuKu)です。本連載は、Photoshopを用いて、GIFアニメを作成する方法を5回に分けて解説します。タイムラインパネルの使い方、GIF形式の保存の仕方、動画をGIFに変換する方法、2つのフレームだけで簡単にアニメーションが作成できるトゥイーンの使い方、写真1枚からアニメーションが作れるパペットワープ、最後にはシネマグラフという手法を用いて、幻想的なGIFアニメを制作します。「PhotoshopでGIFアニメを作る方法」(大野謙介 連載)
第1回 タイムラインパネルの使い方、GIF形式の保存方法
第2回 動画をGIFに変換する方法
第3回 トゥイーンの使い方(位置・不透明度・効果)
第4回 パペットワープで写真1枚でGIFアニメを作る方法
第5回 シネマグラフの作り方

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

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

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

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

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

使用した素材ファイル

使用した素材ファイル

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

解説の流れ

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

1.動画を読み込む

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

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

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

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

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

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

この図では、わかりやすいように「背景(レイヤー1のコピー)」と名前を変更しています。
1-3.画面の中の動かない場所を作るために、レイヤー1を一度コピーします。

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

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

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

コピーができたら、次にレイヤー1〜レイヤー8の動く部分を指定していきます。まず、レイヤー1を選択しましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

creativebox

株式会社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/

 - PhotoshopでGIFアニメを作る方法, クリエイター, 大野謙介 , , ,

crem fbpage header
(いいね!で最新記事を毎日受け取れるみたいですよ)

あなたの好奇心を刺激する
コラム、ビジュアルビュース、GIFマンガ、海外映像作品紹介記事を毎日配信

more