INDEX

1. 完成サイズの新規ファイルを用意する
2. アニメーションに必要な絵（パーツ）をレイヤーに分けて用意する
3. タイムラインパネルでフレームを作成する
4. 各フレームの表示時間を設定する
5. Web用に保存する

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］初心者用、覚えておくとちょっとはかどるショートカット集