PhotoshopでキューティーハニーGIFアニメを作ろう！（3）

「キューティーハニーの変身！　ハニーフラッシュ！」
…のGIFアニメ作りにチャレンジ！

（10）各アニメのコマの時間調整1
ここまで仕上がったので、次にアニメの効果を出すために、
各コマの時間を設定していく。
最初のアイコンに戻って、0.1秒と記述されている右横の
小さな三角アイコンをクリックする。
時間を選択するメニューが現れる。
ここでは「その他…」をクリック。


（11）各アニメのコマの時間調整2
計画ではアニメーションは無限ループ。
つまりアニメが永遠に繰り返されるように設定。
時間表示の下に「無限」と表示されている。
1回だけのアニメ表示などにしたい場合は、
「無限」の横の小さな三角アイコンをクリックして
ループ回数を設定することができる。
今回のアニメでは無限ループなので、メリハリをつけるため、
最初のコマを2秒。
途中は演出によって、0.2秒から2秒を使い分ける。


（12）アニメーションGIFとして保存1
再生ボタンをクリックして、雰囲気を確認する。
ここでのアニメの速度は当てにならないので、
GIFアニメに保存して、ブラウザーでアニメを確認する。
アニメーションGIFへの保存は、
「ファイル」→「Web用に保存…」をクリックする。


（13）アニメーションGIFとして保存2
保存用の別ウィンドウが立ち上がる。
プリセットの項目にあるファイルの種類のプルダウンメンヒューをクリック。
ここで「GIF」を選択。
カラーは最大の256色。
→「保存」をクリック。
このような大きなGIFアニメだと、
CPUの性能によって多少時間がかかる。


（14）完成後の確認
GIFファイルを保存したら、
インターネットエクスプローラー、サファリ、ファイヤーフォックス
などのブラウザーで
「ファイル」→「開く」または、
直接ファイルをブラウザーウィンドウにドラッグする。
ここでアニメの速度や、演出効果をチェック。
ギクシャクするようだったら、Photoshopで
再度、各アニメアイコンのコマの速度（時間）数値を変更して
気に入るまで保存、確認作業を繰り返す。





（15）完成品
完成品は、テキスト文字を入れたり、
レイヤーの順番を変えて一部背景の光を手前に持ってきたり、
光のリングがスムースに光るように調整した。





PhotoshopでキューティーハニーGIFアニメを作ろう！（2）へ戻る…

PhotoshopでキューティーハニーGIFアニメを作ろう！（1）へ戻る…


他にも、写真を使ったGIFアニメ作りの方法をご紹介しております。
「ウルトラマンアグルのカラータイマーが点滅したっ！」…のGIFアニメを作ってみよう！
併せてご覧下さい。

I'll be in touch.

PhotoshopでキューティーハニーGIFアニメを作ろう！（2）

「キューティーハニーの変身！　ハニーフラッシュ！」
…のGIFアニメ作りにチャレンジ！

（4）アニメーションアイコンの複製を繰り返し1
アイコン5をクリックしてアクティブ状態にして複製を作成。
アイコン6ができる。
アイコン6をクリックしてアクティブ状態にしする。
レイヤーの「背景2フェード用」をクリックして、可視状態
（レイヤー左の目玉アイコンをチェック）とする。


（5）アニメーションアイコンの複製を繰り返し2
同様の手順でアイコン7を作成。
レイヤーでは、
「ハニーフラッシュ1」は不透明度50％
「ハニーフラッシュ2」を不透明度90％で可視状態に、
「背景2フェード用」の画像を上へ移動させた。



（6）アニメーションアイコンの複製を繰り返し3
同様の手順でアイコン8を作成。
レイヤーでは、
「ハニーフラッシュ1」は不可視に。
「ハニーフラッシュ2」は可視状態のままで不透明度を50％に下げ、
「ハニーフラッシュ3」を可視状態、透明度80％、
「背景2フェード用」の画像を上へ移動させた。


（7）アニメーションアイコンの複製を繰り返し4
同様の手順でアイコン9を作成。
レイヤーでは、
「ハニーフラッシュ2」は可視状態のままで不透明度を20％に下げ、
「ハニーフラッシュ3」も同様に不透明度を50％くらいに下げ、
「ハニーフラッシュ4」を可視状態、透明度60％、
「背景2フェード用」の画像を上へ移動させた。


（7）アニメーションアイコンの複製を繰り返し5
同様の手順でアイコン10を作成。
レイヤーでは、
「ハニーフラッシュ2」は不可視状態に。
「ハニーフラッシュ3」は可視状態のままで不透明度を10％に下げ、
「ハニーフラッシュ4」も同様に不透明度を30％くらいに下げ、
「ハニーフラッシュ5」を可視状態、透明度60％に。


（8）アニメーションアイコンの複製を繰り返し6
同様の手順でアイコン11を作成。
同様にハニーのアニメ状態を演出していく。
ここでは新たに、
背景で円形に広がる光を追加する「背景3回転用」を可視状態に。
同様の手順でアイコン14まで作成を作成。








（9）アニメーションアイコンの複製を繰り返し7
同様の手順でアイコン15を作成。
ここでは「フラッシュ0」レイヤーを可視状態にする。
ネックストラップのハートから光をリング上に光らせる効果を演出。
同様の手順でアイコン17まで作成を作成。







PhotoshopでキューティーハニーGIFアニメを作ろう！（3）へ続く…

PhotoshopでキューティーハニーGIFアニメを作ろう！（1）へ戻る…

PhotoshopでキューティーハニーGIFアニメを作ろう！（1）

「キューティーハニーの変身！　ハニーフラッシュ！」
…のGIFアニメ作りにチャレンジ！

【準備】
素材のイラストと背景の効果を想像して各素材画像を準備。
素材のイラストと背景の効果を想像して、
各素材画像を準備。
Photoshop（今回はCS2の画面です）を起動します。
用意した画像（複数レイヤー）ファイルを開きます。
「ウィンドウメニュー」→「アニメーション」にチェック。


アニメーションには最初の1コマが自動的に表示されている。
アニメの時間調整は最後にして、まずはコマの流れを作成する。


アニメの要素となるコマをあらかじめ複数レイヤーで作っておく。


サンプルはキューティーハニーが
「拡大」→「縮小」→「フィルタ→ぼかし→移動」→「レイヤーの不透明度」などを
使い分けたコマレイヤーを作成されてある。


完成品のフォントの点滅は、
「レイヤー」→「レイヤースタイル」→「光彩（外側）」で仕上げてある。
ここで紹介するベースファイルはキューティーハニーのコマだけで10レイヤー用意してある。


最後の仕上げ、完成品ではアニメのコマは31個。
GIFアニメとしては実用的ではないファイル容量になるが、完成仕上げの参考見本としてアップした。


【アニメの作成手順】

（1）1コマをクリックして複製（コピーアイコンクリック）を作る。
アイコンの左上に順番に番号が付く。
ここではレイヤー「ハニーフラッシュ1」をアクティブ表示にした。


（2）トゥーイーンでお手軽フェード効果を作成。
アイコンの1と2をshiftを押しながらクリックする。
同時に2つのアイコンを選択状態にする。
その状態で、アニメーションウィンドウの右上の三角のボタンをクリックしてメニューを表示させる。
メニューから「トゥーイーン」を選択。


（3）トゥーイーンのコマ数を選択。
選択すると、詳細ウィンドウが出る。
ここでは追加するフレームに「3」と入力。
これでアイコン1と2の間に新たに3つのフレームが作られる。
しかも1と2のフェードモーション効果を自動的に作成してくれる。
この時点で、コマは5つとなる。




PhotoshopでキューティーハニーGIFアニメを作ろう！（2）へ続く…