FC2ブログ

PhotoshopでキューティーハニーGIFアニメを作ろう!(3)

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


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

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

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

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

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

キューティーハニーアニメ完成確認



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

キューティーハニーアニメ最終完成



PhotoshopでキューティーハニーGIFアニメを作ろう!(2)へ戻る…

PhotoshopでキューティーハニーGIFアニメを作ろう!(1)へ戻る…


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

I'll be in touch.

スポンサーサイト



テーマ : Photoshopを楽しもう!
ジャンル : ブログ

tag : photoshop Adobe cs GIFアニメ アニメーション作成 キューティーハニー ハニーフラッシュ cuteyhoney スタジオハーミット フォトショップ

PhotoshopでキューティーハニーGIFアニメを作ろう!(2)

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


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

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


(6)アニメーションアイコンの複製を繰り返し3

同様の手順でアイコン8を作成。
レイヤーでは、
「ハニーフラッシュ1」は不可視に。
「ハニーフラッシュ2」は可視状態のままで不透明度を50%に下げ、
「ハニーフラッシュ3」を可視状態、透明度80%、
「背景2フェード用」の画像を上へ移動させた。
キューティーハニー12

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

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

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

キューティーハニー16

キューティーハニー17

キューティーハニー18

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

キューティーハニー20

キューティーハニー21


PhotoshopでキューティーハニーGIFアニメを作ろう!(3)へ続く…

PhotoshopでキューティーハニーGIFアニメを作ろう!(1)へ戻る…

テーマ : Photoshopを楽しもう!
ジャンル : ブログ

tag : photoshop Adobe cs GIFアニメ アニメーション作成 キューティーハニー ハニーフラッシュ cuteyhoney スタジオハーミット フォトショップ

PhotoshopでキューティーハニーGIFアニメを作ろう!(1)

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


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

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

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

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

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

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


【アニメの作成手順】

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

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

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


PhotoshopでキューティーハニーGIFアニメを作ろう!(2)へ続く…

テーマ : Photoshopを楽しもう!
ジャンル : ブログ

tag : photoshop Adobe cs GIFアニメ アニメーション作成 キューティーハニー ハニーフラッシュ cuteyhoney スタジオハーミット フォトショップ

スタジオハーミットRSS
プロフィール

STUDIOHERMIT

Author:STUDIOHERMIT
スタジオハーミットのオフィシャルブログです。Adobe Photoshop,Illustratorのスキル、Apple Macintosh関連の情報を配信しています。

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
Mail form.

名前:
メール:
件名:
本文:

検索フォーム
リンク