GIFQuickMaker : GIFアニメーションや透過GIFを作成する
OS10.4以上（UB）
フリーウェア


GIFアニメーションや透過GIFを作成「GIFQuickMaker」の紹介です。





GIFアニメーション を作成する

例として GIFアニメーション を作成してみます。

①最初にウインドウ左上の「画像ビューア」部分に素材となる画像ファイルをドラッグ＆ドロップしていきます。
開いているファイルは左のリストに表示されます。



②ボタンをクリックして、選択している画像を下の「GIFフレーム」の1コマとして設定します。

そのフレームを選択して、表示時間を秒単位で指定します。（数値入力 or スライダ）
繰り返し、その回数、無限ループなども設定。


③フィルムのアイコンをクリックすると、ウインドウの右側で作ったアニメーションをプレビューできます。
プレビューしてみてその内容でOKなら、右下の「保存」ボタンをクリックしてGIFファイルとして保存します。



こんな感じで、できたものがこれです。








透過GIF を作成する

また「背景が透明」など、一部の色を透過するGIFファイルを作ることもできます。

例えば、下の背景が緑の画像を、GIFQuickMaker を使って背景を透明にしてみます。



この画像を GIFQuickMaker で開き、スポイトツール を選択。画像の透過にしたい箇所をクリックします。


この場合だと背景の緑の部分をクリックします。そうすると、クリックした箇所の色を透過するようになります。
あとは上記にGIFアニメーションを作るのと同じ手順で画像を作成します。
あと、フレームの設定のところで「透過」に ✓ を入れておきます。


これでできたものがこれ。



使っている色の数が少ないイラスト等なら、背景を消すなどに役立つと思います。






この記事では GIFQuickMaker 1.2 を使用しています。

（ダウンロードリンク）
Site top page : STUDIO SHIN Homepage
Download page : STUDIO SHIN Homepage

GIFfun : GIFアニメーション作成ツール
OS10.2以上（UB）
フリーウェア、日本語対応


ぱーむらいふさん の『Gifアニメを作る＿＿GIFfun』で知った（ずいぶん前だけど）、GIFアニメーション作成ツールの「GIFfun」の紹介です。




操作は簡単で、GIFアニメーションにしたい画像ファイル用意して、それをウインドウにドラッグ＆ドロップして行きます。

ドラッグ＆ドロップする画像ファイルの形式は、JPG, PNG, TIFF, GIF, PDF など、いろいろなものに対応しています。


それぞれの「コマ」で表示時間を設定します。
単位は1/100秒です。

リストから選択するか、数字の部分をダブルクリックして入力します。


あとは「繰り返し回数」を設定し、オプション設定（あまりよく分からない）などを設定して、「Gifを作成」or command+G を実行すると、そのGIFアニメーションをWebブラウザで開きます。


出来上がりを見て、どれかの「コマ」を削除したい場合は、その画像を GIFfun で選択して command+X で削除できます。


保存するときは、command+S で保存するか、GIFfun のウインドウに表示されている GIFのドキュメントアイコンをクリックすると、テンポラリファイル（一時的なファイル）がFinderに表示されるので、それを保存したいフォルダにドラッグ＆ドロップして保存します。

（↓試しに作ったGIFアニメーション）





shift+command+S で、GIFfun での設定を保存することができます。

拡張子「.gifAnim」のファイルで保存され、再度 GIFfun での設定を編集することができます。






この記事では GIFfun 4.2 ( March 13 2008 [build 133] ) を使用しています。

（ダウンロードリンク）
Site top page : Stone Design / Big Stone Phone - iPhone and Mac OS X software for the rest of us!
Project page : ((( Stone Design ))) -> GIFfun -> About
                      GIFfun Help
Download page : Download Stone Software -> NewDownload

Choreographer : 画像ファイルを3Dの動きを付けたgifアニメーションに書き出す
OS10.4.11以上（UB）
フリーウェア


画像ファイルを3Dの動きを付けたgifアニメーションに書き出すソフト「Choreographer」の紹介です。

使い方はまず最初に、「controller」ウインドウで「正面」か「背面」タブを開いておいて、元になる画像ファイルをドラッグ＆ドロップします。

ドラッグ＆ドロップする前に、その画像ファイルの属性を「正面」「背面」タブで設定しておきます。


次に「調整」タブで画像の大きさを調整します。



「動き」タブでは、アニメーションの動きをプルダウンリストから選択できるようになっています。

「プレビュー」ボタンで実際の動きを確認できます。


「環境設定」でGIFアニメーションの作成に関わる設定を行います。
詳細は「ReadMe」に書いてあります。



最後に「作成」ボタンで、ファイル名・保存場所を指定して、GIFファイルを書き出します。

（動きを「ふわふわ」で作ったもの）




最初に画像ファイルをドラッグ＆ドロップするときに、「正面」「背面」タブの補足説明をすると、作り出す「動き」には「回転」や「でんでん太鼓」など背面を表示するものがあり、背面用の別の画像を設定することができます。

例えば「正面」タブで「背面のイメージを鏡像で自動作成する」のチェックを外してからドラッグ＆ドロップし、さらに「背面」タブで別の画像をドラッグ＆ドロップします。

（上の例では左右反転させたものを使っていますが、反転させなくてもOK。させなくても同じものが作られるので意味がなかった。）

こんな設定で「動き」を「回転 (正面で一旦停止)」でGIFアニメーションを作ってみました。




マスク付きの画像を使う場合は、下のように左側に普通の画像、右側にマスク部分以外を黒で塗りつぶした1つの画像ファイルを用意します。
（一度全体を黒で塗りつぶしてから、描画部分を描く）

これを「マスク付きの画像である」にチェックしてから、そのファイルをウインドウにドラッグ＆ドロップします。


すると、マスクされた状態で画像が表示されるので、後は普通に設定するだけです。





Choreographer は、スクリプトを追加することによってアニメーションの「動き」を追加できます。
スクリプトは Choreographer のダウンロードページから、別途ダウンロードしてインストールします。

例えばフィギアスケートの動きを模した「figure」は、Finderで Choreographer 本体を右クリックして「パッケージの内容を表示」を選択して開き、「97-figure.rbs」ファイルを
Choreographer.app/Contents/Resources/MotionScripts/
の場所に保存します。

これで Choreographer を起動すると「動き」に「フィギアスケート」という項目が追加されます。

作られたGIFアニメーションは、110フレームもあって複雑な動きをします。
サンプルを別ウインドウで開く


こんな風に、Choreographer は、GIFアニメーションのフレーム1コマ1コマずつの画像を用意しなくても、簡単にアニメーション画像が作れるおもしろいソフトです。






この記事では Choreographer 1.2.1 を使用しています。

（ダウンロードリンク）
Site top page : Pencil Software
Download page : Choreographer

なにか懐かしの歌みたいなタイトルですが、WEB上でよく使われる画像ファイル形式についてのお話です。

僕自身、今まで特に気にせず画像ファイル形式を使ってきました（ほとんどJPGを利用）。ブログを書くようになってから、これらのファイル形式を使い分けてファイルサイズを出来るだけ小さく、かつ綺麗に表示させないと、と思いちゃんと調べてみました。

JPGとGIFとPNG（ピングと読む）を簡単に特徴を挙げると、


・JPG --- 色数に関係なく、画像を劣化せせてサイズ圧縮。

・GIF --- 画像の色数を256色を上限にして、減色してサイズ圧縮。

・PNG --- GIFと同様に色数を減らしてサイズ圧縮。256色以上も可能。


実際に画像で説明して行くと、

「色数の多い写真画像の場合」
（JPG画像）
ファイルサイズ23kb

（GIF画像）
ファイルサイズ24kb

（PNG画像）
ファイルサイズ24kb


同じ写真画像を元にほぼ同じファイルサイズで保存しました。JPG画像が一番きれいに表示されています。もちろん、GIF、PNGも色数を増やせばJPG画質に近づけることはできますが、ファイルサイズが大きくなってしまいます。

それと同じファイルサイズでは、PNGのほうがGIFよりも少しきれいに表示されています。PNGはGIFよりもファイルサイズが大きくなると思われがちですが、ほとんどの画像でPNGの方が圧縮率は高いです。


「色数の少ない文字・記号の画像の場合」
（JPG画像）
ファイルサイズ9kb


（GIF画像）
ファイルサイズ9kb
色数を256色に設定


（PNG画像）
ファイルサイズ7kb
色数を256色に設定


色数の少ない画像の場合はGIF、PNGの方がJPGより画質がきれいです。JPGも圧縮率を下げ、画質を上げることも出来ますが、ファイルサイズが大きくなってしまいます。

このように使う画像によってファイル形式を選んで行けば、スマートに利用できます。
僕は今まで何でもかんでもJPGを使ってきたので、これからは直して行きたいと思います。




ここから少し難しい話です。
GIFとPNGは使う色を透明色に指定することが出来、JPGは透明色を指定出来ません。
解り易く言うと、一般的にWEB上の画像を保存したりするとき、JPG画像は白ベタ背景（別に白でなくてもいいですが）で四角い輪郭になりますが、GIFとPNGは背景が透明なのでその画像の輪郭になります。

ここからはGIFとPNGの違いについての話です。
下のてんとう虫の連ダコのような写真はGIF画像です。





（GIF画像）
※GIF画像の説明では各写真の左端の数字は無視して下さい。

GIFは1色のみを透明に指定出来るので（つまり背景部分だけを透明にしている）、このGIF画像を別のチェック柄の背景画像と重ね合わせると・・・
GIF画像の背景は透明なので、てんとう虫の連ダコ写真のまわりにチェック柄の背景が見えます。

（※チェック柄背景とてんとう虫の連ダコ写真は別々の画像ファイルです。チェック柄とてんとう虫の画像を1つのファイル内で重ね合わせて保存している訳ではありません。）



続いてPNGの場合です。同じてんとう虫の連ダコのような写真のPNG画像です。
この状態でGIF画像との違いは、コントラストがGIFの方がはっきりしている以外、あまり見分けがつきません。





（PNG画像）
※各写真の左端の数字はその写真の透過率（0%,25%,50%,75%）を表示しています。

PNGはGIFの1色透過に対して、アルファチャンネルというのを持っていて、透過領域と透過率を自在に指定出来ます。

つまり、GIFは背景のみが透明になりますが、PNGの場合は背景はもちろん透明で、画像そのものも半透明の表示が可能です。

GIFの場合と同じようにチェック柄の背景画像と重ね合わせると・・・
背景は透明で各写真も半透明の表示になり、うしろのチェック柄が透けて見えると思います。
上のGIF画像の場合と比べればよくわかると思います。

GIFとPNGはよく似ていますが、このような違いがある訳です。GIFにはアニメーションできるという利点もあります。（PNGも一応できるのですが・・・、また機会があれば説明したいと思います。）



※ブラウザによってはPNGに対応していないものもありますので、上のPNG画像が見えないかも知れません。
素人が精一杯調べて実際に試して、書いた内容ですので間違いがあるかもしれません。間違ってたらすみません。