גלול כל חשבון חדשות או הזנת מותג ורוב הפוסטים חולקים צורה: תמונה, כותרת מודגשת, סרגל מבטא דק, תאריך וידית בפינה אלה כרטיסי צילום הם נראים מעוצבים כי הם בנויים מפריסה קבועה שבה רק המילים והתמונה משתנות, וזו גם הסיבה שצוות יכול לפרסם עשרות בשבוע מבלי שכל אחד ייראה אחרת.
מדריך זה מכסה מה הופך כרטיס לקריא בגודל הזנה, כיצד גדלי טקסט מתכווצים בטלפון, אילו צבעים עוברים הנחיות ניגודיות, מדוע יש לייצא כרטיסים כ-PNG, כיצד להתאים כרטיס מרובע לפלטפורמות אחרות, והיכן נמצאים קצוות הפרטיות. ה מחולל כרטיסי צילום משמש עבור החלקים שלב אחר שלב, וכל הגדרה המתוארת להלן היא אחת שהכלי מציע.
TL;DR: כרטיס תמונה הוא גרפיקה חברתית העשויה מתבנית: התמונה שלך, כותרת וטקסט תומך המוצבים בפריסה קבועה למחולל כרטיסי הצילום יש שמונה תבניות (עיתון קלאסי, מודגש מודרני, חדשות טובות, כרטיס ציטוט, מינימליסטי, כרטיס תכונה, חדשות שיפוע וציטוט אנכי), 50 גופנים של גוגל, בוחרים במבטא, רקע וצבע טקסט, בקרות קנה מידה ומיקום של תמונות ולוגו אופציונלי. כל כרטיס מייצא כ-1080 x 1080 PNG, מעובד בדפדפן שלך התמונה שלך נקראת מקומית ולא הועלתה, אם כי גופנים נטענים מגופני Google. זה בחינם, ללא הרשמה.
מה זה כרטיס צילום?
כרטיס צילום הוא תמונת מדיה חברתית מרובעת או מלבנית המשלבת צילום עם טקסט מצופה או סמוך, המונח מתבנית לשימוש חוזר כלי חדשות משתמשים בהם כדי לשתף כותרות, מותגים משתמשים בהם להודעות, ויוצרים משתמשים בהם לציטוטים התבנית מתקנת את הטיפוגרפיה, המרווחים והמיקומים; המחבר מספק את התוכן.
הפיצול הזה הוא כל העניין תבנית קובעת את החלטות העיצוב פעם אחת: כמה גדולה הכותרת ביחס לתמונה, לאן הולך התאריך, כמה מקום מקיף את הטקסט שינוי המילים לא יכול לשבור את היחסים האלה, אז הזנה של כרטיסים שנעשו מאותה תבנית קורא כפרסום אחד עקבי.
איזו תבנית כדאי לבחור?
בחר לפי מה שהכרטיס צריך לשאת. כל תבנית חושפת רק את שדות הטקסט שבהם משתמשת הפריסה שלה, כך שחלונית התוכן משתנה בעת המעבר.
| תבנית | פריסה | שדות טקסט | הטוב ביותר עבור |
|---|---|---|---|
| עיתון קלאסי | תמונה גדולה, אזור טקסט למטה | כותרת, כותרת משנה, תאריך, תחום | חדשות כלליות ופוסטים בבלוג |
| מודגש מודרני | תמונה חצי עליון, כותרת וסיכום למטה, קבוע "קרא עוד" כַּפתוֹר | כותרת, כותרת משנה, תאריך | הודעות |
| חדשות טובות | פס כותרת אדום, תמונה, כותרת, סרגל טיקר בסגנון גלילה | כותרת, כותרת משנה, תאריך | עדכונים רגישים לזמן |
| כרטיס הצעת מחיר | ציטוט על תמונת רקע חשוכה | כותרת (הציטוט), כותרת משנה (הייחוס), תאריך | משוך ציטוטים יש לך הרשאה לשתף |
| מינימליסטי | תמונה ממוסגרת עם הרבה מקום לבן | כותרת, כותרת משנה, תאריך | הצהרות פשוטות, תאריכי אירועים |
| כרטיס תכונה | תמונה, לוגו עגול חופף, פס תחתון | כותרת, כותרת משנה, תאריך, תחום | מאמרים ארוכים |
| חדשות שיפוע | תמונה עם דימום מלא, שיפוע מבטא, סרגל תחתון | כותרת, קטגוריה, תאריך, דומיין | סיפורים מונחי תמונה |
| ציטוט אנכי | לוח ציטוטים משמאל, תמונת דיוקן מימין | תוכן (הציטוט), מחבר, ייעוד, תאריך, דומיין | ציטוטים עם תמונה של הדובר |
לרוב התבניות יש שורת תאריך, וכמה מהם מוסיפים תחום או שדה ידית; ניתן לנקות כל שדה. תוויות מסוימות קבועות בפריסה, כגון "BREAKING NEWS" ברצועת Breaking News ו-"קרא עוד" ב-Modern Bold. חריץ הלוגו מופיע רק כאשר אתה מוסיף לוגו; ללא אחד, התבנית מסתירה את אזור הלוגו במקום להציג מסגרת ריקה.
כמה גדול צריך טקסט להיות בכרטיס חברתי?
גדול יותר ממה שהוא נראה על הצג שלך כרטיס מעוצב ברוחב של 1080 פיקסלים אך נצפה בהזנת טלפון ברוחב המסך בערך, וטלפון טיפוסי הוא ברוחב של כ-390 פיקסלים CSS. זה אומר שהכל בכרטיס מוצג בערך ב-390 / 1080 = 36% מהגודל המעוצב שלו.
הנה מה שזה עושה לטקסט בגדלים שבהם משתמשות התבניות:
| גודל בכרטיס 1080 פיקסלים | גודל משוער בהזנה ברוחב 390 פיקסלים | קריאות |
|---|---|---|
| כותרת 64 פיקסלים | 23 פיקסלים | מאוד ברור |
| כותרת 48 פיקסלים | 17 פיקסלים | ברור |
| 32 px כותרת משנה או כותרת תחתונה | 12 פיקסלים | קריא |
| טקסט מפורט של 24 פיקסלים | 9 פיקסלים | קטן, זקוק לתשומת לב |
| 20 px מטא נתונים | 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 | להיכשל | להיכשל |
שתי השורות הראשונות הן המחולל 's ברירת מחדל. אתה יכול לבדוק כל זוג צבעי המותג שלך עם בודק ניגודיות צבעים, וה מדריך ניגודיות צבעים מסביר כיצד מחושב היחס.
לטקסט המוצב ישירות מעל תמונה אין יחס ניגודיות יחיד, מכיוון שהתמונה משתנה תבניות כגון Gradient News מטפלות בזה עם שיפוע מתחת לטקסט וצל טקסט כאשר אתה בוחר תמונה עבור תבניות אלה, בחר אחת עם אזור כהה או רגוע יותר שבו הכותרת יושבת.
איך להכין כרטיס צילום, צעד אחר צעד
- פתח את יצרנית כרטיסי צילום ובחר תבנית מהתפריט הנפתח תבנית. הטקסט לדוגמה שלו נטען לשדות התוכן.
- החלף את הטקסט בכל שדה. הקש Enter בתוך תיבת כותרת או תוכן כדי לאלץ הפסקת שורה היכן שתרצה.
- הוסף את התמונה הראשית שלך: לחץ על אזור ההעלאה כדי לבחור קובץ, או הדבק כתובת URL של תמונה בשדה שמתחתיו.
- התאם את התמונה עם המחוון Scale (0.5x עד 2.0x) ומחווני המיקום X ו-Y (כל אחד -200 עד 200 פיקסלים) עד שהנושא יושב במקום שבו התבנית ממסגרת אותו.
- אופציונלי הוסף לוגו באותו אופן. תמונת לוגו מרובעת מתאימה ביותר לחריצי הלוגו המעגליים והמרובעים.
- פתח את התפריט הנפתח, חפש או סנן של הגופן לפי קטגוריה (ללא סריף, סריף, תצוגה, כתב יד או מונו-חלל), ובחר גופן.
- הגדר את צבעי המבטא, הרקע והטקסט עם קוטפי הצבעים.
- לחץ על הורד PNG. הקובץ נשמר כ
photocard-<template>-<timestamp>.png, אז יצוא חוזר לעולם אינו מחליף זה את זה.
ההגדרות, הטקסט והתמונה שלך נשמרים בדפדפן בזמן שאתה עובד, אז טעינה מחדש של הדף מחזירה את הכרטיס. איפוס מנקה אותם ומשחזר את התבנית הקלאסית.
מדוע הכרטיסים יורדים כ-PNG?
מכיוון שכרטיסים הם לרוב טקסט גדול וצבע שטוח, והתוכן הזה נדחס טוב יותר ונראה נקי יותר כ-PNG מאשר כ-JPEG. JPEG' דחיסה מאבדת עובדת בבלוקים של 8 x 8 פיקסלים ומשליכה פרטים עדינים, אשר סביב קצוות אותיות חדים מופיעים כהילות וכתמים חלשים, הנקראים לעתים קרובות צלצול. PNG מאחסן כל פיקסל בדיוק באמצעות הדחיסה ללא הפסדים המוגדרת ב- מפרט W3C PNG, אז כותרת נשארת חדה.
| פורמט | דחיסה | טקסט חד | אזורי צבע שטוחים | צילומים |
|---|---|---|---|---|
| PNG | ללא הפסד | פריך | קטן ומדויק | קבצים גדולים |
| JPEG | לוסי | הילות סביב הקצוות | יכול להראות רצועות וכתמים | קבצים קטנים |
רוב הפלטפורמות מקודדות מחדש העלאות בכל מקרה. החל מ-PNG נקי נותן למקודד שלהם את הקלט הטוב ביותר האפשרי. אם PNG עם תמונה גדולה גדול מדי עבור מגבלת העלאה, ה מדריך דחיסת תמונה מכסה איך לכווץ אותו.
איך משתמשים בכרטיס מרובע בפלטפורמות אחרות?
כל תבנית מייצאת ב-1080 x 1080, ריבוע של 1:1. זהו גודל העדכון הריבועי הסטנדרטי באינסטגרם ובפייסבוק, והוא מוצג מבלי לחתוך ברוב העדכונים. מיקומים אחרים רוצים צורות שונות.
| יעד | גודל מבוקש | מכיכר 1080 |
|---|---|---|
| עדכון אינסטגרם או פייסבוק | 1080 x 1080 | השתמש כפי שהוא |
| עדכון דיוקן באינסטגרם | 1080 x 1350 | הוסף מקום מעל ומתחת עם מט |
| תמונה בסגנון לינקדאין או 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 על בד. ישנם שלושה פרטי רשת ואחסון שכדאי לדעת:
- גופנים מגיעים מ-Google Fonts. רשימת הגופנים נטענת מ
fonts.googleapis.com, אז הדפדפן שלך מגיש בקשות ל-Google עבור קבצי הגופן, שגוגל מתארת בו שאלות נפוצות בנושא פרטיות של Google Fonts. הטקסט והתמונה שאתה מוסיף אינם חלק מאותן בקשות. במצב לא מקוון, גופנים שטרם נטענו חוזרים לגופן ברירת מחדל. - כתובות URL של תמונה מובאות מהמארח שלהן. אם אתה מדביק כתובת URL של תמונה במקום להעלות קובץ, הדפדפן שלך טוען את התמונה מכתובת זו, כפי שהיה עושה עבור כל דף אינטרנט.
- העבודה נשמרת בדפדפן שלך. הטקסט, הצבעים והתמונה שלך נשמרים בדפדפן' אחסון מקומי כך שהם ישרדו טעינה מחדש במחשב משותף, הקש על איפוס כשתסיים לנקות אותם.
בעיות נפוצות וכיצד לתקן אותן
הכרטיס שהורד מציג גופן שונה מהתצוגה המקדימה. הגופן לא סיים להיטען כאשר לחצת על הורד PNG, אז הייצוא ירד בחזרה לגופן ברירת מחדל המתן שנייה או שתיים לאחר בחירת גופן, ואז ייצא שוב.
חסרה בהורדה תמונה שהודבקה ככתובת URL. עיבוד תמונה מרוחקת לתוך קנבס להורדה מחייב את מארח התמונה לאפשר שימוש חוצה מקורות עם כותרות CORS, מגבלה של תיעוד html2canvas הערות אתרים רבים לא שולחים אותם הורד את התמונה והעלה אותה כקובץ במקום.
התמונה מנותקת או שיש לה מקום ריק. השתמש במחוון קנה המידה ובמחווני המיקום X ו-Y. קנה מידה מתחת ל-1.0x יכול לחשוף את רקע התבנית סביב התמונה; קנה המידה מעליו צומח חזק יותר.
טקסט עולה על גדותיו באזורו. הכותרת ארוכה מדי עבור התבנית קצרו אותה, או עברו לתבנית שנותנת לטקסט יותר מהכרטיס.
הכרטיס מתאפס לאחר טעינה מחדש, או שתמונות גדולות אינן נמשכות. דפדפנים מגבילים את האחסון המקומי לכמה מגה-בייט לאתר, ותמונה גדולה המאוחסנת ככתובת URL של נתונים יכולה לחרוג ממנה. הכרטיס עדיין מייצא; ייתכן שהוא פשוט לא ישרוד טעינה מחדש. שנה גודל של תמונות גדולות מאוד לפני הוספתן.
סוגריים זוויתיים בטקסט נראים לא בסדר. טקסט מוכנס לתבנית כסימון כך שבירות שורות עובדות, כלומר תווים כגון < ניתן לקרוא כהתחלה של תג. הימנע מסוגריים זווית בטקסט הכרטיס.
טיפים לכרטיסים שאנשים קוראים
- להוביל עם רעיון אחד לכל קלף אם הוא צריך שתי כותרות, הוא צריך שני קלפים.
- חתוך את התמונה כך שהנושא שלה לא יושב מתחת לאזור הכותרת של התבנית שלך.
- שמור על המותג שלך קבוע: אותה תבנית, גופן וצבע מבטא על פני סדרה.
- הוסף טקסט חלופי בעת פרסום התמונה היא תמונה של מילים לקורא מסך, אז כתוב את הכותרת ופרטי המפתח לתוך הפלטפורמה 's alt text field.
- פרסם רק ציטוטים ותמונות שיש לך זכות להשתמש בהם, ותייחס ציטוטים בצורה מדויקת.
חלופות למחולל כרטיסי תבנית
- כלי עיצוב כלליים כגון Canva, Figma או Adobe Express מציעות הרבה יותר תבניות, מיקום חינם וספריות צוות, בדרך כלל עם חשבון.
- פלטפורמות חדר חדשות ותזמון חברתי לפעמים כלול תבניות כרטיסים ממותגות הקשורות לזרימת עבודה של פרסום.
- גנרטורים מבוססי קוד שמציגים HTML לתמונות בשרת מתאימים לאתרים שמייצרים כרטיס לכל מאמר באופן אוטומטי.
כלי תבנית דפדפן מתאים לאמצע: מהיר, ללא חשבון, פלט עקבי, והתמונות שלך נשארות במחשב שלך לשלבים קשורים לפני הפרסום, ה סמן מים תמונה מוסיף לוגו או קרדיט לתמונה, וה רכזת כלי מדיה חברתית מפרט את הסט המלא.
