ここでは「Adobe Photoshop 2020」を使ってGIFアニメーションの制作方法を紹介します。
皆さんは
GIFアニメーションを作ってみたいけど難しそう
Webで良く見る動く写真はどうやって作るのかな
といった疑問を感じたことはありませんか？
この記事を見ることで下記のようなGIFアニメーションを作成することができます。
もちろんパクってOKです。
GIFアニメーションを作れるようになりたいという方は是非挑戦してみましょう。
それでは始めていきますね！
GIFアニメーションの素材を描く
まずGIFアニメーションというのは
と認識しておいてください。
そのため、一コマずつイラストを描きつつ進めていきます。
GIFアニメーションの一連の流れをイメージする
まずGIFアニメーションを一から作成するには、GIFアニメーションの一連の流れを考える必要があります。
今回は、
前半：光が集まる
後半：光を放出する
というYouTubeのOPなどでありそうなGIFアニメーションを作成していきます。
ここではGIFアニメーションで使うレイヤーを15コマ分準備しました。
光が集まる前半コマ
光を放出する後半コマ
この計15コマはパクってOKです。
では、実際にブラシツールやペンツールを使って描いてみましょう。
ブラシ・ペンツールを利用してGIF素材を作成する
黒色の背景色を作成し、その上に新規レイヤーを準備したら作成スタートです。
まずはブラシツール・ペンツールを使って光の粒を描いていきます。
光の粒は「光が中心へ集まるように」意識して描いていきます。
光の粒を描くときはブラシサイズを小さくして、少しずつ色を足していくイメージで描きました。
また、光の放出は「ペンツール、ブラシツール」を使って描きます。
放射光はペンツールで「縦長の三角形」を描くようにパスを作成し、パスの塗りつぶしで作成します。
パスの塗りつぶし方法は当サイトで紹介しているので、こちらからご確認してください。
光の円は「ブラシツール」を使用します。
光の円用に新規レイヤーを作成し、描きたい光の円になるようにブラシの大きさを調整します。
調整したら、「ハードブラシ」の状態でマウスを1回クリックしましょう。
ハードブラシでマウスを1度クリックするだけで、正円が描けます。
同様に「消しゴムツール」に持ちかえ、正円から削りたい分ブラシサイズを変更してマウスを1度クリックすれば、三日月形の発光を描くことができます。
わざわざ楕円形ツールなどを使わなくても、描くことができるのでオススメです。
ブラシツールを使うとき、ブラシサイズの変更、不透明度の変更など素早く操作したい方は下記記事もオススメです。
グラデーションを追加し発光を演出する
上記のコマにそってGIFアニメーション素材が描けてきたら、エフェクトを追加します。
今回は「12コマ目」に発光をより強調するエフェクトを追加しました。
12コマ目に対応するレイヤーの上に新規レイヤーを作成し
を適用させます。
そのままではただのべた塗りになってしまうので
を適用させましょう。
青色で光の発光を作成した場合、描画モードをビビットライトにすると良い感じに白色に発光してくれます。
ではタイムラインでGIFアニメーション化する方法の前にお知らせです。
Adobe Photoshopを使って
Photoshop未経験だけど、実践的な内容を効率良くマスターしたい
グラフィックデザインに本格的に取り組みたい
画像編集を実例を交えつつマスターしたい
という方は「株式会社シーモスデザイン」さんの技術系通信講座「Photoshop CC 通信講座」がオススメです。
スキルを手に入れて副業・転職をしたい方
グラフィックデザインや画像編集をマスターして就職を有利に進めたい方
も是非上記リンクからのぞいてみてください。
タイムラインでGIFアニメーション化する
素材が完成したら、いよいよGIFアニメーション化していきます。
「ウィンドウ＞タイムライン」からタイムラインを表示させ、レイヤーを各フレームごとにズラしていきます。
タイムライン欄の左上に「再生・停止」や「カット（ハサミのマーク）」のボタンがあるのでこれらを使ってタイムラインの編集をします。
いらない要素は「Backspace」キーで消去しましょう。
再生速度を変える場合はタイムライン上で
から値を変えることで再生速度を変えることができます。
GIF形式でアニメーションを書き出す
作成したGIFアニメーションを再生して、問題がなければ書き出していきます。
「Ctrl+Shift+Alt+S」で「Web用に保存」ウィンドウを開きます。
保存形式を「GIF」に変更し、サイズ（px等）を設定したら保存して終了です。
動画からGIFアニメーションを作成する
最後に、手っ取り早くGIFアニメーションを作成する方法を紹介します。
上記のように1コマずつアニメーションを作成しても問題ありませんが、Webで使用する場合は、大変ですよね。
そんなときは「動画ファイル」をPhotoshopでそのまま読み込んでしまいましょう。
手順は以下の3ステップになります。
GIF動画の簡単な作成手順
Photoshopへ「動画ファイル」をドラック＆ドロップして開く
タイムラインで動画を編集
Web用に保存からGIFを選択
当サイトで使っているGIF動画はすべてこの方法で作成しています。
容量が大きくならないように、なるべく「2、3倍速再生」にして書き出すように意識しています。
Windows10では「Windowsキー+G」のゲームウィンドウ画面から録画できるので、動画ファイルを用意することは簡単ですね。
これらの便利な機能を有効に活用してGIFアニメーションの作成に役立てて頂けると幸いです。
お疲れ様でした。