Photoshop

【photoshop】ビデオタイムラインを使ったgifアニメの作り方を初心者向けに徹底解説!

gifアニメ

 

gifアニメ とは、web上で表示される5秒程度の短い動画のことです。

 

使用できる色数に制限があったり音声を扱うことはできませんが、ユーザーの「目を引く」効果や、サイトに「動き」をつけることができます。

簡単なアニメーションであれば javascriptやcssのコードは不要で、再生するために「ボタンを押す」必要もないので、サイト管理者やユーザーの手間を省くことができるも大きな魅力です。

gif (ジフ)は「Graphics Interchange Format」の略でファイル形式の一つだよ

 

一見難しそうに感じるgifアニメですが、動画制作のような編集技術も必要なく簡単に作ることができます

lineスタンプを作ったり、図解で伝わりづらい内容を説明することもできるので、ぜひこの記事を参考に色々なものを「動かして」みて下さいね。

 

注意

M1チップ搭載の mac を使用する場合は、この記事で紹介する「ビデオタイムライン」の機能を使用するために「Rosetta」のダウンロードが必要です。予めご了承下さい。

⇒ダウンロードの方法はコチラ

ダウンロード後は、アプリケーション一覧の「photoshop」を選んだ状態で「情報を見る」を選択して情報画面を開き、「Rosettaを使用して開く」にチェックを入れた状態でphotoshopを立ち上げて下さい。

 

この記事では

photoshopのビデオタイムラインを使ってgifアニメを作成する手順を解説しています。ぜひ最後までご覧ください。

 

gifアニメを作ったらブログやサイトに配置してみよう!

目次

ビデオタイムラインの機能キーフレームとは各部の名称とはたらきビデオタイムラインんを開く画像配置の際の注意点

GIFアニメ制作の基本GIFアニメ制作の応用GIFアニメの保存方法

  📖目次に戻る

ビデオタイムラインの機能

gifアニメを作る方法は大きく分けて2つありますが、今回は私がオススメする「ビデオタイムライン」を使ったgifアニメーションの作り方の説明をします。

「ビデオタイムライン」をオススメする一番の理由は、配置した「写真」「オブジェクト」再生時間が可視化され、作業の状況が一目で確認できるからです。

フレームアニメーションとビデオタイムライン

2つ違いを簡単に説明すると、「フレームアニメーション」1コマずつ表示時間を設定してアニメーションを表現するのに対し、「ビデオタイムライン」はタイムライン上に、キーフレームという目印を設定してアニメーションを表現します。

「フレームアニメーション」は、すごく単純なアニメーションや、パラパラ漫画みたいにコマ送りにされた写真を表示する場合に便利だよ

  📖目次に戻る

キーフレームとは

キーフレームとは、「拡大縮小」「フェードイン」「色の変更」などの変化を作り出す機能です。

その時の「状態」をキーフレームに設定することができ、複数の時間上にこの「状態」を設定しておくことで間の動きが補完され、アニメーションができる仕組みになっています。

例えばオブジェクトが「左から右に移動する1秒のアニメーション」を作る場合は、

まず、「0秒」時点でオブジェクトをカンバスの任意の位置に配置し、「キーフレームを設定」します。

次にインジケーター(現在位置)を「1秒」の地点に移動した後 オブジェクトを右に移動させます。

この状態で再生すると、最初と最後に設定した位置の間の動きが自動生成され「左から右に移動するアニメーション」ができます。

フレームアニメーションとビデオタイムライン

 

今回は、キーフレームに「位置」を設定してアニメーションを作成しましたが、他にもオブジェクトや写真の「大きさ」「不透明度」「色」などを設定することができます。

ビデオタイムラインの基礎

このそれぞれの「変化」を利用、または組み合わせることで多種多様なアニメーションを表現することができます。

  📖目次に戻る

各部の名称とはたらき

ビデオタイムライン機能の「各部の名称とはたらき」は以下の通りです。

なお、オーディオや音声の操作に関わる部分や、今回使用しない部分の説明は省略しています。

ビデオタイムラインの各部の名称とはたらき

再生ボタンをはじめとしたプレビューで動きを確認するためのボタンや、動画をカットしたりフェードアウトする簡単な編集ツールキーフレームを設定するためのボタンを使ってアニメーションを作成します。

動画編集ソフトと違って、機能もシンプルで分かりやすいよね

  📖目次に戻る

ビデオタイムラインを開く

ビデオタイムラインの画面は、画面下部にあるタイムラインパネル内の「ビデオタイムラインを作成」をクリックして開きます。

もし、タイムラインパネルを消してしまった場合は、画面上部の「ウィンドウ」→「タイムライン」をクリックして開いてください。

  📖目次に戻る

画像を配置する際の注意点

キーフレームの「変形」を使用する場合は、配置した画像をスマートオブジェクトに変換する必要があります。

スマートオブジェクトの変換は、レイヤーパネルを表示し、配置した画像のレイヤー「右クリック」「スマートオブジェクトに変換」をクリックして行います。

スマートオブジェクトへの変換方法

作業前は、キーフレームの「位置」「変形」に変わっていることを確認してください。

 

ちなみにスマートオブジェクトは、「拡大縮小をしても、劣化をしない画像データ」のことだよ

  📖目次に戻る

GIFアニメ制作の基本

GIFアニメは、「変形(移動)」「スタイル」「不透明度」のキーフレームを使用してアニメーションを表現しましたが、それぞれのキーフレームを使った簡単なアニメーションを作成する手順を説明します。

カンバスに「ufo」の画像を配置した状態から説明するね

画像を変形する

画像の変形には「変形」のキーフレームを設定して行います。

「変形」のキーフレームを設定するために、「ひし形」「ストップウォッチ」のいずれかをクリックします。

gifアニメーションの画像の変形その1

次に、インジケーターを右端に移動(今回は1秒時点)し、オブジェクトを「小さく」します。

gifアニメーションの画像の変形その2

再生すると、オブジェクトがだんだん小さくなるアニメーションが完成しています。

キーフレーム変形を使ったのgifアニメーション

 

不透明度を変える

不透明度を変える場合は、「不透明度」のキーフレームを設定して行います。

「不透明度」のキーフレームを設定し、インジケーターを右端に移動します。

gifアニメーションの画像の不透明度の変更その1

次に、画面右側の「レイヤー」をクリックしてレイヤーパネルを表示し、

不透明度を「0%」にします。

gifアニメーションの画像の不透明度の変更その2

再生すると、オブジェクトがだんだん透明になるアニメーションが完成しています。

キーフレーム不透明度を使ったのgifアニメーション

 

スタイルを変える

スタイルを変える場合は、「スタイル」のキーフレームを設定して行います。

「スタイル」のキーフレームを設定し、インジケーターを右端に移動します。

gifアニメーションの画像のスタイルの変更その1

次に、画面右側の「レイヤー」をクリックしてレイヤーパネルを表示し、

不透明度をレイヤーパネル下部の「fx」をクリックし、任意の効果を選択します。(今回は「カラーオーバーレイ」でブラックを選択しています。)

gifアニメーションの画像のスタイルの変更その2

再生すると、オブジェクトがだんだん黒くなるアニメーションが完成しています。

キーフレーム「スタイル」を使ったのgifアニメーション

 

これで、それぞれのキーフレームの使い方の基本は理解できたかな

  📖目次に戻る

GIFアニメ制作の応用

今度は、キーフレームを組み合わせたアニメーションや、パラパラ漫画の様な一つずつ画像を表示するような少し複雑なアニメーションの作成を行います。

 

自然なループ動画を作る

先ほどの「GIFアニメの基本」で作成した動画は、どれも途中でぶつ切りになった「不自然なループ動画」でした。今度は、

「自然なループ」にするために、キーフレームの「始点」「終点」状態を揃えます

では早速、オブジェクトが「左右を往復する」簡単なループ動画を作ってみましょう。

まず、オブジェクトをカンバスの左側に配置した状態で、「0秒」と「1秒」の時点に「変形」のキーフレームを設定します。

次に、インジケーターを間に移動してからオブジェクトを右側に移動します。

再生すると、オブジェクトが「左右を往復する」自然なループ動画ができています。

gifアニメーションの自然なループ動画

再生時間を調整したり、細かい動きを指定するともっと自然になるよ

キーフレームを組み合せる

キーフレームには「変形」「不透明度」「スタイル」の3種類がありますが、それらを組合せてアニメーションを表現することもできます。

「変形」のキーフレーム「不透明度」のキーフレームを組み合わせたアニメーションを作成します。

今度は、「左から右にフェードアウトしながら移動」するアニメーションを作ってみましょう。

オブジェクトをカンバスの左側に配置した状態で「変形」と「不透明度」のキーフレームを設定し、「インジケーター」を右端に移動します。

次に、画面右側の「レイヤー」をクリックし、表示された「レイヤーパネル」で「不透明度」を「0%」にします。

再生すると、「左から右にフェードアウトしながら移動」するアニメーションが完成しています。

さらに、角度をつけたりタイミングを調整するとこんなこともできちゃうよ

文字を「一文字ずつ」表示させる

複数の画像を用意して、順番に表示させることも可能です。

複数の「画像」を一つずつ並べた後、表示時間をずらしたアニメーションを作成します。

では早速、「ありがとう」の文字が順番に表示されるアニメーションを作成してみましょう。

まずは、一文字ずつ書き出したデータをカンバスに並べます。(タイムラインパネルには一列ずつ紫色のバーが表示されます。)

タイムラインパネルで一文字ずつ表示時間を調整します。ここでは、それぞれの文字を最後まで表示させるために、始点のみを動かすことがポイントです。

再生すると「あ」「り」「が」「と」「う」の文字が順番に表示されます

さらにそれぞれの文字に「変形」のキーフレームで拡大縮小を細かく設定すると、面白い動きになるよ

パラパラ漫画

パラパラ漫画の様に、状態の違う写真やオブジェクトを連続で表示させることもできます。

「ありがとうございました」と喋った後、お辞儀をするアニメーションを作成してみます。

まずは、使用する母音の発音が「あ」「い」「う」「お」の4種類なのでそれぞれのイラストを用意し、

お辞儀をするアニメーション用に、さらに8枚のイラストを用意します。

全ての手順は(長くなるので)紹介できませんが、それぞれの画像を順番に配置し、表示時間を調整しています。

前項の「一文字ずつ表示する」アニメーションと違い、表示する時間の分だけバーの長さを調整する必要があります。

それでは、再生してみましょう。

「ありがとうございました」と言っているように見えます…よね?

 

せっかくなので、先ほどの「一文字ずつ表示」するアニメーションと、キーフレームを組み合わせて「吹き出し」を追加してみましょう。

今まで紹介したテクニックを使って色んなアニメーションを作ってみてね

  📖目次に戻る

gifアニメの保存方法

gifアニメが完成したら、各種設定をして「保存」をする必要があります。

画面上部のバーの「ファイル」をクリックし、「書き出し」→「web用に保存(従来)」をクリックし、次のような画面が表示させましょう。(今回はプレビューを4分割しています。)

gifアニメーションの書き出し

gifアニメは、設定によって見え方が大きく変わるため、プレビューのチェックは必要不可欠です。

使用するカラー数、ディザの指定、出力サイズなどを適切な数値に設定し保存しましょう。

「カラー」は、色数の少ないアニメーションを保存する場合は、極力少なく設定して容量を節約します。

「ディザ」を指定すると、グラデーションが綺麗に出力されますが容量が大きくなってしまいます

「出力サイズ」は、配置する箇所の大きさより少し小さめで設定すると良いでしょう。

 

プレビューを確認しながら、「見え方」「容量」のバランスをみて保存してね

  📖目次に戻る

最後に

いかがでしたでしょうか。

今回はなるべく多くの機能を紹介しならが「gifアニメーション」について解説しましたが、アニメーションによっては他にもっと効率の良い方法があると思います。

色々試しながら自分なりの手順を見つけてみてください。

もっと詳しく学習したい方は、下の記事一覧から他の記事もご覧下さい。

photoshop

 

続きを見る

最後までお読みいただき、ありがとうございました!

-Photoshop