Softonic

เครื่องสร้างรูปจุดแบบ SVG

ขั้นตอน 1 / 3
ถัดไป

ลวดลายจุดถือเป็นองค์ประกอบพื้นฐานที่ใช้กันอย่างแพร่หลายในพื้นหลังเว็บไซต์สมัยใหม่ เช่น เครือข่ายจุดเล็กๆ ที่ปรากฏบนหน้าเอกสารของ Notion จุดดอกไม้บนส่วนฮีโร่ หรือพื้นผิวคล้ายเม็ดธัญพืชบนการ์ด โปรแกรมสร้างลวดลายนี้สร้างไฟล์ SVG เพียงไฟล์เดียวโดยใช้คำจำกัดความ <pattern> แบบฝังตรง ในทำนองนี้ไฟล์จะมีขนาดเล็กมาก (โดยทั่วไปไม่เกิน 500 ไบต์) และสามารถแสดงผลได้อย่างสมบูรณ์ทุกขนาด ผู้ใช้สามารถควบคุมพื้นที่การแสดงผล ระยะห่างระหว่างจุด รัศมี สีของจุด และพื้นหลังได้

วิธีสร้างลวดลายจุด

  1. 1

    ตั้งค่าผืนผ้าใบ

    ความกว้างและความสูงในหน่วยพิกเซล สำหรับพื้นหลังแบบ CSS ค่าดังกล่าวสามารถเล็กได้ (เช่น 800×600) และสามารถจัดเรียงเป็นแผ่นซ้อนกันได้

  2. 2

    เลือกระยะห่าง

    ระยะห่างระหว่างจุดศูนย์กลางของจุดที่อยู่ติดกัน: เมื่อเท่ากับ 20–40 พิกเซล จะให้ผลลัพธ์ที่เรียบร้อย ในขณะที่เมื่อเท่ากับ 10 พิกเซล จะให้ผลลัพธ์ที่ไม่สม่ำเสมอหรือมีความรบกวน

  3. 3

    ตั้งรัศมีของจุด

    1–3 พิกเซลสำหรับเนื้อผิวที่ละเอียดอ่อน และ 4–8 พิกเซลสำหรับจุดพอลก้าที่ออกแบบมาอย่างตั้งใจ

  4. 4

    เลือกสี

    การเติมจุด (ส่วนหน้า) และพื้นหลังของผืนผ้าวาดภาพ ให้ตั้งค่าพื้นหลังเป็น `transparent` เพื่อให้ได้รูปแบบการทับซ้อนที่ถูกต้อง

  5. 5

    คัดลอกไฟล์ SVG

    ให้วางข้อมูลไว้ในไฟล์ HTML ของคุณ หรือใช้ชื่อ `background-image: url("data:image/svg+xml,...")` ใน CSS

วิธีการกำหนดรูปแบบ

เครื่องกำเนิดจะสร้างองค์ประกอบ <pattern> ภายในองค์ประกอบ <defs> และเติมข้อมูลจากองค์ประกอบ fill="url(#dots)" เข้าไปในองค์ประกอบ <rect> ที่มีพื้นที่แสดงผลเต็ม

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" จำกัดขนาดของไทล์ไว้ที่หน่วยพิกเซล ดังนั้นการปรับขนาดไฟล์ SVG แม่จะไม่ทำให้จุดในภาพบิดเบี้ยว

แบบฟอร์มช่วยจำการปรับแต่งรูปแบบ

ดู ระยะห่าง รัศมี ความต่างของสี
กระซิบ (มองเห็นได้ยากมาก) 30–40 1–1.5 ความทึบ 5–10%
พื้นหลังแบบละเอียดอ่อน 25–30 2 ความทึบ 15–20%
ลวดลายจุดแบบตรง 20 2–3 สีเต็มรูปแบบ
ลวดลายจุดพอลก้าแบบออกแบบมาโดยเฉพาะ 40–60 8–15 สีเต็มรูปแบบ
ผลฮาล์ฟโทน 10 1 การเติมสีแบบเกรเดียนต์

การใช้เป็นพื้นหลังใน CSS

เข้ารหัสไฟล์ SVG เป็น URL ของข้อมูล และนำไปใช้กับองค์ประกอบใดๆ ก็ได้:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

การใช้ CSS เพื่อจัดเรียงภาพในรูปแบบ SVG จะรวดเร็วกว่าการส่งไฟล์ PNG เนื่องจากเบราว์เซอร์จะแปลงรูปแบบนี้ให้อยู่ในรูปแบบราสเตอร์ตามขนาดการแสดงผลสุดท้าย ทำให้ภาพคงความคมชัดได้แม้บนหน้าจอทุกระดับ (1x, 2x, 3x)

เมื่อจุดทำให้การอ่านยากขึ้น

ลวดลายจุดที่อยู่ด้านหลังข้อความหลักอาจทำให้เกิดปรากฏการณ์โมเอร์แบบเรืองแสงบนตัวอักษรขนาดเล็ก หากจำเป็นต้องวางข้อความไว้ด้านบน ควรดำเนินการดังนี้:

  • เพิ่มระยะห่างให้มากกว่า 40 พิกเซล เพื่อให้จุดปรากฏอยู่ระหว่างบรรทัด หรือ
  • ลดความทึบของลวดลายให้ต่ำกว่า 10% หรือ
  • วางข้อความไว้ภายในการ์ดแบบเต็มที่เหนือลวดลาย

คำถามที่พบบ่อย

ตั้งสีพื้นหลังเป็น transparent แล้วสีที่ปรากฏจะเป็นเพียงจุดเท่านั้น จากนั้นวางไฟล์ SVG ไว้เหนือสีหรือภาพใดก็ตามที่คุณต้องการแสดง

ไม่ใช่กับเครื่องสร้างรูปแบบนี้ เพราะมันจะสร้างโครงข่ายรูปสี่เหลี่ยมจัตุรัสเท่านั้น หากต้องการรูปแบบหกเหลี่ยม คุณจำเป็นต้องใช้แผ่นลวดลายที่มีความสูงเท่ากับความกว้างคูณด้วย √3 และมีวงกลมสองวงติดอยู่บนแต่ละแผ่น โดยมีระยะห่างกันครึ่งหนึ่งของความยาวระหว่างวงกลมแต่ละวง ควรพิจารณาใช้เครื่องสร้างเส้นทาง SVG หรือเครื่องสร้างรูปแบบหกเหลี่ยมเฉพาะทางแทน

ไฟล์ SVG เองมีความคมชัดไม่ว่าจะแสดงในขนาดใดก็ตาม แต่หากแปลงรูปแบบเป็นรูปแบบราสเตอร์ด้วยความละเอียดต่ำกว่าขนาดของแผ่นพื้นผิวที่ใช้ในการแสดงผล จะเกิดปรากฏการณ์การเลื่อนขอบ (aliasing) ดังนั้นควรส่งออกไฟล์ในขนาดเท่ากับสองหรือสามเท่าของขนาดที่ต้องการแสดง

ให้แทนค่า fill="#hex" ในวงกลมด้วย fill="url(#gradient-id)" และเพิ่มคำนิยามของ <linearGradient> ไว้ภายใน <defs> เดียวกัน จากนั้นจุดแต่ละจุดจะแสดงผลด้วยเกรเดียนต์นั้น, ซึ่งอาจทำให้เกิดค่าใช้จ่ายสูงหากพื้นผิวการแสดงผลมีจุดหลายพันจุด

ตัวแก้ไขมาตรฐานจะส่งพื้นที่ ระยะห่าง รัศมี และสีไปยังเซิร์ฟเวอร์เพื่อเรนเดอร์ตัวอย่าง ในขั้นตอนแบบแนะนำ การตั้งค่าเหล่านี้จะปรากฏใน URL ของหน้าด้วย อย่าใส่ข้อมูลที่ละเอียดอ่อน เพราะเครื่องมือนี้ไม่บันทึกโปรเจ็กต์ลวดลายเพื่อนำกลับมาใช้.

เครื่องมือที่เกี่ยวข้อง

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

เครื่องสร้างกระดาษเส้นบรรทัด

สร้างกระดาษเส้นบรรทัดพร้อมพิมพ์ได้ฟรี เลือกเส้นแบบวิทยาลัย กว้าง หรือแคบ ตั้งระยะห่างบรรทัดเป็นมิลลิเมตร ขนาดกระดาษ และเส้นขอบ แล้วพิมพ์หรือดาวน์โหลดเป็น SVG

เครื่องมือแบ่งกริดรูปภาพ Instagram

แบ่งรูปภาพขนาดใหญ่ให้เป็นกริด Instagram ขนาด 3×3 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย

ตัวแปลง JPG เป็น Word

แปลงภาพถ่าย JPG หรือภาพหน้าจอของข้อความเป็นเอกสาร Word ที่แก้ไขได้ เครื่องมืออ่านคำด้วย OCR แล้วจัดวางเพื่อให้คุณเขียนใหม่ จัดรูปแบบ และนำกลับมาใช้ได้

เครื่องแปลงค่าจาก Pantone เป็น HEX

แปลงสี Pantone PMS ให้เป็นค่า HEX, RGB และ CMYK ที่ใกล้เคียงที่สุด เพื่อให้สอดคล้องกันระหว่างการแสดงผลบนหน้าจอและการพิมพ์ โดยพร้อมดูตัวอย่างสีแบบสวัตช์

เครื่องมือนี้มีให้บริการในภาษาอื่น