الشعار الاحترافي يجب أن يعمل في سياقات شديدة الاختلاف: صغيرًا في تبويب المتصفح كأيقونة موقع، ومتوسطًا في ترويسة الموقع، وكبيرًا على لافتة واجهة المحل، ومربّعًا في صورة الملف على Instagram، وأفقيًا في بطاقة العمل. ولكل سياق أبعاده وصيغه، واستخدام المقاس الخاطئ يعطي شعارًا ضبابيًا أو مقصوصًا أو مشوّه النِّسب.
والخبر الجيد أنك لست مضطرًا إلى تصميم نسخة جديدة من الصفر لكل سياق. فبالملف الصحيح وبالصيغة الصحيحة، تتولّى أداة تغيير حجم الصورة من ImageTools ضبط الأبعاد لأي استخدام في ثوانٍ.
الصيغ التي يجب أن تحتفظ بها من شعارك
قبل الحديث عن مقاسات بعينها، اعرف الصيغ التي يلزمك الاحتفاظ بها. فالشعار الموثّق جيدًا ينبغي أن تتوفر منه هذه النسخ على الأقل:
- SVG (متجهية): الملف الأصل. يقبل التكبير إلى أي مقاس، من أيقونة موقع بحجم 16 بكسل إلى لوحة إعلانية بطول 10 أمتار، دون أي خسارة في الجودة. وهو أساسي في المواقع والعروض التقديمية وعند الإرسال إلى المطابع.
- PNG بخلفية شفافة (دقة عالية): للاستخدام الرقمي حيث لا تُقبل صيغة SVG. احفظه بمقاس 1000×1000 بكسل على الأقل لتبقى لديك مرونة في تغيير الحجم.
- PNG بخلفية بيضاء: للسياقات التي لا تُرغب فيها الشفافية أو لا تُدعم: نماذج التسجيل في المنصات، ومستندات Word، والبريد الإلكتروني.
- نسخة داكنة بصيغة PNG أو JPG (عناصر بيضاء): للاستخدام فوق خلفيات ملوّنة أو داكنة. فالشعار بالأزرق الغامق يختفي تمامًا فوق خلفية سوداء.
- أيقونة الموقع (.ico + PNG): نسخ مخصّصة لتبويب المتصفح. استخدم مولّد أيقونة الموقع من ImageTools لتوليد كل المقاسات المطلوبة انطلاقًا من الشعار.
☁️ احفظ كل شيء في السحابة. احتفظ بهذه النسخ في Google Drive أو Dropbox بحيث يسهل الوصول إليها. ستحتاجها عند التعاقد مع مصمّم مستقل، أو تحديث حساب على مواقع التواصل، أو إرسال مواد إلى مطبعة، وغالبًا على عجل.
جدول مرجعي — أبعاد الشعار حسب السياق
| السياق | الأبعاد الموصى بها | الصيغة المثالية | ملاحظة |
|---|---|---|---|
| ترويسة الموقع (سطح المكتب) | عرض 200–400 بكسل | SVG أو PNG شفاف | ارتفاع متناسب مع التخطيط |
| أيقونة الموقع (تبويب المتصفح) | 16×16 و32×32 و48×48 بكسل | .ico + PNG | استخدم مولّد أيقونة الموقع |
| Apple Touch Icon (نظام iOS) | 180×180 بكسل | PNG بلا شفافية | يُفضَّل خلفية صمّاء |
| أيقونة تطبيق Android (PWA) | 192×192 و512×512 بكسل | PNG | مطلوبة في ملف webmanifest |
| Instagram — صورة الملف الشخصي | 320×320 بكسل (تُعرض بمقاس 110 بكسل) | PNG أو JPG | ستُقتصّ على شكل دائرة |
| Facebook — صورة الملف الشخصي | 170×170 بكسل | PNG أو JPG | تُعرض دائرية على سطح المكتب |
| Facebook — صورة الغلاف | 820×312 بكسل | JPG أو PNG | الشعار عنصر داخل الصورة، لا الصورة كلها |
| LinkedIn — شعار الشركة | 300×300 بكسل | PNG أو JPG | الحد الأدنى 300×300، والأقصى 4 ميغابايت |
| LinkedIn — غلاف صفحة الشركة | 1128×191 بكسل | PNG أو JPG | الشعار عنصر داخل الغلاف |
| YouTube — أيقونة القناة | 800×800 بكسل | PNG أو JPG | تُعرض دائرية، وبمقاس 98 بكسل على التلفاز |
| YouTube — لافتة القناة | 2560×1440 بكسل | JPG أو PNG | الشعار عنصر داخلها، والمنطقة الآمنة: 1546×423 بكسل |
| WhatsApp Business — صورة الملف | 640×640 بكسل | PNG أو JPG | تُعرض دائرية |
| TikTok — صورة الملف الشخصي | 200×200 بكسل (كحد أدنى) | JPG أو PNG | تُعرض دائرية |
| Twitter / X — صورة الملف الشخصي | 400×400 بكسل | PNG أو JPG | تُعرض دائرية، وبمقاس 48 بكسل في الخلاصة |
| البريد الإلكتروني (التوقيع) | عرض 200–300 بكسل | PNG بخلفية بيضاء أو JPG | تجنّب الشفافية مع برامج البريد القديمة |
| بطاقة العمل (نسخة رقمية) | عرض 400–600 بكسل | PNG شفاف | لتركيبه ضمن تخطيط البطاقة |
| العروض التقديمية (الشرائح) | عرض 200–400 بكسل | PNG شفاف أو SVG | متناسب مع الشريحة (16:9) |
الشعار في المواقع
الترويسة
في ترويسة الموقع يتراوح عرض الشعار عادةً بين 150 و400 بكسل، بارتفاع متناسب. والعرض الدقيق يتوقف على التخطيط: ترويسة مضغوطة قد تكتفي بـ150 بكسل، بينما يستوعب موقع فسيح 300–400 بكسل. والأهم أن يظهر الشعار حادًّا على شاشات Retina: صدّره بصيغة PNG بضِعف عرض العرض (أو استخدم SVG الذي يحلّ ذلك تلقائيًا)، ودع CSS يتولّى مقاس العرض.
استخدم دائمًا SVG أو PNG بخلفية شفافة في الترويسة؛ فخلفية الترويسة تتغيّر بحسب التصميم وحركة التمرير، والشعار ذو الخلفية البيضاء سيخلّف مستطيلًا أبيض ظاهرًا فوق الخلفيات الملوّنة.
أيقونة الموقع (Favicon)
أيقونة الموقع هي الأيقونة التي تظهر في تبويب المتصفح وفي المفضّلة وعلى الشاشة الرئيسية للأجهزة المحمولة. والأيقونة الناجحة نسخة مبسّطة من الشعار، غالبًا الرمز أو الحرف الأول فقط دون اسم الشركة كاملًا، لأن المساحة أضيق من أن تحتمل نصًا مقروءًا.
والمقاسات المطلوبة هي: 16×16 و32×32 بكسل لمتصفحات سطح المكتب، و180×180 بكسل لنظام iOS (Apple Touch Icon)، و192×192 و512×512 بكسل لنظام Android وتطبيقات الويب التقدمية. استخدم مولّد أيقونة الموقع من ImageTools لتوليد كل هذه المقاسات تلقائيًا انطلاقًا من الشعار.
ولّد كل مقاسات أيقونة الموقع دفعة واحدة
من الشعار إلى أيقونة جاهزة للمتصفحات وiOS وAndroid وتطبيقات الويب التقدمية: كل المقاسات المطلوبة في ثوانٍ.
أنشئ أيقونة الموقع مجانًاالشعار في مواقع التواصل
لماذا يجب أن ينجح الشعار في الشكلين المربّع والدائري
تعرض مواقع التواصل كلها تقريبًا صورة الملف الشخصي على شكل دائرة، وهو ما يمثّل تحديًا خاصًا للشعارات الأفقية (الاسم والرمز جنبًا إلى جنب): ففي المساحة الدائرية إما يصغر الشعار حتى يتعذّر قراءته، وإما تُقتصّ أطرافه عند الحواف.
والحل الأنجع أن تكون لديك نسخة «أيقونية» من الشعار، أي الرمز أو أحرف العلامة الأولى فقط، موسّطة داخل مساحة مربّعة، مخصّصة لصورة الملف الشخصي على مواقع التواصل. تحافظ هذه النسخة على التعرّف البصري دون مشكلات القص.
يقبل Instagram صور ملف شخصي حتى 320×320 بكسل، لكنه يعرضها بمقاس 110 بكسل في الملف و32 بكسل في الخلاصة، ويجب أن يكون الملف مربّعًا. وإذا كان شعارك أفقيًا فضعه موسّطًا داخل مساحة مربّعة بهوامش كافية حتى لا يقتصّ القالب الدائري شيئًا منه.
تُعرض صورة ملف الصفحة على Facebook بمقاس 170×170 بكسل على سطح المكتب و128×128 بكسل على الهاتف، ومقصوصة دائريًا دائمًا. أما صورة الغلاف فمقاسها 820×312 بكسل، ويظهر الشعار فيها عادةً كعنصر ضمن تصميم الغلاف لا كصورة تشغله بالكامل.
في صفحات الشركات يعرض LinkedIn الشعار بمقاس 300×300 بكسل (مربّع) داخل الصفحة، وبمقاسات أصغر في القوائم. وهو من السياقات التي تؤثر فيها جودة الصورة أشدّ التأثير في الانطباع المهني، فاستخدم ملف PNG عالي الجودة دون ضغط مفرط.
YouTube
تُعرض أيقونة القناة على YouTube بمقاسات شديدة التفاوت بحسب السياق: 98 بكسل على التلفاز الذكي، و32 بكسل في خلاصة سطح المكتب، و88 بكسل في الملف على الهاتف. لذا يجب ألا يقل الملف عن 800×800 بكسل ليغطي هذه المقاسات كلها بوضوح. أما لافتة القناة فأبعادها 2560×1440 بكسل، لكن «المنطقة الآمنة»، أي الجزء الظاهر على كل الأجهزة، لا تتعدى 1546×423 بكسل في الوسط، ويجب أن يقع الشعار داخلها.
WhatsApp Business
تُعرض صورة ملف WhatsApp Business على شكل دائرة، بمقاس نحو 50 بكسل داخل المحادثات. استخدم ملفًا بمقاس 640×640 بكسل لضمان الوضوح في المعاينة بملء الشاشة. وكما في بقية مواقع التواصل، لا تنجح الشعارات الأفقية هنا، فاستعمل النسخة الأيقونية أو رمز العلامة.
📐 نصيحة للشعارات الأفقية على مواقع التواصل: أنشئ نسخة مربّعة بإضافة فراغ أبيض (أو بلون خلفية العلامة) على الجانبين. والنسبة المثالية أن يشغل الشعار ما بين 60% و75% من عرض المربّع، بهوامش متساوية من الجهات الأربع. يتفادى ذلك القصّ الدائري ويضمن ظهور الشعار كاملًا.
الشعار في الطباعة
للطباعة منطق مختلف تمامًا عن الرقمي. فالمهم ليس الدقة بالبكسل، بل العلاقة بين البكسلات والمقاس الفعلي المطبوع، وتُقاس بوحدة DPI (نقطة في البوصة). والمعيار السائد في صناعة الطباعة هو 300 DPI.
كيف تحسب البكسلات اللازمة للطباعة
المعادلة: عدد البكسلات = المقاس بالسنتيمتر ÷ 2.54 × DPI
أمثلة عملية:
| المادة المطبوعة | المقاس المعتاد للشعار | البكسلات اللازمة (عند 300 DPI) |
|---|---|---|
| بطاقة العمل (الشعار) | 3 × 1.5 سم | 354 × 177 بكسل |
| الورق الرسمي (الترويسة) | 5 × 2 سم | 591 × 236 بكسل |
| عبوة صغيرة | 4 × 4 سم | 472 × 472 بكسل |
| قميص (منطقة الصدر) | 10 × 5 سم | 1181 × 591 بكسل |
| كوب (الشعار على الجانب) | 8 × 4 سم | 945 × 472 بكسل |
| كيس مطبوع | 15 × 8 سم | 1772 × 945 بكسل |
| لافتة أو رول أب (الشعار في الأعلى) | 20 × 10 سم | 2362 × 1181 بكسل |
ولتتجنّب الحساب في كل مرة، أعملُ الحلول هو استخدام SVG؛ فالصيغة المتجهية تتكيّف بلا حدود وتُطبع بأي مقاس دون خسارة في الجودة. وأي مطبعة احترافية تقبل SVG (أو ما يعادله من PDF متجهي مولّد منه في Illustrator أو Inkscape).
الصيغ التي تقبلها المطابع
معظم المطابع الاحترافية تقبل هذه الصيغ وتفضّلها:
- PDF متجهي: معيار الصناعة، ويُولَّد من Illustrator أو Corel أو Inkscape والشعار بصيغة متجهية.
- AI (ملف Adobe Illustrator): الملف المتجهي الأصلي للبرنامج.
- EPS: صيغة متجهية أقدم، لكنها واسعة التوافق.
- SVG: تقبلها معظم المطابع الحديثة.
- PNG بدقة عالية: يُقبل عند غياب الملف المتجهي، شرط أن تكفي دقته لمقاس الطباعة.
🖨️ للتطريز والقص بالليزر: تتطلّب هاتان العمليتان ملفات متجهية بمسارات نظيفة. والشعارات التي تحمل تدرّجات أو ظلالًا أو مؤثرات فوتوغرافية تحتاج إلى تبسيط قبل إرسالها إلى الإنتاج. ويمكن لمصمّم أن ينفّذ هذه «المتجهة» انطلاقًا من ملف PNG للشعار إذا لم يكن الملف المتجهي الأصلي متوفرًا.
تغيير حجم الشعار لكل استخدام
انطلاقًا من ملف الشعار الأساسي بصيغة PNG عالية الدقة (1000×1000 بكسل على الأقل) أو SVG، استخدم أداة تغيير حجم الصورة من ImageTools لضبط الأبعاد وفق كل منصة. تتيح لك الأداة تحديد العرض والارتفاع بالبكسل بدقة، مع الحفاظ على النسبة الأصلية أو تعديلها.
المسار الموصى به لتجهيز نسخ الشعار:
- ابدأ دائمًا من أعلى ملف دقةً متوفر لديك: SVG أو PNG يتجاوز 1000 بكسل.
- غيّر الحجم إلى أبعاد الوجهة باستخدام أداة تغيير الحجم.
- ولمواقع التواصل، اضغط الملف قليلًا بواسطة أداة ضغط الصور مع إبقاء الجودة عند 85–90% حتى لا يفقد الشعار حدّته.
- وللطباعة، أرسل ملف SVG مباشرة أو حوّله إلى PDF متجهي.
غيّر حجم شعارك لأي استخدام
اضبط أبعاد الشعار بالبكسل بدقة، دون أي تشويه للنسبة.
غيّر حجم الشعار مجانًاأخطاء شائعة عند استخدام الشعار بمقاسات مختلفة
استخدام الملف نفسه في كل السياقات
شعار بعرض 2000 بكسل في توقيع البريد سيتحمّل ببطء ويظهر ضخمًا، وشعار بعرض 100 بكسل في طباعة A4 سيظهر مبكسلًا. فلكل سياق أبعاده المثالية؛ اتخذ هذا الدليل مرجعًا وغيّر الحجم قبل الاستخدام.
غياب نسخة للخلفيات الداكنة
تُصمَّم شعارات كثيرة بألوان داكنة فوق خلفية فاتحة. وفي المنشورات ذات الخلفية السوداء أو الملوّنة، وهي شائعة في ستوري Instagram وأغلفة LinkedIn، يختفي الشعار تمامًا. لذا صمّم دائمًا نسخة تكون عناصرها الرئيسية بيضاء أو بلون فاتح واحتفظ بها.
الحفظ لمواقع التواصل بملف PNG ضخم
ملف PNG بمقاس 2000×2000 بكسل لصورة الملف على Instagram لا يحسّن جودة العرض؛ فالمنصة تضغط كل ما يتجاوز المقاس المطلوب. أرسل الملف بالأبعاد المثالية (320×320 بكسل) وبضغط عند جودة 90% لتتفادى الضغط المزدوج من المنصة.
استخدام JPG لشعار بخلفية شفافة
صيغة JPG لا تدعم الشفافية؛ فعند حفظ شعار PNG شفاف بصيغة JPG تُستبدل الخلفية الشفافة بأخرى بيضاء. وإذا كان الشعار يحتاج إلى خلفية شفافة (لاستخدامه فوق ألوان خلفيات مختلفة)، فاستخدم دائمًا PNG أو WebP.
تكبير ملف PNG صغير بدل استخدام SVG
إذا كان الشعار متوفرًا بصيغة SVG فاجعله دائمًا الأساس عند تغيير الحجم، ولا تكبّر ملف PNG صغيرًا أبدًا. فتكبير PNG يخلّف بكسلة لا تُصلَح إلا بالعودة إلى الملف المتجهي الأصلي.
لا تملك شعارًا بعد؟ أنشئه الآن
إن لم يكن لديك شعار بعد، أو أردت نسخة احترافية منه، يوفّر ImageTools أداتين لذلك: أداة إنشاء الشعار، حيث تختار الرمز والألوان والخط بتحكّم كامل، و أداة إنشاء الشعار بالذكاء الاصطناعي، حيث تصف علامتك فيولّد الذكاء الاصطناعي خيارات متجهية جاهزة للتنزيل. وكلتاهما تصدّر بصيغتَي SVG وPNG، وهما الصيغتان اللازمتان لكل الاستخدامات الواردة في هذا الدليل.
أنشئ شعار علامتك الآن
النتيجة بصيغتَي SVG وPNG بخلفية شفافة، جاهزة للموقع ومواقع التواصل والطباعة.
الأسئلة الشائعة
prefers-color-scheme أو وسم HTML <picture> مع media للتبديل تلقائيًا بين النسخة الفاتحة والداكنة من الشعار بحسب تفضيل نظام المستخدم، دون أي تدخّل من الزائر.