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

 久しぶりにCinemagraphを作ってみました。

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

スポンサーリンク

作り方のメモ

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]を選択し、②[Browse]をクリックして、2.でダウンロードしたフレームのフォルダを指定して、③[OK]。

 [Create Smart Object after Loading Layer]にチェックを入れるとちょっと面倒なことになるかも。

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

4.風になびく髪の毛

 PhotoshopのHair Blushで描いた髪の毛をワープを使って変形しています。

5.効果の合成

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

6.時間の微調整

 GIAMを使って、各フレームの表示時間を微調整しています。

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

7.周辺のトリミング

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

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

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

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

スポンサードリンク