アニメーションgif ゆれるキーホルダー3 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アニメーションgif ゆれるキーホルダー3

アニメーションgif ゆれるキーホルダー1
アニメーションgif ゆれるキーホルダー2


画像が出来ましたらウェブ上で加工してくれるサイトを使ってアニメーションGIFにします

いくつものサイトがありますが・・・
一番キレイにできているGIFアニメ工房さまで説明します・・

(ちなみに全部同じ画像を使ってアニメーションGIFに加工しています・・)



 GIFアニメ工房    http://gif.animegif.net/anime/

     5枚で作成した場合
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!-animegif.gif

     7枚で作成した場合
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

  パタパタアニメ自動作成 http://charaku.maxs.jp/PATAANI/pata000.html

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!-maxs.gif

   http://picasion.com/
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!-picasion..gif

   http://gickr.com/
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!-gickr.gif

   http://gifmake.com/
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!-gifmake.gif



http://gif.animegif.net/anime/



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


ループ回数は無限に繰り返しますから 0 回のままで・・


アニメ間隔の設定無効化 は・・ はじめはチェックしないでそのままで・・



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アニメ間隔 画像のパラパラ動く間隔時間です 300~400 程度かな?

あとで変更できますので適当でかまいません

(別のサイトでは画像1枚づつ間隔の時間を設定できるところもあります)


透過色指定

画像を作るときすでに透過していますので必要ないはずなんですが・・

背景を透過していない場合で透過させたいときに背景色を指定します


↓いよいよ画像を順番にアップしていきます・・順番を間違えないようにしてください

今回は5枚の画像ですから・・下-左1-左2-左1-下-右1-右2-右1 になります



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


↑アップし終わったら[GIFアニメ作成]ボタン・・・



完成したGIFアニメをみてOKならダウンロード(画像の上で右クリックはNGです)

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

↑もし・・動きがおかしかったらアニメ間隔を変更してから[GIFアニメ作成]ボタン・・・


OKならダウンロード・・・




コチラでは11枚までしか画像をアップできません

5枚で作る場合は・・ 下-左1-左2-左1-下-右1-右2-右1 の8枚でいいのですが・・

7枚の画像を動かす場合・・・

下-左1-左2-左3-左2-左1-下-右1-右2-右3-右2-右1 と・・ 

12枚必要になりますが・・11枚しか使えません そんなときは・・


一旦・・下-左1-左2-左3-左2-左1-下-右1-右2-右3-右2 の11枚で

アニメーションGIF画像を作ってダウンロードしておきます


最初の画像(写真画像01)に今作ってダウンロードしたアニメーションGIF画像を指定します

2枚目の画像(写真画像02)に残っている 右1 の画像を入れてから

アニメ間隔の無効化にチェックを入れてアニメ間隔を先ほど作ったときと同じに設定してから

[GIFアニメ作成]ボタン・・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

もし・・つながり方がおかしな場合は・・

アニメ間隔の無効化にチェックを外してから[GIFアニメ作成]ボタン・・・



別に最初に11枚でアニメーションGIFを作らなければいけないわけではありません

10枚でアニメーションGIFを作ってあと2枚追加でもOK・・ 自分のわかりやすい方法でトライください



あとは・・出来上がった画像を自由に使ってください


ブログパーツじゃないよ CSSだよ ペタぼたん

バナーを配布したい・・




ちなみに・・・・ アニメーション画像の2番目 パタパタアニメ自動作成の

写真自動加工 さま http://charaku.maxs.jp/

いろんな写真の加工が簡単に出来ます

タイトルロゴなんかもキレイなのが作れますよ・・・・



アニメーションgif ゆれるキーホルダー1
アニメーションgif ゆれるキーホルダー2



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!