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

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

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

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

・作業時間30分で人物写真を自在に動かすアニメーションを作成することができます。

・写真を自由自在に動かせる「Photoshopパペットワープ機能」の使い方を理解できます。

Photoshopパペットワープ機能により激しく石を投げる大川氏2
今回作成した「とてつもないキレで水切りをする大川竜弥氏。」素材の提供感謝申し上げます。

【人物写真を自在に動かしてアニメーションを制作する。】

ハリーポッターの魔法新聞はご存知だろうか?新聞の写真が自由に動き出すあれである。今回、すでにある写真の続きをPhotoshopのパペットワープ機能でGIFアニメーションにしたいと思う。つまるところ今回は人物写真を自在に動かしてGIFアニメを制作する方法に挑戦する。あえて言おう。「動画で取ればいいのでは。」と思考してはならない。写真をわざわざ加工してアニメーションにする。その徒労とも呼べるプロセスが芸術に深みを与えるのである。もう一度言おう。その徒労とも呼べるプロセスが芸術に深みを与えるのである。可能な限り多くの方がチャレンジできるよう、素材の撮影や、特段高度な技術が技術が必要そうな部分を少なくし、解説をする。

 

【用意するもの】

・写真素材

・Photoshop(CS5以上の環境ならパペットワープ機能を使うことができる。)

 

【撮影した素材】

PACTASO様 川で水切りをする大川氏の写真をお借りした。

■ダウンロード http://www.pakutaso.com/20131003274post-3323.html

 水切りをする大川竜弥氏

 

 

【作成したパラパラ漫画GIFアニメ】

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

 ゆったりと振り上げる拳、振り上げたタメ動作、そして勢い良く振り切る様子を表現する。

【制作手順】

1.photoshopを起動し、素材画像を読み込む

1.photoshopを起動し、素材画像を読み込む

2.選択ツールなどを用いて大川氏を背景から切り抜く

2.選択ツールなどを用いて大川氏を背景から切り抜く

3.切り抜くことができたらコピーをして貼り付ける、このレイヤーを「1」を名づけた。

3.切り抜くことができたらコピーをして貼り付ける、このレイヤーを「1」を名づけた。

4.背景は選択ツールで選択したあと、「塗りつぶし」「コンテンツに応じる」を選択し、クリックする。

4.背景は選択ツールで選択したあと、「塗りつぶし」「コンテンツに応じる」を選択し、クリックする。

5.背景から切り抜いた大川氏レイヤー「1」を12回コピーする、8は8-1,8-2と上記のようにフレームごとに命名した。

5.背景から切り抜いた大川氏レイヤー「1」を12回コピーする、8は8-1,8-2と上記のようにフレームごとに命名した。

6.レイヤー「1」から順に動きをつけていくために、「編集」「パペットワープ」を選択する。

6.レイヤー「1」から順に動きをつけていくために、「編集」「パペットワープ」を選択する。

7.網目で関節にあたる部分をクリックし、ピンを打つと人間らしい動きとなる。

7.網目で関節にあたる部分をクリックし、ピンを打つと人間らしい動きとなる。

8.最終的に8-1レイヤーまで段階的に腕があがるようにパペットワープで腕の高さを調整する。

8.最終的に8-1レイヤーまで段階的に腕があがるようにパペットワープで腕の高さを調整する。

9.レイヤー8-1,8-2は腕のタメを表現する

9.レイヤー8-1,8-2は腕のタメを表現する

10.8-1,8-2は手首周辺のみをパペットワープで若干ぶれさせることによりタメ動作を表現できる。

10.8-1,8-2は手首周辺のみをパペットワープで若干ぶれさせることによりタメ動作を表現できる。

11.レイヤー9は振り下ろし初め、若干手首をかえしてしなる腕を表現する。

11.レイヤー9は振り下ろし初め、若干手首をかえしてしなる腕を表現する。

12.レイヤー10は右足を上げ、いきよいよく振りぬく動作を表現します。

12.レイヤー10は右足を上げ、いきよいよく振りぬく動作を表現します。

13.レイヤー11はゆったりとしたフォロースルーと後ろにもどる体重移動を表現します。

13.レイヤー11はゆったりとしたフォロースルーと後ろにもどる体重移動を表現します。

14,レイヤー12はまた振り上げを始めるための予備動作を表現します。これでパペットワープの作業は終了です。

14,レイヤー12はまた振り上げを始めるための予備動作を表現します。これでパペットワープの作業は終了です。

15.次に振りぬきやフォロースルーでのダイナミックさを表現するために、残像をつけていく。レイヤー9,10,11,12をコピーして好みの残像に仕上げる。

15.次に振りぬきやフォロースルーでのダイナミックさを表現するために、残像をつけていきます。レイヤー9,10,11,12をコピーして好みの残像に仕上げて行きます

16.今回、直線的な残像は「フィルター」「ぼかし」「ぼかし(移動)」で生成した。

16.今回、直線的な残像は「フィルター」「ぼかし」「ぼかし(移動)」で生成した。

17.円形の残像は「フィルター」「ぼかし」「ぼかし(放射状)」を選択して生成をしていった、

17.円形の残像は「フィルター」「ぼかし」「ぼかし(放射状)」を選択して生成をしていった、

18.レイヤー9に「ぼかし(移動)」をかける。

18.レイヤー9に「ぼかし(移動)」をかける。

19.10-残像レイヤーに放射状のぼかしをかける。

19.10-残像レイヤーに放射状のぼかしをかける。

20.11-残像レイヤーに放射状のぼかしをかける

20.11-残像レイヤーに放射状のぼかしをかける

21.迫力のある振りぬきにするため、放射状の残像だけでなく、直線的な残像をつける。ため、「指先ツール」で残像レイヤーを右から左へなぞる

21.迫力のある振りぬきにするため、放射状の残像だけでなく、直線的な残像をつける。ため、「指先ツール」で残像レイヤーを右から左へなぞる

22.12-残像レイヤーも放射状のぼかしをかける

22.12-残像レイヤーも放射状のぼかしをかける

23.「ウィンドウ」「アニメーション」でアニメーションウィンドウを立ち上げ、フレームごとに、1レイヤーずつ表示する。

23.「ウィンドウ」「アニメーション」でアニメーションウィンドウを立ち上げ、フレームごとに、1レイヤーずつ表示する。

24.レイヤー8-1,8-2は複数フレームでくりかえし表示することで腕のタメを表現する ことができる。

24.レイヤー8-1,8-2は複数フレームでくりかえし表示することで腕のタメを表現する ことができる。

25.最終的にこのような状態になる。

25.最終的にこのような状態になる。

26.「ファイル」「Webおよびデバイス用に保存」をクリックする。

26.「ファイル」「Webおよびデバイス用に保存」をクリックする。

27.保存形式をGIFにして保存する。

27.保存形式をGIFにして保存する。
【完成:大川氏の全力の水切りを拝見することができた。】

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

 

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

 

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

【RSS登録リンク】

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

 

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

GIFMAGAZINE