كيف تصنع سينيماغراف في فوتوشوب

نشرت: 2018-02-07

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

هناك أيضًا سبب عملي رئيسي يجعل الفقرات السينمائية رائعة: حجم ملفها الصغير. من الأسهل بكثير إضافة لحظات صغيرة من الحركة إلى موقعك ، بدلاً من ملف فيديو كامل! ولكن بعيدًا عن اللوجيستيات ، هناك سبب أخير لكون الأفلام السينمائية ساحرة جدًا: إنها في الواقع أسهل بكثير في الإنشاء مما تعتقد!

ملاحظة: هذا البرنامج التعليمي جزء من دورة اتجاهات التصميم لعام 2019! عندما تقوم بالتسجيل ، ستحصل على وصول خاص إلى قالب Photoshop وملف فيديو مخصصين للتجربة ، بالإضافة إلى برنامج تعليمي محدد حول كيفية استخدام الملف! انقر هنا للانتقال مباشرة إلى التسجيل (أو الوصول إلى البرنامج التعليمي إذا كنت قد انضممت بالفعل!)

على استعداد للبدء؟ اسحب مقعدك وافتح برنامج فوتوشوب واتبع هذه الخطوات السبع السهلة لإنشاء سينيماغراف الخاص بك!

1. اختر ملف الفيديو الخاص بك

لعمل سينيماغراف ، ستبدأ بملف فيديو أساسي. من الناحية المثالية ، ستقوم بتصوير الفيديو بنفسك بحيث يمكن أن يكون خاصًا بشركتك ويتوافق تمامًا مع علامتك التجارية ، ولكن إذا كنت تقوم بالتجربة فقط ، فإن تنزيل مقطع فيديو عادي سيعمل بشكل جيد!

في هذا البرنامج التعليمي ، أستخدم مقطع فيديو قمنا بتصويره داخليًا لجولة Jenga مقابل خلفية زرقاء بسيطة. (ستحصل على الملف نفسه إذا قمت بالتسجيل في دورة Design Trends!)

تخطيط بواسطة حذافة cinemagraph فوتوشوب كيفية تعليمي رجل يهز برج jenga

عند اختيار الفيديو المثالي لسينماغراف الخاص بك ، هناك بعض الأشياء التي تريد وضعها في الاعتبار:

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

بمجرد حصولك على ملف الفيديو الخاص بك ، فأنت جاهز لتحميله في Photoshop.

2. استيراد ملف الفيديو

بعد سحب Photoshop ، توجه إلى File> Open . حدد الملف الخاص بك ، وبعد ذلك سترى الفيديو يظهر كطبقة. إذا لم يظهر تلقائيًا ، فتأكد من أنه يمكنك أيضًا رؤية المخطط الزمني بالانتقال إلى Window> Timeline .

تخطيط بواسطة دولاب الموازنة cinemagraph كيفية تحرير البرنامج التعليمي للخط الزمني

ستلاحظ أن ملف الفيديو يتم وضعه تلقائيًا في مجموعة ، "Video Group 1." يمكنك تركها هناك ، ولكن إذا كان وجود طبقة واحدة فقط في مجموعة يزعجك ، فلا تتردد في سحب طبقة الفيديو وحذف المجموعة! ليس من الضروري.

3. تنظيف الجدول الزمني

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

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

ملاحظة: سيظل الجزء الذي قمت بقصه من الملف محفوظًا ، لذلك لا تقلق بشأن فقد البيانات هنا! يمكنك دائمًا النقر فوق الحافة وسحبها للخارج ، إذا قررت أنك بحاجة إلى جزء معين لاحقًا.

تخطيط بواسطة حذافة cinemagraph كيفية تنظيف الجدول الزمني التعليمي

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

بمجرد الانتهاء من تنظيف الجدول الزمني ، حان الوقت لإخفاء الحركة التي لا تريدها.

4. إنشاء طبقة اخفاء

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

تخطيط بواسطة دولاب الموازنة cinemagraph كيفية إنشاء طبقة إخفاء

إذا قمت بالنقر فوق تشغيل ، فستلاحظ أنه لا يمكنك الآن رؤية أي مقطع فيديو ، لأن ما زال لاحقًا في المقدمة. حان الوقت الآن لإضافة قناع ، والذي سيسمح لنا باختيار الحركة الدقيقة التي نريد إظهارها!

المضي قدمًا في إضافة Layer Mask ، إما من الخيار الموجود أسفل لوحة Layers أو بالانتقال إلى Layer> Layer Mask> Reveal All.

تخطيط بواسطة دولاب الموازنة cinemagraph كيفية تعليم طبقة إخفاء

5. عزل الحركة

تأكد من تحديد Layer Mask (بدلاً من الطبقة نفسها) ثم امسك أداة Brush. تمامًا مثل أي قناع ، سيؤدي استخدام الفرشاة باللون الأسود إلى إخفاء القناع (إظهار المحتوى من الطبقة الموجودة أسفله) بينما سيؤدي استخدام الفرشاة باللون الأبيض إلى إظهار القناع (إخفاء المحتوى من الطبقة الموجودة أسفله).

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

تخطيط بواسطة حذافة cinemagraph كيفية عزل الحركة تعليميًا

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

6. تصدير كملف gif

بمجرد أن تصبح سعيدًا بسينماغراف الخاص بك ، فقد حان الوقت لتصديره! ما عليك سوى الانتقال إلى ملف> تصدير> حفظ للويب (قديم) . هناك الكثير من الخيارات التي يمكنك تجربتها هنا ، ولكن أهم خيارين هما:

  1. حفظ كملف gif (الموجود بالقرب من أعلى مربع الحوار)
  2. اضبط خيارات التكرار على Forever (الموجودة بالقرب من أسفل مربع الحوار)

هناك دائمًا توازن بسيط بين حجم الملف وجودته ، لذلك أوصي بالتأكيد بتجربة الإعدادات للتأكد من حصولك على التصدير الذي تحتاجه بالضبط.

تخطيط بواسطة حذافة cinemagraph كيفية تعليمي jenga tower متذبذب GIF

وهذا كل شيء! لقد قمت للتو بإنشاء فيلم سينمائي خاص بك لمشاركته مع العالم. كيف انتهى الأمر؟ نود أن نعرف في التعليقات.

المكافأة: قالب فوتوشوب وفيديو مجاني!

عندما تقوم بالتسجيل في دورة 2019 Design Trends المجانية ، ستتمكن من الوصول إلى ملف الفيديو المستخدم في هذا البرنامج التعليمي وقالب Photoshop المخصص الذي يوضح طريقة مبسطة لإنشاء فقرات سينمائية!

[معرف optin-monster-shortcode = "gsslnts3izfmmakod6ib"]

كيفية استخدام ملف الفوتوشوب

عندما تفتح هذا الملف في Photoshop ، سترى سينماغراف النهائي. يمكنك استخدامه إذا كنت ترغب في ذلك ، أو يمكنك اللعب لمعرفة كيفية إعداد كل شيء!

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

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

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

أخيرًا ، قمنا بتغيير المنحنيات لتصحيح بعض الألوان في الملف. قد تحتاج أو لا تحتاج إلى القيام بذلك ، اعتمادًا على الفيديو الخاص بك ، ولكن تذكر: يمكنك دائمًا متابعة التحرير بمجرد إنشاء سينيماغراف!

وهذا كل شيء! لديك فيلم سينمائي جاهز للعرض على موقعك. أخبرنا في التعليقات أدناه: ما الذي ستنشئه بهذا الاتجاه؟


قم بالتسجيل في دورة البريد الإلكتروني المجانية لدينا!

دورة عبر البريد الإلكتروني تحتوي على ملفات Photoshop وبرامج تعليمية والكثير من الإلهام!

نحن نستكشف أحدث وأفضل الاتجاهات في تصميم مواقع الويب من خلال دورة تدريبية مجانية عبر البريد الإلكتروني - وأنت مدعو! بدءًا من التأثيرات الرسومية الجذابة إلى تخطيطات بطاقة شبكة CSS ، فإننا نتعمق في اتجاهات عام 2019 لمشاركة سبب عملها وكيف يمكنك تنفيذها على موقعك الخاص.