

1限目
実技 UI/UXデザイン実習
Photoshopの機能~GIFアニメーションの作り方について~
2限目
実技 UI/UXデザイン実習
GIFアニメーション制作
3限目
実技 UI/UXデザイン実習
GIFアニメーション制作
4限目
実技 UI/UXデザイン実習
GIFアニメーション制作
5限目
実技 UI/UXデザイン実習
講評(作品紹介タイム)
GIFアニメーション
GIFアニメーション(ジフアニメーション、GIF animation)は、Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーション。
アニメーションGIF (animated GIF) ともいう。
参考サイト
—自分用・実技の覚書—
0 アドビのサイト
以下で骸骨のイラストをダウンロード&右クリックですべてを展開して解凍
https://www.adobe.com/jp/learn/photoshop/web/create-animated-gif
1. アニメーション用の画像(JPEG)を1枚だけPhotoshopで開く
→背景ができる
2.残りの画像(2-10)をドラッグアンドドロップで重ねる。
重なっているレイヤーをクリックしてレイヤーに全部出す
※レイヤーの順番を確認
3タイムラインを出す
ウィンドウ→タイムライン
4タイムラインに動きを取り込んで制作していく。
5フレームアニメーションを選択
6レアイヤー0(ロックが外れてないと背景になっている)を選択して
もう一度フレームアニメーションを作成をクリック
7タイムラインに最初のレイヤーが出来たら3本線からレイヤーからフレームを作成をクリックしたら全部のレイヤーが取り込まれる。
8全部選択して秒に変更
9再生してチェック。
講義の感想:
画像やバナーに動きが加わるとそれだけで注意を引く効果があると感じました。
実際、バナーを見る時、人は1秒も経たずと興味があるかないかの判断をしているとのことなので、目に入った一瞬のインパクトが大事だと学びました。
作業していても、アニメーション用のソフトを使わずとも、フォトショップだけで完結できるので手軽に作成できるし何より楽しい作業でした。
欲を言えば、アニメーションの動きのタイミングやリズムなどもう少し拘ることができそうです。