カテゴリー別アーカイブ: Photoshop

Photoshop_CC_icon

Photoshopで動画をGIFに変換する方法。

執筆:Daily GIF89a編集部

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

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

 

今回制作したGIFアニメ

photoshopで動画をgifにする

作業時間自体は2,3分である。

 

制作手順

1.photoshopを起動し、「ビデオフレームからレイヤー」を選択する。

10152 class=

2.読み込む範囲を指定する。今回は、容量を軽くするため「頻度制限」を「6フレームおき」にすることで、フレーム数を少なくした。

10153 class=

3.「ウィンドウ」「アニメーション」でタイムラインを表示し、余分なフレームを削除する。

10154 class=

4.適切なフレームのみを残すことができた。

10155 class=

5.「ファイル」「Webおよびデバイス用に保存」を選択する。

10156 class=

6.保存形式をGIFにして「保存」を選択。

10157 class=

完成したGIFアニメ

photoshopで動画をgifにする

 

制作を終えて

After Effectsなどでこだわりの動画を作成しているユーザーもいるだろう。GIFに変換して、TwitterやGIFMAGAZINE,Pixivなどに投稿して遊んでみてはいかがだろうか。

 

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

chatch

「つながらないNO.1へ・・」広告バナーGIFをつくろう。【GIFアニメ制作】

執筆:Daily GIF89a編集部(ktaro)

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

・作業時間10ほどで、photoshop等の、フォトレタッチツールを用いてGIFアニメを作ることができる。

・動く広告バナーのつくりかたを理解することができる。

 

7月に突入した。日没もそろそろ午後7時台に突入したのではないか?夏がどんどん近づく。そういえば、今年の4月ごろは、ちまたで今年は冷夏になると騒いでいたが、一体、その予報はどこに消えたのか?普通に暑い。

さて今回は、広告バナーGIFをつくる為の記事である。

今回制作したGIFアニメ

つながらないバンド

みんな、近所の至る所にようじを刺そう。

 

使用した素材

normal_elk1

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

雄々しく猛々しいツノが、いかにも電波ビンビンにみえるという理由から鹿をチョイスした。

制作手順

1新規作成する。

2文章を書こう!文字の大きさを使い分けると、バナーっぽく仕上がる。

3新しくレイヤーを作り、動かす画像を配置しよう(私の場合は鹿にした。)

4先ほど配置したレイヤー(素材画像)を複製。次に、少しずらして配置しよう。

5複製してずらした画像を、レイヤーマスクで効果をつける。背景が黒いのでシルバーにした。

6タイムラインを開く

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

7複製したレイヤー→元の画像、それぞれ表示されているタイムラインを二枚作ろう。

8トゥィーンパネルを表示させる。

20007

9トゥィーンを「次のフレーム」にして、追加するフレームを「5」にして→OK

10トゥイーンを使うと、二つのフレームの間の動作を補完してくれる。この機能を使い好きなだけフレームを足してしまおう。

11最終的に、「最後のフレーム」を選択→OKをクリックで、タイムライン作業を終えるとアニメーションが円滑な動きに見える。

12タイムラインが完成したら、「ファイル」→「WEB用に保存」をクリック。拡張子をGIFに選択して保存

完成したGIFアニメ

つながらないバンド

 

制作を終えて

みなさん、つまようじを電波が悪い所にさす活動をひとつよろしくお願いしたい。ようじバンド

 

執筆:Daily GIF89a編集部(ktaro)

 

【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で稲妻・雷を超簡単に作る方法。【GIFアニメの作り方。】

執筆:Daily GIF89a編集部

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

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

・写真素材を使わずPhotoshopの機能だけで「落雷の様子」を表現する。

 

今回制作したGIFアニメ

雷の表現

フィルターの「雲模様2」、そして色調補正の「レベル補正」を用いて非常に簡単に雷を表現できる。

 

使用した素材

雲_小

PAKUTASO/ぱくたそ 様(フリー写真素材)

引用元URL:http://www.pakutaso.com/20140125023post-3740.html

 

制作手順

1.雲画像を読み込み、「雲レイヤー」と名前を変更した

10103 class=

2,雲から雷が落ちるようにするため、「編集」「変形」「垂直方向に反転」を選択する。

10104 class=

3.新規レイヤーを作り、「雷1」と名前を変更する。

10105 class=

4.「グラデーションツール」を選択して、「黒から白」にグラデーションするようにする。

10106 class=

5.左から右にグラデーションをかけた。

10107 class=

6.「フィルター」「描画」「雲模様2」を選択する。

10108 class=

7.「イメージ」「色調補正」「レベル補正」を選択する。

10109 class=

8.チャンネルの「入力レベル」の黒、灰色、白のスライダーを任意に動かして雷のような描写を作る。

10110 class=

9.「イメージ」「色調補正」「階調の反転」を選択する。

10111 class=

10.レイヤーの描画モードを「スクリーン」に変更する。

10112 class=

11.「イメージ」「色調補正」「色相・彩度」を選択する。

10113 class=

12.「色相」、「彩度」のスライダーを左右に動かして、お好みの雷の色に変更する。「色彩の統一」にチェックを入れる。

10114 class=

13−1.雷のバリエーションを増やすため、完成した「雷1」レイヤーを3回コピーして、「雷2」「雷3」「雷4」と名前を変更する。

10115 class=

13−2.「雷2」レイヤーと「雷4」レイヤーに「垂直方向に反転」をかける。

10116 class=

13−3.「雷3」レイヤーと「雷4」レイヤーに「水平方向に反転」をかける。

10117 class=

14.4つのレイヤーがバラバラな雷を表現している。

10118 class=

15.雷が落ちた時の光を表現するため、レイヤーを新規作成し、「白画面」と名前を変更した。

10119 class=

16.「塗りつぶしツール」を選択し、描画色を白にして、レイヤーを塗りつぶす

10120 class=

17.フレーム1は「雲レイヤー」のみを表示する。

10121 class=

18.フレーム2は任意の雷レイヤーを表示する。

10122 class=

19.フレーム3は「白画面」レイヤーを表示する。

10123 class=

20.フレーム4は、雷が消える様子を表現するため任意の雷レイヤーの不透明度を「60%」にする。

10124 class=

21.フレーム5は、任意の雷レイヤーの不透明度を「0%」にする。

10126 class=

22.今回制作した例では、雷の数とタイミングを調整し、20フレーム分のアニメーションとなった。

10128 class=

23.「ファイル」「Webおよびデバイス用に保存」を選択

10129

24.保存形式を「GIF」にして、「保存」をクリックする。

10130

完成したGIFアニメ

雷の表現

 

制作を終えて

今回は、雷の画像素材を用いずに、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

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