บทเรียน illustrator · advanced · 90 นาที
ออกแบบฟอนต์ไทย: พื้นฐานโครงสร้างตัวอักษรใน Illustrator
ตรวจสอบข้อมูลเมื่อ April 2026
สิ่งที่คุณจะได้
ชุดพยัญชนะไทยพื้นฐาน 5 ตัว — ก ข ค ง จ — ที่วาดใน Illustrator ตามหลักการโครงสร้าง ในระบบ em-square 700 หน่วยตามวิธีการของ Cadson Demak พร้อมส่งเข้า Glyphs หรือ FontLab เพื่อพัฒนาเป็น typeface เต็มรูปแบบ บทความนี้ไม่ใช่แบบฝึก trace reference; เป็นบทเรียนแรกที่เป็นการออกแบบฟอนต์ไทยจริง พยัญชนะห้าตัวนี้ครอบคลุมตรรกะเส้นและหัวทุกแบบในอักษรไทย เมื่อวาดทั้งห้าได้คงที่แล้ว คุณจะวาดครบ 44 ตัวได้ ระดับความยากสูง สมมติว่าคุณใช้ Illustrator ระดับพื้นฐานได้คล่อง
สิ่งที่ต้องเตรียม
- ซอฟต์แวร์: Adobe Illustrator 2025 สำหรับ production ฟอนต์เต็มรูปแบบต้องมี Glyphs 3 (Mac) หรือ FontLab 8 (cross-platform) — แต่การออกแบบตัวอักษรเกิดใน Illustrator
- Reference: ตัวอย่างฟอนต์ไทยมีหัวที่ต้องการใช้เป็นต้นแบบความละเอียดสูง ควรเป็น IBM Plex Thai Looped หรือ Noto Sans Thai Looped สำหรับเกณฑ์สมัยใหม่ อย่า copy — ใช้เป็น reference ด้านสัดส่วน
- Grid: em-square 700 หน่วย save เป็น
thai-em-700.aiหรือใช้ template ของเรา - เวลา: 90 นาทีสำหรับพยัญชนะพื้นฐาน 5 ตัวครั้งแรก นักออกแบบที่มีประสบการณ์ทำชุดนี้ใน 40 นาที
- บริบททางวัฒนธรรม: การออกแบบฟอนต์ไทยต้องการให้ผู้ออกแบบเข้าใจตรรกะของมือ — ทิศทางและลำดับการเขียนที่คนเขียนอักษรไทยทำตาม ขาดสิ่งนี้ ตัวอักษรจะดูโครงสร้างผิด แม้สัดส่วนจะถูกก็ตาม
Step 1: สร้าง template em-square
File > New > Print, Width 700 mm, Height 700 mm (ทำที่ 1mm = 1 em unit เพื่อมองเห็นชัด; export แบ่งกลับลงมา) Color Mode CMYK สร้าง guides แนวนอน 5 เส้นสำหรับโซน body ของตัวอักษรไทย: tone-mark tier ที่ 700 mm, above-vowel tier ที่ 620 mm, consonant top ที่ 540 mm, consonant baseline ที่ 180 mm, below-vowel tier ที่ 80 mm body ของพยัญชนะอยู่ที่ 540-180 = 360 mm ประมาณ 51% ของ em-square วิธีของ Cadson Demak (Typotheque Journal, 2022) กำหนดสัดส่วน body นี้ Save เป็น thai-em-grid.ai แล้วล็อก guide layer
Step 2: วาด ก (ko kai) — พยัญชนะต้นแบบ
ก มีองค์ประกอบโครงสร้างทุกอย่างในพยัญชนะไทย: หัวที่บน-ซ้าย, stem แนวตั้ง, และฐานแนวนอนพร้อมขดส่งออก เริ่มจากหัว ใช้ Ellipse tool วาดวงกลม 90 × 90 mm ที่บน-ซ้ายของโซน body ขอบบนที่ 540 mm ปรับด้วย Direct Selection (A) ให้หัวกว้าง 88 mm × สูง 85 mm (หัวในฟอนต์มีหัวกว้างกว่าสูงเล็กน้อย) หัวเปิดลง-ขวา วาด stem: path แนวตั้งจากล่างของหัวไปยัง baseline (180 mm) ด้วย stroke width 32 mm สม่ำเสมอ ที่ baseline วาด path แนวนอนยาว 180 mm ไปขวา เพิ่มขดส่งออก: ขด quarter-circle ที่ปลายขวาของฐาน โค้งขึ้นแล้วหยุด Outline stroke (Object > Path > Outline Stroke) เพื่อแปลงเป็นรูปทรงที่เติมสี Pathfinder > Unite
Step 3: วาด ข (kho khai) — หัวบวก stem เอียง
ข ใช้หัวเดียวกับ ก แต่ stem เอียงแทนแนวตั้ง Copy หัวจาก ก (Cmd/Ctrl+C > Cmd/Ctrl+F) วางที่บน-ซ้ายของช่องพยัญชนะใหม่ วาด stem เป็นเส้นทแยงจากล่างของหัวไปยังจุดกลางของ baseline เอียงขวา 8° จาก baseline วาดฐานแนวนอนไปขวา 170 mm เพิ่มเอกลักษณ์ของ ข: hook เล็ก ๆ ที่ด้านบน-ขวาของหัว โค้งออกนอก hook นี้คือความต่างของ ก กับ ข: ขดเดียว 20 mm ชี้ขวา Outline และ Unite
Step 4: วาด ค (kho khwai) — เวอร์ชันไม่มีหัวสำหรับเปรียบเทียบ
ค ในรูปแบบไม่มีหัวสมัยใหม่ไม่มีหัวเลย — บน-ซ้ายจบด้วยขดเปิดเล็ก ๆ วาด stem เป็นแนวตั้งจาก 540 mm ถึง baseline, stroke width 32 mm ที่ด้านบน วาดขด 30 mm เฉียงไปบน-ขวา จบที่ปลายแหลม นี่คือโครงสร้างไม่มีหัวที่ IBM Plex Thai และ Noto Sans Thai Looples ใช้ (ดู /th/fonts/ibm-plex-thai/) ฐานแนวนอนเหมือน ก เทียบภาพกับ ก ของคุณ — หัวแบบไม่มีหัวคือสิ่งที่ การปฏิวัติฟอนต์ไม่มีหัว พูดถึง
Step 5: วาด ง (ngo ngu) — พยัญชนะรูปคลื่น
ง ไม่มีหัว; เอกลักษณ์คือโค้งคลื่นที่ด้านบน วาด path เดียวที่เริ่มจาก baseline ซ้าย ขึ้นแนวตั้งไปถึง 540 mm โค้งขวาข้าม 120 mm เป็นคลื่น S แล้วลงกลับไปที่ baseline คลื่นต้องต่อเนื่อง — ไม่มี corner anchor ใช้ Pen tool ที่มี handle ยาว stroke width คง 32 mm Outline และ Unite ง เป็นเครื่องทดสอบวินัยของนักออกแบบที่ชัดเจนที่สุด; คลื่นต้องไหลโดยไม่มีมุมหัก
Step 6: วาด จ (cho chan) — หัวพร้อม stem ขวา
จ มีตรรกะเดียวกับ ก แต่ stem อยู่ขวา หัวอยู่บน-ขวา เปิดลง-ซ้าย stem ลงจากหัวไปยัง baseline ทางขวา ฐานแนวนอนยื่นไปซ้ายจากฐานของ stem Mirror ก ในแนวนอนเป็นจุดเริ่ม (Object > Transform > Reflect > Vertical) แล้วปรับหัว — หัวของ จ เล็กกว่าเล็กน้อย (80 × 78 mm) และเปิดในมุมที่ชันกว่า นี่เป็นความต่างที่ละเอียดอ่อนแต่สำคัญ; สับสน ก กับ จ จะเปลี่ยนความหมายของคำ
Step 7: เปรียบเทียบ จัดเรียง ส่งออก
วางพยัญชนะทั้งห้าในแถวแนวนอนเดียวที่ baseline เดียวกัน ตรวจการจัด optical: พยัญชนะไทยที่มีหัวต้องตั้งต่ำกว่ารูปแบบไม่มีหัวเล็กน้อยเพื่อให้ด้านบนของหัวจัดอยู่กับ cap-line ไม่ใช่เลยขึ้นไป ปรับน้ำหนัก stem ให้ตรงกันทางสายตา — สายตาอ่าน คลื่น ง ว่าหนักกว่าแนวตั้ง ก เล็กน้อย ดังนั้น stroke ของ ง ต้องลด 1-2 mm เลือกทั้งห้าตัว Object > Path > Outline Stroke ถ้ายังไม่ outline, Pathfinder > Unite แต่ละพยัญชนะ File > Export > Export As > SVG แยกทีละตัว — SVG เป็น format มาตรฐานในการ import เข้า Glyphs และ FontLab ตั้งชื่อไฟล์ uni0E01.svg (ก), uni0E02.svg (ข), uni0E04.svg (ค), uni0E07.svg (ง), uni0E08.svg (จ) ใช้ Unicode hex ของ Thai block
ข้อควรรู้ทางวัฒนธรรม
การออกแบบฟอนต์ไทยมีประเพณีตรรกะลำดับเส้นที่แข็งแรง: การออกแบบที่เพิกเฉยต่อการเคลื่อนมือของคนเขียนจะดูโครงสร้างผิดแม้สัดส่วนจะถูก หลักการสามข้อ ข้อแรก หัวทุกหัวเขียนด้วยการเคลื่อนตามเข็มนาฬิกาครั้งเดียวจากจุดเชื่อมของหัวกับ stem — ดังนั้นทิศทางเปิดของหัวต้องสอดคล้องกับการเคลื่อนนั้น การออกแบบที่มีปากเปิดกลับด้านอ่านแล้วดูหมุนกลับ ข้อสอง stem แนวตั้งเขียนจากบนลงล่าง ดังนั้นน้ำหนักมักหนาเล็กน้อยที่ด้านล่างในแบบ humanist และคงที่ในแบบเรขาคณิต — แต่ stem ที่หนาด้านบนผิดเสมอ ข้อสาม ฐานแนวนอนเขียนจากซ้ายไปขวาในทุกพยัญชนะ; ฐานที่ดูเหมือนเคลื่อนจากขวาไปซ้ายเป็นข้อผิดพลาดเชิงโครงสร้าง ไม่ใช่เรื่องรสนิยม; สืบทอดมา 700 ปีของธรรมเนียมการเขียน (วินิจฉัยกุล, 2018)
ข้อผิดพลาดที่พบบ่อย
- น้ำหนัก stroke ไม่เท่ากันในอักษรชุด พยัญชนะไทยต้องจับคู่ทางสายตา — stem 32 mm บน ก และ 28 mm บน จ อ่านแล้วเป็นฟอนต์คนละตัว
- หัวเปิดกลับด้าน ทำลายตรรกะมือของคนเขียน
- ไม่มีขดส่งออก ขดส่งออกของ ก ไม่ใช่ของประดับ; เป็นลักษณะเชิงโครงสร้าง
- เริ่มจากสระ สระวาดหลังจากล็อก body zone ของพยัญชนะแล้ว ออกแบบขนานกันทำให้สัดส่วนเพี้ยน
- ลอก specimen แทนการสร้าง การออกแบบฟอนต์ไทยแบบมืออาชีพเริ่มจากหลักการเสมอ; trace คือการเรียนรู้แบบจำซึ่งได้ผลลัพธ์ที่ลอกเลียนแบบ
ไฟล์และขั้นตอนถัดไป
กริด em-square 700 หน่วยอยู่ที่ /th/fonts/categories/loopless/ พร้อมเอกสารอ้างอิงการสร้างพยัญชนะครบ 44 ตัว สำหรับบริบทของขบวนการฟอนต์ไม่มีหัวที่หล่อหลอมการออกแบบฟอนต์ไทยร่วมสมัย อ่าน การปฏิวัติฟอนต์ไม่มีหัว: ฟอนต์ไทยยุคใหม่ และ pillar คู่มือครบถ้วนเรื่องไทโปกราฟีไทย ไดเรกทอรีฟอนต์ครบถ้วนพร้อมฟอนต์ reference การสร้าง: /th/fonts/ ขั้นถัดไปใน workflow การออกแบบฟอนต์ — แปลง SVG จาก Illustrator เป็นไฟล์ .otf ที่ใช้งานได้ — อยู่ในบทความ Glyphs app แยก (เร็ว ๆ นี้)
ตรวจสอบข้อมูลเมื่อ April 2026
แหล่งอ้างอิง
- The Thai consonant ก (ko kai) is the canonical starting point for Thai typeface design because its construction contains every primary stroke logic of the script: loop, vertical stem, and horizontal base.—Chaiwong, A. (2019). Designing Thai Type: A Practical Manual. Cadson Demak Publishing. (accessed Apr 5, 2026)
- Cadson Demak's design methodology specifies a 700-unit em-square with a 500-unit x-height equivalent for loopless Thai, giving a 71% proportion that matches Latin humanist type.—Cadson Demak — Type Design Methodology, Typotheque Journal, 2022 (accessed Apr 2, 2026)
- Thai consonants occupy a body zone equivalent to Latin cap-height, with vowels and tone marks extending above and below; a functional Thai typeface design must first lock this body-zone before adding vowel glyphs.—Winitchaikul, P. (2018). Thai Letterform Construction. Silpakorn University Press. (accessed Apr 4, 2026)
- Illustrator's Glyphs panel and variable-width stroke profiles are the core Thai type-design tooling before export to FontLab or Glyphs app for hinting and OpenType production.—Adobe — Working with glyphs, Illustrator User Guide (2024 revision) (accessed Apr 6, 2026)