アニメーション画像は、インターネットのいたるところで見かけることができます。 ボタン、リンク、アイコン、背景、仕切り、バナー広告など、目を引くこれらの画像は、個人的な表現のための優れたツールになります。 このWikiHowでは、GIMPというフリーの画像編集ソフトを使って、GIFアニメ画像を一から作成する方法をご紹介します。
パート1
GIMPでアニメーションのフレームを作成する
-
GIMPを開きます。 GIMPはフリーでオープンソースの画像編集プログラムで、Photoshopに似たツールを備えています。 GIMPには、絵筆をくわえたキツネのアイコンがあります。 Windowsではスタートメニュー、MacやLinuxではアプリケーションフォルダにあるアイコンをクリックする。
- .NETから無料でダウンロードできる。
-
新規ファイルを作成します。 作成するファイルのサイズは、使用目的によって異なります。 バナー広告は通常、高さ60～120ピクセル、幅400～800ピクセルです。 ボタンは通常、高さ約40ピクセル、幅約300ピクセルです。 異なるウェブサイトソフトウェアやバナー交換システムは、独自の要件をリストアップします。 以下の手順で新しい画像ファイルを作成します：
- ファイル」をクリックします。
- 新規作成」をクリックします。
- 幅」の横にピクセル単位で幅を入力します。
- 高さ」の横にピクセル単位で高さを入力します。
- Okをクリックします。
-
画像の背景色を選択します。 アクティブな前景色と背景色は、左側のツールバーの下に重なった長方形で表示されます。 色を選択するには、上の長方形をクリックします。 色を選択するには、虹色の帯の中の色をクリックします。 虹色の帯の左側にあるボックスを使用して、色の影を選択します。 これでアクティブな描画色が選択されます。
-
画像に背景色を追加するには、ペイントバケツツールを使用します。 ペイントバケツツールには、ペンキを注ぐバケツに似たアイコンがあります。 ツールバーの左側にあります。 画面中央の画像アートボードをクリックすると、画像が背景色で塗りつぶされます。
- また、ブラシツールなどの他のツールを使って、背景レイヤー上に動かないオブジェクトを描くこともできます。
-
新規レイヤーを追加します。 レイヤーパネルは、アートボードの右下にあります。 新しいレイヤーを追加するには、プラス記号(+)のついた紙のような小さなアイコンをクリックします。 新しいレイヤーを追加するには、レイヤーパネルの左下にあるこのアイコンをクリックします。 画像内の動くオブジェクトごとにレイヤーを作成します。
-
画像に動くオブジェクトを追加します。 作成した新しいレイヤーを使って、画像に動くオブジェクトを追加します。 オブジェクトを描くにはブラシツールを、画像にテキストを追加するにはテキストツールを使います。 画像内のそれぞれの動くオブジェクトが、それぞれのレイヤーに配置されていることを確認してください。
-
画像の最初のフレームを作成します。 画像の動くオブジェクトをそれぞれのレイヤーに配置したら、すべてのオブジェクトをアニメーションの開始フレームに配置します。
-
画像の最初のフレームを静止画として保存します。 アニメーションは、フレームと呼ばれる多くの静止画像でできています。 アニメーションの各画像を静止画として保存する必要があります。 以下の手順で、アニメーションの最初のフレームを保存します：
- ファイル
- Export Asをクリックします。
- 名前の横に「[アニメーションファイル名] frame 1」と入力します。
- ファイルタイプの選択］をクリックします。
- JPEG画像をクリックします。
- エクスポートをクリックします。
- もう一度エクスポートをクリックします。
-
移動ツールを使って、フレーム内のオブジェクトを少し移動させます。 移動ツールには、上下左右を指す十字矢印のようなアイコンがあります。 移動ツールを使って、イメージ内の動いているオブジェクトをフレーム2の位置に少し移動させます。 GIFアニメーションの推奨フレームレートは、1秒間に10～30フレームです。そのため、各オブジェクトを各フレーム間でごくわずかに動かすだけでよいのです。
- 各フレーム間の動きをスムーズで一貫性のあるものにするには、グリッドをオンにするとよいでしょう。 グリッドをオンにするには、「表示」をクリックし、次に「グリッドを表示」をクリックします。
-
アニメーションの2フレーム目を保存します。 すべての動きのあるパーツを配置したら、次の手順で2フレーム目の画像を保存します：
- ファイル
- 名前を付けてエクスポート」をクリックします。
- "Name "の隣に"[GIF file name] frame 2 "と入力します。
- ファイルの種類の選択]をクリックします。
- JPEG画像をクリックします。
- エクスポートをクリックします。
- もう一度エクスポートをクリックします。
-
追加のすべてのフレームについて繰り返します。 この作業を続けます。 移動ツールを使って、アニメーションの各移動オブジェクトを少しずつ配置し、画像をフレームとして保存します。 各画像のファイル名にフレーム番号が含まれていることを確認してください（例：テキストスクロールフレーム1、テキストスクロールフレーム2、テキストスクロールフレーム3など）。
-
作品をGIMPファイルとして保存します。 後でフレームをやり直したり変更したりする必要がある場合に備えて、作品をGIMP (.xcf) ファイルとして保存しておくとよいでしょう。 ファイル名は「[アニメーション名] artboard.xcf」のようにします。 以下の手順で作品を保存します：
- ファイル］をクリックします。
- 名前を付けて保存」をクリックします。
- 名前」の横にファイル名を入力します。
- 保存をクリックします。
パート2
GIMPでアニメーションGIFを作成する
-
GIMPで新規ファイルを作成します。 アニメーションの各フレームの静止画を作成したら、GIMPで新規ファイルを作成します。 ファイルの幅と高さが、アニメーションのフレームの幅と高さに合っていることを確認してください。 GIMPで新規ファイルを開くには、以下の手順を使います。
- ファイル」をクリックします。
- 新規作成」をクリックします。
- 幅」の横に幅をピクセル単位で入力します。
- 高さ」に高さをピクセル単位で入力します。
- Okをクリックする。
-
アニメーションの各フレームを新しいレイヤーとして開きます。 GIMPは、各レイヤーをアニメーションの別々のフレームとして使用してアニメーションを作成します。 一番下のレイヤーがアニメーションの最初のフレームで、一番上のレイヤーがアニメーションの最後のフレームです。 以下の手順で、画像フレームを新規レイヤーとして開きます。 Shiftキーを押しながら最初と最後の画像フレームを選択すると、複数の画像を選択できます：
- ファイル
- レイヤーとして開くをクリックします。
- Shiftキーを押しながら最初の画像フレームファイルをクリックします。
- Shiftキーを押しながら最後の画像フレームをクリックします。
- 開くをクリックします。
-
各レイヤー名にミリ秒単位のフレームレートを追加します。 デフォルトでは、GIMPは毎秒10フレーム（100ミリ秒）のフレームレートでGIFアニメーションをエクスポートします。 各フレームの最後にミリ秒単位でフレームレートを追加して、フレームレートをもう少し速いものに変更するには、フレームのリストの各フレーム名の最後に括弧でフレームレートを追加します。 例えば、各レイヤー名の最後に"(33ms) "を追加すると、フレームレートは約30フレーム/秒になります。
-
アニメーションをプレビューする アニメーションをGIFとしてエクスポートする前に、プレビューすることができます。 これにより、アニメーションがどのように見えるかを確認することができます。 アニメーション・アートボード・ファイル内のフレームを編集する必要がある場合は、以下の手順に従ってください。 アニメーションをプレビューするには、次の手順を使用します：
- フィルタ］をクリックします。
- 再生」をクリックします。
- fps」ドロップダウンメニューを使用して、「Frames per Second」を選択します。
- 右上の再生ボタンをクリックします。
-
ファイルをGIFとしてエクスポートします。 GIFアニメーションの見た目に満足したら、次の手順でGIFアニメーションとしてエクスポートします。
- ファイル
- Export Asをクリックします。
- "名前 "の隣にファイル名を入力します。
- ファイルの種類を選択]をクリックします。
- GIF画像をクリックします。
- エクスポートをクリックします。
- もう一度エクスポートをクリックします。
- アニメーションとして」をクリックします。
- Delay between frames where unspecified:」の横にフレームレート（例：30）を入力します。
- エクスポートをクリックします。
コメント
最新を表示する
NG表示方式
NGID一覧