איך אני יוצר תמונת placeholder בגודל מדויק?

הקלד את הרוחב (px) והגובה (px), בחר צבעים או ערכת צבעים, ואז לחץ על הורד PNG, הורד JPG או הורד SVG. כברירת מחדל התמונה מציגה את הממדים שלה, כמו 800 x 600, בתור התווית.

מהי תמונת ה-placeholder הגדולה ביותר שאני יכול ליצור?

רוחב וגובה חייבים להיות כל אחד בין 1 ל-4000 פיקסלים. ערכים מחוץ לטווח הזה מציגים את השגיאה רוחב וגובה חייבים להיות בין 1 ל-4000 px.

איך אני שם תמונת placeholder ישירות ב-HTML בלי קובץ?

לחץ על העתק כ-Data URL והדבק אותו בתגית img בתור הערך של src. אתה יכול גם להשתמש בהעתק קטע HTML או העתק רקע CSS. אין צורך באחסון תמונות חיצוני.

האם אני יכול ליצור גדלים סטנדרטיים לרשתות חברתיות או לאינטרנט?

כן. הגדלים הקבועים מראש כוללים פוסט Instagram, סיפור Instagram, כרטיס Twitter, Open Graph, תמונה ממוזערת ב-YouTube, כיסוי Facebook וכותרת דוא״ל. הורד את כל הקבוצות (ZIP) שומר את כל האחד-עשר כקבצי PNG.

איך אני שם טקסט משלי או קווים אלכסוניים על ה-placeholder?

הקלד תווית בטקסט מותאם, למשל Hero image, במקום להציג ממדים. סמן הצג קווים אלכסוניים (X) כדי לצייר אלכסונים קלים. טקסט ארוך מתכווץ אוטומטית כדי להתאים לרוחב.

האם זה באמת בחינם?

כן. כל כלי הוא חינמי לשימוש, ללא צורך בחשבון או בכרטיס אשראי. העבודה מתבצעת במכשיר שלך ולא בשרתים שלנו, וזה מה שמאפשר להפעיל אותו בחינם.

האם זה עובד בנייד?

כן. זה פועל בדפדפנים ניידים עדכניים ב-iOS וב-Android, ללא התקנה.

🖼️

מחולל תמונות placeholder בחינם

צור תמונות placeholder צבעוניות עם מידות, טקסט וצבעים מותאמים אישית. גדלים סטנדרטיים לרשתות חברתיות, מוקאפים ועיצוב.

פועל בדפדפן שלךללא הרשמה, ללא חלונות קופציםללא צורך בכניסהחינם לנצח

רוחב (px)

גובה (px)

גדלים קבועים מראש

ערכות צבעים

רקע

טקסט / קווים

טקסט מותאם אישית (השאר ריק למידות)

הצג מידות אם אין טקסט מותאםהצג קווים אלכסוניים (X)

💡 לאב-טיפוס HTML: השתמש בהעתקה כ-Data URL והדבק ב-<img src=\"...\"> לתמונות מקום מוטבעות. לעיצובי Figma / Sketch, הורד את ה-PNG וגרור פנימה.

שימושים נפוצים

תמונות מציין מקום לעיצוב mockupsצור תיבות צבעוניות בגודל לשימוש ב-Figma, Sketch או web design mockups לפני שתמונות אמיתיות מוכנות.
מציינים מוקדשים להם עבור HTML prototypesהשתמש ב-Copy as Data-URL כדי להטמיע תמונות מציין מקום ישירות ל-HTML עבור prototypes מהירים.
מציינים עבור משבצות תוכן CMSבעת הדגמת תבנית CMS, השתמש בתמונות מציין מקום במקום תוכן אמיתי לתצוגות מקדימות רגישות.
תבניות תמונה רשתות חברתיותצור מציינים בגודל נכון עבור Instagram, Facebook, Twitter, תבניות פוסט LinkedIn.
תמונות בדיקת פריסת CSSצור תמונות ביחסי מידה קיצוניים עבור בדיקת לחץ לפריסות CSS מגיבות.

כיצד זה עובד

הכול קורה בדפדפן שלך באמצעות HTML Canvas API וסימון SVG כתוב-יד — ללא שרת, ללא העלאה, ללא שירות צד שלישי. אתה מגדיר ממדים, צבעים, וטקסט תווית, והכלי צובע את התמונה ישירות על אלמנט קנבס בזמן אמת, ואז מייצא אותה ל-PNG, JPEG, או SVG לפי דרישה.

1
הגדר ממדים וצבעים
הקלד רוחב וגובה (1–4000 פיקסלים כל אחד), או בחר אחד מ-11 הגדרות מוגדרות-מראש שמכסות גדלי מדיה חברתית ועיצוב נפוצים. בחר צבע רקע וטקסט מהערכות הנושא המובנות או הזן ערך הקס ישירות; בורר צבע מקורי ושדה טקסט מאומת נשארים מסונכרנים.
2
Canvas API מציג את התצוגה המקדימה מיד
אפקט React קורא ל-drawPlaceholder() בכל שינוי. הפונקציה הזו משתמשת ב-CanvasRenderingContext2D כדי למלא את המלבן בצבע הרקע, אופציונלית לצייר קווי צלב אלכסוניים דהויים בשקיפות 15%, ואז למדוד וליישר-למרכז את טקסט התווית שלך — מכווץ אוטומטית את הגופן עד שהוא מתאים בתוך 90% מרוחב הקנבס.
3
ייצוא כ-PNG, JPEG, או SVG
הורדות PNG ו-JPEG קוראות ל-canvas.toDataURL(), ממירות את תוצאת ה-base64 ל-Blob בזיכרון, ומפעילות את ההורדה — הכול סינכרונית בתוך המחווה של המשתמש כך שכללי ההורדה של iOS Safari מסופקים. ייצוא SVG בונה מחרוזת SVG עצמאית עם rect תואם, קווים אלכסוניים אופציונליים, ואלמנט טקסט, ואז שומר אותה כקובץ .svg.
4
ייצוא באצווה וקיצורי העתקה
כפתור 'הורד את כל ההגדרות המוגדרות מראש' מייבא דינמית את JSZip, מציג מחדש כל אחד מ-11 הגדלים המוגדרים מראש על קנבס מחוץ-למסך באמצעות אותה פונקציית ציור, ואורז את כל ה-PNGs ל-ZIP בודד. כפתורי העתקה פולטים כתובת נתוני PNG, תגית img SVG inline, או הצהרת background-image של CSS להדבקה מיידית בקוד.