Softonic

เครื่องมือสร้างเท็กซ์เจอร์นอยส์

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

นอยส์เพียงเล็กน้อยช่วยกลบรอยแถบสี (banding) ทำให้พื้นสีเรียบดูนุ่มขึ้น และทำให้ไล่เฉดสีบนหน้าจอไม่ดูแข็งจนเกินไป เครื่องมือนี้สร้างเท็กซ์เจอร์นอยส์รูปสี่เหลี่ยมจัตุรัสที่ปูต่อกันได้อย่างไร้รอยต่อด้วยฟิลเตอร์ SVG feTurbulence พร้อมตัวปรับสีพื้นหลัง ความทึบของนอยส์ ความถี่ของเกรน และชนิดของนอยส์ จากนั้นส่งโค้ด CSS ที่พร้อมใช้ให้คุณ ทั้งสีพื้นหลังและ data URI ของ SVG ที่วางลงในสไตล์ชีตได้ทันที

วิธีสร้างเท็กซ์เจอร์นอยส์

  1. 1

    เลือกสีพื้นหลัง

    เกรนจะซ้อนอยู่บนสีนี้ จึงควรเริ่มจากสีของพื้นผิวที่คุณจะใช้งานจริง

  2. 2

    ตั้งค่าความทึบ

    ตั้งแต่แทบมองไม่เห็น (2-5%) ไปจนถึงเกรนฟิล์มแบบหนา (25% ขึ้นไป) สำหรับงาน UI ค่าน้อย ๆ มักได้ผลดีกว่า

  3. 3

    ปรับความถี่

    ความถี่พื้นฐานสูงจะได้เกรนละเอียดและถี่ ส่วนความถี่ต่ำจะได้ปื้นใหญ่และนุ่มกว่า

  4. 4

    เลือกชนิดของนอยส์

    แฟร็กทัลนอยส์ให้ผลนุ่มและเป็นธรรมชาติ ส่วนเทอร์บิวเลนซ์ให้คอนทราสต์สูงและดูคล้ายกลุ่มเมฆ

  5. 5

    คัดลอกโค้ด CSS

    ผลลัพธ์คือสีพื้นหลังพร้อม data URI ของ SVG แบบอินไลน์ วางลงในสไตล์ชีตได้ทันที

นอยส์แบบ SVG ด้วย feTurbulence

วิธีที่กระชับที่สุดในการใส่นอยส์คือใช้ SVG คู่กับฟิลเตอร์เทอร์บิวเลนซ์

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

ใส่แบบอินไลน์เป็น background-image: url("data:image/svg+xml,...") แล้วคุณจะได้โค้ดเพียงไม่กี่ร้อยไบต์ที่ปูต่อกันได้บนทุกพื้นผิว โดยไม่ต้องเรียก HTTP เพิ่มอีกหนึ่งรายการ

ค่าที่แนะนำตามลักษณะงาน

ลักษณะงาน ความทึบ ความถี่พื้นฐาน ชนิดของนอยส์
แผง UI โหมดมืด 3-5% 0.8-1.0 แฟร็กทัลนอยส์
ซ้อนบนไล่เฉดของส่วนฮีโร่ 5-10% 0.7-0.9 แฟร็กทัลนอยส์
การ์ดผิวคล้ายกระดาษ 8-15% 0.6-0.8 แฟร็กทัลนอยส์
ภาพแนวเกรนฟิล์ม 15-25% 0.9-1.2 แฟร็กทัลนอยส์
เกรนโปสเตอร์สไตล์เรโทร 25-40% 0.4-0.6 เทอร์บิวเลนซ์

ข้อสังเกตด้านประสิทธิภาพ

  • เทอร์บิวเลนซ์ของ SVG ไม่ต้องพึ่ง GPU ในเบราว์เซอร์ส่วนใหญ่ ใช้ได้กับพื้นหลัง CSS และวาดใหม่ได้โดยใช้ทรัพยากรน้อย
  • ใช้ไทล์เดียวซ้ำ เครื่องมือนี้สร้างไทล์ขนาด 200 x 200 พร้อม stitchTiles="stitch" จึงปูซ้ำได้แบบมองไม่เห็นรอยต่อบนหน้าจอขนาดใหญ่
  • หลีกเลี่ยงการทำนอยส์แบบเคลื่อนไหว feTurbulence ไม่เหมาะกับการทำแอนิเมชันหากไม่เปลี่ยนค่า baseFrequency และประสิทธิภาพจะตกลงมากเมื่อเปิดใช้งานนาน ๆ
  • ซ้อนนอยส์บนไล่เฉดสี วางเกรนที่ความทึบ 10% ทับบนไล่เฉดสีของ CSS จะได้พื้นผิวที่มีมิติกว่าการใช้ไล่เฉดเพียงอย่างเดียว

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

ใช้เมื่อมีพื้นสีเรียบหรือไล่เฉดสีผืนใหญ่ที่ดูสะอาดจนไร้ชีวิตชีวา ส่วนฮีโร่ พื้นหลังของโมดัล และแผง UI สีเข้มจะดูมีมิติขึ้นเมื่อใส่นอยส์ราว 3-10% แต่ควรเลี่ยงบริเวณที่มีตัวหนังสือ เพราะอาจทำให้อ่านยากขึ้น

ในฟิลเตอร์ feTurbulence ของ SVG นั้น type="turbulence" จะให้ค่าสัมบูรณ์ของนอยส์แบบเพอร์ลิน (คอนทราสต์สูง ดูคล้ายกลุ่มเมฆ) ส่วน type="fractalNoise" จะให้ค่าที่มีทั้งบวกและลบ (เกรนนุ่มและเป็นธรรมชาติกว่า) สำหรับงาน UI แฟร็กทัลนอยส์แทบจะเป็นตัวเลือกที่ใช่เสมอ

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

ได้ ไล่เฉดสีบนจอแบบ 8 บิตต่อช่องสีมักเห็นรอยแถบชัดเมื่อคอนทราสต์ต่ำ การซ้อนนอยส์ราว 2-3% จะช่วยทำดิเทอริงให้การไล่สีเนียนขึ้น และกำจัดรอยแถบได้ทั้งบนมือถือและจอมอนิเตอร์

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

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

ตัวตรวจสอบ OpenAPI

วางเอกสาร OpenAPI หรือ Swagger แบบ JSON หรือ YAML แล้วตรวจโครงสร้างหลัก: ฟิลด์เวอร์ชัน ออบเจกต์ info และ paths พร้อมข้อผิดพลาดและคำเตือนที่ชัดเจน

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