はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. ·...

9
GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん 1/9 以下は、背景が透明ではなく、白だった蝶々のGIFアニメファイルの背景を「透明」にする際のGIMPでの操作をまとめたも のです。 はじめに GIFアニメというのは複数のGIF画像を一つのGIFファイルに纏めて順番に表示させることによってパラパラ漫画のように一 見動画風に見せることが出来る便利なものです。Webページでよく利用されている形式です。普通の動画ファイルと違って 特別な再生のためのアプリは不要です。 なぜ背景を透明にするのか 普通は意識しなくて良いのですが、色付きの背景の上にGIFファイルを貼り付けるとGIFファイルは矩形の領域を使って作 成されていますので、対象の図形以外の背景も貼り付けられてしまい白抜きの図になってしまいます。これを、丁度、画 用紙を切抜いた図を貼り付けるようにしたいわけです。下の図を見ると違いがわかると思います。 左側の蝶々は透明化を行っていないGIFファイルを貼り付けたもので、右側が透明化を行った GIFファイルを貼り付けたものです。透明化を行うと背景に溶け込みますね。「白」と「透明」の違 いは白い背景の上では気になりませんが、色付きの背景では見栄えが随分変わります。 GIMP での操作 以降の操作はGIMP2.8.14でのものです。 背景を透明化したい GIF アニメファイルの読み込み 【ファイル】メニューからGIFアニメのファイルをインポートします。Drag&Dropでも出来ます。 読み込んだ画像が編集ウィンドウとレイヤーウィンドウに表示されます。編集ウィンドウは見やすいように拡大表示し ておくと良いでしょう。

Transcript of はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. ·...

Page 1: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

1/9

以下は、背景が透明ではなく、白だった蝶々のGIFアニメファイルの背景を「透明」にする際のGIMPでの操作をまとめたも

のです。

はじめに GIFアニメというのは複数のGIF画像を一つのGIFファイルに纏めて順番に表示させることによってパラパラ漫画のように一

見動画風に見せることが出来る便利なものです。Webページでよく利用されている形式です。普通の動画ファイルと違って

特別な再生のためのアプリは不要です。

なぜ背景を透明にするのか 普通は意識しなくて良いのですが、色付きの背景の上にGIFファイルを貼り付けるとGIFファイルは矩形の領域を使って作

成されていますので、対象の図形以外の背景も貼り付けられてしまい白抜きの図になってしまいます。これを、丁度、画

用紙を切抜いた図を貼り付けるようにしたいわけです。下の図を見ると違いがわかると思います。

左側の蝶々は透明化を行っていないGIFファイルを貼り付けたもので、右側が透明化を行った

GIFファイルを貼り付けたものです。透明化を行うと背景に溶け込みますね。「白」と「透明」の違

いは白い背景の上では気になりませんが、色付きの背景では見栄えが随分変わります。

GIMPでの操作 以降の操作はGIMP2.8.14でのものです。

① 背景を透明化したい GIF アニメファイルの読み込み

【ファイル】メニューからGIFアニメのファイルをインポートします。Drag&Dropでも出来ます。

読み込んだ画像が編集ウィンドウとレイヤーウィンドウに表示されます。編集ウィンドウは見やすいように拡大表示し

ておくと良いでしょう。

Page 2: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

2/9

レイヤーウィンドウで、読み込まれたGIFアニメが15フレームのレイヤーとして扱われていることが分かります。

拡大しておく

Page 3: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

3/9

インポートされたGIFアニメの各フレームは「レイヤー」として読み込まれます。 フレームは、このGIFアニメでは15フレ

ームありますので、15枚のレイヤーとして読み込まれます。

Page 4: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

4/9

② レイヤーごとに背景を透明にします

背景を透明にしたいフレーム以外は「目」

アイコンをクリックして「非表示」とします。

背景を透明にしたいフレームの「目」アイコ

ンを表示させておく。

背景を透明にしたいフレームのプレビュー

アイコンをクリックして選択しておく。

Page 5: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

5/9

③ ファジー選択を選び透明にしたい背景を選択します

ツールボックスの「ファジー選択」アイコンをクリックして「ファジー選択」ツールを選択します。

透明化したい場所をクリックすると領域が自動的に認識され点線で囲まれます。

自動的に認識された範

囲 が 点 線 で 囲 ま れ ま

す。

Page 6: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

6/9

【色】メニューから「色を透明度に...」を選びます。

透明化する範囲がプレビューされ格子状の表示になるので選択範囲を再確認できます。

Page 7: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

7/9

編集ウィンドウに透明化後の画像が表示されます。

同様に、残りの透明化対象領域の選択と透明化を繰り返します。

Page 8: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

8/9

④ GIFアニメファイルとして保存する

全フレームの透明化が終わったらGIFアニメとして書き出します。

【ファイル】→「名前をつけてエクスポート」でGIFファイルに保存します。

ファイル名を指定後【エクスポート】をクリッ

クします。

Page 9: はじめに なぜ背景を透明にするのか での操作 · 2015. 11. 24. · 以降の操作はGIMP2.8.14でのものです。 ① 背景を透明化したいGIFアニメファイルの読み込み

GIMP による GIF アニメファイルの編集(背景の透明化) 2015-11-25 そとじくん

9/9

GIFオプションとして①アニメーションとして②無限ループ③レイヤーごとに1フレームのチェック、選択を行います。

以上で、背景の透明化完了です。

以上

GIF オプション設定後【エクスポート】をクリ

ックして保存します。