كيفية إنشاء صورة متحركة لمنشور متوسط

من CSS إلى GIF

تم العثور على هذا GIF مذهلة هنا

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

سنشرح لك في هذه المقالة كيف أنشأنا رأس منشوراتنا المتحركة. سنشارك أيضًا بعض النصائح والإرشادات حول استخدام ملفات GIF على "متوسط".

صور GIF على المنشورات المتوسطة

يسمح لك Medium بتحميل صورتين على رأس المنشور: إحداها هي صورة الخلفية ، والآخر هو صورة الشعار.

في كلتا الحالتين ، يتم دعم تنسيق GIF ، بحيث يمكنك ملء غلاف المنشور مع بعض الرسوم المتحركة الجميلة.

فيما يلي مثالان ملهما:

  • الخلفية (GIF كصورة خلفية)
  • أرجواني (GIF كصورة شعار)

من CSS إلى GIF

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

تم تنفيذ الرسوم المتحركة على موقعنا باستخدام CSS ، لذلك قررنا تعديل مقطع التعليمات البرمجية الموجود وإيجاد طريقة لتحويله إلى GIF.

غطاء الرسوم المتحركة الحالي للرادار

الخطوة 1 - أتش تي أم أل و CSS

كانت الخطوة الأولى هي تكييف الشفرة الحالية وإنشاء صفحة html تحتوي على رسومنا المتحركة ونفس خلفية صورة الخلفية التي أردنا استخدامها في منشورنا.

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

الخطوة 2 - تسجيل الشاشة

يحتوي Quicktime Player على وظيفة تسجيل شاشة سهلة الاستخدام ، مما يسمح لك باختيار مساحة الشاشة التي تريد تسجيلها. يتم التقاط الفيديو بمعدل 30 إطارًا في الثانية تقريبًا ، لذا يجب ألا تزيد مدة حركتك عن 15 ثانية (15 ثانية = 450 إطار).

إذا كنت تستخدم Windows ، فيمكنك أيضًا تجربة أحد هذه البرامج لتسجيل الشاشة.

الخطوة 3 - تحويل .mov إلى GIF

بمجرد الانتهاء من التسجيل ، سيكون لديك ملف .mov.

افتح Photoshop وانتقل إلى ملف> استيراد> إطارات الفيديو إلى الطبقات.

يمكنك اختيار جزء التسجيل الذي تريد استيراده وتحويله إلى طبقات. لا تنسَ تحديد مربع "Make Frame Animation".

سيقصر Photoshop الإطارات على 500 ، ويجب ألا يكون لديك أكثر من ذلك ، وإلا فإن الملف سيصبح ثقيلًا جدًا.

إذا قمت بفتح لوحة الخط الزمني في Photoshop ، فسترى كل الإطارات الخاصة بك.

الآن تحتاج فقط إلى تصدير الإطارات كـ GIF. للقيام بذلك ، انتقل إلى ملف> حفظ للويب.

يمكنك تقليل حجم الملف عن طريق تحديد عدد الألوان في مربع حوار التصدير.

من المهم الحفاظ على أبعاد GIF مضاعفة الحجم مما تحتاجه ، لأن Medium سيعيد تغيير حجمه إلى النصف.

"نحن نفترض أن جميع الشعارات هي شبكية شبكية ، مما يعني أن الشعار قد تم تحميله بمعدل ضعف الحجم الذي نفترض أنه سيتم عرضه. إذا قمت بتحميل شعار بعرض 2000 بكسل وارتفاع 1000 بكسل ، فسوف يفسره Medium على أنه عرض 1000 بكسل وطول 500x. "
- مدونة متوسطة

لدينا GIF النهائي لديه 475 لقطة وحوالي 2MB.

الخطوة 4 - تحميله إلى متوسطة

قم بتحميل صورة الخلفية وصورة الشعار إلى المنشور ، وهذا كل شيء.

لديك الآن صورة غلاف متحركة!

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