意外と簡単！Photoshopでgifアニメーションと動画を作る方法

はじめに

イラストや写真をつなぎ合わせて、動きのある簡単なアニメーション動画を作成したい！

アニメーションで見せたいけどデータが重いと大変。。

といったとき、

Photoshopなら簡単なステップをふむだけでGIFという軽くて動きのあるアニメーション動画をつくることができます。

今回はPhotoshopをつかってGIF動画を作る方法をご紹介していきたいと思います。

GIFとは

Graphics Interchange Format（グラフィックス・インターチェンジ・フォーマット、略称GIF）とはCompuServeのPICSフォーラムで提唱された画像ファイルフォーマットの一つ。LZW特許を使用した画像圧縮が可能。一般的に用いられている拡張子は.gif。

GIFは256色以下の画像を扱うことができる可逆圧縮形式のファイルフォーマットである。圧縮画像ファイルフォーマットでは歴史の長いもののひとつで、WebブラウザではJPEGと並んで標準的にサポートされる。圧縮形式の特性上、同一色が連続する画像の圧縮率が高くなるため、イラストやボタン画像など、使用色数の少ない画像への使用に適している。

ウィキペディア:GIF

PhotoshopでGIFアニメーションを作る方法

さっそく作っていきます。画像（イラスト）と画像（イラスト）をつないで見せるパラパラ漫画のようなアニメーションを作っていく方法を紹介します。

複数の画像をつないで作るGIF

まずはじめにつなぎたい画像を用意します。

今回はこちらのイラスト画像を用意しました。イラストにはgifにしたときに動きがでるように少しずつ違う形にして描いています。短いアニメを作る感じですね。（画像は順番に表示したい順に番号をふっておきましょう。）

イラストの描き方やペンツールの使い方を紹介した記事はこちら

初心者でも人物を簡単にイラスト化できますの記事

もっと詳しく

イラストレーター　初心者でも人物を簡単にイラスト化できます

イラレのペンツールの使い方の記事

もっと詳しく

イラレのペンツールの使い方

画像を一つのファイル上にすべてレイヤーとして開いていきます。

「ファイル」→「スクリプト」→「ファイルをレイヤーとして読み込み」を選択します。

レイヤーを読み込む、と書かれたパネルが出るので、そこでフォルダかファイルを選択します。ファイルの場合はすべてのファイルを選択しましょう。

ここで順番がバラバラになってしまうので、「名前順に並べ替え」と書かれた部分をクリックして順番を並べ、かえましょう。よければOKをおします。

すると画像がレイヤーとして読み込まれます。

このとき番号順にレイヤーが作成されます。（一番下に表示されているレイヤーからアニメーションが始まります。）

順番を変更したい場合はレイヤーの位置を変更するか、順序を反転したい場合は「ウィンドウ」→「レイヤー」 → 「重なり」 → 「レイヤー順序を反転」をクリックで反転します。

次に「ウィンドウ」→「タイムライン」を選択し、ライムラインパネルを出します。

タイムラインパネルにビデオタイムラインを作成と書かれたボタンがあるので横の矢印ボタンをクリックして「フレームアニメーション」をクリックします。

その後、パネル右上のメニューをクリックしてメニューを表示し、「レイヤーからフレームを作成」を選択します。

すると、タイムラインパネル上にレイヤーが順番にズラッと並びます。

下に再生ボタンやストップボタン、先送りボタンなどいろいろあります。まずは再生して動きを確かめてみうましょう。

よければそのまま書き出しにうつりますが、部分的に調整したい場合や全体のスピードを調整したい場合は、フレームに表示されている画像下の0秒と表示されている部分をクリックして秒数を変更しましょう。

こうすることで部分的にフレームの表示時間を変更することができます。複数画像を一括して変更したい場合はshiftを押しながら複数画像を選択して秒数を変更すればいちどに変更することができます。

今回はバスケットボールのイラストなので、丁度ダンクを決めたときに0.2秒長く表示するよう変更してみました。

それから再生回数も決めることができます。

パネル左下にある矢印をクリックすると、一度、3回、無限、その他と選択できます。

再生して問題なければgif画像を書き出しましょう。

「ファイル」→「書き出し」→「web用に書き出し」を選択します。

するとweb用に保存と書かれたパネルが表示されますので、右上にあるプリセットをgifに変更します。

よければ保存を押して書き出し先を決めればgifの完成です。

できあがったgifがこちら↓

イラストを描くのが大変ですが、画像をつないで見せたい場合や、テキストを入力して動かすだけであれば簡単につくることができると思います。

ぜひ一度チャレンジしてみてください。

トゥイーン機能を使って素材に動きを出すGIF

次はトゥイーン機能という特殊機能を使ってテキストや画像などの素材を指定した方向に動かしていく方法を紹介します。

切り出した素材やテキストなどを使って動かしていきます。

今回はこちらの素材でおこなっていきます。背景レイヤーとテキストレイヤーの2つです。

テキストは文字ツールで文字を入力すれば作成できます。

作成したら、先程と同じようにウィンドウからタイムラインパネルを出し、「フレームアニメーションを作成」をクリックします。

するとタイムラインパネルに現状レイヤーにある画像が表示されます。

そうしたら＋と書かれたアイコンをクリックし複製します。

複製できたら、一番最初の画像をクリックし、テキストをつかんで動かす最初の位置に移動します。今回は右からテキストを登場させたいので右奥へ移動させました。

次に複製した方をクリックし、テキストを移動したあとの終点地点に移動させます。今回は左に動いて画面から出てきれていくように見せたいので左端へスライドして移動させました。

そうしたら、複製した方をクリックした状態で、アニメーションフレームをトゥイーンと書かれたアイコンをクリックします。

すると、トゥイーンと書かれたパネルが出現するので、そこで移動するさいにかかるフレーム数を決めていきます。追加するフレームと書かれた部分に入れたいコマ数をいれましょう。

フレームとは

フレームレートは、動画において、単位時間あたりに処理させるフレーム数（静止画像数、コマ数）である。通常、1秒あたりの数値で表し、fps（英: frames per second＝フレーム毎秒）という単位で表す。

ウィキペディア:フレーム

この場合10だと少ないので30フレームに設定しました。

試しに再生してみます。

よさそうです。

そうしたら先程同様ファイルからWEB用に保存を選択し、GIFを作成して完成です。

ちなみにこのテキスト、レイヤー効果を適用することも可能です。

例えばスタート位置では透明度0%に設定しておいて終了位置で100%にすれば、はじめは透明で何も見えないけど、だんだんみえてきて最後ははっきり見える、といったように通常レイヤーに対しておこなう効果がアニメーション作成でも適用できるので、色んな表現をGIFでもみせることができます。

gifにかきだすとこんな感じです。

ドロップシャドウや光彩などの効果もくわえることができるので色々試してみましょう。

ビデオタイムラインでより複雑なgifをつくる

こちらはより複雑な動きをつけたいときにおこなう方法ですが、設定がアニメーションタイムラインと比べ少しむずかしいかもしれません。

その代わり、たくさんの素材に対して何度も移動や拡大・縮小したり、透明や光彩、色彩の変更など効果を適用することができるので、より自由な表現が可能です。

さきほどと同じ素材を使っておこないます。

今回は背景の日照のデザインの色が交互に入れ替わり、小さなSUPERSALEの文字が段々大きくなって表示される、というGIFを作っていきます。

さきほど同様、タイムラインパネル内に「フレームアニメーションを作成」し、タイムラインパネル＋をクリックして素材を複製したら、トゥイーンボタンを押してフレーム数を設定します。

どれくらいのアニメをつくるのかにもよりますが、一旦30フレームで設定しています。あとで変更も可能です。

そうしたら、画面左下にある「ビデオタイムラインに変換」と書かれたボタンをクリックしましょう。

タイムラインパネルが表示されますので、そこで色々と設定をしていきます。

左側のレイヤーの名前が書かれている部分では変形や不透明度、スタイルなどの設定をすることができます。右側の紫のライン上に赤い線で設定をくわえたい時間を指定します。フレームの長さもここで延長することができます。

レイヤーごとに、時間軸ごとに動きや効果を設定することができます。

それでは設定をおこなっていきます。

まずはじめに文字（SUPER SALE）の設定をおこないます。SUPER SALEと書かれた文字の横にある矢印をクリックし、設定する項目を表示させます。

そこには変形や不透明度、スタイル、ワープテキストの項目が書かれています。

今回は小さい文字を大きく見せたいので変形をさわっていきます。

パネル右側の赤い線を左に移動します。そうしたら変形のひし形のマークをクリックします。

クリックしたら、テキストの文字の大きさを変更します。command＋T（windowsならctrl＋T）で大きさを変更できます。

大きさを変えたらenterを押して決定します。スタート時、文字を小さく表示する設定ができました。

次に文字を大きくするポイントを設定するべく、赤い線を右側にスライドします。

スライドしたらもう一度変形と書かれた部分の横にあるひし形のマークをクリックして大きさを変形します。

これで大きさの設定はできました。

設定を変えたい場合は設定をおこなった場所（ひし形のアイコン）まで赤い線を移動し、変更をおこないます。

左から右に向かって文字が大きくなっていくよう設定できました。

次に背景の日照デザインを設定します。色の違う日照を交互に表示していきます。

さきほどテキストにおこなった設定を、背景にも適用していきます。交互に表示させたいので、上に表示されている日照に透明をかけて見えたり、見えなかったりを繰り返させしおこないます。

細かい設定をおこなってできたものがこちらです。

実はPhotoshopで動画も作れます

Photoshopでgifが作れるのは有名ですが、実は動画を作成することができることもできるんです。

これ、あまり知らない人が多いと思いますが。。

書き出しにレンダリング機能があるのでそこから動画データを作成することができます。

以下のデータが書き出しできるのでほぼすべてのフォーマットを網羅していると思われます。

• 264
• 3gp
• 3gpp
• avc
• avi
• 4fv
• flv
• m4v
• mov
• mp4
• mpe
• mpeg
• mpg
• mts
• mxf
• r3d
• ts
• vob
• wm
• wmv

実際にビデオタイムラインの設定項目にオーディオトラックの設定箇所もあるので音に合わせて動きをつけることも可能です。

できることは

• 動画の切り出し（トリミング）と分割
• 動画と動画を組み合わせる
• 動画に色補正や透明度調整、影などの効果を加える
• オブジェクトや画像の挿入

くらいはできます。

もちろん動画専用アプリなどと比べれば性能は見劣りしますが、もしも、クオリティはそこそこで良くて、Photoshopは持っているけど動画専門のソフトはないというのであれば、これで代用しても全然良いのではないかと思います。

書き出し方は、さきほど紹介したアニメーションやビデオタイムラインで動きのある動画データを作成したら、「ファイル」→「書き出し」→「ビデオをレンダリング」をクリックします。

すると「ビデオをレンダリング」と書かれたパネルが出現します。

「ビデオをレンダリング」パネルで細かい設定ができます。 形式、プリセット、サイズなどを設定し よければ「レンダリング」で書き出しをおして完了です。

まとめ

以上がGIFアニメーションを作成する2種の方法と、動画の作成方法でした。

GIFは動画編集ソフトと比べると比較的簡単につくれますし、データも軽いのでSNSなどでも重宝されます。テキストだけで伝えるよりも、数秒の動画でもぱっと見れればより伝わりやすいのでいいですよね。

一度覚えてしまえば色んな場面で使うことができますのでぜひこの機会にGIFアニメーションをマスターしていってください。