エッセンシャルグラフィックステンプレートでアイコン付きのテロップを中央揃えで効率的に入れたい

[areeeee]

アイコンとテキストを入れたエッセンシャルグラフィックステンプレートを作成したのですが、アイコンとテロップ両方を合わせて中央揃えにできないでしょうか？

今現在はドラッグでテンプレートをシーケンスに載せて、文字を変換し、文字の位置を調整、アイコンの位置を調整という作業をしています。

文章の長さによってアイコンの場所をかえないといけないですし、それに合わせて文字も場所を変えるのがとても効率悪く感じています。

なにか良い方法がありましたら、教えていただけると嬉しいです！

[150kw · Accepted solution]

こんばんは、areeeeeさん

次の方法はいかがでしょうか。環境は、Windows 10 v21H1＋Premiere Pro v23.0～です。Premiere Pro v22.x以前ではこの方法は使用できません。

①「エッセンシャルグラフィックス」パネルでテキストレイヤーとアイコンのレイヤー（ここではシェイプレイヤー）を作成し、位置を決めて配置します。

両レイヤーを選択し、「配列」で「グループとしてビデオフレームに合わせる」に設定して、「水平方向に中央揃え」をクリックします。これで基本の位置が決まります。

②グラフィッククリップを選択し、メニューの「グラフィックとタイトル」→「モーショングラフィックステンプレートとして書き出し」を選択し、例えば「ローカルテンプレートフォルダー」へ書き出します。

③「ローカルテンプレートフォルダー」から対象の「モーショングラフィックステンプレート」をビデオトラックにドラッグ＆ドロップで配置します。

④テキストを変更します。テキストを上下方向は動かさず、左右方向を「アニメーションの位置を切り替え」の左側数値で動かしアイコンとバランス良く配置します。

⑤両レイヤーを選択し、「配列」で「グループとしてビデオフレームに合わせる」に設定して、「水平方向に中央揃え」をクリックします。

[areeeee]

とても詳しく説明してくださり、ありがとうございます！

エッセンシャルグラフィックスの中に画像入れ込めるということ初見でした！！！

参考にさせていただきます！

[150kw]

こんにちは

＞エッセンシャルグラフィックスの中に画像入れ込めるということ初見でした！！！

この画像は「長方形ツール」、「楕円ツール」、「多角形ツール」、「ペンツール」で描くシェイプですよね。

シェイプとは別に映像ファイルや画像ファイルも読み込めますよ。こちらは、「新規レイヤー」をクリックし、開いたメニューから「ファイルから」をクリックすると、読み込むことができます。

[Mukaida]

After Effectsでエッセンシャルグラフィックス用のテンプレートを作成すれば、常に中央に配置させることができます。
エクスプレッションというスクリプトで計算式を書く必要があるため難しくなりますが、「テキストボックス」をキーワードでネット検索すれば多数の情報が出てくると思います。

アイコンとテキストの組み合わせであれば、下記リンクの質問が参考になると思います。

解決済み: テキストの位置を固定するエクスプレッションを書きたい - Adobe Support Community - 12005038 

一般的なテキストボックスの作成は、下記が参考になると思います。
解決済み: テキストボックスのエクスプレッションについて - Adobe Support Community - 11500955 

テンプレートの記事は下記リンクになります。
エッセンシャルグラフィックスパネルを使用してモーショングラフィックステンプレートを作成する 

[Mukaida]

参考ですが、After Effectsで作成したエッセンシャルグラフィックスをテンプレートとして書き出して、Premiereで動作させた動画を添付します。
目的に応じて、初期設定や各種プロパティをAfter Effects でカスタマイズしてテンプレートを作成できます。

[areeeee]

AfterEffectのサンプル動画衝撃でした！！

やりたいテロップの動きをしていて感動しました！

ただ、AfterEffectはかなり初心者のため、エクスプレッションを簡単に教えていただくことは可能でしょうか？

[Mukaida]

エクスプレッションの公開は可能です。

事前の準備として、アイコンとテキストを配置したコンポジションを作成して下さい。
アイコンのレイヤーには、エフェクト「スライダー制御」を3個追加して、エフェクト名を下図のように変更して下さい。
名称の変更は、エフェクトパネル上でエフェクト名を選択してEnterキーを押すと入力できます。

エクスプレッションやエッセンシャルグラフィックスなどのの追加や操作方法は、ユーザーガイドやネット検索を利用して確認しておいて下さい。
After Effects ユーザーガイドのご利用をありがとうございます 

[Mukaida]

エクスプレッションは、コピーして各プロパティに貼り付けて下さい。

２箇所レイヤー名を書き換えが必要になります。

スライダー制御の名前も合っているか確認して下さい。

半角・全角の違いでもエラーが出ます。

[アイコンレイヤー]

//アンカーポイント
let n = effect("アイコンX調整")("スライダー");
let y = effect("アイコンY調整")("スライダー");
let w = thisLayer.sourceRectAtTime().width;
let h = thisLayer.sourceRectAtTime().height;
let t = thisLayer.sourceRectAtTime().top;
let l = thisLayer.sourceRectAtTime().left;
[l + w+n , t + h / 2 + y]

//位置
let compCenter =  thisComp.width / 2 ;
let textW = thisComp.layer("テキストレイヤー名").sourceRectAtTime().width; //テキストレイヤー名を入力
let iconW =thisLayer.sourceRectAtTime().width + effect("アイコンX調整")("スライダー");
let plusY = -(thisLayer.sourceRectAtTime().height + effect("Y位置調整")("スライダー"));
let plusW = textW + iconW;
let plusCenter = plusW / 2 ;
let ajW = iconW - plusCenter ;
[compCenter + ajW , value[1] + plusY]

[テキストレイヤー]

//アンカーポイント
let w = thisLayer.sourceRectAtTime().width;
let h = thisLayer.sourceRectAtTime().height;
let t = thisLayer.sourceRectAtTime().top;
let l = thisLayer.sourceRectAtTime().left;
[l  , t + h / 2]

//位置
thisComp.layer("アイコンレイヤー名").transform.position	//アイコンレイヤー名を入力

[Mukaida]

エッセンシャルグラフィックスの作成は、タイムラインからプロパティをドラッグで追加して青色の文字をクリックで適切な値に設定します。
先の回答にあるリンクを参考に必要なプロパティの追加とテンプレートの作成を行なって、Premiereで確認して下さい。

[areeeee]

ご連絡遅くなってしまい申し訳ありません。。

今回このやり方が1番良いと思ったのですが、テロップ数1000個ほど入れるため、プロジェクトが重くなってしまうので断念いたしました。。。

もし軽ければこのやり方が1番効率できですね！！

素晴らしいご提案ありがとうございました！

[Mukaida]

エッセンシャルグラフィックスで作業するには大変ですね。

After Effects 上で全ての作業を行える状態であれば、かなり速くできたかもしれません。
テロップの時間が設定されていてPremiereなどからSRT形式で書き出しされたファイルをSRT読み込みのスクリプトを使ってAfter Effectsに読み込むのが条件になります。