אתה מצלם נוף רחב, פותח את מסך הפוסט, והאפליקציה מציעה לך ריבוע עם שני ההרים הטובים ביותר מנותקים או שאתה מצלם צילום מסך של תרשים, ויבול ההזנה מסיר את תוויות הציר שהפכו את התרשים לשווה שיתוף התמונה בסדר המסגרת היא הצורה הלא נכונה.
יש שתי דרכים החוצה אתה יכול לחתוך את התמונה כדי להתאים את המסגרת, או שאתה יכול לשים את התמונה כולה על רקע שכבר יש לו את הצורה הנכונה הגישה השנייה נקראת מט, וזה מה ה מחולל מט בונה: ריבוע, דיוקן או בד בצורת סיפור עם התמונה המלאה שלך ממוקם בתוכו, על עותק מטושטש של עצמו או צבע אחיד מדריך זה מסביר מתי מט מנצח יבול, איך הגיאומטריה עובדת, מה הריפוד, הגדרות רדיוס וצל לעשות בפיקסלים, ואיזה גודל פלט לבחור עבור כל פלטפורמה.
TL;DR: מט הוא הרקע שעליו יושבת תמונה מחוץ לצורה כך שניתן לפרסם אותה מבלי לחתוך. במקום לחתוך תמונה של 16:9 עד 1:1, אתה מתאים את כל התמונה בתוך מסגרת של 1080 x 1080 או 1080 x 1350 וממלא את החלל שנותר בעותק מטושטש של התמונה או בצבע אחיד. מחולל המט עושה את זה בצד הלקוח על קנבס HTML, עם 15 הגדרות קבועות מראש של פלטפורמה, ריפוד מ-0 עד 25%, פינות מעוגלות, צללית אופציונלית וייצוא PNG, JPEG או WebP. זה בחינם, ללא הרשמה, ושום דבר לא מועלה.
מה זה תמונה מט?
מט תמונה הוא הגבול בין תמונה לקצה המסגרת שלה המילה באה ממסגור תמונה, שבו לוח מחצלת עם חלון חתוך יושב בין הדפסה לזכוכית כך שהתמונה לא רצה לקצה המסגרת במדיה החברתית הרעיון זהה, ללא הקרטון: ה-"frame" הוא יחס הגובה-רוחב שפלטפורמה רוצה, והמט הוא כל מה שממלא את החלל שהתמונה שלך לא עושה.
התכונה המגדירה של מט היא ששום דבר לא מוסר מהתמונה כל פיקסל שהרכבת שורד לתוך הפוסט המסחר הוא שהתמונה כבר לא ממלאת את כל האריח, אז היא קטנה יותר על המסך מאשר יבול של אותה תמונה יהיה.
האם להשתמש במט או לחתוך את התמונה?
חיתוך כאשר הנושא יושב באמצע והקצוות הם מקריים השתמש במט כאשר הקצוות נושאים מידע שאינך יכול לאבד. זו כל ההחלטה, וכדאי לקבל בכוונה במקום לקבל את כל מה שמסך ההעלאה עושה.
| מצב | בחירה טובה יותר | למה |
|---|---|---|
| דיוקן של אדם אחד, רקע רגיל | קרופ | הנושא ממלא יותר מהאריח וקורא טוב יותר בגודל תמונה ממוזערת |
| נוף רחב או פנורמה | מאט | הרוחב הוא נקודת הצילום |
| צילום מסך של תרשים, קוד או שיחה | מאט | תוויות וקצוות נושאים את המידע |
| צילום מוצר שחייב להראות את כל האובייקט | מאט | חיתוך לתוך המוצר מביס את המטרה |
| תמונה קבוצתית עם אנשים בשני הקצוות | מאט | יבול מסיר מישהו |
| צילום מפורט או מרקם | קרופ | אין יתרון משמעותי להגן עליו |
| פנורמה רחבה מאוד שאתה רוצה שאנשים יחליקו דרכה | גם לא | לפצל אותו לקרוסלה במקום |
אם תחליט שיבול הוא בכל זאת נכון, ה מדיה חברתית תמונה Cropper מטפל בצד הזה של ההחלטה עם אותן הגדרות קבועות מראש של פלטפורמה. עבור פנורמה רחבה מדי עבור כל אחת מהגישות, ה מחולל גלילות קרוסלה פורס אותו ללוחות הניתנים להחלקה.
איך מט מתאים תמונה לריבוע?
כלל ההתאמה הוא אותו CSS אחד שקורא לו object-fit: contain, מוגדר ב- מודול תמונות CSS רמה 3 מפרט: קנה מידה של התמונה לפי הגורם הגדול ביותר ששומר גם על הרוחב וגם על הגובה שלה בתוך המסגרת, ואז מרכז אותה בקוד החישוב הוא שלוש שורות:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
כל מימד שפוגע בקצה המסגרת מחליט תחילה את קנה המידה תמונה רחבה נוגעת בקצוות השמאלי והימני ומשאירה פסים מעל ומתחת תמונה גבוהה נוגעת בחלק העליון והתחתון ומשאירה פסים בצדדים מחולל המט מחיל תחילה ריפוד, מכווץ את המסגרת, ואז מריץ את ההתאמה הזו בתוך מה שנשאר.
דוגמה מעובדת עם מספרים ממשיים
צלם תמונת נוף בגודל 1920 x 1080 (16:9) והכנס אותה לריבוע האינסטגרם המוגדר מראש, 1080 x 1080, עם ריפוד ברירת המחדל של 6%.
- הריפוד הוא 6% מהמסגרת ' צד קצר יותר: 1080 x 0.06 = 64.8 פיקסלים בכל קצה.
- החלל שנותר לתמונה הוא 1080 - (2 x 64.8) = 950.4 פיקסלים ריבוע.
- סולם ההתאמה הוא הקטן מבין 950.4 / 1920 = 0.495 ו-950.4 / 1080 = 0.880, אז 0.495.
- התמונה מצוירת ב-1920 x 0.495 = 950.4 רוחב ו-1080 x 0.495 = 534.6 גובה.
- הוא מרוכז אנכית: (950.4 - 534.6) / 2 = 207.9, בתוספת הריפוד 64.8, מעמיד את הקצה העליון שלו על 272.7 פיקסלים.
הכלי מדווח על כך תחת התצוגה המקדימה כ-" ממוקם ב-950 x 535 בתוך מסגרת 1080 x 1080". אתה יכול לבדוק כל מקרה אחר באותו אופן.
איזה גודל פלט כדאי לבחור?
בחר את גודל המיקום שאליו אתה מפרסם, וזכור שעבור תמונה רחבה, מסגרת גבוהה יותר לא הופכת את התמונה לגדולה יותר. הרוחב הוא מה שמגביל אותה. הטבלה למטה פועלת באותה התאמה עבור שתי תמונות מקור, עם ריפוד של 6%, על פני הקביעות המוגדרות מראש הנפוצות.
| מוגדר מראש | מסגרת | 1920 x 1080 נוף מצויר ב | דיוקן טלפון 1080 x 1920 מצויר ב |
|---|---|---|---|
| פוסט מרובע באינסטגרם | 1080 x 1080 | 950 x 535 | 535 x 950 |
| פוסט דיוקן באינסטגרם (4:5) | 1080 x 1350 | 950 x 535 | 686 x 1220 |
| סיפור אינסטגרם או סליל (9:16) | 1080 x 1920 | 950 x 535 | 950 x 1690 |
| תמונת פוסט X (16:9) | 1600 x 900 | 1408 x 792 | 446 x 792 |
שני דברים בולטים לתמונת הנוף, ריבוע ודיוקן 4:5 נותנים גודל תמונה זהה; מסגרת הדיוקן רק מוסיפה יותר מט. אז עבור תמונות רחבות, ריבוע הוא הבחירה המסודרת יותר. עבור תמונת הטלפון הגבוהה, דיוקן 4:5 נותן לתמונה כ-28% יותר גובה מאשר ריבוע (1220 מול 950 פיקסלים), וזו הסיבה שדיוקן הוא ברירת המחדל הטובה יותר עבור צילומים אנכיים.
הרשימה המלאה המוגדרת מראש בכלי מכסה אינסטגרם (מרובע, דיוקן, נוף, סיפור), שרשורים (מרובע, דיוקן), Bluesky (תמונת הזנה וריבוע), X (פרסם תמונה וכרטיס סיכום), עדכון פייסבוק, עדכון לינקדאין, תמונה ממוזערת של YouTube, Pin Standard Pin ו-Open Graph תצוגה מקדימה של קישורים. פלטפורמות משנות את היבולים שלהן ומקודדות מחדש העלאות, אז התייחסו אליהן כאל " מה מתאים היום" במקום ערבות.
באיזה רקע מט צריך להשתמש?
הכלי מציע ארבעה רקעים: עותק מטושטש של התמונה, צבע אחיד שתבחר, לבן או שחור העותק המטושטש הוא ברירת המחדל ובדרך כלל הבחירה הטובה ביותר לתמונות, מכיוון שהוא ממלא את המסגרת בתמונה' פלטה משלו מבלי שתצטרך לבחור צבע.
| רקע | נראה כמו | הטוב ביותר עבור | להיזהר מ |
|---|---|---|---|
| עותק מטושטש של התמונה | האינסטגרם "fill" המוכרים; תראה | תמונות, נסיעות, אוכל, כל דבר צבעוני | תמונות עמוסות מייצרות רקע עמוס |
| צבע אחיד | כרטיס שטוח מאחורי התמונה | חשבונות מותג, צילומי מוצר, לוגו | בחר צבע שלא נלחם בתמונה |
| לבן | הדפס גלריה על קיר לבן | הזנות מינימליות, צילומי מסך במצב אור | תמונות עם קצוות בהירים מאבדות את הגבול שלהן ללא צל |
| שחור | תיבת מכתבים לקולנוע | צילומי לילה, צילומי סטילס של סרטים, צילומי מסך כהים של ממשק משתמש | תמונות עם קצוות כהים מאבדות את הגבול שלהן ללא צל |
איך נוצר הרקע המטושטש
הרקע המטושטש אינו ניחוש בצבע תואם זוהי תמונה משלך, חתוכה למלא את כל הפריים, מטושטשת בכבדות ומכהה מעט, כשהתמונה החדה מצוירת למעלה הטשטוש משתמש בקנבס filter נכס, מתועד ב MDN's CanvasRenderingContext2D.filter page, והרדיוס שלו משתנה עם המסגרת: 6% מהצד הקצר יותר, אז 65 פיקסלים בריבוע של 1080.
פרט אחד חשוב לאיכות טשטוש ליד קצה בד ממוצע בפיקסלים שקופים מחוצה לו, מה שמותיר שפה חיוורת סביב הגבול הכלי נמנע מכך על ידי ציור הרקע גדול ב-12% מהמסגרת בכל צד (130 פיקסלים של ציור יתר על ריבוע של 1080), כך שלטשטוש יש נתוני תמונה אמיתיים לדגימה עד לקצה. לאחר מכן עוברת שטיפה שחורה של 12% מעל החלק העליון, מה ששומר על קריאת הנושא החדה כנושא.
מה עושים ריפוד, רדיוס פינה וצל?
כל שלוש ההגדרות פרופורציונליות, כך שהן נראות זהות ב-1080 פיקסלים כפי שהן נראות ב-1600.
ריפוד פועל מ-0 עד 25% ונמדד מול המסגרת' צד קצר יותר. ב-0, תמונה רחבה נוגעת בשני הקצוות הצדדיים והמט מופיע רק כפסים מעל ומתחת: תיבת מכתבים טהורה. בין 4% ל-8% נקרא כגבול מכוון מבלי לכווץ הרבה את התמונה. ערכים גדולים יותר מתאימים לפוסטים בסגנון כרטיס ציטוט שבהם הרקע הוא חלק מהעיצוב. בריבוע של 1080, כל נקודת אחוז של ריפוד מסירה 21.6 פיקסלים מהתמונה' רוחב זמין.
רדיוס פינתי פועל בין 0 ל-50% ונמדד מול התמונה הממוקמת #39; צד קצר יותר, לא המסגרת. עם דוגמה הנוף למעלה, התמונה בגובה 534.6 פיקסלים, כך שברירת המחדל של רדיוס של 12% מעגלת כל פינה בכ-64 פיקסלים. ב-50% הצדדים הקצרים הופכים לחצי עיגולים מלאים, מה שנותן צורת גלולה.
צל טיפה פועל כברירת מחדל זהו צל שחור 28% עם טשטוש של 3% של המסגרת' s צד קצר יותר והיסט כלפי מטה של 1%, אשר על מסגרת 1080 פירושו טשטוש 32 פיקסלים וירידה של 11 פיקסלים. זה מפריד בין התמונה לרקע בעל בהירות דומה, וזה בדיוק המקרה שבו מאט לבן או שחור זקוקים לעזרה.
איך לשים תמונה על מט, צעד אחר צעד
- פתח את מחולל מט חינם והוסף את התמונה שלך על ידי הפלת קובץ, לחיצה כדי לגלוש או הדבקה מהלוח. הדבק הוא המסלול המהיר ביותר לצילומי מסך.
- בחר את גודל הפלט מהרשימה המקובצת מראש התחל עם ריבוע אינסטגרם לתמונות רחבות ודיוקן אינסטגרם לגבוהים.
- בחר את הרקע שמור את העותק המטושטש לתמונות; עבור לצבע אחיד והקלד ערך hex עבור עבודת המותג.
- התאם ריפוד, רדיוס פינה והחלפת הצל בזמן צפייה בתצוגה המקדימה. קנבס התצוגה המקדימה מציג את גודל הפלט האמיתי, כך שמה שאתה רואה הוא הקובץ שתקבל.
- בחר פורמט והורד הקובץ נקרא על שם המקור שלך עם
-matteנוסף, כךbeach.jpgהופךbeach-matte.png.
PNG, JPEG או WebP: איזה פורמט כדאי לייצא?
ייצוא PNG כאשר התוצאה יש שקיפות או טקסט חד, JPEG כאשר אתה רוצה קובץ קטן שכל פלטפורמה מקבלת, ו - WebP כאשר אתה רוצה את הקובץ הקטן ביותר והיעד תומך בו.JPEG ו - WebP מקודדים באיכות 92%.
| פורמט | דחיסה | שומר על שקיפות | שימוש אופייני |
|---|---|---|---|
| PNG | ללא הפסד | כן | צילומי מסך, לוגו על מט שקוף, ארכיון התוצאה |
| JPEG | אובדן, איכות 0.92 | לא, משתטח עד אטום | פוסטים של תמונות בכל פלטפורמה |
| WebP | אובדן, איכות 0.92 | כן | אתרים ופלטפורמות שמקבלים WebP |
רוב הפלטפורמות החברתיות מקודדות מחדש את מה שאתה מעלה בכל מקרה, כך שפורמט הייצוא חשוב פחות עבור העדכון מאשר עבור העותק שלך. אם אתה מתכנן לערוך את התוצאה עוד יותר, שמור PNG. אם הקובץ צריך להיות קטן יותר לפני ההעלאה, ה מדריך דחיסת תמונה עובר על הגדרות האיכות יותר לעומק.
האם אתה יכול להשתמש ב-PNG שקוף?
כן, וזה עובד היטב עבור לוגו וצילומי מוצר חתוכים PNG שקוף ממוקם על חומרים מרוכבים בצבע אחיד בצורה נקייה, כך שמאט הופך לדרך מהירה לשים לוגו על ריבוע ממותג אם אתה צריך להסיר רקע ראשון, ה מדריך מסיר רקע מכסה את השלב הזה. ייצא את התוצאה כ-PNG או WebP כדי לשמור על שקיפות בקובץ; ל-JPEG אין ערוץ אלפא והוא ישטח אותו.
האם מט מפחית את איכות התמונה?
לא, כל עוד המקור גדול יותר מהמרחב שאליו הוא נמשך הגדרות הפלט מראש הן 1080 פיקסלים או רחב יותר, ותמונת טלפון טיפוסית היא 3000 עד 4000 פיקסלים בצד הארוך שלו, כך שהתמונה מוקטנת, מה שלא מאבד שום דבר גלוי הקנבס מצייר אותו עם החלקה באיכות גבוהה.
היוצא מן הכלל האחד הוא מקור קטן אם אתה מציב תמונה בגודל 600 x 400 בריבוע של 1080 עם ריפוד של 6%, יש להגדיל אותה ל-950 x 634, פקטור של כ-1.58, והיא תיראה רכה מאותה סיבה שכל הגדלה עושה זאת הכלי לא יכול להוסיף פרטים שמעולם לא היו בקובץ אם המקור שלך קטן, צמצם את הריפוד או בחר הגדרה קטנה יותר מראש כך שגורם קנה המידה יישאר קרוב ל-1. ה מדריך לשינוי גודל תמונה מסביר מדוע העלאת קנה המידה מיטשטשת ומתי זה מקובל.
טעויות והודעות שגיאה נפוצות
כמה בעיות עולות לעתים קרובות מספיק כדי לנקוב בשמות.
- " הקובץ הזה אינו תמונה." הכלי בודק את הקובץ's דיווח על סוג MIME לפני הפענוח. PDF או מסמך שנגרר בטעות נדחה בשלב זה.
- " לא ניתן היה לקרוא את התמונה הזו." הקובץ טוען שהוא תמונה אבל הדפדפן לא הצליח לפענח אותה זה קורה עם הורדות פגומות ועם פורמטים שדפדפן מסוים לא תומך. ה-dropzone מפרט PNG, JPEG, WebP, GIF ו-AVIF; תמונות HEIC מאייפון בדרך כלל צריכות להמיר תחילה.
- המט נראה אפור במקום צבעוני. כנראה בחרת באפשרות צבע אחיד והשארת את ברירת המחדל של אפור בהיר החלף את הרקע בחזרה לעותק המטושטש.
- תמונה לבנה נעלמת לתוך מט לבן. הפעל את הצל, הוסף ריפוד קטן או עבור לרקע המטושטש.
- הפוסט עדיין נחתך. ההגדרה המוגדרת מראש שייצאת אינה תואמת את המקום שבו פרסמת אותה. תמונה בגודל 1200 x 630 Open Graph שהועלתה כפוסט עדכון באינסטגרם תיחתך, מכיוון ש-1.91:1 מתקבל רק כפוסט נוף.
- ההורדה לא מתחילה. הורדות נחשבות למגבלת שימוש יומית. כאשר מגיעים למגבלה, הכלי מציג הודעה ולא קובץ.
משהו מועלה?
מס 'התמונה נקראת עם כתובת URL של אובייקט מקומי, מורכבת על HTML <canvas> אלמנט בכרטיסיית הדפדפן שלך, ומקודד לקובץ עם הקנבס toBlob השיטה המתוארת ב מפרט קנבס WHATWG HTML. לא נשלחים נתוני תמונה לשרת, מאוחסנים או מתועדים ברגע שהדף נטען, הוא ממשיך לעבוד כשהרשת מנותקת. השתמש ברשומות מעקב רק באיזו הגדרה מראש, רקע ופורמט השתמשת, לעולם לא בתמונה.
חלופות באינטרנט מט גנרטור
כלי דפדפן הוא מסלול אחד מבין כמה.
- הפלטפורמה ' אפשרות התאמה משלו. כמה מסכי העלאה, Instagram's ביניהם, יכולים להתאים תמונה בתוך המסגרת עם פסים פשוטים במקום לחתוך אותה. זה מהיר, אבל אתה מקבל מעט או ללא שליטה על הרקע, הריפוד או הצל.
- עורכי תמונות טלפון. לאפליקציות גלריה ואפליקציות עריכה רבות יש "fit" או "no crop" מצב עם רקע מטושטש. הם עובדים היטב עבור תמונות בודדות בטלפון, והתוצאות משתנות לפי אפליקציה.
- תוכנת עיצוב שולחן עבודה. Photoshop, Affinity או Figma נותנים שליטה מלאה, כולל מיקומי פיקסלים מדויקים הם לוקחים יותר זמן וצריכים את התוכנה מותקנת.
- שורת פקודה. ImageMagick יכול לרפד תמונה לגודל קבוע עם
-gravity center -extent 1080x1080, שמתאים לעבודות אצווה בשרת.
היתרונות של גישת צד הלקוח הם שהיא לא צריכה התקנה או חשבון, עובדת אותו הדבר על כל מערכת הפעלה ושומרת את התמונה במכשיר שלך לפוסט בודד או אצווה קטנה שהיא בדרך כלל האפשרות המהירה ביותר עבור מאות תמונות, סקריפט מנצח.
ה רכזת כלי מדיה חברתית מפרט את כלי השירות הקשורים במקום אחד, כולל מחולל כרטיסי צילום לציטוט וכרטיסי חדשות וה סמן מים תמונה על הוספת לוגו או קרדיט לפני שאתה מפרסם.
