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

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

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

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

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

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

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

【用意するもの】

・紙

・鉛筆

・カメラ

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

【撮影した素材】

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

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

【作成手順】

１．紙と鉛筆とカメラとPhotoshopを準備する。 

２．紙に人の絵を描く。

３．Photoshopに取り込む

４．人を選択ツール等で切り抜く

５．人レイヤーをコピーして貼り付ける

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

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

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

９．なめらかなジャンプにするため人レイヤーを３回コピーする

１０．「編集」「パペットワープ」を選択する

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

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

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

１４．人-2　飛び上がる瞬間のためそのまま

１５．人-3　ジャンプ途中で上がる膝や腕を表現

１６．人-4　膝の曲げや腕の伸ばしを表現する。

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

１８．人-1,2,3,4をコピーする

１９．コピーしたレイヤーを並べ替える。

２０．「ウィンドウ」「アニメーション」でアニメーションウィンドウを起動する。

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

２２．全８フレーム分繰り返す

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

２４．保存形式を「GIF」にして保存

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

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

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

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

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

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

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

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

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

【用意するもの】

・写真素材

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

【撮影した素材】

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

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

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

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

【制作手順】

１．photoshopを起動し、素材画像を読み込む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

１８．レイヤー9に「ぼかし(移動)」をかける。

１９．10-残像レイヤーに放射状のぼかしをかける。

２０．11-残像レイヤーに放射状のぼかしをかける

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

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

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

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

２５．最終的にこのような状態になる。

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

２７．保存形式をGIFにして保存する。

【完成：大川氏の全力の水切りを拝見することができた。】

いかがだっただろうか。ぜひ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編集部(大野謙介)