必見！Photoshop「トゥイーン機能」が超便利！｜BECK ブログ「イッツ・商タイム」

コロナウィルスの影響は、少なからず弊社にもありまして、仕事や出張のスケジュールをリスケしたり、Zoomを使ったりして対応しております。

つまり・・・・

最近ボク、会社にいることが多いわけです！

あんまりオフィスにいると、スタッフも

「なんだコイツ、今日もいるのかよw」

みたいに思われていないかどうかやや心配ではありますが(笑)、せっかくオフィスにいるわけですから、今日のブログでは、ちょっと(いや、かなり)役立つツール&技をひとつ。

この記事を書いた人
DX ｜ BECK 代表

こんにちは！BECKのDXです。

オフィスにいることが最近多いことで、

「うわ！！うちのスタッフこんなに最近忙しかったんか！！」

と、新たな大発見もできたりするのですが (おまえが忙しくさせてんだろ)、

今日は少し前にうちのスタッフにも教えたら、「ドハマリ」したテクニックについてのハナシ。

単刀直入に言うと、「Photoshop トゥイーン」という機能です。

トゥイーンの良いところを、ボクの経験則から以下のようにまとめました。

１：拡張子GIFでも低圧縮で画質がキレイ

２：フリーのGIFアニメサイトよりも圧倒的高品質

３：ファイルサイズがとにかく軽い！

４：ちょっと頭を使えば、ものすごいキャッチーなEC向け画像、広告画像が作れる

そう。トゥイーンとは、つまり「アニメーションバナー作成ツール」のことです。

ボクはアニメーションバナーを作るとき、
Google Web Designer を主に使っていますが、最近では専らこのトゥイーンを重宝しています。(なぜなら簡単だから)

ではせっかくなので、このブログのタイトル画像を使って、トゥイーンを実践解説していきますね。

- 目次 -

1 まずはPhotoshopで画像を作る
2 タイムラインコマンドを呼び出す
3 アニメーション設定をし、いざトゥイーンを発動！
4 保存するときは、拡張子をGIFにすること！
5 BECKで作ったトゥイーンを使った画像ギャラリー

まずはPhotoshopで画像を作る

まずはPhotoshopで画像を作成します。このとき、後々トゥイーンを使うことを想定し、アニメーションさせたいレイヤーに名前をつけておくと制作がグンと楽になります。

画像を作ったら、念のために元データをドキュメントに保存しておきましょう。

で、上の写真にあるように、ヘッダーの「ウィンドウ」にマウスを合わせ、「タイムライン」をクリックします。

タイムラインコマンドを呼び出す

すると、「タイムラインコマンド」が表示されます。

次に、タイムラインコマンド内のゴミ箱の左隣にある「選択したフレームを複製」をクリックします。

アニメーション設定をし、いざトゥイーンを発動！

フレームを複製したら、計2枚のフレームになります。

で、2枚目のフレームを選択した状態で、アニメーションさせたいレイヤーを選択ツールを使って、アニメーションの終着点まで移動させます。

ちなみにディレイ(コマ送り間隔)も細かに調整可能ですが、あまりディレイが遅いとダサいアニメーションになってしまうのでご注意を。

それともうひとつ、いくらトゥイーンが簡単だからといって、ここで大切なのは、「どんなアニメーションにしたいか？」を頭の中でイメージすることが重要です。

レイヤーのアニメーション処理が終わったら、タイムラインコマンド内のフレーム複製の左隣にある「アニメーションフレームをトゥイーン」を選択します。

すると写真のような、小難しいことを聞いてきます。

ですが、あまり深く考えないくてOKです。(あ、ボクはちゃんと意味も含めて理解してます)

基本的に写真のようなチェックボックスがデフォルトですが、もし写真とチェック項目が異なる場合は、上の写真と同じチェックをつけてください。皆さんに注目していただきたいのが、「追加するフレーム数」です。デフォルトは5となってますが、基本的に5で良いです。枚数が多いとコマ送りが頻繁に行われることで、滑らかさを損ねます。

はい！これで完成です！簡単でしょ？

トゥイーンを発動させたら、タイムラインコマンド内の再生ボタンで実際に作ったアニメーションバナーがプレビューされます。実際に作った画像のデモがこちら。