2017年03月23日

ドローンのGIFアニメを作ってみる


 今日はドローンのGIFアニメを作ってみました。
 『なんでも保管庫』とセサールのロゴが入った専用マシーンです。

Drone1.gif


 画像バージョンです。結構きれいにできました。

drone_Nandemo_Hokanko-1.jpg


 プロペラが回転して見えますが、回転しているわけではなく、静止しているプロペラをボカシ設定の中にある「ラジアルブラー」を使ってぼかしています。それにプロペラの静止画像の透明度を落としたものを重ねて表示。これで回転しているように見えると思います。

 本体か背景が動かないとつまらないので、背景の方を少し動かしています。
 ドローンの記事もそのうち書くかも知れないので、ドローンのGIFアニメ素材をつくっておくことにしました。


posted by ネコ師 at 01:04 | Comment(0) | GIFアニメの作り方と素材庫 | このブログの読者になる | 更新情報をチェックする

2017年03月09日

時間がゆったりと流れるような美しいGIFアニメ


 久しぶりにCinemagraphを作ってみました。
 湖面の波紋だけではつまらないので、髪の毛も風になびく効果も入れてみました。

Lake_Ref_girl.gif


作り方のメモ

1.湖面の波紋
 水面に映った画面が波打つ効果を作るwebサービスはいくつかありますが、以下のサイトを使いました。かなりきれいにGIFアニメ化できます。

 『LUNAPIC

 [Animation】タブの[Reflecting Water]で水の波紋の効果を加えます。

2.フレームに分解
 1.で作成したGIFアニメをフレームに分解します。これをきれいに分解できるwebサービスを提供している以下のサイトを使います。

 『EZGIF.COM

 [Split]タブで、1.で作ったGIFアニメーションを読み込み、フレームに分解し、ダウンロードします。

3.Photoshopにフレームを読み込む
 Photoshopに2.でダウンロードしたフレームを読み込みます。

 [File]⇒[Scripts]⇒[Load Filter into Stack]
下のダイアログが開くので、@[Folder]を選択し、A[Browse]をクリックして、2.でダウンロードしたフレームのフォルダを指定して、B[OK]。

 [Create Smart Object after Loading Layer]にチェックを入れるとちょっと面倒なことになるかも。
 このチェックは外しておき、後でスマートオブジェクトに変換した方が良いと思います。チェックが入っていると、フレームの枚数にもよりますが、とても時間がかかり、フリーズする原因になります。フレームを変形させるときは、必ずスマートオブジェクトに変換します。今回は変形しないのでそのまま読込み。

Lake_Ref_girl-02.png


4.風になびく髪の毛
 PhotoshopのHair Blushで描いた髪の毛をワープを使って変形しています。

5.効果の合成
 Photoshopで二つの効果を合成して、GIFアニメーションとして出力

Lake_Ref_girl-03.jpg


6.時間の微調整
 GIAMを使って、各フレームの表示時間を微調整しています。
 Photoshopでプレビューしたときと実際にGIFアニメで出力したときとでは、表示が違うことが多々あるので、時間の調整にはGIAMを使います。フレーム1枚1枚、微妙に時間を変更。

7.周辺のトリミング
 画像の縁の部分がチラチラしてきれいにできないので、トリミングして削除します。
 上のwebサービスを使います。 

 作業は以上です。いろいろなサービスを使っていてめんどくさそうですが、10分程度の作業です。この品質のものを作るにはこの方法がおすすめです。

 webサービスはたくさんあるのですが、出力するとサイズが小さくなったり、ロゴが入ったりとさまざまな問題があります。最大の問題はアップロードできるファイルのサイズの制限でしょうか。

 きれいなGIFアニメを作るには、ある程度の大きさが必要です。
 今回の作品は、画面サイズが422px x 562px、ファイルサイズが1.16MBです。ファイルサイズが少し大きい気がしますが、この画質なので、こんなものかも知れません。


posted by ネコ師 at 07:58 | Comment(0) | GIFアニメの作り方と素材庫 | このブログの読者になる | 更新情報をチェックする

2016年12月16日

あなたの部屋にポケモンの「ストライク」が現れたらどうする?


 もし、あなたの部屋にポケモンGOの「ストライク」が現れたらどうしますか?

 たぶん、下のGIFアニメの様な運命が待ち構えているように思います。

fly-strike2.gif


fly-strike3.gif


 ちょっと複雑な動きのGIFアニメにしてみました。ストライクは2枚の画像で動かしています。立体感のあるストライクになっていると思います。

 空飛ぶカマキリは、やはり不気味ですが、ハエ叩きで叩かずに、窓を開けて逃がしてあげましょう。

 ちなみに、管理人のスマホの中にいるのはこの子です。身長は1.38m。これはちょっと怖いです。
 日本語名では「ストライク」ですが、英語名は「Scyther」です。

pokemon-GO-Scyther01.png


 本当は、今日の記事は『コティングリー妖精事件』について書こうと思ったのですが、素材として動く妖精を作っているうちにいつの間にかポケモンGOの「ストライク」になってしまいました。

 画像バージョンです。

Scyther-Pokemon-GO-Hit.jpg



posted by ネコ師 at 00:50 | Comment(0) | GIFアニメの作り方と素材庫 | このブログの読者になる | 更新情報をチェックする

2016年12月15日

画像を分割してGIFアニメを作り、それを合成してひとつのアニメにする方法


 あまりニーズがなさそうなのですが、一枚の写真を分割して別々にGIFアニメーションを作り、後でそれらをひとつのGIFアニメーションに合成する。こんなことをするには、どうすれば良いか?

 先日ご紹介した『きらきらGIFアニメ』を作るwebサービス『Glitterboo』では、GIFアニメの仕上がりサイズが360 x 270px までしか作ることができません。これより大きなサイズを作るには有料になります。

 そこで、元画像を4つに分割して、それぞれのピースをGIFアニメにして、あとでひとつに合成すればある程度大きく高画質なGIFアニメを作ることができます。

 今日は、この方法をご紹介します。

元画像の分割

 後で一つの画像にするために、画像の分割は正確に行う必要があります。

 これには、『PhotoScape』というソフトを使いました。簡単に分割できます。

PhotoScape01.png


PhotoScape02.png


 これで、一つの画像をきれいに四分割できます。出力はpng形式にします。

GIFアニメーションの作成

 四つのパーツをそれぞれGIFアニメーションにします。

 この方法は過去記事『写真をきらきらGIFアニメに加工するwebサービス』に書きましたので省略します。


GIFアニメーションの合成

 次に、4つのGIFアニメーションを合成して一つにします。

 管理人が思いついたのは、PowerPointを使う方法と、Photoshopを使う方法の二つ。

 まず、PowerPointを使う方法です。
 手順だけを書きます。

@ PowerPointに4つのGIFアニメを読み込む。
A ひとつの画像になるように配置する。

PowerPoint-4Animation-combine.jpg


B これを保存するとき「ビデオの作成」で動画として出力(拡張子 wmv)。
C 動画を扱いやすいmp4形式に変換(webサービスやWindows付属のMovie Makerでも可能)
D 変換した動画(mp4形式)をwebサービスでGIFアニメに変換。さらに、不要な部分を切り取る。

 具体的には、過去記事『地図上に旅行ルートのラインが描かれていくGIFアニメの作り方』をご覧下さい。

 次に、Photoshopを使った方法。
@ GIFアニメーションを動画に変換。管理人は、Giamを使ってavi形式に変換しました。
A Photoshopに動画を読み込む。
B ひとつ画面のキャンパスを4つの画面が入るように拡大する。
C 残りの3つの動画レイヤーをひとつのpsdレイヤーに集める。そして、1つの画像になるように配置する。
D アニメーションで動かしてみる。
E GIFアニメーションとして出力する。

Photoshop-GIF-Animation-combine.png


 仕上がりがこちら。『トリバゴ』のナター・エモンズさんです。

Natalie-Emmons-Animated.gif



posted by ネコ師 at 00:48 | Comment(0) | GIFアニメの作り方と素材庫 | このブログの読者になる | 更新情報をチェックする

2016年12月07日

地図上に旅行ルートのラインが描かれていくGIFアニメの作り方


 前回の記事『19世紀末の二人のアメリカ人女性による究極の「世界一周」への挑戦』で、当時最速で世界一周を果たしたネリー・ブライの旅行ルートをGIFアニメーションで示しました。

 それが下のGIFアニメーションです。

Around-the World-Nellie-Rout-Map.gif


 ルートマップは、ルートを辿れるように動きがあった方がよいと思い作ってみました。
 このルートは、結構正確に描いています。サンフランシスコからニューヨークまでのルートは、ロッキー山脈が大雪により大陸横断鉄道が不通となったため、ネリーを派遣したワールド社は、雪の影響を受けない南回りの路線を運営する鉄道会社を買収し、特別列車を仕立ててネリーをニューヨークまで運びました。シカゴからニューヨーク間も通常の大陸横断鉄道のルートではなく南ルートを採用しています。

 今日は、このGIFアニメーションの作り方をご紹介します。
 方法はいくつかあるのですが、今回、管理人が作った方法で説明します。結構きれいに仕上がっていると思います。

世界地図を入手する

 まず、ベースとなる世界地図を入手します。

 今回は、地球一周なので、地球を楕円形にして、 北極/南極に近い地方の形のゆがみを少なくした「モルワイデ図法」の世界地図を使うことにしました。

アニメーションの作成

 アニメーションを何で作るか迷ったのですが、今回はPower Pointのアニメーション機能を使うことにしました。

 ルートが少しずつ進んでいくアニメーションは、『ワイプ』を使っています。

1.Power Pointの白紙スライドに世界地図の画像を読み込む。

2.出発地ニューヨークから最初の到着地、イギリスのサウサンプトン港までのルートを描く。

 1889年11月14日午前9:40、ニューヨークのホーボーケン港を出港したネリーを乗せた蒸気船アウグスタ・ヴィクトリア号は、8日後の11月22日 午前2:30、イギリスのサウサンプトン港に入港します。

 @ Power Pointの、[挿入] ⇒ [図形] ⇒ [フリーハンド]で、ルートを描きます。
 A 描いた図形をクリックして選択し、[書式] ⇒ [図形の枠線]で、「テーマの色」を「白」を選択。[太さ]を「0.75pt」とします。
 B (図形が選択された状態で)[アニメーション]タブ ⇒ [アニメーション]グループの[ワイプ]を選択。

 画面右側に「アニメーション ウインドウ」が開いていると思います。もし、開いていなかったら、
 [アニメーション]タブ ⇒ [アニメーションの詳細設定]グループの中の[アニメーション ウインドウ]をクリックして開きます。

Rout-Map-Making1.png


 次に、@ 「アニメーション ウインドウ」の右上の下向き▼をクリックしてプルダウンメニューを表示し、A [効果のオプション]を選択。

 
Rout-Map-Making2.png


 開いたウインドウで、[効果]タブの[方向]を「左から」に設定。

Rout-Map-Making3.png


 [タイミング]タブの[開始]を[直前の動作の後]に設定。また、「持続時間」を「3秒(遅く)」に設定します。

Rout-Map-Making4.png


 同様に、次のルートを描いて、設定するを繰り返します。
ルートをすべて描いてからアニメーションにしてもよいのですが、ひとつずつやった方が効率的です。

 スライドショーで表示してみて、OKであれば、描画作業終了です。
 メニューバーの[ファイル] [保存と送信] ⇒ [ビデオの作成]で、名前を付けて保存。 wmv形式の動画として保存されます。

動画形式の変換

 wmv形式だと扱いが面倒なので、Windows付属の「Movie Maker」で動画を読み込み、mp4形式で保存し直します。(wmv ⇒ mp4変換)

動画をGIFアニメーションに変換

 動画をGIFアニメーションに変換します。

 今回は、「EZGIF.COM」の「Animated GIF Maker」を使って変換します。

 上のリンクから「EZGIF.COM」にアクセスし、@ [Video to GIF]タブで、A [参照]をクリックして、変換したい動画を選定。 B [Upload!]ボタンをクリックして、ファイルをアップロードします。ちなみに、アップロードできる動画のサイズは80MBが上限です。

Rout-Map-Making5.png


 アップロードが完了すると画面が変わるので、画面下部にある[Concert to GIF!]ボタンをクリックして、動画をGIFアニメに変換します。

 変換が終了すると、同じ画面の下部に、変換されたGIFアニメが表示されます。GIFアニメが最後まで表示されていたら作業終了です。次に、余分な部分の切り取り作業に入ります。

 GIFアニメが最後まで表示されず、途中までしか再生されない場合は、次のようにします。

 @ [End time]の右にある[Use current position]をクリック。
今回は「33.08」と表示されました。[Frame rate 10]では30 secondsが最大なので、「33.08」ではオーバーしています。A そこで、60 secondsまで可能な[Frame rate 5]を選択し、B [Convert to GIF!]をクリック。再度変換します。

Rout-Map-Making6.png


 最後まで表示されたらOKです。
 
 次に、余計な部分を切り取ります。表示されている画面下の[Crop]アイコンをクリックして、余計な部分を取り除きます。ファイルサイズを小さくするために、余計な部分は必ず切り取ります。

Rout-Map-Making7.png


 余分な部分の切り取りが終わったら、GIFアニメ画面を右クリックして保存します。

速度の調整

 今回は、出発のニューヨークと、到着のニューヨーク、つまり、アニメの最初と最後の部分を長い時間表示させたいので、表示速度を調整します。

 フリーソフト[Giam]に作成したGIFアニメを読み込みます。

 最初と最後のフレームのウエイト時間を2秒に設定。[200]と入力します。

Rout-Map-Making8.png


 今回のGIFアニメは、作るのはそれほど面倒ではないのですが、ちょっと手間がかかります。
 本当は、ルートだけでなく、出発地や到着地の地名をルートの進行に合わせて次々に表示させ、さらに、出発日からの経過日数をデジタル表示したかったのですが、めんどくさくなったのでやめました。


posted by ネコ師 at 00:02 | Comment(0) | GIFアニメの作り方と素材庫 | このブログの読者になる | 更新情報をチェックする

▲ このページのTOPに戻る