デザイン

写真1枚を風景動画風に加工する【Adobe animate CC】

北野敦子
北野敦子
2020/04/02 14:39

はじめに

今回はAdobe animateを使った風景画像を動画にする方法をご紹介していきます。
今回は、最終的にアニメーションGIFにしたかったのでAdobe animateを使いましたが、似たような方法で他のアプリケーションでも動画に変更することができます。

1.画像をPhotoshopで切り分ける

任意の風景画像をPhotoshopで切り取ります。ここで切り分けた画像は、奥行きが異なるレイヤーとして使用されるので、視覚的奥行きが分かれても違和感のない部分で切り分ける必要があります。

2.画像の配置

Adobe animateに各画像をレイヤーとして配置します。
ここでは分かりやすいように各レイヤーを【手前】【中】【奥】としました。
PhotoshopレイヤーのPNG書き出しについては、必要なレイヤーをレイヤーパネルで全て選択した状態でcontrol+クリック>PNGとしてクイック書き出しで、レイヤー名を残したままそれぞれのPNGデータとして保存できます。
また、Adobe AnimateへのPNG画像の画像の配置方法はこちらで確認ができます。

3.キーフレームの挿入

タイムラインの最終点にそれぞれキーフレームを挿入します。

4.キーフレームを動かす

3のキーフレーム部分でそれぞれの画像を動かす。
今回は、カメラアングルの上下変化によって発生する動きを出したいので、上下の動き、変形のみを加えます。

奥レイヤーは一番遠い位置に存在するので(特に今回は空なので前後のレイヤーとの空間的距離が離れているので)、ほんの少しの上下の縮小のみ
中レイヤーは画像を下に落としつつ、縦幅のみを広く変形
手前レイヤーは視点から最も近い位置に位置するので一番極端に動かしつつ、下の位置は変えずに縦幅を変形さすことで動きを出しいています。

5.クラシックトゥインにする

すべてのレイヤーをクラシックトゥインにして自然な流れを作ります。

6.再生で動きの確認

違和感がないか確認して、全体の流れを確認、微調整します。

7.アニメーションGIFの書き出し

アニメーションGIFとして書き出し、完成です。

まとめ

今回は1枚の画像から、動画を作成しました。
各レイヤーの動かし方で、視点の動きが変わり見え方も変わってくるので試してみてください。
文字の背景にアクセントとして動画を組み込みたい時などに役立つかと思います。

著者:MainYard Design(メーンヤードデザイン) 北野敦子

kitano

1987年大阪出身。
生活する上で必ず目にするデザインされたものたち。 街を歩くだけでも無限の魅力があふれています。 ある日ふとそれらに魅了され別業界からデザイナーへ転身。 関西を中心にグラフィックデザインからブランド戦略提案などを展開中。
2012年タイポグラフィ作品展「OKU-2」出展。第31回読売広告大賞協賛社賞受賞。

※KOBITブログでは、定期的に北野敦子さんに記事を寄稿していただいております。
デザインに関するものを中心に、役立つ記事を数多く提供していただいておりますので、ぜひ他の記事もご覧ください。
北野敦子さんによる寄稿記事を読む

納品物クオリティーのアクセス解析レポートを1分で。

Google Analytics・Search Consoleから
わかりやすいPowerPoint・Excelレポートを生成

report
HOMEKOBITブログWEBマーケティングデザイン写真1枚を風景動画風に加工する【Adobe animate CC】