[pts] Sprite Tutorial

เอาของเก่ากิน ก๊อบมาทั้งดุ้นเลยจ้ะ ฮา




โย้ช สวัสดีค่า เนค่ะ owo,,~~ วันนี้จะมาเสนอฮาวทู (จริงๆ หนูว่าไม่ใช่ฮาวทูหรอกน่อ น่าจะเป็นขั้นตอนการทำงานมากกว่า) การทำตัวละครพิกเซล 2มิติ (Sprite) ใน Photoshop ค่า~~!!!



ไม่พูดพล่ามทำเพลงล่ะน่อ เริ่มเลยนะคะ!!

เริ่มที่เครื่องมือก่อนนะคะ มีแค่ 2 อย่าง (หลัก) เท่านั้นที่จะใช้ในงานนี้ค่ะ *---*



แต๊น~~~นั่นก็คือ Pencil (อยู่ในปุ่มเดียวกับ Brush นะคะ) กับ Eraser โหมด Pencil ซึ่งปรับได้ตรงหน้าต่าง Options (ด้านบน) ค่ะ owo/ ปรับไว้อย่างนี้นะคะ ไม่อย่างนั้นเวลาลบมันจะเบลอค่ะ



เริ่มมาขั้นแรก เปิดสเก็ตคร่าวๆ ที่วาดไว้ แล้วปรับขนาดให้เท่ากับขนาดจริงที่จะใช้ค่ะ
เพราะว่า ถ้าทำขนาดใหญ่กว่าที่จะใช้แล้วย่อทีหลัง ภาพมันจะเบลอค่ะ >__>; เพราะงั้น ต้องปรับก่อนนะคะ!!

หลังจากนั้นก็ตัดเส้นคร่าวๆ อีกที เอาแค่พอรู้ว่าหน้าตาเป็นยังไงน่ะค่ะ~
ตรงนี้ใครมีแทบเลตจะสะดวกมาก (: ลากเอาเลยค่ะ เหมือนตัดเส้นปกติ จะเร็วน่อ~~

ลากเส้นคร่าวแล้วจะได้หน้าตาแบบนี้:



จะเห็นว่าเส้นที่ดูแตกๆ จะเกิดจากเส้นมันมี "มุม" ค่ะ เลยทำให้ภาพดูหยักๆ ทางแก้คือลบออกให้หมดค่ะ!!
(ถ้าไม่หมดเส้นก็จะยังดูแตกๆ ค่ะ) ตรงนี้ต้องใช้ความอดทนหน่อยน่อ owo;;
วิธีที่จะเซฟตัวเองและงานที่สุดคือ "ซูม" ค่ะ ซูมซัก 600-800% เราจะเห็นว่าตรงไหนต้องแก้ ไม่ต้องเพ่งด้วย
ทำงานพิกเซลต้องซูมเยอะๆ ค่ะ ฮา~



เสร็จแล้วก็จะได้หน้าตาแบบนี้ (ดูดีขึ้นแล้ว ฮา) หลังจากนี้เราจะมาลงสีกันค่ะ~!



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





ขั้นตอนการลงตากับผม owo+ ใช้ซูมเยอะๆ
สีก็เป็นส่วนสำคัญมากๆ กับงานแบบนี้ (จริงๆ ก็ทุกประเภทแหละค่ะ) ถ้าเราเป็นคนไม่เก่งเรื่องการเลือกสี ลองหาพวกเว็บที่มี Color Palette ให้เราเลือกอยู่แล้ว เช่น http://www.colourlovers.com จะทำให้เราเลือกสีได้กว้างขึ้นด้วยค่ะ~



แต๊น! สมมติว่าเสร็จแล้ว =[]=!! (ขี้โกงนี่)
ถึงตรงนี้ จะเซฟงานเลยก็ได้นะคะถ้าชอบเส้นสีดำล้วน owo,, แต่ถ้าจะทำให้เส้นเป็นสี ให้ล็อคเลเยอร์ ( )ก่อน แล้วเลือกสีที่เข้มกว่าบริเวณนั้นค่ะ >_</

เสร็จแล้วรวมเลเยอร์ แล้วเลือก Edit>Stroke... ที่ 1 pixel outside จะเป็นการตัดเส้นขอบนอกอีกทีค่ะ



เสร็จแล้ว!!! XD

เวลาเซฟ เซฟโหมด Save for Web... จะดีที่สุดค่ะ เพราะเราไม่ได้ต้องการความละเอียดมากมาย (มันก็ไม่ละเอียดกว่านี้แล้ว ฮา) เนชอบเซฟแบบ PNG-24 ค่ะ~

อย่าลืมว่า ถ้าไม่ต้องการแบ็คกราวด์ ให้ปิดเลเยอร์แบ็คกราวด์ก่อนเซฟนะคะ~!


จบแล้วค่ะสำหรับฮาวทูในวันนี้ *โค้งงาม*
รู้สึกว่าคนเขียนเองยัง งงๆ เอง ^^; ไม่เข้าใจตรงไหนถามได้เลยนะคะ ยินดีช่วยเสมอค่ะ!!! >w<

อุ แจ่มค่า =w=b+ ~
(ไว้ว่าง ๆ ลองทำดู - จะว่างเมื่อไหร่น้อ...)

=w=b good job