見出し画像

SNSとの相性◎GIFアニメーションの簡単な作成方法!

皆さんこんにちは。
今回はSNSと相性がよい「GIFアニメーション」のPhotoshopを使った、簡単な作成方法をご紹介いたします!

そもそもGIFアニメーションとは…
複数の静止画を組み合わせて動きをつけた画像フォーマットのことです。ファイルの拡張子は「.gif」。
パラパラ漫画をイメージしていただくと分かりやすいかもしれませんが、連続した静止画を順に表示させ、動いて見える仕組みとなっています。

簡単な動きをつけることができ、静止画よりも直感的にわかりやすく伝えられるのがメリットです!

Photoshopを使ったつくり方

① 素材の準備

まずは動かしたい素材を準備しましょう!
・gifの長さ
・使用したい素材
によっては最終的な書き出しデータ容量も大きくなってしまうため、バランスを見ながら選定することをおすすめします。

② Photoshopで素材を開く
素材をPhotoshopに読み込み、ファイルをそれぞれ個別のレイヤーに配置します。※今回は4枚の画像を使うので、レイヤーが4つあります!

③ 素材をタイムラインに追加する

タイムライン(ウィンドウ/タイムライン)を開きます。
下部にタイムラインができました!さらにドロップダウンメニューから「フレームアニメーションを作成」を選択後、「フレームアニメーションを作成」をクリック。するとこのような画面に。

④ 素材をタイムライン上で編集

編集しやすいよう、左下のアイコンをクリック。すると上記のようなタイムラインが表示されます。表示したい順にレイヤーを並べ、素材の長さも直接編集します。

⑤ 書き出し

ファイル>書き出し>Web用に保存(従来)を選択
詳細画面が開いたら、最適化ファイル形式を「GIF」に設定し、ループオプションを「無限」に設定します。あとは保存をおし、指定場所にデータを書き出すだけ!

これで完成です!

スマホの中身が動いている様子のGIFアニメーション

Photoshopで簡単に作れるGIFアニメーション。
ぜひ皆さんもご活用してみてください!

最後までお読みいただきありがとうございました!
少しでもお役に立てれれば、ぜひスキをお願いします!

この記事が参加している募集

オープン社内報

企業のnote

with note pro

この記事が気に入ったらサポートをしてみませんか?