デザイン

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

動くデザイン

ファイル形式.gifは、複数の静止画を動画のように表示し、動いているように見せる画像のことで、動きがある分、静止画よりも直感的にわかりやすく伝えられます。

アニメーションを手軽に作れるところがGIFの良さ。

GIFエウルア
spsaiyan

▪作り方のマニュアルは下記のURLから確認できます。
【Adobe】連続写真でアニメーションGIFを作成(アドビサポート)
https://helpx.adobe.com/jp/photoshop/how-to/make-animated-gif.html

▪Slack
Slackでも使えるので、コミニケションツールとしてGIFで面白いアニメーションを作ってみるのもいいですね。

サンプル

GIFの作り方

文字も入れたアニメーションの作り方です。まずは、複数の.pngを作ります。

「ファイル」→「スクリプト」→「ファイルをレイヤーとして読み込み」を選択します。

fot1
fot3

「OK」をクリックすると自動で選択した画像がレイヤーとしてすべて読み込まれます。

アニメーション(フレーム)

fot7
fot8

このやり方を繰り返すことでアニメーション(フレーム)にレイヤーを追加していきアニメーションを作ります。

アニメーション

完成イメージ

GIF圧縮サイト

▪ILOVEIMG
https://www.iloveimg.com/ja/compress-image/compress-gif

ILOVEIMG
ILOVEIMG