ブログパーツ

趣味の工房

動く画像...GIFアニメーションを作成する

みなさん、こんばんは

先日導入した【Colorbox】の改造にハマッています

今回改造したのはコチラ。
2011y05m24d_193737709.jpg

画像を読み込んでいる最中に表示される「GIFアニメーション」です。
GIFアニメーションとは、1つの画像の中に複数の画像が保存されていて、それがパラパラ漫画のような要領で動く仕組みになっています。
但し、最大で256色までの色数でしか保存できないため、写真のようなものよりも、アイコンやバナーのようなものに向いています。


現在は先日の記事の通り【Colorbox】の「Exampe1」を少しだけカスタマイズしたものを使っているのですが、その読み込み中に表示される画像(Loading)を、作成したものに差し替えました。


ajax-loader(1).gif          loading004.gif
   変更前             変更後     






実は、これら「Loading」のGIFアニメはコチラのサイトでも作成が可能です。


2011y05m24d_215628672.jpg 2011y05m24d_215634491.jpg
【ajaxload.info】                【loadinfo】



コチラのサイトで作成、ダウンロードしてもいいのですが、せっかくならオリジナルも作ってみたいという方は、フリーソフトでも作成できます。

loading000.gifloading001.gifLoadingani.gif


作り方、【Colorbox】への適用の仕方は続きから...



続きを読む



ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村






GIFアニメーションの作り方




先ほども説明したように、1つの画像の中に複数の画像が保存されていて、それがパラパラ漫画のような要領で動く仕組みになっていますので、それぞれ1コマ1コマを作成する必要があります。

例えば...このようなGIFアニメであれば
hint.gif

下の画像のような点灯したときの画像と消えたときの画像を交互に繰り返していることになります。
2011y05m24d_200610125.jpg  2011y05m24d_200610639.jpg


まずはそのコマごとの画像を用意します。(※画像クリックで拡大)
2011y05m24d_144000532.jpg

上の画像は先に例に出した「LOADING」画像ですが、「LOADING」の文字の後に「.」が3つ続いて出てくるイメージになっていますので、何もない画像から順番に「.」が3つ付くまでの4枚のイメージを用意しました。
以下、その方法です。


○元画像を用意する※各画像はクリックで拡大します。

まずはペイントを立ち上げ、「サイズ変更」をクリック。
2011y05m24d_201412602.jpg


単位を「ピクセル」とし、「縦横比を維持する」のチェックを外して、任意の大きさに変更します。
2011y05m24d_201425272.jpg
とりあえず今回は「200×50」ピクセルとしました。


使用したい背景に合わせて、画像を塗りつぶします。
2011y05m24d_201441299.jpg
①塗りつぶしツールを選択、②カラーを選択、③キャンバス上でクリック
で塗りつぶしが出来ます。

ここまでで、ひとまず保存をします。(左上のフロッピーマークをクリック)



次に、このブログでもちょいちょい出てくるフリーソフト、【Photoscape】を使用します。


Photoscape.jpg
※画像クリックでダウンロード先へ。




フリーソフトのクセに、簡単操作で高機能。大変重宝します。
ちょうど先日、Hide-Rocketさんも記事にされています。合わせてどうぞw(記事はコチラ


Photoscapeを起動したら、「画像編集」を選択します。
2011y05m24d_202031061.jpg


左上のフォルダ一覧から先ほど保存した画像の入ったフォルダを選択すると、下に画像一覧が出ますので、作成した画像をクリックします。
(右側の編集画面に画像が表示されます。)
2011y05m24d_205156543.jpg


下の「オブジェクト」タブを選択し、「T」のテキストボタンをクリックして、テキストを挿入します。
フォントはお好みで。
コチラの記事COOLなフォントをインストール♪も参考にしてください。

2011y05m24d_205645141.jpg
文字の大きさ、位置は後からいい具合に変更しますw
ただし、今回はこの右側に「.」が3つ入るので、空けておきます。


とりあえず「LOADING」の文字が出来たら、一旦保存。
2011y05m24d_202135479.jpg
右下の「保存」から「名前をつけて保存」をクリックします。


ファイル名は何でも構いませんが、連番をつけておくと、後々楽です。
また、ファイル形式はGIFを選んでおきます。(JPEG等でもできますが)
2011y05m24d_210920463.jpg


保存が完了したら、続けて同じく「T(テキスト)」ボタンをクリックして、今度は「.」を1つ入れます。
2011y05m24d_210218309.jpg


完了したら、また「保存」→「名前をつけて保存」
2011y05m24d_202135479.jpg


これを繰り返して、このように何もない画像から順番に「.」が3つ付くまでの4枚のイメージを作成します。
2011y05m24d_144000532.jpg


これで下準備は完了です。




○画像をGIFアニメーションにする


こちらも引き続き【Photoscape】から行います。初回起動時は「GIFアニメ」ボタンを、引き続いて行う場合は上部のタブをクリックして起動します。
2011y05m24d_143853046.jpg 011y05m24d_212014856.jpg




先ほどの画像編集のときと同様、左上から保存したフォルダを選択すると、左下に画像が表示されますので、
動かしたい順番に画像を右側の編集画面にドラッグ&ドロップします。
2011y05m24d_144034556.jpg
連番にしておいたほうが楽、というのはこの作業が楽になるということです。
ただし、あとから上部の画像をドラッグして並び替えは可能です。


全部(この場合は4つ)の追加が終わったところ。
上には追加された画像が並び、下にはプレビュー(動いた状態)が表示されます。
2011y05m24d_144041451.jpg


右側の「時間の変更」をクリックすると...
2011y05m24d_144052855.jpg


このような画面が出ます。数字は画像1枚当たりの表示秒数(1/100秒単位)です。
数字を大きくすればするほど、ゆっくりと切り替わるようになります。
2011y05m24d_144055897.jpg
特定の画像だけ表示間隔を長くしたい場合は、その画像を選択してから「時間の変更」をクリックし、上の画像の下部にある「選択されたフレームの表示時間のみ変更」にチェックします。
プレビューを確認しながら調整しましょう。



ちなみに、単純な動きなら1枚の画像からも作成できます。
2011y05m24d_144105272.jpg
「効果の変更」ボタンから任意の効果を選ぶことでアニメーションが追加されます。


作成が出来たら、右上の「保存」ボタンから出来上がった画像を保存して終了です。




○ColorboxのCSSを変更する


作成した画像をColorboxで表示させるためには、完成したGIFアニメをアップロードし、CSSの記述の一部を変更する必要があります。

変更する部分は次の箇所。
2011y05m24d_222542455.jpg


colorbox.cssファイルをダブルクリック(メモ帳)で開いた後、上の画像のような

#cboxLoadingGraphic{background:url(http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/loading.gif) no-repeat center center;}


という記述を探し、そのURL部分(赤字部分)をアップロードした画像のURLに書き換えればOKです。
後は、書き換えたCSSファイルをサイドアップロードし、適用すれば完成です。
CSSのアップロード、適用に関してはコチラの記事【Colorboxのいろんなサンプルを使ってみる】を参考にしてください。





ちなみにGIFアニメ、手間さえかければこんなものも作れますwww
scanner1.gif


って、これはボクが作ったものではないですが( ̄∇ ̄;)


みなさんも頑張ってCOOLな動くロゴを作られてみてはどうでしょう。
あ。ちなみに文字だけのロゴであればコチラのサイトでこんなのが作れますよ。
(日本語不可ですが)

rkpp1.gif



他にも「GIFアニメ ジェネレータ」で検索すれば見つかるかも。
それでは。ヽ(* ̄∀ ̄)**SeeYou**




ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村


関連記事


    23:31 | Trackback : 0 | Comment : 13 | Top
Comment
2011.05.25 Wed 00:21  |  aki #ch2f7abI
GIFアニメーション作りもなかなか楽しそうですね!
作った後に何に使用しようか…w
  [URL] [Edit]
2011.05.25 Wed 00:40  |  スズメ #-
こうやってサイトデザインの質があがっていくんですねぇ☆
マシンとともに今なお上がり続ける完成度には脱帽です!!

私は「D-pixed」っていうかなり古いソフトで
作ることがあるくらいですかねぇ。
  [URL] [Edit]
お久しぶりです!

海外。。。海外進出ですか!
さすがです。。。

良い活躍することを願っています!!><
  [URL] [Edit]
2011.05.25 Wed 02:15  |  たかぴーちゃん♪ おいす^^ #-
この記事作成の大変さにまず1票v-238
ご苦労様です♪
ボクはフォトショ&GIFソフトで作成したりしたいますが、

Photoscapeはフリー&多機能&使いやすさ・・・コレ流行るかもしれませんね^^

hideさん&パパさん=カリスマ+使っている=絶対流行る!

    この方程式はたかぴーの登録商標です(水素爆
  [URL] [Edit]
2011.05.25 Wed 07:46  |  Hide-Rocket #-
リンクありがとうございます♪


前にも言いましたがもう一度言います。

こういった記事は・・書くとっわかりますが
本当に見た目以上に手間ですね(特にスクショが)

毎度毎度の丁寧な記事UP・・お疲れ様でした♪


今度動くGIF作りたくなりましたw
  [URL] [Edit]
>aki さん

アイデア次第では面白いものが出来そうですね。
下のほうにある「ナイトライダー」のイメージは一時期デスクトップ画像にしていたときもありました(笑)


>スズメさん

>こうやってサイトデザインの質があがっていくんですねぇ☆

いえ、あがっているのは質ではなく自己満足度です(`・ω・´)キリッ!!

「D-pixed」ってソフトは知りませんでした。
ちょっとみてみようっと。
GIMPなんかもすごいですが...多機能過ぎてつかいこなせません。



>綾波桜さん

お久しぶりですv-222
ありがとうございます☆人´∀`).☆.。.:*


...今頃どの辺にいるんでしょうねぇ。家のHAFは(爆)




>たかぴーちゃん♪ おいす^^ さん


おいす~♪
Σ( ̄□ ̄; ...ついに言ってしまった。言うまいと決めていたのに(爆)

たかぴーさんの画像加工も半端ないですよね。やはりフォトショでしたか。
ちなみにボクはフォトショと間違えて買った「PaintShop」(ペイショ!?)を使ったりしてます(爆)


方程式(たかぴーの法則)ウケましたwww
勝手ながら一部訂正させていただきますw

Hideさん&ボク=突然変なところに凝りだす=つられる人がでる

かと(爆)




>Hide-Rocketさん

記事までかぶってスミマセンv-356w
確かに手間ですが、手間かけないと後から自分が(忘れた頃に)読み返してわからないので(爆)



>今度動くGIF作りたくなりましたw

「たかぴーの法則」には逆らえませんwww

  [URL] [Edit]
2011.05.26 Thu 00:01  |  ねこさん #-
パパさん、皆さま、こんばんは、おいす~♪

私も一度言いたかったです☆
たかぴーさん、真似しちゃってごめんなさい。><

パパさん、GIF制作講座の記事、お疲れ様です♪
すっごく分かりやすいですね!
スクリーンショット、大変そうですね・・。><
画像を用意するのってホント大変ですよね。私もMapで投稿していた時は、
投稿で使わなかった画像が、実際に投稿した画像の10倍以上ありました。
パソコン投稿画像フォルダというのが、10GBちょうどあります。(^^;)

自作パソコン界の皆さんの法則、沢山ありますよね・・♪

たかぴーさん&おいす!×たかぴーさんのファンの皆さんの力v-354無敵のオリジナルmod PC!

hideさん&煙突型ケース×こじ君への無限の愛…v-343カリスマ ロックンロールmod PC!

パパさん+光りもの改造×イモリへの愛!?(え!?・・ごめんなさい。(^^)・・えっ!!?)
・・・&!りくと君たちへの大いなる愛…e-265e-266(即ち:rikuntyudady!!)=世界を制覇するmod PC!


僭越ながら、私も一例を書かせて頂きました。 m(_ _)m
  [URL] [Edit]
2011.05.26 Thu 00:47  |  ねこさん #-
パパさん、皆さん、こんばんは♪

あ~…!Σ(^^:

りくと君たちへの大いなる愛につづくハート、
割れちゃうハートの絵文字でした・・・orz

パパさんのりくと君たちへの愛は、われんばかり大きいという事で・・
どうぞお願いします・・><;(うう…滝汗です…)
  [URL] [Edit]
2011.05.26 Thu 03:52  |  たかぴー #-
ねこさんどんまいですv-221パパさんもそう言っておられますので(爆

しかし パパさん&ねこさんまで・・・・・おいす~だなんてww

   きゃ~~~♪ 感無量v-238

 
  [URL] [Edit]
>ねこさん

確かに手間ですが、ある意味自分用も兼ねているので、あまり苦にはなりません(笑)
投稿用の画像で10GB!! Σ( ̄□ ̄;
今まで撮ったHAFの画像確認してみたら...2GBでしたw

みんなの法則、面白いですよね~www
割れたハートは気づきませんでした。...黙っといたらよかったのに(爆)


以上の法則により、

(たかぴーさん+Hideさん+ねこさん)/3=∞=ボクorz×10

が導き出されますw


  [URL] [Edit]
>たかぴーさん

法則みつけるの面白いですねぇwww
ハマりそうな予感(爆)
  [URL] [Edit]
2013.04.03 Wed 02:34  |  長門 #-
あのー…大変おこがましいですが動く画像を作っていただくことはできないできないでしょうか?(・ω・`)
  [URL] [Edit]
長門さん
どんなものをイメージされているのかがわからないので、お約束はできませんが、とりあえず右側のメールフォームからご一報ください☆

  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/500-80bae527
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示