「セブン」っぽいアニメGIFを作る

作成:12.01.1996
改訂:10.10.1998




今回は映画「セブン」のタイトルクレジットのようなものをアニメーションGIFで作ってみたいと思います。
  • 材料 素材写真(なくてもかまいません)。
  • 道具 Adobe Photoshop3.0以上(ここではPhotoshop5.0使用)、
    任意のアニメーションGIF作成ツール(ここではMacintosh用GifBuilderを使用しています)


Step1:フレーム画像の作成

PhotoshopではアニメーションGIFを編集することはできません(アニメーションGIFを開くと最終フレームのみが見えます)。このため、今回は個々のフレームをPhotoshopで作成し、後で別ファイルに保存してからGifBuilderに持ち込みます。

  1. 新規ファイルの作成
    Photoshopで150×100ピクセル、72dpiで新規ファイルを作成します。

  2. 新規レイヤーの作成
    各フレームごとにレイヤーに描画するため、新規のレイヤーを作成します。
    レイヤーパレットのメニュー(右上の三角マークをクリック)から[新規レイヤー]を選択し、「レイヤー1」を作成します。

  3. レイヤーを黒く塗りつぶす
    「レイヤー1」がアクティブな状態で[編集]メニューの[塗りつぶし...]で「使用」に「黒」、不透明度に100%を指定し、背景を真っ黒に塗りつぶしてしまいます。

  4. フレーム数ぶんレイヤーをコピーする
    レイヤーパレットのメニュー(右上の三角マークをクリック)から、[レイヤーを複製]を選択し、「レイヤー1」のコピーをフレームの数ぶん作成します。



  5. 各レイヤーの描画
    レイヤーパレットをクリックしてアクティブにしながら、各レイヤーを描画していきます。

    • 手書き風文字の入力
      描画色を白にして、鉛筆ツールを選択し、マウスやタブレットを用いて文字を手書きします。
      ひっかき傷を作成する場合も同様にします。 最後に[フィルタ]メニューの[ぼかし]から[ぼかし]を選んで全体にぼかしをかけます。

    • 文字の入力
      一部の文字は文字ツールで入力します。ここでは、Helvetica BLACKの15ポイント、太字を選択しました。Photoshop5.0の場合は、レイヤーメニューから、[下のレイヤーと結合]しておきます。
      やはり、最後に[フィルタ]メニューの[ぼかし]から[ぼかし]を選んで全体にぼかしをかけておきます。

    • 画像の入力
      写真画像が必要であれば別途用意したものをレイヤーにペーストし、結合します。
      ここでは、著作権フリーの素材集から写真を取り込み、[イメージ]メニューの[モード]の[グレースケール]で色を落としました。
      更に一旦[RGBカラー]に戻ってから[インデックスカラー]を選択、パレットに「使用中の色に合わせて割り付ける」で「3Bit/pixel(8色)」を指定し、荒れた感じにしました。


  6. レイヤーを別ファイルに
    [選択範囲]メニューの[すべてを選択]を選んでから[編集]メニューの[コピー]を選びます。
    さらに[ファイル]メニューの[新規...]を選択します。こうすると、新規画像はコピー元と同じ大きさ、解像度で作成されます。
    [編集]メニューの[ペースト]で新規ファイルに画像を貼り付けます。
    この作業を繰り返し(選択範囲は保持されます)て、各レイヤーの画像を別ファイルとして作成していきます。

  7. インデックスカラー化
    先のステップでできた各ファイルで[イメージ]メニューの[モード]の[インデックスカラー]を適用します。レイヤーを統合するかどうか、警告が表示されますが、[OK]で続行してインデックスカラーにします。

  8. 各ファイルの保存
    各ファイルをCompuserve Gif形式で保存します。この際、「frame01.gif」など、あとでアニメーションにするときに、できるだけわかりやすい名前をつけておきます。




Step2:アニメーション化

ここでは、Macintosh用のGifBuilderを使用しました。他のツールをお使いの方は、そのツールの説明をご覧ください。

  1. GifBuilderを起動


  2. フレームを読み込む
    [File]メニューから[Add Frame]を選択し、Step1で作成したファイルを読み込みます。順番は後でも入れ替えが可能ですので、とりえず全部読み込んでしまいます。

  3. フレームを調整する
    再生する順番を指定します。フレームのリスト上で、ファイル名をドラッグすると順番が変更できます。

    [Delete]キーを押すと、そのフレームは削除されます(ファイルがディスク上から削除されるわけではありません)。
    [Optioin]の [InterFrameDelay]でところどこでタイミングを遅くしたり速くしたりします。

  4. 再生チェックと保存
    [Animation]メニューの[Start]で動作を確認し、先のステップを繰り返して調整します。できあがったら保存します。

できあがり


この作例にはアクションファイルを添付しておりません。




www.fmod.jp