タグ別アーカイブ: パペットワープ

パペットワープで作る鉄拳風GIFアニメーション

「手書きパラパラ漫画を楽して作りたい!」【Photoshopパペットワープ機能の使い方】

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

パペットワープで作る鉄拳風GIFアニメーション

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

・作業時間10分で手書きのアニメーションを作成することができます。

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

パペットワープ機能でこのように写真を自由に動かすアニメーションが作成できます。(バルタン星人をこっそりなぐるウルトラマン)

 

【鉄拳のような手書きパラパラ漫画を楽して作りたい!】

鉄拳氏ような手書きのパラパラ漫画を作成したいと思ったことは無いだろうか。

ここまでのフレーム数を描ききるのは並みの体力と技術ではできないであろう。楽して感動を得ようなど世の中甘くないのである。しかし、今回は世の中を甘くする方法を解説する。手描きのパラパラ漫画を作成してみたいという方も多いはずだ。今回は、Photoshopのパペットワープという機能を用いて、写真1枚で、絵がどれだけ下手でも作成できるパラパラ漫画GIFアニメの作り方をご紹介したい。作業時間は10分ほどで、動きのあるアニメーションを作成することができる。

【用意するもの】

・紙

・鉛筆

・カメラ

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

 

【撮影した素材】

こちらからダウンロードしてください。

正面を向いた人型の絵をphotoshopに読み込んでパペットワープで動かす

 

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

photoshopパペットワープで簡単手書きパラパラ漫画を作る。

 

【作成手順】

1.紙と鉛筆とカメラとPhotoshopを準備する。 紙と鉛筆とカメラで作るパラパラ漫画GIF

 

2.紙に人の絵を描く。

正面を向いた人型の絵をphotoshopに読み込んでパペットワープで動かす

 

3.Photoshopに取り込む

3.Photoshopに取り込む

 

 

4.人を選択ツール等で切り抜く

4.人を選択ツール等で切り抜く

 

5.人レイヤーをコピーして貼り付ける

5.人レイヤーをコピーして貼り付ける

 

 

6.背景レイヤーを選択し、矩形選択ツールで人型部分を選択し、右クリックで「塗りつぶし」を選択する。

6.背景レイヤーを選択し、矩形選択ツールで人型部分を選択し、右クリックで「塗りつぶし」を選択する。

 

7.「コンテンツに応じる」を選択し、「OK」を押す

7.「コンテンツに応じる」を選択し、「OK」を押す

 

8.綺麗に塗りつぶすことができたことを確認

8.綺麗に塗りつぶすことができたことを確認

 

9.なめらかなジャンプにするため人レイヤーを3回コピーする

9.なめらかなジャンプにするため人レイヤーを3回コピーする

 

10.「編集」「パペットワープ」を選択する

10.「編集」「パペットワープ」を選択する

 

11.人レイヤーをクリックするとピンが打てるようになる

11.人レイヤーをクリックするとピンが打てるようになる

 

12.関節にピンを打つことで人間らしい動きが表現できる。

12.関節にピンを打つことで人間らしい動きが表現できる。

 

 

13.人-1 しゃがんだ人になるようピンを打ちドラッグしてこのような形にする。

12.人-1 しゃがんだ人になるようピンを打ちドラッグしてこのような形にする。

 

14.人-2 飛び上がる瞬間のためそのまま

13.人-2 飛び上がる瞬間のためそのまま

 

15.人-3 ジャンプ途中で上がる膝や腕を表現

15.人-3 ジャンプ途中で上がる膝や腕を表現

 

16.人-4 膝の曲げや腕の伸ばしを表現する。

16.人-4 膝の曲げや腕の伸ばしを表現する。

 

17.人-1,2,3,4を移動ツールで任意の高さに配置する。

17.人-1,2,3,4を移動ツールで任意の高さに配置する。

 

18.人-1,2,3,4をコピーする

18.人-1,2,3,4をコピーする

 

19.コピーしたレイヤーを並べ替える。

19.コピーしたレイヤーを並べ替える。

 

 

20.「ウィンドウ」「アニメーション」でアニメーションウィンドウを起動する。

20.「ウィンドウ」「アニメーション」でアニメーションウィンドウを起動する。

 

21.1フレームごとに下からレイヤーを表示、非表示を選択してジャンプしているようにする

21.1フレームごとに下からレイヤーを表示、非表示を選択してジャンプしているようにする

 

22.全8フレーム分繰り返す

22.全8フレーム分繰り返す

 

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

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

 

24.保存形式を「GIF」にして保存

24.保存形式を「GIF」にして保存

 

【完成:いつかは鉄拳。パペットワープで手書きパラパラ漫画GIFアニメが作成できた。】

photoshopパペットワープで簡単手書きパラパラ漫画を作る。

 

いかがだっただろうか。手書きの絵に自信がない方も多いはずだ、ぜひPhotoshopのパペットワープを用いて手書きパラパラ漫画を作成して友達に自慢してみてはいかがだろうか。また作成した作品はGIFMAGAZINEに投稿するなどして、世界中のクリエイターに見てもらったり、GIFMAGAZINE TVで流してみてはどうだろうか。多くの方の創造性が発揮されるきっかけとなれば幸いだ。

 

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

10003

画像のワニを、生きたワニにする唯一の方法【Photoshopパペットワープ機能で超簡単GIFアニメ】

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

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

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

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

 

今回制作したGIFアニメ

小鳥の脱出

ワニから脱出するその勇敢な姿はさながらインディジョーンズ。

 

使用した素材

 

 ワニ

引用元URL:https://www.flickr.com/photos/54899851@N00/378187611

※flickrにてロイヤリティフリーの画像をお借りした。

 

小鳥
引用元URL:http://www.adigitaldreamer.com/gallery/displayimage.php?album=3&pid=495#top_display_media

 

 

 

制作手順

1.画像素材を読み込む

10001

2.背景レイヤーとワニレイヤーに分けるために、ワニを選択ツールで選択した後、右クリックで「コンテンツをぬりつぶす」で背景のみにする。

10002

3.ワニレイヤー、背景レイヤーにわけることができた。

10003

4.ワニレイヤーを4回コピーして、ワニA顎奥、ワニA、ワニA+、ワニB、ワニB+と命名する

10004

5.ワニA顎奥レイヤーは画像の上顎と下顎のつなぎを切り取った画像である。パペットワープで口を閉じる時に不要だからである。

10005

6.ワニAレイヤーは加工しない。

10006

7.ワニA+レイヤーは、ワニAレイヤーに「フィルター」「ぼかし」「ぼかし(放射状)」を適用する。

10007

8.「編集」「パペットワープ」を選択する。

10008

9.図のようにピンがうてるようになる。

10009

10.ピンを打ち、ワニの口を閉じる。

10010

11.ワニBレイヤーが完成

10011

12.ワニB+レイヤーは閉じるときの残像を表現する。ワニA+レイヤーと同様に、「フィルター」「ぼかし」「ぼかし(放射状)」を選択する。

10012

13.素材は全て完了、「ウィンドウ」「アニメーション」を起動

10013

14.今回の作例では、鳥のレイヤーを動かすことで、ワニの口の開閉をよりリアルに仕上げた。

 

10014

ワニA
ワニA
ワニA+
ワニA+
ワニB
ワニB
ワニB+
ワニB+

 

 

15.アニメーションタイムラインでワニの開閉を任意に設定する。

10015

16.「ファイル」「Webおよびデバイス用に保存」を選択し、保存形式を「GIF」にして保存する。

10016

完成したGIFアニメ

小鳥の脱出

 

制作を終えて

今回は、ワニの口を開閉するという形でパペットワープを活用してみた。写真1枚で楽しめるアニメーションを制作してみてはいかがだろうか。

またパペットワープに関しては、本メディアでいくつか解説をしているので参考にしていただきたい。

 

「鉄拳っぽい手書きパラパラ漫画を楽して作りたい!」【Photoshopパペットワープ機能の使い方】

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

長すぎる首。謎の鳥類を創造する。【Photoshopパペットワープ機能の使い方&GIFの作り方】

 

 

執筆: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

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編集部(大野謙介)