3 طرق لعمل لقطات شاشة GIF متحركة لتصميم أعمالك في محفظتك

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

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

لماذا تعتبر لقطات الشاشة المتحركة مهمة لمحفظة أعمالك

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

أدوات لصنع صور GIF

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

ملاحظة : لن يكون هناك أي تعليمات حول التصميم المرئي في هذا البرنامج التعليمي ؛ تفترض هذه النصائح أن تصميم موقع الويب أو التطبيق لمشروع محفظتك قد تم بالفعل.

كيفية إنشاء لقطات شاشة GIF متحركة في Adobe Photoshop

في رأيي ، يعد Adobe Photoshop و Adobe After Effects أفضل الأدوات لهذا المنصب. كلاهما يسمح بقدر كبير من السيطرة على المنتج النهائي. أنا شخصياً أحب Photoshop لعمل لقطات شاشة GIF (ومعظم المصممين على دراية بها) ، لذلك هكذا سيتم بناء المثال التالي. هيا بنا نبدأ!

عرض وظيفة التمرير

تم إجراء هذا التصميم في Adobe XD ولكن تم تصديره بعد ذلك إلى Photoshop بطبقات ذات أسماء مناسبة. يحتوي المثال على طبقة تسمى "MinTour Locations List" لصفحة القائمة ، و "Sculpture Garden List" لصفحة التفاصيل ، والجزء الخارج من عرض التمرير الأولي يسمى "Sculpture Garden List Overflow."

الجزء الأول

1. إعداد الجدول الزمني وقائمة الموقع

ميزة المخطط الزمني هي ما سنستخدمه لإنشاء شاشات مختلفة للمنتج النهائي. تأكد من أن لوحة الجدول الزمني مفتوحة بالانتقال إلى Window> Timeline .

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

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

اختياري: إذا كنت ترغب في إظهار مكان نقر المستخدم ، فسيظهر ذلك أحيانًا بنقطة. للقيام بذلك ، أضف إطارًا إضافيًا بمنطقة النقطة.

2. تفاصيل الموقع الفردية

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

3. تفاصيل الموقع الفردي انتقل المحتوى

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

4. اختر المدد

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

أضع قيمًا لكل إطار ، بإجمالي خمس ثوانٍ للرسوم المتحركة بأكملها.

5. معاينة

من الجيد إلقاء نظرة على ما يجري حتى الآن. يوجد زر تشغيل في الصف السفلي من لوحة Timeline. جرب الأشياء ولاحظ ما إذا كان هناك أي شيء يمكن تحسينه.

(اختياري) تحكم توين

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

من القائمة إلى القائمة الفائضة ، تمت إضافة Tween لجعلها تبدو وكأنها أكثر من إجراء التمرير. تم تعيين هذه الإطارات الجديدة على مدة قصيرة جدًا تبلغ 0.5 ثانية (التمرير في أحد التطبيقات يحدث بسرعة نسبيًا).

إذا كنت تريد استمرار تكرار هذا في Photoshop ، فتأكد من تحديد "Forever". إذا كان هناك عدد محدد من الحلقات ، فيمكن إدخال هذه القيمة.

6. حفظ لقطة الشاشة بتنسيق GIF (تدفق الشاشة فقط)

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

هنا سترى جميع الإعدادات التي ستحتاجها لـ GIF الخاص بك. تذكر أنك مقيد بعدد الألوان ، لذلك سنجعل الأشياء تبدو في أفضل حالاتها قبل التصدير. يُعد 256 الخيار الأفضل على الأرجح نظرًا لأن مواقع الويب والتطبيقات تميل إلى امتلاك نطاق كبير من الألوان ، ولكن إذا كان التصميم الخاص بك يسمح بذلك ، فيمكنك التبسيط (مما يحافظ على حجم الملف منخفضًا).

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

الجزء الثاني: شاشات ذات طبقات مميزة على الجهاز

إذا قررت المتابعة ، فستكون هناك حاجة إلى بعض الخطوات الإضافية لوضعها في طبقات بحيث تبدو أكثر واقعية على الهاتف. من لوحة Timeline اختر "Flatten Frames Into Layers." سيتم تحويل كل إطار إلى طبقة مسطحة تنتهي بـ 26 إطارًا (لذلك هناك 26 طبقة).

بمجرد حفظ ذلك ، يجب إضافة صورة الهاتف إلى الملف. لاستيعاب ذلك ، يجب إجراء بعض التغييرات في حجم الصورة.

1. ضبط حجم اللوحة القماشية للشاشة المتحركة

صورة الخلفية 1300 × 920 ، لذا يجب تعديل حجم قماش الرسم ليناسب ذلك تمامًا. انتقل إلى Image> Canvas Size ووضع الأبعاد الصحيحة.

2. احصل على طبقات جاهزة ليتم وضعها على شاشة الهاتف

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

3. تحقق مرتين من الإطارات

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

4. انحرف الشاشات

من المهم أن يتم تحديد جميع طبقات الشاشة بحيث يمكن انحرافها جميعًا مرة واحدة لتبقى موحدة. تحرير> تحويل> الانحراف هو المكان الذي يتم فيه ذلك.

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

5. تعديلات الصورة وحفظ لقطة شاشة GIF الخاصة بك

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

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

جيفي

إذا لم يكن Photoshop هو الأداة المفضلة لديك ، فهناك أداة مجانية وسهلة تسمى Giphy. (بالإضافة إلى الاستخدام الاحترافي ، يمكنك عمل الكثير من صور GIF المضحكة أيضًا!)

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

بمجرد تحميل الملفات ، حدد "إنشاء عرض شرائح". عند الانتهاء من تجميع الصور معًا ، يمكنك تنزيل الملف. إنها بهذه السهولة!

سجله

هذا التطبيق بسيط جدا. يسجل الإجراء الذي يحدث على شاشة جهاز الكمبيوتر الخاص بك ويقوم بتحميل التسجيل إلى موقع Recordit.io على الويب ويقوم بإنشاء ارتباط قابل للمشاركة ، مع خيار تنزيل GIF.

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

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

سيستغرق الأمر بضع ثوانٍ ، ولكن بعد إيقاف التسجيل ، ستكون هناك نافذة منبثقة بها رابط ينقلك إلى التسجيل ، والذي يتم استضافته على موقع Recordit.io.

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

ورقة عمل مجانية: الجمهور المستهدف وشخصية العميل

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

إذا أعجبك هذا المقال ، فقد تستمتع أيضًا بما يلي:

• كيفية إنشاء رسوم متحركة SVG باستخدام CSS
• كيفية إنشاء معرض فيديو WordPress
• كيفية استخدام روابط التخطي لتسهيل الوصول إلى موقع WordPress الخاص بك