/📖คู่มือ
⌘K
เว็บไซต์หลัก
สมัครสมาชิก
ไดนามิกคิวอาร์ & ย่อลิงก์

ดีไซน์ QR Code

อัปเดตล่าสุด: ล่าสุด•เวลาอ่านโดยประมาณ 3 นาที

สตูดิโอออกแบบ QR Code (QR Code Styling Studio)

ระบบ สตูดิโอดีไซน์ QR Code ช่วยให้คุณปรับแต่งลวดลาย สีสัน โลโก้ และกรอบข้อความของ QR Code ให้เข้ากับอัตลักษณ์ของแบรนด์ ใช้งานร่วมกับ Smart Links ทุกรูปแบบ พร้อมระบบแสดงตัวอย่างผลลัพธ์แบบเรียลไทม์ (Live Preview) และรองรับการส่งออกไฟล์ภาพคมชัดสูง (SVG / PNG) สำหรับงานพิมพ์

1. การปรับแต่งรูปทรงและสี (Shape & Color)

การตั้งค่ารูปทรงและสี QR Code

1.1 รูปแบบบอดี้ (Body Form / Dot Patterns)

ลวดลายจุดบอดี้ 6 รูปแบบ:

  • สี่เหลี่ยม (Square): ลวดลายมาตรฐาน คมชัด อ่านค่าง่าย
  • จุดกลม (Dots): ดีไซน์มินิมอล ทรงกลมเรียบ
  • มุมมน (Rounded): สี่เหลี่ยมขอบมน
  • โค้งมนพิเศษ (Extra-Rounded): รูปทรงโค้งมนลึก
  • หยดน้ำ (Classy): ทรงหยดน้ำปลายแหลม
  • หยดน้ำมน (Classy-Rounded): ทรงหยดน้ำผสมมุมมน

1.2 โหมดการกำหนดสีบอดี้ (Color Modes)

  • สีเดี่ยว (Single Color): เลือกสีจาก Color Picker หรือระบุรหัสสี HEX เช่น #1e293b
  • ไล่ระดับสี (Gradient): ผสม 2 เฉดสีเข้าด้วยกัน
    • Color 1 & Color 2: กำหนดสีเริ่มต้นและสีปลายทาง
    • Gradient Type:
      • Linear: ไล่เฉดสีแนวเส้นตรง
      • Radial: ไล่เฉดสีเป็นวงกลมจากจุดศูนย์กลาง

1.3 สีพื้นหลัง (Background Color)

  • กำหนดสีพื้นหลังของ QR Code (ค่าเริ่มต้นคือ #ffffff สีขาว)
  • คำแนะนำ: ควรเลือกสีพื้นหลังที่ตัดกับสีบอดี้อย่างชัดเจน เพื่อให้กล้องสมาร์ตโฟนสแกนติดได้อย่างรวดเร็ว

1.4 กล่องมุมด้านนอก (Corners Square)

ปรับรูปทรงกรอบตาทั้ง 3 มุมของ QR Code:

  • รูปแบบ: สี่เหลี่ยม (Square), วงกลม (Dot), หรือ โค้งมนพิเศษ (Extra-Rounded)
  • กำหนดสีของกรอบตาแยกอิสระจากสีบอดี้ได้

1.5 กล่องมุมด้านใน (Corners Dot)

ปรับรูปทรงจุดดวงตากลางกรอบทั้ง 3 มุม:

  • รูปแบบ: สี่เหลี่ยม (Square) หรือ จุดกลม (Dot)
  • กำหนดสีของจุดดวงตาแยกอิสระได้

2. การใส่โลโก้และไอคอน (Logo & Brand Icons)

การใส่โลโก้และไอคอนบน QR Code

2.1 ไอคอนโซเชียลมีเดียสำเร็จรูป (Built-in Icons)

เลือกใช้ไอคอนแบรนด์มาตรฐาน:

  • YouTube, Facebook, Twitter (X), Instagram, LINE, PayPal, Discord, Pinterest, Stripe, Slack, Twitch, Telegram, Viber
  • คลิกปุ่ม "ปิด/ไม่ใส่โลโก้" เมื่อไม่ต้องการแสดงไอคอน

2.2 อัปโหลดภาพโลโก้ของตนเอง (Custom Logo Upload)

  • ลากหรือคลิกอัปโหลดไฟล์ภาพโลโก้องค์กร
  • รองรับไฟล์ PNG, JPG, SVG (ขนาดไฟล์ไม่เกิน 200KB)
  • ระบบจะปรับสัดส่วนและจัดวางตรงกลาง QR Code อัตโนมัติ พร้อมเว้นระยะปลอดภัยรอบโลโก้
  • สามารถคลิกปุ่ม "ลบรูปภาพ" เพื่ออัปโหลดไฟล์ใหม่ได้ตลอดเวลา

3. กรอบและป้ายข้อความ (Frames & Labels)

การตั้งค่ากรอบและป้ายกำกับ QR Code

  • ข้อความป้ายกำกับ (Message): กรอกข้อความ เช่น "สแกนสั่งอาหาร", "SCAN ME", "เพิ่มเพื่อน LINE"
  • การปรับแต่งกรอบ (Frame Options):
    • สีกรอบ (Frame Color): กำหนดสีของกรอบนอก
    • ความหนากรอบ (Frame Thickness): ปรับความหนาของเส้นขอบ
    • ขอบโค้ง (Curved Edge): ปรับความมนของมุมกรอบ
    • ระยะห่าง (Frame Padding): ปรับระยะห่างระหว่างกรอบกับตัว QR Code
  • การปรับแต่งตัวอักษร (Typography):
    • Font: รองรับฟอนต์มาตรฐานภาษาไทยและสากล เช่น Sarabun, Prompt, Kanit, Noto Sans Thai, Roboto, Open Sans, Lato, Itim
    • สีและขนาดตัวหนังสือ: ปรับแต่งสีและขนาดฟอนต์
    • การจัดวาง (Placement): ชิดซ้าย, กึ่งกลาง, ชิดขวา
    • สวิตช์ตัวหนา (Bold Text Switch)

4. ตัวอย่างการแสดงผลและการดาวน์โหลด (Live Preview & Export)

ตัวอย่างการแสดงผลและการดาวน์โหลด QR Code

4.1 ตัวอย่างสด (Real-time Live Preview)

ทุกการเปลี่ยนแปลงของสี รูปทรง โลโก้ และกรอบ จะแสดงผลบนหน้าจอตัวอย่างทันที

4.2 การปรับขนาดความละเอียด (Resolution Slider)

  • ปรับขนาดภาพได้ตั้งแต่ 400 x 400 px ถึง 4,480 x 4,480 px
  • ความละเอียดแนะนำ: 640 px (หน้าจอเว็บ/มือถือ), 1920 px (สื่อสิ่งพิมพ์ขนาดกลาง), 2400 px (ป้ายโปสเตอร์)

4.3 รูปแบบไฟล์ส่งออก (File Formats)

รูปแบบไฟล์ คุณลักษณะ การนำไปใช้งาน
PNG ไฟล์ภาพ Raster พื้นหลังโปร่งใส/ทึบ ความคมชัดสูง สื่อออนไลน์, โพสต์ Social Media, เว็บไซต์, อีเมล, Presentation
SVG ไฟล์เวกเตอร์ (Vector) คมชัดไม่สูญเสียความละเอียดเมื่อขยาย ป้าย Standee หน้าร้าน, บิลบอร์ด, บรรจุภัณฑ์สินค้า, ส่งโรงพิมพ์

4.4 ปุ่มบันทึกและคำสั่ง

  • บันทึก (Save): บันทึกสไตล์ QR Code ลงในระบบเพื่อนำไปใช้กับลิงก์นั้น
  • บันทึก & ดาวน์โหลด (Save & Download): บันทึกสไตล์พร้อมดาวน์โหลดไฟล์ภาพลงคอมพิวเตอร์
  • ล้างทั้งหมด (Clear All): รีเซ็ตสไตล์ QR Code กลับสู่ค่าเริ่มต้นของระบบ

5. คำแนะนำในการออกแบบ QR Code

[!TIP]

  1. รักษาความเปรียบต่างของสี (High Contrast): สีบอดี้ของ QR Code ควรเข้มกว่าสีพื้นหลังเสมอ เช่น บอดี้สีเข้มบนพื้นหลังสีขาว
  2. หลีกเลี่ยงสีที่กลืนกับพื้นหลัง: สีโทนอ่อนบนพื้นขาวอาจทำให้กล้องสแกนตรวจจับตำแหน่งได้ช้า
  3. ขนาดและพื้นหลังของโลโก้: แนะนำให้ใช้ภาพโลโก้ที่มีพื้นหลังโปร่งใส (Transparent PNG/SVG)
  4. ใช้งาน SVG สำหรับสื่อสิ่งพิมพ์: เมื่อส่งไฟล์ให้โรงพิมพ์สกรีนลงบัตรพนักงาน ป้าย หรือ Standee ให้เลือกไฟล์ SVG เพื่อความคมชัดสูงสุด
ก่อนหน้าDynamic QR Code & ย่อลิงก์ถัดไปสร้างแบบกลุ่ม (Batch Tools)