マニュアル キャンセル

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

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

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

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

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

モーションを適用するテクニック

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

フレームバイフレーム

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

モーションパス

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

はじめる前に

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

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

    例えば、2/13 は総数 13 フレーム中、2 つ目のフレームを作業していることを意味します。
レイヤータイムライン

レイヤータイムライン

レイヤータイムラインを開くには:

  1. アニメーション化するオブジェクトを含むレイヤーを選択します。
  2. モーションをオンにします。
  3. モーションをタップし、レイヤータイムラインを終了します。

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

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

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

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

フレーム単位のモーションを適用するには、次の手順を実行します。

  1. 選択。デフォルトでは、タイムラインには、選択したレイヤーのすべてのオブジェクトが含まれています。

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

    • フレームを複製:複製フレームは、選択されたフレームを参照として使用して作成されます。
    • フレームをコピー & ペースト:フレームをコピーを選択後、コピーしたフレームを貼り付けるフレームを選択します。オブジェクトがコピーされた新しいフレームが追加されます。
    • フレームを削除:タイムラインからフレームを削除します。元に戻すをすぐに選択して、削除されたフレームを取得します。
  3. フレームを並べ替えるには、シャッフルするフレームを選択し、タイムラインに沿ってドラッグ&ドロップします。新しいレイヤーでアートワークを編集する前に、オニオンスキンを有効にします。

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

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

アートワークへのフレーム単位のモーションの適用

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

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

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

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

    フリーハンドで描画する

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

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

    • 複数追加:同じパスに複数のオブジェクトを追加して、リアルタイムでプレビューできます。
    • 拡散:対応する追加されたオブジェクトに効果を適用し、リアルタイムにプレビューします。
    • スピード:モーショントラックの再生スピードを調整します。
    • イーズイン / アウト:これらのエフェクトを適用して、オブジェクトを画面からゆっくり表示させるか、隠すことができます。
    • 速度:横方向の動きの速度を調整できます。
    • パスに整列:指定したパスにオブジェクトを整列させます。

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

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

    「パスに整列」オフ

    「パスに整列」オン

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

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

複数のパスの描画

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

単一または複数のパスで作業する場合は、設定/ドキュメントのタイムライン/フレームとしてパスを表示を選択して、パスをフレームとして変換するためのパスタイムラインをオンにします。

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

フレーム/秒

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

再生

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

タイムラインを文書化

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

オニオンスキン

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

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

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

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

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

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

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

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

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

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

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

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

次の手順を実行して、モーションアートワークを有用な形式で共有します。

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

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

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

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

関連リソース

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

ご質問やご意見をお待ちしています

質問や共有したいアイデアがあれば、Adobe Fresco コミュニティまでお寄せください。

アドビのロゴ

アカウントにログイン