what this does
เปลี่ยนรูปภาพของคุณให้เป็น tile แบบซ้ำ
Pattern Generator สร้างพื้นหลังจาก preset เรขาคณิต 16 แบบ — หรือจากรูปที่คุณอัปโหลด ใช้ swatch texture โลโก้แบรนด์ crop รูป หรือไฟล์ PNG JPEG WebP SVG เป็น repeat tile
เครื่องมือทำงานทั้งหมดในเบราว์เซอร์ เลือกไฟล์ ปรับสีพื้นหลัง ขนาด tile และความโปร่งใส แล้วคัดลอก CSS หรือดาวน์โหลด SVG หรือ PNG ไม่ต้องมีบัญชีและไม่อัปโหลดไปเซิร์ฟเวอร์
step-by-step
อัปโหลดและส่งออกใน 5 ขั้นตอน
- เปิด Pattern Generator
- ในตัวเลือก pattern คลิกการ์ด Your image — tile อัปโหลดที่ต้น grid
- เลือกไฟล์ PNG JPEG WebP หรือ SVG จากอุปกรณ์ ตัวอย่างจะอัปเดตเมื่อโหลดรูปเสร็จ
- ปรับ Background colour Scale และ Opacity จนการซ้ำในตัวอย่างดูถูกต้อง
- คลิก Copy CSS Download SVG หรือ Download PNG เพื่อใช้ pattern ในโปรเจกต์
your file
เกิดอะไรขึ้นกับรูปภาพของคุณ
Pattern Generator crop รูปเป็นสี่เหลี่ยมจัตุรัสตรงกลาง — กลางไฟล์ ใช้ด้านที่สั้นกว่าเป็นขนาด crop — แล้ว resize สี่เหลี่ยมนั้นเป็นขนาด tile ตาม scale ปัจจุบัน (สูงสุด 256 px)
การประมวลผลทั้งหมดเกิดในหน่วยความจำบนอุปกรณ์ ไฟล์ต้นฉบับไม่ถูกอัปโหลดไป Tiny Design Shop หรือเซิร์ฟเวอร์บุคคลที่สาม
transparent pngs
PNG โปร่งใสและสีพื้นหลัง
หากรูปมีความโปร่งใส — PNG WebP ที่มี alpha หรือ SVG — Pattern Generator จะเติม tile ด้วย Background colour ที่คุณเลือกก่อนวาดรูปทับ ส่วนที่ทึบของรูปยังมองเห็นได้ พิกเซลโปร่งใสจะเห็นสีพื้นหลังทะลุผ่าน
ใช้เพื่อควบคุมสีช่องว่างระหว่างโลโก้ ทำให้ขอบ texture ที่ตัดออกนุ่มขึ้น หรือจับคู่สีพื้นผิวแบรนด์เมื่อไฟล์ต้นฉบับไม่มีพื้นหลังของตัวเอง
export
คัดลอก CSS SVG หรือ PNG
Copy CSS ให้บล็อก background-color background-image และ background-size ที่พร้อมวาง โดยฝัง tile เป็น data URI วางใน stylesheet หรือ inline style ขององค์ประกอบที่ควรแสดงการซ้ำ
Download SVG ส่งออก tile เป็นไฟล์ vector แยก — เหมาะสำหรับ fill ใน Figma หรือส่งมอบงานดีไซน์ Download PNG ส่งออก raster 1600×900 ของตัวอย่างแบบ tile — เหมาะสำหรับสไลด์ social preview หรือเครื่องมือที่ไม่รับพื้นหลัง data URI
รูภาพ custom ที่มีรายละเอียดมากจะสร้าง CSS snippet ที่ยาวขึ้น หากเครื่องมือเตือนว่า CSS ใหญ่ แนะนำใช้ Download PNG หรือโฮสต์ tile เป็นไฟล์รูปแยก แทน data URI แบบ inline
limits
ขนาดไฟล์ ขนาด tile และหน่วยความจำ session
อัปโหลดจำกัดที่ 8 MB รองรับ PNG JPEG WebP และ SVG tile จำกัดที่ 256 px ด้านที่ยาวที่สุดเมื่อ scale สูงสุด — เพียงพอสำหรับ CSS repeat ที่คมชัดโดยไม่ทำให้ stylesheet บวม
รูภาพ custom อยู่ในแท็บเบราว์เซอร์นี้เท่านั้น รีเฟรชหน้าหรือปิดแท็บแล้วการอัปโหลดจะถูกล้าง — ต้องเลือกไฟล์ใหม่ ไม่มี cloud save หรือ sync ข้ามอุปกรณ์
privacy
ไฟล์ไม่ออกจากอุปกรณ์ของคุณ
Pattern Generator ประมวลผลการอัปโหลดในเบราว์เซอร์ของคุณ crop resize ตัวอย่าง และส่งออกทำงานบนเครื่องของคุณ — ไม่ส่งอะไรไปเซิร์ฟเวอร์ Tiny Design Shop ปิดแท็บเมื่อเสร็จ ไม่เก็บสำเนารูปภาพ