كيف أنشأت قالب MOGRT متجاوب في After Effects لاستخدامه داخل Premiere Pro

إذا كنت تعمل على المونتاج فمن المؤكد أنك احتجت يوما إلى كتابة عنوان أو اسم شخص أو أي نص داخل الفيديو. وفي كل مرة تقوم بإنشاء شكل جديد و تحريكه و ضبط مقاسه على مقاس النص في كل مرة ؛ أو تعمل على مشروع من أفتر افكت و تفتح برنامج أفتر إفكت فقط لتعديل كلمة أو تغيير لون النص، ثم تعود من جديد إلى Premiere Pro، حدث لي هذا كثيرا و كنت أشعر في كل مرة أنني أضيع وقت كبير في مهمة بسيطة.

بعد فترة اكتشفت أن الحل هو إنشاء قالب MOGRT، أغلب القوالب تكون بسيطة ويمكن القيام بها كـ preset في بريمير ؛ لذا لم أكن أريد قالبا عاديا لتغيير النصوص و الألوان فقط؛ بل قالبا متجاوبا يتكيف تلقائيا مع طول النص، بحيث تتغير الخلفية وحجمها بالاضافة الحركة دون الحاجة إلى تعديل أي شيء يدويا.

بعد العديد من التجارب، وصلت إلى القالب الذي يخدم الوصف الذي قلته من قبل . و يحقق المبتغى: ننشئ القالب مرة واحدة داخل After Effects، ثم نستطيع استخدامه وتعديل النصوص مباشرة من داخل Premiere Pro بسهولة، دون الحاجة إلى العودة إلى ملف المشروع في كل مرة.

في هذا المقال سأشارك معكم خطوة بخطوة كيف أنشئ قالب MOGRT احترافيا بخلفية متجاوبة مع النص، وكيف أصدره ليعمل داخل Premiere Pro، مع بعض النصائح التي تعلمتها أثناء استخدام هذه الطريقة في مشاريعي.

قبل أن نبدأ، هناك أمر مهم ينبغي الانتباه إليه. ميزة Motion Graphics Templates (MOGRT) غير متوفرة في جميع إصدارات البرنامج، إذ تتطلب استخدام Adobe After Effects CC 2017 وAdobe Premiere Pro CC 2017 أو أي إصدار أحدث. لذلك، تأكد من استخدام نسخة حديثة قبل متابعة الشرح.

الآن لنبدأ بإنشاء مشروع جديد داخل After Effects. أول خطوة هي إنشاء Composition جديد بنفس أبعاد المشروع الذي ستعمل عليه في Premiere Pro. فإذا كنت تنشئ قالبًا لفيديوهات Shorts أو Reels فمن الأفضل أن يكون المشروع عموديًا، أما إذا كنت تعمل على فيديوهات يوتيوب التقليدية فاجعل المشروع أفقيا.

في هذا الشرح سأستخدم دقة 1920×1080، لأنها الدقة التي استخدمتها في مشروع Premiere Pro الخاص بي. بعد إنشاء الـ Composition، نقوم بإضافة Shape Layer ليكون خلفية النص، ثم نضيف Text Layer، وبعدها نضع العنصرين في منتصف الشاشة.

الخطوة التالية هي إضافة تأثير Slider Control إلى طبقة الـ Shape، لأننا سنستخدمه في الحركة و للتحكم في الحد الأقصى لعرض الخلفية. و نضيف أيضا تأثير Fill لاننا سنحتاجه فيما بعد عند نسخ الخلفية للحركة . بعد ذلك ننتقل إلى خاصية Size الخاصة بالـ Rectangle Path ونلصق الـ Expression التالي:

  // After Effects Expression
  نسخ

var textLayer = thisComp.layer("text");
var sliderWidth = effect("Slider Control")("Slider");
var padding = [60, 40];
var textBounds = textLayer.sourceRectAtTime(time, false);
var maxWidth = textBounds.width + padding[0];
var targetHeight = textBounds.height + padding[1];

// IF the slider goes past the max width, cap it at max width
if (sliderWidth > maxWidth) {
    sliderWidth = maxWidth;
}
[sliderWidth, targetHeight]

ملاحظة: إذا كان اسم طبقة النص مختلفًا، فيجب تغيير كلمة "text" داخل السطر الأول إلى اسم طبقة النص الموجودة في مشروعك.

كيف يعمل هذا الـ Expression؟

قد يبدو الكود طويلا في البداية، لكنه في الحقيقة بسيط، وكل جزء منه يؤدي وظيفة محددة:

السطر الأول:

  // After Effects Expression
  نسخ

var textLayer = thisComp.layer("text");

يحدد طبقة النص التي سيقرأ منها أبعاد النص.

السطر الثاني:

  // After Effects Expression
  نسخ

var sliderWidth = effect("Slider Control")("Slider");

يقرأ القيمة الموجودة داخل Slider Control، والتي سنستخدمها لتحديد الحد الأقصى لعرض الخلفية.

  // After Effects Expression
  نسخ

var padding = [60, 40];

اما الـ Padding نعم كخاصية الـ CSS يضيف هامشا حول النص، حتى لا يلتصق بحواف الخلفية. الرقم 60 للمسافة الأفقية والرقم 40 للمسافة العمودية.

  // After Effects Expression
  نسخ

var textBounds = textLayer.sourceRectAtTime(time, false);

يحسب الأبعاد الحقيقية للنص في كل لحظة، لذلك إذا كتبت كلمة أطول أو أقصر، تتغير أبعاد الخلفية تلقائيًا.

السطران:

  // After Effects Expression
  نسخ

var maxWidth = textBounds.width + padding[0];
var targetHeight = textBounds.height + padding[1];

يحسبان العرض والارتفاع النهائيين بعد إضافة الهوامش.

جملة الشرط:

  // After Effects Expression
  نسخ

if (sliderWidth > maxWidth) {
    sliderWidth = maxWidth;
}

تمنع الخلفية من أن تصبح أعرض من اللازم، فإذا كانت قيمة الـ Slider أكبر من عرض النص، يستخدم عرض النص فقط.

السطر الأخير:

  // After Effects Expression
  نسخ

[sliderWidth, targetHeight]

يرسل العرض والارتفاع النهائيين إلى خاصية Size الخاصة بالخلفية، فتتغير تلقائيًا مع أي تعديل في النص.

بهذه الطريقة أصبحت الخلفية متجاوبة مع النص؛ فكلما غيرت النص داخل أفتر افكت أو بريمير برو فيما بعد سيكبر أو يصغر حجم الخلفية تلقائيا دون الحاجة إلى تعديلها يدويا.

إضافة الحركة (Animation)

الآن جاء جزء التحريك، هنا لا توجد طريقة واحدة صحيحة، بل يمكنك تصميم الحركة بأي أسلوب يعجبك. أنا في هذا الشرح سأطبق حركة بسيطة فقط حتى أوضح الفكرة، والأهم من ذلك أن أثبت لك أن الخلفية ستبقى متجاوبة مع النص حتى أثناء الحركة، وليس فقط عندما يكون ثابتا.

أول شيء سنقوم به هو تحريك الخلفية. ننتقل إلى Slider Control الذي أضفناه سابقا، ثم ننشئ Keyframe في بداية الخط الزمني بقيمة 0 أو 50، وبعدها ننشئ Keyframe ثانيا عند الثانية الأولى و10 فريمات بقيمة كبيرة. لا تهتم كثيرا بالقيمة نفسها، لأن الـ Expression الذي أضفناه سابقا سيمنع الخلفية من أن تصبح أكبر من عرض النص لتبقى متجاوبة، المهم أن نتأكد في النهاية من أن النص أصبح ظاهرا بالكامل.

بالنسبة لمنحنى الحركة، فقد جعلته يبدأ ببطء قليلا، ثم يتسارع تدريجيا حتى يصل إلى أقصى سرعة، وبعدها يبدأ بالتباطؤ من جديد حتى نهاية الحركة. هذا النوع من المنحنيات يعطي إحساسا أكثر احترافية من الحركة الخطية العادية.

بعد الانتهاء من حركة الخلفية، ننتقل إلى النص. في حالتي استخدمت حركة بسيطة جدا، وهي تحريك Opacity فقط. جعلت قيمة الشفافية 0% في البداية، ثم يبدأ النص بالظهور ابتداء من الفريم 20 حتى يصل إلى 100% عند الثانية الأولى و10 فريمات. أما المنحنى فكان عبارة عن Ease Out بسيط حتى يظهر النص بشكل ناعم دون أي حركة حادة.

إنشاء تأثير الـ Overlap

بعد أن انتهينا من الحركة الأساسية، سنضيف لمسة صغيرة تعطي القالب مظهرا أكثر احترافية، وهي تأثير Overlap.

كل ما عليك هو نسخ طبقة الخلفية عدة مرات، أنا استخدمت ثلاث نسخ، ثم عدلت ترتيبها بحيث تكون الخلفية الأخيرة هي التي تبقى ظاهرة في النهاية. بعد ذلك غيرت لون كل نسخة باستخدام تأثير Fill الذي أضفناه سابقا، لنحصل على انتقال لوني جميل أثناء الحركة.

تصدير قالب الـ MOGRT

بعد أن انتهينا من تصميم القالب وتحريكه، بقيت آخر خطوة داخل After Effects، وهي تجهيز القالب ليعمل داخل Premiere Pro.

أول شيء نقوم بفتح نافذة Essential Graphics، اذا لم يسبق لك استخدامها يمكنك الوصول إليها من خلال Window ثم Essential Graphics.

بعدها نختار الـ Composition الذي عملنا عليه. إذا كان مشروعك يحتوي على أكثر من Composition، فتأكد أنك اخترت الصحيح قبل أن تبدأ بإضافة الخصائص، لأن هذا الخطأ يقع فيه الكثير من المبتدئين.

نبدأ بإضافة النص. نقوم بسحب Source Text إلى نافذة Essential Graphics، لأنها الخاصية التي ستسمح لنا بتغيير النص مباشرة من داخل Premiere Pro.

كما يمكننا أيضا إضافة خصائص مثل:

• نوع الخط (Font).
• حجم الخط (Font Size).
• نمط الخط (Style).

وذلك عن طريق زر Edit Properties.

أما بالنسبة للون النص، فهناك أكثر من طريقة. يمكنك إضافة تأثير Fill والتحكم في لونه، لكنني أفضل طريقة أخرى، وهي استخدام: Animate ثم Fill Color ثم RGB.

أفضل هذه الطريقة لأنها تمنحني مرونة أكبر، فلو أردت مستقبلا أن أضيف حركة أو تأثيرا على لون كلمة معينة، أو حتى حرف واحد فقط، سأكون قادرا على فعل ذلك بسهولة، لذلك أعتمد عليها مع النصوص في معظم القوالب التي أنشئها.

بعد إضافة الـ Animator، لا تنس سحبه هو أيضا إلى نافذة Essential Graphics حتى تتمكن من تغيير لون النص من داخل Premiere Pro.

بعدها نضيف خصائص ألوان الخلفيات ؛ فقط إذا كنت تريد التحكم بها من Premiere . في حالتي أضفت لون كل خلفية بشكل مستقل حتى أستطيع تغييرها لاحقا دون الحاجة إلى الرجوع إلى After Effects.

قبل تصدير القالب، أحرص دائما على تنظيم نافذة Essential Graphics حتى تكون جميع الخيارات مرتبة وسهلة الاستخدام. صحيح أن هذا القالب لا يحتوي على عدد كبير من الخصائص، لكنني احب ان انظم القالب لأن التنظيم يجعل العمل أسهل بكثير، خاصة إذا عدت إلى القالب بعد عدة أشهر أو أردت مشاركته مع شخص آخر.

لهذا أنشأت Group خاصا بخصائص النص، وGroup آخر للخلفيات، ثم أعدت تسمية الألوان إلى:

• الخلفية الأولى.
• الخلفية الثانية.
• الخلفية الثالثة.

حتى يكون كل شيء واضحا بمجرد فتح القالب داخل Premiere Pro.

بعد الانتهاء من ترتيب جميع الخصائص، ننتقل إلى الفريم الذي نريد أن يظهر كصورة مصغرة للقالب، ثم نضغط على Set Poster Time.

وأخيرا نضغط على Export Motion Graphics Template، ونختار المكان الذي نريد حفظ القالب فيه، ثم نضغط OK.

وهكذا أصبح قالب الـ MOGRT جاهزا، والآن سننتقل إلى Premiere Pro لنرى كيف نستعمله ونعدل عليه بسهولة دون الحاجة إلى العودة إلى After Effects.

استعمال القالب داخل Premiere Pro

الآن نفتح Adobe Premiere Pro، ثم نقوم بفتح نافذة Essential Graphics، وبعدها نستورد ملف الـ MOGRT الذي قمنا بتصديره قبل قليل.

بعد استيراد القالب، كل ما علينا فعله هو سحبه إلى Timeline كما نفعل مع أي عنصر آخر داخل Premiere.

إذا فتحنا نافذة الخصائص، سنجد أن جميع الخيارات التي أضفناها داخل After Effects أصبحت متاحة للتعديل مباشرة من داخل Premiere Pro. يمكننا تغيير النص، وتعديل نوع الخط، وحجمه، ولونه، بالإضافة إلى ألوان الخلفيات، كذلك مباشرة من داخل Premiere Pro دون الحاجة إلى الرجوع إلى After Effects.

أنا شخصيا قمت بتغيير النص وتجربة عدة عبارات مختلفة، وكما ترى، بقيت الخلفية متجاوبة مع النص بشكل تلقائي، ولم تقتصر الاستجابة على النص الثابت فقط، بل حتى أثناء تشغيل الحركة استمرت الخلفية في التكيف مع حجم النص دون أي مشاكل.

وهكذا نكون قد نجحنا في إنشاء قالب MOGRT متجاوب يمكن استعماله في انشاء العناوين و النصوص في أي مشروع مستقبلي، وتعديله بالكامل من داخل Premiere Pro، ما سيوفر عليك الكثير من الوقت إذا كنت تكرر نفس نوع العناوين أو تعمل على عدد كبير من الفيديوهات.