ศิลปะพิกเซลสำหรับผู้เริ่มต้น: คำแนะนำสำหรับการใช้งาน

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

พื้นหลัง

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

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

Metal Slug 3 (อาร์เคด) เอสเอ็นเค, 2000

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

โดยทั่วไปฉันเตือนคุณแล้ว

และตอนนี้เกี่ยวกับสไตล์ของฉันเล็กน้อย: ฉันวาดภาพศิลปะพิกเซลสำหรับวิดีโอเกมเป็นหลักและค้นหาแรงบันดาลใจจากสิ่งเหล่านั้น โดยเฉพาะอย่างยิ่ง ฉันเป็นแฟนตัวยงของ Famicom/NES, คอนโซล 16 บิต และเกมอาร์เคดยุค 90 ภาพพิกเซลของเกมที่ฉันชื่นชอบในยุคนั้นสามารถอธิบายได้ว่ามีความสดใส มั่นใจ และสะอาดตา (แต่ไม่สะอาดเกินไป) มากกว่าที่จะดูเรียบง่ายและเรียบง่าย นี่คือสไตล์ที่ฉันทำเอง แต่คุณสามารถนำแนวคิดและเทคนิคจากบทช่วยสอนนี้ไปใช้เพื่อสร้างสิ่งที่แตกต่างไปจากเดิมอย่างสิ้นเชิง สำรวจผลงานของศิลปินต่างๆ และสร้างงานศิลปะพิกเซลที่คุณชอบ!

อ่อน

เครื่องมือดิจิทัลพื้นฐานสำหรับงานศิลปะพิกเซลคือ Zoom และ Pencil เพื่อวางพิกเซล นอกจากนี้คุณยังจะพบว่า Line, Shape, Select, Move และ Paint Bucket มีประโยชน์อีกด้วย มีซอฟต์แวร์ฟรีและจ่ายเงินมากมายพร้อมชุดเครื่องมือดังกล่าว ฉันจะบอกคุณเกี่ยวกับสิ่งที่ได้รับความนิยมมากที่สุดและที่ฉันใช้เอง

สี (ฟรี)

หากคุณมี Windows โปรแกรม Paint ในตัวจะเป็นโปรแกรมพื้นฐาน แต่ก็มีเครื่องมือทั้งหมดสำหรับงานศิลปะพิกเซล

พิสเคเล่ (ฟรี)

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

กราฟิกส์เกล (ฟรี)

GraphicsGale เป็นตัวแก้ไขตัวเดียวที่ฉันเคยได้ยินมาซึ่งออกแบบมาเพื่องานศิลปะพิกเซลโดยเฉพาะและมีเครื่องมือแอนิเมชั่นด้วย สร้างสรรค์โดยบริษัท HUMANBALANCE ของญี่ปุ่น ให้บริการฟรีมาตั้งแต่ปี 2017 และยังคงเป็นที่ต้องการ แม้ว่า Aseprite จะได้รับความนิยมเพิ่มขึ้นก็ตาม น่าเสียดายที่มันใช้งานได้บน Windows เท่านั้น

Asepriteep ($)

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

GameMaker Studio 2 ($$+)

GameMaker Studio 2 เป็นเครื่องมือ 2D ที่ยอดเยี่ยมพร้อม Sprite Editor ที่ดี หากคุณต้องการสร้างภาพพิกเซลสำหรับเกมของคุณเอง ทำทุกอย่างในโปรแกรมเดียวจะสะดวกมาก ตอนนี้ฉันกำลังใช้ซอฟต์แวร์นี้ในขณะที่ทำงานอยู่ ยูเอฟโอ 50คอลเลกชันเกมย้อนยุค 50 เกม: ฉันสร้างสไปรท์และแอนิเมชั่นใน GameMaker และชุดไทล์ใน Photoshop

Photoshop ($$$+)

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

อื่น ๆ

ชุดศิลปะพิกเซลของฉัน ทุกอย่างเป็นสีดำ ฉันเพิ่งสังเกตเห็นมันตอนนี้

แท็บเล็ตกราฟิก ($$+)

ฉันแนะนำแท็บเล็ตกราฟิกสำหรับงานภาพประกอบดิจิทัลใดๆ เพื่อหลีกเลี่ยงโรค carpal tunnel ป้องกันได้ง่ายกว่าการรักษามาก วันหนึ่งคุณจะรู้สึกเจ็บปวดและมีแต่จะเพิ่มมากขึ้น - ดูแลตัวเองตั้งแต่เริ่มต้น เนื่องจากฉันเคยวาดด้วยเมาส์ ตอนนี้ฉันเล่นเกมที่ต้องกดปุ่มได้ยาก ฉันกำลังใช้ Wacom Intuos Pro S อยู่

พยุงข้อมือ ($)

หากคุณไม่สามารถซื้อแท็บเล็ตได้ อย่างน้อยก็หาอุปกรณ์พยุงข้อมือ สิ่งที่ฉันชอบคือสายรัดข้อมือ Mueller Green ส่วนที่เหลือแน่นเกินไปหรือให้การสนับสนุนไม่เพียงพอ สามารถสั่งซื้อคาลิปเปอร์ทางออนไลน์ได้โดยไม่มีปัญหาใดๆ

96 × 96 พิกเซล

การต่อสู้ครั้งสุดท้าย แคปคอม, 1989

มาเริ่มกันเลย! เริ่มต้นด้วยสไปรต์อักขระขนาด 96x96 พิกเซล ตามตัวอย่าง ฉันวาดออร์คและวางมันลงบนสกรีนช็อตจาก Final Fight (ภาพด้านบน) เพื่อให้คุณสามารถเข้าใจขนาดได้ นี้ большой สไปรท์สำหรับเกมย้อนยุคส่วนใหญ่ ขนาดสกรีนช็อต: 384x224 พิกเซล

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

1. เลือกจานสี

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

สำหรับบทช่วยสอนนี้ ฉันจะใช้จานสี 32 สีที่เราสร้างขึ้นมา ยูเอฟโอ 50. สำหรับงานศิลปะพิกเซล มักประกอบขึ้นจาก 32 หรือ 16 สี ของเราได้รับการออกแบบมาสำหรับคอนโซลสมมติซึ่งจะปรากฏที่ไหนสักแห่งระหว่าง Famicom และ PC Engine คุณสามารถใช้มันหรืออย่างอื่นก็ได้ - บทช่วยสอนไม่ได้ขึ้นอยู่กับจานสีที่เลือกเลย

2. โครงร่างคร่าวๆ

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

3. การทำรูปทรงอย่างละเอียด

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

ความผิดปกติ

คุณต้องเรียนรู้วิธีการวาดเส้นพื้นฐานสองเส้นในงานศิลปะพิกเซล: เส้นตรงและเส้นโค้ง ด้วยปากกาและกระดาษ สิ่งสำคัญคือการควบคุมกล้ามเนื้อ แต่เรากำลังทำงานกับบล็อกสีเล็กๆ

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

Примеры:

โดยตรง

เส้นโค้ง

ความผิดปกติจะปรากฏบนเส้นโค้งเมื่อความยาวของส่วนของเส้นไม่เพิ่มขึ้นหรือลดลงทีละน้อย

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

4.ลงสีแรก

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

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

5. การแรเงา

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

รูปแบบและปริมาณ

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

ต่อต้านนามแฝง (ต่อต้านนามแฝง)

ทุกครั้งที่ฉันใช้สีใหม่ ฉันจะใช้การป้องกันรอยหยัก (AA) ช่วยให้พิกเซลเรียบขึ้นโดยการเพิ่มสีกลางที่มุมที่ส่วนของเส้นสองเส้นมาบรรจบกัน:

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

นี่คือลักษณะของ AA บนไหล่ของออร์ค จำเป็นต้องทำให้เส้นที่แสดงส่วนโค้งของกล้ามเนื้อเรียบขึ้น

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

6. โครงร่างแบบเลือกสรร

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

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

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

7. สัมผัสสุดท้าย

สุดท้ายนี้ มันก็คุ้มค่าที่จะเพิ่มไฮไลท์ (จุดที่สว่างที่สุดบนสไปรท์) รายละเอียด (ต่างหู หมุด รอยแผลเป็น) และการปรับปรุงอื่น ๆ จนกว่าตัวละครจะพร้อมหรือจนกว่าคุณจะต้องไปยังจุดถัดไป

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

ทำให้เกิดเสียงรบกวน (dithering, dithering)

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

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

การไล่ระดับสีโดยเฉลี่ยใช้เพียงเก้าสี แต่ยังมีเฉดสีเดียวกันมากเกินไป สิ่งที่เรียกว่าแถบเกิดขึ้น (จากแถบภาษาอังกฤษ - แถบ) ซึ่งเนื่องจากมีแถบหนาสม่ำเสมอดวงตาจึงมุ่งเน้นไปที่จุดสัมผัสของสีแทนที่จะเป็นสีของตัวเอง

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

สำหรับออร์ค ฉันทุ่มเทเล็กน้อยเพื่อถ่ายทอดพื้นผิว ศิลปินพิกเซลบางคนไม่ได้ใช้เลย ในทางกลับกัน คนอื่นๆ ก็ไม่เขินอายและทำมันอย่างชำนาญ ฉันพบว่าสีที่แตกต่างกันจะดูดีที่สุดในพื้นที่ขนาดใหญ่ที่เต็มไปด้วยสีเดียว (ดูท้องฟ้าในภาพหน้าจอ Metal Slug ด้านบน) หรือในพื้นที่ที่ควรดูหยาบและไม่สม่ำเสมอ (เช่น ดิน) ตัดสินใจด้วยตัวเองว่าจะใช้มันอย่างไร

หากคุณต้องการดูตัวอย่างการแยกสีขนาดใหญ่และมีคุณภาพสูง ลองดูเกมของ The Bitmap Brothers สตูดิโอของอังกฤษจากยุค 80 หรือเกมบนคอมพิวเตอร์ PC-98 เพียงจำไว้ว่าพวกเขาทั้งหมดเป็น NSFW

คาคิวเซ (PC-98) เอลฟ์, 1996
ภาพนี้มีเพียง 16 สีเท่านั้น!

8. ดูครั้งสุดท้าย

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

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

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

32×32 พิกเซล

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

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

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

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

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

ทีมงานทุกคนพร้อมแล้ว!

รูปแบบไฟล์

ผลลัพธ์นี้อาจทำให้ศิลปินพิกเซลวิตกกังวลได้

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

หากต้องการบันทึกภาพนิ่งโดยไม่สูญเสียคุณภาพ ให้ใช้รูปแบบ PNG สำหรับภาพเคลื่อนไหว - GIF

วิธีแบ่งปันภาพพิกเซลอย่างถูกต้อง

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

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

Twitter

หากต้องการเก็บไฟล์ PNG ของคุณบน Twitter ไว้ไม่เปลี่ยนแปลง ให้ใช้สีหรือสีน้อยกว่า 256 สี มั่นใจไฟล์ของคุณมีความยาวน้อยกว่า 900 พิกเซลในด้านที่ยาวที่สุด ฉันจะเพิ่มขนาดไฟล์เป็นอย่างน้อย 512x512 พิกเซล และเพื่อให้มาตราส่วนเป็นทวีคูณของ 100 (200% ไม่ใช่ 250%) และรักษาขอบที่คมชัดไว้ (เพื่อนบ้านที่ใกล้ที่สุดใน Photoshop)

GIF แบบเคลื่อนไหวสำหรับโพสต์ Twitter ต้อง มีน้ำหนักไม่เกิน 15 MB รูปภาพต้องมีขนาดอย่างน้อย 800x800 พิกเซล ภาพเคลื่อนไหวแบบวนซ้ำจะต้องทำซ้ำสามครั้ง และเฟรมสุดท้ายจะต้องยาวครึ่งหนึ่งของเฟรมอื่นๆ ทั้งหมด ซึ่งเป็นทฤษฎีที่ได้รับความนิยมมากที่สุด อย่างไรก็ตาม ยังไม่ชัดเจนว่าต้องปฏิบัติตามข้อกำหนดเหล่านี้มากน้อยเพียงใด เนื่องจาก Twitter กำลังเปลี่ยนแปลงอัลกอริธึมการแสดงรูปภาพอยู่ตลอดเวลา

Instagram

เท่าที่ฉันรู้ เป็นไปไม่ได้ที่จะโพสต์รูปภาพบน Instagram โดยไม่สูญเสียคุณภาพ แต่มันจะดูดีขึ้นอย่างแน่นอนหากคุณขยายให้มีขนาดอย่างน้อย 512x512 พิกเซล

ที่มา: will.com