GIFアニメーションの動きを維持したままに一部分を切り抜いたりリサイズする簡単な方法-その1(GIMP2)

投稿 2016年10月25日
13
GIFアニメーションの作り方
GIFアニメーション切り取りリサイズGIMP2

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


弊ブログでは、記事中によくGIFアニメーション( ここからはGIFアニメと略します )を載せております。
画像がピクピクって動いてるアレです(笑)

例えば





これは、私のパソコンのセキュリティ監視をしてくれてるウイルスバスタークラウドでの操作をGIFアニメにしたものです。
こんなGIFアニメを、動きを維持したままに部分的に切り抜いたり、全体をリサイズ( 縦横サイズの変更 )する簡単な方法が実はあるんです。

この方法を知らない人はどうやってそれを実現するかと言いますと、そのGIFアニメを一旦バラバラに分解して1枚1枚のコマ画像にして、それを色々な画像処理ソフトで必要部分の範囲を切り取ってから、またGIFアニメに組み立てると言う、途方もなく面倒なことをする訳です (^_^; アハハ…
まあ、かくいう私もずっと昔には「そういう方法しかない」ってことで根性と気合いで(笑)そんな作業をしてたものです。

でも、今の時代は多様な画像処理ソフトがあり、その中でも無料ソフトの『 GIMP2 』と言う超絶(笑)画像処理ソフトは、先ほどの処理をパパパといとも簡単に片付けてくれるから驚いてしまいます。

今回は『 GIMP2.8.18(無料ソフト) 』と言う最新バージョン





でその方法を解説しましょう。

以前よりGIMP( ギンプ)をお使いの方は改めてインストールする必要はありませんが、出来ることでしたら、バージョンは「GIMP2」のものが好ましいです。

初めてGIMPを知る人は、検索されて出てくるたくさんの情報を全部読まないでも「なにこれ~? ほんとにタダで良いの?」ってびっくりしますよ(爆)
なんたって、かの有名な「Photoshop」に匹敵する?くらいの機能を持ってますからね。
私ももう何年も前からタダでGIMPを使ってますけど、どこからも請求は来てません(笑)
公式サイトでは
*************
Q: GIMPの有料化には興味がないのですか?
A: 私たちはすでに仕事を持っています。GIMPの有料化は考えてません。 しかし、個人的な寄付活動は積極的に奨励しています。
*************
としています。

GIMP公式サイト

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

GIMP2を使おう

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

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





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

ただ、最初の起動時は





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





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

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






このGIMP2を使って「GIFアニメーションの動きを維持したまま一部分を切り抜く」ことをやってみます。
先ほどのGIFアニメを例にしてみます。


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]



■ このGIFアニメにはスタートボタンがありますが、これは私がカスタマイズしたものでして、通常のGIFアニメには存在しないものですのでご承知下さい。

このGIFアニメの一部分だけ「切り抜き」してみます。
ほんとはこの機能、みなさんに見せたくない(笑)私の秘密兵器的機能なんですけど、今回は出血大サービスで解説しちゃいます(笑)

GIMP2を起動して、この画面に上記GIFアニメをドラッグ&ドロップします。




画面の一部分に破線の四角形が見えてますが、これは気にしないで下さい。
私のサンプル画像の用意の仕方がまずかったんです (^^ゞポリポリ


そして、GIMP2画面上のメニューの「選択(S)」→「すべて選択(A)」をクリックします。





そしたら画面左のツールボックスのカッターアイコン(赤枠部分)をクリックします。





そしてから、切り取りたい部分をマウスドラッグして囲みます。





このように、切り取りたい部分が選択されます。

いま、丁寧すぎるくらいに細かく操作を書いてますからね~(笑)
『 なんだか操作が多くて面倒そうじゃん (^_^; アハハ… 』 なんて苦笑い(笑)しないで下さいね。
慣れればあっという間のパパパな一連の操作なんですから。

さぁ、いよいよ「切り取り」です。
マウスで切り抜きたい部分を四角に囲んだその内側の4つの角に小さい四角が表示されます。
(操作によっては1つの場合もある)
そのうちのどの四角でもけっこうですから、そこにマウスを乗せてクリックしてください。
それで、切り取りが下の画像のようにスパッ!と完了します(笑)





ここでは操作はまだ終わってません。
切り抜いた部分をGIFアニメーションとしての「動きを含んだままの保存」をします。
ただ普通に保存してしまうと、単なる静止画像の保存しか出来ませんから、それでは今までの操作が水の泡になってしまいます。

GIMP画面上部メニューの「ファイル(F)」をクリックすると別メニューが現れますから、その「名前を付けてエクスポート」をクリックします。





保存用の別画面が出ますから、保存する「ファイル名」を記入してから「エクスポート(E)」ボタンをクリックします。
(保存先に注意してください、パソコン内で行方不明にならないように(笑))
ただし、保存するファイル名の「拡張子」は必ず半角の .gif(ドットジーアイエフ) にする必要があります。

例: aaa.gif





エクスポートボタンをクリックすると、いよいよ最終画面が開きますから下図の赤枠の「アニメーションとしてエクスポート(A)」にチェックを入れてから「エクスポー(E)」をクリックで全操作が完了します。





上記図中の「無限ループ(L)」のチェックは、お好みで設定してもしなくてもいいです。

■ 「無限ループ(L)」にチェックを入れると、GIFアニメーションを再生した時に何度も繰り返しアニメーションが動きます。


そして、切り取りが完成したGIFアニメーションは


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]


こんな具合に、アニメーションの動きがあるままに切り取りが出来た訳です。
こんなすご技(笑)がパパパっと出来ちゃう無料ソフトって、私は他にお目にかかったことがありません(笑)


GIFアニメーションの画像サイズをリサイズするには

GIFアニメーションの動きを維持したままに一部分を切り抜いたりリサイズする簡単な方法-その2(GIMP2)


の記事をご参照下さい。





あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


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



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

13 COMMENTS

There are no comments yet.

りんりん♪  

ありがとうございます

ぼっちんさん

ぼっちんさんに教えてもらってから、すっかり虜になってしまったGIFアニメーション( *´艸`)

クリスマス、お年賀にと思ってた所でのこの記事です。
ありがとうございます(* ̄∀ ̄)ゞ

いつも、丁寧に描かれているので初心者な私にもとても分かりやすいですd(^_^o)

2016/10/27 (Thu) 17:33

ぼっちん  

りんりん♪ ちゃんへ

りんりん♪ちゃん

まいどコメントをありがとです~ ^^

GIFアニメってけっこう楽しいでしょ~(笑)
年賀のメールにGIFアニメを貼り付ける人ってけっこう多いんです。
自分で作ったものを添付すれば、なお楽しくもなるけどね~(笑)

いつも、丁寧に描かれているので初心者な私にもとても分かりやすいですd(^_^o)
うんうん(^-^) 嬉しいお言葉、ほんとにありがとです~ ^^

次回記事は、GIFアニメのリサイズ記事です。
下書きをボチボチやってるところだから、楽しみにしてて下さいね~ v-218

2016/10/27 (Thu) 20:38

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/05/24 (Thu) 22:13
ぼっちん

ぼっちん  

To 鍵コメさん

鍵コメさん、こんばんは~♪
なんとなんと、膨大な数の弊記事を読んでくださったんですねぇ、ありがとうございます ^^

いやはや、ご指摘くださったこの記事ページの崩れには笑ってしまいました (^_^; アハハ…
ご親切に教えてくださってありがとうございます (^^ゞポリポリ
いま
【 HTML終了タグチェッカー 】
https://oops0011.blog.fc2.com/blog-entry-214.html
にてチェックしたら
---------------
(257行目) </div> : <article class="main-body">よりも先に閉じてしまっています
(264行目) </article> : <div id="main-fit-wrapper">よりも後で閉じてしまっています
(412行目) </div> : <main id="primary">よりも先に閉じてしまっています
(413行目) </main> : <div id="main-container">よりも後で閉じてしまっています
(2029行目) </div> : 開きタグがありません
---------------
こんなに複合的なエラーが出ていて、もうもう笑ってしまいました、いやはやお恥ずかしい限りです (^^ゞポリポリ

明日にでも修正しますね~(笑)
教えてくださって、ほんとにありがとうございました m(_ _)m

2018/05/24 (Thu) 22:44

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/05/24 (Thu) 23:02
ぼっちん

ぼっちん  

To 鍵コメさん

またまたのコメントをありがとうございます(笑)
「Clover」記事から導入までされた由で、そのようにいろいろと記事を活用してくださってて、嬉しくなっちゃいますよ (^_^)ニコニコ 
ほんとに執筆の励みになって嬉しいです ^^

ところで先ほどの複数出ていたエラーの原因は、実はこの記事内で使ったHTMLタグの </div> と言う終了タグが1個余分に書いてあったことが原因で発生しておりました (^_^; アハハ…
それを削除しただけで、1発で全部直りました(爆)

2018/05/24 (Thu) 23:15

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/05/24 (Thu) 23:31

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/05/25 (Fri) 00:52
ぼっちん

ぼっちん  

To 鍵コメさん

おはようございます ^^
あれからすぐ寝落ちしてしまいました (^^ゞポリポリ

ご自身で良いアプリが見つかったご様子で良かったですねぇ。
私は、スクショアプリは

SnapCrab
https://www.fenrir-inc.com/jp/snapcrab/

を常用しておりまして、これだとご要望のマウスドラッグして青色反転したままのシーンでも楽々とスクショが撮れたり、ポップアップ部分だけスクショを撮れる機能もあって、とっても重宝しております ^^

また画面上の動作しているシーンを録画して、記事にGIFアニメーションで貼ったりすることも多いんですけど、その場合には

ScreenToGif
https://freesoft-100.com/review/screentogif.html

が重宝しております ^^
お時間がある時にでもお試し下さいね ^^

そそ、鍵コメさんが殆ど毎日弊ブログを覗いてくださってる様子は、アクセス解析でよく分かっておりますよ~ ありがとうございます (^_^)ニコニコ 

2018/05/25 (Fri) 07:48

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/05/25 (Fri) 09:25
ぼっちん

ぼっちん  

To 鍵コメさん

一定期間以上古い記事の最下部のホームへ戻るwebアイコンが文字化けしています。
ハーイ(^O^")/ その通りです~(笑)
Font Awesome5へのバージョンアップで、4の時のままのものが ? 表示されてしまっているんですけど、ついでの時にボチボチと修正しております (^_^; アハハ…

ただ、この Font Awesome5 ってどうにも「表示に重さがある」から「ヤダねぇ、これ~!」って思ってましてね (^^ゞポリポリ
他にも疑似要素で表示させると「いろいろと問題が起きる」ことも目撃しちゃってる(本来Font Awesome5では疑似要素は利用はダメ!って当事者も言ってますけど(爆))から、その ?表示 からの修正にも意欲が入らなくて「放置で良いよね~ (≧ω≦。)プププ」って思っている次第なんですけどね (^^ゞポリポリ

2018/05/25 (Fri) 09:46

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/05/25 (Fri) 17:05
ぼっちん

ぼっちん  

To 鍵コメさん

こんばんは~ ^^
熱心にコメントくださってありがとうございます ^^

ねっねっ SnapCrab けっこう便利でしょ~ 私は殆ど毎日のように何らかのスクショを撮ることが多いもんですから常用してるんですよね(笑)
これ使い始めたらすっかりGyazoも使わなくなってしまって、使い方も忘れちゃいました(爆)

参考にして戴けるような記事がありましたら、じゃんじゃんパクッて下さいね~ (≧ω≦。)プププ
まとめサイトのようなドロボー的まるごとパクリじゃだめですけど、ご自分流にアレンジして使って戴くことはおおいに結構です(笑)

2018/05/25 (Fri) 19:01

LEAVE A REPLY