إنشاء شعار: رمز ونص وطقم أيقونات

لأن الشعار يفشل هناك بالذات. على الشاشة يُركَّب كبيرًا، لكنه يعمل صغيرًا: 16 بكسل في لسان المتصفح، وأيقونة على الهاتف، ودائرة الأفاتار، وطبعة على علبة. الرمز ذو الخطوط الرفيعة مع عبارة من خمس كلمات يتحول عند هذه المقاسات إلى بقعة رمادية، ومعرفة ذلك الآن أفضل من معرفته بعد طباعة الكمية. وفي الصف نفسه يقف إصدار الحبر الواحد ومحاكاة عمى الألوان: قد يكون التباين مقبولًا ومع ذلك يذوب الأحمر فوق الأخضر عند رجل من كل اثني عشر.

نعم، وهذه هي الإجابة لمن يقول «لديّ رمز بالفعل». يُفكَّك ملف SVG إلى منحنيات ويصير رمزًا كرموزنا تمامًا: فإن كان بلون واحد تغيّر لونه مع الشعار، وإن كان متعدد الألوان احتفظ بألوانه. أما الصورة العادية — PNG أو JPG أو WebP أو مسح ضوئي لرسم يدوي — فتُتتبَّع على طول مخططها وتتحول إلى متجه: بعدها تتكبّر بلا فقد، وتأخذ لون اللوحة، وتذهب إلى ملف SVG منحنياتٍ لا نقاطًا. تُضبط دقة التتبّع بمنزلق، وإن كان الرسم فاتحًا على خلفية داكنة فزر «عكس» يساعد. وحين يتعذّر التتبّع — في صورة فوتوغرافية مثلًا — تُدرج الصورة كما هي ويُقال ذلك صراحةً تحت المعاينة: وإلا صار وعد «متجه حقيقي» غير صادق.

بأنه متجه فعلًا وقائم بذاته. من الحيل الشائعة وضع صورة PNG داخل ملف SVG: يُفتح الملف لكنه يتشوّش عند التكبير. والحيلة الثانية كتابة النص بوسم text: يبدو صحيحًا على حاسوبك، وعند المطبعة أو المصمم يحل محله خط النظام فيغيّر الشعار شكله بصمت. هنا الحروف محوّلة إلى منحنيات، فلا يعتمد الملف على شيء ويُحرَّر في أي برنامج متجهات. ومن المفيد أن تعرف أن عدة أدوات معروفة لا تقدّم المتجهات أصلًا: Adobe Express لا يصدّر SVG في أي باقة، وSquarespace وأداة Shopify تعطيان PNG فقط.

هي أربع طرق مختلفة للفشل، ولكلٍّ رقمها. «التباين» نسبة سطوع الرمز إلى الخلفية وفق صيغة WCAG: كلما زاد كان الشعار أوضح؛ ودون الثلاثة يتحول البيان إلى تحذير، لأن رمزًا رماديًا فاتحًا على أبيض يبدو جميلًا في التصميم ويختفي على بطاقة العمل. و«عمى الألوان» هو التباين نفسه محسوبًا بعد محاكاة أكثر اضطرابات رؤية الألوان شيوعًا: قد يعطي الأحمر فوق الأخضر رقمًا أول مقبولًا ثم يذوب في الرقم الثاني. و«على داكن» يقيس الرمز أمام واجهة داكنة، وهناك يختفي النص شبه الأسود. و«عند 16 بكسل» ينبّه إلى أن العبارة لن تُقرأ بهذا الحجم: مكانها الإصدار الكبير لا الفافيكون.

فافيكون 16 و32 و48 بكسل للسان المتصفح، وملف favicon.ico مجمَّع منها للمتصفحات القديمة واختصارات ويندوز، وapple-touch-icon 180 لشاشة الآيفون، وأيقونتا 192 و512 لملف البيان، وأيقونة قابلة للقص 512 بهامش (يقصّها النظام بنفسه وفق شكل الأيقونات في أندرويد)، وfavicon.svg، وملف site.webmanifest جاهز، وملف head.html فيه أسطر الربط. تُوضع الملفات في جذر الموقع وتُلصق أسطر head.html في قسم head من الصفحة. وقد أُزيلت الشفافية عمدًا من apple-touch-icon ومن الأيقونة القابلة للقص: فنظام iOS يضع الأيقونة الشفافة على أسود فتخرج الزوايا سوداء.

الرموز مرسومة لهذه الأداة ولم تُؤخذ من مكتبة أيقونات عامة. والفارق ليس في الشبه وحده. أداة Squarespace تأخذ رموزها من مكتبة طرف ثالث، وفي دليلها نفسه مكتوب أنه قبل نشر الشعار ينبغي قراءة ترخيص تلك الأيقونة بعينها؛ وجزء من عناصر Adobe Express المدمجة يخضع لترخيص يمنع صراحةً تصديرها ملفًا مستقلًا — والشعار هو بالضبط ملف مستقل. أما رموزنا فلا توجد معها هذه الفقرة. والأشكال هنا بسيطة وهندسية عن قصد: هذه هي التي تُقرأ عند 16 بكسل، وهو ما لا تستطيعه أي أيقونة مفصّلة. وإن أردت ما هو أخصّ بك — ارفع رسمًا أو استعمل مونوغرامًا من الأحرف الأولى.

نعم. فإن كان الخط الزخرفي المختار لا يحتوي الحروف المطلوبة — مثلًا Bebas Neue ليس فيه كيريلية ولا هانغول — كُتب النص بخط يحتويها، وذُكر تحت المعاينة أي خط استُعمل. واستبدال الخط بصمت أسوأ: كنت سترى شعارًا ليس شعارك دون أن تعلم. والكتابة العربية تُركَّب باتجاه صحيح ووصل سليم بين الحروف.