小ネタ:Tw用GIF動画

提供: 球辞苑
2011年2月6日 (日) 09:07時点におけるOwl (トーク)による版 (アニメ作り計画)

移動先: 案内検索

twitter用のアイコンをアニメーションさせる方法
アニメーションGIFを使って、実現します。
下記はwindows環境で作成していますが、MACで行う場合も考え方はおんなしはずです。
最終的に、こんなアイコンがでけます。
Dango.gif
※↑たまに、目をぱちくりさせてますよー

★★★★★★ご注意!★★★★★★

  • twitterでは、アニメーションGIFは、本来非サポートとしてます(笑)ですので、ここに書いてある内容はハック的な話となります
  • アップ成功したとしても、twitter上でアニメーションしない場合があります
  • 携帯などでアニメーションGIFが対応していないため、アイコンが「×」マークになって見られない場合がある
  • 見られたとしても、アニメーションしてくれない場合がある(アニメーションGIF未対応な携帯端末等)

上記の点、ご了承頂いた後で、下記をごらんくださいまし!

手順大概要

  1. アニメーションGIF(アイコン)を作成する
  2. アイコンに小細工を入れる
  3. 作成したアイコンをtwitterにアップする

アニメーションGIF(アイコン)を作成する

用意するもの

素材

アニメ用の素材画像。アニメを作るのと同じ。ぱらぱら漫画と同じ。動かすためには、動いているように見える素材が必要になる。
今回は、下記を用意した
Num1.pngNum2.pngNum3.pngNum4.pngNum5.png
ファイルの縦横サイズは48x48でやってます(大きいサイズのもので作らないほうが良いです。理由は下に)

ここで注意

twitterにアップできるアイコンのファイルサイズに制限があります

ですので

  • 元ファイルは、可能な限りファイルサイズを小さいものに
  • できあがったGIFファイルサイズに制限があります

※とは言え、作ってみないとどのぐらいになるか想像できないので、一回ざっくり作ってから様子をみる感じが一番いいかもです。

ツール

素材をアニメーションGIFに変換してくれるソフトを用意します。
今回は、Giamというツールで!

頂いてきた後は、解凍してprogram filesフォルダにでも入れて頂ければいいだけです。
起動する際は、当該ディレクトリ内のgiam.exeというファイルをダブルクリックです。

アニメを作る

ツール起動と説明

Giamを起動します。giamのディレクトリの中のgiam.exeというファイルをダブルクリックして、Giamを起動してくださいまし
Giam2.png 画面説明

①プレビュー
アニメの素材をプレビューするところ
②素材とアニメコマ情報
アニメの素材一覧。一覧の順番で「ぱらぱら」され、アニメーションになります。
③アニメサイズ
アニメのアイコン縦横サイズの指定です。元の画像が大きくても、このサイズにリサイズされます。
④アニメ諸設定
「パラパラ」させる早さを指定します。遅くする場合は「ウェイトを多く」。早くパラパラさせる場合は、「ウェイトを小さく」。