أنشأت LottieFiles نوع ملف سريع وقابل للتطوير وقابل للتحرير بعد العرض ، ومن السهل عليك المشاركة وإنشاء رسوم متحركة بهذا التنسيق. باستخدام Adobe After Effects وبعض المكونات الإضافية ، يمكنك أن تكون جزءًا من أحدث نوع ملف الضجيج: Lottie.
ما هو لوتي؟
A Lottie ، أو dotLottie ، هو نوع ملف يأخذ مطوري الويب في طريق العاصفة. ربما تكون قد صنعت رسومًا متحركة لتضمينها في تصميماتك ، سواء كانت لوسائل التواصل الاجتماعي أو تصميم الويب أو تصميم UX و UI. وربما تقوم بحفظ الرسوم المتحركة كملفات GIF أو SVG أو PNG. يعد ملف Lottie جميع الأجزاء الجيدة لأنواع الملفات هذه ، ولكنه أصغر حجمًا وأسرع وأسهل في التحرير بعد التقديم.
LottieFiles هي قاعدة بيانات ضخمة من الرسوم المتحركة المعدة مسبقًا المحفوظة بتنسيقات Lottie أو JSON. يتم عرض هذه الرسوم المتحركة في الوقت الفعلي ، مما يسمح بشحن أسرع لتصميماتك. ليس هناك انتظار لتنزيل هذه الملفات ؛ سيظهرون بمجرد فتح الصفحة.
لمعرفة المزيد حول LottieFiles ، تحقق من موقعنا مقدمة لوتي.
ابدء
سنقوم بإنشاء Lottie باستخدام برنامج ادوبي افتر ايفيكت، ولكن هناك برامج أخرى يمكنك استخدامها لإنشاء رسوم Lottie المتحركة الخاصة بك. يمكنك استخدام Adobe Animate مع المكون الإضافي LottieFiles لإنشاء Lottie. يمكنك أيضًا تحويل الرسوم المتحركة بتنسيق SVG إلى Lottie إذا كنت قد أنشأت بالفعل رسمًا متحركًا بهذا التنسيق.
After Effects هو أفضل خيار لنا ، ومع ذلك ، نظرًا لأن LottieFiles تم إنشاؤه في الأصل لاستخدامه في After Effects. هيا بنا نبدأ.
1. إنشاء الرسوم المتحركة الخاصة بك
الجانب المتحرك لـ Lottie الخاص بك هو نفسه بالنسبة لأي تنسيق آخر. أنشأنا الرسم التوضيحي للرسوم المتحركة باستخدام Adobe Illustrator. يؤدي ذلك إلى إبقاء الطبقات منفصلة وجاهزة للاستيراد إلى After Effects. بمجرد استيراد الرسم التوضيحي الخاص بك ، يمكنك تكييف طبقات التكوين الخاصة بك مع الرسوم المتحركة النهائية.
تعمل الرسوم المتحركة Lottie في حلقة مستمرة ، لذا ضع في اعتبارك ذلك لنقطتي النهاية والبدء في التصميم الخاص بك. يجب أن تكون الرسوم المتحركة بسيطة ومدتها حوالي ثلاث ثوانٍ.
2. قم بتنزيل الملحقات
هناك نوعان من الإضافات التي يمكنك استخدامها لإنشاء ملف Lottie: المكون الإضافي LottieFiles أو المكون الإضافي Bodymovin. كلاهما متاح لـ After Effects ، ولكن يمكن أيضًا العثور على المكون الإضافي LottieFiles في برامج أخرى. يقوم كل منهما بأشياء مختلفة قليلاً ، لكننا سنركز على المكوّن الإضافي LottieFiles في الوقت الحالي.
لتنزيل المكون الإضافي LottieFiles ، توجه إلى ملف صفحة البرنامج المساعد LottieFiles After Effects. ستجد خيارين للتنزيل.
يتطلب الخيار الموجود على اليمين ملف مدير الامتداد من Anastasiy يعمل مع كل من Mac و Windows. بمجرد تنزيل Extension Manager ، نزِّل المكون الإضافي ZXP من صفحة LottieFiles.
بعد تنزيل البرنامج المساعد ZXP ، افتح Anastasiy Extension Manager ، انقر فوق بعد المؤثرات، حدد المكون الإضافي LottieFiles من القائمة ، واضغط على ثبت.
مرة أخرى على صفحة البرنامج المساعد LottieFiles ، قم بتنزيل المكون الإضافي Adobe Exchange أيضًا ؛ افتح تطبيق Creative Cloud لسطح المكتب وقم بتثبيت المكون الإضافي. العودة إلى الانتهاء الخاص بك الرسوم المتحركة في After Effects.
بعض الأشخاص لديهم خطأ في الإذن عند استخدام هذه المكونات الإضافية. لتجنب هذه المشكلة ، انتقل إلى بعد المؤثرات > التفضيلات > البرمجة النصية والتعبيرات > البرمجة النصية للتطبيق وحدد المربع لـ السماح للنصوص بكتابة الملفات والوصول إلى الشبكة.
بمجرد الانتهاء من ذلك ، ستطلب منك النافذة المنبثقة لـ LottieFiles تسجيل الدخول. إذا لم يكن لديك حساب LottieFiles بالفعل ، فقد حان الوقت الآن لإنشاء حساب.
3. تصدير لوتي الخاص بك
مع تثبيت الإضافات LottieFiles ، يمكنك عرض الرسوم المتحركة Lottie الخاصة بك. أثناء الانتهاء من تكوين الرسوم المتحركة ، انقر فوق نافذة او شباك > ملحقات > LottieFiles. سيظهر هذا نافذة منبثقة بأسماء مؤلفاتك. انقر على سهم أخضر بجوار اسم التكوين الخاص بك ، سيؤدي ذلك إلى إظهار نافذة عرض Lottie.
بعد بضع ثوانٍ ، ستظهر الرسوم المتحركة في النافذة المنبثقة. سيتم تشغيل الرسوم المتحركة في الوقت الفعلي على التكرار. هنا ، يمكنك اختيار حفظ الرسوم المتحركة الخاصة بك أو تحميل الرسوم المتحركة الخاصة بك إلى مكتبة LottieFiles.
النقر حفظ باسم سيعطيك خيارين للتصدير: Lottie JSON (* .json) أو dotLottie (* .lottie). ملف dotLottie هو ملف مضغوط يشتمل على بيانات وصفية لا نحتاجها حقًا للتصدير. ذهبنا مع Lottie JSON.
سيكون ملفك الذي تم تصديره ملفًا نصيًا ، وليس ملف رسوم متحركة مرئي ؛ هذه هي الطريقة التي تعمل بها ملفات JSON. ولكن ماذا لو أردت أن تكون الرسوم المتحركة جاهزة للانطلاق؟ دعونا نرى كيف يمكنك الوصول إليه.
كيف يمكنك استخدام الرسوم المتحركة الخاصة بك لوتي
لتحميل Lottie الخاص بك إلى مكتبة LottieFiles ، انقر فوق تحميل. سيعرض هذا لبضع ثوان. ثم ، انقر فوق الزر مع الكرة الأرضية عليه. يؤدي هذا إلى فتح موقع LottieFiles على الويب حيث يمكنك إرسال رسوم Lottie المتحركة إلى مكتبة LottieFiles. اسم الملف الخاص بك واضغط تسليم.
بمجرد الموافقة على الرسوم المتحركة الخاصة بك في مكتبة LottieFiles ، يمكنك استخدام المكون الإضافي LottieFiles في برنامج مثل Adobe XD أو Figma أو Sketch لشحن الرسوم المتحركة الخاصة بك إلى التصميم الخاص بك.
هناك طرق أخرى لاستخدام الرسوم المتحركة LottieFiles بخلاف الموجودة مباشرة في مكتبة البرنامج المساعد. يمكنك أيضًا تعديل الرسوم المتحركة Lottie من النافذة في المتصفح. يقدم لوحة طبقات أساسية ؛ يمكنك تغيير لون الخلفية وسرعة التشغيل ومعدل الإطارات وبعض الأشياء الأخرى.
من نافذة Handoff ، يمكنك تنزيل الرسوم المتحركة كملف ملف JSON للتنفيذ في تطوير الويب والتصميم ، أو يمكنك تحويله إلى GIF لاستخدامات أكثر تقليدية. يمكنك أيضًا تضمين الرسوم المتحركة الخاصة بك مع رمز تضمين HTML ، وهناك أيضًا خيارات iOS و Android ، بحيث يمكنك شحن الرسوم المتحركة في تصميم الويب الخاص بك.
يتيح لك تضمين Lottie HTML تحرير التعليمات البرمجية لتحرير الرسوم المتحركة الخاصة بك. يمكنك تغيير الألوان والأحجام في الكود مباشرةً عند إضافته إلى موقع الويب الخاص بك.
يتيح لك تنزيل تطبيق LottieFiles على هاتفك مسح رمز الاستجابة السريعة للرسوم المتحركة لمعاينة الرسوم المتحركة في التطبيق. يمكنك أيضًا استخدام لوحة مفاتيح LottieFiles وإسقاط dotLottie كتعليق في منشورات معينة.
قم بإنشاء Lottie In After Effects
على الرغم من أنه قد لا يزال يبدو وكأنه نوع ملف غير تقليدي ، حيث لا يمكنك ببساطة تحميل الرسوم المتحركة الخاصة بك مباشرة إلى وسائل التواصل الاجتماعي مثل يمكنك باستخدام GIF أو PNG ، يأتي Lottie بالعديد من الفوائد لمطوري الويب والمصممين الذين يستخدمون المكونات الإضافية أو يقومون بتضمين الرموز في تصميمات.
توفر ملفات Lottie و JSON المساحة ووقت التحميل ، وتحافظ على الجودة مقارنة بأنواع الملفات التقليدية. تبتكر LottieFiles باستمرار طرقًا جديدة لتنفيذ التصميمات ، والإمكانيات لا حصر لها.
يعد إنشاء حركة متحركة في Procreate أمرًا سهلاً ، وستوضح لك هذه المقالة كيفية القيام بذلك.
اقرأ التالي
- مبدع
- كمبيوتر للرسوم المتحركة
- أدوبي
- تحويل الملف
روبي كاتبة في فئة MUO الإبداعية ، تركز على الكتابة عن برامج التصميم. بعد أن عملت كمصممة ورسامة ومصورة ، حصلت روبي أيضًا على درجة البكالوريوس في الاتصال الجرافيكي وماجستير في اللغة الإنجليزية مع الكتابة الإبداعية.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
