webをつくる人になる

スクールでwebサイト制作を学んだことをきっかけに、webやパソコンなどについて記録していく たまにCG たまにおやつ・・・

GIFアニメーションをつくる

↓このgifアニメーションを作ってみよう   Tool:Photoshop

f:id:weble:20140801204225g:plain

 

1.素材を作ります。

 今回は、テキストとシェイプでロゴ的なものを作ってみました。

f:id:weble:20140802014602p:plain

 

2.先ほど作った素材を一つのレイヤーにします。

 レイヤー・ウィンドウ右上の▼タブをクリックして「表示レイヤーを結合」(Ctrl+Shift+E)

 ここで一つ注意点。背景は非表示にしておきます。

 透明部分を保持した素材にするためです。

Tips:結合するときに元レイヤーを残したい場合は、(Ctrl+Shift+Alt+E)

f:id:weble:20140802014632p:plain

 

 3.先ほどの結合した素材レイヤーを2回コピーします。

 レイヤー名を「ぼかし中」「ぼかし大」とします。

f:id:weble:20140802014643p:plain

 

4.「ぼかし中」レイヤーに、フィルター/ぼかし(移動)をかけます。

f:id:weble:20140802014654p:plain

 

5.ぼかし移動[角度:0°、距離:25pxel]

f:id:weble:20140802014704p:plain

 

6.同様に、「ぼかし大」レイヤーにも、ぼかし(移動)をかけます。

 「ぼかし中」より倍のぼかしをかけます。移動速度がより速く感じる効果です。

 ぼかし移動[角度:0°、距離:50pxel]

f:id:weble:20140802014712p:plain

 

7.素材の準備ができたので、いよいよアニメーションをつけます。

 ウィンドウ/アニメーションをクリックします。下部にアニメーション・ウィンドウが表示されます。

 すでに1f(f:フレーム)があります。

 背景レイヤーを表示させます。

 この状態が1fとなります。

f:id:weble:20140802014721p:plain

 

8.アニメーション・ウィンドウから「選択したフレームを複製」→2fができます。

 「ぼかし大」レイヤーを表示させ、図のように左へ移動させます。

 注意点:レイヤーを移動させる際、Shiftを押しながら、または矢印キーで、X軸(横)方向のみ移動させます。

f:id:weble:20140802022903p:plain

ここで、2fの秒数を下図のように0.05秒に変えておきます(フレームの秒をクリックし、「その他」を選択すると、好みの秒を設定できます)。

フレームを複製すると、秒数も同じになるからです。今回、2f~8fは0.05秒にします。

f:id:weble:20140802025209p:plain

 

9.同様に3fを作成し、「ぼかし大」レイヤーを右に移動します。

f:id:weble:20140802014806p:plain

 

10.同様に4fを作成し、「ぼかし大」レイヤーを非表示にし、「ぼかし中」レイヤーを表示します。

f:id:weble:20140802014825p:plain

 

11.5fを作成し、「ぼかし中」レイヤーを非表示にし、元の素材レイヤーを表示します。

f:id:weble:20140802014834p:plain

 

12.6fを作成し、「ぼかし中」レイヤーのみ表示し、右へ移動させます。

f:id:weble:20140802014902p:plain

 

13.7fを作成し、「ぼかし大」レイヤーのみ表示し、右へ移動させます。

f:id:weble:20140802014912p:plain

 

14.8fを作成し、「ぼかし大」レイヤーをさらに右へ移動させます。

 フレームの作成はこれで完了です。

f:id:weble:20140802014921p:plain

 

15.1fと5fを2秒に変更します。

 アニメーション・ウィンドウの下部にある再生ボタンを押して再生して確認してみましょう。

 フレームを更に追加したり、秒数を変更したりして、自然に見えるよう調整します。

 作業はこれで完了です。

f:id:weble:20140802014945p:plain

 

16.GIFファイル形式で保存します。

 ウィンドウ/Webおよびデバイス用に保存(Alt+Ctrl+Shift+S)

f:id:weble:20140802031016p:plain

 

17.[GIF、カラー:256、ループオプション:無限]とし、保存。

 ・・・完成! ブラウザに表示してみたり、ブログやサイトに載せてみましょう。

f:id:weble:20140802031037p:plain