かんたんGIFアニメアイコン制作講座

今回は管理人が主に使用している「EDGE」というドット絵ツールを使って解説をします。

本家サイト 高機能ドット絵エディタ EDGE (TAKABO SOFT様)

ベクターなどからもダウンロードできます。無料です!


�@ドット絵を描く

まずアニメーションさせたいドット絵を描きましょう。
当たり前ですがアニメーションさせるので最低2枚必要です。


透明にさせたい部分は分かりやすい色で塗りつぶしておきます。
(サンプルは緑色の部分が透明色になってます)

【[透明色]について】
基本的にカラーパレットの、一番左上(0.0)が透明色になります。
透明色は完成したとき透明になって見えなくなる部分なので、黒や白などよく使う色は避け
これから描く絵では絶対使わない色を使っておくと便利です。




制作時間3分!
…時間ないのでこれで行きます。


作ったドット絵は分かりやすいようレイヤーに分けておきます。




(※じつはレイヤーに分けなくてもアニメーションはできますが、今回は分かりやすいようレイヤーに分けてます。)




�Aアニメーションの編集ウインドウを開く

次にアニメーションの編集をするためのウィンドウを開きます。

メインメニューの表示→アニメーションから以下3つのウィンドウを開きます。




左から。。

・アニメーション フレーム ウィンドウ

フレームやパターンを編集するウィンドウ。

・フレーム プロパティ ウィンドウ
主にフレームの表示先の座標を視覚的に指定するウィンドウ。

・アニメーション プレイヤ ウィンドウ
アニメーションを再生するウィンドウ。







�Bアニメーションフレームウインドウの設定

基本のフレームの取り込み方法の設定をしておきます。
【アニメーション フレーム】ウインドウの「設定」をクリックすると、以下のウインドウが表示されます↓



↓

設定ウインドウの「フレーム取り込み方法の」
「1フレーム目は位置・サイズを指定、以降は位置のみ」のラジオボタンをチェックします。





OKをクリックして設定を閉じます。





�Cフレームの取り込み

アニメーションにしたい絵を取り込んでいきます。


最初に1番目に取り込みたい画像のレイヤーをあらかじめ選択しておきます


【アニメーションフレーム】ウインドウの□のアイコン(取り込み開始)をクリックします。





取り込みたいレイヤーの一番右下から左上にドラッグします




太めの紫色の線で囲まれた場所が取り込まれた範囲です。


次に2番目に取り込みたいレイヤーを選択します。
今度は画面上で一度だけクリックします(2度目はサイズが指定されるためドラッグの必要はありません)





【アニメーションフレーム】ウインドウに取り込んだ画像が表示されたらOKです。





もし上手く取り込めなかった場合は、【アニメーションフレーム】ウインドウの
メニューにある×のマークをクリックすると取り込んだ画像が削除されます。







�Dスピードの調整をする

【アニメーション プレイヤ】ウィンドウの再生ボタンをクリックするとアニメが再生されます。



動いたでしょうか?
多分すごく早いと思います…。



このままだとアニメーションが早すぎるので、スピードの調整をします。



まず
【アニメーションフレーム】ウインドウの1フレーム目を選択し。
【フレーム プロパティ】ウインドウのディレイと書かれたところの数値を変えます。
とりあえず今回は100にしてみました。





※ディレイとは??
アニメーション再生時、フレームを何ミリ秒表示させるかを表しています。
1000ミリ秒で1秒です。



続いて2フレーム目の数値も変えます。

もう一度再生してみます。今度はどうでしょうか?
ちょうど良い数値を自分で調整してみましょう。




�F背景を透明にする

アニメーションの背景を透明にします。

まず初めに
【アニメーションフレーム】ウィンドウの一番右はしにある「背景クリア後にフレーム表示 」をオンにしておきます。

次に1フレーム目を選択し
【フレーム プロパティ】ウインドウの一番したの「透明色」にチェックを入れます。



同じように2フレーム目を選択し、同じく透明色にチェックを入れます。



これで背景が透明になりました。



透明色の位置を(0.0)以外にしている場合は。

透明色の横の「…」のボタンをクリックすると、パレットが表示されるので
その中から、透明にしたい色を選択します。






�GGIFアニメを保存する


アニメーションが完成したら、GIFアニメで保存します。


【アニメーションフレーム】ウィンドウ
ファイル→「動画をアニメーションGIF形式で保存」
を選びます。




設定ウインドウが出るので下記のように各種設定をします。

共通カラー・テーブル→
・先頭フレームのパレットを使用する
・固定カラー・テーブルを使用する


次のフレームを表示する前に行う処理→
・背景色でクリアする

その他(ループ数)
お好みで
※0で無限にループ






保存ボタンをクリック→名前をつけて好きな場所に保存してください





完成です〜!






























えー、ちょっとお詫び。

解説しておいてなんですが。。
管理人は基本的にこの方法ではアニメーション作ってません(少し重くなるので…)
普段はEDGEでドット絵を書いたあと→PhotoshopでGIF保存→Animation GIF Malerか、Adobe Image ReadyでGIFアニメ保存。
という感じです。