そこはかとなく好奇心を刺激するクリエイターの秘密基地。CREMとは取材のリクエストライター募集RSSそこはかとなく好奇心を刺激するクリエイターの秘密基地。そこはかとなく好奇心を刺激するクリエイターの秘密基地。2016/02/09こんにちは、GIFMAGAZINEでデザイナーをしている大野謙介(@SeKai_SeiFuKu)です。本連載は、Photoshopを用いて、GIFアニメを作成する方法を5回に分けて解説します。タイムラインパネルの使い方、GIF形式の保存の仕方、動画をGIFに変換する方法、2つのフレームだけで簡単にアニメーションが作成できるトゥイーンの使い方、写真1枚からアニメーションが作れるパペットワープ、最後にはシネマグラフという手法を用いて、幻想的なGIFアニメを制作します。シネマグラフの作り方クリエイター:大野謙介(@SeKai_SeiFuKu)GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。@SeKai_SeiFuKu本記事で制作するGIFアニメこのようなパラパラ漫画風のGIFアニメを制作します。使用した素材ファイルサンプルファイルをダウンロードする。縦490px、横490pxの1.png~11.pngまでの11個のファイルが入っています。サンプルファイルはご自由にお使い下さい。解説の流れタイムラインパネルの基本的な使い方を解説します。GIFアニメ形式に保存する方法を解説します。1.タイムラインパネルの使い方1-1.Photoshopを起動し、サンプルファイルを読み込む[ファイル]メニュー→[新規作成]を選択して、幅490px、高さ490pxのカンバスを作ります。ダウンロードしたサンプルファイルを全てカンバス内にドラッグ&ドロップしてみましょう。このような形になりました。レイヤーは上から番号順に11~1.pngとなっていれば大丈夫です。1-2.[ウィンドウ]→[タイムライン]でタイムラインパネルを開くタイムラインパネルが開いたら、[フレームアニメーションを作成]を選択してみましょう。1-3.タイムラインパネルのボタンについてタイムラインパネルにはいくつかのボタンがあります。フレームの[コピー]、フレームの[削除]、2フレーム間を保管してくれる[トゥイーン]、[プレビュー]などのボタンがあります。1フレームごとに、レイヤーの表示や非表示、[位置]、[不透明度]などを変更することで、アニメーションを制作することができます。タイムラインパネルのフレームのサムネイル画像の下を選択すると、1フレームあたりの秒数を設定することができます。今回は[0.1秒]にしました。ループ回数は[無限]にしています。1-4.フレームをコピーする。11個のレイヤーでアニメーションをするので、フレーム11個になるまで、フレームの[コピー]を選択しましょう。完了するとこのような図になっていると思います。1-5.アニメーションになるようレイヤーを「非表示」にしていくまず、タイムラインパネルでフレーム1を選択しましょう。[レイヤー]パネルの目玉マークをクリックして、一番下のレイヤー(この図の場合、1番のレイヤー)以外を全て非表示にします。次にタイムラインパネルでフレーム2を選択し、レイヤーパネルで2番のレイヤーを表示させます。この手順を一番上の11番のレイヤーまで繰り返します。ここまででアニメーションを作る過程は終了です。2.GIF形式での保存の仕方2-1.[ファイル]メニュー→[Web用に保存]を選択する。2-2.保存形式を[GIF]にして[保存]を選択して完成。完成したGIFアニメはブラウザやGIFMAGAZINEにアップロードしてブログに埋め込んだりすることができます。3-1.ブラウザで開くChromeなどのブラウザにドラッグ&ドロップするとGIFアニメを見ることができます。3-2.GIFMAGAZINEにアップロードする。GIFMAGAZINEにアップロードすれば、TwitterやFacebookでGIFアニメを動かすことができ、埋め込みコードによってブログで紹介することもできますよ。GIFアニメ作品の投稿・共有・検索サービス:http://gifmagazine.net/次回はPhotoshopを使って動画からGIFアニメを作ります。今回は、タイムラインパネルの基本的な使い方と、GIF形式の保存の仕方を解説しました。次回は、動画からGIFアニメを作る方法を解説します。スマートフォンなどで撮影した動画などでもできますので、iPhoneのiOS8からデフォルトの機能となったタイムラプス映像や、スローモーション映像などをGIFアニメにすることができますのでご期待下さい。次回は動画素材を使ってこのようなGIFアニメを作ります。次回記事はこちら:第2回PhotoshopでつくるGIFアニメ[動画をGIFに変換する方法]クリエイター:大野謙介(@SeKai_SeiFuKu)GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。最後までお読みいただきありがとうございました。