GIMPで写真(静止画)にGIFアニメーションを簡単に貼り付ける(合成する)方法

投稿 2016年12月01日
6
GIFアニメーションの作り方
GIMP静止画写真GIFアニメーション合成レイヤー連結一括移動

弊ブログをPCから閲覧の場合マイクロソフトのIEでは正しく表示しておりません! 閲覧ブラウザは Chrome や Firefox をお勧め致します。

【Embedly】

■ この記事は 2017/03/21 に再編集致しました。
■ この記事は 2016/12/04 に再編集致しました。


最近はTwitterやLINE等のSNSでもGIFアニメーションが扱えるようになって、一時期下火になってたものがまた人気復活して来ました(笑)
私はずっと以前より自分でもGIFアニメを作る(加工する)のがそこそこ好きでしたから、こういう傾向は嬉しくもありますし、弊ブログ記事にも多用しております。

数日前に、またまたYAHOO知恵袋を何気なく目を通してましたら

 YAHOO知恵袋より引用:


GIMPを使って、GIFアニメと静止画JPEGを
GIF画像を背景にして、合成する方法を教えてください!
動いているGIFをGIMPにいれて、画像にばらすところまでできたのですが、そのあと、
静止画を全てのコマに合わせたいのです。
どうやったらいいのか、教えてください!
-----------
合成したいJPEG画像をレイヤーとして、いずれかのコマのレイヤーの上に挿入し、レイヤーを統合します。
当然ながら全てのコマに対して同じ作業をすることになりますから、コマ数が多いほど作業量は多くなります。

アニメーションGIF画像を開く

合成したいJPEG画像をレイヤーとして開く

JPEG画像のレイヤーを合成したいコマのレイヤーより1つ上に移動

1つ下のレイヤー(合成したコマのレイヤー)と統合
以上を全てのレイヤーに対して行います。


こんな記事に目がとまったんです。

要は『 1枚の静止画に、動きのあるGIFアニメを貼り付けたい 』と言う質問者さんの意図ですよね。
で、質問者さんも回答者さんも『 GIFアニメを一旦バラバラに分解してコマ画像にして、それらの1枚ずつを、元々は1枚の静止画を複数コピーして、そこにバラバラにしたGIFアニメのコマを貼り付けて出来上がった複数枚数の静止画をまたGIFアニメに組み立てる 』と言う方法を、質問・応答しておりました。

いやぁ、読んでいて『おやおやぁ』なんて思ってしまいました (;^_^A アセアセ

これ、もの凄く手間と時間が掛かる方法なんです。
そして、この方法で出来上がるGIFアニメのファイル容量はとんでもなく大きなものになってしまうんです。

質問者さんが文中で言ってます『 GIMP(ギンプ) 』と言うソフトの「連結」と言う機能を使えば、こんな超面倒な作業なんて無用でして、パパパとバカチョン(死語ですね(爆))的に作業が完了してしまうのですよ。


では、その方法を画像とGIFアニメを駆使して(笑)解説してみます。
先ずは写真1枚とGIFアニメを1つ用意します。


2016-12-01-basis-1.jpg


何やらレンガのフェンスの上で物思いにふけってる風の人が居ます(笑)
この人をモデルさんと仮定して(笑)この男性が着ている洋服上下が売れ筋商品ってことでアピールする画像を作るネットショップのWebデザイナーのつもりになります(爆)

で、この画像に


2016-12-01-basis-2.gif


こんなGIFアニメを貼り付けてアピールする訳です(笑)
まあ、例としての発想の貧弱さはご容赦下さいね (^_^; アハハ…

この「売れ筋」のGIFアニメを分解してみると、下図のようにたったの2枚のコマで構成された単純なものであることが分かります。
でも、もっとコマ数の多いGIFアニメでもこれから解説する方法は同じです。


2016-12-01-1z.gif


GIMPの入手は

GIMP公式サイト

海外ソフトですが、ちゃんと日本語使用出来ます。
日本語での解説サイトやブログもたくさんあります。
日本語サイトからのダウンロードの方が安心な方は

GIMP2を使おう

からがよろしいでしょう。

インストーラーファイル「gimp-2.8.18-setup.exe」をダウンロードしてクリックすると


2016-10-25-gimp2818-ins.png


こんな画面が表示されますが「English」のままインストールして下さい。
インストールが済んでGIMP2を起動すると、自動的に日本語表示になります。

ただ、最初の起動時は


2016-10-25-gimp2-00.png


こんな画面が表示されて、いろいろなプラグイン機能を読み込むのに一寸時間が掛かります。


2016-10-25-gimp2818-desktop-t.png


その後、こんな画面( * マルチウィンドウモードの時の表示 )が立ち上がって利用出来るようになります。
本体画面とツールボックスは別々に独立しておりますから、デスクトップ上をマウスで好きな位置に移動出来ます。

* シングルウィンドウモードの時の表示例


2016-10-25-gimp2818-desktop-t2.png




さて、それではGIMPを起動して、早速作業に入りましょう。

GIMPの主画面に、最初に写真(静止画)をドラッグ&ドロップします。


2016-12-01-1.png


そしてから「売れ筋」のGIFアニメをやはりGIMPの主画面にドラッグ&ドロップします。


2016-12-01-2.png


写真もGIFアニメも、とりあえずは自動的に画面中央に貼り付きます。
でも、このGIFアニメがど真ん中ではセンス悪るすぎですよね、商品に重なってしまってますし(笑)
ですから、何処か他の任意な位置に移動したいものですが、ここでGIMPの機能が発揮出来ます(笑)
要は、GIFアニメの動きを維持したままで、2枚コマ構成のこのGIFアニメを「移動させる」という作業は、他のソフトの場合ですと実は単純なことではないんです。
でもGIMPですと、簡単に出来てしまうのです。
そのテクは、、、
GIMP画面の右側にあるツールタブの「レイヤー」タブをクリックすると


2016-12-01-3.png


このような青四角枠で囲った部分のように、GIFアニメのコマ2枚が「レイヤー(透明なスクリーンと思って下さい)」と言う形で静止画の上に重なっていることが分かります。
要は複数枚のコマで構成されているGIFアニメが、GIMPの主画面上では自動的に複数枚のレイヤーと言う形で存在するようになります。
さて、そのレイヤー欄の目玉アイコンの右隣の空白部分にマウスポインタを乗せると


2016-12-01-4.png


こんな具合に、白い四角形が浮き上がって来ますので、そこをクリックします。
そうすると


2016-12-01-5.png


ちょっと分かりにくいですが、鎖(チェーン)アイコンが現れます。
これがこの「売れ筋」GIFアニメの複数のレイヤーを一括で移動させるツールになるんです。
1つ下のレイヤーにも同様にしてチェーンアイコンを表示させます。
但し、その下の静止画には連結してはいけません。


2016-12-01-6.png


こんな具合で、これで「売れ筋」GIFアニメの2枚のレイヤーがチェーンで「連結」されたことになります。
この例では2枚構成のGIFアニメですが、もっと多数のコマ構成でも方法は同じで、チェーンで繋げれば良いんです。


2016-12-01-7.png


そしたら、GIMPの左ツールボックスの「移動」アイコンをクリックしてから、主画面の「売れ筋」GIFアニメにマウスを重ねてクリックしたまま任意の位置に引っ張って行くことが出来るんです。
つまりは、GIFアニメとしての動きを持ったまま静止画上を自由に移動させることが出来ると言うことなんです。


2016-12-01-gimp-ani-ido3.gif


こんな具合に移動出来ました。



さあ、早くももう作業完了目前です(笑)

あとは、保存するだけです。
GIMP画面上の主メニューの


2016-12-01-9.png


「ファイル(F)」→「名前を付けてエクスポート」をクリックします。


2016-12-01-10.png


そして、この画面で任意のファイル名を付けてから「エクスポート(E)」ボタンをクリックします。
ただ、ファイル名を付けるときに、その任意の名前の「拡張子」は必ず半角文字の ○○○.gif( ドットジーアイエフ ) のようにしなければGIFアニメーションにはなりませんから気をつけて下さい。

さあ、いよいよ最後の作業です(笑)
上図の「エクスポート(E)」ボタンをクリックすると


2016-12-01-11-1.png


こんな画面が現れますから赤枠部分の「アニメーションとしてエクスポート(A)」にチェックを入れます。
そして、その下の「無限ループ(L)」にもチェックを入れますが、この意味は、完成した画像上のGIFアニメーションが無限に動いていることを意味しますから、この場合には必要な設定になりますね。

そして、完成したGIFアニメは


2016-12-01-test.gif


こんな具合になります。

要は写真等の静止画に動きのあるGIFアニメを合成するにはGIMPでは「連結」と言う方法を使えば、簡単に任意の位置にGIFアニメを移動させて合成することが出来ると言うことなんです。

ただね~(笑)
私はこのGIMPでのノーマルな方法で完成したこのGIFアニメのパカパカ(笑)と明滅するようなアニメーションって

『 なんかもの足りないよね~ ウザイよね~(笑) 』

って、思ってしまうんですよね(爆)
私が納得するGIFアニメーションの動きは


2016-12-01-test-z.gif


ほんとはこういうのなんですけどね~。
こっちのGIFアニメの方が動きのセンスが良いと思いません? 上品でしょ(笑) 
まぁ、好き好きなんでしょうけど(笑)
これもGIMPで出来るんですけど、こう言う表現にするにはほんのちょっとだけテクニック(アイデア)が必要なんです。

次回記事でこの方法を紹介しましょうかね~ ヽ(^^ ) ヨシヨシ

別記事を書くまでもなく、ワンタッチで出来るんです(笑)けど、皆さん、お解りですかね~?
上記操作過程で、1回だけ何処かをワンクリック設定するだけで完成するんですよ(笑)

近々、その方法を追記しますね~。

■追記 2016/12/04 08:50

上図GIFアニメのような品の良い(笑)アニメーションにするには作業工程途中の ここ で、、、

要は、「売れ筋」GIFアニメの移動場所が決定して、その後の保存操作の前に下記のような手順を行うだけでいいんです。


2016-12-03-tuiki1-.png


上図のようにレイヤーの「背景」の部分にマウスポインタを置きます。
そして、そこで右クリックすると、メニューが現れます。


2016-12-03-tuiki2.png


上図メニューの中の


2016-12-03-tuiki3.png


「下のレイヤーと統合(W)」をクリックします。
そうすると


2016-12-03-tuiki4.png


レイヤーの「背景」が、その下の静止画に貼り付いて、1枚の画像になるのです。
ですからレイヤー数が3枚だったものが2枚になっていることが分かりますね。
これで上品なアニメーション(笑)を演出する設定が完了です。

あとは、それを上記操作手順の「保存」操作をしてあげるだけです。
簡単ですね(笑) ヽ(^^ ) ヨシヨシ


ただ、動画や写真(静止画)とGIFアニメーションを重ね合わせるような合成をするんでしたら、このGIMPを使った方法よりも【AviUtl(エーブイアイユーティル)】と言うソフト(無料)を使う方がもっと簡単に出来ます。
【AviUtl】でのいろんなパターンで弊ブログ記事を書いてありますから、下記リンクからご参照下さい。


GIFアニメーション同士を重ね合わせる(合成する)のはAviUtlで簡単に出来るんです

最近GIFアニメーションの記事を多数書いておりますが、今回は 『 GIFアニメーション同士を重ね合わせる


動画とGIFアニメーションを合成するにはAviUtlだと簡単に出来るんです

年の暮れに(笑)いろんな動画素材を見てましたら に目がとまったんです。ローラースケートのシーンですけど


AviUtl 静止画同士の合成でも動きのあるGIFアニメーションを作れます

■ 追記しました 2016/12/27 弊ブログのカテゴリに「 二重露光デジタルアート」というものがあります。





検索からの方は
トップページへもどうぞ

[ 関連記事 ]
もっと見る
ぼっちん
ぼっちん

6 COMMENTS

There are no comments yet.

メグ  

ふぉぉぉ~・。+*

簡単なようで、、、

やっぱメグなんか脳みそ老化してるし最近とみに気力がなくなってるから

しっかり睡眠とって頭クリアにして気力も充実してる時じゃなきゃとりかかれないな~

実は趣味のネットショップをオープンしようと手をつけはじめたのだけど根気がなくて放置状態です~。
(^_^;)

いつか参考にさせていただきます~。
    ↑
いつのことやら!!

2016/12/01 (Thu) 23:23

ぼっちん  

メグたんへ

メグたん、コメントありがとちゃま~♪ (^_-)-☆パチッ

簡単なようで、、、
やっぱメグなんか脳みそ老化してるし最近とみに気力がなくなってるから
しっかり睡眠とって頭クリアにして気力も充実してる時じゃなきゃとりかかれないな~


あのねぇ(笑)
脳みその程度には関係なしで、この記事のまま操作してくれたらパパパって出来ちゃうように書いてあるのよ(笑)
記事の文字列を目で追ってると、なんかとんでもなく面倒な感じに思えるでしょうけど、実際にパソコンで操作すると「なんだぁ、たったこれだけ?(笑)」って笑っちゃうくらい簡単だから (〃^▽^〃)oあはははっ♪

実は趣味のネットショップをオープンしようと手をつけはじめたのだけど根気がなくて放置状態です~。
(^_^;)


w(゜o゜)w オオー! メグたんのアレ(笑)って、趣味の領域なんかじゃなくて、もう匠の技の芸術品だってば うんうん(^-^)

だから、はやくネットショップ完成させて、メグたんのアレを入手する喜びを皆さんに分け与えてあげて欲しいくらいだよ ヽ(^^ ) ヨシヨシ
実物を見せて貰った時に「なんとみごとで秀逸な♪」って感嘆しちゃったんだってば。
未だに目に焼き付いてる、あの時の感動が♪

ネットショップ構築のお手伝いしようか? 無償の愛の心で (≧ω≦。)プププ
ああ、サングラスの奥の方から ウリャ(;-_-)/∝━━━━━━∈グサグサ ってヤキモチ妬かれちゃうね~(爆)

2016/12/02 (Fri) 09:02

シバシバ  

アニメーションGIFの貼り付けについて

はじめまして。
私も静止画にアニメーションGIFを貼り付けるのに困っていて
上記の記事で解決いたしました。ありがとうございました。
ただ、アニメーションGIFを貼り付けるとアニメーションGIFの背景が
透明化されませんでした。
アニメーションGIF自体は背景が透明化されていましたが、
貼り付け後確認すると1コマ目は透明化されていたのですが、2コマ目以降背景が透明化されませんでした。この場合、どのようにすればよいでしょうか。
もしわかればご教授して頂ければ幸いです。
よろしくお願いします。以上

2017/03/12 (Sun) 18:17

ぼっちん  

シバシバ さんへ

シバシバさん、はじめまして コメントをありがとうございます ^^

ご質問の件ですが、簡単に処理(背景の透明化)出来ますよ。
その方法は、GIFアニメのレイヤー連結する時に出てくる縦長のメニュー欄に「アルファチャンネルの追加(H)」と言うメニューがあります。
参考図は
http://blog-imgs-100.fc2.com/o/o/p/oops0011/2016-12-03-tuiki2.png
この図の下から上に5番目部分です。
参考図ではグレーアウトしてて操作が出来ないようになっておりますが、GIFアニメ背景が黒くなってる時には操作できる表示になってますから、ポチっとクリックしてあげると、そのレイヤーの背景が瞬時に透明になります。
各必要レイヤーでそれをポチっとしてあげれば完了します ^^

実は、この記事は私の友人に「GIMPフリーク」(笑)な男がおりまして『オレはどうしてもGIMPで静止画とGIFアニメの合成がやりたいんだ!』って言い張りまして(笑)彼の為に書いた記事なんですけど、もっと簡単に静止画や動画を背景にしてGIFアニメを合成出来るソフト(無料)があるんです。
その記事は

『動画とGIFアニメーションを合成するにはAviUtlだと簡単に出来るんです』
http://oops0011.blog.fc2.com/blog-entry-128.html

こちらをご参照下さい ^^
記事タイトルには「動画とGIFアニメーションを合成する」にしてありますけど、静止画でも方法はそのまま同じです。
このAviUtlですと「アルファチャンネル」操作はクリック1発でGIFアニメの全レイヤーを透明化出来てしまいます(笑)

2017/03/13 (Mon) 08:26

シバシバ  

Re:アニメーションGIFの貼り付けについて

ぼっちん様
丁寧な解説ありがとうございました。
チャレンジしてみたのですが、説明の部分を確認するとグレーアウトしていてアルファチャンネルを追加することが出来ませんでした。念のためにその下に「アルファチャンネル削除」があったので、一旦削除し追加する形もやってみましたがだめでした。ただ、静止画にアニメーションGIFを貼り付けた状態を確認すると静止画がアニメーションGIF越しにみえるので貼り付けたての状態ではすべてのGIFで透過されているように見えました。しかし、出力すると2コマ以降の背景が不透明化されてしまっていました。たまたま使用したアニメーションGIFがおかしいのかと思い別のアニメーションGIFを使用してみましたが同じでした。
目的が静止画にアニメーションGIFを貼り付けることなのでAviUtlをチャレンジしてみます。せっかく解説していただきましたが生かせずすみませんでした。

2017/03/18 (Sat) 14:05

ぼっちん  

シバシバさんへ

ご丁寧な状況解説をありがとうございます。

(~ヘ~;)ウーン その実現しなかった要因を掴めずに困惑しております (^^ゞポリポリ

ただ「静止画にアニメーションGIFを貼り付ける」と言う行為は、GIMPで行うよりは、AviUtlの方が遙かに簡単で僅かな時間でスパッと出来てしまいますし、GIFアニメを任意の位置に移動させることもワンタッチで出来てしまいます。
ですから、AviUtlで行う方が慣れればずっと楽なんですよね(笑)

AviUtlでGIFアニメを扱う為の事前設定がちょっと面倒に感じられるかもしれませんが、1回だけの設定ですから、是非頑張ってチャレンジしてみて下さい。

成功を祈っております ^^


2017/03/18 (Sat) 14:16

LEAVE A REPLY