マニュアル キャンセル

アートワークへのモーションの適用

  1. Adobe Fresco ユーザーガイド
  2. はじめに
    1. Adobe Fresco の新機能
    2. Adobe Fresco とは
    3. Adobe Fresco 必要システム構成
    4. Adobe Fresco のリリースノート
    5. Adobe Fresco iPhone 版
    6. キーボードショートカット
    7. Fresco のアクセシビリティ
    8. Adobe Fresco | よくある質問
    9. ユーザーインターフェイスの基本
    10. Adobe Fresco の有料プランにアップグレードする
    11. Adobe Fresco のストレージをアップグレードする
    12. iPad および Windows のデバイスでサポートされている機能
  3. 描画、ペイント、アニメーション、共有
    1. レイヤー
    2. Adobe Fresco のシェイプ
    3. ピクセルブラシ
    4. ライブブラシ
    5. ベクターブラシ
    6. 混合ブラシ
    7. リボンブラシ
    8. スタイラスの筆圧曲線の調整 
    9. カラー
    10. 境界の内側をペイント
    11. アートワークへのモーションの適用
    12. 自由変形ツール
    13. 自動選択ツール
    14. 指先ツール
    15. リキッドツール
    16. テキストの追加と変更
    17. 公開、書き出し、共有
    18. レイヤーマスク
    19. Fresco で Creative Cloud ライブラリにアクセス
    20. ものさし
    21. 消しゴム
    22. 独自のフォントを追加
    23. グリッドと整列 
  4. Adobe Fresco と Creative Cloud アプリ
    1. Adobe Fresco および Photoshop
    2. Adobe Fresco および Illustrator
    3. Draw と Sketch から簡単に移行
  5. クラウドドキュメント
    1. Adobe Fresco のクラウドドキュメント
  6. トラブルシューティング
    1. Windows で読み込んだピクセルブラシを使用できない
    2. Adobe Fresco による Windows ARM デバイスのサポート
  7. サンプル、アイデア、インスピレーション
    1. ロゴを作成する
    2. 絞り染め効果の作成
    3. クリエイティブイラスト | デジタルコンセプトアート

Fresco のフレーム単位またはモーションパスのテクニックを使用して、アートワークにモーションを追加する方法について説明します。

アートワークの要素にモーションを適用して、魅力的なビジュアルストーリーを作成できます。その後、完成したアートワークを MP4、GIF、PNG ファイルに書き出すことができます。

アートワークへのモーションの適用

アートワークまたはその要素をアニメーション化

フレームごとまたはモーションパスのテクニック、あるいは両方を組み合わせて、アートワークまたはその要素をアニメーション化できます。

フレームバイフレーム

各フレームのアートワークは前のフレームとわずかに異なり、連続して再生されると、動きの錯覚が生まれます。オブジェクトプロパティまたは動きがフレームごとに変化する場合に使用します。

モーションパス

オブジェクトをトレースし、定義されたパスをたどります。アピアランスを変えずに、ループモーションでのステージ全体で要素またはアートワークを移動する場合に使用します。

はじめる前に

アニメーションのジャーニーを開始する前に、次のコンセプトと制限事項を理解してください。

  • いくつかのオブジェクトまたはそのプロパティに対して変更が必要な複雑なアートワークでモーションを使用する場合、別々のレイヤーにオブジェクトを作成することをお勧めします。これにより、アートワークで各オブジェクトの編集をより詳細にコントロールできます。
  • レイヤータイムラインは、フレームを含んでいるオブジェクトまたはアートワークを選択したときに表示されます。タイムラインには、デフォルトで、選択したレイヤー内のすべてのオブジェクトが含まれ、作成されたフレームの総数と現在作業中のフレームが表示されます。例えば、2/13 は 13 フレーム中、2 つ目のフレームを作業していることを意味します。
レイヤータイムライン
レイヤータイムライン

フレーム単位またはモーションパスのテクニックを使用したアニメーション化

各フレームの変化の複雑性に基づいて、フレーム単位技法かモーションパス技法を使用して、モーションをアートワークに適用します。

以下のタブを参照して、これらのテクニックを適用し、デザインの成果物に合わせて設定を構成する方法を説明します。

タイムラインを使用して、フレーム単位のモーションをアートワークに追加します。各フレーム内のアートワークに加えた徐々に起こる変化により、動きの錯覚や、デザインの変化が生まれます。

  1. アニメーション化するレイヤーを選択し、「モーション」  を選択します。デフォルトでは、タイムラインには、選択したレイヤーのすべてのオブジェクトが含まれています。

  2. 新しいフレームを追加するには、選択されたフレームをタップします。表示されたオプションを使用して、フレームを複製、コピー、削除します。

  3. フレームを並べ替えるには、シャッフルするフレームを選択し、タイムラインに沿ってドラッグ&ドロップします。新しいレイヤーでアートワークを編集する前に、オニオンスキンを有効にします。

  4. すべて再生」を選択して、アートワークに適用したモーションをプレビューします。再生オプションを、モーション設定   から選択して、プレビューをループ、ブーメラン、または 1 回だけ再生することができます。

  5. モーション設定   を構成して、速度の調整、再生オプションの変更、オニオンスキンの不透明度とフレームの調整、およびドキュメントのタイムラインの表示を行います。

  6. 希望のモーションレイヤーを選択し、詳細オプション  アイコン/参照として設定を選択して、対象の塗りつぶしレイヤーの個々のフレームに塗りつぶしを適用することで、アニメーションの色付けを高速化します。

これらの手順を実行すると、モーションパスのテクニックを使用して、定義されたパスでオブジェクトをアニメーション化することができます。

  1. オブジェクトを含むレイヤーを選択し、motion above the ruler を選択します。

  2. 下部のモーションバーで、パスを選択します。

  3. オブジェクトがたどる、または移動するパスを描画します。パスを作成し直すには、を削除して、パスを再描画します。

    フリーハンドで描画する

    描画補助を使用して描画する

  4. レイヤータイムラインまたはレイヤープロパティでエフェクトを選択して、次のパスエフェクトを追加します。

    • 複数追加:同じパスに複数のオブジェクトを追加して、リアルタイムでプレビューできます。
    • 拡散:対応する追加されたオブジェクトに効果を適用し、リアルタイムにプレビューします。

    複数の散布エフェクトを追加する

    • 回転:切り替えて「揺れ」または「スピン」モーションコントロールを取得します。
      • 揺れ:モーションの「角度」と「回数」を指定します。
      • スピン反時計回りのオンとオフを切り替え、モーションの「回数」を指定します。

    スピンまたは揺れエフェクトを追加

    • パスに整列:指定したパスにオブジェクトを整列させます。
    • スピード:モーショントラックの再生スピードを調整します。
    • イーズイン / アウト:これらのエフェクトを適用して、オブジェクトを画面からゆっくり表示させるか、隠すことができます。
    • 速度:横方向の動きの速度を調整できます。

    これは、「パスに整列」エフェクトを適用した後のデザインの成果物です。

    「パスに整列」オフ

    「パスに整列」オン

  5. すべて再生」を選択して、作業中のモーションをプレビューします。パスを選択して、パス付きのプレビューを表示します。再生オプションを、モーション設定から選択して、プレビューをループ、ブーメラン、または 1 回だけ再生することができます。

  6. モーション設定   を確認して、速度を調整し、再生オプションを変更します。またオニオンスキンの不透明度とフレームを調整し、ドキュメントのタイムラインを表示します。

複数のパスの描画

選択したレイヤーに単一または複数のパスを描画できます。 複数のパスを描画すると、同じレイヤー上にオブジェクトまたはオブジェクトモーションが自動的に複製されるため、すべてのオブジェクトに異なるモーションを適用する場合を除いて、複数のオブジェクトを作成する必要はありません。単一または複数のパスで作業する場合は、設定/ドキュメントのタイムライン/フレームとしてパスを表示を選択して、パスをフレームとして変換するためのパスタイムラインをオンにします。

デザインを作成したので、これらのモーション設定をアニメーションに適用します。

フレーム/秒

アニメーションのスピードをフレーム毎秒(FPS)で定義します。FPS を増やすとスピードが速くなり、減らすと遅くなります。

再生

再生とプレビューのオプションを表示します。再生の種類はループ、ブーメラン、1 回再生です。

タイムラインを文書化

すべてのパスをフレームとして表示します。他のオプションとしてパスをフレームとして表示を有効にすることで、パスをフレームタイムラインに変換できます。

オニオンスキン

前後のフレームの内容を表示することで参照できるようになります。

再生ヘッドの下のフレームはフルカラーで表示されます。

モーションバーの設定でオニオンスキンの機能を有効または無効にします。

  • フレーム:選択したフレームの前後に表示するフレーム数を調整します。
  • 不透明度:各オニオンスキンのフレームの不透明度を調整して、フレームがよく見えるようにします。また、フレームレベルの不透明度のコントロールを使用して、単純なフェードインおよびフェードアウトエフェクトを簡単に作成することもできます。前のフレームは影のように見えます。上のフレームがある場合は、フレームの位置を識別しやすいようにカラーで表示されます。

オニオンスキンを使用すると、フレーム上の描画をプレビューして、トレースしたり、小さな変更を正確に行ったりするのに役立ちます。表示したいフレーム数を調整することもできます。詳細情報については、以下のビデオをご覧ください。

アニメーションにモーション設定を適用する

モーションパスとフレームを変形して移動する

以前に作成したモーションパスをコンテンツとともに移動またはサイズ変更するには、次の手順に従います。

  1. 変換するモーションレイヤーを選択し、ツールバーの変形 アイコンをダブルタップします。

  2. ドロップダウンオプションから「すべてのフレームとモーションパス」を選択します。

  3. 変形オプションを選択して、モーションパスまたはフレームを移動またはサイズ変更します。

アニメーションアートワークの共有

  1. 書き出しを選択して、公開と書き出しモーションを選択します。

  2. 次の書き出し形式を選択します。

    • GIF:web グラフィックのモーションに使用します。
    • MP4:オーディオとビデオの格納用に使用します。Fresco は、MP4 用に 3 つのプリセットを提供しています。
      1. 自動:最大解像度での書き出し出力に使用します。これにより、ファイルサイズが増える場合もあります。
      2. Web 対応:web ディスプレイの出力のサイズや質を最適化に使用します。
      3. PNG 設定:透明オブジェクトのあるモーションに使用します。Adobe After Effects でさらに編集するために PNG ファイルを書き出すことができます。
    ヒント :

    ループスライダーを移動させて、MP4 モーション ファイルのループ数と継続時間を設定できます。

  3. 出力をプレビューするには、「フレームを生成する」を選択します。

  4. 書き出し 」を選択して、アートワークを共有または保存します。

    書き出しオプション強化機能を使用して MP4 モーションファイルのループ数を指定します

関連リソース

Adobe Fresco でのアートワークへのモーションの適用を開始しました。次のステップでは、レイヤーブラシを使用する方法を説明します。

コミュニティに参加してつながり、学び、交流しましょう

コミュニティで質問(英語)

インスピレーション、専門家のヒント、一般的な問題の解決策については、Adobe Fresco コミュニティフォーラムをご覧ください。当社のチームや他のユーザーとつながり、アイデアを交換したり、作品を共有したり、最新の機能やお知らせについて最新情報を入手したり、フィードバックを提供したりできます。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合