لماذا تبدأ من شعار فيكتور؟
كل ملف تنشره العلامة التجارية، من أيقونة تبويب المتصفح بحجم 16 بكسل إلى صورة متجر التطبيقات بحجم 1024 بكسل، يجب أن يأتي من مصدر واحد. إذا كان هذا المصدر ملف PNG، فكل تصدير هو تغيير لحجم البكسلات، فتصبح الأحجام الصغيرة ضبابية وتبقى الكبيرة باهتة. أما إذا كان ملف SVG مكوّنًا من مسارات، فكل حجم يُرسم من جديد. تُبقي الخطوات التالية ملف SVG واحدًا في المركز وتصنع منه كل شيء آخر.
أحد شعاراتنا النموذجية، ثم أيقونة iOS وأيقونة Android التكيفية وfavicon التي صنعتها أدوات التصدير لدينا من ملف SVG الخاص به. يظهر favicon مكبّرًا؛ فعند 32 بكسل كل بكسل له قيمته.
الخطوة 1: صِف الشعار واختر فكرة
افتح مولد الشعارات بالذكاء الاصطناعي واكتب ما يجب أن يُظهره الشعار: «بومة مبنية من دوائر ومثلثات، لتطبيق دراسة، نيلي وكهرماني». أضف اسم العلامة التجارية إذا كان يجب أن يكتبه الشعار. واختر شريحة نمط إذا كنت تعرف نوع الشعار الذي تريده؛ ويشرح دليل أنماط الشعارات كل نمط. كل إرسال يصنع أربع أفكار، ويُطبع سعره على الزر أولًا.
الخطوة 2: حسّن فكرة واحدة بالكلمات
اختر الفكرة الأقرب إلى ما تريده واكتب ما يجب تغييره: «اجعل حرف R أعرض»، «ريش أقل»، «حرّك الشمس فوق القمة». التحسين يُبقي بقية الشعار كما هي. والأفضل تغيير أو تغييران دقيقان في كل تحسين بدلًا من قائمة من عشرة.
الخطوة 3: حوّله إلى فيكتور
اختر تحويل إلى فيكتور على الشعار الذي اخترته. يُتتبّع إلى ملف SVG يكون فيه لكل لون مساراته الخاصة، ويمكنك مقارنته بالأصل قبل استخدامه. افتحه في محرر SVG لإعادة تلوين جزء، أو حذف شكل شارد، أو تغيير المسافات في الاسم.
انظر إلى ثلاثة أشياء قبل أن تتابع. هل تبقى العلامة مفهومة بحجم صغير؟ هل تتلامس أشكال أو حروف لا يجب أن تتلامس؟ وهل الألوان هي بالضبط ما تريده؟ إصلاحها في SVG الآن يُصلح كل ملف يُصنع منه.
الخطوة 4: اصنع أيقونات التطبيق
يصنع مولد أيقونات التطبيقات من ملف SVG:
- Android: صور PNG لكل كثافة شاشة من 48 إلى 192 بكسل، وصورة لمتجر Play بحجم 512 بكسل، وملف XML للأيقونة التكيفية بطبقة أمامية داخل المنطقة الآمنة وطبقة أحادية اللون للأيقونات المتوافقة مع السمة؛
- iOS: مجلد
AppIcon.appiconsetبصورة واحدة معتمة بحجم 1024 بكسل لـXcode.
اختر لون خلفية والهامش حول العلامة. العلامة المحاطة بمساحة شفافة تمنح أيقونة Android أحادية اللون شكلها الحقيقي. ويشرح دليل أيقونات تطبيقات Android وiOS من صورة واحدة خطوات الاستيراد وما يجب التحقق منه على الجهاز.
الخطوة 5: اصنع favicon وأيقونات PWA
يصنع مولد favicon ملف favicon.ico (16 و32 و48 بكسل في ملف واحد)، وملف favicon.svg عندما يكون التصميم مسارات فيكتور نظيفة، وصور PNG بحجم 16 و32 بكسل، وأيقونة Apple touch بحجم 180 بكسل، وأيقونات بحجم 192 و512 بكسل مع نسخ maskable، وملف site.webmanifest، وكود HTML للصقه في قسم <head> من صفحتك. أيها تستخدم المتصفحات، ولماذا لا يزال favicon يحتاج إلى ICO، مشروح في favicon بصيغة SVG أم PNG أم ICO؟؛ والمنطقة الآمنة لأيقونات maskable في أيقونات PWA من نوع maskable.
أو خذ كل شيء دفعة واحدة: حزمة الهوية
تشغّل حزمة الهوية أدوات التصدير نفسها على ملف SVG نفسه بمجموعة واحدة من إعدادات العلامة التجارية (الاسم، والاسم المختصر، ولون السمة، ولون الخلفية، والهامش) وتضع النتائج في ملف ZIP واحد:
| المجلد | المحتوى |
|---|---|
favicon/ |
حزمة favicon وPWA |
app-icons/ |
مجموعات أيقونات تطبيقات Android وiOS |
ios/ |
مجموعة صور Xcode لاستخدام الشعار داخل التطبيق |
android/ |
ملف VectorDrawable لاستخدام الشعار داخل التطبيق |
png/ |
صور PNG شفافة، ضلعها الأطول 256 و512 و1024 و2048 بكسل |
svg/ |
ملف SVG المحسّن والأصل بدقة كاملة |
يضم كل مجلد بالضبط ما تصنعه الأداة المنفصلة من المدخل نفسه، لذا يمكنك البدء بالحزمة ثم إعادة إنشاء جزء واحد منفردًا لاحقًا. ويظهر سعر الحزمة قبل تنزيلها.
قبل الإطلاق
ابحث في سجل العلامات التجارية لكل بلد تبيع فيه عن اسمك وعن العلامات المشابهة. الشعار المُولَّد جديد، لكن لا شيء يقارنه بالعلامات المسجلة. احتفظ بملف SVG كملفك الرئيسي، وأضف منه الأحجام الجديدة، ولا تضفها أبدًا من PNG.