そこはかとなく好奇心を刺激するクリエイターの秘密基地。

そこはかとなく好奇心を刺激するクリエイターの秘密基地。

PhotoshopでGIFアニメを作る方法[第1回]タイムラインの使い方

      2016/02/09

GIFアニメをPhotoshopで作る方法|第1回 タイムラインパネルの使い方、GIF形式の保存方法

こんにちは、GIFMAGAZINEでデザイナーをしている大野謙介(@SeKai_SeiFuKu)です。本連載は、Photoshopを用いて、GIFアニメを作成する方法を5回に分けて解説します。タイムラインパネルの使い方、GIF形式の保存の仕方、動画をGIFに変換する方法、2つのフレームだけで簡単にアニメーションが作成できるトゥイーンの使い方、写真1枚からアニメーションが作れるパペットワープ、最後にはシネマグラフという手法を用いて、幻想的なGIFアニメを制作します。

「PhotoshopでGIFアニメを作る方法」(大野謙介 連載)
第1回 タイムラインパネルの使い方、GIF形式の保存方法
第2回 動画をGIFに変換する方法
第3回 トゥイーンの使い方(位置・不透明度・効果)
第4回 パペットワープで写真1枚でGIFアニメを作る方法
第5回 シネマグラフの作り方

クリエイター:大野謙介(@SeKai_SeiFuKu)

ohno150
GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。Adobe Pinch Inにて「Photoshopで作るGIFアニメバナー」を連載

本記事で制作するGIFアニメ

パラパラ漫画風GIFアニメ。第1回 タイムラインパネルの使い方、GIF形式の保存方法

このようなパラパラ漫画風のGIFアニメを制作します。

使用した素材ファイル

パラパラ漫画風GIFアニメを作るためのサンプルファイル
サンプルファイルをダウンロードする。
縦490px、横490pxの1.png~11.pngまでの11個のファイルが入っています。サンプルファイルはご自由にお使い下さい。

解説の流れ

  1. タイムラインパネルの基本的な使い方を解説します。
  2. GIFアニメ形式に保存する方法を解説します。

1.タイムラインパネルの使い方

1-1.Photoshopを起動し、サンプルファイルを読み込む

[ファイル]メニュー→[新規作成]を選択して、幅490px、高さ490pxのカンバスを作ります。
[ファイル]メニュー→[新規作成]を選択して、幅490px、高さ490pxのカンバスを作ります。

ダウンロードしたサンプルファイルを全てカンバス内にドラッグ&ドロップしてみましょう。
ダウンロードしたサンプルファイルを全てカンバス内にドラッグ&ドロップしてみましょう。
このような形になりました。レイヤーは上から番号順に11~1.pngとなっていれば大丈夫です。

1-2.[ウィンドウ]→[タイムライン]でタイムラインパネルを開く

1-2.[ウィンドウ]→[タイムライン]でタイムラインパネルを開く
タイムラインパネルが開いたら、[フレームアニメーションを作成]を選択してみましょう。
タイムラインパネルが開いたら、[フレームアニメーションを作成]を選択してみましょう。

1-3.タイムラインパネルのボタンについて

タイムラインパネルにはいくつかのボタンがあります。フレームの[コピー]、フレームの[削除]、2フレーム間を保管してくれる[トゥイーン]、[プレビュー]などのボタンがあります。1フレームごとに、レイヤーの表示や非表示、[位置]、[不透明度]などを変更することで、アニメーションを制作することができます。タイムラインパネルのフレームのサムネイル画像の下を選択すると、1フレームあたりの秒数を設定することができます。今回は[0.1秒]にしました。また、ループ回数は[無限]にしています。
1-3.タイムラインパネルのボタンについて

1-4.フレームをコピーする。

11個のレイヤーでアニメーションをするので、フレーム11個になるまで、フレームの[コピー]を選択しましょう。完了するとこのような図になっていると思います。
1-4.フレームをコピーする。

1-5.アニメーションになるようレイヤーを「非表示」にしていく

まず、タイムラインパネルでフレーム1を選択しましょう。[レイヤー]パネルの目玉マークをクリックして、一番下のレイヤー(この図の場合、1番のレイヤー)以外を全て非表示にします。
一番下のレイヤー(この図の場合、1番のレイヤー)以外を全て非表示にします。

次にタイムラインパネルでフレーム2を選択し、レイヤーパネルで2番のレイヤーを表示させます。この手順を一番上の11番のレイヤーまで繰り返します。ここまででアニメーションを作る過程は終了です。
レイヤーパネルで2番のレイヤーを表示させます。この手順を一番上の11番のレイヤーまで繰り返します。

2.GIF形式での保存の仕方

2-1.[ファイル]メニュー→[Web用に保存]を選択する。

2-1.[ファイル]メニュー→[Web用に保存]を選択する。

2-2.保存形式を[GIF]にして[保存]を選択して完成。

2-2.保存形式を[GIF]にして[保存]を選択して完成。

3.完成したGIFアニメの確認方法

完成したGIFアニメはブラウザやGIFMAGAZINEにアップロードしてブログに埋め込んだりすることができます。

3-1.ブラウザで開く

Chromeなどのブラウザにドラッグ&ドロップするとGIFアニメを見ることができます。
3-1.ブラウザで開く

3-2.GIFMAGAZINEにアップロードする。

GIFMAGAZINEにアップロードすれば、TwitterやFacebookでGIFアニメを動かすことができ、埋め込みコードによってブログで紹介することもできますよ。ぜひ使って見て下さいね。
3-2.GIFMAGAZINEにアップロードする。

GIFアニメ作品の投稿・共有・検索サービス:http://gifmagazine.net/

次回はPhotoshopを使って動画からGIFアニメを作ります。

今回は、タイムラインパネルの基本的な使い方と、GIF形式の保存の仕方を解説しました。次回は、動画からGIFアニメを作る方法を解説します。スマートフォンなどで撮影した動画などでもできますので、iPhoneのiOS8からデフォルトの機能となったタイムラプス映像や、スローモーション映像などをGIFアニメにすることができますのでご期待下さい。

GIFアニメをPhotoshopで作る方法|第2回 動画をGIFに変換する方法

次回は動画素材を使ってこのようなGIFアニメを作ります。

次回記事はこちら:第2回PhotoshopでつくるGIFアニメ[動画をGIFに変換する方法]

クリエイター:大野謙介(@SeKai_SeiFuKu)

ohno150
GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。Adobe Pinch Inにて「Photoshopで作るGIFアニメバナー」を連載

 - PhotoshopでGIFアニメを作る方法, クリエイター, 大野謙介 , , ,

crem fbpage header
(いいね!で最新記事を毎日受け取れるみたいですよ)

あなたの好奇心を刺激する
コラム、ビジュアルビュース、GIFマンガ、海外映像作品紹介記事を毎日配信

more