超・初心者のAdobe Cloudデザイン制作

ロゴアニメーションの制作を依頼されたので記事にして見ました。

 

 

今日はGifアニメーションによる色の変わるロゴ、名付けて「ロゴアニメーション」を制作してみました。

gifはバナーなどで動きのあるパターン物など、割と普通に目にしますが、ロゴの一部だけが変化するというのは、あまり見かけないパターンかも知れませんね！？

 

このサイトはワードプレスですが、ここでもロゴは・・・.gif・・・.jpg・・・.pngといったファイル形式が許容範囲のようなので、試しにトップのスライド画像にもgifを入れて見ました。

 

お気づきの方もいるかも知れませんね。

 

依頼者からは、カメレオンみたいに七色にロゴの色が変わるようなアニメがいい！

 

と言われましたので、ロゴの一部が自動でクルクルと七色に変化するアニメーションgifを制作しました。

フォトショップでアニメにした時にループと言う選択をすることで、無限に繰り返されるロゴになります。

逆にループ機能を使わなければ、一度だけ色が変わってから、その後は静止し状態になります。

再読み込みをすると、1回だけ七色に変化する仕組みにもできます。

 

gifで300×68で473KBのファイルサイズだから、そこまで重たくはならなかったようです。

 

gifであってもフォトショップで複数のレイヤーを作りますので、総量としては結構なデータ量になりますので、最適化するためにはサイズを調整したり、色の数を制限したりして圧縮しておく必要がありそうです。

 

サイトを見にきた人のユーザビリティを考慮すると、４００KB前後のファイル容量にしたいところです。

 

元画像は最初にイラストレーターで制作し、その時点ではaiファイル形式ですが、イラストレーター上で書き出しを選択し、pngファイルで静止画を７枚制作します。

 

Photoshopで複数のレイヤーを組み合わせ、タイムラインというタブで操作してアニメーションとしてのgif画像に変換し書き出します。

 

初めてアニメを作ったのは１０年くらい前だったように記憶していますので、実に10年ぶりにアニメを作ることになりました。

 

アニメというと漫画が動くイメージですが、原理は同じでパラパラ漫画のように複数の繋がりのあるレイヤーを重ね合わせて、動いているように見せる物です。

 

そん時はファイヤーワークスというアドビの製品で制作した。

 

gifアニメのファイルの圧縮について検証して見ました。

 

今回はディザ100%で出力したので劣化はしませんでしたが、ファイル容量は473KBでした。

 

ディザ70%で劣化させて出力すると↓↓こんな感じまで劣化してしまいます。

 

 

これだと、383KBまで軽くできました。

 

見た目あまり劣化しているように見えないかな？

 

でも色が変化するロゴの中央部をよく見てみるとグラデーションがラインの輪っかみたいに見えてきますね？

 

思い切って次は30%まで劣化させて見ました。

その結果がでこれです。↓

 

 

いよいよラインの輪っかがくっきりして来ましたので、ここら辺が限界のように感じます。

というか、劣化しすぎ・・・ですね。

 

画像のファイル容量の圧縮＝劣化なので、仕方ないことですが、軽くはなりました。

 

一番最初のディザ100%と比べて、ディザ30％だとかなり劣化していることがわかります。

 

これで、366KBだから劣化している割には軽くなってないから、結論から言うとディザは100%でサイズをギリギリまで小さくする方がベターだと思いました。

 

３つ続けて載せてみると劣化の程度が比較しやすいかも知れませんので３つ続けて掲載して見ます。

 

 

いかがですか？

ディザの圧縮によって色の数が減少し、グラデーションの動が圧縮比率で変化していますね？

 

依頼者曰く、「こういうロゴアニメみたいなものって、きっと私のように作りたい人や、作って欲しい人が案外いるんじゃないですか？」と言われました。

 

依頼者も過去何度もロゴアニメの制作方法をググって、自分なりに挑戦したようですが、難しくて作れなかったと言われました。

 

なので、もしこういうロゴアニメをご希望の方がいたら相談にのりますので、問合せフォームからお問い合わせくださいね。

 

まとめ

 

gifアニメはイラストレーターで作って、pngとして背景を透過させて出力します。

出力した複数のファイルをフォトショップに読み込んで、タイムラインで、複数のレイヤーがどのように変化していくのかを調整します。

調整が終わったら、フォトショップでgifアニメとして書き出します。

他にも動画の一部をgifに変換することも出来ます。

 

例えば、AdobePremiereProの動画をGifで書き出すことも可能ですが、なるべく短い時

間でないと、かなり書き出しに時間がかかります。

20秒ほどの動画で１時間程度の書き出し時間と、500MB以上のファイル容量になりました。

ワードプレスではテーマにもよりますが、30MB〜50MB以下の動画じゃないとアップ出来ないなどの縛りがあります。

 

皆様もぜひ挑戦して見てくださいね。

この記事が何かの参考になれば幸いです。