-本日のアジェンダ-
1限目
実技 ECサイトデザイン実習②
GIFアニメーションについて
2限目
実技 ECサイトデザイン実習②
GIFアニメーションの使い方
3限目
実技 ECサイトデザイン実習②
GIFアニメーション作成
4限目
実技 ECサイトデザイン実習②
GIFアニメーション作成
5限目
実技 ECサイトデザイン実習②
発表会
本日のテーマ
GIFアニメーションを作ってみましょう
GIFアニメーションについて
GIFアニメーションは、Graphics Interchange Format の「マルチイメージ」を使ったアニメーション。アニメーションGIF ともいう。 マルチイメージは GIF87a で導入された機能で、複数のフレームを順に表示できる。
参考サイト
- 表現の幅がめちゃくちゃ広がる！GIFアニメーションのTwitter 活用事例12選
- Webデザインにも取り入れたい、クリエイティブなGIFアニメーションまとめ
- 最近よくみるGIF動画って何？ | ウェブラボ（株）スタッフブログ
- Photoshop でGIFアニメを作成する方法｜Photoshop マスター｜週刊 …
- 【Photoshop】トゥイーン機能を使って滑らかなGIFアニメを作る方法
- ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの ..
本日の操作のキーワード（Photoshop）
- ウィンドウ＞タイムライン【New】
- タイムライン＞ フレームの作成・削除【New】
- タイムライン＞ トゥイーン【New】
- 編集 ＞パペットワープ 【New】
（Illustratorと異なり、ツールバーにアイコンがありません） - Web用に保存（従来）
パペットワープ（Photoshop）
加工で写真のポーズを自由に変えたい人必見。Photoshop cs5で実装された「パペットワープ」で簡単にポーズが変えられます！座っている人が立ったり、ジャンプしたり。自由に動かして、写真の人物を元気に動き回らせることもできます。
参考サイト
- Photoshopのパペットワープで自由自在に写真加工する方法 | 東京上野の …
- Photoshop パペットワープがもっと上手くなる簡単テクニック | パソコン
- パペットワープツールを使用したベクターグラフィックの変形
パペットワープ（Illustrator）
パペットワープの機能はPhotoshopやAfterEffectsではおなじみの機能となりますが、ついにIllustratorにも搭載されました。もともとパペットとは「人形」の意味で、ワープは「歪み」となり、主に人や動物など、関節の可動を再現する変形に使用すると便利なツールになります。何かの軸を起点に歪みや回転を適用させる変形に非常に便利ですので、その使い方をご紹介します。