9/13の勉強会のお題は“GIFアニメーション”でした。
データも軽く、今また何気に脚光を浴びている(?)GIFアニメ。
これをGIFアニメ作成アプリや、CSS3アニメーション等、いろんな方法で作ってみました。
その中から、今回はphotoshopを使ってGIFアニメを作ってみようと思います。
1.画像を必要な枚数用意する
2.フォトショップで開き、それぞれ別のレイヤーに配置する
3.ウインドウ>アニメーション(CS6〜は、ウインドウ>タイムライン)を表示させる
するとこんな画面が現れます。最初に開いた時にこの画面でなかった場合は、右下の画面を切り替えるボタンをクリックしてみて下さい。
4.フレームに画像を割り当てる
アニメーションのコマを選択している時、レイヤーパネルの方ではそのコマに表示させたいレイヤー以外のレイヤーを非表示にしておきます。(ややこしい…)
例えば、ここでは4コマ目に一番上のレイヤー画像を置きたいので、その他の画像レイヤーを非表示にしています。
5.速度とループの設定をする
6.GIFで書き出す
書き出す種類でGIFを選択すれば、一番下にアニメーションの情報が出てきます。再生ボタンで確認も出来ます。
以上の手順で出来上がったのがこちら↓↓
先程の4枚の画像を組み合わせて全部で16コマのアニメーションを永久ループさせています。
昔、教科書の片隅に書いて遊んだパラパラ漫画を思い出して、皆さんも面白い作品を作ってみて下さいね!
(ところでこのページには、いったい何人の林檎郎がいるでしょう?^^; )