トラックバック
[Photoshop CS6]PhotoshopでGIFアニメを作る

こんにちは!初心者のためのWEBデザイン教室、第24回目の授業です。
動画を作るといえばFlashですが、実はPhotoshopでも動画を扱うことができます。
もちろんFlashほど精巧なものはできませんが、シンプルなものなら簡単に作ることができます。
今日はPhotoshopだけを使って、GIFアニメを作ってみましょう。
パラパラ漫画がイメージできれば、とっても簡単ですよ!
INDEX
1.完成サイズの新規ファイルを用意する
解像度は72ppiで設定します。
2.アニメーションに必要な絵(パーツ)をレイヤーに分けて用意する
アニメーションの途中から出現するオブジェクトや、拡大・縮小・回転など変形するオブジェクトの変形後のものなども、初めに用意しておく方がいいと思います。
フレーム操作を始めてからレイヤーを追加すると、それまでのフレームに影響が出て修正の手間が生じます。
最初にアニメーションに表示しないものは、レイヤーで非表示にしておきます。
3.タイムラインパネルでフレームを作成する
パーツが用意できたら、ウィンドウ下部の「タイムライン」パネルのタブをクリックして開きます。
そして、プルダウンから「フレームアニメーションを作成」を選択し、ボタンをクリックします。
タイムラインパネルにフレームが1つ表示され、現在表示されているレイヤーのサムネイルが出ています。
このフレームが、パラパラ漫画でいう紙1枚分ですね。
タイムラインパネル下の「選択したフレームを複製」アイコンをクリックします。
そうすると同じ内容のフレームが複製されます。
複製したフレームを選択して、内容を編集します。
◆[パターン1]コンテンツを移動させる
タイムラインパネルで2フレーム目が選択されているのを確認し、移動ツールでオブジェクトを移動します。
その後、「選択したフレームを複製」アイコンをクリックし、3フレーム目でさらに移動させます。
この繰り返しです。
【できあがり】
◆[パターン2]レイヤーの不透明度を変更する
ここでは、レイヤーの移動に加えて2フレーム目から徐々に不透明度を下げています。
【できあがり】
◆[パターン3]レイヤーの描画モードを変更する
【できあがり】
◆[パターン4]レイヤースタイルを追加する
ドロップシャドウを追加してみました。
【できあがり】
◆[パターン5]レイヤーの表示・非表示を切り替える
少し凝ったものをと思うと、この方法が主になると思います。
全てのパーツを始めに用意しておいて、フレームごとに表示・非表示を切り替えます。
後からレイヤーを追加することもできますが、そうすると既に編集の終わったフレームにも表示されますので、修正が必要です。
この例では、2フレーム目と9フレーム目にのみセリフを表示しています。
その間のフレームは、ボールレイヤーを移動させています。
【できあがり】
動くものが多くてレイヤーも多量になるのであれば、レイヤーのグループ化をすると分かりやすいです。
(グループにしたいレイヤーを複数選択しておいて、「Ctrl+G」でグループになります。)
下の例は、1フレームに使用するレイヤーごとにグループにして、グループごと表示・非表示を切り替えています。
絵が下手なのは許して。。
4.各フレームの表示時間を設定する
タイムライン下の「アニメーションを再生」アイコンをクリックすると、再生します。
具合を見ながら、「フレームのディレイを設定」から、各フレームの再生時間を設定します。
さらにパネル左下の「ループオプションを設定」から、アニメーションの繰り返し回数を選べます。
5.Web用に保存する
保存はいつも通り、ファイルメニュー「Web用に保存」から、ダイアログで「GIF」を選択します。
これで完成!!
FlashのサポートされていないiPhoneやiPadでも、これなら表示されますね!
工夫次第で、いろんな楽しいものが作れそうです。
【参考】フレームアニメーションを作成する方法 (Photoshop CC)
それでは、お疲れ様でした!
- 関連記事
-
- [Photoshop CS6]PhotoshopでGIFアニメを作る
- [Photoshop CS5]スライスツールをもっと便利に使って、効率よくWeb用保存をする
- [Photoshop CS5]初心者用、覚えておくとちょっとはかどるショートカット集

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ
