アニメーション画像はインターネットで見つけることができます。ボタン、リンク、アイコン、背景、区切り線、バナーなどとして使用すると、これらの魅力的な画像は、あなたの個性や迷惑さ、またはその中間のあらゆるものを表現するための優れたツールになります。 この記事では、GIMP を使用して独自の .gif 画像アニメーションを最初から作成するための基本的な手順について説明します。 ステップ- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/Create-an-Animated-GIF-Image-with-GIMP-Step-1-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/2\/2f\/Create-an-Animated-GIF-Image-with-GIMP-Step-1-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 1 GIMP を実行し、「ファイル > 新規」を使用して新しい画像を作成します。必要に応じて、「GIMP のインストール方法」をお読みください。
- 選択する画像サイズは、目的によって大きく異なります。バナー広告は通常、高さが 60 ~ 120 ピクセル、幅が 400 ~ 800 ピクセルです。さまざまな Web サイト ソフトウェアとバナー交換システムには、独自の要件が記載されています。ボタンの場合、高さは通常 40 ピクセル以下、幅は通常 300 ピクセル未満です。スプリッター、機能、ウィジェット、装飾、その他の機能に制限はありませんが、使用するドライブ容量と帯域幅はどれくらいですか?
- このチュートリアルでは、幅 200 ピクセル、高さ 20 ピクセルを選択し、「OK」をクリックします。 GIMP は小さくてきれいな白い長方形を作成します。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/10\/Create-an-Animated-GIF-Image-with-GIMP-Step-2-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/1\/10\/Create-an-Animated-GIF-Image-with-GIMP-Step-2-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 2ツールボックスが表示され、レイヤー ツールが使用可能であることを確認します。作成する各レイヤーは、アニメーションの「フレーム」になります。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/85\/Create-an-Animated-GIF-Image-with-GIMP-Step-3-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/8\/85\/Create-an-Animated-GIF-Image-with-GIMP-Step-3-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3塗りつぶしツールを使用して、背景レイヤーを黒で塗りつぶします。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/Create-an-Animated-GIF-Image-with-GIMP-Step-4-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/2\/24\/Create-an-Animated-GIF-Image-with-GIMP-Step-4-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 4 「フィルター->ベース->モード>グリッド」を使用し、水平値と垂直値の間の小さなチェーン記号をクリックしてそれらを解き、水平幅3、垂直幅4、交差0、水平間隔22、垂直間隔18、交差間隔2、水平オフセット1、垂直オフセット0、交差オフセット6を入力します。濃い赤の水平および垂直のグリッド線の色を選択し、[OK] をクリックします。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c3\/Create-an-Animated-GIF-Image-with-GIMP-Step-5-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/c\/c3\/Create-an-Animated-GIF-Image-with-GIMP-Step-5-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 5 「レイヤー」ツールを使用して、背景レイヤーを右クリックし、「レイヤーの複製」を選択します。次に、「背景コピー」という名前のレイヤーを右クリックし、「レイヤー プロパティ」を選択して、「フレーム 1」などの単純な名前に変更します。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/Create-an-Animated-GIF-Image-with-GIMP-Step-6-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/4\/4e\/Create-an-Animated-GIF-Image-with-GIMP-Step-6-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 6同じ方法を使用して、合計 16 フレームと背景フレームを 16 回コピーします。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/32\/Create-an-Animated-GIF-Image-with-GIMP-Step-7-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-7-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/3\/32\/Create-an-Animated-GIF-Image-with-GIMP-Step-7-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-7-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7これまでの作業を保存します。アニメーションによっては複数のバリエーションがあり、1 つのフレームを保存しておくと、後続のバリエーションを作成する時間が大幅に節約されます。これらのベース ファイルは、「LightBarBase.xcf」など、GIMP 内で .xcf 形式を使用して生成されます。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e4\/Create-an-Animated-GIF-Image-with-GIMP-Step-8-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-8-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/e\/e4\/Create-an-Animated-GIF-Image-with-GIMP-Step-8-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-8-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 8すべてのフレームの横にある目のアイコンをクリックして、フレームを非表示にします。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-an-Animated-GIF-Image-with-GIMP-Step-9-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-9-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/9\/99\/Create-an-Animated-GIF-Image-with-GIMP-Step-9-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-9-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 9フレーム 1 を選択し、フレーム 1 を表示して、左端のグリッドを明るい赤で塗りつぶします。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d3\/Create-an-Animated-GIF-Image-with-GIMP-Step-10-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-10-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/d\/d3\/Create-an-Animated-GIF-Image-with-GIMP-Step-10-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-10-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 10最初のフレームを非表示にして、2 番目のフレームを表示し、2 番目のフレームを選択して、次のボックスを同じ色で塗りつぶします。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a7\/Create-an-Animated-GIF-Image-with-GIMP-Step-11-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-11-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/a\/a7\/Create-an-Animated-GIF-Image-with-GIMP-Step-11-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-11-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 11同じ方法を使用してすべてのフレームを完了し、右端のフレームに到達したら左に戻ります。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8a\/Create-an-Animated-GIF-Image-with-GIMP-Step-12-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-12-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/8\/8a\/Create-an-Animated-GIF-Image-with-GIMP-Step-12-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-12-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 12軽微な変更を加えたい場合に備えて、バックアップとして保存します。 「ライトバー保存.xcf」
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/Create-an-Animated-GIF-Image-with-GIMP-Step-13-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-13-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/2\/23\/Create-an-Animated-GIF-Image-with-GIMP-Step-13-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-13-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 13 「背景」レイヤーを削除します。これを最後に行うことで、間違いを修正したり、背景の展開アニメーションを複製したりできますが、通常、アニメーションの最後には必要ありません。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/Create-an-Animated-GIF-Image-with-GIMP-Step-14-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-14-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/3\/3d\/Create-an-Animated-GIF-Image-with-GIMP-Step-14-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-14-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 14 「ファイル->名前を付けて保存」を選択し、ファイルに「LightBar.gif」という名前を付けて、「保存」をクリックします。 GIMP は、表示されているレイヤーを結合するか、アニメーションを保存するかを尋ねます。 「アニメーションとして保存」を選択し、「エクスポート」をクリックします (注: 新しい GIMP バージョンでは、GIF 形式では「名前を付けて保存」コマンドを使用できません。「名前を付けて保存」の代わりに「エクスポート」メニューを使用できます)。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/Create-an-Animated-GIF-Image-with-GIMP-Step-15-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-15-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/0\/0b\/Create-an-Animated-GIF-Image-with-GIMP-Step-15-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-15-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":" class=\"mw-parser-output\"><\/div>"} 15次のウィンドウには、フレーム間に標準的な遅延を設けて、ファイル内の gif コメントを保存する場所が表示されます。数値が大きいほど、アニメーションが遅くなります。 (注: GIMP の新しいバージョンでは、コメントとフレームのオプションはエクスポート ダイアログ自体内にあります)。
- {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/Create-an-Animated-GIF-Image-with-GIMP-Step-16-Version-3.jpg\/v4-460px-Create-an-Animated-GIF-Image-with-GIMP-Step-16-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/i mages\/thumb\/1\/11\/Create-an-Animated-GIF-Image-with-GIMP-Step-16-Version-3.jpg\/v4-728px-Create-an-Animated-GIF-Image-with-GIMP-Step-16-Version-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 16最後に、「保存」をクリックします。新しい GIF アニメーションが完成しました。 広告する
ヒント- .gif 画像では選択できる色が 256 色しかなく、「透明」もその 1 つであるため、シェーディングをやりすぎると、最終的なエクスポートで影が消えてしまうことに注意してください。
- GIF 形式のアニメーション機能と透明化機能を組み合わせると、非常に優れた効果が得られます。
- 効果的なコミュニケーションという点では、派手で失礼なものよりも、可愛くて面白いものの方が効果的であることが多いです。
- 明るい光の後ろに「長い」調光ライトを追加すると、画像がさらに良くなります。
警告する- 強烈に点滅する画像やメッセージは、頭痛、吐き気、仲間の軽蔑を引き起こす可能性があります。
広告する必要なもの- Mac、Linux、Windows を含むほとんどの PC で実行できる無料のオープン ソース グラフィック作成/編集プログラムである GIMP をインストールします。
|