พื้นหลังกริดโหมดมืด

ถัดไป

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

วิธีสร้างกริดโหมดมืด

  1. 1

    ตั้งค่าพื้นหลังก่อน

    เลือกสีดำเกือบสนิท เช่น #0b0f19 จากตัวเลือกพื้นหลังในขั้นตอนที่สอง

  2. 2

    เลือกสีเส้นที่จางๆ

    ตั้งสีเส้นเป็นสีเทาฟ้าเข้ม เช่น #1f2937

  3. 3

    กำหนดขนาดผืนผ้าใบและช่อง

    ป้อน 960 คูณ 540 และขนาดกริด 30 สำหรับสไลด์จอกว้าง

  4. 4

    ใช้เส้นบางๆ

    ใช้ความหนาเส้น 1 แล้วคัดลอก SVG ในขั้นตอนสุดท้าย

ความต่างของสีคือหัวใจ

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

สไตล์ พื้นหลัง สีเส้น ขนาดช่อง
โหมดมืดแบบเรียบ #0b0f19 #1f2937 30
แผงสเลตเทา #0f172a #334155 40
เทอร์มินัลย้อนยุค #000000 #22c55e 16

แถวเทอร์มินัลย้อนยุคตั้งใจให้จัดจ้าน สีเขียวสว่างบนดำสนิทเหมาะกับเกมหรือสไตล์แฮกเกอร์ แต่ไม่เหมาะเป็นฐานของข้อความยาวๆ

ตัวอย่างขนาดสไลด์

สไลด์อัตราส่วน 16:9 ขนาด 960 x 540 px ที่มีช่อง 30 px จะได้ 32 คอลัมน์และ 18 แถว รวม 576 ช่อง ทั้งสองมิติหารด้วย 30 ลงตัว จึงไม่มีช่องที่ไม่เต็ม ที่ขนาด 1920 x 1080 px และช่อง 60 px จะได้เลย์เอาต์ 32 x 18 แบบเดียวกันในขนาดเป็นสองเท่า

ข้อควรระวังเมื่อใช้พื้นหลังมืด

เส้นบางอาจกะพริบบนจอบางรุ่นเมื่อความหนาเส้นเป็นทศนิยม ความหนาเส้น 1 มักเสถียรที่สุด หากหน้าของคุณสลับระหว่างโหมดสว่างและโหมดมืด ให้สร้าง SVG แยกสำหรับแต่ละโหมดแล้วสลับในโค้ดของคุณเอง เพราะเครื่องมือนี้ให้คู่สีคงที่เพียงคู่เดียว

การใช้งาน

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

ให้สอดคล้องกับส่วนอื่นของหน้า

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

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

พื้นหลัง #0b0f19 กับเส้น #1f2937 เป็นจุดเริ่มต้นที่สงบ หากเส้นมองเห็นยาก ให้ทำให้สว่างขึ้นเล็กน้อย

เครื่องมือนี้ทำไม่ได้ มันสร้าง SVG เดียวที่มีสีคงที่ ให้สร้างเวอร์ชันสว่างและเวอร์ชันมืดแยกกัน แล้วสลับระหว่างสองไฟล์ในโค้ดของหน้าคุณเอง

ไม่ได้ ผลลัพธ์เป็นกริดสม่ำเสมอที่มีสีเส้นเดียว เอฟเฟกต์เช่นการไล่จางต้องใช้เลเยอร์เพิ่มเติมในโปรแกรมแก้ไขหรือในสไตล์ชีต

สีเส้นใกล้กับพื้นหลังเกินไป ให้เพิ่มความสว่างเล็กน้อยหรือเพิ่มความหนาเส้นจาก 1 เป็น 1.5

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

สร้างกระดาษบรรทัดห้าเส้น

สร้างกระดาษบรรทัดห้าเส้นสำหรับพิมพ์ ทั้งบรรทัดเปล่า กุญแจซอลหรือกุญแจฟา บรรทัดคู่สำหรับเปียโน หรือแท็บกีตาร์ เลือกจำนวน ระยะห่างเส้น A4 หรือ Letter และขอบกระดาษ แล้วดาวน์โหลด PDF หรือ SVG

เครื่องมือทำภาพโมเสกจากตัวต่อ LEGO

เปลี่ยนรูปถ่ายเป็นแบบโมเสกจัตุรัส 16, 32, 48 หรือ 64 ช่องต่อด้าน ดูสีโดยประมาณ นับแผ่นตัวต่อ 1×1 และดาวน์โหลดคู่มือประกอบที่มีหมายเลขกำกับ

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

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

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

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

ปรับขนาด PNG

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

เครื่องอ่านบาร์โค้ด

เลือกรูปภาพบาร์โค้ดเพื่ออ่านค่าที่เข้ารหัสและชนิดของบาร์โค้ด รองรับ EAN-13, UPC-A และ Code 128 พร้อมผลตรวจเลขตรวจสอบของ EAN และ UPC

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

คู่มือและกรณีการใช้งาน