تحميل ايقونات ايكون سكاوت: SVG و3D وLottie
دليل تحميل ايقونات ايكون سكاوت: الأيقونات والرسومات ثلاثية الأبعاد وحركات Lottie، وفهم صيغ SVG وPNG وJSON واستخدامها في تصاميمك.
أداة تحميل ايكون سكاوت (IconScout) تعطيك الأيقونات والرسومات ثلاثية الأبعاد وحركات Lottie بمجرد لصق رابط الملف، فتبني واجهة أو عرضاً أنيقاً دون شراء باقة كاملة لأجل بضعة ملفات. في هذا الدليل نشرح كل نوع ملف، وأي صيغة تختار لأي عمل، وكيف تحافظ على اتساق مشروعك بصرياً.
ماذا تجد في IconScout؟
IconScout سوق ومكتبة لأصول التصميم. الفئات الثلاث التي تهم معظم المستخدمين:
- الأيقونات: أيقونات مفردة ومجموعات بأنماط كثيرة، مثل الخطية والممتلئة وثنائية اللون والمسطحة الملونة.
- رسومات 3D: عناصر ومشاهد مجسمة تعطي صفحات الهبوط والعروض عمقاً.
- حركات Lottie: ملفات متحركة صغيرة تُستخدم في التطبيقات والمواقع والعروض لشاشات التحميل والترحيب والحالات الفارغة والتفاعلات الدقيقة.
وفيها كذلك رسومات توضيحية وملصقات وأصول أخرى، لكن الأيقونات و3D وLottie هي أساس أغلب الطلبات.
أي صيغة ملف تختار؟
الصيغ هي المكان الذي يضيع فيه وقت المبتدئين. هذه خلاصتها.
SVG للأيقونات والرسومات المسطحة
SVG صيغة فيكتور. تتكبر لأي حجم دون تشوش، وحجمها صغير جداً، ويمكنك تغيير ألوانها في الكود أو في برنامج التصميم. استخدمها لأيقونات المواقع وواجهات التطبيقات والشعارات على المجسمات وتجهيز المطبوعات.
PNG للاستخدام السريع
PNG صورة نقطية بخلفية شفافة. مناسبة للشرائح ومنشورات السوشيال والبريد حيث لا تحتاج تعديل الشكل. صدّرها بحجم يعادل ضعف حجم العرض على الأقل لتبقى حادة على الشاشات عالية الكثافة.
JSON لحركات Lottie
حركة Lottie هي ملف JSON يصف الحركة. تشغله صفحة الويب أو التطبيق عبر مكتبة مشغل صغيرة. وهو أخف بكثير من GIF ويبقى حاداً بأي حجم. وبعض المكتبات توفر أيضاً نسخة dotLottie وهي حزمة مضغوطة.
اختيار صيغة 3D
تأتي رسومات 3D عادة بصيغة PNG بخلفية شفافة، وأحياناً بزوايا أو ألوان إضافية. وهي أثقل من الأيقونات، فاضغطها قبل استخدامها في صفحة ويب.
طريقة استخدام أداة تحميل IconScout
- ابحث في IconScout. استخدم فلتر النوع أولاً: أيقونات أو 3D أو Lottie أو رسومات، ثم أضف كلمة مثل payment أو shopping cart أو success.
- افتح صفحة العنصر وراجع النمط واسم الحزمة والصيغ المتاحة.
- انسخ الرابط من شريط العنوان.
- افتح أداة تحميل IconScout، الصق الرابط وأرسل.
- نزّل الملف وفك ضغطه إذا وصل كحزمة.
- جرّبه في تصميمك قبل تحميل المزيد. أيقونة واحدة بالنمط الصحيح أفضل من عشرين لا تتوافق.
وإذا أردت استكشاف المكتبة بحرية فهناك أيضاً وصول IconScout عبر الحساب يُفتح بالإضافة أو المتصفح الآمن أو النسخة السحابية.
كيف تحافظ على اتساق مجموعة الأيقونات؟
الخطأ الذي يجعل الواجهات تبدو هاوية هو خلط الأنماط. اتبع هذه القواعد.
- عائلة واحدة لكل مشروع. اختر حزمة ونزّل منها. وإذا احتجت أيقونة غير موجودة فابحث بنفس وسم النمط وليس بنفس الموضوع فقط.
- نفس سماكة الخط. قارن أيقونات خطية 2 بكسل بمثيلاتها. لا تخلط الخطوط الرفيعة بالسميكة.
- نفس نمط الزوايا. مدورة مع مدورة، وحادة مع حادة.
- نفس حجم الشبكة. اضبط كل الأيقونات على شبكة 24 أو 32 بكسل لتسهيل المحاذاة.
- منطق لوني واحد. استخدم لوناً واحداً أو لوحة من لونين مرتبطة بعلامتك.
كيف تستخدم حركات Lottie بشكل جيد؟
من السهل الإفراط في Lottie. بضع حركات صغيرة تجعل الواجهة حية، وعشر حركات معاً تصنع ضجيجاً.
- استخدم الحركة للشرح: علامة صح بعد الدفع، ومؤشر تحميل أثناء جلب البيانات، وحركة لطيفة في الحالة الفارغة.
- اجعل التكرار قصيراً وهادئاً، وليدعم الحركة المحتوى لا ينافسه.
- احترم المستخدمين الذين يفضلون تقليل الحركة، بتوفير نسخة ثابتة أو إيقاف الحركة لهم.
- اختبر حجم الملف. ملف Lottie البسيط بضعة كيلوبايتات، والمعقد بطبقات كثيرة قد يكون أكبر بكثير.
- طابق ألوان الحركة مع علامتك قبل النشر.
وإذا كنت تعمل على الحركة في الفيديو، فدليلنا عن قوالب Motion Array يعرض أسلوباً آخر لأصول الحركة.
استخدام رسومات 3D في تصاميم حقيقية
الرسوم المجسمة تلفت الانتباه لكنها قد تبدو عامة إذا استُخدمت زينة فقط. استخدمها حيث تخدم الرسالة: قسم رئيسي بعنصر واحد قوي، أو بطاقة ميزة بمفهوم معروف، أو شريحة غلاف في عرض تقديمي.
حافظ على ظل ناعم واتجاه ضوء ثابت ولوحة ألوان محدودة. وعندما تحتوي صفحتك على صور فوتوغرافية فلا تضف 3D فوقها. اختر لغة بصرية واحدة لكل صفحة.
الرخصة والإشارة للمصدر
لكل عنصر في IconScout شروط رخصة تعتمد على نوع الرخصة وأحياناً على المصمم. بعض العناصر تتطلب الإشارة للمصدر، وبعض الاستخدامات، مثل بيع العنصر نفسه أو بناء مكتبة منافسة، غير مسموحة.
راجع الرخصة في صفحة العنصر قبل النشر، واحتفظ باسم العنصر أو الحزمة مع ملفات مشروعك. ولا تعد توزيع الملفات المحملة على أنها حزمة أيقونات من إنتاجك.
يمكنك قراءة المزيد عن الشروط الشائعة في شرح رخص ملفات الستوك.
أمثلة عملية
صفحة أسعار: أيقونات خطية لنقاط المزايا، ورسم 3D واحد للقسم الرئيسي، وعلامة صح Lottie صغيرة لحالة التأكيد.
عرض استثماري: أيقونات PNG من حزمة واحدة في كل الشرائح، وعنصر 3D على الغلاف. لا حاجة للحركة، فاستغنِ عن Lottie.
شاشات ترحيب في تطبيق: ثلاثة ملفات Lottie، واحد لكل شاشة، بنفس الألوان ونفس سرعة الحركة.
دور ZTOOLZ: توفر ZTOOLZ وصولاً مشتركاً إلى IconScout عبر حسابات تملكها المنصة، إما كصفحة تحميل تلصق فيها الرابط، أو كوصول بالحساب يُفتح بالإضافة أو المتصفح الآمن أو النسخة السحابية. هذا ليس اشتراكاً شخصياً، وعليك مراجعة رخصة كل عنصر لمشروعك. افتح أداة تحميل IconScout لمعرفة السعر الحالي، أو أضفها لباقة مخصصة بزر + من المتجر.
أسئلة شائعة
هل أستطيع تحميل حركات Lottie كملفات JSON؟
نعم، عناصر Lottie تأتي بصيغة JSON، وأحياناً بصيغة dotLottie المضغوطة أيضاً. تشغلها بمكتبة مشغل Lottie في صفحة ويب أو تطبيق.
هل أستخدم SVG أم PNG للأيقونات؟
استخدم SVG عندما ستغيّر حجم الأيقونة أو لونها، كما في المواقع والتطبيقات. واستخدم PNG للوضع السريع في الشرائح والمستندات والمنشورات حيث تحتاج صورة فقط.
هل أغير ألوان الأيقونة المحملة؟
مع SVG نعم، في أي محرر فيكتور أو بالكود. أما PNG فتغيير الألوان فيه محدود. وألوان Lottie يمكن تغييرها بأدوات تحرير Lottie.
هل أحتاج إلى ذكر المصدر؟
يعتمد على رخصة العنصر. راجع صفحة العنصر لمعرفة شروط الإشارة للمصدر، واحتفظ باسم الحزمة لتذكرها عند الحاجة.
هل رسومات 3D مناسبة للطباعة؟
يمكن ذلك إذا حملت نسخة عالية الدقة. قارن أبعاد البكسل بمقاس الطباعة، واقرأ دليلنا عن ملفات الطباعة والويب قبل إرسالها للمطبعة.
