قم بتمرير أي حساب إخباري أو موجز للعلامة التجارية وتشترك معظم المنشورات في الشكل: صورة، وعنوان غامق، وشريط تمييز رفيع، وتاريخ، ومقبض في الزاوية. هذه بطاقات صور. تبدو مصممة لأنها مبنية على تخطيط ثابت حيث تتغير الكلمات والصورة فقط، ولهذا السبب أيضًا يمكن للفريق نشر العشرات أسبوعيًا دون أن يبدو كل منها مختلفًا.
يغطي هذا الدليل ما يجعل البطاقة قابلة للقراءة بحجم الخلاصة، وكيف تتقلص أحجام النص على الهاتف، والألوان التي تمرر إرشادات التباين، ولماذا يجب تصدير البطاقات كـ PNG، وكيفية تكييف البطاقة المربعة مع الأنظمة الأساسية الأخرى، وأين تكون حواف الخصوصية. مولد بطاقة الصور يتم استخدامه للأجزاء خطوة بخطوة، وكل إعداد موضح أدناه هو الإعداد الذي توفره الأداة.
ليرة تركية؛DR: بطاقة الصور عبارة عن رسم اجتماعي مصنوع من قالب: صورتك وعنوانك الرئيسي ونص داعم موضوع في تخطيط ثابت. يحتوي مولد بطاقة الصور على ثمانية قوالب (الجريدة الكلاسيكية، والجريئة الحديثة، والأخبار العاجلة، وبطاقة الاقتباس، والحد الأدنى، وبطاقة الميزات، وأخبار التدرج، والاقتباس الرأسي)، و50 خطًا من Google، ولون لهجة وخلفية ونص. أدوات التقاط الألوان، وعناصر تحكم في مقياس الصورة وموضعها، وشعار اختياري. يتم تصدير كل بطاقة على شكل 1080 x 1080 PNG، معروضة في متصفحك. تتم قراءة صورتك محليًا ولا يتم تحميلها، على الرغم من تحميل الخطوط من خطوط Google. إنه مجاني، بدون تسجيل.
ما هي بطاقة الصور؟
بطاقة الصور هي صورة مربعة أو مستطيلة على وسائل التواصل الاجتماعي تجمع بين صورة فوتوغرافية ونص متراكب أو مجاور، موضوعة من قالب قابل لإعادة الاستخدام. تستخدمها منافذ الأخبار لمشاركة العناوين الرئيسية، وتستخدمها العلامات التجارية للإعلانات، ويستخدمها المبدعون في عروض الأسعار. يعمل القالب على إصلاح الطباعة والمسافات والمواضع؛ يقوم المؤلف بتوفير المحتوى.
هذا الانقسام هو بيت القصيد. يقوم القالب بتسوية قرارات التصميم مرة واحدة: مدى حجم العنوان بالنسبة للصورة، وأين يذهب التاريخ، ومقدار المساحة المحيطة بالنص. لا يمكن لتغيير الكلمات أن يكسر تلك العلاقات، لذا فإن خلاصة البطاقات المصنوعة من نفس القالب تُقرأ كمنشور واحد متسق.
ما هو القالب الذي يجب عليك اختياره؟
اختر ما يجب أن تحمله البطاقة. يعرض كل قالب فقط الحقول النصية التي يستخدمها تخطيطه، لذلك تتغير لوحة المحتوى عند التبديل.
| قالب | تخطيط | حقول النص | الأفضل ل |
|---|---|---|---|
| صحيفة كلاسيكية | صورة كبيرة، منطقة النص أدناه | العنوان، العنوان الفرعي، التاريخ، المجال | الأخبار العامة ومنشورات المدونة |
| جريئة الحديثة | الصورة النصف العلوي، العنوان والملخص أدناه، ثابت وحاصل؛ اقرأ المزيد وحاصل؛ زر | العنوان، العنوان الفرعي، التاريخ | إعلانات |
| أخبار عاجلة | شريط رأس أحمر، صورة، عنوان رئيسي، شريط شريط على شكل تمرير | العنوان، العنوان الفرعي، التاريخ | تحديثات حساسة للوقت |
| بطاقة الاقتباس | اقتباس على صورة خلفية داكنة | العنوان (الاقتباس)، العنوان الفرعي (الإسناد)، التاريخ | سحب عروض الأسعار لديك إذن بمشاركتها |
| الحد الأدنى | صورة مؤطرة مع الكثير من المساحة البيضاء | العنوان، العنوان الفرعي، التاريخ | بيانات بسيطة، تواريخ الأحداث |
| بطاقة الميزة | صورة، شعار دائري متداخل، شريط تذييل | العنوان، العنوان الفرعي، التاريخ، المجال | مقالات طويلة |
| أخبار التدرج | صورة كاملة النزيف، تدرج مميز، شريط تذييل | العنوان، الفئة، التاريخ، المجال | قصص تقودها الصور |
| اقتباس عمودي | لوحة الاقتباس على اليسار، الصورة الشخصية على اليمين | المحتوى (الاقتباس)، المؤلف، التعيين، التاريخ، المجال | اقتباسات مع صورة المتحدث |
تحتوي معظم القوالب على سطر تاريخ، والعديد منها يضيف مجالًا أو مقبض؛ يمكن مسح أي حقل. يتم إصلاح بعض التسميات في التخطيط، مثل "؛ الأخبار العاجلة والاقتباس؛ على شريط الأخبار العاجلة و"؛ اقرأ المزيد والاقتباس؛ على Modern Bold. تظهر فتحة الشعار فقط عند إضافة شعار؛ بدون شعار، يخفي القالب منطقة الشعار بدلاً من إظهار إطار فارغ.
ما هو حجم النص الذي يجب أن يكون على البطاقة الاجتماعية؟
أكبر مما تبدو على شاشتك. تم تصميم البطاقة بعرض 1080 بكسل ولكن يتم عرضها في موجز الهاتف بعرض الشاشة تقريبًا، ويبلغ عرض الهاتف النموذجي حوالي 390 بكسل CSS. وهذا يعني أن كل شيء على البطاقة يظهر بحوالي 390/1080 = 36% من حجمها المصمم.
إليك ما يفعله ذلك بالنص بالأحجام التي تستخدمها القوالب
| الحجم على بطاقة 1080 بكسل | حجم تقريبي في تغذية واسعة 390 بكسل | سهولة القراءة |
|---|---|---|
| عنوان 64 بكسل | 23 بكسل | واضح جدا |
| عنوان 48 بكسل | 17 بكسل | واضح |
| 32 px عنوان فرعي أو تذييل | 12 بكسل | قابلة للقراءة |
| نص تفصيلي 24 بكسل | 9 بكسل | صغيرة، تحتاج إلى الاهتمام |
| 20 بيكسل البيانات الوصفية | 7 بكسل | من الصعب قراءتها |
الحساب هو ببساطة الحجم × 390/1080. بالنسبة للعنوان الرئيسي بدقة 48 بكسل، 48 × 0.361 = 17.3 بكسل، يمكن مقارنته بالنص الأساسي المريح على الهاتف. عند 20 بكسل، تكون النتيجة حوالي 7، ولهذا السبب تكون التواريخ والمقابض الموجودة على البطاقات مزخرفة وليست ضرورية. ضع أي شيء يجب على القارئ رؤيته في العنوان الرئيسي، وليس التذييل.
وهذا أيضًا يضع حدًا عمليًا للطول. العنوان الذي يلتف إلى خمسة أسطر عند 48 بكسل يجبر القالب على الضغط على الصورة أو التجاوز. تهدف إلى عنوان رئيسي من حوالي 6 إلى 12 كلمة.
ما هي الألوان التي يجب أن تستخدمها بطاقة الصور؟
اختر الألوان التي تجعل النص قابلاً للقراءة مقابل ما يكمن خلفه. تحدد إرشادات إمكانية الوصول إلى محتوى الويب معيارًا مفيدًا WCAG 2.2 معيار النجاح 1.4.3 يطلب نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير، والذي يحدده WCAG بأنه 18 نقطة على الأقل، أو 14 نقطة غامقة. الصورة الاجتماعية ليست صفحة ويب، ولكن نفس العتبات تصف ما يمكن للأشخاص ذوي الرؤية الضعيفة أو الشاشة المعتمة قراءته.
يمنحك المولد ثلاثة ألوان:
- لهجة أشرطة الألوان والحبوب والتدرجات والأشكال المميزة. يحمل العلامة التجارية.
- خلفية تلوين المناطق التي لا تغطيها الصورة.
- نص تلوين النسخة الرئيسية على القوالب التي تستخدمها؛ تقوم بعض القوالب بتعيين نص أبيض على لوحات اللكنة الخاصة بها.
| مزيج | نسبة التباين | النص العادي (4.5:1) | نص كبير (3:1) |
|---|---|---|---|
قريب من الأسود #111827 على الأبيض #ffffff |
حوالي 17.7:1 | يمر | يمر |
أبيض على اللكنة الحمراء الافتراضية #D9232D |
حوالي 5.0:1 | يمر | يمر |
أبيض على رمادي متوسط #999999 |
حوالي 2.8:1 | يفشل | يفشل |
الأبيض على الأصفر الفاتح #facc15 |
حوالي 1.5:1 | يفشل | يفشل |
أول صفين هما المولد والإعدادات الافتراضية #39؛s. يمكنك التحقق من أي زوج من ألوان علامتك التجارية باستخدام مدقق تباين الألوانو ال دليل تباين الألوان يشرح كيفية حساب النسبة.
النص الذي يتم وضعه مباشرة فوق الصورة ليس له نسبة تباين واحدة، لأن الصورة تختلف. تتعامل القوالب مثل Gradient News مع ذلك بتدرج أسفل النص وظل النص. عند اختيار صورة لتلك القوالب، اختر صورة ذات منطقة أكثر قتامة أو هدوءًا حيث يوجد العنوان الرئيسي.
كيفية عمل بطاقة الصور خطوة بخطوة
- افتح ال صانع بطاقات الصور واختر قالبًا من القائمة المنسدلة للقالب. يتم تحميل نموذج النص الخاص به في حقول المحتوى.
- استبدل النص في كل حقل. اضغط على Enter داخل مربع العنوان أو المحتوى لفرض فاصل أسطر حيث تريد واحدًا.
- أضف صورتك الرئيسية: انقر فوق منطقة التحميل لاختيار ملف، أو الصق عنوان URL للصورة في الحقل الموجود أسفله.
- اضبط الصورة باستخدام شريط تمرير المقياس (0.5x إلى 2.0x) وشرائح تمرير الموضع X وY (كل -200 إلى 200 بكسل) حتى يجلس الموضوع حيث يؤطرها القالب.
- اختياريًا، أضف شعارًا بنفس الطريقة. تناسب صورة الشعار المربع فتحات الشعار الدائرية والمربعة بشكل أفضل.
- افتح القائمة المنسدلة للخط، أو ابحث أو قم بالتصفية حسب الفئة (بدون serif أو serif أو العرض أو الكتابة اليدوية أو المسافة الأحادية)، واختر خطًا.
- اضبط ألوان اللكنة والخلفية والنص باستخدام منتقي الألوان.
- انقر فوق تنزيل PNG. يتم حفظ الملف كـ
photocard-<template>-<timestamp>.pngلذا فإن الصادرات المتكررة لا تحل محل بعضها البعض أبدًا.
يتم حفظ إعداداتك ونصك وصورتك في المتصفح أثناء عملك، لذا فإن إعادة تحميل الصفحة تعيد البطاقة. تقوم إعادة التعيين بمسحها واستعادة القالب الكلاسيكي.
لماذا يتم تنزيل البطاقات كـ PNG؟
لأن البطاقات في الغالب عبارة عن نص كبير ولون مسطح، وهذا المحتوى يضغط بشكل أفضل ويبدو أنظف مثل PNG مقارنة بـ JPEG. يعمل الضغط مع فقدان البيانات JPEG'؛ في كتل 8 x 8 بكسل ويتجاهل التفاصيل الدقيقة، والتي تظهر حول حواف الحروف الحادة على شكل هالات وبقع باهتة، غالبًا ما تسمى الرنين. تقوم PNG بتخزين كل بكسل باستخدام الضغط بدون فقدان المحدد في ملف مواصفات W3C PNG، لذلك يبقى العنوان واضحًا.
| تنسيق | ضغط | نص حاد | مناطق الألوان المسطحة | الصور الفوتوغرافية |
|---|---|---|---|---|
| PNG | بلا خسارة | هش | صغيرة ودقيقة | ملفات كبيرة |
| JPEG | خاسر | هالات حول الحواف | يمكن أن تظهر النطاقات والبقع | ملفات صغيرة |
تقوم معظم الأنظمة الأساسية بإعادة تشفير التحميلات على أي حال. البدء من PNG النظيف يمنح برنامج التشفير الخاص به أفضل إدخال ممكن. إذا كانت PNG التي تحتوي على صورة كبيرة كبيرة جدًا بحيث لا يمكن تحديد حد التحميل، فإن دليل ضغط الصور يغطي كيفية تقليصه.
كيف تستخدم بطاقة مربعة على منصات أخرى؟
يتم تصدير كل قالب بسعر 1080 x 1080، أي مربع 1:1. هذا هو حجم الخلاصة المربعة القياسية على Instagram وFacebook، ويتم عرضه دون الاقتصاص على معظم الخلاصات. المواضع الأخرى تريد أشكالًا مختلفة.
| وجهة | الحجم المطلوب | من 1080 مربع |
|---|---|---|
| خلاصة Instagram أو Facebook | 1080 x 1080 | استخدم كما هو |
| تغذية صورة Instagram | 1080 x 1350 | أضف مساحة أعلى وأسفل باستخدام مادة غير لامعة |
| LinkedIn أو صورة بنمط الارتباط X | 1200 x 627 أو 1600 x 900 | قم بالقص إلى شريط عريض أو ضعه على قطعة واسعة غير لامعة |
| يوتيوب مصغرة | 1280 x 720 | قم بالمحصول إلى 16:9، ثم قم بتكبيره قليلاً |
| قصة انستغرام | 1080 x 1920 | ضعه على لون غير لامع طويل |
يؤدي الاقتصاص إلى فقدان جزء من البطاقة؛ غير لامع يحتفظ بكل ذلك. للحصول على صورة مصغرة على YouTube، يؤدي اقتصاص مربع 1080 إلى 16:9 إلى الاحتفاظ بشريط 1080 x 608 وإزالة 236 بكسل من الأعلى والأسفل. تكبير هذا الشريط إلى 1280 x 720 هو مقياس 1280/1080 = 1.19، تكبير معتدل. احتفظ بالعنوان الرئيسي بالقرب من المركز الرأسي للبطاقة إذا كنت تخطط لذلك، حتى لا يقطعه المحصول. صورة وسائل التواصل الاجتماعي هل المحصول مع الإعدادات المسبقة للنظام الأساسي، و دليل تغيير حجم الصورة يشرح ما يفعله التوسيع بالجودة.
للاحتفاظ بالبطاقة المربعة بأكملها على لوحة قماشية أطول أو أوسع بدلاً من ذلك، ضعها على خلفية مع مولد ماتي.
هل تم تحميل صورك؟
لم يتم تحميل صورتك إلى Toolz. عندما تختار ملفًا، يقرأه المتصفح في الذاكرة كعنوان URL للبيانات، ويتم وضع البطاقة في الصفحة، ويتم عرض التنزيل محليًا بواسطة مكتبة html2canvas، التي تعيد رسم الصفحة '؛s HTML على لوحة قماشية. هناك ثلاث تفاصيل للشبكة والتخزين تستحق المعرفة، على الرغم من ذلك:
- الخطوط تأتي من خطوط جوجل. يتم تحميل قائمة الخطوط من
fonts.googleapis.com، لذلك يقدم متصفحك طلبات إلى Google للحصول على ملفات الخطوط، والتي تصفها Google في ملفاتها الأسئلة الشائعة حول خصوصية خطوط Google. النص والصورة التي تضيفها ليست جزءًا من تلك الطلبات. في وضع عدم الاتصال، تعود الخطوط التي لم يتم تحميلها بالفعل إلى محرف افتراضي. - يتم جلب عناوين URL للصور من مضيفها. إذا قمت بلصق عنوان URL للصورة بدلاً من تحميل ملف، فسيقوم متصفحك بتحميل الصورة من هذا العنوان، كما هو الحال في أي صفحة ويب.
- يتم حفظ العمل في متصفحك. يتم حفظ النص والألوان والصورة في وحدة التخزين المحلية للمتصفح '؛ حتى تتمكن من النجاة من إعادة التحميل. على جهاز كمبيوتر مشترك، اضغط على "إعادة التعيين" عند الانتهاء من مسحها.
المشاكل الشائعة وكيفية حلها
تعرض البطاقة التي تم تنزيلها خطًا مختلفًا عن المعاينة. لم ينته الخط من التحميل عند النقر فوق تنزيل PNG، لذلك عاد التصدير إلى محرف افتراضي. انتظر ثانية أو ثانيتين بعد اختيار الخط، ثم قم بالتصدير مرة أخرى.
الصورة الملصقة كعنوان URL مفقودة من التنزيل. يتطلب عرض صورة بعيدة في لوحة قماشية قابلة للتنزيل أن يسمح مضيف الصورة بالاستخدام عبر الأصل مع رؤوس CORS، وهو قيد وثائق html2canvas ملاحظات. العديد من المواقع لا ترسلها. قم بتنزيل الصورة وتحميلها كملف بدلاً من ذلك.
الصورة مقطوعة أو بها مساحة فارغة. استخدم شريط تمرير المقياس وشرائح تمرير الموضع X وY. يمكن أن يكشف القياس الأقل من 1.0x عن خلفية القالب حول الصورة؛ القياس فوقه يصبح أكثر إحكامًا.
النص يفيض مساحته. العنوان طويل جدًا بالنسبة للقالب. قم بتقصيره، أو قم بالتبديل إلى قالب يعطي النص المزيد من البطاقة.
تتم إعادة ضبط البطاقة بعد إعادة التحميل، أو لا تستمر الصور الكبيرة. تقصر المتصفحات مساحة التخزين المحلية على بضعة ميغابايت لكل موقع، ويمكن أن تتجاوزها صورة كبيرة مخزنة كعنوان URL للبيانات. لا تزال البطاقة تصدر؛ قد لا ينجو من إعادة التحميل. تغيير حجم الصور الكبيرة جدًا قبل إضافتها.
تبدو أقواس الزوايا في النص خاطئة. يتم إدراج النص في القالب كعلامات، لذا يعمل السطر، مما يعني أحرفًا مثل < يمكن قراءتها كبداية للعلامة. تجنب الأقواس الزاوية في نص البطاقة.
نصائح للبطاقات التي يقرأها الناس
- الرصاص بفكرة واحدة لكل بطاقة. إذا كانت تحتاج إلى عنوانين رئيسيين، فإنها تحتاج إلى بطاقتين.
- قم بقص الصورة حتى لا يقع موضوعها تحت منطقة العنوان الرئيسي للقالب الخاص بك.
- حافظ على ثبات علامتك التجارية: نفس القالب والخط ولون التمييز عبر السلسلة.
- أضف نصًا بديلًا عند النشر. الصورة عبارة عن صورة للكلمات لقارئ الشاشة، لذا اكتب العنوان والتفاصيل الرئيسية في حقل النص البديل للنظام الأساسي '؛s.
- فقط انشر علامات الاقتباس والصور التي يحق لك استخدامها، وقم بإسناد علامات الاقتباس بدقة.
بدائل لمولد بطاقة القالب
- أدوات التصميم العامة مثل Canva أو Figma أو Adobe Express، تقدم المزيد من القوالب وتحديد المواقع مجانًا ومكتبات الفريق، عادةً مع حساب.
- غرف الأخبار ومنصات الجدولة الاجتماعية تتضمن أحيانًا قوالب بطاقات ذات علامات تجارية مرتبطة بسير عمل النشر.
- المولدات القائمة على الكود يؤدي ذلك إلى عرض HTML على الصور الموجودة على مواقع تناسب الخادم والتي تنتج بطاقة لكل مقالة تلقائيًا.
تناسب أداة قالب المتصفح الأرضية الوسطى: سريعة، بدون حساب، إخراج متسق، وتبقى صورك على جهازك. للخطوات ذات الصلة قبل النشر، صورة العلامة المائية يضيف شعارًا أو رصيدًا إلى الصورة، و مركز أدوات التواصل الاجتماعي يسرد المجموعة الكاملة.
