タグ別アーカイブ: photoshop

After Effectsの動画をGIMPでGIFアニメに変換する方法

After Effectsの動画をGIMPでGIFアニメに変換する方法【GIFアニメの作り方】

After Effectsの動画をGIMPでGIFアニメに変換する方法
After Effectsの動画をGIMPでGIFアニメに変換する方法

 

After Effects CS5以降ではGIFアニメをレンダリングすることができない。今回は無料のフォトレタッチツールのGIMPを用いて、After Effectsで作りこんだ動画をGIF化する方法をご紹介する。要点は以下の3STEPである。

 

STEP1.After Effectsでjpeg形式でレンダリングする。

STEP2.GIMPでレンダリングしたjpegファイルを全てレイヤーとして開く。

STEP3.GIF最適化をしてエクスポートする。

 

※ちなみにAdobe公式のAfter Effectsヘルプサイトでは以下のように指示がある。 Adobeの公式After Effectsヘルプサイトに記載されたGIFレンダリングができない旨

まずQuickTimeムービーを「ンダリング」するらしい。謎は深まる。今回は公式とは若干ことなり、jpegを1枚1枚レイヤーとして読み込んで、GIFにまとめる形で作成をしている。それでは以下に実際の作業を説明する。

 

【今回作成したGIF】

After-EffectsからGIFを作る
After-EffectsとGIMPからGIFを作る

 

【After Effectsの動画をGIFアニメ化する方法】

1.After Effectsで動画を作成する。

1

 

 

2.「コンポジション」「レンダーキュイーに追加」をクリック

2

 

 

3.「出力モジュール設定」で「JPEGシーケンス」を選択しする。

3

 

 

4.任意のサイズを指定し、「OK」を押す。
4

 

 

5.「出力先」は任意の新しいフォルダを作成して保存先に指定する。

5

 

 

6.「レンダリング」をクリックする。

6

 

7.GIMPを起動する。

7

 

8.「ファイル」「レイヤーとして開く」を選択する。

8

 

 

9.アフターエフェクトで保存したファイルを全て指定し、「開く」をクリックする。

9

 

 

9.全てのjpegが読み込まれてレイヤーごとに表示される。

12

 

10,「フィルター」「アニメーション」「再生」をクリックする。

13

 

 

11.「Play」をクリックするとGIFが再生される。確認が完了したら、プレビューのウィンドウを閉じる。

14

 

 

12.「フィルター」「アニメーション」「GIF用最適化」をクリックする。

15

 

 

13.GIF用最適化すると新たなウィンドウが立ち上がる。16

 

 

14.「ファイル」「Export As」をクリックする。19

 

 

 

15.アニメーションのウィンドウで「アニメーションとエクスポート」「無限ループ」「全フレームのディレイ&フレーム処理」にチェックしエクスポートをする。

スクリーンショット 2014-02-25 2.08.39

 

 

   16.完成

After-EffectsからGIFを作る
After-EffectsからGIFを作る

 

いかがだったであろうか。After Effectsで非常に高度な動画作成しているユーザーは多いだろう。今回のような簡単な方法で今まで作成した動画をGIFにして遊ぶことができる。ぜひAfter EffectsとGIMPをもちいてGIFライフを楽しんでもらいたい。

After-Effectsの動画をGIF化する方法

After Effectsで作ったこだわり動画をPhotoshopでGIFアニメにする方法【GIFアニメの作り方】

After-Effectsの動画をGIF化する方法

After Effects CS5以降ではGIFアニメをレンダリングすることができない。今回はPhotoshopを用いて、After Effectsで作りこんだ動画をGIF化する方法をご紹介する。要点は以下の3STEPである。

 

STEP1.After Effectsで「QuickTime」mov形式でレンダリングする。

STEP2.Photoshopでレンダリングした「◯◯.mov」のmovファイルを開く。

STEP3.「ファイル」「Webおよびデバイス用に保存」で「GIF」を選んで保存

 

※ちなみにAdobe公式のAfter Effectsヘルプサイトでは以下のように指示がある。 Adobeの公式After Effectsヘルプサイトに記載されたGIFレンダリングができない旨 公式でも同様な作業をおすすめしているようだ。それでは以下に実際の作業を説明する。 【今回作成したGIF】

After-Effectsの動画をGIFアニメ化
After-Effectsの動画をGIFアニメ化

【After Effectsの動画をGIFアニメ化する方法】 1.After Effectsで動画を作成する。1     2.「コンポジション」「レンダーキューに追加」をクリック2     3.「出力モジュール」をクリックし、形式を「QuickTime」にする。今回はtumblrやGIFMAGAZINEにアップロードしやすいように横幅を400pxに変更した。3     4.出力先を指定し、「レンダリング」をクリックし、レンダリングを開始する。4     5.Photoshopを起動する。Photoshopを起動する。     6.Photoshopで「ファイル」「開く」をクリック。
18
        7.先ほどのmovファイルをクリックする。5   8.movファイルを開くとこのようになる。スクリーンショット 2014-02-23 23.47.43   9.「ファイル」「Webおよびデバイス用に保存」をクリックする。 20     10.「GIF」、「アニメーションのループオプション」を【一度】か【無限】を選択し、保存を押す。 21     11.任意の名前を付けて保存する。22     12.完成

After-Effectsの動画をGIFアニメ化
After-Effectsの動画をGIFアニメ化

いかがだったであろうか。After Effectsで非常に高度な動画作成しているユーザーは多いだろう。今回のような簡単な方法で今まで作成した動画をGIFにして遊ぶことができる。ぜひPhotoshopをもちいてGIFライフを楽しんでもらいたい。

バカ猫

【衝撃】あえて読込時間をイライラさせるローディングGIFを作成してみた。【GIFアニメの作り方】

 今回はphotoshopを使い5分でローディングGIFを作成する。ローディングGIFとは画像の読込時間での離脱を防ぐ。UXを研究しつくした先人の知恵である。グルグル回る画像を見るだけで数秒の時を忘れることができる。

ローディングのイライラを軽減。
ローディングのイライラを軽減。

 

今回はあえて読込時間をイライラさせるローディングGIFを作成する。時代逆行の革新的なUXである。挑戦的なその試みは新たな芸術を確立する人間の営みのそれと何ら変わりはないのである。時代が早すぎてついていけない挑戦的なその試みは死んでから認められる芸術家さながらである。近代芸術家に入るゴッホはきっと、評価されようがされまいが関係なかったのである。「芸術家」は自分が描きたいから、自分のために描く。貴族や教会に評価されることが至高ではない。高尚で利己的な精神がそこにある。他人の評価は副産物でしかない。そんな深い意味がこのGIFにあったかは定かではない。

 

【使用した素材】

以前、ぜんぶ雪のせいだ。Photoshopで10分、簡単GIFアニメの作り方【位置&透明度テクニック】こちらの記事で使用したバカ猫を用いる。

JRのパロディ。ぜんぶ雪のせいだのGIF
そう、ぜんぶ雪のせいにしてしまえばいいのだ。

 

 

これでもかとイライラさせる表情である。

バカ猫
むき出しの目玉は乾燥を続ける。

 

 

【作成手順】

1.「ファイル」「新規作成」でキャンパスサイズを2000px * 2000pxで作成した。そう、サイズがでかいのである。読込時間をあえてたっぷりとる。それがイライラの源泉である。

スクリーンショット 2014-02-22 8.27.18

 

 

2.キャンバスにバカ猫をドロップする。むき出しの白目。すでにイラっとしたのではなかろうか。2

 

3.レイヤーをコピーした。2匹のバカ猫が見つめるその先は……白目だから見つめてはいないのである。

3

 

 

4.下側のバカ猫を「編集」「変形」「180°回転」で回転させる。そう、仮に逆立ちをして閲覧するユーザーのため、きちんと逆さまにも対応するのである。素晴らしきUXである。4

 

 

5.2つのレイヤーを結合する。そう、バカ猫2匹を融合するのである。5

 

 

6.結合完了である。6

 

 

7.バカ猫×2レイヤーを3回コピーする。7

 

 

8.移動ツール(v)でレイヤーの角をつかんで回転させる。さながら分身の術である。伊賀の忍者気取りだ。8

 

 

9.コピーしたレイヤーを全て回転させて、8方向全てにバカ猫を配置した。どこから来ても安心のイライラ度である。9

 

 

10.背景を削除した。この作業は単純に忘れていただけである。
10

 

 

11.全てのバカ猫レイヤーを結合する。魔法陣の完成である。11

 

 

12.「レイヤー効果」をクリックする。

13

 

 

13.「グラデーションオーバーレイ」「グラデーション」をクリックする。バカ猫が見えなくなるひとときである。14

 

 

14.「描画色から透明に」をクリックする。8匹のバカ猫が見え隠れする絶妙な演出である。15

 

 

15.黒よりも白である。16

 

 

16.このバカ猫魔法陣レイヤーを7回コピーする。19

 

 

17.全てのレイヤーのグラデーションの角度を変更する。レイヤーごとに45°ずつ角度を変えることで、全てのバカ猫に平等に閲覧者をイライラさせるのである。「0°、45°、90°、135°、180°、225°、270°、315°、360°」18

 

 

18.「ウィンドウ」「アニメーション」でアニメーションウィンドウを表示させる。
22

 

 

19.一番下のレイヤーだけを残してそれ以外を「非表示」にする。目玉のボタンをクリックすればいい。25

 

 

 

20.アニメーションウィンドウでフレームをコピーする。
23

 

 

21.今度は2番めのレイヤーを「表示」させ、1番目のレイヤーを「非表示」にする。

24

 

 

22.それを7回繰り返す。そう7回である。
27

 

 

23.これで平等にチャンスがやってくる。むき出しの白目は乾燥しっぱなしである。28

 

 

24.完成。 

イライラするローディング
むき出しの白目はあなたの心をより一層イライラさせる。そうUXのイノベーションの誕生である。革新的なローディングGIF

 

 

いかがだったろうか?今回はあえて読込時間をイライラさせるローディングGIFを作成した。読者の皆様も独自のローディングGIFの作成に勤しんでみてはいかがだろうか。さらなるイライラに今後も挑戦をしていく。ご期待を。

 

ローディングGIFの作り方photoshop

Photoshopで5分、ローディングGIFを自作する簡単な方法【GIFアニメ作り方】

 今回はphotoshopを使い5分でローディングGIFを作成する。そう、画像読み込み中のくるくるする、あれである。ローディング画像を生成するジェネレーターなどのWEBサービスは改めてご紹介する。今回は可能な限り簡易で応用が聞くような解説になれば幸いである。WEBサービスのイメージを特徴つけるローディング中のグルグルで遊んでみてはいかがだろうか。

 

今回作成したGIFはこちら。

ローディングのイライラを軽減。
ローディングのイライラを軽減。

【使用した素材】 今回、画像素材は用いなかった。  

 

 

【作成手順】 1.「ファイル」「新規作成」でキャンパスを作成する。今回は200px * 200px とした。 1

 

 

2.楕円形選択ツールで適当な位置に円を描いた。このとき「Shift」を押しながら正円を描いた。 ※作業がしやすいようにグリッドを引いてある。 2

 

3.「塗りつぶしツール」で任意の色で塗りつぶす。3

 

4.現在のレイヤーをコピーし、「移動ツール(v)」で円形の反対側に配置する。 4

 

5.作成したレイヤー2つを「下のレイヤーと結合」で結合する。 5

 

6.結合が完了した。   6

 

7.レイヤーを3回コピーする。7

 

8.「移動ツール(v)」でレイヤーの端をクリックして回転させる。「Shift」を押しながら回転するときれいに配置できる。8

 

9.同様に次のレイヤーを回転させる。9

 

10.さらに次のレイヤーを移動させる。10

 

11.全てのレイヤーを「表示レイヤーを結合」で結合する。11

 

12.レイヤーを右クリックし、「レイヤー効果」を選択する。12

 

13.「グラデーションオーバーレイ」を選択し、「グラデーション」の項目をクリックする。13

 

14.「描画色から透明に」を選択し、「OK」をクリックする。14

 

15.それらしいものができた。後は回転させるだけである。 15

 

16.レイヤーを7回コピーする。 18

 

17,一番下のレイヤーを選択し、「レイヤー効果」「グラデーションオーバーレイ」の「角度」を「0°」にし「OK」を選択する。 上のレイヤーを順々に選択し、残りの7枚のレイヤーそれぞれの「角度」を45,90,135,180,225,270,315,360にする。

16

18.一番下のレイヤー以外を「非表示」にする。※目玉のマークをなくす。

17

19.「ウィンドウ」「アニメーション」を選択する。

20.アニメーションウィンドウが表示される。アニメーションウィンドウのフレームをコピーする。

20

21.コピーしたフレームを選択し、表示するレイヤーを下から2番めにする。21

22.またフレームをコピーし、今度は3番目のレイヤーが表示になるようにする。

22

23.8フレーム分それを繰り返す。24

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

25.「GIF」を選択し、「保存」をクリックする。26

26.完成

ローディングのイライラを軽減。
ローディングのイライラを軽減。

  いかがだったろうか?ローディング画像はそのWEBサイトやサービスのキャラクターを色づけるものである。ぜひ独自のローディング画像を作成してみてはいかがだろうか。次回はローディング画像本来の目的である「ロード中にイライラさせない」を根本から覆す、いらいらさせるローディングGIFを作成する。ぜひお待ちいただきたい。

イライラするローディング
そう、イライラさせる革新的なローディングGIFである。