เครื่องมือสร้างเกรเดียนต์แบบตาข่าย

รูปแบบทั้งสามสร้างขึ้นอย่างไร

• PNG ใช้วิธีผสมสีตามระยะห่างแบบเดียวกับภาพตัวอย่าง หากเลือกอัตราส่วนภาพต่างกัน จุดตำแหน่งสัมพัทธ์ชุดเดิมจะถูกวาดลงในขนาดใหม่
• SVG ซ้อนเกรเดียนต์รัศมีที่จุดควบคุมเดียวกันและยังคมชัดเมื่อขยาย
• CSS สร้างชั้น radial-gradient() หนึ่งชั้นต่อหนึ่งจุดเหนือสีพื้นฐาน โดยไม่ต้องมีไฟล์ภาพแยก

SVG และ CSS ใช้ข้อมูลโปรเจกต์ชุดเดียวกัน แต่เป็นการเลียนแบบลักษณะตาข่ายแบบเบา พิกเซลจึงไม่เหมือนกับ PNG ทุกจุด

แนวทางเลือกชุดสี

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

การวางจุดควบคุม

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

จุดสามารถอยู่ชิดขอบได้ การวางหลายจุดใกล้กันจะรวมสีไว้ในบริเวณเดียว ส่วนการกระจายจุดจะให้พื้นที่แก่แต่ละสีมากขึ้น

การใช้งานที่พบบ่อย

• พื้นหลังส่วนหัวและเส้นแบ่งส่วน
• ภาพสำหรับโซเชียลมีเดียและภาพขนาดย่อของวิดีโอ
• พื้นหลังงานนำเสนอและภาพประกอบ
• หน้าจอเริ่มต้นและแผงตกแต่ง

PNG ใกล้เคียงภาพตัวอย่างมากที่สุด ใช้ SVG เมื่อต้องขยายอย่างคมชัด หรือใช้ CSS เมื่อต้องการพื้นหลังที่แก้ไขได้โดยไม่มีไฟล์ภาพ

ความเป็นส่วนตัวและการจัดเก็บ

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

โปรเจกต์สามารถกู้คืนจาก sessionStorage ได้นานสูงสุดหกชั่วโมงขณะที่แท็บปัจจุบันยังเปิดอยู่ เมื่อปิดแท็บ ข้อมูลมักถูกลบก่อนหน้านั้น ดังนั้นควรดาวน์โหลดหรือคัดลอกสิ่งที่ต้องการเก็บไว้