MakeBead

~ คู่มือพิกเซลอาร์ต ~

วิธีวาดพิกเซลอาร์ต

MakeBead Studio

อัปเดตกันยายน 2026 · อ่าน 20 นาที

อ้างอิงจากวิดีโอ The Ultimate Pixel Art Tutorial ของ Saultoons บน YouTube

ในพิกเซลอาร์ต คุณวางทุกพิกเซลเอง พิกเซลเดียวจึงเปลี่ยนสิ่งที่ภาพสื่อได้ คู่มือวาดภาพพิกเซลนี้พาไปตั้งแต่ซิลูเอตแรกจนถึงการลงแสงเงา สี และเทคนิคเก็บงาน ใน 19 บทเรียนสั้น ๆ ทุกตัวอย่างเป็นภาพวาดต้นฉบับขนาดเล็กที่คุณคลิก สลับ หรือลากได้ โดยมีพ่อมดขนาด 32×32 ตัวเดิมเดินเรื่องเกือบทุกบท และท้ายหน้ามีผืนผ้าใบ 16×16 ให้ลองฝึก

  • 19 บทเรียน
  • ตัวอย่างให้ลองคลิก
  • ผืนผ้าใบฝึก 16×16
พ่อมด · 32×32

จานสี

1×
2×
สารบัญ
  1. 01สิ่งที่ต้องมี
  2. 02ขั้นตอน
  3. 03ขนาดผืนผ้าใบ
  4. 04เส้น
  5. 05ฮิว ความอิ่มตัว ค่าน้ำหนัก
  6. 06ความอิ่มตัว
  7. 07คอนทราสต์
  8. 08แสงและเงา
  9. 09โทนร้อนและเย็น
  10. 10การเลื่อนฮิว
  11. 11จานสี
  12. 12ดิเธอริง
  13. 13แอนติเอเลียส
  14. 14แบนดิง
  15. 15เส้นขอบ
  16. 16คลัสเตอร์
  17. 17จอรุ่นเก่า
  18. 18ลูกปัดและงานปัก
  19. 19สไตล์และการฝึก
01

สิ่งที่ต้องมีก่อนเริ่ม

โปรแกรม · Software

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

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

  • Aseprite: โปรแกรมเสียเงินที่นักวาดพิกเซลอาร์ตส่วนใหญ่เลือกใช้ในที่สุด มีเลเยอร์ แอนิเมชัน จานสี และการต่อลายไทล์ ทุกอย่างออกแบบมาเพื่องานพิกเซล
  • LibreSprite: โปรแกรมฟรีที่แยกมาพัฒนาต่อจาก Aseprite รุ่นเก่า
  • Pixelorama: ฟรีและเป็นโอเพนซอร์ส ใช้ได้ทั้งบนเดสก์ท็อปและในเบราว์เซอร์
  • Piskel: ฟรีและใช้ในเบราว์เซอร์ เป็นวิธีลองวาดพิกเซลอาร์ตแบบเร็ว ๆ โดยไม่ต้องติดตั้งอะไร
  • โปรแกรมแก้ไขพิกเซลอาร์ตของ MakeBead: ฟรีและใช้ในเบราว์เซอร์ มีเฟรมแอนิเมชัน และพิมพ์เป็นแพทเทิร์นได้เมื่อภาพวาดจะกลายเป็นลูกปัดหรืองานปัก เปิดโปรแกรมแก้ไข

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

02

ซิลูเอต เส้น สี รายละเอียด

ซิลูเอต → เส้น → สี → เก็บงาน

พ่อมดตัวนี้วาดใน 4 รอบ คือเทซิลูเอต แกะเส้น ลงสีพื้น แล้วเก็บรายละเอียด คลิกที่ขั้นตอนเพื่อดูภาพในขั้นนั้น

ขั้นตอน · 4 ขั้น04 / เก็บรายละเอียด

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

วิธีเริ่มแบบอื่น

พ่อมดตัวเดียว · 4 จุดเริ่ม
ซิลูเอตรูปทรงใหญ่ก่อน
เส้นโครงสร้างสัดส่วนก่อน
บล็อกสีหยาบบรรยากาศก่อน
ภาพที่ย่อลงต้องเก็บงาน
  • เส้นโครงสร้าง: ร่างตัวละครด้วยวงกลม สามเหลี่ยม และสี่เหลี่ยมคางหมู แล้วค่อยเติมรายละเอียดทับ การลงตัวเรื่องสัดส่วนตั้งแต่ต้นช่วยประหยัดการวาดแก้ได้มากในภายหลัง
  • บล็อกสีหยาบ แล้วเก็บงาน: ลงสีเป็นก้อนใหญ่ ๆ แบบหยาบ แล้วเก็บให้เรียบร้อยไปเรื่อย ๆ วิธีนี้เหมาะกับฉากหลัง เพราะจับบรรยากาศได้ทันที ช่วงกลางจะดูรกจนเหมือนไม่มีอะไรเข้าที่ ให้วาดต่อไป
  • วาดใหญ่ แล้วย่อ: วาดในขนาดปกติด้วยแอปวาดรูปใดก็ได้ แล้วย่อลงเป็นพิกเซล เป็นจุดเริ่มที่ใช้ได้ แต่ยิ่งย่อเล็ก รายละเอียดยิ่งแตก และทุกพิกเซลยังต้องเก็บด้วยมืออยู่ดี

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

03

เลือกขนาดผืนผ้าใบ

16×16 · 32×32 · 64×64

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

ตัวละครเดียวกัน · ต่างขนาด
32×32วาดด้วยมือ
32 → 16ย่ออัตโนมัติ
16×16วาดใหม่ด้วยมือ
ซิลูเอตของพ่อมดเรียบง่ายพอจะรอดที่ 16×16 การย่อเวอร์ชัน 32×32 ลงครึ่งหนึ่งแบบอัตโนมัติ (ตรงกลาง) ทำให้ตาหาย เส้นขอบแตก และเคราเป็นก้อน เมื่อเปลี่ยนขนาด ต้องวาดภาพใหม่ (ขวา)

พ่อมดตัวนี้อยู่ที่ 16×16 ก็ได้ ซิลูเอตยังอ่านออก และสไตล์นี้มีรายละเอียดให้เสียไปไม่มาก ที่เป็น 32×32 เพราะมันอยู่ในชุดภาพขนาดเดียวกัน และงานที่จะปรากฏด้วยกันควรใช้สเกลเดียวกัน ขนาดที่ปนกันจะดูเหมือนตัดแปะมา

ขนาดพิกเซลอาร์ตที่ใช้บ่อย

ขนาดการใช้งานทั่วไป
8×8ไอคอน ไอเทมจิ๋ว ฟอนต์พิกเซล
16×16ไอเทมเกมคลาสสิก ไทล์ และตัวละครเล็ก
32×32ตัวละครที่เห็นหน้าชัด ไทล์ขนาดใหญ่ขึ้น
64×64ภาพพอร์ตเทรตและตัวละครที่มีรายละเอียด
29×29เพ็กบอร์ดสี่เหลี่ยมขนาดใหญ่ของลูกปัดรีดร้อนหนึ่งแผ่น
128×128 ขึ้นไปฉากและภาพประกอบ

ถ้าเพิ่งเริ่ม ให้เริ่มจากขนาดเล็ก เพื่อให้รู้สึกถึงน้ำหนักของพิกเซลเดียว ในขนาดเล็ก พิกเซลเดียวเปลี่ยนทั้งภาพได้ ซึ่งมองข้ามได้ง่ายบนผืนผ้าใบใหญ่ ลองกับใบหน้า 10×10 นี้ เลือกสีหน้า หรือคลิกพิกเซลใดก็ได้เพื่อสลับสี

10×10
สี่เหลี่ยมสีทองคือพิกเซลที่ต่างจากหน้าดีใจ แต่ละสีหน้าเปลี่ยนแค่สองถึงหกพิกเซล
04

เส้นที่สะอาด: ดับเบิลและรอยหยัก

ดับเบิล · รอยหยัก · Jaggies

เมื่อได้ขนาดแล้ว ให้แบ่งพื้นที่หลักด้วยลายเส้นง่าย ๆ ตอนวาดเส้นมีสองเรื่องที่ต้องระวัง

ดับเบิล

ตรงที่พิกเซลสองตัวมาชนกันที่มุมเป็นรูปตัว L จะเกิดดับเบิล (double) ซึ่งทำให้เส้นหนาขึ้นตรงนั้น เส้นจึงดูเข้มและแข็งกว่าส่วนอื่น บนเส้นขอบหนาหนึ่งพิกเซล ให้ลบพิกเซลที่เกินตรงมุมออก เส้นจะสะอาดขึ้นและหนาเท่ากันตลอด

เส้นโค้งเดียวกัน
มีดับเบิลบางจุดหนาและแข็งกว่า
ลบมุมออกแล้วหนาเท่ากัน

ดับเบิลไม่ได้ผิดเสมอไป มันช่วยบอกใบ้ถึงเงาได้ และเส้นขอบที่ทำจากเส้นดับเบิลทั้งหมดก็เป็นสไตล์หนักแน่นแบบหนึ่ง

รอยหยัก

เมื่อขั้นบันไดของเส้นตรงหรือเส้นโค้งยาวไม่สม่ำเสมอ จะเกิดรอยหยัก (jaggies) คือมุมแหลมที่คุณไม่ได้ตั้งใจ ให้ลบพิกเซลที่ทำลายจังหวะออก หรือให้ความยาวขั้นบันไดค่อย ๆ เพิ่มและลดอย่างราบรื่น เช่น 5-3-2-1-1-2-3-5 บนเส้นโค้ง

ความยาวขั้นบันได
เส้นตรง · สม่ำเสมอ2-2-2-2-2-2-2
เส้นตรง · หยัก2-3-1-2-1-3-2
เส้นโค้ง · ราบรื่น5-3-2-1-1-2-3-5
เส้นโค้ง · หยัก5-1-3-2-2-1-3-4

รอยหยักก็ตั้งใจใส่ได้เหมือนกัน เส้นบนใบหน้าพ่อมดมีจุดหักที่ตั้งใจไว้หนึ่งจุดเพื่อทำเป็นคิ้ว

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

05

ฮิว ความอิ่มตัว และค่าน้ำหนัก

ฮิว · ความอิ่มตัว · ค่าน้ำหนัก · HSV

ตัวเลือกสีแทบทุกตัวสร้างขึ้นจากระบบ HSV:

  • ฮิว (H): ตัวสีเอง เช่น แดง เหลือง เขียว น้ำเงิน…
  • ความอิ่มตัว (S): ความบริสุทธิ์ของสี ในช่องสี่เหลี่ยมของตัวเลือกสี จะไล่จากสีเทาทางซ้ายไปจนสดที่สุดทางขวา
  • ค่าน้ำหนัก (V): ความสว่างหรือความมืดของสี ไล่จากล่างขึ้นบนของช่องสี่เหลี่ยมโดยประมาณ ข้อนี้สำคัญที่สุด

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

ตัวเลือกสี · ตำแหน่งเดียวกัน
แถบฮิว · 0° → 330°
แดง
เหลือง
เขียว
น้ำเงิน
ตัวเลือกสีทั้งสี่ตั้งไว้ที่มุมขวาบน (ความอิ่มตัว 100% ค่าน้ำหนัก 100%) ตำแหน่งเดียวกันแท้ ๆ แต่พอเป็นขาวดำ ความสว่างกลับต่างกันมาก L* คือความสว่างที่ตารับรู้ 0 คือดำ และ 100 คือขาว

ค่าน้ำหนักคือสิ่งที่ทำให้ภาพมีมิติและรูปทรง แสงและเงาสร้างจากค่าน้ำหนักทั้งนั้น ถ้าค่าน้ำหนักผิด ต่อให้เลือกสีดีแค่ไหนก็ช่วยภาพไม่ได้

ตรวจค่าน้ำหนักแบบเร็ว: เพิ่มเลเยอร์ไว้บนสุด เทสีดำ แล้วตั้งโหมดผสม (blend mode) เป็น Color วิธีนี้ไม่ได้ให้ความสว่างที่แม่นยำ แต่ใกล้พอจะเห็นปัญหา

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

ใช้สีสดอย่างประหยัด

ความอิ่มตัว · Saturation

ถ้ามีสีที่อิ่มตัวสูงมากเกินไป สีจะแย่งกันเด่นและทำให้ตาล้า ถ้ามีสีหม่นมากเกินไป ภาพจะดูขุ่นและซีด

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

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

07

คอนทราสต์นำสายตา

คอนทราสต์ · Contrast

งานศิลปะมีคอนทราสต์หลายแบบ ทั้งค่าน้ำหนัก ฮิว รูปทรง และรายละเอียด คอนทราสต์สูงคือสองสิ่งต่างกันมาก คอนทราสต์ต่ำคือสองสิ่งใกล้เคียงกัน

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

สายตาไปหยุดที่ไหน
ถ้าเติมพื้นผิวและรายละเอียดลงในเครา เคราจะมีคอนทราสต์มากกว่าใบหน้า ใบหน้าจึงไม่เด่นอีกต่อไป

ระหว่างวาด ให้ถามตัวเองเรื่อย ๆ ว่าคอนทราสต์จะชี้ไปที่ส่วนที่สำคัญที่สุดของงานได้อย่างไร

08

แสง เงา และการลงแสงเงา

แสงเงา · Shading

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

โมเดลแสงพื้นฐาน · แสงจากซ้ายบน
  1. 1ไฮไลต์: จุดที่หันรับแสงตรงที่สุด
  2. 2มิดโทน: สีหลักของด้านที่โดนแสง
  3. 3แกนเงา: ตรงที่แสงเปลี่ยนเป็นเงา มักเป็นแถบที่มืดที่สุด
  4. 4เงา: ด้านของลูกบอลที่หันหนีแสง
  5. 5แสงสะท้อน: แสงที่สิ่งรอบข้างสะท้อนกลับมา ทำให้เงาสว่างขึ้น
  6. 6เงาสัมผัส: จุดมืดที่สุด ตรงที่ลูกบอลแตะพื้น
  7. 7เงาตกทอด: เงาที่ลูกบอลทอดลงบนพื้น

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

การลงเงาแบบหมอน

ปัญหาที่เจอบ่อยมากคือไม่สนใจทั้งรูปทรงและแสง แค่ไล่ความมืดจากเส้นขอบเข้าด้านในเป็นวง ๆ นี่คือการลงเงาแบบหมอน (pillow shading) ซึ่งไม่ได้บอกรูปทรง วัตถุจึงดูแบนและพองเหมือนหมอน

สี่สีเดียวกัน
แบบหมอนมืดลงเป็นวงจากขอบ
ตามทิศแสงแสงจากซ้ายบน

วัสดุ

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

วัสดุ 3 แบบ
ผิวด้านไล่นุ่ม ไม่มีจุดสะท้อนแสง
ผิวมันไฮไลต์เล็กและคม
โลหะคอนทราสต์สูง สะท้อนฟ้าและพื้น
09

โทนร้อนและเย็นเป็นเรื่องสัมพัทธ์

อุณหภูมิสี · สภาพแวดล้อม

เรามักได้ยินว่าสีนี้โทนร้อนหรือโทนเย็น แต่สีจะดูร้อนหรือเย็นขึ้นอยู่กับสีที่อยู่ข้าง ๆ

วางเทียบกัน
สีเทาเดียวกันดูเย็นข้างสีแดง ดูร้อนข้างสีน้ำเงิน
แดงกับน้ำเงินแดงเป็นฝ่ายร้อน
แดงกับส้มแดงแดงสีเดิม แต่กลายเป็นฝ่ายเย็น

ในคู่แรก สี่เหลี่ยมเล็กสองอันเป็นสีเทาเดียวกันเป๊ะ ในคู่ที่สาม ครึ่งซ้ายเป็นสีแดงเดียวกับในคู่ที่สอง สีเป็นเรื่องสัมพัทธ์และเปลี่ยนไปตามสีข้างเคียง

สีของวัตถุยังเปลี่ยนไปมากตามแสง สิ่งที่อยู่ใกล้ และสภาพแวดล้อม ลองสลับแสงและโต๊ะด้านล่าง แล้วดูลูกบอลสีเหลืองลูกเดิมเปลี่ยนไป:

บนโต๊ะสีแดง ด้านล่างของลูกบอลจะติดสีแดง นั่นคือแสงที่สะท้อนขึ้นมาจากโต๊ะ
10

การเลื่อนฮิว (hue shifting)

การเลื่อนฮิว · Hue shifting

การเลื่อนฮิว (hue shifting) เป็นเทคนิคยอดนิยมที่ย่อผลของสภาพแวดล้อมเหล่านั้นให้ง่ายขึ้น และทำให้สีน่าสนใจขึ้นไปพร้อมกัน เวลาทำสีให้มืดลงเพื่อเป็นเงา ให้หมุนฮิวไปด้วยเล็กน้อย เงามักเอียงไปทางม่วง และแสงมักเอียงไปทางเหลือง

ชุดไล่สี 5 ขั้น
ค่าน้ำหนักอย่างเดียว
ค่าน้ำหนัก + ฮิว
ลากแถบเลื่อน ทางขวาสีสว่างจะขยับไปทางเหลือง และสีมืดขยับไปทางม่วงน้ำเงิน ส่วนทางซ้ายเปลี่ยนแค่ค่าน้ำหนักกับความอิ่มตัวเท่านั้น

ไม่มีแบบไหนดีกว่ากัน เลือกแบบที่ชอบ ชุดไล่สีที่เลื่อนฮิวมักดูมีมิติกว่า ส่วนชุดไล่สีแบบตรงจะดูสงบและเป็นกราฟิกกว่า

11

จำกัดจานสี

จานสี · Palette

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

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

เวอร์ชันเขียวสี่เฉดมีแค่สี่สีแต่ยังอ่านออก เพราะค่าน้ำหนักในต้นฉบับถูกต้อง ส่วน “สีสุ่ม” ใช้จำนวนสีเท่าต้นฉบับแต่กลับพังทั้งภาพ

แต่จานสีไม่ได้ทำงานแทนคุณ คุณยังต้องคิดเรื่องฮิว ความอิ่มตัว ค่าน้ำหนัก คอนทราสต์ และสไตล์ที่ต้องการอยู่ดี

12

ดิเธอริง (dithering)

ดิเธอริง · Dithering

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

มีแค่ขาวกับดำ
ดำ · ตารางหมากรุก · ขาว
เปลี่ยนความถี่ของลาย แล้วสองสีจะไล่ค่าน้ำหนักได้ทั้งชุดดิเธอร์แบบเป็นระเบียบ 4×4 · 17 ระดับ

ลายดิเธอร์คิดค้นได้หลากหลาย และแต่ละแบบให้ความรู้สึกต่างกัน บางแบบเป็นระเบียบ บางแบบดูเป็นจุดรบกวนและหยาบกร้าน

4 ลวดลาย · สองสีเดิม
ตารางหมากรุก
จุดห่าง ๆ
จุดสุ่มดูรก หยาบกร้าน
เส้น

ดิเธอริงยังผสมสองสีให้เป็นสีใหม่ได้ ซึ่งมีประโยชน์มากเมื่อจานสีมีสีน้อย

ผสมสีด้วยดิเธอริง
แดง + เหลือง แบบดิเธอร์
สีเฉลี่ย
แดง + น้ำเงิน แบบดิเธอร์
สีเฉลี่ย
เปิด “เบลอ” ด้านบน แล้วแต่ละบล็อกที่ดิเธอร์จะดูแทบเหมือนสีเฉลี่ยแบบเรียบที่อยู่ข้าง ๆ
ไล่สีท้องฟ้า · ห้าสีเดิม
แถบสีตัดกัน
ต่อกันด้วยดิเธอริง

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

13

แอนติเอเลียสซิง (AA)

แอนติเอเลียส · Anti-aliasing · AA

แอนติเอเลียสซิง (anti-aliasing หรือ AA) ทำให้ขอบรูปทรงนุ่มลง โดยในแต่ละขั้นของขอบจะใส่สีที่มีค่าน้ำหนักอยู่ระหว่างสองสีที่อยู่ติดกัน

วงกลมเดียวกัน
ไม่มี AAขอบแข็ง
AA พอดีนุ่มขึ้น รูปทรงเดิม
AA มากไปมุมถูกเติม รูปทรงเปลี่ยน
ใต้วงกลมแต่ละวงเป็นภาพตัวอย่างขนาด 2× ควรตัดสิน AA ในขนาดที่ใกล้ขนาดจริง

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

AA อยู่ข้างในรูปทรงได้ (AA ภายใน) หรืออยู่ข้างนอกบนพื้นหลัง (AA ภายนอก) AA ภายนอกผสมกับสีพื้นหลัง ดังนั้นเมื่อพื้นหลังเปลี่ยน AA ภายนอกก็ใช้ไม่ได้ เพราะค่าน้ำหนักไม่เข้ากันแล้ว ลองกดพื้นหลังสีเข้มด้านบนดู

เพราะสิ่งที่สำคัญคือค่าน้ำหนัก ฮิวของพิกเซล AA จึงเล่นได้อิสระ AA ยังเปลี่ยนความรู้สึกของเส้นได้ ทำให้บางช่วงของเส้นดูบางลง

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

14

แบนดิง (banding)

แบนดิง · Banding

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

แสงเงาบนเนินเขา
แบนดิงทุกชั้นเกาะขอบ ขั้นบันไดตรงกัน
แก้แบนดิงแล้วเงายาวไม่เท่ากัน ขั้นบันไดเหลื่อมกัน
15

สไตล์เส้นขอบในพิกเซลอาร์ต

เส้นขอบ · Sel-out

การตัดเส้นขอบพิกเซลอาร์ตทำได้หลายแบบ นี่คือ 8 แบบบนเห็ดดอกเดียวกัน:

เห็ดดอกเดียวกัน · แสงจากซ้ายบน
ดำ เส้นเดี่ยวเป็นกราฟิก เหมาะกับแอนิเมชัน
เส้นคู่หนามาก
สีเข้มคอนทราสต์และความแข็งลดลง
สีตามพื้นที่ตามสีของส่วนที่ล้อม
เส้นรับแสงบอกทิศแสงด้วย
เลือกเฉพาะจุด (sel-out)บอกรูปทรงด้วย AA
เส้นขาดเว้นช่วงตรงที่โดนแสง
ไม่มีเส้นขอบ
  • เส้นขอบดำหนาหนึ่งพิกเซล: ดูเป็นกราฟิกแบบการ์ตูน และใช้กับแอนิเมชันได้ดี
  • เส้นขอบคู่: หนามาก ซึ่งคุณเคยเห็นแล้วในบทเรื่องดับเบิล
  • เส้นขอบสีเข้ม: เส้นขอบธรรมดาที่ใช้สีเข้มแทนสีดำ ลดทั้งคอนทราสต์และความแข็ง
  • เส้นขอบสีตามพื้นที่: เส้นขอบใช้สีที่เข้มกว่าของพื้นที่ที่มันล้อมอยู่
  • เส้นขอบรับแสง: เส้นขอบสีตามพื้นที่ที่สว่างขึ้นด้านที่โดนแสง และเข้มขึ้นด้านที่อยู่ในเงา จึงบอกทิศทางแสงไปด้วย
  • เส้นขอบแบบเลือกเฉพาะจุด (sel-out): ลายเส้นใช้เฉดคล้าย AA บอกรูปทรง แทนที่จะเป็นเส้นทึบเส้นเดียว
  • เส้นขอบขาด: เส้นขอบแบบเลือกเฉพาะจุดชนิดหนึ่งที่เว้นเส้นไปเลยในบางช่วง มักเป็นตรงที่แสงตกกระทบ
  • ไม่มีเส้นขอบ: ก็เป็นทางเลือกที่ดีได้เหมือนกัน

พ่อมดใช้เส้นขอบสีดำหนาหนึ่งพิกเซลเพราะเข้ากับสไตล์ เส้นขอบบนหมวกเว้นช่วงเล็กน้อยเพื่อให้อ่านรูปทรงหมวกได้ชัดขึ้น

16

คลัสเตอร์และพิกเซลโดดเดี่ยว

คลัสเตอร์ · Orphan pixels

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

ลูกบอลเดิม · สีเดิม
คลัสเตอร์สะอาดรูปทรงสะอาดชัดเจน
พิกเซลเดี่ยวกระจายดูรก

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

17

จอรุ่นเก่าทำให้พิกเซลเบลอ

จอ CRT · CRT displays

เวลาศึกษางานภาพของเกมย้อนยุค ให้จำไว้เรื่องหนึ่ง เกมเก่าหลายเกมแสดงผลบนทีวีและจอภาพ CRT (จอตู้) และจอ CRT ทำให้พิกเซลที่อยู่ติดกันเบลอเข้าหากัน

ฉาก 96×54
น้ำตกเป็นแค่แถบสีน้ำเงินสลับขาว และแถบสีของท้องฟ้าต่อกันด้วยดิเธอริงแบบตารางหมากรุก ในพิกเซลดิบดูแข็งกระด้าง แต่เมื่อผ่านความเบลอของจอ CRT ก็กลายเป็นสายน้ำตกและการไล่สีที่ราบรื่น

ลองดูพิกเซลดิบของเกม 16 บิตหลายเกม แล้วจะเจอแบนดิง รอยหยัก และดิเธอริงแข็ง ๆ ที่ไม่มีใครเห็นบนจอสมัยนั้น นักวาดบางคนในยุคนั้นรู้เรื่องนี้และวาดเผื่อความเบลอไว้ โดยใช้ลายดิเธอร์สร้างสีกลางที่ฮาร์ดแวร์แสดงเองไม่ได้

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

18

เมื่อพิกเซลกลายเป็นลูกปัด

พิกเซลอาร์ตบนลูกปัด งานปัก และเม็ดเพชร

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

พ่อมด 16×16 ตัวเดียวกัน
พิกเซลบนจอ
ลูกปัดหนึ่งพิกเซล หนึ่งเม็ด
  • จานสีคือสีที่ซื้อได้: บนจอ สีไหนก็แค่คลิกเดียว แต่ลูกปัดหรือด้ายมีแค่สีที่แบรนด์ผลิต การจำกัดจานสีจึงไม่ใช่ทางเลือกอีกต่อไป ให้เลือกชุดสีลูกปัดหรือไหมปักก่อน แล้ววาดด้วยสีเหล่านั้น
  • เพ็กบอร์ดกำหนดขนาด: เพ็กบอร์ดสี่เหลี่ยมขนาดใหญ่มี 29×29 หมุด สไปรต์ 16×16 จึงวางได้สบาย ส่วน 32×32 ต้องต่อบอร์ดสี่แผ่น วางแผนผืนผ้าใบตามบอร์ดที่คุณมี
  • ระยะห่างช่วยผสมสี: งานที่เสร็จแล้วมักถูกมองจากระยะหนึ่งถึงสองก้าว ซึ่งทำให้ภาพนุ่มลงคล้ายจอ CRT ดิเธอร์แบบตารางหมากรุกจะดูเป็นสีกลางเมื่อมองจากอีกฝั่งของห้อง แต่ลูกปัดผิดสีเม็ดเดียวก็ยังดูเป็นจุดเปื้อนอยู่ดี

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

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

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

19

สไตล์ของคุณ และการฝึกฝน

สไตล์ · ฝึกฝน

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

ผืนผ้าใบฝึก · 16×16

เครื่องมือ

จานสี (สีของพ่อมด)

เปิดในโปรแกรมแก้ไขพิกเซลอาร์ต →
1×
3×
ผืนผ้าใบเริ่มต้นด้วยพ่อมด 16×16 จะแก้ไขต่อ หรือล้างแล้ววาดของคุณเองก็ได้ ช่องสีลายตารางหมากรุกคือยางลบ เปิดในโปรแกรมแก้ไขพิกเซลอาร์ตเพื่อใช้ผืนผ้าใบทุกขนาด เลิกทำ เฟรมแอนิเมชัน และส่งออกเป็น PNG

แบบฝึกหัด

  1. วาดพ่อมดขนาด 8×8 ต้องเก็บลักษณะไหนไว้บ้าง ถึงจะยังดูออกว่าเป็นพ่อมด
  2. เปิดตรวจค่าน้ำหนัก แล้วลงสีพ่อมดใหม่ด้วยค่าน้ำหนักแค่สี่ระดับ จากนั้นเทียบกับเวอร์ชันเขียวสี่เฉด
  3. เปลี่ยนเส้นขอบสีดำของพ่อมดเป็นเส้นขอบสีตามพื้นที่ หรือแบบเลือกเฉพาะจุด
  4. วาดแอปเปิลสองครั้ง ครั้งแรกผิวด้าน ครั้งที่สองผิวมัน
  5. วาดแอปเปิลลูกเดียวกันที่ขนาด 12×12, 16×16 และ 24×24

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

อภิธานศัพท์

ซิลูเอต
Silhouette
รูปทรงภายนอกที่เป็นสีเดียว
ดับเบิล
Doubles
พิกเซลสองตัวที่เป็นรูปตัว L ตรงมุมของเส้น
รอยหยัก
Jaggies
มุมแหลมจากขั้นบันไดที่ยาวไม่เท่ากัน
ฮิว / ความอิ่มตัว / ค่าน้ำหนัก
HSV
ตัวสี ความบริสุทธิ์ ความสว่าง
การลงเงาแบบหมอน
Pillow shading
ไล่ความมืดเป็นวงจากเส้นขอบ
การเลื่อนฮิว
Hue shifting
หมุนฮิวไปตามชุดไล่สีที่สว่างขึ้นหรือมืดลง
ดิเธอริง
Dithering
ผสมสีด้วยลวดลายพิกเซล
แอนติเอเลียสซิง
AA
ทำขั้นบันไดให้นุ่มด้วยสีกลาง
แบนดิง
Banding
ชั้นเงาที่เรียงขนานกัน
เส้นขอบแบบเลือกเฉพาะจุด
Sel-out
เส้นขอบที่บอกรูปทรงด้วย AA
คลัสเตอร์
Cluster
กลุ่มพิกเซลสีเดียวกัน
พิกเซลโดดเดี่ยว
Orphan pixel
พิกเซลเดี่ยวที่อยู่ลำพัง

คำถามเกี่ยวกับพิกเซลอาร์ต

จะเริ่มวาดพิกเซลอาร์ตอย่างไร

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

พิกเซลอาร์ตควรมีขนาดเท่าไร

16×16 และ 32×32 เป็นขนาดที่ใช้กันทั่วไปสำหรับตัวละครและไอเทมในเกม ส่วน 64×64 ใช้กับตัวละครที่มีรายละเอียดและภาพพอร์ตเทรต ผืนผ้าใบเล็กเหมาะที่สุดสำหรับการเรียน เพราะทุกพิกเซลมีความหมาย ชิ้นงานทุกชิ้นในโปรเจกต์เดียวกันควรใช้สเกลเดียวกัน

ดิเธอริงในพิกเซลอาร์ตคืออะไร

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

แอนติเอเลียสซิงในพิกเซลอาร์ตคืออะไร

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

การเลื่อนฮิว (hue shifting) คืออะไร

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

การลงเงาแบบหมอนคืออะไร และจะเลี่ยงได้อย่างไร

การลงเงาแบบหมอน (pillow shading) คือการไล่ความมืดจากเส้นขอบเข้าด้านในเป็นวง โดยไม่สนว่าแสงมาจากทางไหน วัตถุจึงดูแบนและพอง ให้กำหนดทิศทางแสงก่อน แล้ววางไฮไลต์ด้านที่หันเข้าหาแสง และวางเงาด้านที่หันหนีแสง

เปลี่ยนพิกเซลอาร์ตเป็นแพทเทิร์นลูกปัดได้ไหม

ได้ แต่ละพิกเซลกลายเป็นลูกปัด ครอสสติทช์ หรือเม็ดเพชรหนึ่งเม็ด วาดในขนาดของเพ็กบอร์ด (เพ็กบอร์ดสี่เหลี่ยมขนาดใหญ่ของ Perler คือ 29×29) ด้วยสีของแบรนด์ลูกปัดที่ใช้ แล้วพิมพ์แพทเทิร์นพร้อมจำนวนแต่ละสีจากโปรแกรมแก้ไขพิกเซลอาร์ต

แหล่งที่มา

ลำดับบทเรียนและแนวคิดหลายอย่างในหน้านี้มาจากวิดีโอ The Ultimate Pixel Art Tutorial ของ Saultoons ดูวิดีโอเพื่อฟังคำอธิบายฉบับเต็ม เนื้อหาในหน้านี้เราเขียนขึ้นเองด้วยถ้อยคำของเรา และภาพตัวอย่างทุกภาพวาดขึ้นใหม่สำหรับหน้านี้ ไม่ได้นำมาจากวิดีโอ

เครื่องมือพิกเซลอาร์ต

ส่งข้อเสนอแนะ

พบข้อผิดพลาด ขาดฟีเจอร์ หรือแค่อยากทักทาย? เราอ่านทุกข้อความ

หรืออีเมลโดยตรง: contact@makebead.com