初めてでも簡単!photoshopでGIFアニメーションをつくる方法【画像素材編】

初めてでも簡単!photoshopでGIFアニメーションをつくる方法【画像素材編】

2016.08.24
kv_gif_ver2
ノウハウ

こんにちは。トムです。
いつも週末に公開している増刊号のアイキャッチ画像を作っているのですが、ある日突然、編集長から「今日からアイキャッチにも動きをいれよう」と言われました。

僕には動かす技術など全くありません。
そもそもどうやって動かすかもよくわかりません。
とりあえず調べてみる。

「あーGIFアニメーションをつくるのか・・・」

GIFつくったことありません。
色んな記事を参考にいざ作ってみると・・・

あらま、めちゃめちゃ簡単じゃないですか!

今回はGIFアニメーションの作り方を全然知らなかった僕でも、Photoshopを使って簡単にできた方法をまとめました。増刊号で作った画像を元に「画像素材だけでの作り方」と「動画素材を使ったつくり方」の2パターンを前編・後編に分けて紹介します。

ではさっそく作っていきましょう!

画像素材を使ったつくり方

前編では画像素材にアニメーションをつける作成方法を紹介します。

まずはデザインを作成します。
sample1

動かす素材を用意

今回は、このデザインに飛行機を飛ばしたいと思います。使う素材はコチラ↓
airplane
飛行機を切り抜いてスタート位置にしたい場所に配置します。
placement

タイムラインを開く

配置したら【ウィンドウ】⇒【タイムライン】を開きます。
sample3
【フレームアニメーションを作成】をクリックします。
timeline

フレームを追加

タイムラインを開いたら複製ボタンをクリックし、フレームを追加します。
timeline1
タイムラインのフレーム2を選択した状態で飛行機を移動させたい場所へ配置します。
placement2

間のフレームを増やす

トゥイーン機能を使ってフレームを生成します。
timeline2
このデザインでは45フレーム追加しています。
frame
間のフレームが追加されました。
timeline3

スピードの調整

再生してみてスピードを調整したい場合は、タイムライン上の数字部分をクリックし秒数を変更できます。この画像では「0.07秒」に設定しています。
timeline4

ループさせる

繰り返して飛行機を出現させたいので、ループ数を【無限】に設定します。
timeline5

GIF画像にする

再生して問題なければGIFにして書き出します。
save

完成品がこちら

fix
無事にフライト成功です!
飛行機に乗って海外旅行したくなっちゃいました。GIF画像でならどこでも行けちゃいますねw

最後に

今回は画像を使ったGIFアニメーションのつくり方を紹介させていただきました。
ビジュアルを作成した際に物足りなさを感じた時は、ぜひ動きを入れてみてはいかがでしょうか。

次回は動画素材を使ってつくる方法を紹介しますのでお楽しみに!

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

トム

トム

Designer

グラフィックが好きです。

ドワンゴデザイナー メンバー募集 ! !