デザイン

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

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

↓下記本は自身がこの1冊でPhotoshopの基本が身についたお勧めの本で、10年以上使えそうです。

Photoshop 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応]
Photoshop 10年使える逆引き手帖【CC完全対応】

▪Photoshop 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応]
Photoshopの「必修の基本テクニック」から「ワンランク上のプロ技」まで完全網羅して、この一冊でPhotoshopを使いこなせるようになります。

book
created by Rinker
¥2,640 (2022/10/05 01:11:42時点 楽天市場調べ-詳細)

完成イメージ

サンプル

GIF圧縮サイト

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

ILOVEIMG
ILOVEIMG

↓illustratorの使い方をしっかりマスターしたい方はこちらの本がお勧めです。

▪Illustrator 10年使える逆引き手帖【CC完全対応】[Mac & Windows対応]
これからIllustratorを習得する人や、一度チャレンジしたけど挫折した人におすすめの一冊です。すべての手順・考え方を丁寧に解説されておりずっと役立ちます。
この一冊があればIllustratorを使いこなせるようになります。

book
created by Rinker
¥2,640 (2022/10/04 17:55:06時点 楽天市場調べ-詳細)
プル

イラストや写真を見る時は、「自分はどういった表現をしようか?」と常に考えてしまうプル。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA