「Piskel」でGIFアニメーションを作ろう!

投稿日:

コハク
今回は、ドット絵作成ツール「Piskel」を使ってGIFアニメにチャレンジするわ。

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

今回は、光のGIFアニメで説明するわ。

まず、1フレーム目のドット絵を作成するのよ。

「Piskel」でGIFアニメーションを作ろう!(フレーム1作成)

 

1フレーム目が完成したら、赤枠の「Add new frame」を選択して、2フレーム目を追加するのよ。

「Piskel」でGIFアニメーションを作ろう!(フレーム追加)

 

 

2フレーム目が追加できたわね。

次に、右側にある「玉ねぎ」アイコンをクリックするの。

「Piskel」でGIFアニメーションを作ろう!(テンプレ)

 

 

玉ねぎ」アイコンをクリックすると、前後のフレームが半透明で表示されるの。

これで、2フレーム目が作りやすくなるわね。

「Piskel」でGIFアニメーションを作ろう!(テンプレ2)

 

 

2フレーム目が完成ね。あとはフレームを追加してアニメーションを完成させるだけね。

「Piskel」でGIFアニメーションを作ろう!(フレーム2)

 

 

3フレーム目が完成ね。

「Piskel」でGIFアニメーションを作ろう!(フレーム3)

 

 

4フレーム目が完成ね。

「Piskel」でGIFアニメーションを作ろう!(フレーム4)

 

 

5と6フレーム目は、調整用の空フレームを追加してドット絵が完成よ。

右のプレビュー画面でアニメーションを確認してみてね。

赤枠部分のスライドを動かしてアニメーションの速度を調整することができるわ。

「Piskel」でGIFアニメーションを作ろう!(速度調整)

 

 

GIFアニメーションの書き出し

以下の手順でGIFアニメーションを書き出すことができるわ。

①右側の「山と太陽」のアイコンをクリック。

②「GIF」を選択。

③「Scale」でドット絵の大きさを調整できるわ。作成したサイズのままがいいなら「1.0x」を選択するの。

④「Download」を選択するとGIFファイルがダウンロードできるわ。

「Piskel」でGIFアニメーションを作ろう!(エクスポート)

 

 

コハク
ダウンロードしたGIFアニメーションがこちら。

「Piskel」でGIFアニメーションを作ろう!(完成)

 

 

まとめ

コハク
意外と簡単にGIFアニメーションが作れたわね。
コハク
次は、何に挑戦しようかしら。

-Piskel(ドット絵), パソコン
-

Copyright© コハクの休日 , 2018 All Rights Reserved.