バナー制作 Photoshopで作る動くGIFバナー[トゥイーン②・スライド]

動くバナー3スライド Webデザイン

この記事ではPhotoshopのトゥイーンの機能を使って、動くGIFバナーの作り方(スライドのように動くアニメーション)を紹介します。線や文字・イラストを”スーッ”と動かすバナーを作れます。

Photoshopのトゥイーン機能とは

Adobeの公式サイトでは、このように説明されています。

トゥイーン」という言葉は、この処理を表すアニメーション用語「インビトゥイーン」という言葉から派生したものです。トゥイーン機能(補間とも呼ばれます)を使用すれば、フェードインやフェードアウト、またはフレーム間での画像の移動などのアニメーション効果の作成にかかる時間を大幅に短縮することができます。

Adobe トゥイーンを使用したフレームの作成 https://helpx.adobe.com/jp/photoshop/using/creating-frame-animations.html
ごん先生
ごん先生

前回はタイムライントゥイーンを使ったバナーでしたが、今回はフレームアニメーショントゥイーンを使って簡単に動きを自動でつけます。

完成した動くバナー(スライド式の動き)の例はこちら

スポーツジムのバナーを作ってみました。素材画像:Ichigo121212さんによるPixabayからの画像

Photoshopでスライドを加えたバナー作成方法

レイヤー分けの準備

1)レイヤーを分けて素材を配置する

まずレイヤーに分けてバナーを制作します。

<最初に表示させるレイヤーの確認>
下から「女性の背景画像」「帯(電話番号とジムの名称)」キャッチコピー「戦え。」です。表示させたいレイヤーは、目のアイコンを表示させます(クリックで表示・非表示の切り替え)。

レイヤーの表示・非表示の切り替えは動くバナーで何度も使います

<後に表示させる画像の確認>
下から「女性の背景画像」「帯(電話番号とジムの名称)」「会員限定プラン」です。同じく表示させたいレイヤーは、目のアイコンを表示させます(クリックで表示・非表示の切り替え)。このバナーでは、オレンジの背景だけ後で透過させます。

(ポイント)まとめて表示させたい情報はひとまとめにしておく

会員限定プランの情報は、後から動かしやすいようにひとまとめにします。レイヤーを選択して右クリック「スマートオブジェクトに変換」します。

スマートオブジェクトに変換
ごん先生
ごん先生

「レイヤーを結合」でもOKだけど、スマートオブジェクトにしておくと拡大縮小しても画質が変わらないよ。オレンジの背景だけ、後で透過させたいのでレイヤーを別にしてます。

レイヤーの並びは上から以下の通りです。

【レイヤーの順番】
キャッチコピー「戦え。」
会員限定プランの情報
③会員限定プランのオレンジ背景(後で透過)
④電話番号とジムの名称
⑤女性の背景画像

2)ウインドウ→タイムラインでタイムラインウインドウを表示

レイヤーの表示・非表示で<最初の画面>キャッチコピー「戦え。」を表示させた状態にします。画面上部のメニュー[ウインドウ]→[タイムライン]をクリックします。

[ウインドウ]→[タイムライン]をクリック
ごん先生
ごん先生

ここからトゥイーン機能で動きをつけていきます!

文字が右からスライドしてくるトゥイーンの設定

3)「フレームアニメーションを作成」をクリック

画面下にタイムラインのウインドウが出てくるので、フレームアニメーションを作成」を選択してクリックします(右側の下向き三角で切り替え可能)。

4)1枚目のフレームを選択し、1枚目の文字を外側に移動させる

タイムラインにフレームが出たら、1枚目のフレームを選択します。

1枚目に動きをつけます。

次に、「戦え。」の文字を選択し、アートボードの外側に移動させます。

平行移動をするため「Shift」キーを押しながら右側に文字をドラッグさせます。スタート地点として、アートボードの外側に文字を置いておきます。ギリギリ外に置く方が良いです。

1枚目:アートボードの外側から文字が出てくる設定です。

5)「選択したフレームを複製」をクリック

右から2番目のアイコン(正方形の中にプラスマーク)=「選択したフレーム複製」をクリックして、2つ目のフレームを出します。

6)2枚目のフレームの文字をアートボード内に戻す

同様に平行移動のため「Shift」キーを押しながら左側(アートボード内)に文字をドラッグさせます。
※うまく選択&ドラッグ移動できないときは、キーボードの矢印ボタン[←]で移動できます

2枚目のフレームで文字が出ているか、左下のタイムライン サムネール画像で確認を。

【タイムラインのサムネイル画像で確認】
1枚目のフレーム:「戦え。」の文字がアートボードより外側にある
 <この間の動きをトゥイーンで補完する:フレーム数を選ぶ>
2枚目のフレーム:「戦え。」の文字がアートボード内にある

7)「アニメーションフレームをトゥイーン」をクリック

右から3番目のアイコン(ボールが動いているようなアイコン)=「アニメーションフレームをトゥイーン」をクリックします。

トゥイーンの設定をします。

トゥイーンの設定

【「戦え。」文字の動きのトゥイーン設定】
トゥイーン:前のフレーム
追加するフレーム:(お好み)
レイヤー:すべてのレイヤー
パラメーター:位置・不透明度・効果にチェックのまま

8)文字が動く時間の設定をする

文字が動く時間の設定は「0.1」を繰り返し、最後は「0.5 秒」に設定しました(お好みでOK)。

ここまでで、文字が右からす〜っと流れてくるアニメーションが設定できました

文字が徐々に消えるトゥイーンの設定

9)フレーム目を追加し、文字の不透明度を0%にする

画面左下のアイコンでフレームを複製し、8フレーム目を追加します。そのあとに「戦え。」の文字の不透明度を0%にします。

文字が消えた後の設定をしました

10)「アニメーションフレームをトゥイーン」をクリック

8枚目のフレームを選択した状態で、右から3番目のアイコン(ボールが動いているようなアイコン)=「アニメーションフレームをトゥイーン」をクリック。

今度は「追加するフレームを3フレームにしてみました。

【「戦え。」文字が消えるトゥイーン設定】
トゥイーン:前のフレーム
追加するフレーム:(お好み)
レイヤー:すべてのレイヤー
パラメーター:位置・不透明度・効果にチェックのまま

上の設定で、OKを押します。

11)文字が消える時間の設定をする

同様に文字が動く時間の設定は「0.1」を繰り返し、最後は「0.5 秒」に設定しました(お好みでOK)。

【タイムラインのサムネイル画像で確認】
8枚目のフレーム:「戦え。」の文字が表示されている(不透明度100%)
 <この間の動きをトゥイーンで補完:フレーム数3>徐々に消える
11枚目のフレーム:「戦え。」の文字が完全に消える(不透明度0%)

ごん先生
ごん先生

最後は、最初と同じように右からスライドの動きをつけます。

会員限定プランの情報が動くトゥイーンを設定する

12)選択したフレームを複製し、会員情報のレイヤーを表示させる

11フレーム目を選択した状態で右から2番目のアイコン(正方形の中にプラスマーク)=「選択したフレーム複製」をクリック。12フレーム目を作ったら、会員限定プランのレイヤーを表示させます。

「戦え。」の文字は非表示または不透明度0%で見えなくします。

13)13フレーム目を追加(最後のフレームの設定)

14)12枚目のフレームを選択し、会員限定プランの情報を外側に移動させる

12枚目のフレームを選択した状態で「Shiftキー」を押しながらレイヤーを2枚同時に選択→「会員情報プランの文字」と「オレンジ色の背景」を同時に移動させます。

2枚のレイヤーを同時にアートボードの外へ

15)「アニメーションフレームをトゥイーン」をクリック

13枚目のフレームを選択した状態で「アニメーションフレームをトゥイーン」を選択。

同じ設定で「OK」を押します。

【「会員限定プラン」の動くトゥイーン設定】
トゥイーン:前のフレーム
追加するフレーム:
レイヤー:すべてのレイヤー
パラメーター:位置・不透明度・効果にチェックのまま

16)表示時間の調整をする

会員限定情報のスライドが動く時間の設定は「0.1」を繰り返し、最後は「1.0 秒」に設定しました(お好みでOK)。

再生ボタンを押して確認。動きを滑らかに調整。

最後のフレームのオレンジの背景だけ、不透明度を80%にしました。

最後はGIFで保存

[ファイル]→[書き出し]→[Web用に保存(従来)]でGIFで保存します。今回は32色だとグラデーションが不自然だったので64色にしました。容量が軽い方の「GIF64ディザなし」で保存完了です。

※「ディザ」については、こちらの記事の最後に書いています。
【関連記事】バナー制作 Photoshopで作る動くGIFバナー

ごん先生
ごん先生

ややこしく見えるけど、慣れると「トゥイーン」を簡単に使えるようになりますよ!

バナーのデザインに参考にした本はこれ

余白の使い方、相性のいいフォントや色の組み合わせの勉強になりました。このシリーズは今も愛用しています。

「けっきょく、よはく。」著者:ingectar-e 発行:ソシム株式会社

「けっきょく、よはく。」著者:ingectar-e 発行:ソシム株式会社 オススメです

動くバナーの記事は今後増やしていきたいです。トゥイーンを使った回転のアニメはこちら。
【関連記事】バナー制作 Photoshopで作る動くGIFバナー2[トゥイーン①・回転]

タイトルとURLをコピーしました