פנורמה שפורסמה לאינסטגרם כתמונה בודדת הופכת לפס דק בפיד. אותה פנורמה חתוכה לשלוש או ארבע שקופיות ופורסמה כקרוסלה ממלאת את המסך, והחלקה נעה על פני התמונה כאילו אתה מעביר מצלמה. האפקט פשוט לתיאור וקל לטעות מעט: שקופית פיקסל אחד כבוי, או שקופית אחרונה צרה יותר מהשאר, וההחלקה קופצת.
מדריך זה מסביר כיצד פועלת קרוסלה חלקה, כמה שקופיות צריכה פנורמה נתונה, כיצד נראית אריתמטיקה החיתוך עם ספירת פיקסלים אמיתית וכיצד להשתמש ב מחולל גלילות קרוסלה ב-toolz כדי לבצע את החיתוך בדפדפן שלך.
TL;DR: קרוסלה חלקה היא תמונה אחת רחבה חתוכה לשקופיות שוות שחולקות את הקצוות שלהן בדיוק, פורסמו לפי הסדר כך שהחלקה מגלילה את התמונה. ספירת השקופיות היא הפנורמה 's יחס רוחב-גובה חלקי השקופית's יחס רוחב-גובה: פנורמה של 3:1 היא 3 שקופיות מרובעות או 4 שקופיות דיוקן (4:5). ה מחולל גלילה קרוסלה מציע לספור, מצמיח את התמונה בדיוק לכל כך הרבה שקופיות' שווה רוחב, חותך על גבולות פיקסלים שלמים, ומייצא שקופיות ברוחב 1080 פיקסלים כמו JPEG, PNG או WebP ברוכסן ממוספר. הוא מריץ את צד הלקוח, שום דבר לא הועלה, בחינם, ללא הרשמה.
מהי קרוסלת אינסטגרם חלקה?
קרוסלה חלקה היא פוסט קרוסלה שהשקופיות שלו הן פיסות רצופות של תמונה אחת במקום לצעוד מתמונה אחת לאחרת, הצופה מחליק והתמונה ממשיכה על פני הפער צלמי נוף משתמשים בה לפנורמות, מעצבים משתמשים בה לאיורים ארוכים, ומותגים משתמשים בה לצירי זמן או להרכבי מוצרים העוברים על פני מספר פריימים.
זה עובד כי קרוסלה מציגה שקופיות זו לצד זו ברצועה, ולכל שקופית בפוסט יש אותו גודל. אם שקופית 1 מסתיימת בעמודת פיקסלים 1,200 של המקור ושקופית 2 מתחילה בעמודה 1,200, החיבור אינו נראה. אם שקופית 2 מתחילה בעמודה 1,198 או 1,203, רסיס מהתמונה חוזר או נעלם, ובאופק ישר או בקצה בניין המופיע כשלב גלוי.
שני חוקי פלטפורמה מעצבים את כל השאר נכון לכתיבת שורות אלה, אינסטגרם מקבלת עד 20 שקופיות בקרוסלה אחת, וכל השקופיות בפוסט חולקות את יחס הגובה-רוחב של הראשונה; שקופית בצורה אחרת נחתכת כדי להתאים. פלטפורמות משנות את הפרטים הללו מעת לעת, אז התייחסו אליהם כאל התנהגות עדכנית ולא כמפרט קבוע.
באיזו צורת שקופית כדאי לבחור?
דיוקן 4:5 הוא הבחירה הרגילה, כי זה הצורה הגבוהה ביותר את Instagram להאכיל מציג ולוקח את המסך ביותר בטלפון. Square ונוף נמצאים שם כאשר הקומפוזיציה מתאימה להם.
הגנרטור מציע את שלוש צורות הקרוסלה, כל אחת מיוצאת ברוחב 1080 פיקסלים:
| צורת שקופית | גודל פלט | יחס (רוחב/גובה) | שקופיות לפנורמה של 3:1 | שקופיות לפנורמה של 4:1 |
|---|---|---|---|---|
| דיוקן (ברירת מחדל) | 1080 x 1350 | 0.8 | 4 | 5 |
| כיכר | 1080 x 1080 | 1.0 | 3 | 4 |
| נוף | 1080 x 566 | 1.91 | 2 | 2 |
ספירות השקופיות בטבלה מגיעות מחטיבה אחת, מכוסה בסעיף הבא התבנית שיש לשים לב היא שקופיות צרות יותר זקוקות ליותר מהן כדי לכסות את אותו רוחב שקופיות דיוקן מציגות את הגובה הרב ביותר של הפנורמה לכל שקופית, וזה בדרך כלל מה שגורם לתמונת נוף להרגיש גדולה, אבל הן זקוקות ליותר החלקות שקופיות נוף מציגות פנורמה בפחות מסגרות קצרות יותר ומתאימות לתמונות רחבות מאוד ורדודות כמו קווי רקיע.
כמה שקופיות צריכה פנורמה?
חלקו את יחס הגובה-רוחב של panorama's ביחס גובה-רוחב של slide's, ואז עיגלו למגלשה השלמה הקרובה ביותר.
slides = round( (image width / image height) / (slide width / slide height) )
לפנורמה של 3:1 בשקופיות דיוקן: 3 / 0.8 = 3.75, שמסתובבת ל-4. בשקופיות מרובעות: 3 / 1 = 3. בשקופיות נוף: 3 / 1.908 = 1.57, שמסתובבת ל-2.
עבור פנורמה של 4:1, כגון תמונה של 6000 x 1500: 4 / 0.8 = 5 שקופיות דיוקן, 4 / 1 = 4 שקופיות מרובעות ו-4 / 1.908 = 2.1, אז 2 שקופיות נוף.
ה פנורמה לקרוסלה כלי מריץ את החישוב הזה ברגע שאתה מוסיף תמונה, מהדק את התשובה בין 1 ל-10, ומגדיר אליו את המחוון Slides עם שורה כגון "4 תואם את הפרופורציות של התמונה #39;s הכי קרוב." המחוון עצמו פועל מ-2 עד 10. ברגע שאתה מזיז אותו, ההצעה מפסיקה לעקוף את הבחירה שלך; הוספת תמונה חדשה או בחירת צורת שקופית אחרת מחזירה את ההצעה.
הספירה לעיתים רחוקות מתחלקת בצורה מושלמת, אז משהו צריך לתת עיגול כלפי מעלה ליותר עיטורי שקופיות קצת מלמעלה ומלמטה של הפנורמה עיגול כלפי מטה לפחות עיטורי שקופיות משמאל ומימין הגנרטור עושה את הקישוט הזה פעם אחת, ממורכז, לפני החיתוך, וזו הסיבה שכל שקופית יוצאת באותו גודל.
איך הכלי חותך שקופיות ללא תפר?
זה עובד בשלושה שלבים, וכל אחד קיים כדי לעצור סוג מסוים של תפר.
שלב 1: לחתוך את הרצועה. השקופיות יחד יוצרות רצועה אחת ארוכה שהיחס שלה הוא יחס השקופיות כפול ספירת השקופיות. עבור 4 שקופיות דיוקן שזה 1080 x 4 / 1350 = 3.2. הכלי לוקח את האזור המרוכז הגדול ביותר של התמונה בדיוק עם היחס הזה. אם התמונה רחבה יותר מהרצועה, הצדדים גזוזים; אם הוא גבוה יותר, החלק העליון והתחתון גזוזים.
שלב 2: פצל את הרצועה לעמודות של פיקסל שלם. רוחב הרצועה מעוגל למספר שלם של פיקסלים, חלקי ספירת השקופיות, וכל שאריות פיקסלים מחולקות אחת אחת לשקופיות המובילות רצועה של 3,199 פיקסלים ב-3 שקופיות הופכת ל-1,067 + 1,066 + 1,066 העמודות הן רצופות, כך שכל שקופית מתחילה בדיוק בפיקסל לאחר שהקודמת הסתיימה אין עמודה שנספרת פעמיים ואף אחת לא מדלגת.
שלב 3: קנה מידה של כל שקופית לגודל הפלט. כל עמודה מצוירת על קנבס בגודל המלא שנקבע מראש, 1080 x 1350 לפורטרט, באמצעות הדפדפן 's קנבס drawImage פעולה המוגדרת ב תקן WHATWG HTML, עם החלקת תמונה באיכות גבוהה.
למה לא לעגל כל שקופית's מיקום באופן עצמאי? כי גבולות שברים נסחפים אם רצועה היא ברוחב 3,201 פיקסלים ו-4 שקופיות מחושבות כ-800.25 פיקסלים כל אחת, עיגול כל התחלה ורוחב בפני עצמו יכול לשים שקופית אחת' בקצה הימני פיקסל מעבר לשקופית הבאה' בקצה השמאלי. פיזור השאר על פני השקופיות המובילות שומר על כל גבול מספר שלם וכל שקופית בתוך פיקסל מקור אחד מהאחרים. במקרה של 1,067 לעומת 1,066, פיקסל מקור נוסף משנה את קנה המידה האופקי של הפלט בפחות מ-0.1%, שאינו נראה לעין.
דוגמה עובדת עם ספירת פיקסלים אמיתית
קח פנורמה של 4000 x 1333, יחס רוחב-גובה של 3.0008, ובחר שקופיות דיוקן.
הספירה המוצעת. 3.0008 / 0.8 = 3.751, שמסתובב ל-4 שקופיות.
הרצועה ל-4 שקופיות. יחס הרצועה הוא 3.2, ויחס התמונה של 3.0008 קטן מזה, כך שהתמונה גבוהה יחסית מהרצועה הכלי שומר על מלוא הרוחב 4000 פיקסלים וגובה הגזרות: 4000 / 3.2 = 1,250 פיקסלים. זה מסיר 83 פיקסלים, כ-41.5 פיקסלים מלמעלה ו-41.5 פיקסלים מלמטה.
השקופיות. 4000 / 4 = 1,000 px כל אחד ללא שארית, אז ארבע פרוסות של 1000 x 1250, כל אחת מוגדלת ב-1.08 ל-1080 x 1350.
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
בחירת 3 שקופיות במקום. גרור את המחוון ל-3 ויחס הרצועה יורד ל-2.4. כעת התמונה רחבה יותר מהרצועה, כך שהכלי שומר על מלוא הגובה ורוחב הקישוטים של 1,333 x 2.4 = 3,199.2 פיקסלים, מעוגל ל-3,199. בערך 400 פיקסלים יורדים מכל צד. פיצול ל-3, כלומר 1,067 + 1,066 + 1,066 פיקסלים, כך שהשקופית הראשונה מקבלת את הפיקסל האחד שנותר.
דוחפים את זה רחוק מדי. ב-6 שקופיות יחס הרצועה יהיה 0.8 x 6 = 4.8, רחב בהרבה מהתמונה המחולל מציג אזהרה כאשר התמונה ' יחס s יורד מתחת ל-75% מיחס הרצועה. לתמונה זו, 0.8 x 6 x 0.75 = 3.6, ו-3.0 הוא פחות מ-3.6, כך שהעמוד אומר: " תמונה זו אינה רחבה מספיק עבור 6 שקופיות בצורה זו, כך שכל שקופית תיחתך קשה למעלה ולמטה." ב-5 שקופיות הסף הוא 3.0 והתמונה פשוט מנקה אותה.
דוגמה שנייה מציגה פנורמה שמתאימה בדיוק תמונה של 6000 x 1500 היא 4:1 בשקופיות דיוקן ההצעה היא 4 / 0.8 = 5, יחס הרצועות הוא 5 x 0.8 = 4.0, ושום דבר לא גזוז בכלל: חמש פרוסות של 1200 x 1500, כל אחת מוקטנת ב-0.9 עד 1080 x 1350. עבור לשקופיות מרובעות וההצעה היא 4, שוב ללא עיטור: ארבע פרוסות של 1500 x 1500, בקנה מידה של 1080 x 1080.
איך מכינים את הקרוסלה צעד אחר צעד?
- הוסף את הפנורמה. פתח את מפצל קרוסלה אינסטגרם ושחרר תמונה, לחץ כדי לגלוש, או הדבק אחד מהלוח כל תמונה שהדפדפן יכול לפענח עובדת, מה שאומר בפועל PNG, JPEG, WebP, GIF ו-AVIF.
- בחר את צורת השקופית. דיוקן 4:5 הוא ברירת המחדל. ההערה מתחת לבוחר חוזרת למה מיועדת הצורה.
- בדוק את ספירת השקופיות. קבל את ההצעה או הזז את המחוון. רצועת התצוגה המקדימה מציירת מחדש מיד, והכותרת מציגה את הפלט, למשל "4 x 1080x1350".
- בחר פורמט והורד. לחץ על "הורד את כל ה-4 כ-zip" עבור הסט כולו, או השתמש ב-"Slide 1", "Slide 2" כפתורים לשמירת שקופיות בודדות.
קבצים נקראים משם הקובץ המקורי שלך עם מספר מרופד אפס: harbor.jpg הופך harbor-01.jpeg, harbor-02.jpeg וכך הלאה בפנים harbor-carousel.zip. הריפוד שומר על השקופיות בסדר החלקה בכל מנהל קבצים, מה שחשוב כשאתה בוחר את כולן בטלפון שלך ספריית ה-zip נטענת רק כשאתה לוחץ על כפתור ה-zip, כך שהדף עצמו נשאר קל.
העלה את השקופיות לאינסטגרם לפי סדר מספרים כפוסט קרוסלה בודד פרסום שלהן לא תקין היא הדרך הנפוצה ביותר שבה סט נכון של שקופיות בסופו של דבר נראה שבור.
האם לייצא JPEG, PNG או WebP?
JPEG הוא ברירת המחדל והבחירה הנכונה עבור צילומים אינסטגרם מקודדת מחדש העלאות כ-JPEG בכל מקרה, כך שקובץ ללא הפסדים קונה העלאה גדולה יותר ושום דבר לא נראה בסוף. דחיסת JPEG מוגדרת ב המלצת ITU-T T.81, והגנרטור מקודד באיכות של 0.92.
PNG הוא ללא הפסדים, שצוין על ידי המלצת W3C PNG, ומתאים לפנורמות שהן איורים, דיאגרמות או מכילות טקסט, שבהן חפצי JPEG סביב קצוות קשים יופיעו לפני Instagram' הדחיסה של עצמו מוסיפה עוד.
WebP נותן את הקבצים הקטנים ביותר באיכות דומה וגם משתמש ב-0.92 עבור הקידוד האובד שלו. זוהי בחירה הגיונית עבור שקופיות שפונות למקום אחר מלבד אינסטגרם, כמו גלריית אתרים.
אם אתה צריך את השקופיות בפורמט אחר לאחר מכן, או תיקיה שלהם המרה בכמויות גדולות, המדריך ל המרת פורמט תמונה מכסה מה משתנה בין JPG, PNG ו - WebP ומתי כל אחד שווה את זה.
האם פיצול יוריד את איכות התמונה?
חיתוך לא; קנה מידה יכול. כל שקופית נלקחת מהמקור ברזולוציה מלאה ולאחר מכן משתנה לרוחב של 1080 פיקסלים.
כאשר פרוסה רחבה יותר מ-1080 פיקסלים, כמו בדוגמה של 6000 x 1500 כאשר כל פרוסה היא 1200 פיקסלים, השקופית מוקטנת, מה שלא מאבד פרט גלוי כאשר פרוסה צרה מ-1080 פיקסלים, השקופית מוגדלת ותראה רך יותר התמונה בגודל 4000 x 1333 ב-4 שקופיות דיוקן נותנת פרוסות של 1000 פיקסלים, הגדלה מתונה של 1.08x תמונה ברוחב 2000 פיקסלים מפוצלת ל-5 שקופיות נותנת פרוסות של 400 פיקסלים, מוגדלת פי 2.7 ותראה רכה בטלפון.
מהחשבון נובע כלל אצבע: עבור שקופיות חדות, המקור צריך להיות ברוחב של לפחות 1080 פיקסלים לשקופית, כך ש-4,320 פיקסלים עבור 4 שקופיות ו-5,400 פיקסלים עבור 5. אם פנורמה קטנה מזה, פחות שקופיות ייראו חדות יותר. למידע נוסף על מדוע הגדלה לא יכולה להוסיף פרטים, עיין במדריך על שינוי גודל תמונות מבלי לאבד איכות, שעובר דרך הקטנת קנה מידה, העלאת קנה מידה ודגימה מחדש.
מה גורם לתפר גלוי, ואיך מתקנים אותו?
רוב התפרים מגיעים מאחת מחמש סיבות, והגנרטור מסיר את שתי הראשונות.
| סימפטום | סיבה סבירה | לתקן |
|---|---|---|
| רצועה דקה שחוזרת על עצמה או חסרה בחיבור | גבולות פרוסה חלקית מעוגלים באופן עצמאי | השתמש בחיתוך פיקסל שלם, כפי שעושה הגנרטור |
| השקופית האחרונה נראית מתוחה או קצרה | שאר הפיקסלים הושלכו בשקופית אחת | פזרו את השאר על פני השקופיות המובילות |
| מחליק מחוץ לרצף | הועלה בסדר הלא נכון | פרסם בסדר מספר קובץ, 01 ראשון |
| שקופית אחת חתוכה בצורה שונה מהשאר | יחסי גובה-רוחב מעורבים בפוסט אחד | ייצא כל שקופית באותה צורה |
| נושא לחתוך דרך אמצע פנים או סימן | אדמות גבול מגלשות בנושא | שנה את ספירת השקופיות כך שגבול יזוז |
השורה האחרונה היא בעיה קומפוזיציה, לא טכני עם 4 שקופיות, גבולות לשבת על 25%, 50% ו 75% של הרצועה; עם 3 שקופיות, על 33% ו 67%.If אדם's פנים נוחת בדיוק על להצטרף, שקופית אחת יותר או פחות בדרך כלל מזיז את החתך במקום לא מזיק פרצופים וטקסט על להצטרף לשרוד את ההחלקה אבל נראה מביך בכל פעם צופה עוצר על שקופית אחת.
מה הגבולות של הכלי?
המחוון פועל מ-2 עד 10 שקופיות אינסטגרם מאפשר יותר, אבל אחרי עשר לפנורמה טיפוסית כבר אין מספיק רוחב כדי לתת לכל שקופית פרט אמיתי, וכל שקופית הופכת לרצועה צרה שמפסיקה לקרוא כתמונה.
היבול תמיד מרוכז אם החלק החשוב של הפנורמה יושב ליד הקצה העליון או התחתון והספירה שנבחרה חותכת את גובה, שנה את הספירה או חתוך את המקור תחילה עם חוטף תמונות במדיה חברתית, המאפשר לך לבחור את נקודת המוקד.
הקלט צריך להיות קובץ שהדפדפן מזהה כתמונה ויכול לפענח. קובץ שאינו תמונה מסורב עם הודעה ששמה אותו, ותמונה פגומה או כזו בפורמט שהדפדפן לא יכול לקרוא מקבל " לא ניתן היה לקרוא את התמונה הזו." תמונות HEIC מאייפון אינן מפוענחות על ידי רוב הדפדפנים, אז המר אותן תחילה.
כמו כל כלי באתר, הורדות נחשבות למגבלת שימוש יומית אין סימן מים ואין צורך בחשבון.
הפנורמה מועלית לאן שהוא?
מס 'התמונה מפוענחת, חתוכה, פרוסה ומקודדת על בד HTML בדפדפן שלך, ואת zip הוא מורכב באופן מקומי שום דבר לא נשלח לשרת, מאוחסן או מתועד, ואת הדף ממשיך לעבוד עם הרשת מנותקת פעם זה נטען זה משנה עבור צילומי מוצר שלא פורסמו או עבודת לקוח אתה לא פורסם עדיין.
כלים קשורים לפוסטים בקרוסלה
מחולל הגלילה יושב לצד קומץ כלי תמונה נוספים שנבנו עבור פוסטים חברתיים, כולם בצד הלקוח.
ה חוטף תמונות במדיה חברתית מצמיח תמונה בודדת לחמישה עשר גדלי פלטפורמה עם רשת מוקד של תשע נקודות. ה מחולל מט שם תמונה לא מרובעת על מט מרובע או דיוקן כך שכל התמונה תשרוד את הפיד, שמתאים לעמוד כריכה שמראה את הפנורמה המלאה קטנה לפני הקרוסלה. ה מחולל כרטיסי צילום בונה כרטיסי ציטוט וגרפיקה בסגנון חדשות מתבניות, וה ווטרמרקר מוסיף לוגו או סימן מים חתימה, בפינה או אריחים, לפני שאתה מפרסם כל כלי בסט רשום ב רכזת כלי תדמית חברתית.
