アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS アプリケーション 新着情報

燃えるgifアニメーション文字の作成 ⇒ トップページの作り込み5

投稿日:

gifアニメーションとは

最近はSNSブームの関係でgifアニメーションが見直されているようだ。

GIFアニメーション - Wikipedia基本的に動画ファイルではなく画像ファイルの拡張なので、動作やサポート状況は画像ファイルに準じ、これが長所にも短所にもなる。また、GIF 共通の長所・短所もある。

長所[編集]
製作者と閲覧者双方にとっての簡便さが最大の長所である。

古くから多くのウェブブラウザで標準サポートされており、プラグイン等は不要である。
動画編集ソフトもウェブプログラミングも必要ない。必要な静止画と、簡単な変換ツールがあればいい。
HTMLでの記述も通常の GIF 画像同様の <img> タグや <a> タグが使える。
背景を透過できる(GIF 共通の機能)。

短所[編集]
さまざまな理由から、大規模な動画には向かない。

画像以外のストリームを持たない。特に、音声ストリームを持たない。
最大 256 色 (=28) しか使えない。そのため、自然画の表現は難しい。
フレーム間圧縮がない。
同じフレームの再利用はできる。また透過機能を利用して差分画像だけのフレームにすることで圧縮率を上げることもできるため、間接的にフレーム圧縮に近いことはできる。
多くのムービープレイヤーでは再生できない。
Windows VistaやWindows 7 では、標準添付のフォトビューワで表示されない。

GIFアニメーション – Wikipediaから引用

そのおかげで、いろいろなオンラインツールも出ている。

それらを利用して、炎が燃え上がるアニメーションを作ってみた。

動画を用意する。

炎が燃える動画は、こちらの素材集から拝借した。

無料映像素材58炎っぽいの 動画素材.com フリーハイビジョンVJ素材ダウンロード動画素材は「QuickTimeムービー」と「WMV」です。フリーでダウンロードできます。

無料映像素材58炎っぽいの 動画素材.com フリーハイビジョンVJ素材ダウンロードから引用

切り抜き文字を作る

黒背景で、文字の部分が透明になったpngファイルをpixelmator PROで作る。

マスクを使うだけ。

imovieで合成

imovieにこの2つを読み込み、編集する。

3秒ほどでいいかな、あまり長いとファイルが大きくなりすぎるし。

mp4で書き出す。

gif変換

こちらのサイトで、mp4をgifアニメーションに変換する。

MP4 to GIF Online (100% Free) Converter — mp4togif.onlineConvert MP4 video to animated GIF

MP4 to GIF Online (100% Free) Converter — mp4togif.onlineから引用

できあがったgifをダウンロードする。

しかし!

思ったよりファイルが大きい。

gifの最適化

そこで、こちらのサイトでgifを加工する。

Optimize animated GIFOnline GIF optimizer

Optimize animated GIFから引用

サイズを小さくすると、効果抜群だ。

実装

できあがったgifアニメーションを、トップページに置く。

<p id="amiens-05-consulting"><img src="https://amiens.jp/wp-content/themes/stinger8-child/images/consulting-1x.gif" srcset="https://amiens.jp/wp-content/themes/stinger8-child/images/consulting-1x.gif 600w,https://amiens.jp/wp-content/themes/stinger8-child/images/consulting-2x.gif 1200w" alt="consulting"></p>

なんか中二っぽいが、気にしない(笑)

-CMS, アプリケーション, 新着情報
-,

執筆者:

関連記事

before

カテゴリーのデザイン-サイドバーメニューの成形(3) ⇒ STINGER8設定その5

カテゴリーが長すぎる サイドバーのカテゴリーだが、項目数が多すぎて縦にやたら長くなってしまう。 そこで、第一階層をリストにして第二階層はボタンにして並べることにした。 まず、第二階層をボタン化 .ca …

ファストエバー

iPhoneの神アプリをおすすめ【2】FastEver

私のiPhoneのホーム画面1画面目に鎮座する神アプリを紹介するシリーズ。 1画面目のヘビーに使い込んでいるiPhoneアプリ 第2回目は、FastEverを紹介する。 FastEver 230円 f …

Format Link

引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる ⇒ STINGER8設定その7

他のサイトからの引用の仕方 ブログを書く時に、他のサイトから引用することは多い。 この時に気をつけるべきなのは、SEO的な視点だ。 引用する時にblockquoteタグを使わないと、googleからマ …

Dropboxから乗り換えるべき? トレンドマイクロの容量無制限オンラインストレージ「SafeSync」の実力は?

Amplify’d from trendy.nikkeibp.co.jp SafeSyncの最大の魅力は、年間4980円を支払えば保存容量が無制限という点だ。普段、Dropboxを使いながら「保存容量 …

iPhone OS 4の「iAd」はモバイル広告を変えるか?

Amplify’d from ascii.jp AppleのiAd広告配信、電通が日本で展開へ iPhone OS 4の「iAd」はモバイル広告を変えるか? アップルが2010年初頭、モバイル広告の米 …