photoshopを使って3分で作れる矢印のGIFアニメーション

※当サイトにはプロモーションが含まれています。

最近は見かけなくなりましたが、以前は、CTA(Call To Action)のボタンの上に動きのある矢印のアニメーションが、ランディングページやセールスページによく使われていました。

このような矢印のアニメーションです。

今回は、このような矢印のアニメーションを、Photoshopを使って3分で作る方法について説明します。

3分で作れる矢印のGIFアニメーションの作り方

今回、使用しているPhotoshopのバージョンは、25.3.1です。

Photoshopの画面構成の名称は、下記をご参照ください。

PhotoShopの画面構成の説明
photoshop画面構成
A.メニューバー:画面の一番上、オプションバーの上に表示され、全般的な設定ができます(ファイルを開く/閉じるなど)

B.オプションバー:メニューバーの下に表示され、ツールの詳細設定ができます(ブラシであれば太さなどの変更など)

C.ツールバー:画面の左側に表示され、作業に使える様々な道具が収納されています(図形の作成など)

D.パネル:設定の一部が画面の右に表示され、オプションバーではできない詳細設定ができます

では、photoshopを使って、3分で作れる矢印のGIFアニメーションの作り方についてです。

①三角形を3つ作成します。

それぞれ別のレイヤーで、三角形を3つ作成します。
三角形を3つ作成

②フレームアニメーションを作成

メニューバーから、

ウィンドウ > タイムライン

を選択します。

ウィンドウ > タイムライン

フレームアニメーションを作成」を選択します。

フレームアニメーションを作成

③タイムラインに新規フレームを追加する

タイムラインが作成されました。
タイムライン

タイムラインのメニューから、「新規フレーム」を選択します。

新規フレーム

なお、2つフレームを追加したいので、もう1つ新規フレームを追加します。

すると、タイムラインはこのようになると思います。

新規フレームを2つ追加した状態

④フレーム1を作成する

フレーム1を選択して、表示させる矢印(レイヤー)を選択します。

フレーム1で表示させる矢印を選択

⑤フレーム2を作成する

フレーム2を選択して、表示させる矢印(レイヤー)を選択します。

フレーム2で表示させる矢印を選択

⑥フレーム3を作成する

フレーム3を選択して、表示させる矢印(レイヤー)を選択します。

フレーム3で表示させる矢印を選択

ちなみに、この状態でGIFを作成すると次のような感じになります。

これでは動きが急すぎるので、残像を表示させて動きを滑らかにしたいと思います。

⑦アニメーションフレームをトゥーインを作成

フレーム1とフレーム2の間にアニメーションを増やして、矢印の動きを滑らかにします。

フレーム1とフレーム2を選択した状態で、タイムラインの下部パネルから「アニメーションフレームをトゥーイン」アイコンを選択します。

パラメーターにチェックが入っている事を確認にし、追加するフレームを3つにします。

アニメーションフレームをトゥーイン

するとフレーム1とフレーム2の間に、3つフレームが追加されました。

フレーム1とフレーム2の間に追加されたフレーム

フレーム2とフレーム3の間も、同じようにフレームを3つ追加します。

⑧タイムラインの秒数を調整する

今回のGIFアニメーションはループさせたいので、最後の矢印に少しだけ溜めを作りたいと思います。

最後のフレームの「(下向きの角括弧)」を選択して、0.2秒に設定します。

タイムラインのディレイ設定

ループ設定を「無限」にして、再生ボタンで動作確認をしてみましょう。

⑨GIFで画像を描き出す

動作に問題なければ、GIF形式で書き出しましょう。

メニューバーの

ファイル > 書き出し > Web用に保存(従来)

を選択。

保存形式を「GIF」にして「保存」ボタンを押します。

GIF形式で保存

これで完成です。

さらに、何もないフレームなどを作成して、ディレイを調整してみます。

タイムライン応用

すると、こういったパターンのものが作成できました。

GIFアニメーション作りの参考になれば幸いです。

CSSでも繰り返し動く矢印を作ってみました。

Adobeソフトの基本操作を安く学べるオンラインスクール

なお、オンラインスクールのアドバンススクールでは、Photoshop、Illustrator、Dreamweaver、Premiere Pro、After Effects、InDesignなどが動画で学べて、Adobe Creative Cloudの1年間プランを68,800円 (税込)で利用することができます。

にゃのらいとにゃのらいと

何故、こんなに安いにゃ?

それは、オンラインスクールに入学するため、学生・教員個人版のプランが適用されるためです。

その為、法人の申し込みはNGですが、個人であれば申し込み可能です。

にゃのらいとにゃのらいと

商用利用はできるのかにゃ?

Adobeに問い合わせて確認したところ、個人であれば商用利用は可能とのことでした。

Adobe Creative Cloudを安く使いたい方、Adobeソフトの基本的な使い方を学びたい(復習したい)方など、この機会に申し込まれてみてはどうでしょうか?

なお、講座の受講期間は6ヶ月です。