最近のWEBサイトは動きがあって、わかりやすく、UIデザインもしっかりしているのでストレスフリーで情報を得ることができます。
さて、アピスの公式サイトはワードプレスで制作されていますが、古く、メンテナンスが行き届いていないため、色褪せたサイトとなっていたため、リデザインの必要があります。
TOPページのイメージを変えるために、オリジナルの動画を作成しました。（SP用）
再生時間を一桁間違えてしまい二度手間になりましたが、約8時間でPC用とSP用ができました。
（動きにこだわると何時間もかけてしまいたくなります汗）
手順は次のとおりです。
- illustratorでデザインを作る
- 上記でデザインしたデータをpngで保存する
- After Effectプロジェクトの開始:
- After Effectsを開き、「新規プロジェクト」を選択。
- 「新規コンポジション」を作成し、必要な設定（フレームレート、解像度、持続時間など）を行う。
- 素材のインポート:
- 「ファイル」メニューから「インポート」を選び、動画、画像、オーディオファイルなど必要な素材をプロジェクトに追加。
- タイムラインへの配置:
- インポートした素材をタイムラインにドラッグ＆ドロップして配置。
- 素材の順序や持続時間を調整。
- 基本的な編集:
- カット、トリミング、スプリット（分割）などの編集を行う。
- 「トランスフォーム」オプションを使用して、スケール、位置、回転などを調整。
- エフェクトとアニメーション:
- 「エフェクト＆プリセット」パネルからエフェクトを選択し、素材に適用。
- キーフレームを使用してアニメーションを作成。
- テキストとタイトルの追加:
- 「テキストツール」を使用してテキストを追加。
- テキストのフォント、色、サイズを調整。
- オーディオの編集:
- タイムラインでオーディオトラックを調整。
- 必要に応じて、オーディオエフェクトを適用。
- プレビューと調整:
- 「プレビュー」パネルで作成した動画を確認。
- 必要に応じて、エフェクトやタイミングの微調整を行う。
- 動画のレンダリング:
- 「コンポジション」メニューから「レンダーキューに追加」を選択。
- 出力設定を選び、ファイル形式や品質を設定。
- 「レンダー」ボタンをクリックして動画を出力。
- 完成した動画の保存:
- レンダリングが完了したら、完成した動画ファイルを保存。
[cc id=1656]
コメント