【Photoshop基礎講座】アニメーションGIF作成方法

アイキャッチ

こんにちは、NOEです。

Photoshopって色々な機能がありますよねぇ~、まだまだ使えていない機能たくさんありますおそらく。

一生使わないものもあるでしょう。。。

 

新たにPhotoshop初心者に向けて【Photoshop基礎講座】の連載を始めることにしました。

今回はアニメーションGIFの作成方法(フレーム編)です。

 

さっそく作る

下のような、画像が切り替わっていくアニメーションGIFを作成しながら説明していきたいと思います。

何か画像を4枚ほど用意してください。

image

①ドキュメント作成

今回は600×300で作成し、その上に画像を4枚重ねています(画面右レイヤーをごらんください)

01

②GIF作成画面を開く

メニューバーから「ウィンドウ」-「タイムライン」を選択します。

2

フレームアニメーションを作成を選択します。

3

下のような画面になります。

4

③GIF化します

タイムラインパネルの「選択したフレームを複製」ボタンをクリックして、フレームを追加します。

5

2番目のフレームを選択したまま、レイアーで02(夏)を選択します。

aaaaa

この手順でフレームを複製し、秋、冬のフレームを作成します。

666

各フレームにディレイ時間を割り当てます。

asd

ループオプションを設定します。

awer

「アニメーションを再生」ボタンをクリックして、プレビュー確認します。

axcvb

④完成しました

【ディレイ時間】1秒 【ループオプション】無限

image

アニGIFパターンの紹介

以前このクリエイティブブログ内でアニメーションGIFの作成チュートリアルを紹介していましたので、

まとめて紹介したいと思います。

ちょっとした工夫でスピード感を!GIFアニメテクニック

07

少ないコマ数で、スピード感を出すちょっとしたテクニックの紹介をしています。

詳しくはこちら

 

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

blog00_sample

キラキラGIFアニメの作り方を紹介しています。

詳しくこちら

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

017

画像が、シュンっと切り替わるバナーの紹介です。

詳しくはこちら

 

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

a88e4c9fdca580b0d7da6b91933bb6e61

制作部のアニGIF職人タニグチ氏の【ビデオタイムライン】を使用したGIFバナーです。

こんなことまで出来るのかと感心します。

詳しくはこちら

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

0e50f63b88743c28c377d6590d27b19c

【トゥイーン】という便利コマンドをつかった作成方法です。

詳しくはこちら

 

GIFかわいいWEBサイトまとめ

blog1

作成方法ではないですが、アニGIFが使われているサイトを紹介しております。

詳しくはこちら

 

上で紹介しているチュートリアルを一通り作成して頂ければ、

いっきにアニGIFの上級者になる事が出来ます!