PhotoshopでGIFアニメーションを作成するチュートリアルまとめ

PhotoshopでGIFアニメーションを作成するチュートリアルまとめ


アニメーションを作成する、というと難しい知識やテクニックが必要な
ように思えますが、GIFアニメーションを使えば簡単に作成することが
出来ます。
Photoshopを使ったGIFアニメーションの作成の基本から、応用・アレンジ
までGIFアニメーション作成に関するチュートリアルをご紹介します。

目次

フレームを使用したGIFアニメーション作成チュートリアル

GIFアニメーションをパラパラ漫画のようにフレームを並べて作成する
ベーシックな方法である「フレームアニメーション」の作成に関する
チュートリアルです。

フレームを使用した GIF アニメーション作成方法(~CS5)

フレームを使用した GIF アニメーション作成方法

https://helpx.adobe.com/jp/photoshop/kb/5636.html

フレームを利用してアニメーションGIFを作成する方法についての
チュートリアルです。Photoshop CS5以前のアニメーションフレーム
を使った作成方法です。

フレームを使用した GIF アニメーション作成方法(CS6~)

フレームを使用した GIF アニメーション作成方法

https://helpx.adobe.com/jp/photoshop/kb/5784.html

フレームを利用してアニメーションGIFを作成する方法についての
チュートリアルです。Photoshop CS6以降のタイムラインパネルの
「フレームアニメーションを作成」機能での作成方法です。
(チュートリアルはPhotoshop CCでの動作です。)

Photoshop Elementsで画像作成(GIFアニメ)

Photoshop Elementsで画像作成(GIFアニメ)

http://cg.xyamu.net/PhotoshopElements/entry89.html

画像レイヤーをフレームとして簡単なアニメーションを作る方法です。
Photoshopの古いバージョンやElementsを使っている場合はこの方法で
作成します。

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

タイムラインの使い方

http://cre-m.jp/photoshop_gif_01/

タイムラインパネルの基本的な使い方と作成したアニメーションを
GIFアニメ形式に保存する方法を解説しています。
サンプルファイルがダウンロードできますので、読みながら同じ
アニメーションが作成でき、分かりやすいです。
(作成できるアニメーションはフレームアニメーションです)

[Photoshop CS6]PhotoshopでGIFアニメを作る

PhotoshopでGIFアニメを作る

http://webdesignclass.blog.fc2.com/blog-entry-33.html

「フレームアニメーションを作成」を使ったアニメーションの
作成チュートリアルです。手書きイラストでシンプルなパラパラ
漫画のように見えますが、レイヤースタイルやレイヤーの不透明度の
調整などよりアニメーションらしい効果も加えられています。

 

タイムラインを使用したGIFアニメーション作成チュートリアル

動画編集感覚でアニメーションを編集・作成できる「ビデオタイムライン」
を使用したGIFアニメーション作成チュートリアルです。

タイムラインを使用してアニメーションを作成する方法

タイムラインを使用してアニメーションを作成する方法

https://helpx.adobe.com/jp/photoshop/kb/7072.html

タイムラインパネルを使用してアニメーションを作成する方法の
チュートリアルです。Photoshop CCのチュートリアルですが、
タイムラインパネルはPhotoshop CS6以降(CS5はExtended版のみ)
の機能です。

複数のGIFから一つのGIFを作るチュートリアル【ビデオタイムライン活用法】

複数のGIFから一つのGIFを作るチュートリアル

http://www.actzero.jp/developer/report-13909.html

二つのGIFアニメーションを組み合わせて一つのGIFにすることは
フレームアニメーションのみではなかなか難しいのですが、
ビデオタイムラインを使えばそれぞれの動きを持つGIFを合わせて
より複雑な動きをするアニメーションを作成できます。

トゥイーンに関するチュートリアル

フレームアニメーションのフレーム間を自動で生成して補完してくれる
機能「トゥイーン」に関するチュートリアルです。

トゥイーン!【アニGIF作成便利テクニック】

トゥイーン!【アニGIF作成便利テクニック】

http://www.actzero.jp/developer/report-14481.html

アニメーションGIFといえば、カクカクとぎこちない動きをする
イメージがありましたが、トゥイーンでフレーム間を補完すれば動きが
かなり滑らかになります。この「トゥイーン」について詳しく紹介して
います。

【Photoshop】トゥイーンで滑らかなGIFアニメーション作成

トゥイーンで滑らかなGIFアニメーション作成

http://nontic-blog.blogspot.jp/2014/07/photoshopgif.html

GIFアニメーションの動きを滑らかにするトゥイーンを使って画像を
切り替えれば点滅や色の変化なども滑らかになります。

 

動画ファイルからGIFアニメーションを作成するチュートリアル

画像ファイルを編集・合成・作成して作るGIFアニメーションだけではなく、
Photoshopで動画ファイルを開きGIF形式で保存することでGIFアニメーション化
することができます。

Photoshopをビデオ編集に活用!:ビデオをGIFアニメーションとして保存する

ビデオをGIFアニメーションとして保存する

https://www.youtube.com/watch?v=54TMqmbHz8w

イラストやテキストレイヤーなど、画像を一から制作する方法でなく
動画ファイルをPhotoshopで開けばGIFアニメーションとして保存する
ことが出来ます。(動画チュートリアルです)

[Photoshop] mp4 を GIF アニメに変換

 mp4 を GIF アニメに変換

http://pronama.azurewebsites.net/2014/07/02/photoshop-mp4-to-gif-anime/

mp4形式の動画ファイルをPhotoshopで開き、GIFアニメーションとして
保存する方法です。GIFアニメーションは画像が表示できれば環境を
選ばず再生できるのが強みですね。

GIFアニメーションの活用に関するチュートリアル

GIFアニメーションで作成するテクニックだけでなく、動きや効果の
分かり易さや面白さも要です。具体的な活用例とその作成方法の
チュートリアルです。

PhotoshopでつくるGIFアニメバナー

PhotoshopでつくるGIFアニメバナー

https://blogs.adobe.com/creativestation/web-photoshop-gif-animation-spin-tween

GIFアニメーションといえばWEB広告やバナーでよく見かけますよね。
車の写真をもとに、GIFアニメバナーを作成する方法です。
スピンぼかしとトゥイーン機能を使って躍動感ある仕上がりです。

バナーづくりで役立ちそう!PhotoshopCCでGIFアニメーションを作る方法。

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

http://handywebdesign.net/2013/11/how-to-make-a-gif-animation-in-photoshop/

フレームアニメーションを使ったバナーを作成するチュートリアルです。
シェイプの色を変えたり、同じものを画面に増やしたりと、
動き自体はとても簡単なものですが、少し動きがあるだけでバナーが
より目を引きます。

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

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

http://www.trisec.co.jp/wdm/ps-tips/pst-001.html

「フレームアニメーションを作成」を使用して、15枚の画像を
順番に表示させる方法です。こちらのチュートリアルのように全く
違う画像に切り替えていけばスライドショーのようにも使えますね。

【ドッキドキGIF講座】シュンと画像が切り替わるの巻

シュンと画像が切り替わるの巻

http://www.actzero.jp/developer/report-15694.html

静止画像をスライドショーのように画像を切り替える
アニメーションの作成方法ですが、「ぼかし(移動)」フィルタを
挟むことで、素早く画面を切り替えたような躍動感が出ています。

バナーにも使えるPhotoshopで簡単【GIFアニメーション】

バナーにも使えるPhotoshopで簡単【GIFアニメーション】

https://wazalog.aliinc.co.jp/posts/18

「フレームアニメーションを作成」を使ったGIFアニメーション作成
チュートリアルです。アニメーションをどのように使うか、作成方法を
紹介した画像以外のバナーへの活用例もタイプが全く違うものなので
アイディアの参考になります。

Photoshopで今すぐ試せるGIFアニメの作りかた

https://wazalog.aliinc.co.jp/posts/18

http://www.haconiwa-mag.com/study/2015/11/gifanime/

「じんわり浮かび上がるフェードGIF」「次々に文字が登場してくるGIF」
「雪が降るGIF」を作成するテクニックを紹介しています。
どれもバナーなどでよく見かける効果ですので、いろんな画像で
使えそうですね。

意外と簡単。Photoshopで10分でできちゃうGIFアニメ。

Photoshopで10分でできちゃうGIFアニメ

http://wp-e.org/2014/03/18/1371/

奥からペンギンが飛び出してくるような立体的に見えるGIFアニメーション
のチュートリアルです。動かす際に必要となる対象物(ペンギン)の
切り抜きや切り抜いた位置の背景のレタッチ法も参考になります。

GIFアニメーションでインフォグラフィックを作ろう!

GIFアニメーションでインフォグラフィックを作ろう

http://www.hivelocity.co.jp/blog/37199

視覚的に情報を伝える「インフォグラフィック」をGIFアニメーションを
使って作成しています。動きを加えることで静止画だけでは伝わり
きれない情報を補足してくれます。

Photoshopを使ってシネマグラフを作る方法

Photoshopを使ってシネマグラフを作る方法

http://liginc.co.jp/web/design/photoshop/102162

画像の一部のみをアニメーションさせた「シネマグラフ」の作り方を
紹介しています。タイムライン機能を使った具体的な作成方法はもちろん
上手く作るための条件も参考になります。

ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

GIFアニメを使った目を引くサイトロゴの作り方

http://requlog.com/self-branding/photoshop/gif-animation/

色がじわじわと変化していくロゴをGIFアニメーションで作成する方法です。
「トゥイーン」で追加するフレーム(変化のコマ数)の枚数を増やせば
なめらかに変化します。

【タイムライン】ドット絵のGIFアニメーションをつくる【フレーム】

ドット絵のGIFアニメーションをつくる

http://psgips.blog24.fc2.com/blog-entry-509.html

ドット絵でGIFアニメーション(フレームアニメーション)を作る
チュートリアルです。ドット絵のようなベタ塗りのイラストはGIF
の画像形式的にもアニメーションとして動かす対象としてもよく合う
素材ですね。

PHOTOSHOPで簡単に湯気を描く

PHOTOSHOPで簡単に湯気を描く

http://gif89a.net/gorira/

Photoshopで珈琲に湯気を描き足し、GIFアニメーションにして湯気の
揺らめき加工を施す方法です。飲食物に湯気加工はよく行いますが
動きを加えるとよりシズル感がアップしますね。

【キラッ】photoshopでつくる、キラッと光るGIFアニメの作り方3選

キラッと光るGIFアニメの作り方3選

http://www.actzero.jp/developer/report-15635.html

「キラキラ記号を明滅させる」「つるっとした光を走らせる」
「ほわっと光らせる」という3タイプの光るGIFアニメーションの
作成方法を紹介しています。テキストレイヤーはもちろん、
イラストや写真の輝き演出にも使えます。

PhotoshopのCS6を使用したロード画面用のサークルアニメーションをする方法

ロード画面用のサークルアニメーションをする方法
http://www.iceflowstudios.com/2013/tutorials/loading-circle-animation-using-photoshop-cs6/

Webサイトでよく見かける読み込み中の画面に表示されるローディング
サークルを「タイムラインを作成」を使って滑らかに作成する方法です。
(英語でのチュートリアルです)

Photoshop Elements 6.0で作る雨降りアニメ

http://allabout.co.jp/gm/gc/2390/

http://allabout.co.jp/gm/gc/2390/

画像に加える効果として汎用性の高そうな雨降りアニメーションを
作成するチュートリアルです。お使いのPhotoshopのバージョンに
よってレイヤースタイルのパターンに「オーク」がなければ、
類似した木目調のパターンでも代行できます。

GIFアニメに少し細工すると突然奥行き感が増して立体っぽくなるテクニック

GIFアニメに少し細工すると突然奥行き感が増して立体っぽくなるテクニック

http://gigazine.net/news/20140301-3d-gif-animation/

画像の中に2本の白線を書き込み、画面の動きに合わせて白線を
調整すると立体感が出て3D風のGIFアニメーションになるという
テクニックを紹介しています。

PhotoshopでGIFアニメーションをトゥイーンで作って保存する方法。

GIFアニメーションをトゥイーンで作って保存する方法

http://threem-design.com/3minutes/gif-animation/

GIFアニメーションでUFOの滑らかな動きを表現するチュートリアル。
写真はどうしても画質が劣化してしまうGIFなので、敢えてレトロな
雰囲気に仕上げるところもオシャレですね。

PhotoshopでGIFアニメを作る方法―トゥイーンの使い方

トゥイーンの使い方
http://cre-m.jp/photoshop_gif_03/

トゥイーンを使って炎が燃え上がるGIFアニメを作る方法です。
フレームとフレームの間を補完して燃え上がる様子をリアルに表現
しています。

PhotoshopでGIFアニメを作る方法―パペットワープ,写真1枚でGIFアニメを作る方法

パペットワープ,写真1枚でGIFアニメを作る方法
http://cre-m.jp/photoshop_gif_04/

パペットワープを使用して、画像内のレイヤー化した部分のみを
変形させ、アニメーションさせる方法です。
パペットワープを使えば、動作開始のポーズの画像が一枚あれば
変形させてアニメーションにできます。

GIFアニメーションの保存に関するチュートリアル

作成したGIFアニメーションを保存に関するチュートリアルです。
ファイルサイズと画像劣化のバランスが必要ですね。

PhotoshopでGIFアニメ軽くする

PhotoshopでGIFアニメ軽くする

http://memo.sanographix.net/post/78845760446

GIFアニメーションのファイルサイズはweb用に保存するものではかなり
重いですよね。保存をする際に軽くする方法やそれぞれの方法の劣化の
度合いを比較しています。

まとめ

いかがでしたか?
工夫によってかなり面白いアニメーションも作成できますよね。
GIFアニメーションはプラグインを必要としないので、ブラウザや
OSなどを選ばず動く強みもあり、WEBページに動きを与えたい場合にも
とても便利です。是非活用してみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleElasticSearch入門 インデックス・タイプ・マッピング・アナライザなどの用語まとめ