ラスターグラフィックスからアニメーション化されたヤシの木

• 四月 24, 2024

次の2つのチュートリアルでは、Flashでヤシの木をアニメーション化します^R CS5。これは、Pamela Gladding Ecards用に作成したFlash ecardアニメーションの一部でした。アートワークは、P G Ecardsのアーティストの1人であるLouise Maxによるものでした。パメラは、このeカード用のアニメーションストーリーボードを考案しました。最初のタスクの1つは、ビーチで2本のヤシの木をアニメーション化することでした。このアニメーションは、eカードアニメーション全体およびカードの終了後も継続します。

ヤシの木を見たことがないので、Googleに行き、風に揺れるヤシの木の動画を検索しました。最初に気づくのは、ハリケーンでない限り、ヤシの木の幹はほとんど動きません。すべてのアクションは手のひらで行われ、風に優雅に揺れます。

eカードのアートワークがレイヤー化されたPhotoshopファイルで私に電子メールで送られたとき、ヤシの木の手のひらが背景からコピーされ（すべて1つに）、透明なレイヤーに配置されました。そのため、すべて（空、砂、木）を含む背景レイヤーと、手のひらのグループを持つレイヤーがありました。

この時点で、手のひらをアニメートする唯一の方法は、背景の上のトゥイーンレイヤーで手のひらのグループを回転させることです。しかし、それはあまり現実的ではありません。最初に、手のひらのレイヤーが回転すると、元の手のひらのグループがまだ背景レイヤーに表示されます。第二に、実生活では、各手のひらはグループとして一緒にではなく、個別に動きます。

P G Ecardsのecardアニメーションはラスターグラフィックスから作成されるため、アニメーションの可能性は広大なアニメーションに比べて制限されています。そのため、アニメーションの一部をよりリアルに見せることができると、eカードによって作成される全体的な印象が助けられます。

各手のひらを個別に動かすことで、よりリアルなアニメーションを作成できます。したがって、最初のタスクは、それぞれの手のひらを選択し、それらを独自の透明レイヤーに配置することでした。私が長年使ってきたトリックの1つは、選択して多角形なげなわツールを使用する領域を拡大して拡大することです。手のひらの色は非常に似ているため、クイック選択ツールよりもうまく機能します。

ご覧のように、手のひらの元のグループは上部で途切れています。このまっすぐなエッジは、手のひらをアニメートするときに問題になり、手のひらが回転するときに欠落している部分が表示されます。それで、次のステップは、私たちが持っている個々の手のひらを使って、これらの手のひらの欠けている秒を埋めることでした。

最後に、背景画像については、手のひらを削除し、背景から手のひらを削除したときに作成された空の空の穴を埋めます。空はほぼ単色なので、コンテンツに応じた塗りつぶしを使用して、欠落している空を簡単に置き換えることができます。

これで、手のひらをアニメーション化する準備ができました。

次へ→

Pamela Gladding Eカードで完成したEカードを見る

Copyright 2018 Adob​​e Systems Incorporated。全著作権所有。 Adobe Systems Incorporatedの許可を得て、Adobe製品のスクリーンショットを転載しました。 Adobe、Photoshop、Photoshop Album、Photoshop Elements、Illustrator、InDesign、GoLive、Acrobat、Cue、Premiere Pro、Premiere Elements、Bridge、After Effects、InCopy、Dreamweaver、Flash、ActionScript、Fireworks、Contribute、Captivate、Flash CatalystおよびFlash Paper米国および/またはその他の国におけるAdobe Systems Incorporatedの登録商標または商標です。