GIMPで簡単なGIFアニメを作る(1)

ブログが作りたい!GIMPで画像編集 > GIMPで簡単なGIFアニメを作る(1)

GIMPで簡単なGIFアニメを作る(1)

GIMPで簡単なGIFアニメを作る方法(1)

GIMPでアニメーションを作るのさ(1)

GIMPを使って、簡単なGIFアニメを作成してみます。画像がぽこぽこ動くわけです。勝手に動いちゃうわけです。

お話は、次の順番で進みます。


作成サンプル

完成すると、次のようになります。初回ですから、非常にシンプルなものにしてみました。

GIMPで作ったGIFアニメのサンプル

ちなみに、GIFアニメというのは、GIFというファイル形式で保存している動画のことをいいます。


GIMPで簡単なGIFアニメを作る方法(1)

1:新規ファイル作成

(01)

GIMP2.4を起ち上げて、新規に画像ファイルを作成します。([ファイル]-[新規])

あまり大きいサイズで作成すると、ブログにアップし難いので、100×100くらいでいかがでしょうか。

新規に画像ファイルを作成

2:レイヤー追加

(02)

新規レイヤーを追加します。

新規レイヤーを追加

レイヤーをご存知ない場合は、記事「レイヤーとは?」をご覧ください。

3:円を描く

(03)

道具箱の「楕円選択」をクリックします。

楕円選択をクリック

円形の作成に自信がない場合は、記事「Web素材の作り方(丸1)」が参考になります。

(04)

描画領域で適当にドラッグして、円を描いてみましょう。

ドラッグして円を描く

円の大きさは 20×20で、場所は(0, 40)にしてみました。特にこだわりがなければ、同じ数値でどうぞ。

円の大きさと場所の指定

4:円を塗りつぶす

(05)

道具箱の「塗りつぶし」を、クリックします。

塗りつぶしをクリック

(06)

選択領域内をクリックして、色を流し込みます。

選択領域内をクリック

5:レイヤー名の変更

(07)

レイヤー名を変更しましょう。

  • 「新規レイヤー」をダブルクリックします。
  • 新たなレイヤー名を入力します。
  • [Enter]キーを、打鍵します。
レイヤー名を変更

[Enter]キーを、打鍵し忘れると、無効になってしまいます。忘れないでねーん。

(08)

さらにレイヤーを右クリックして、メニューを表示し、「レイヤーを複製」を選択します。

レイヤーを複製

複製したレイヤー名も変更しておきましょう。(あとで分かり良いので)

レイヤーの複製については、記事「レイヤーを使いまくる」が参考になります。

6:場所を移動する

(09)

「移動」ツールをクリックします。

移動ツールをクリック

(10)

複製したレイヤーを、右へ移動します。

描いた黒丸を、ドラッグしてみましょう。

黒丸をドラッグ

7:繰り返す

(11)

この(08)~(10)の工程を繰り返して、次のように黒丸(複製レイヤー)を、5つ並べます。

工程を繰り返す

レイヤー名も、それぞれ変更しておきます。

レイヤー名もそれぞれ変更

これで、ひとまず動画の準備が出来ました。レイヤーの下から上に動画として表示されます。

8:解除と削除

(12)

あ、そうだ。選択している必要はないので、選択を解除しておいてください。([選択]-[None])

それからついでに、背景も邪魔なので、削除しておいてください。

9:再生

(13)

さて、さっそく再生してみましょう。

上部メニュー右端「フィルタ」から、「アニメーション」を選択し、さらに「再生」を選択します。([フィルタ]-[アニメーション]-[再生])

[フィルタ]-[アニメーション]-[再生]

(14)

「演奏」をクリックすると、動画として再生されます。

動画として再生される

しかし、何だかチラチラしているだけで、アニメというよりもソフトが故障しているみたいに見えます。ドッキリどきどき、ドッキリどきどき・・・みたいな。

再生サンプル1

もう一度、「演奏」をクリックすると、停止します。「ドッキリどきどき」を暫(しば)し楽しめたなら、停めてしまってください。

(15)

右上の[×]をクリックして、閉じます。

動画再生を閉じる

表示が重くなるので2ページに分けました。お話は、記事「GIMPで簡単なGIFアニメを作る(2)」へ続きます。

前の記事へ
次の記事へ

次回予告

次回は、今回の続きです。タイムスライスなどを行って、もう少しコントロールします。良かったら、GIMPで簡単なGIFアニメを作る(2)へどうぞ。


関連記事

画像編集ソフトGIMPに関連する記事を、一部ご紹介します。

GIMPに関するすべての記事をご覧になりたい場合は、『GIMPで画像編集(カテゴリ記事一覧)』をご利用ください。

1:GIMP2の基本的な使い方

2:GIMP2でGIFアニメーションを作る

カテゴリの記事一覧

作成日:2008/06/14 更新日:2008/06/14

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

こんにちは。
話が変わりますが、ファイルを押しても新規が出てこないのですが、どうすればよいですか?

新しい画像

名無しさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。

(01)のところの「新規」ですかね。

これは古いバージョンの画面になるので、
新しいGIMP2.6などであれば「新しい画像」という項目になります。

よろしくどうぞ。

No title

はじめまして。わかりやすいので参考にさせてもらっています。
手順8に書いてある背景を削除の方法がわからないので
詳しく教えていただければと思います。

GIMP背景の削除方法

コメントさんさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。


「背景」も、レイヤーと同じようなものと考えて
操作していただくと分かり良いかと思います。

以下、どちらでもお好きな方法でどうぞー。


方法その1:
 1:「背景」を選択する。
 2:ちょい右下にあるゴミ箱へ、ドラッグ&ドロップする。


方法その2:
 1:「背景」を選択する。
 2:右クリックする。
 3:メニューから「レイヤーを削除」を選択する。


※:どちらの方法にせよ、操作に慣れてくると、
 「背景を選択」しなくても、できるようになるかと思います。
 (慣れるまでは選択するようにしたほうが失敗がありません)


No title

すみません。GIFアニメーションを作ったときに、
GIMPの画面では綺麗にできたと思って、ネットにUPすると、
GIFアニメがまるで「絵」のように仕上がって動いているときがあるんですが、これは何のせいなんでしょうか?

絵のような仕上がり

くまぞうさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。

ごめんなさい。(´・(ェ)・`)
どういう状況なのかイメージできないので何とも申し上げられません。

「絵のような仕上がり」・・・というのは、
どういう仕上がりでしょう???

画質がベタッとしてまるでアクリルを使ったときのような感じとか、
あるいはキュービズム的でおれは好かんとかそういうことかしら。

見せていただくと何か分かるかもしれませんが、
申し訳ないのですが何のせいか分からないですねー。


動いてはいるようですので、
エクスポートするときに何か起こっているのやもしれません。

初めまして

初めまして。
GIMP2をインストールしてから、こちらで使い方を練習させてもらっています。
とても分かりやすくて、助かっています。

さて、アニメーションのことで質問があります。
背景を残したまま、アニメーションだけreplaceする方法がないでしょうか?ということです。
詳しく説明しますと、
ある背景の上で、ものが転がっていくようにしたいのです。
数値をいじっては見たのですが、無理でした。
方法があるのでしょうか?

もしご存知でしたら、ご教授ください。

はじめまして

ちゅらさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。


私の知るかぎりにおいては、

背景1枚を固定して、キャラだけ動かすという機能は、
おそらく無いのではないかと思います。

ご面倒でしょうけれどもGIMPで作るのであれば、
背景となるレイヤーを複製して、

動かしたキャラのレイヤーと、
結合させるような形をとるしかなさそうです。

ありがとうございます

お返事、ありがとうございます!

やっぱり、そうなんですね。
ちょっと残念です。

ちょっと重くなりそうですが、今度作ってみようと思います。
ありがとうございました!

また、質問させてもらうかもしれませんが、
そのときはお願いしますm(_ _)m

残念

ちゅらさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。


ですねー、残念です。

Web上で使うということであれば、
背景画像をCSSで指定するという方法はありますけどねー。

ただ、それもきれいにいくかは分からないですから、
何ともねぇ。(´・(ェ)・`)

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/358-2541f485
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて