フォトショップで作る!GIFアニメーション

9/13の勉強会のお題は“GIFアニメーション”でした。
データも軽く、今また何気に脚光を浴びている(?)GIFアニメ。
これをGIFアニメ作成アプリや、CSS3アニメーション等、いろんな方法で作ってみました。

その中から、今回はphotoshopを使ってGIFアニメを作ってみようと思います。

1.画像を必要な枚数用意する

イラストレーターで作った画像を4枚用意しました。
gifani-01

2.フォトショップで開き、それぞれ別のレイヤーに配置する

こんな感じ↓↓
gifani-02

3.ウインドウ>アニメーション(CS6〜は、ウインドウ>タイムライン)を表示させる

gifani-03

するとこんな画面が現れます。最初に開いた時にこの画面でなかった場合は、右下の画面を切り替えるボタンをクリックしてみて下さい。
gifani-04

4.フレームに画像を割り当てる

アニメーションのコマを選択している時、レイヤーパネルの方ではそのコマに表示させたいレイヤー以外のレイヤーを非表示にしておきます。(ややこしい…)

例えば、ここでは4コマ目に一番上のレイヤー画像を置きたいので、その他の画像レイヤーを非表示にしています。
gifani-05

5.速度とループの設定をする

gifani-06

gifani-07

6.GIFで書き出す

書き出す種類でGIFを選択すれば、一番下にアニメーションの情報が出てきます。再生ボタンで確認も出来ます。

gifani-08

以上の手順で出来上がったのがこちら↓↓

anime-ringo

先程の4枚の画像を組み合わせて全部で16コマのアニメーションを永久ループさせています。
昔、教科書の片隅に書いて遊んだパラパラ漫画を思い出して、皆さんも面白い作品を作ってみて下さいね!

(ところでこのページには、いったい何人の林檎郎がいるでしょう?^^; )

カテゴリー: study, 勉強会 | タグ: , , | 投稿日: | 投稿者:
かおりんご

かおりんご について

マルチメディアスクールWAVE立川校卒業。 タカハシ先生と愉快な仲間達と共に倶楽部りんごを結成、絶賛修行中。 WAVE名物だったライブ授業、りんごでは毎週4時間みっちりやってます! ネットで何でも学べる時代ですが、やはりライブで学ぶことに勝るものはありませんね。 りんご結成時には活動拠点を探して東奔西走。運営、スケジュール管理をやっています。 好きなもの: overflow:hidden、SVG、ライブトレース、流行り物(笑)、ねこ、幕末etc。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA