Subscribe Twitter

2012年3月21日水曜日

このエントリーをはてなブックマークに追加

◉ 132個のサンプルから選んで、好みの色のローディングアニメーションgifを作れるジェネレータ「Load Info – gif generator」


Macの起動、終了のときや、webページの読み込みのときなど、ローディングアニメーションを目にする機会は多い。

自分自身も、外部のhtml内容を静的に読み込むwebページを作る機会があって、ローディングアニメーションを作ったことがある。

ありふれたものはつまらないと意気込んではみたものの、実際に作るとなるとこれがなかなか面倒、そんなとき参考にさせていただいたのがこのwebサービス。

このジェネレータのページはごくシンプルにできているが、表示されている132個のアニメーションgifのすべて動いている様はなかなか壮観。
この中から一つを選び、クリックすると別窓が開き、自分用にカスタマイズできる。

実際に作成してみた

  • [foreground]をクリックすると、右側にカラーピッカーが表示されるので、動く部分の色を決める。[foreground]の右側に16進の数値を入力してもかまわない。
  • [background]をクリック、[foreground]と同様の動きで、バックの色を決める。
  • サイズは16×16ピクセル、24×24ピクセル、48×48ピクセルの3種類から選ぶ。
  • すべて決まったら、ジェネレートボタンをクリック、選んだgifの下にダウンロードボタンが現れる。
  • ダウンロードボタンをクリックして、gifをダウンロード。
  • この別窓を閉じれば、また別のgifを選択できる。
ダウンロードしたgifをプレビュー.appで表示すると、右画像のような感じ。

実際に作成したローディングアニメーションgif



使ってみた感想
  • サイズは小さな3種類しか用意されていないが、ページ読み込みに時間がかかる大きなサイズはローディングアニメーションgifの役割からいって本末転倒なので、この位のサイズで十分。それなりのクオリティのあるgifをごく簡単なステップで入手できるのはとてもありがたい。
  • ただ、デフォルトの白いアニメーションgifを際立たせるため、全体に暗い感じで構成されているため、ジェネレータの別窓を開いていることが判りにくい。最初は、トップに戻ろうとして、ブラウザの「戻る」ボタンを押してしまい、このページから移動してしまった。

「Load Info – gif generator」:http://www.loadinfo.net/

Related Post:


0 コメント: