สิ่งที่ต้องมีก่อนเริ่ม
โปรแกรม · Software
แค่คอมพิวเตอร์ แท็บเล็ต หรือมือถือก็พอ จะใช้เมาส์ ปากกา หรือนิ้วก็ได้ทั้งนั้น เลือกแบบที่ถนัด เพราะพิกเซลอาร์ตเน้นความแม่นยำมากกว่าความเร็ว
โปรแกรมวาดพิกเซลอาร์ตมีสองแบบ คือโปรแกรมที่ทำมาเพื่อวาดพิกเซลโดยเฉพาะ กับโปรแกรมวาดภาพทั่วไปที่ใช้แปรงขนาดหนึ่งพิกเซล ทั้งสองแบบมีเครื่องมือพื้นฐานเหมือนกัน ได้แก่ ดินสอ ยางลบ ถังเทสี หลอดดูดสี และกริด สิ่งที่เรียนจากโปรแกรมหนึ่งจึงใช้กับอีกโปรแกรมได้เลย
- Aseprite: โปรแกรมเสียเงินที่นักวาดพิกเซลอาร์ตส่วนใหญ่เลือกใช้ในที่สุด มีเลเยอร์ แอนิเมชัน จานสี และการต่อลายไทล์ ทุกอย่างออกแบบมาเพื่องานพิกเซล
- LibreSprite: โปรแกรมฟรีที่แยกมาพัฒนาต่อจาก Aseprite รุ่นเก่า
- Pixelorama: ฟรีและเป็นโอเพนซอร์ส ใช้ได้ทั้งบนเดสก์ท็อปและในเบราว์เซอร์
- Piskel: ฟรีและใช้ในเบราว์เซอร์ เป็นวิธีลองวาดพิกเซลอาร์ตแบบเร็ว ๆ โดยไม่ต้องติดตั้งอะไร
- โปรแกรมแก้ไขพิกเซลอาร์ตของ MakeBead: ฟรีและใช้ในเบราว์เซอร์ มีเฟรมแอนิเมชัน และพิมพ์เป็นแพทเทิร์นได้เมื่อภาพวาดจะกลายเป็นลูกปัดหรืองานปัก เปิดโปรแกรมแก้ไข
เริ่มจากสิ่งที่มีอยู่ก่อน ท้ายหน้านี้มีผืนผ้าใบ 16×16 ที่ใส่สีของพ่อมดไว้ให้แล้ว คุณลองทำตามแต่ละบทไปพร้อมกับอ่านได้เลย
ซิลูเอต เส้น สี รายละเอียด
ซิลูเอต → เส้น → สี → เก็บงาน
พ่อมดตัวนี้วาดใน 4 รอบ คือเทซิลูเอต แกะเส้น ลงสีพื้น แล้วเก็บรายละเอียด คลิกที่ขั้นตอนเพื่อดูภาพในขั้นนั้น
การเริ่มจากซิลูเอต (เงาโครงร่าง) ทำให้คุณโฟกัสที่รูปทรงใหญ่และดูว่ามันอ่านออกหรือไม่ และซิลูเอตแทบไม่เปลี่ยนเลยตั้งแต่รอบแรกจนถึงรอบสุดท้าย แก่นของพ่อมดคือรูปสามเหลี่ยม ปลายหมวกที่งอ และไม้เท้าที่ยื่นออกมา คือสิ่งที่ทำให้สามเหลี่ยมนั้นน่าสนใจ
วิธีเริ่มแบบอื่น
- เส้นโครงสร้าง: ร่างตัวละครด้วยวงกลม สามเหลี่ยม และสี่เหลี่ยมคางหมู แล้วค่อยเติมรายละเอียดทับ การลงตัวเรื่องสัดส่วนตั้งแต่ต้นช่วยประหยัดการวาดแก้ได้มากในภายหลัง
- บล็อกสีหยาบ แล้วเก็บงาน: ลงสีเป็นก้อนใหญ่ ๆ แบบหยาบ แล้วเก็บให้เรียบร้อยไปเรื่อย ๆ วิธีนี้เหมาะกับฉากหลัง เพราะจับบรรยากาศได้ทันที ช่วงกลางจะดูรกจนเหมือนไม่มีอะไรเข้าที่ ให้วาดต่อไป
- วาดใหญ่ แล้วย่อ: วาดในขนาดปกติด้วยแอปวาดรูปใดก็ได้ แล้วย่อลงเป็นพิกเซล เป็นจุดเริ่มที่ใช้ได้ แต่ยิ่งย่อเล็ก รายละเอียดยิ่งแตก และทุกพิกเซลยังต้องเก็บด้วยมืออยู่ดี
ไม่มีขั้นตอนไหนที่ถูกต้องที่สุด ลองดูว่านักวาดที่คุณชอบทำงานอย่างไร ลองหลาย ๆ วิธี แล้วเก็บวิธีที่คุณสนุกไว้ ทุกวิธีพาไปถึงจุดเดียวกัน
เลือกขนาดผืนผ้าใบ
16×16 · 32×32 · 64×64
พิกเซลอาร์ตไม่มีขนาดที่ถูกต้องตายตัว ขึ้นอยู่กับว่าคุณวาดอะไร ต้องการรายละเอียดแค่ไหน และงานนั้นต้องการอะไร แบบฝึกหัดแรกที่ดีคือวาดสิ่งเดียวกันในหลายขนาด
พ่อมดตัวนี้อยู่ที่ 16×16 ก็ได้ ซิลูเอตยังอ่านออก และสไตล์นี้มีรายละเอียดให้เสียไปไม่มาก ที่เป็น 32×32 เพราะมันอยู่ในชุดภาพขนาดเดียวกัน และงานที่จะปรากฏด้วยกันควรใช้สเกลเดียวกัน ขนาดที่ปนกันจะดูเหมือนตัดแปะมา
ขนาดพิกเซลอาร์ตที่ใช้บ่อย
| ขนาด | การใช้งานทั่วไป |
|---|---|
| 8×8 | ไอคอน ไอเทมจิ๋ว ฟอนต์พิกเซล |
| 16×16 | ไอเทมเกมคลาสสิก ไทล์ และตัวละครเล็ก |
| 32×32 | ตัวละครที่เห็นหน้าชัด ไทล์ขนาดใหญ่ขึ้น |
| 64×64 | ภาพพอร์ตเทรตและตัวละครที่มีรายละเอียด |
| 29×29 | เพ็กบอร์ดสี่เหลี่ยมขนาดใหญ่ของลูกปัดรีดร้อนหนึ่งแผ่น |
| 128×128 ขึ้นไป | ฉากและภาพประกอบ |
ถ้าเพิ่งเริ่ม ให้เริ่มจากขนาดเล็ก เพื่อให้รู้สึกถึงน้ำหนักของพิกเซลเดียว ในขนาดเล็ก พิกเซลเดียวเปลี่ยนทั้งภาพได้ ซึ่งมองข้ามได้ง่ายบนผืนผ้าใบใหญ่ ลองกับใบหน้า 10×10 นี้ เลือกสีหน้า หรือคลิกพิกเซลใดก็ได้เพื่อสลับสี
เส้นที่สะอาด: ดับเบิลและรอยหยัก
ดับเบิล · รอยหยัก · Jaggies
เมื่อได้ขนาดแล้ว ให้แบ่งพื้นที่หลักด้วยลายเส้นง่าย ๆ ตอนวาดเส้นมีสองเรื่องที่ต้องระวัง
ดับเบิล
ตรงที่พิกเซลสองตัวมาชนกันที่มุมเป็นรูปตัว L จะเกิดดับเบิล (double) ซึ่งทำให้เส้นหนาขึ้นตรงนั้น เส้นจึงดูเข้มและแข็งกว่าส่วนอื่น บนเส้นขอบหนาหนึ่งพิกเซล ให้ลบพิกเซลที่เกินตรงมุมออก เส้นจะสะอาดขึ้นและหนาเท่ากันตลอด
ดับเบิลไม่ได้ผิดเสมอไป มันช่วยบอกใบ้ถึงเงาได้ และเส้นขอบที่ทำจากเส้นดับเบิลทั้งหมดก็เป็นสไตล์หนักแน่นแบบหนึ่ง
รอยหยัก
เมื่อขั้นบันไดของเส้นตรงหรือเส้นโค้งยาวไม่สม่ำเสมอ จะเกิดรอยหยัก (jaggies) คือมุมแหลมที่คุณไม่ได้ตั้งใจ ให้ลบพิกเซลที่ทำลายจังหวะออก หรือให้ความยาวขั้นบันไดค่อย ๆ เพิ่มและลดอย่างราบรื่น เช่น 5-3-2-1-1-2-3-5 บนเส้นโค้ง
รอยหยักก็ตั้งใจใส่ได้เหมือนกัน เส้นบนใบหน้าพ่อมดมีจุดหักที่ตั้งใจไว้หนึ่งจุดเพื่อทำเป็นคิ้ว
เรื่องนี้ไม่ใช่เรื่องถูกหรือผิด แต่เป็นเรื่องของการรู้ตัว รู้ว่ามีเอฟเฟกต์นี้อยู่ แล้วเลือกใช้อย่างตั้งใจเพื่อให้ได้ลุคที่ต้องการ
ฮิว ความอิ่มตัว และค่าน้ำหนัก
ฮิว · ความอิ่มตัว · ค่าน้ำหนัก · HSV
ตัวเลือกสีแทบทุกตัวสร้างขึ้นจากระบบ HSV:
- ฮิว (H): ตัวสีเอง เช่น แดง เหลือง เขียว น้ำเงิน…
- ความอิ่มตัว (S): ความบริสุทธิ์ของสี ในช่องสี่เหลี่ยมของตัวเลือกสี จะไล่จากสีเทาทางซ้ายไปจนสดที่สุดทางขวา
- ค่าน้ำหนัก (V): ความสว่างหรือความมืดของสี ไล่จากล่างขึ้นบนของช่องสี่เหลี่ยมโดยประมาณ ข้อนี้สำคัญที่สุด
ที่บอกว่า “โดยประมาณ” เพราะแต่ละฮิวมีความสว่างที่ตารับรู้ต่างกัน ลองเปลี่ยนแถบฮิวให้เป็นขาวดำ แล้วสีเหลืองจะสว่างที่สุด ส่วนสีน้ำเงินและม่วงจะมืดที่สุด
ค่าน้ำหนักคือสิ่งที่ทำให้ภาพมีมิติและรูปทรง แสงและเงาสร้างจากค่าน้ำหนักทั้งนั้น ถ้าค่าน้ำหนักผิด ต่อให้เลือกสีดีแค่ไหนก็ช่วยภาพไม่ได้
ตรวจค่าน้ำหนักแบบเร็ว: เพิ่มเลเยอร์ไว้บนสุด เทสีดำ แล้วตั้งโหมดผสม (blend mode) เป็น Color วิธีนี้ไม่ได้ให้ความสว่างที่แม่นยำ แต่ใกล้พอจะเห็นปัญหา
ใช้สีสดอย่างประหยัด
ความอิ่มตัว · Saturation
ถ้ามีสีที่อิ่มตัวสูงมากเกินไป สีจะแย่งกันเด่นและทำให้ตาล้า ถ้ามีสีหม่นมากเกินไป ภาพจะดูขุ่นและซีด
ใช้สีสดเหมือนเครื่องปรุง คือใส่นิดเดียวอย่างตั้งใจ ตรงที่อยากให้สายตาไปหยุด บางงานใช้สีจัดทั้งภาพแล้วก็ยังดูดี แต่งานพวกนั้นมีค่าน้ำหนักที่แน่นมากรองรับอยู่เสมอ ค่าน้ำหนักต้องมาก่อน
คอนทราสต์นำสายตา
คอนทราสต์ · Contrast
งานศิลปะมีคอนทราสต์หลายแบบ ทั้งค่าน้ำหนัก ฮิว รูปทรง และรายละเอียด คอนทราสต์สูงคือสองสิ่งต่างกันมาก คอนทราสต์ต่ำคือสองสิ่งใกล้เคียงกัน
บริเวณที่คอนทราสต์สูงดึงสายตาเข้าไป บริเวณที่คอนทราสต์ต่ำให้สายตาได้พัก และสร้างจังหวะกับการซ้ำได้ คอนทราสต์เป็นเรื่องสัมพัทธ์ คอนทราสต์ต่ำทั่วทั้งภาพให้ภาพที่กลมกลืนคล้ายลวดลาย และจุดที่คอนทราสต์สูงจะเด่นก็ต่อเมื่อรอบ ๆ สงบกว่า
ระหว่างวาด ให้ถามตัวเองเรื่อย ๆ ว่าคอนทราสต์จะชี้ไปที่ส่วนที่สำคัญที่สุดของงานได้อย่างไร
แสง เงา และการลงแสงเงา
แสงเงา · Shading
การลงเงาให้ดีต้องรู้ว่าแสงทำงานอย่างไร เพราะการลงเงาคือการใช้ค่าน้ำหนักบอกรูปทรง ลองส่องไฟดวงเดียวไปที่ลูกบอล แล้วจะเห็นทุกส่วนของโมเดลแสงพื้นฐาน:
- 1ไฮไลต์: จุดที่หันรับแสงตรงที่สุด
- 2มิดโทน: สีหลักของด้านที่โดนแสง
- 3แกนเงา: ตรงที่แสงเปลี่ยนเป็นเงา มักเป็นแถบที่มืดที่สุด
- 4เงา: ด้านของลูกบอลที่หันหนีแสง
- 5แสงสะท้อน: แสงที่สิ่งรอบข้างสะท้อนกลับมา ทำให้เงาสว่างขึ้น
- 6เงาสัมผัส: จุดมืดที่สุด ตรงที่ลูกบอลแตะพื้น
- 7เงาตกทอด: เงาที่ลูกบอลทอดลงบนพื้น
พิกเซลอาร์ตไม่ค่อยต้องใช้ครบทั้งเจ็ดส่วน ในขนาดเล็กจะรกเกินไป จึงขึ้นอยู่กับขนาดและสไตล์ หน้าตาของแสงยังขึ้นกับจำนวนแหล่งแสง ความแรงของแสง และสิ่งที่อยู่รอบวัตถุด้วย
การลงเงาแบบหมอน
ปัญหาที่เจอบ่อยมากคือไม่สนใจทั้งรูปทรงและแสง แค่ไล่ความมืดจากเส้นขอบเข้าด้านในเป็นวง ๆ นี่คือการลงเงาแบบหมอน (pillow shading) ซึ่งไม่ได้บอกรูปทรง วัตถุจึงดูแบนและพองเหมือนหมอน
วัสดุ
วัสดุแต่ละแบบสะท้อนแสงต่างกัน ลูกบอลผิวด้านกระจายแสงสม่ำเสมอ ไม่มีไฮไลต์ชัด ลูกบอลผิวมันหรือโลหะมีไฮไลต์แรงและสะท้อนสิ่งรอบตัว ถ้าจะวาดไม้ ทอง หรือแก้ว ให้คิดว่ามันสะท้อนแสงอย่างไร แล้วเลือกค่าน้ำหนักและช่วงค่าน้ำหนักให้เข้ากัน
โทนร้อนและเย็นเป็นเรื่องสัมพัทธ์
อุณหภูมิสี · สภาพแวดล้อม
เรามักได้ยินว่าสีนี้โทนร้อนหรือโทนเย็น แต่สีจะดูร้อนหรือเย็นขึ้นอยู่กับสีที่อยู่ข้าง ๆ
ในคู่แรก สี่เหลี่ยมเล็กสองอันเป็นสีเทาเดียวกันเป๊ะ ในคู่ที่สาม ครึ่งซ้ายเป็นสีแดงเดียวกับในคู่ที่สอง สีเป็นเรื่องสัมพัทธ์และเปลี่ยนไปตามสีข้างเคียง
สีของวัตถุยังเปลี่ยนไปมากตามแสง สิ่งที่อยู่ใกล้ และสภาพแวดล้อม ลองสลับแสงและโต๊ะด้านล่าง แล้วดูลูกบอลสีเหลืองลูกเดิมเปลี่ยนไป:
การเลื่อนฮิว (hue shifting)
การเลื่อนฮิว · Hue shifting
การเลื่อนฮิว (hue shifting) เป็นเทคนิคยอดนิยมที่ย่อผลของสภาพแวดล้อมเหล่านั้นให้ง่ายขึ้น และทำให้สีน่าสนใจขึ้นไปพร้อมกัน เวลาทำสีให้มืดลงเพื่อเป็นเงา ให้หมุนฮิวไปด้วยเล็กน้อย เงามักเอียงไปทางม่วง และแสงมักเอียงไปทางเหลือง
ไม่มีแบบไหนดีกว่ากัน เลือกแบบที่ชอบ ชุดไล่สีที่เลื่อนฮิวมักดูมีมิติกว่า ส่วนชุดไล่สีแบบตรงจะดูสงบและเป็นกราฟิกกว่า
จำกัดจานสี
จานสี · Palette
อีกนิสัยของมือใหม่ที่เจอบ่อยคือหยิบสีใหม่ทุกครั้ง ภาพจะรก และจานสีกับค่าน้ำหนักจะคุมไม่อยู่ การจำกัดจำนวนสีทำให้งานกลมกลืนเป็นหนึ่งเดียว
ถ้าเลือกสีไม่ถูก ให้เริ่มจากจานสีพิกเซลอาร์ตสำเร็จรูป ซึ่งยังเป็นทางลัดสู่ลุคบางแบบด้วย เช่น สีเขียวสี่เฉดของจอเครื่องเกมพกพายุคแรก Lospec มีจานสีให้เลือกหลายพันชุด และคุณสร้างจานสีของตัวเองได้ด้วยการดูดสีจากหนังและเกมที่ชอบ
แต่จานสีไม่ได้ทำงานแทนคุณ คุณยังต้องคิดเรื่องฮิว ความอิ่มตัว ค่าน้ำหนัก คอนทราสต์ และสไตล์ที่ต้องการอยู่ดี
ดิเธอริง (dithering)
ดิเธอริง · Dithering
ดิเธอริงคือการเรียงพิกเซลเป็นลวดลายเพื่อผสมสี หรือเพื่อให้ดูเหมือนมีสีมากกว่าที่จานสีมี ถ้ามีแค่ขาวกับดำ ลายตารางหมากรุกจะดูเป็นสีเทาเมื่อมองจากไกล ๆ
ลายดิเธอร์คิดค้นได้หลากหลาย และแต่ละแบบให้ความรู้สึกต่างกัน บางแบบเป็นระเบียบ บางแบบดูเป็นจุดรบกวนและหยาบกร้าน
ดิเธอริงยังผสมสองสีให้เป็นสีใหม่ได้ ซึ่งมีประโยชน์มากเมื่อจานสีมีสีน้อย
ระวังไว้ ดิเธอริงเพิ่มจุดรบกวนและพื้นผิวที่ไม่คาดคิด โดยเฉพาะในสไปรต์เล็ก ๆ ตัดสินใจก่อนว่าจะใช้เพื่ออะไร แล้วค่อยใช้
แอนติเอเลียสซิง (AA)
แอนติเอเลียส · Anti-aliasing · AA
แอนติเอเลียสซิง (anti-aliasing หรือ AA) ทำให้ขอบรูปทรงนุ่มลง โดยในแต่ละขั้นของขอบจะใส่สีที่มีค่าน้ำหนักอยู่ระหว่างสองสีที่อยู่ติดกัน
วงกลมวงที่สามใส่ AA มากเกินไป ขอบนุ่มขึ้นก็จริง แต่พิกเซลที่เพิ่มเข้ามาสร้างมุมใหม่และเปลี่ยนรูปวงกลม ใส่ AA เฉพาะจุด และอย่าให้มันเปลี่ยนรูปทรงเด็ดขาด
AA อยู่ข้างในรูปทรงได้ (AA ภายใน) หรืออยู่ข้างนอกบนพื้นหลัง (AA ภายนอก) AA ภายนอกผสมกับสีพื้นหลัง ดังนั้นเมื่อพื้นหลังเปลี่ยน AA ภายนอกก็ใช้ไม่ได้ เพราะค่าน้ำหนักไม่เข้ากันแล้ว ลองกดพื้นหลังสีเข้มด้านบนดู
เพราะสิ่งที่สำคัญคือค่าน้ำหนัก ฮิวของพิกเซล AA จึงเล่นได้อิสระ AA ยังเปลี่ยนความรู้สึกของเส้นได้ ทำให้บางช่วงของเส้นดูบางลง
พ่อมดตัวนี้ไม่ต้องใช้ AA เลย ถ้าจะใช้เป็นสไตล์ ที่ที่เหมาะคือเครา เพื่อให้ดูนุ่มขึ้น AA เป็นเทคนิคขั้นสูง จึงควรใช้อย่างระมัดระวัง
แบนดิง (banding)
แบนดิง · Banding
เมื่อเงาหรือ AA เดินตามเส้นขอบทั้งเส้นด้วยความกว้างเท่ากัน ซ้อนกันทีละชั้น และขั้นบันไดทุกขั้นเรียงตรงกันหมด จะเกิดแบนดิง แทนที่จะบอกรูปทรง มันกลับทำให้ภาพแบนหรือดูรก การลงเงาแบบหมอนด้านบนก็มีปัญหาเดียวกัน
สไตล์เส้นขอบในพิกเซลอาร์ต
เส้นขอบ · Sel-out
การตัดเส้นขอบพิกเซลอาร์ตทำได้หลายแบบ นี่คือ 8 แบบบนเห็ดดอกเดียวกัน:
- เส้นขอบดำหนาหนึ่งพิกเซล: ดูเป็นกราฟิกแบบการ์ตูน และใช้กับแอนิเมชันได้ดี
- เส้นขอบคู่: หนามาก ซึ่งคุณเคยเห็นแล้วในบทเรื่องดับเบิล
- เส้นขอบสีเข้ม: เส้นขอบธรรมดาที่ใช้สีเข้มแทนสีดำ ลดทั้งคอนทราสต์และความแข็ง
- เส้นขอบสีตามพื้นที่: เส้นขอบใช้สีที่เข้มกว่าของพื้นที่ที่มันล้อมอยู่
- เส้นขอบรับแสง: เส้นขอบสีตามพื้นที่ที่สว่างขึ้นด้านที่โดนแสง และเข้มขึ้นด้านที่อยู่ในเงา จึงบอกทิศทางแสงไปด้วย
- เส้นขอบแบบเลือกเฉพาะจุด (sel-out): ลายเส้นใช้เฉดคล้าย AA บอกรูปทรง แทนที่จะเป็นเส้นทึบเส้นเดียว
- เส้นขอบขาด: เส้นขอบแบบเลือกเฉพาะจุดชนิดหนึ่งที่เว้นเส้นไปเลยในบางช่วง มักเป็นตรงที่แสงตกกระทบ
- ไม่มีเส้นขอบ: ก็เป็นทางเลือกที่ดีได้เหมือนกัน
พ่อมดใช้เส้นขอบสีดำหนาหนึ่งพิกเซลเพราะเข้ากับสไตล์ เส้นขอบบนหมวกเว้นช่วงเล็กน้อยเพื่อให้อ่านรูปทรงหมวกได้ชัดขึ้น
คลัสเตอร์และพิกเซลโดดเดี่ยว
คลัสเตอร์ · Orphan pixels
การคิดเป็นคลัสเตอร์ (cluster) คือการจับพิกเซลเป็นกลุ่มก้อน ตั้งแต่สองพิกเซลขึ้นไป แล้วใช้กลุ่มเหล่านั้นบรรยายพื้นที่ โดยทั่วไปจะเลี่ยงพิกเซลเดี่ยว พิกเซลที่อยู่ลำพัง (orphan pixel หรือพิกเซลโดดเดี่ยว) เพิ่มความรกและดูแปลกแยกท่ามกลางคลัสเตอร์
พิกเซลโดดเดี่ยวก็มีประโยชน์ ใช้ทำรายละเอียดและไฮไลต์ได้ โดยเฉพาะในขนาดเล็ก หรือใช้สร้างพื้นผิวหยาบกร้านโดยตั้งใจ ตาของพ่อมดเป็นพิกเซลเดี่ยว เพราะขนาดไม่เหลือทางเลือกอื่น และดูถูกต้องแล้ว นักวาดบางคนสร้างงานทั้งชิ้นจากพิกเซลเดี่ยว ผลที่ได้ดูรกและหยาบ ซึ่งตรงกับสไตล์ของเขา
จอรุ่นเก่าทำให้พิกเซลเบลอ
จอ CRT · CRT displays
เวลาศึกษางานภาพของเกมย้อนยุค ให้จำไว้เรื่องหนึ่ง เกมเก่าหลายเกมแสดงผลบนทีวีและจอภาพ CRT (จอตู้) และจอ CRT ทำให้พิกเซลที่อยู่ติดกันเบลอเข้าหากัน
ลองดูพิกเซลดิบของเกม 16 บิตหลายเกม แล้วจะเจอแบนดิง รอยหยัก และดิเธอริงแข็ง ๆ ที่ไม่มีใครเห็นบนจอสมัยนั้น นักวาดบางคนในยุคนั้นรู้เรื่องนี้และวาดเผื่อความเบลอไว้ โดยใช้ลายดิเธอร์สร้างสีกลางที่ฮาร์ดแวร์แสดงเองไม่ได้
ไม่ใช่ทุกเกมย้อนยุคจะวาดแบบนั้น แต่เวลารวบรวมภาพอ้างอิง ให้จำไว้ว่าสิ่งที่เราเห็นทุกวันนี้มักเป็นพิกเซลดิบที่คมกริบ โดยไม่มีจอภาพคั่นกลาง
เมื่อพิกเซลกลายเป็นลูกปัด
พิกเซลอาร์ตบนลูกปัด งานปัก และเม็ดเพชร
พิกเซลอาร์ตไม่จำเป็นต้องอยู่แค่บนจอ ลูกปัดรีดร้อนหนึ่งเม็ด ครอสสติทช์หนึ่งช่อง เม็ดเพชรของงานระบายสีเพชร หรือห่วงไหมพรมหนึ่งห่วง ต่างก็มีสีเดียว ภาพพิกเซลจึงเป็นแพทเทิร์นอยู่แล้ว หนึ่งพิกเซลเท่ากับลูกปัดหนึ่งเม็ด ทุกอย่างข้างบนยังใช้ได้ โดยมีข้อต่างอยู่สามข้อ
- จานสีคือสีที่ซื้อได้: บนจอ สีไหนก็แค่คลิกเดียว แต่ลูกปัดหรือด้ายมีแค่สีที่แบรนด์ผลิต การจำกัดจานสีจึงไม่ใช่ทางเลือกอีกต่อไป ให้เลือกชุดสีลูกปัดหรือไหมปักก่อน แล้ววาดด้วยสีเหล่านั้น
- เพ็กบอร์ดกำหนดขนาด: เพ็กบอร์ดสี่เหลี่ยมขนาดใหญ่มี 29×29 หมุด สไปรต์ 16×16 จึงวางได้สบาย ส่วน 32×32 ต้องต่อบอร์ดสี่แผ่น วางแผนผืนผ้าใบตามบอร์ดที่คุณมี
- ระยะห่างช่วยผสมสี: งานที่เสร็จแล้วมักถูกมองจากระยะหนึ่งถึงสองก้าว ซึ่งทำให้ภาพนุ่มลงคล้ายจอ CRT ดิเธอร์แบบตารางหมากรุกจะดูเป็นสีกลางเมื่อมองจากอีกฝั่งของห้อง แต่ลูกปัดผิดสีเม็ดเดียวก็ยังดูเป็นจุดเปื้อนอยู่ดี
แอนติเอเลียสซิงแปลงมาได้แย่ที่สุด เพราะต้องใช้เฉดกลาง และจานสีลูกปัดมักไม่มีเฉดที่ตรงพอดี ขั้นบันไดที่สะอาดด้วยสีที่มีอยู่จริงมักดูดีกว่าเฉดที่เกือบใช่
เมื่อวาดเสร็จ โปรแกรมแก้ไขพิกเซลอาร์ต พิมพ์ภาพเป็นแพทเทิร์นพร้อมจำนวนของแต่ละสี ส่วน ตัวแปลงรูปเป็นพิกเซลอาร์ต ทำงานกลับกัน คือแปลงรูปภาพให้เป็นสีในจานสีลูกปัด
พิกเซลอาร์ตที่วาดด้วยมือมักเป็นแพทเทิร์นลูกปัดที่ดีกว่ารูปถ่ายที่แปลงมา ด้วยเหตุผลที่อยู่ในคู่มือนี้ ได้แก่ เส้นขอบสะอาด สีน้อย และใช้คลัสเตอร์แทนความรก
สไตล์ของคุณ และการฝึกฝน
สไตล์ · ฝึกฝน
รวมพื้นฐานศิลปะ เทคนิคพิกเซล และรสนิยมของคุณเข้าด้วยกัน แล้วความเป็นไปได้จะไม่มีที่สิ้นสุด สิ่งที่คุณชอบ คนอื่นอาจไม่ชอบ ไม่มีสไตล์ที่ถูกหรือผิด แต่การตัดสินใจอย่างตั้งใจและใช้อย่างสม่ำเสมอ จะทำให้ทุกอย่างที่คุณวาดดูมีเจตนา และเข้ากับโลกที่คุณกำลังสร้าง
แบบฝึกหัด
- วาดพ่อมดขนาด 8×8 ต้องเก็บลักษณะไหนไว้บ้าง ถึงจะยังดูออกว่าเป็นพ่อมด
- เปิดตรวจค่าน้ำหนัก แล้วลงสีพ่อมดใหม่ด้วยค่าน้ำหนักแค่สี่ระดับ จากนั้นเทียบกับเวอร์ชันเขียวสี่เฉด
- เปลี่ยนเส้นขอบสีดำของพ่อมดเป็นเส้นขอบสีตามพื้นที่ หรือแบบเลือกเฉพาะจุด
- วาดแอปเปิลสองครั้ง ครั้งแรกผิวด้าน ครั้งที่สองผิวมัน
- วาดแอปเปิลลูกเดียวกันที่ขนาด 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 ดูวิดีโอเพื่อฟังคำอธิบายฉบับเต็ม เนื้อหาในหน้านี้เราเขียนขึ้นเองด้วยถ้อยคำของเรา และภาพตัวอย่างทุกภาพวาดขึ้นใหม่สำหรับหน้านี้ ไม่ได้นำมาจากวิดีโอ