ศิลปะพิกเซลขนาดเล็ก Adobe Photoshop: วาดและเคลื่อนไหวตัวละคร Pixel Art

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

ขั้นตอน

ส่วนที่ 1

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

• Photoshop
• Paint.net
• Pixen

1. ซื้อแท็บเล็ตกราฟิก หากคุณไม่ชอบวาดภาพด้วยเมาส์แท็บเล็ตและสไตลัสคือสิ่งที่คุณต้องการ อย่างไรก็ตามแท็บเล็ตของ Wacom เป็นที่นิยมมากที่สุด

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

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

2. วาดด้วยแปรง 1 พิกเซล โปรแกรมแก้ไขกราฟิกใด ๆ ต้องมีเครื่องมือดินสอ เลือกและกำหนดขนาดแปรงเป็น 1 พิกเซล ตอนนี้คุณสามารถวาด ... ทีละพิกเซล

   ส่วนที่ 2

   การฝึกพื้นฐาน

   1. สร้างภาพใหม่ เนื่องจากคุณกำลังเรียนรู้ที่จะวาดในรูปแบบพิกเซลอาร์ตดังนั้นคุณจึงไม่ควรมุ่งเป้าไปที่ภาพวาดที่ยิ่งใหญ่ ถ้าคุณจำได้ใน Super Mario Bros. หน้าจอทั้งหมดมีขนาด 256 x 224 พิกเซลและ Mario เองก็พอดีกับพื้นที่ 12 x 16 พิกเซล!

      ขยายเข้า. ใช่มิฉะนั้นคุณจะไม่เห็นแต่ละพิกเซล ใช่คุณจะต้องเพิ่มมากขึ้น สมมติว่า 800% ค่อนข้างปกติ

      เรียนรู้การวาดเส้นตรง ดูเหมือนจะเรียบง่าย แต่ถ้าคุณอยู่ตรงกลางสักแห่งให้วาดเส้นหนา 2 พิกเซลด้วยมือที่สั่นเทาความแตกต่างจะกระทบดวงตา วาดเส้นตรงจนกว่าคุณจะต้องเปิดใช้งานเครื่องมือวาดเส้นตรง คุณต้องเรียนรู้วิธีวาดเส้นตรงด้วยมือ!

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

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

   ส่วนที่ 3

   สร้างสไปรท์แรก

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

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

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

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

      • ไม่มีรายละเอียดในการร่าง! วาดสิ่งที่คุณต้องการเห็นในภาพวาดสุดท้าย

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

      • เมื่อร่างโครงร่างให้ใช้สีดำ 100% สำหรับโครงร่าง หากมีสิ่งใดคุณจะเปลี่ยนได้เองในภายหลัง แต่สำหรับตอนนี้คุณจะทำงานกับสีดำได้ง่ายขึ้น

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

      • ในขณะที่คุณร่างอย่าฟุ้งซ่านไปกับรายละเอียดเพราะจะถึงคราวของพวกเขา

   ส่วนที่ 4

   ระบายสีเทพดา

   1. แปรงตามทฤษฎีสี ดูที่จานสีเพื่อดูว่าจะใช้สีใด ทุกอย่างเรียบง่ายที่นั่นยิ่งสีอยู่ห่างจากกันมากเท่าไหร่ก็ยิ่งไม่เหมือนกันมากขึ้นเท่านั้น ยิ่งสีอยู่ใกล้กันมากเท่าไหร่ก็ยิ่งมีความคล้ายคลึงกันมากขึ้นและดูดีขึ้นเมื่ออยู่ติดกัน

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

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

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

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

   ส่วนที่ 5

   เพิ่มเงา

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

   • วิธีแก้ปัญหาที่ง่ายที่สุดคือสมมติว่าแหล่งกำเนิดแสงอยู่สูงเหนือสไปรต์มากไปทางซ้ายหรือขวาของมันเล็กน้อย

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

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

   2. อย่าลืมเฉดสีบางส่วน เลือกสีระหว่างสีฐานและสีเงา ใช้เพื่อสร้างเลเยอร์อื่น - แต่ระหว่างเลเยอร์ของสองสีนี้ ผลลัพธ์ที่ได้จะเป็นการเปลี่ยนเอฟเฟกต์จากพื้นที่มืดไปเป็นพื้นที่สว่าง

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

   ส่วนที่ 6

   ใช้เทคนิคการวาดขั้นสูง

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

   • มือใหม่มักจะผอมมากเกินไปอย่าเป็นแบบนั้น

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

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

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

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

ตอนนี้ยังไม่ทราบแน่ชัดว่าเทคนิคนี้เกิดขึ้นเมื่อใดรากหายไปที่ไหนสักแห่งในช่วงต้นทศวรรษ 1970 อย่างไรก็ตามเทคนิคการแต่งภาพจากองค์ประกอบขนาดเล็กกลับไปสู่รูปแบบศิลปะโบราณเช่นโมเสกการเย็บไขว้การทอพรมและการประดับด้วยลูกปัด วลีเดียวกับ "pixel art" เป็นคำจำกัดความของพิกเซลอาร์ตถูกใช้ครั้งแรกในบทความของ Adele Goldberg และ Robert Flegal ในวารสาร Communications of the ACM (ธันวาคม 1982)

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

2. เครื่องมือ

คุณต้องการอะไรในการสร้างภาพพิกเซล? ดังที่กล่าวไว้ข้างต้นคอมพิวเตอร์และโปรแกรมแก้ไขกราฟิกใด ๆ ที่สามารถทำงานในระดับพิกเซลก็เพียงพอแล้ว คุณสามารถวาดได้ทุกที่แม้กระทั่งใน Game Boy แม้กระทั่งบน Nintendo DS หรือแม้แต่ใน Microsoft Paint (เป็นอีกเรื่องหนึ่งที่การวาดภาพในช่วงหลังไม่สะดวกอย่างยิ่ง) มีตัวแก้ไขบิตแมปมากมายหลายตัวมีอิสระและใช้งานได้เพียงพอที่ทุกคนสามารถตัดสินใจเลือกซอฟต์แวร์ได้ด้วยตัวเอง

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

3. หลักการทั่วไป.

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

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

เส้นขีดและโดยทั่วไปทุกเส้นของภาพวาดควรมีความหนาหนึ่งพิกเซล

รอยแตกกีดกันการวาดภาพของความเรียบเนียนและความสวยงามตามธรรมชาติ และถ้าชิ้นส่วน 3, 4 และ 5 ชัดเจนและสามารถแก้ไขได้ง่ายสถานการณ์กับคนอื่น ๆ จะซับซ้อนมากขึ้น - มีความยาวของชิ้นส่วนเดียวในโซ่ขาดมันจะดูเป็นเรื่องเล็ก แต่เป็นเรื่องเล็กที่เห็นได้ชัด ต้องใช้การฝึกฝนเล็กน้อยเพื่อเรียนรู้ที่จะเห็นสถานที่ดังกล่าวและหลีกเลี่ยงสถานที่เหล่านั้น Kink 1 หลุดออกจากเส้นเนื่องจากเป็นพิกเซลเดียว - ในขณะที่อยู่ในบริเวณที่เสื่อมสภาพเส้นประกอบด้วยส่วน 2 พิกเซล เพื่อกำจัดมันฉันทำให้เส้นโค้งอ่อนลงในส่วนโค้งโดยการขยายส่วนบนสุดเป็น 3 พิกเซลและวาดเส้นทั้งหมดใหม่เป็น 2 ส่วนพิกเซล Kinks 2 และ 6 เหมือนกัน - เป็นส่วนที่มีความยาว 2 พิกเซลอยู่แล้วในพื้นที่ที่สร้างด้วยพิกเซลเดียว

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

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

ง่ายใช่มั้ย? มันต้องใช้นิสัย ความสามารถในการวาดเส้นเฉียงโดยเพิ่มทีละ 2 พิกเซลจะช่วยในการวาดภาพสามมิติได้ดังนั้นเราจะมาดูรายละเอียดเพิ่มเติมในครั้งต่อไป โดยทั่วไปแล้วเส้นตรงนั้นดีมาก - แต่จนกว่างานจะวาดบางสิ่งที่น่าอัศจรรย์เท่านั้น เราต้องการเส้นโค้งตรงนี้และเส้นโค้งต่างๆมากมาย และเราใช้กฎง่ายๆสำหรับการปัดเศษเส้นโค้ง: ความยาวขององค์ประกอบเส้นโค้งควรลดลง / เพิ่มขึ้นทีละน้อย.

การออกจากเส้นตรงไปยังการปัดเศษทำได้อย่างราบรื่นฉันทำเครื่องหมายความยาวของแต่ละส่วน: 5 พิกเซล, 3, 2, 2, 1, 1, 2 อีกครั้ง (ในแนวตั้งแล้ว), 3, 5 และอื่น ๆ กรณีของคุณไม่จำเป็นต้องใช้ลำดับเดียวกันทั้งหมดขึ้นอยู่กับความเรียบที่จำเป็น อีกตัวอย่างการปัดเศษ:

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

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

4.1. เราวาดขวดด้วยน้ำที่มีชีวิต

1. รูปร่างของวัตถุจนกว่าคุณจะสามารถใช้สี

2. ของเหลวสีแดง.

3. เปลี่ยนสีของแก้วเป็นสีน้ำเงินเพิ่มพื้นที่แรเงาภายในฟองและพื้นที่สว่างบนพื้นผิวที่ต้องการของของเหลว

4. เพิ่มไฮไลท์สีขาวบนฟองและเงาสีแดงเข้มกว้าง 1 พิกเซลบนพื้นที่ของของเหลวที่ล้อมรอบผนังฟอง ดูดีใช่มั้ย?

5. วาดขวดด้วยของเหลวสีน้ำเงินในลักษณะเดียวกัน - นี่คือแก้วสีเดียวกันบวกด้วยสีน้ำเงินสามเฉดสำหรับของเหลว

4.2. เราวาดแตงโม

ลองวาดวงกลมและครึ่งวงกลม - นี่จะเป็นแตงโมและฝานเป็นชิ้น

2. มาทำเครื่องหมายรอยตัดบนแตงโมและบนชิ้น - เส้นขอบระหว่างเปลือกและเนื้อ

3. เติม สีจากจานสีเขียวกลางเป็นสีของเปลือกสีแดงกลางเป็นสีของเนื้อ

4. มาทำเครื่องหมายพื้นที่เปลี่ยนผ่านจากเปลือกโลกไปยังเยื่อกระดาษ

5. ลายไฟบนแตงโม (สุดท้ายดูเหมือนเอง) และแน่นอน - เมล็ดพันธุ์! ถ้าคุณข้ามแตงโมกับแมลงสาบพวกมันจะแผ่กิ่งก้านสาขา

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

5. Dithering

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

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

อีกสองตัวเลือกสำหรับการแยกทาง:

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

ทฤษฎีที่ดีพอ ฉันขอแนะนำให้เราฝึกฝนอีกเล็กน้อย

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

1. การเตรียมงาน.

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

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

ชุดค่าผสมที่มีประโยชน์มากขึ้น " Ctrl + "และ" Ctrl - "ซูมเข้าและออก นอกจากนี้ยังมีประโยชน์ที่จะทราบว่าการกด Ctrl และ "(เครื่องหมายคำพูด - ต้นคริสต์มาสหรือแป้นภาษารัสเซีย" จ") เปิดใช้งานและปิดใช้งานเส้นตารางซึ่งช่วยได้มากเมื่อวาดภาพพิกเซล ควรปรับขั้นตอนกริดด้วยตัวคุณเองสำหรับคนที่สะดวกกว่าเมื่อเป็น 1 พิกเซลฉันคุ้นเคยกับความกว้างของเซลล์เป็น 2 พิกเซล กด Ctrl + K (หรือไปที่ แก้ไข->ค่ากำหนด) ไปที่ประเด็น คำแนะนำตารางและชิ้นส่วน และติดตั้ง เส้นตารางทุกๆ 1 พิกเซล (ขอย้ำว่าสะดวกกว่าสำหรับฉัน 2)

2. การวาดภาพ

ในที่สุดเราก็เริ่มวาดภาพ ทำไมต้องสร้างเลเยอร์ใหม่ ( Ctrl + Shift + N) เปลี่ยนเป็นสีปากกาดำ (กด ง ตั้งค่าสีเริ่มต้นขาวดำ) และวาดส่วนหัวของตัวละครในกรณีของฉันนี่คือวงรีสมมาตรดังนี้:

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

ฐานด้านล่างและด้านบนมีความยาว 10 พิกเซลจากนั้นจะมีส่วนของ 4 พิกเซลสามสามหนึ่งหนึ่งและเส้นแนวตั้งที่มีความสูง 4 พิกเซล เส้นตรงใน Photoshop สะดวกในการวาดด้วยการจับยึด กะแม้ว่าขนาดของภาพในพิกเซลอาร์ตจะน้อย แต่บางครั้งเทคนิคนี้ก็ช่วยประหยัดเวลาได้มาก หากคุณทำผิดพลาดและดึงมากเกินไปให้ปีนขึ้นไปที่ไหนสักแห่ง - อย่าท้อแท้เปลี่ยนไปใช้เครื่องมือยางลบ ( ยางลบด้วยl หรือ " จ») และลบไฟล์. ใช่อย่าลืมตั้งค่ายางลบเป็นขนาดปากกา 1 พิกเซลด้วยเพื่อให้ยางลบลบทีละพิกเซลและโหมดดินสอ ( โหมด: ดินสอ) มิฉะนั้นจะไม่ลบสิ่งที่จำเป็น เปลี่ยนกลับมาใช้ดินสอให้ฉันเตือนคุณผ่าน“ ข»

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

วาดต่อไปเพิ่มจมูกเสาอากาศและปาก:

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

ตอนนี้ดวงตา:

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

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

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

เราวาดคิ้ว (ไม่มีอะไรที่แขวนอยู่ในอากาศ - ฉันมีสไตล์แบบนั้น) และเลียนแบบรอยพับที่มุมปากทำให้รอยยิ้มแสดงออกมากขึ้น:

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

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

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

ไม่สนใจข้อเท้าในตอนนี้มันดูอึดอัดเราจะแก้ไขเมื่อกรอก การแก้ไขเล็กน้อย: เพิ่มเข็มขัดและพับบริเวณขาหนีบและเลือกข้อต่อหัวเข่า (โดยใช้ชิ้นส่วนขนาดเล็ก 2 พิกเซลที่ยื่นออกมาจากเส้นขา):

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

3. เติม

สำหรับแต่ละองค์ประกอบของตัวละครตอนนี้สีสามสีจะเพียงพอ - สีเติมหลักสีเงาและสีเส้นขีด โดยทั่วไปมีคำแนะนำมากมายเกี่ยวกับทฤษฎีสีในศิลปะพิกเซลในระยะเริ่มต้นอย่าลังเลที่จะสอดแนมผลงานของผู้เชี่ยวชาญและวิเคราะห์ว่าพวกเขาเลือกสีอย่างไร แน่นอนว่าเส้นขีดของแต่ละองค์ประกอบสามารถปล่อยให้เป็นสีดำได้ แต่ในกรณีนี้องค์ประกอบจะรวมเข้าด้วยกันอย่างแน่นอนฉันชอบใช้สีอิสระที่ใกล้เคียงกับสีหลักขององค์ประกอบ แต่มีความอิ่มตัวต่ำ วิธีที่สะดวกที่สุดคือวาดจานสีเล็ก ๆ ที่อยู่ถัดจากตัวละครของคุณจากนั้นใช้สีจากมันโดยใช้เครื่องมือ eyedropper ( เครื่องมือ Eyedropper, I):

เมื่อเลือกสีที่ต้องการแล้วให้เปิดใช้งานเครื่องมือ "ถัง" ( ถังสี, G). นอกจากนี้อย่าลืมปิดใช้งานฟังก์ชั่นต่อต้านนามแฝงในการตั้งค่าเราต้องการการเติมเพื่อให้ทำงานได้อย่างชัดเจนภายในโครงร่างที่วาดและไม่เกินกว่านั้น:

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

เราเติมตัวละครของเราสิ่งที่เราเติมไม่ได้ - เราวาดด้วยมือด้วยดินสอ

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

ให้ความสนใจกับข้อเท้า - เนื่องจากพื้นที่เหล่านี้มีความหนาเพียง 2 พิกเซลฉันจึงต้องยอมแพ้ทั้งสองด้านและฉันวาดจากด้านเงาที่ต้องการเท่านั้นโดยปล่อยให้เส้นสีฐานหนา 1 พิกเซล สังเกตด้วยว่าฉันทิ้งคิ้วไว้เป็นสีดำแม้ว่ามันจะไม่สำคัญเลยก็ตาม

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

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

4. เงาและความแตกต่าง

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

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

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

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

ศิลปะพิกเซลสำหรับผู้เริ่มต้น | บทนำ.

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

เดินเล่นอินเทอร์เน็ตในตอนเช้าฉันต้องการเขียนโพสต์เกี่ยวกับ Pixel Art ในการค้นหาเนื้อหาฉันพบบทความทั้งสองนี้

Pixel Art เป็นที่นิยมอย่างมากในปัจจุบันสำหรับเกมและมีสาเหตุหลายประการสำหรับสิ่งนี้!

ดังนั้นสิ่งที่ทำให้ Pixel Art ดึงดูดใจ:

1. การรับรู้. Pixel Art ดูน่าทึ่ง! คุณสามารถบอกได้มากมายเกี่ยวกับแต่ละพิกเซลในสไปรต์
2. ความคิดถึง. Pixel Art นำความรู้สึกคิดถึงกลับมาให้กับนักเล่นเกมที่เติบโตมาพร้อมกับการเล่น Nintendo, Super Nintendo หรือ Genesis (เช่นฉัน!)
3. ง่ายต่อการเรียนรู้ Pixel Art เป็นหนึ่งในศิลปะดิจิทัลที่ง่ายที่สุดในการเรียนรู้โดยเฉพาะอย่างยิ่งถ้าคุณเป็นโปรแกรมเมอร์มากกว่าศิลปิน]

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

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

Pixel Art คืออะไร?

ก่อนที่เราจะเริ่มต้นเรามาดูกันดีกว่าว่า Pixel Art คืออะไรซึ่งไม่ชัดเจนอย่างที่คุณคิด วิธีที่ง่ายที่สุดในการพิจารณาว่า Pixel Art คืออะไรคือการระบุสิ่งที่ไม่ใช่คือทุกสิ่งที่พิกเซลถูกสร้างขึ้นโดยอัตโนมัติ นี่คือตัวอย่างบางส่วน:

ไล่ระดับสี: เลือกสองสีและคำนวณสีของพิกเซลที่อยู่ระหว่าง ดูเท่ แต่ไม่ใช่ Pixel Art!

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

เครื่องมือปรับให้เรียบ (โดยทั่วไปจะสร้างพิกเซลใหม่ด้วยสีที่ต่างกันเพื่อให้บางสิ่งบางอย่าง "ราบรื่น") คุณต้องหลีกเลี่ยง!

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

เครื่องมืออื่น ๆ เช่น (บรรทัด) หรือ เครื่องมือถังสี (ถังสี) ยังสร้างพิกเซลโดยอัตโนมัติ แต่เนื่องจากคุณสามารถตั้งค่าให้ไม่เรียบเกินพิกเซลที่เติมเต็มเครื่องมือเหล่านี้จึงถือว่าเหมาะกับ Pixel Art

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

จุดเริ่มต้นของการทำงาน

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

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

ตัวอย่างเช่นหากคุณต้องการให้เกมดูใหญ่ขึ้นเป็นสองเท่าบนหน้าจอ iPhone 3GS (“ ใช่ฉันอยากให้เกมของฉันดูย้อนยุคแบบพิกเซลจริงๆ!”) ซึ่งมีความละเอียดหน้าจอ 480x320 พิกเซลคุณต้องทำงานที่ ความละเอียดครึ่งหนึ่งในกรณีนี้จะเป็น 240x160 พิกเซล

เปิดเอกสาร Photoshop ใหม่ ( ไฟล์→ใหม่ ...) และกำหนดขนาดให้เป็นขนาดของหน้าจอเกมของคุณจากนั้นเลือกขนาดสำหรับตัวละครของคุณ

ฉันเลือก 32 × 32 พิกเซลไม่เพียงเพราะมันยอดเยี่ยมสำหรับขนาดหน้าจอที่เลือก แต่ยังเป็นเพราะ 32 × 32 พิกเซลเป็นทวีคูณของ 2 ซึ่งสะดวกสำหรับเอ็นจิ้นของเล่น (ขนาดกระเบื้องมักจะทวีคูณเป็น 2 เท่าพื้นผิวจึงเรียงกัน ผลคูณของ 2 ฯลฯ

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

วิธีการวาดตัวละคร Pixel Art

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

ใน Photoshop ให้เลือก เครื่องมือดินสอ (เครื่องมือดินสอ). หากคุณไม่พบให้กดเครื่องมือค้างไว้ เครื่องมือแปรง (Brush Tool) แล้วคุณจะเห็นทันที (ควรเป็นตัวที่สองในรายการ) คุณเพียงแค่ต้องปรับขนาดเป็น 1px (คุณสามารถคลิกที่แถบตัวเลือกเครื่องมือและปรับขนาดได้หรือเพียงกดปุ่ม [) ค้างไว้

คุณจะต้อง ลบเครื่องมือ (เครื่องมือยางลบ) คลิกที่มัน (หรือกดปุ่ม E) และเปลี่ยนการตั้งค่าโดยเลือกจากรายการแบบเลื่อนลง โหมด: (โหมด:) ดินสอ (ดินสอ) (เนื่องจากไม่มีการลบรอยหยักในโหมดนี้)

ตอนนี้มาเริ่มการสร้างพิกเซลกันเถอะ! วาดคิ้วและดวงตาตามที่แสดงในภาพด้านล่าง:

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

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

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

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

โปรดเลือก โดยการกดค้างไว้ เครื่องมือสี่เหลี่ยมผืนผ้า (เครื่องมือสี่เหลี่ยมผืนผ้า)

ไปที่แผงตัวเลือกเครื่องมือในรายการแบบเลื่อนลง เลือกโหมดเครื่องมือ (Outline Drawing Mode) เลือก Pixel, change น้ำหนัก (ความหนา) คูณ 1px (หากยังไม่ได้ทำ) และยกเลิกการเลือก ต่อต้านนามแฝง (การทำให้เรียบ). นี่คือวิธีที่คุณควรมี:

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

ใช้สีและเงา

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

ระบายสีตัวละครของคุณเหมือนภาพด้านล่าง (แต่อย่าลังเลที่จะสร้างสรรค์และใช้สีของคุณเอง!)

โปรดทราบว่าฉันยังไม่ได้ทำโครงร่างสำหรับเสื้อผ้าหรือทรงผม จำไว้เสมอ: บันทึกพิกเซลให้ได้มากที่สุดจากโครงร่างที่ไม่จำเป็น!

อย่าเสียเวลาวาดภาพทุกพิกเซล เพื่อให้งานของคุณเร็วขึ้นให้ใช้เส้นที่มีสีเดียวกันหรือ เครื่องมือถังสี (Paint Bucket Tool) เพื่อเติมเต็มช่องว่าง ยังไงก็ตามมันจะต้องได้รับการกำหนดค่าด้วย โปรดเลือก เครื่องมือถังสี บนแถบเครื่องมือ (หรือเพียงแค่กดปุ่ม G) และเปลี่ยน ความอดทน (Tolerance) เป็น 0 และยกเลิกการเลือกช่องนี้ด้วย ต่อต้านนามแฝง (การทำให้เรียบ).

หากคุณจำเป็นต้องใช้ เครื่องมือไม้กายสิทธิ์ (Magic Wand Tool) - เครื่องมือที่มีประโยชน์มากในการเลือกพิกเซลทั้งหมดที่มีสีเดียวกันจากนั้นปรับแบบเดียวกับเครื่องมือ Paint Bucket - ไม่ต้องทนหรือลบรอยหยัก

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

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

และตอนนี้ตามที่ฉันสัญญาไว้คำแนะนำเล็ก ๆ เกี่ยวกับแสงและเงา:

เพิ่มสีสันให้กับจานสีของคุณ

หลายคนใช้สีจานสีเริ่มต้น แต่เนื่องจากหลายคนใช้สีเหล่านี้เราจึงสามารถเห็นสีเหล่านี้ได้ในหลาย ๆ เกม

Photoshop มีสีให้เลือกมากมายในจานสีมาตรฐาน แต่คุณไม่ควรพึ่งพามันมากเกินไป วิธีที่ดีที่สุดในการสร้างสีของคุณเองโดยคลิกที่จานสีหลักที่ด้านล่างของแถบเครื่องมือ

จากนั้นในหน้าต่างตัวเลือกสีให้เรียกดูแถบด้านข้างทางขวาเพื่อเลือกสีและพื้นที่หลักเพื่อเลือกความสว่างที่ต้องการ (เบาขึ้นหรือเข้มขึ้น) และความอิ่มตัว (ยิ่งขึ้นหรือมืดลง)

เมื่อคุณพบสิ่งที่คุณต้องการแล้วให้คลิกตกลงและ กำหนดค่าเครื่องมือ Paint Bucket ใหม่... ไม่ต้องกังวลจากนั้นคุณสามารถยกเลิกการเลือกช่อง "ต่อเนื่องกัน" และเมื่อคุณวาดด้วยสีใหม่พิกเซลใหม่ที่มีสีพื้นหลังเดียวกันจะถูกทาสีทับด้วย

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

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

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

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

ด้วยเครื่องมือเหล่านี้คุณสามารถปรับขนาดชิ้นส่วนที่เลือกหรือหมุนได้อย่างง่ายดาย ในการดำเนินการนี้ให้ใช้เครื่องมือการเลือกใด ๆ (หรือกดปุ่ม M) เพื่อเลือกพื้นที่คลิกขวาและเลือก แปลงร่างฟรี (Free Transform) หรือเพียงแค่กด Ctrl + T ในการปรับขนาดส่วนที่เลือกให้ลากที่จับอันใดอันหนึ่งรอบขอบของกล่องการแปลง ในการปรับขนาดการเลือกในขณะที่รักษาสัดส่วนไว้ให้กดปุ่ม Shift ค้างไว้แล้วลากที่จับมุมอันใดอันหนึ่ง

อย่างไรก็ตาม Photoshop จะแบนทุกสิ่งที่แก้ไขด้วยฟังก์ชันนี้โดยอัตโนมัติ แปลงร่างฟรีก่อนแก้ไขให้ไปที่ แก้ไข -\u003e การตั้งค่า -\u003e ทั่วไป (Ctrl + K) และเปลี่ยน การแก้ไขรูปภาพ (การแก้ไขภาพ) เปิดอยู่ เพื่อนบ้านที่ใกล้ที่สุด (เพื่อนบ้านที่ใกล้ที่สุด). โดยสรุปด้วย เพื่อนบ้านที่ใกล้ที่สุด ตำแหน่งและขนาดใหม่ได้รับการคำนวณอย่างคร่าวๆไม่มีการใช้สีหรือแผ่นใสใหม่และสีที่คุณเลือกจะยังคงอยู่

การรวม Pixel Art เข้ากับเกม iPhone

ในส่วนนี้คุณจะได้เรียนรู้วิธีรวมภาพพิกเซลของเราเข้ากับเกม iPhone โดยใช้กรอบเกม Cocos2d ทำไมฉันถึงพิจารณาเฉพาะ iPhone? เนื่องจากชุดบทความเกี่ยวกับ Unity (เช่น: หรือเล่นในรูปแบบของ Jetpack Joyride ใน Unity 2D) คุณจึงรู้วิธีทำงานกับพวกเขาใน Unity แล้วและจากบทความเกี่ยวกับ Crafty (เกมบนเบราว์เซอร์: Snake) และ Impact (บทนำในการสร้างเกม Impact ของเบราว์เซอร์) คุณได้เรียนรู้วิธีฝังลงในผืนผ้าใบและสร้างเกมเบราว์เซอร์

หากคุณยังใหม่กับ Cocos2D หรือการพัฒนาแอป iPhone โดยทั่วไปฉันแนะนำให้คุณเริ่มต้นด้วยบทช่วยสอน Cocos2d และ iPhone อย่างใดอย่างหนึ่ง หากคุณติดตั้ง Xcode และ Cocos2d ไว้อ่านต่อ!

สร้างโครงการใหม่ iOS → cocos2d v2.x →เทมเพลต cocos2d iOSตั้งชื่อว่า PixelArt และเลือก iPhone เป็นอุปกรณ์ของคุณ ลากภาพพิกเซลที่สร้างขึ้นเช่น: sprite_final.png ลงในโปรเจ็กต์ของคุณแล้วเปิด HelloWorldLayer.m และแทนที่วิธีการเริ่มต้นด้วยสิ่งต่อไปนี้:

- (id) init (if ((self \u003d)) (CCSprite * hero \u003d; hero.position \u003d ccp (96, 96); hero.flipX \u003d YES ;;) กลับตัวเอง;)

เราวางสไปรท์ทางด้านซ้ายของหน้าจอแล้วหมุนให้หันไปทางขวา รวบรวมเรียกใช้แล้วคุณจะเห็นสไปรต์ของคุณบนหน้าจอ:

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

Hero.scale \u003d 2.0;

ไม่มีอะไรซับซ้อนใช่มั้ย? รวบรวมวิ่งและ ... เดี๋ยวก่อนสไปรท์ของเราพร่ามัว!

เนื่องจากโดยค่าเริ่มต้น Cocos2d จะแบนภาพเมื่อปรับขนาด เราไม่ต้องการสิ่งนี้จึงเพิ่มบรรทัดต่อไปนี้:

บรรทัดนี้กำหนดค่า Cocos2d เพื่อปรับขนาดภาพโดยไม่มีการลบรอยหยักดังนั้นผู้ชายของเราจึงยังคงดูเหมือนคอมไพล์แบบ "พิกเซล" เรียกใช้และ ... ใช่มันได้ผล!

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

อะไรต่อไป?

ฉันหวังว่าคุณจะสนุกกับบทช่วยสอนนี้และเรียนรู้เพิ่มเติมเกี่ยวกับศิลปะพิกเซล! ก่อนที่จะเลิกกันฉันอยากจะให้คำแนะนำแก่คุณ:

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

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

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

ประวัติเล็กน้อย

คุณสามารถสร้างงานศิลปะพิกเซลสมัยใหม่ในโปรแกรมใดได้บ้าง

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

วิธีหลีกเลี่ยงข้อบกพร่องใน Pixel Art

Pixel art คือชุดของพิกเซลที่มีลักษณะเป็น "จุด" สี่เหลี่ยมจัตุรัสหรือสี่เหลี่ยม เมื่อภาพถูกดึงออกมาจาก "จุด" ดังกล่าวความเป็นเหลี่ยมจะปรากฏขึ้นและความเรียบของเส้นจะหายไป ในแง่หนึ่งนี่คือนามบัตร Pixel Art แต่ในอีกด้านหนึ่งฉันต้องการความราบรื่นมากขึ้นซึ่งจะทำให้ภาพดูเรียบร้อยและน่าสนใจสำหรับผู้ใช้ ปัญหานี้ในภาษาของศิลปินพิกเซลเรียกว่า kinks หรือ "jaggies"
Jaggies เป็นชิ้นส่วนที่ทำให้เส้นต่างๆมีลักษณะขรุขระ โดยปกติจะกำจัดด้วยวิธีใดวิธีหนึ่งดังต่อไปนี้:
เพิ่มส่วนของเส้นตรงที่มีความยาว 2, 3 พิกเซลขึ้นไป
ลดความยาวของพิกเซลในพื้นที่ที่โดดเด่น
ส่วนใหม่ของเส้นสร้างขึ้นจากพิกเซลหลายหน่วย
เพิ่มพิกเซลเดี่ยวลงในพื้นที่หยักระหว่าง "จุด" ที่ยาวขึ้นและอื่น ๆ
สำหรับการกำจัดรอยย่นที่ถูกต้องคุณต้องจำกฎหลัก: ความยาวขององค์ประกอบที่เส้นโค้งควรลดลงหรือเพิ่มขึ้นทีละน้อย คุณต้องจำไว้ด้วยว่าการขยับส่วนของเส้นตรงด้วยความสูงตั้งแต่สองพิกเซลขึ้นไปจะนำไปสู่การทำลายความเรียบเนียน
ดังนั้นจึงจำเป็นต้องมีการฝึกฝนการวาดภาพอย่างต่อเนื่อง และเพื่อช่วยหลีกเลี่ยงการหักงอคุณสามารถใช้ชุดของเส้นเฉียงได้

วิธีรับเงาใน Pixel Art

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

วิธีรับแสงแฟลร์บนพิกเซลอาร์ต

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

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

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

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

PyxelEdit

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

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

Pixelformer

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

นักพัฒนาไม่ได้วางตำแหน่งผลิตภัณฑ์ของตนว่าเหมาะสำหรับการสร้างภาพพิกเซลพวกเขาเรียกมันว่าเป็นวิธีที่ดีในการวาดโลโก้และไอคอน

กราฟิก

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

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

ชาราเมกเกอร์

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

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

Pro Motion NG

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

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

Aseprite

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