【Photoshop】でGIFアニメーションを書き出す方法

【Photoshop】でGIFアニメーションを書き出す方法

photoshopでは複数枚の画像を次々に表示させていくことで、アニメーションファイルを作成することが可能です。

ｗebサイトに動きをつけたい、商品をもっと詳しく見せたい、ホームページに自分が撮った写真のスライドショーをいれたい、パラパラ漫画を公開したい、などなど、photoshopのタイムラインパネルをつかって簡単にアニメーションを作ることができます。

今回は、そんないろいろな用途で使えるGIFアニメーションをPhotoShopで作成する方法をご紹介します。

目次

1. レイヤーに配置
2. タイムラインを作成
3. 書出し設定 

1.レイヤーに配置

今回はモデリングしたソファセットの360度回転アニメーションを例にします。70フレームほどで1回転する画像です。※1フレームとはアニメーションにおける1コマ、つまり1画像のことです。

それではアニメーションさせたい画像を読み込んでみましょう、方法はおもに2種類。【ファイル＞スクリプト＞ファイルをレイヤーとして読み込み】でファイルを指定して読み込む。

【参照】から読み込みたいファイルを選択

もしくは、新規作成でファイルを作成して、エクスプローラーからファイルへ直接ドラッグ＆ドロップをして読みこむ方法。

上の画像のようにエクスプローラーで読み込みたいファイルを全部選択してからドラッグ＆ドロップすると、

こんな感じで画像をまとめてPhotoshopに読み込めます。今回は直接ドラッグ＆ドロップしました。

今回のサンプルは切り抜かれた状態の画像なので残像みたいになってますねｗ

2.タイムラインを作成

それでは読み込んだ画像をアニメーションにしてみましょう！

まず初めにレイヤーの順番を整えます。アニメーションさせる画像はレイヤーの下から順番に読み込まれるのでアニメーションさせたい順番にレイヤーを並べ替えます。

レイヤーパネルの一番下の画像を選択して【アプリケーションメニュー＞ウィンドウ＞タイムライン】で画面の下にタイムランパレットが出てきます。中央のビデオタイムラインを作成ボタン横のプルダウンボタンから【フレームアニメーションを作成】を表示させてボタンををクリック。

次にタイムラインパレットの右上の3本線から【レイヤーからフレームを作成】

すると、レイヤーの下から順番に画像がタイムラインパネルに読み込まれます。 

これで再生ボタンを押すとPhotoShop上でアニメーションが始まるはずです。

画像の下の0秒のところを押すと一枚を表示させる時間を変更できます。スライドショーを作りたいのであればここの数字を大きく設定してください。また、一番下の【無限】と書かれたところはループの設定になります、ここで何回繰り返すかを変更します。無限にするとアニメーションされ続けます。

3.書出し設定

アニメーションが完成したらGIF形式で書き出しましょう。

GIF形式というのはファイルフォーマットの種類の一つで、Graphics Interchange Formatの頭文字をとって付けられた名称です。

256色以下の画像を扱うことができる可逆圧縮形式のファイルフォーマットで、複数画像を1つのファイルに収録することができるという特性があります。みなさんもよく目にするWeb広告のバナーなどはGIF形式で作られていることが多いです。

まず【ファイル＞書出し＞Web用に保存（従来）】を選択してください。

すると、次のようなパネルが開きますので

赤枠で囲ったあたりを注意してください。まず保存形式はGIFですね、カラーはGIFが持てる色情報の上限である256色をえらんでください。最後にループオプションをここでも設定します。今回はずっとループを続けたいので無限

最後に保存ボタンで任意の場所にデータを保存してください。これでGIFアニメーションデータの完成です！

画像にすこし動きがついているだけでも静止画像とは全然違う感じが出て面白いのでWebページにすこし動きを入れたいときには是非試してみてください。画像の一部が動くだけのものでも十分効果があるはずです。