この記事ではPhotoshopでトゥイーンの機能を使って、動くGIFバナーを制作した例(回転)を紹介します。前回の動くバナーの記事がよく読まれていたので続編を書いていきます。
Photoshopのトゥイーン機能とは
Adobeの公式サイトでは、このように説明されています。
「トゥイーン」という言葉は、この処理を表すアニメーション用語「インビトゥイーン」という言葉から派生したものです。トゥイーン機能(補間とも呼ばれます)を使用すれば、フェードインやフェードアウト、またはフレーム間での画像の移動などのアニメーション効果の作成にかかる時間を大幅に短縮することができます。
Adobe トゥイーンを使用したフレームの作成 https://helpx.adobe.com/jp/photoshop/using/creating-frame-animations.html
![ごん先生](https://webdesign-pg.com/wp-content/uploads/2021/05/ba032f8642c3d6736d83dbcf4f676245.png)
前回は1コマ1コマをパラパラ漫画のように制作したフレームアニメーションのバナーでしたが、今回はタイムラインとトゥイーンを使って動きを自動でつけます。
「回転」を加えた完成したバナー例がこちら
![](https://webdesign-pg.com/wp-content/uploads/2021/07/kasaten_kaiten3.gif)
Photoshopで回転を加えたバナー作成方法
1)回転させたい素材を配置する
回転させたい素材を配置します。練習用に回転させる場合は中央に1つだけで構いません。バナー制作の場合は、レイヤーを分けて静止画のバナーを作ります(この作業の説明は省略します)。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/2d2bfc34cc059069696e8f1204333ef7.jpg)
2)ウインドウ→タイムラインでタイムラインウインドウを表示
画面上部のメニュー[ウィンドウ]→[タイムライン]をクリックします。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/22500ffa182b4165eb7e3298acfd087c.jpg)
3)「ビデオタイムラインを作成」をクリック
画面下にタイムラインのウインドウが出てくるので、「ビデオタイムラインを作成」を選択してクリックします(右側の下向き三角で切り替えができます)。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/c8e48f1e9162a19052114a87bd567823.jpg)
4)タイムラインのフレームレート設定を確認
タイムラインウインドウの右上にある「三」のような横棒をクリックして、「タイムラインのフレームレートを設定」を選んでクリックします。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/362f8f3569afb42b5910ff5f443c5e12.jpg)
このようなウインドウが出てきます。今回はフレームレート30(30fps)で制作します。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/5a6ad6dcbd6232931270246c47555bd9.png)
フレームレート(fps)とは
「frames per second」の略で1秒間の動画が何枚の画像で構成されているかを示すの単位です。数字が大きいほど滑らかなアニメーションになり、データが大きくなります。
5)タイムラインの末尾を設定する(今回は02:00f)
マウスポインタを紫色のバーの末尾(右端)に近づけると、マウスポインタの形がフォークのような矢印に変わります。
この例では全てのレイヤーのタイムラインを2秒(02:00f)のところまでドラッグして縮めます。
※アニメーションの長さになるので実際はお好みで構いませんが、偶数秒がオススメです。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/5e9bf649402a259c2944ed52ef833814-1.jpg)
下のバーで、タイムライン表示の拡大と縮小が調整できます。今後の作業のために02:00fが右のほうに来るまで拡大しておきます。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/67f39eff3ac1509e901718e06e2d9762.jpg)
6)タイムラインの0秒に1つ目のキーフレームを打つ
動かしたいレイヤーの、タイムラインのレイヤー名の左端にある>マークをクリックします。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/99d8558cd92596832256951f0bb100da.jpg)
そうすると、「変形」「不透明度」「スタイル」という表示が出てきます。左下の時間軸が0:00:00になっていることを確認して、「変形」の横にある黄色のひし形◇をクリックします。
※ひし形が出ていない場合は右のストップウォッチのアイコン(「変形」の左のアイコン)をクリックして、ひし形を出します。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/5e5a21713351d9f6712fc5a8efe2e247-1.jpg)
黄色のひし形◇をクリックすると、0秒のところに「キーフレーム」と呼ばれる黄色いひし形が打たれます。
7)タイムラインに2つ目のキーフレームを打つ
次に、タイムラインの中央に2つ目のキーフレームを打ちます。
ここでは01:00fまで青い印のバーを移動させるか、左下に0:00:01:00と直接入力します。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/2d44056e61a22782c53b497186468908-1.jpg)
同じくタイムラインのレイヤー名にある左のひし形◇をクリックします。
※ひし形が出ていない場合は右のストップウォッチのアイコン(「変形」の左のアイコン)をクリックして、ひし形を出します。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/57b57cbe68e60326f77e5432530084a4.jpg)
8)2つ目のキーフレームに回転の動きを加える
パスで描いたデータなどは画面右のレイヤーパネルを右クリックして「スマートオブジェクトに変換」しておきます。(タイムラインのレイヤーではありません)
画面上部メニューの[編集]→[変形]で好みの角度を選択。ここでは[90°(時計回り)]を選択しました。180°を選ぶと1回転します。角度を大きくすると回転のスピードが上がります。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/65f502bfcac3d26c8f499bac40c41a38.jpg)
9)3つ目のキーフレームを打ち、同じ回転を与える
3つ目のキーフレームを打ちます。タイムラインの末尾02:00fのところで黄色いひし形をクリックします。ずれてしまった場合は、キーフレーム自体をドラッグして位置を調整できます。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/deb4f3c034e011a0f4951cb0f8997275-1.jpg)
先ほどと同様に、3つ目のキーフレームにも[編集]→[変形]→[90°(時計回り)]の動きをつけます。2つ目で180°の回転をつけた場合は、180°の回転をもう一度加えます。
これで全体に同じスピードで回転する動きがつきました。
10)動作は再生ボタンで確認
![](https://webdesign-pg.com/wp-content/uploads/2021/07/226db2a5b332aec6d75f0b351281d23f.jpg)
左上の再生ボタンを押すと、プレビューを再生できます。この例では他の傘のイラストも全て同様に動きをつけています。
11)GIFで保存
保存は、[ファイル]→[書き出し]→[Web用に保存(従来)]をクリック。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/b41695f5e74d24c3cf60dd707cd5b1b4.jpg)
今回は、GIF32(ディザなし)で保存しました。GIFの数字は色の数です。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/b423addba5ed752ae6b6c10519fa97af.jpg)
これで完了です。
おまけ
上下左右対称な図形を回転させるときは注意
上下左右対象の図形を回転させると、あまり動いて見えないかもしれません笑。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/fc69da72d8f08b1a1ac08074f51cf4d2.gif)
途中から逆回転、スピードを変えたいとき
3つ目のキーフレームで反対の動きをつけると、途中から逆回転します。角度の調整で回転スピードに緩急をつけることもできます。
![](https://webdesign-pg.com/wp-content/uploads/2021/07/b05b213b389d5274e405c66cca078ffe.gif)
![](https://webdesign-pg.com/wp-content/uploads/2021/02/mycon.png)
バナー以外にもWebサイトのヘッダー画像やメインビジュアルにも応用可能です。回転するモチーフを考えると面白いものができそう。
![ごん先生](https://webdesign-pg.com/wp-content/uploads/2021/05/ba032f8642c3d6736d83dbcf4f676245.png)
オレンジやレモンの輪切りイラスト、風車、扇風機、歯車とかくるくる回してみたいかも。動く画像は制作していて楽しいので、他にも記事を書いていく予定です。