gifバナーを作りたいけど、アイデアが思い浮かばないし、敷居が高いよ…

こんにちは！広告会社でデザイナーをしている、かじゅうです！

gifバナーの動きって、目を引きますよね？

テキストが動いたり、色が変わったりして、とても目立ちます。

でも、自分で作ろうと思っても、「どんな動きがいいの？」や「アイデアが思い浮かばないよ」と悩んでしまいますよね？

ということで、この記事では『真似したいgifバナーのアイデア』を集めてみました。

■PhotoShopだけで作成できる『テキストアニメーションGIF』も合わせてご覧ください。

※この記事で作成しているgifバナーは【Photoshop】で真似できそうなものを紹介しています。

gifバナーデザインのアイデア 基本手法６選

今回紹介するgifバナー（アニメーションgif）を６つのジャンルに分けてみました。

• イラストアニメーション
• 文字色の変化アニメーション
• フレームアニメーション
• スウィングアニメーション
• フラッシュアニメーション
• 拡大アニメーション

gifバナーのアイデアはたくさんあって全種類をジャンル分けするのは大変です。なので、よく見るアイデアの中で真似しやすそうなものをピックアップして紹介いたします。

イラストアニメーション

イラストのループアニメーションgifです。
ガラガラが回っていて、抽選のキャンペーンだとすぐわかります。単純な動きですが、見ていて気持ちのよいスピード感ですよね。

文字色の変化アニメーション

テキストの色を変化させて注目させるアニメーションgifです。
注目してほしい順番通りに視線を誘導することができるよく見る手法ですね。

フレームアニメーション

写真やイラストをフレーム事に入れ替えて、交互に変化するようなアニメーションgifです。
カラーバリエーション展開やビフォーアフターなどの広告に使えそうです。

スウィングアニメーション

テキストが揺れたり、上下に動くようなアニメーションgifです。
シンプルで真似しやすく容量も増えすぎないので手軽に使える手法です。

フラッシュアニメーション

テキストが点滅するアニメーションgifです。
シンプルですが存在感があって、どんな広告にも使えることができる手法だと思います。

拡大アニメーション

テキストが一文字ずつ拡大されるアニメーションgifです。
こちらも良く見る手法ですが、拡大の大きさやタイミングを変えることで雰囲気が変わるので奥が深いです。

応用：いろんな手法を組み合わせる

上記で紹介した基本的な手法を組み合わせることで、オリジナリティがあるアニメーションgifが作れます。下記ではその一部を紹介します。

イラストループ＋フラッシュアニメーション

​波の押し引きとカニのループアニメとテキストのフラッシュアニメを組み合わせたアニメーションgifです。

フレームアニメ＋文字色の変化

こちらは、背景が反転と同時にテキストのカラーも反転するようなアニメーションgifでインパクト抜群です。

いろいろなアニメーションgifを見てみたい

アニメーションgifや動画広告などを集めたPinterestのボードです。pinterestにはクオリティが高いものや海外のおしゃれなアニメーションgifなどがたくさんあるので眺めているだけで楽しいです。

真似したいgifバナーデザイン：まとめ

アニメーションgifの基本的な手法を6つ紹介しました。

アニメーションgifは複雑な動きだと容量が大きくなります。

シンプルな手法で制作するのが良いgifを制作するポイントです。

▼こちらの記事では、Photoshopを使ったアニメーションgifの作り方を紹介しています。

【PS】文字がぶるぶる動くgifアニメーションバナーの作り方

Photoshopの「ビデオタイムライン」機能を使ってテキストがぶるぶると動くアニメgifバナーの作り方を紹介します。

design.kajyublog.com

2023.11.25

これからgifを作ってみようと思っている人やバナーデザインを動かして訴求力UPを目指そうという人は、この記事で紹介した6つの手法を取り入れてみてはいかがでしょうか？

Photoshopはアニメーション制作のためのシンプルな機能が揃っています！

こんにちは！広告会社でデザイナーをしている、『かじゅう』といいます。

Photoshopは、アートやデザインを生み出すために日常的に使われています。しかし、『アニメーションの作成』に関しては、初めての人には少し難しいかもしれません。この記事では、特にPhotoshopの『フレームアニメーション』と『タイムラインアニメーション』に焦点を当て、photoshopでアニメーションを作成する手順や機能を紹介していきます。photoshopは簡単にアニメーションを作成することが出来るツールなんだと知ってもらえればうれしいです。

『フレームアニメ』と『タイムラインアニメ』の違い

photoshopでアニメーションを作る方法は、『フレームアニメーション』と『タイムライン』の２種類があります。まずはじめに、この２つの違いや特徴を紹介していきたいと思います。

photoshopの『フレームアニメーション』とは？

フレームアニメーション（Frame Animation）は、静止画像を連続的に切り替えて、アニメーションを作成する手法です。単純な動きやフレームごとの微妙な変化を制御するのに最適な手法です。

photoshopの『タイムラインアニメーション』とは？

タイムラインアニメーション（Timeline Animation）は、レイヤーコンテンツのタイムライン（時間）にキーフレームを設定してアニメーションを作成します。フレームアニメーションとは異なり、複数のオブジェクトを動かしたり、細かな動きを作成するのに適しています。

【フレームアニメーションの作り方】文字がポップアップするアニメを作ってみよう！

この項目では、photoshopを使ったフレームアニメーションの作り方をサンプルに沿って紹介します。

紹介するのは、下記のバナーの様な『文字が大きくなったり、小さくなったりする動き』のフレームアニメーションです。

ポップアップする動きは、バナーの強調したい文字や訴求文などに使うと効果的です！

１．動かすバナー素材を用意しよう

バナーや素材を準備しましょう。

以降の手順は、下記のpsdデータをもとに解説します。DLして同じ手順で作ってみましょう！

２．フレームアニメーションウィンドウを開く

フレームアニメーションウィンドウはphotoshop上部の『ウィンドウ』＞『タイムライン』をクリックして開きます。

続いて、タイムラインパネルで『フレームアニメーションを作成』をクリックします。

3．アニメーションに必要なフレームを用意する

タイムラインパネルの『選択したフレームを複製』をクリックします。これを繰り返し、合計18枚のフレームを用意します。

４．フレーム毎にアニメーションの設定をする

実際にアニメーションを作成していきます。まずは、タイムラインの１フレーム目を選択します。

１フレーム目は、静止した際に表示されます。アニメーションバナーの場合は、制作したデザインを表示するといいでしょう。１フレームは何も操作はありません。

５．2フレーム目のアニメーションを作成する

タイムラインの2フレーム目を選択します。その後、表示するレイヤーを入れ替えます。

• レイヤー名『オリジナル_テキスト』→ 非表示
• レイヤー名『小_テキスト』→ 表示

これで、２フレーム目は小さめなテキストが表示するようになりました。

この様に、フレームアニメーションを作成する際は、フレーム毎に表示する素材を用意して『表示』『非表示』を切り替えて作成します！

６．３から18フレームまでのアニメーションを作成する

3から18フレームも同じ手順を繰り返します。下記を参考にして、『表示・非表示』を設定してみましょう！

フレームの選択は『ctrl（commond）』を押しながらクリックすると複数選択できます！

『4、６、７、１１、１５フレーム』を選択して下記の通り『表示・非表示』を入れ替えます。

• レイヤー名『オリジナル_テキスト』→ 表示
• レイヤー名『小_テキスト』『大_テキスト』『ピカン1～3』→ 非表示

『3、5フレーム』を選択して下記の通り『表示・非表示』を入れ替えます。

• レイヤー名『大_テキスト』→ 表示
• レイヤー名『オリジナル_テキスト』『小_テキスト』『ピカン1～3』→ 非表示

『8、12、16フレーム』を選択して下記の通り『表示・非表示』を入れ替えます。

• レイヤー名『オリジナル_テキスト』『ピカン1』→ 表示
• レイヤー名『大_テキスト』『小_テキスト』『ピカン2～3』→ 非表示

『9、13、17フレーム』を選択して下記の通り『表示・非表示』を入れ替えます。

• レイヤー名『オリジナル_テキスト』『ピカン2』→ 表示
• レイヤー名『大_テキスト』『小_テキスト』『ピカン１、3』→ 非表示

『10、14、18フレーム』を選択して下記の通り『表示・非表示』を入れ替えます。

• レイヤー名『オリジナル_テキスト』『ピカン3』→ 表示
• レイヤー名『大_テキスト』『小_テキスト』『ピカン１、2』→ 非表示

アニメーションの作成はこれで完了です！お疲れ様です。

７．アニメを再生してみよう

手順１～６までが完了したら、作成したアニメがきちんと動くか確認してみましょう！

アニメの再生は、タイムラインパネルの再生マークをクリックします。

正しく制作できていればアニメーションが出来ているはずです。

８．gifアニメーションの書き出し

アニメーションが完成したら、書き出しをしましょう。

Photoshop上部の「ファイル」をクリックし、『書き出し』＞『web用に保存（従来）』をクリックし、次のような画面が表示させましょう。

gifアニメを書き出す前には、プレビューをチェックしましょう。

• 『GIF』を選択
• ループオプションで『無限』を選択して保存

タイムラインアニメーションの作り方｜文字がジャンプするアニメを作ってみよう！

この項目では、下記のような『文字がジャンプ』するアニメをタイムラインアニメーション機能を使って作成します。

複雑なアニメーションの作成には、タイムラインアニメーションで作るのがおすすめです！

【再編集可能！PSDデータ】PSDデータがあればチュートリアルをやらなくてもOK！

この記事で紹介しているアニメーションの『PSDファイル』を販売しています。

価格：200円

詳細と購入は下記のボタンから

１．テキストを入力する

新規カンバスを作成し、アニメーションさせるテキストを入力しましょう。入力したテキストは一文字ずつ分解してレイヤーを分けておきましょう。

２．テキストレイヤーをスマートオブジェクトに変換

テキストレイヤーが選択された状態で、『右クリック』＞『スマートオブジェクトに変換』を押して
テキストをスマートオブジェクトに変換します。

この工程を繰り返し全てのテキストをスマートオブジェクトに変換します。

３．タイムラインパネルを開く

テキストにアニメーションを設定していきます。photoshop上部の『ウィンドウ』＞『タイムライン』をクリックして開きます。

タイムラインパネルで『タイムラインを作成』をクリックします。

４．テキストにアニメーションを設定する

タイムラインパネルで、『期』の文字をクリックして選択したら『＞』をクリックして展開したら、『変形』の左隣にあるストップウォッチのアイコンをクリックします。すると、下記の画像の様にキーフレームが打たれます。

6フレーム目までインジゲーターを移動させ、『変形』の左隣にあるストップウォッチのアイコンをクリックします。

『期』のレイヤーを選択した状態のまま、『ctrl（commond）+T』を押します。Photoshop上部にある変形メニューの『基準の位置』を下に、『縦横比を固定』のチェーンをクリックして外して、『H：70%』にして確定します。

• 『基準の位置』を下にする
• 『縦横比を固定』のチェックを外す
• 『H』：70%

以降、同じ手順でどんどんキーフレームを打ってアニメーションを作成していきましょう！

インジゲーターを『10フレーム』に移動し、キーフレームを打ち下記の通り入力します。

• キーフレーム：『10フレーム』
• 基準点：『下』
• Y：『〇〇px-80』
  ※〇〇はデフォルトのまま変えない
• H：『105％』
  ※縦横比のチェックは外す

インジゲーターを『12フレーム』に移動し、キーフレームを打ち下記の通り入力します。

• キーフレーム：『12フレーム』
• 基準点：『下』
• Y：『〇〇px-12』
  ※〇〇はデフォルトのまま変えない
• H：『112％』
  ※縦横比のチェックは外す

インジゲーターを『14フレーム』に移動し、キーフレームを打ち下記の通り入力します。

• キーフレーム：『14フレーム』
• 基準点：『下』
• Y：『〇〇px-10』
  ※〇〇はデフォルトのまま変えない
• H：『112％』
  ※縦横比のチェックは外す

インジゲーターを『20フレーム』に移動し、キーフレームを打ち下記の通り入力します。

• キーフレーム：『20フレーム』
• 基準点：『下』
• Y：『〇〇px+80』
  ※〇〇はデフォルトのまま変えない
• H：『70％』
  ※縦横比のチェックは外す

インジゲーターを『22フレーム』に移動し、キーフレームを打ち下記の通り入力します。

• キーフレーム：『22フレーム』
• 基準点：『下』
• Y：『〇〇px+3』
  ※〇〇はデフォルトのまま変えない
• H：『65％』
  ※縦横比のチェックは外す

5．キーフレームをコピーして貼り付ける

引き続きキーフレームを打っていきますが、既に作成したキーフレームをコピー＆ペーストしていきます。

• 『10,12,14フレーム』のキーフレームをドラックして選択
• キーフレームの上で『右クリック』＞『コピー』

『1:00フレーム』にインジゲーターを移動して、キーフレームを打った後にもう一度『右クリックを』して『ペースト』します。

6．アニメーションの終わりを制作する

テキストが着地して、最初の形に戻るようにアニメーションを制作していきます。

以下の手順に沿ってアニメーションを設定してみましょう！

インジゲーターを『1:10フレーム』に移動し、キーフレームを打ち下記の通り入力します。

• キーフレーム：『1:10フレーム』
• 基準点：『下』
• Y：『〇〇px+80』
  ※〇〇はデフォルトのまま変えない
• H：『72％』
  ※縦横比のチェックは外す

インジゲーターを『1:12フレーム』に移動し、キーフレームを打ち下記の通り入力します。

• キーフレーム：『1:12フレーム』
• 基準点：『下』
• Y：『〇〇px+3』
  ※〇〇はデフォルトのまま変えない
• H：『70％』
  ※縦横比のチェックは外す

インジゲーターを『1:14フレーム』に移動し、キーフレームを打ち下記の通り入力します。

• キーフレーム：『1:14フレーム』
• 基準点：『下』
• Y：『〇〇px-3』
  ※〇〇はデフォルトのまま変えない
• H：『72％』
  ※縦横比のチェックは外す

最後のキーフレームを打ちましょう。最後のテキストの大きさは０フレーム目と同じになる必要があります。

そのため、０フレーム目のキーフレームをコピー&ペーストすれば簡単に制作出来ます。

『0フレーム』のキーフレームをコピーして、『1:17フレーム』にペーストします。キーフレームのコピー&ペーストは『5．キーフレームをコピーして貼り付ける』で確認

ちゃんと動くか再生してみましょう！

7．残りのテキストにもアニメーションを設定する

『期』のアニメーションが完成したので、残りのテキストにもアニメーションを設定して完成させましょう。

『期』のキーフレームを全て選択し『右クリック』＞『コピー』したあと、『間』のキーフレームを作成して『右クリック』＞『ペースト』します。

キーフレームをペーストすると、『期』の位置と同じ場所でアニメーションしてしまいます。次項はこれを修正していきます。

まずは、『間』のレイヤーを選択して『右クリック』＞『スマートオブジェクトに変換』します。

変換したスマートオブジェクトを『ダブルクリック』して開き『イメージ』＞『カンバスサイズ』を変更します。変更したら保存してファイルを閉じます。

元のカンバスに戻り、『間』のレイヤーを他のオブジェクトと被らないように移動させます。

同様の手順を残りのテキストの『限』『定』にも設定します。

8．アニメーションのタイミングをずらす

最後に各文字のアニメーションタイミングをずらして、一文字ずつ時間差でジャンプするようにしてみましょう。

『間』のレイヤーをダブルクリックして、スマートオブジェクトを展開します。

キーフレームを全て選択して、『4フレーム分』右にドラックして移動したら上書き保存します。これで、4フレーム後にアニメーションするようになりました。

同じように他のテキストもフレームをずらして保存します。

• 『限』：8フレームずらす
• 『定』：12フレームずらす

9．レイヤースタイルを設定して完成

最後に、テキストをグループ化してレイヤースタイルを設定しましょう。

レイヤースタイルの詳細は下記のとおりです。（クリックで拡大）

設定出来たら『再生』してみましょう！

PSDファイルの詳細と購入はコチラから！

まとめ

Photoshopでアニメーションを作成する方法として『フレームアニメーション』と『タイムラインアニメーション』の２種類を紹介しました。AftereffectsやPremiere Proを使わなくても、Photoshopでアニメーションを作成できることを知っていただければと思います。

GIFアニメーションは、通常の画像よりも視覚に訴えられるだけではなく、メッセージを強調したり、ストーリーを伝えることに役立ちます。Photoshopのアニメーション機能を覚えて、魅力的なビジュアル、広告を作成しましょう！

他にも様々なアニメーションが作成できますので、色々試してみてくださいね。

【Photoshop】アニメーションギャラリー

Photoshop 手書きアニメーションギャラリーは、手書きアニメーションの世界を探索するためのオンラインギャラリーです。手書きアニメーション、ロゴアニメーション、エフェクト、トランジションなど、Photoshopを使用して制作したアニメーションを提供。インスピレーション源として、新たなアイデアと技術を探求しましょう。手書きアニメーションの魅力を体験し、創造性を広げる一歩を踏み出す場所です。

design.kajyublog.com

2023.11.25

『真似したいアニメーションgifバナー』基本的な手法6選とデザインアイデア

アニメーションgifを作るために役立つ『真似したいアニメーションgif』アイデアを6つ選出！これからgifを作ってみようと思っている人からバナーデザインを動かして訴求力UPを目指している方に最適な基本手法を集めました。

design.kajyublog.com

2024.02.09

PSDファイルが購入できます！

チュートリアルで紹介したテキストエフェクトのPSDファイルが購入できます。

PSDセット（有料）の説明はこちらで確認

■PSD見本（有料）

こちらのPSDには左記の見本の通りの内容が含まれております。

■PSDファイル（有料）の説明

psdファイルのレイヤー構造は左記の画像の様になっています。

スマートオブジェクトをダブルクリックで展開して、自由に文字を編集可能です。キーフレームも変更可能なので、タイミングの調整等が可能です。

Photoshopの『タイムライン機能』を使って、テキストがぶるぶる動くアニメーションgifを作ります！

こんにちは！広告会社でデザイナーをしている、かじゅうです！

アニメーションgifといえば、静止画を複数用意して作るイメージがあると思いますが、今回は「ビデオタイムライン」機能を使ってテキストがぶるぶると動くアニメgifの作り方を紹介します。

「ビデオタイムライン」を使ったアニメーションgifは実はメリットが多くおすすめです。具体的には、下記のようなメリットがあります。

▼アニメーションGIF（動く文字）のギャラリーページです。
Photoshopで作成することが出来ます。

【完成見本】ぶるぶる動くアニメーションgifの作り方

完成のサンプルはこちらです。

文字がぶるぶると震えると同時に少しボケる様なアニメgifです。

【STEP.1】静止画のバナーを用意する

まずは動かすための静止画バナーを作成します。見本のPSDが下記よりDLできるのでぜひ活用してください。

PSDファイルの中の赤いラベルの付いたレイヤーが今回アニメーションする部分になります。

【STEP.2】テキストをスマートオブジェクト～複製する

アニメーションさせるテキストをスマートオブジェクトレイヤー右クリック「スマートオブジェクトに変換」化して複製command(Ctrl)＋Jします。

【STEP.3】ぼかし（移動）を適用する

複製したレイヤーにぼかし（移動）フィルター▶ぼかし▶ぼかし（移動）を適用します。

テキストが右上がりなので少し角度をつけます。『距離』はバナーからはみ出ないように注意して値を設定します。今回は、角度:5度 距離:60pixelにしました。

【STEP.4】タイムラインでテキストを動かす

下部にあるメーターを右端まで移動して、タイムラインを拡大しておきます。

【STEP.5】タイムラインを分割する

2つあるテキストレイヤーの内、下のレイヤーを選択します。続いてシークバーを02fの位置までドラッグしたあとトリミングツール（ハサミマーク）をクリックするとテキストのタイムラインが分割されます。

分割された上のトラックを選択して、右側へドラッグして置いておきます。

【STEP.6】ぼかしたテキストレイヤーを移動

ぼかし（移動）を適用したレイヤーのトラックを02fの位置までドラッグします。これで、02fの位置を境にして通常のテキストとぼかしたテキストが入れ替わるようになりました。

【STEP.7】動きのクオリティを上げる

ぼかしたレイヤーの左側にある三角形をクリックして展開します。

03fへシークバーをドラッグして、キーフレームを追加します。キーフレームの追加は、「変形」の左側にあるダイヤの形をしたアイコンをクリックします。

同様にして04fと05fにもキーフレームを打ちます。

04fのキーフレームをクリックして選択状態にしておきます。選択すると黄色になります。

移動ツール(v)を選択したあと、キーボードの下矢印を1回、右矢印を1回押します。するとテキストが少しだけ右下に移動したことになります。この一手間を加えることで、ぶるぶると動くようなアニメーションになります。

【STEP.8】トリミングして繋げる

05fへシークバーを移動したあと、トリミングします。

新たにクリップが作られるので、デリートを押して削除します。

STEP.5で右側に移動しておいたクリップを06fに移動します。

再生終了点の設定

テキストがぶるぶると動いたら、すぐに最初から再生されるようにしたいので映像の終了点を設定します。まず08fにシークバーを移動します。

タイムラインウィンド右側のメニューをクリックして「ワークエリア＞再生ヘッドで終了点を設定」を選択します。

08fに終了点が設定されました。再生ボタンをクリックしてアニメーションを確認してみてください。

アニメーションgifの書き出し

gifとして書き出す

メニューから「ファイル＞書き出し＞Web用に保存（従来）」を選択します。

書き出しダイアログが表示されます。内容を確認して右下の保存をクリックします。

gifの容量を軽くするには？

gifはデータ容量が重くなるので注意が必要です。データの品質を維持しつつなるべく容量を落とすようにしましょう。容量を下げるには、下記の項目を設定します。

• カラー
• ディザ（コンピューターで使用できないカラーをシミュレートする）
• 劣化（選択的にデータを破棄することによりファイルサイズを小さくする）

詳細はAdobe公式ページで紹介されている「GIF および PNG-8 最適化オプション」を参照ください

mp4として書き出す

photoshopのタイムラインで作成したデータは、mp4（動画データ）としても書き出すことが出来ます。

mp4での書き出しは「ファイル＞書き出し＞ビデオをレンダリング」から行う。

アニメーションgif作成の参考

GIF BOOK -コンテンツ制作者のためのGIFガイド

「gif」の歴史から、トップクリエイターの制作工程など幅広い内容を網羅している書籍です。全てのページで作成方法を紹介しているわけではありませんが、制作者にとっては見識が広がる一冊です。

テキスト入れ替え可能！PSDデータ配布

この記事で紹介した内容を更にブラッシュアップしたPSDを配布いたします。PSD内のテキストは動きを保ったまま変更ができますので自由に編集して使ってみてください。

『文字に光が流れるアニメーションGIF』をプロっぽい作り方でかっこよくアップグレードしよう！

こんにちは！広告会社でデザイナーをしている、かじゅうです！

下記の画像をご覧ください。

右側（bad）は光の線が左から右に流れているだけのアニメーションです。

対して左側（good）は、やわらかい光が流れているように見えます。

この記事では、左側（good）のような『自然でやわらかい光が流れるアニメーションGIF』の作成方法を紹介します。

文字に光が流れるアニメーションGIFの作り方

Photoshopの『ビデオタイムライン』機能を使用して作成していきます。

手順の流れは下記のとおりです。

• テキストを入力
• 光線を描く
• タイムラインで光のアニメーションを作成
• テキストに光彩をつける

ビデオタイムライン機能を使ったアニメーションGIFの作成はメリットが多くおススメです。

▼アニメーションGIF（動く文字）のギャラリーページです。
こちらでまとめているGIFはPhotoshopの『タイムライン機能』で作成しています。

テキストを入力する

任意のテキストを入力します。

太いウェイトの方が光っていることが良く分かります

光を描く

新規レイヤーに柔らかいブラシで光を描きます。

テキストを覆うような光だと良いです。

テキストレイヤーに対してクリッピングマスクAlt+command(Ctrl)+Gを作成します。

光のレイヤーをスマートオブジェクト右クリック＞スマートオブジェクトに変換に変更します。

タイムラインで光のアニメーションを作成

シークバーが０フレームにあることを確認して、光レイヤーの変形キーフレームを打ちます。

光レイヤーを見えなくなるまで左側へ縮小します。

シークバーを『15f』へ移動します。

テキストの右側に光が消えていくように縮小します。

シークバーを『8f』へ移動します。

テキスト全体が光に覆われるように拡大します。

ここまでの作業で再生してみると下記のようになります。

テキストに光彩をプラスする

テキストにレイヤースタイルから『光彩』をつけます。

不透明度やサイズは、作成するテキストの大きさに合わせて変更してください

光彩はやや光っている感じを意識します。

『タイムライン』のテキストレイヤーを選択して『0f』の位置にキーフレームを置きます。

『8f』『15f』にもキーフレームを置きます。キーフレームの設置はひし形のアイコンをクリックします。

『15f』にシークバーを合わせて、テキストレイヤーの『光彩』を非表示にします。

同じ手順を『0f』の位置でも行います。

『0f』～『8f』にかけてテキストに光彩がつき『15f』目までで光彩が消えるアニメーションが出来ます。

以上で『文字に光が流れるアニメーションGIFの作り方』を終わります。

Photoshopを使った髪がなびく無限ループの動画（gif画像）の作成方法からアニメーションの書き出し方法までを紹介します！

こんにちは！広告会社でデザイナーをしている、かじゅうです。

無限にループする動画(gif)って不思議ですよね。

このような無限ループgifは「つなぎ目」に違和感がないように作られています。

そして、動いている髪だけに注目させることができるのでバナーデザインやwebサイトなどにも応用することが出来ます。

この記事では、Photoshopを使って普通の動画データから、髪がなびく無限ループするgifの作り方を紹介します。

ループアニメ制作の前に知っておきたい事

ループgifは、動画の連続再生でつくるとつなぎ目が一瞬カクついてしまいます。

動画のつなぎ目がカクつかず、キレイなループgifを作るには、バウンド再生（逆再生）で作るべきです。髪なびきのループはバウンド再生（逆再生）をすることで髪の毛が、風でフワッと持ち上がった場所から、髪が持ち上がる前へ自然に戻るというわけです。

つまり、動画を『再生→逆再生→再生』するように作成すれば無限ループgifを作成することが出来ます。それでは下記の項目で、Photoshopでバウンド再生（逆再生）をするループ動画を作る方法を解説します。

Photoshopでつなぎ目が綺麗な髪がなびくループ動画（gif）を作る

1.フォトショップの「ビデオフレームからレイヤー」から動画を読み込む

「ファイル」＞「読み込み」＞「ビデオフレームからレイヤー」

※「ビデオフレームからレイヤー」は動画をフレームに変換して読み込みます

2.ループの範囲を決める

「ビデオをレイヤーに読み込み」のダイアログで必要箇所を設定します

続いて、右側のシークバーでループさせる範囲を決め「OK」を押します。

3.動画を反転させてループするようにする

「ウィンドウ」＞「タイムライン」

タイムラインを表示させると全体フレーム数が「34」あり、少し多いので「21~34」までを削除した。

上記の工程でフレーム数を調整したら、全てのフレームを選択して「フレームを複製」を押します。

1~20までのフレームを複製したので、21~40までのフレームが追加されました。

※複製されたフレームが選択状態になっているので、そのまま選択状態にしておきます。

4.逆再生の部分をつくる

タイムラインウィンドウの右端にあるメニューから「フレームを入れ替え」を選択します。

すると、21~40までのフレームの順番が入れ替わります。

再生してみると違和感がないループgifになっていると思います！

フレーム入れ替えの原理

フレーム入れ替えは選択したフレームを入れ替えます。フレームは隣り合っていなくても入れ替えることが出来ます。

アニメーションgifの書き出し

ループアニメーションが作れたら、書き出しましょう。

photoshopで作成したアニメーションは「gif」「mp4」として書き出せます。

書き出しの方法はこちらです。

【PS】文字がぶるぶる動くgifアニメーションバナーの作り方

Photoshopの「ビデオタイムライン」機能を使ってテキストがぶるぶると動くアニメgifバナーの作り方を紹介します。

design.kajyublog.com

2023.11.25

少しだけクオリティーをあげるなら

フレームを複製すると元の「末尾」と複製した「先頭」が同じフレームなので削除したほうがいいです。

まとめ

Photoshopでつくる無限ループgif『つなぎ目がない髪がなびく』動画（gif）の作成方法は以上になります。

作成方法を簡単にまとめます。

1. Photoshopでループする範囲の動画を読み込む
2. フレームを複製する
3. 複製したフレームを反転する

動画素材を用意する時は、この記事で使用した動画の様にループしても違和感がないものを選びましょう。空いているところに文字を入れてバナーにしてみたりすると、ファッション系のバナーとして使えそうです。

ちなみに、一部分だけが動いている動画は「シネマグラフ」と呼ばれます。

このようにバナーデザインと組み合わせると事で、目を引く効果が期待できます。

この記事で使用した動画はこちらからダウンロードできるので是非皆さんも作成してみてください。

● 他にもPhothoshopではいろいろなアニメーションgifが作れます！

▼こちらのページではPhotoshopで作成したアニメーションgifをまとめています。よかったらご覧ください。