Max_Ezaki氏自撮り_背景白

Max_Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

執筆:Daily GIF89a編集部(大野謙介)

この記事で理解できること(文章量:3分)

・作業時間15分ほどで、Photoshopを用いてGIFアニメを作ることができる。

・パペットワープ機能を用いて写真1枚で動きのあるアニメーションの制作方法を理解することができる。

・ぼかし(移動)を使うことで、疾走感のある動きを表現できる。

 

今回制作したGIFアニメ

Max_Ezaki氏の自撮り

どんな角度でも完璧。美しい自撮りの様子をアニメーションで表現してみた。誰しも得意な角度はあるものである。

 

 

今回は、PAKUTASO様のフリー素材を用いて、圧倒的に時間の無駄遣いPhotoshopチュートリアルを執筆する。

前回の大川竜弥氏の記事が非常に好評で、大川氏ご本人にもお読みいただいた。非常に嬉しいものである。

【前回の記事】大川竜弥氏の人物写真1枚から、自在な動きのGIFアニメを30分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

 

 

Web制作の現場で使える部分はおそらく無いであろう。本チュートリアルは呼吸すること以外することが無い程、時間がある方にお読みいただけると幸いだ。

 

使用した素材

今回は、フリー写真素材の「PAKUTASO」様で6月24日に公開された、現役ドイツ人ハーフのMax Ezaki氏(@Max_Ezaki)の写真をお借りした。非常に秀逸な表情。妖艶さすら感じさせるその所作。素材の提供感謝申し上げます。

Max_Ezaki氏自撮り1

引用元URL:http://www.pakutaso.com/20140605175post-4276.html

Max_Ezaki氏自撮り2

引用元URL:http://www.pakutaso.com/20140638175post-4275.html

 

制作手順

0.まず全体像の確認をする。最終的に完成するレイヤーは13レイヤーこれらを動かして、全体で29フレームの動画を制作した。

10077 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

0−1.背景

10078 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

背景レイヤーは「塗りつぶしツール」で白く全体を塗りつぶして完成である。

 

0−2.自撮り1レイヤー

10079 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】 自撮り1レイヤーは、自撮り画像の背景を「選択ツール」などで切り取ったら完了である。

 

0−3.自撮り1残像レイヤー

10080 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

自撮り1残像レイヤーは、自撮り1レイヤーを2回コピーし、「フィルター」「ぼかし」「ぼかし(移動)」を選択し、下図のように、角度を「0」、距離を「150」にしてOKをする。

余計な場所を消しゴムツールで消去し、完成。

ぼかし Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】
ぼかし 移動  Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

 

0−4.自撮り1フラッシュレイヤー

10081 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

自撮り1フラッシュレイヤーは、自撮り1レイヤーをコピーし、「フィルター」「描画」「逆光」を選択する。
スクリーンショット 2014 07 05 19 28 40 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】
光源を携帯の近く、明るさを「150」、レンズの種類を「35mm」、最後にOKを選択してフラッシュを浴びたような画像が完成。
スクリーンショット 2014 07 05 19 28 58 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

0−5.自撮り2レイヤー

スクリーンショット 2014-07-05 19.37.44自撮り2レイヤーは、自撮り1レイヤーをコピーし、「編集」「変形」「水平方向に反転」を選択する。

スクリーンショット 2014 07 05 19 39 43 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

反転した後、「編集」「パペットワープ」で下図のようにピンを打ち、「頭」と「腕」を動かす。

スクリーンショット_2014-07-05_19_40_23

0−6.自撮り2残像レイヤー

スクリーンショット 2014-07-05 19.37.55自撮り2残像レイヤーは、自撮り2レイヤーをコピーし、自撮り1残像レイヤー同様に、「フィルター」「ぼかし」「ぼかし(移動)」を選択する。

ぼかし Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】
角度を「0」、距離を「150px」に選択し、「OK」をクリックして、余分な部分を消しゴムツールで消去する。

ぼかし 移動  Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

 

0−7.自撮り2フラッシュレイヤー

スクリーンショット 2014-07-05 19.38.04

自撮り2フラッシュレイヤーは、自撮り2レイヤーをコピーし、「フィルター」「描画」「逆光」を選択する。

スクリーンショット 2014 07 05 19 28 40 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

光源を携帯の近く、明るさを「150」、レンズの種類を「35mm」、最後にOKを選択してフラッシュを浴びたような画像が完成。

 

0−8.自撮り3レイヤー

10085 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

自撮り3レイヤーは、自撮り1レイヤーをコピーし、「編集」「変形」「水平方向に反転」を選択するだけで完成。

スクリーンショット 2014 07 05 19 39 43 Max Ezaki氏の人物写真1枚から、自在な動きのGIFアニメを15分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

0−9.自撮り3残像レイヤー

10086 class=

自撮り3残像レイヤーは、自撮り3レイヤーをコピーし、角度を「60」距離を「150」にし、「OK」を押す。

スクリーンショット_2014-07-05_19_53_04

消しゴムツールを選択する。

スクリーンショット_2014-07-05_19_55_12

残像に必要な、「頭」と「腕」部分以外は消しゴムツールで消去していく。

スクリーンショット_2014-07-05_19_55_20

 

0−10.自撮り3フラッシュレイヤー

10087 class=

自撮り3フラッシュレイヤーは、自撮り3レイヤーをコピーし、「フィルター」「描画」「逆光」を選択する。

スクリーンショット_2014-07-05_19_28_40

光源を携帯の近く、明るさを「150」、レンズの種類を「35mm」、最後にOKを選択してフラッシュを浴びたような画像が完成。

 

0−11.撮影後の確認レイヤー

10088 class=

選択ツールで、「撮影後の確認」レイヤーのMax Ezaki氏の画像を切り取る。

選択ツールで撮影後の確認レイヤーを切り取る。

スタンプツールで、「眼鏡」「カード」「スマホについているSquare」を削除して完成です。

スクリーンショット_2014-07-05_20_08_15 スタンプツールで、カードとsquareを削除

0−12.撮影後の確認残像レイヤー

10089 class=

撮影後の確認残像レイヤーは、「撮影後の確認」レイヤーをコピーし、角度を「60」距離を「150」にし、「OK」を押す。

スクリーンショット_2014-07-05_19_53_04

消しゴムツールを選択する。

スクリーンショット_2014-07-05_19_55_12

残像に必要な、「頭」と「腕」部分以外は消しゴムツールで消去していく。

スクリーンショット_2014-07-05_19_55_20

 

0−13.撮影後の確認うなずきレイヤー

10090 class=

「撮影後の確認」レイヤーをコピーし、「編集」「パペットワープ」を選択する。体が動かないようにピンを打ち、あごをわずかに下にうごかすと、頷いている様子が完成する。

スクリーンショット_2014-07-05_20_15_53

1.フレームをコピーし、制作したレイヤーを以下の順番に表示する。

スクリーンショット 2014-07-05 21.14.43

  1. 自撮り1残像
  2. 自撮り1
  3. 自撮り1フラッシュ
  4. 背景
  5. 自撮り1フラッシュ
  6. 自撮り2残像
  7. 自撮り2
  8. 自撮り2フラッシュ
  9. 背景
  10. 自撮り2フラッシュ
  11. 自撮り3残像
  12. 自撮り3
  13. 自撮り3フラッシュ
  14. 背景
  15. 自撮り3フラッシュ
  16. 撮影後の確認残像
  17. 撮影後の確認
  18. 撮影後の確認うなずき
  19. 撮影後の確認
  20. 撮影後の確認うなずき
  21. 撮影後の確認
  22. 撮影後の確認
  23. 撮影後の確認
  24. 撮影後の確認
  25. 撮影後の確認
  26. 撮影後の確認
  27. 撮影後の確認
  28. 撮影後の確認
  29. 撮影後の確認

 

完成したGIFアニメ

Max_Ezaki氏の自撮り

 

制作を終えて

Max_Ezaki様、素晴らしい素材、誠にありがとうございました。読者の皆様、いかがだっただろうか。ぜひPhotoshopのパペットワープを用いてGIFアニメーションを制作してみてはいかがだろうか。また作成した作品はGIFMAGAZINEに投稿するなどして、世界中のクリエイターに見てもらったり、GIFMAGAZINE TVで流してみてはどうだろうか。多くの方の創造性が発揮されるきっかけとなれば幸いだ。

 

【前回の記事】大川竜弥氏の人物写真1枚から、自在な動きのGIFアニメを30分で簡単に作る方法【Photoshopパペットワープ機能の使い方】

Photoshopパペットワープ機能により激しく石を投げる大川氏2

 

当メディアでは、様々なGIFアニメの制作方法や、映像業界を初め多くの方にインタビュー記事を掲載している。feedlyにRSS登録して、更新をチェックしていただけると幸いだ。

【RSS登録リンク】

http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fgif89a.net%2Ffeed%2F

 

執筆:Daily GIF89a編集部(大野謙介)

 

【GIFMAGAZINE】http://gifmagazine.net/

GIFアニメ好きのためのGIF作品投稿・共有プラットフォーム

GIFMAGAZINE_appstore_googleplay

 

GIFMAGAZINEアプリ版のダウンロードはこちら

 

android appstore
iOS:https://itunes.apple.com/ja/app/gifmagazine-animated-gif-magazine/id734489230?l=ja&mt=8
Android:https://play.google.com/store/apps/details?id=jp.createbox.gifmagazine

GIFMAGAZINE