กลับไปรายการกระดานข่าว ตอบกลับ โพสใหม่

วิธีการเพ้นท์เสื้อภาพ Pixel Art by Monio

แก้ไขล่าสุด T3DDY เมื่อ 2010-4-1 22:42

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

และต้องขอบคุณคุณไก่ STARLIGHT ด้วยครับ ที่บอกวิธีดีๆในการกู้ข้อมูลแบบนี้ ^^
มาแล้ว ที่ตรงนี้ ขอเสนอ  

การเพนต์ภาพสวย เหมือนจริง
เทคนิคการ "จิ้ม" คู่กับ Photoshop CS
(ที่ผมใช้จะเป็น CS3 นะครับ อาจจะต่างกับ CS อื่นนิดหน่อยนะ)


สำหรับคนที่ไม่มี Photoshop
ลองใช้ Photoshop แบบพกพา [Portable] ดูนะครับ
รู้สึกจะฟรีมั้งไม่แน่ใจ แต่เห็นคนเค้าแจกกันอ่านะ

จิ้มโหลดที่นี่เลยครับ
(ขนาด 48.16 Mb ซึ่งเล็กกว่าตัวเต็มๆนะครับ แต่จะทำงานช้ากว่า มั้ง)

Credits : Spatar! จากที่นี่อีกทีครับ
Code:
http://www.thaigaming.com/software/29620.htm


* คำเตือน คอมต้อง สเป๊กเครื่องสูงนิดนึง
ไม่งั้นจะค่อนข้างกระตุก เวลาทำครับ

** ขอนำแบบที่จะใช้สอนมาจาก คนที่สั่งทำเสื้อผม คนนึงครับ
(ขอบคุณ มา ณ ที่นี้ด้วยครับ)


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


  Step ที่ 1 เตรียมพร้อมก่อนเพนต์

อันนี้ คือ ลายที่ ผมจะทำลงในเสื้อครับ



ก่อนอื่น ต้องรู้จักกับโปรแกรม Photoshop และเตรียมพร้อมก่อนนะครับ

ก่อนอื่น เราตั้งค่า Grid ก่อน โดยใช้คำสั่งตามภาพด้านล่าง หรือกด Ctrl+K ครับ



ตรงนี้ จะมีแถบของ Guides, Grid, Slices & count นะครับ
ที่เราสนใจคือส่วนของ Grid เท่านั้น ครับ ที่ควรใส่ใจมี 2 จุดคือ

Gridline every .. หมายถึง ให้มี เส้น ทุกๆ กี่ช่อง ครับ
Subdivisions .. หมายถึง ส่วนย่อยๆ ครับ



จากภาพ ผมตั้ง 20 กับ 5 .. หมายถึง ทุกๆ 20 ช่อง จะมีเส้นกั้นแบ่ง
และ ในแต่ละ 20 ช่องจะแบ่งเป็น 5 ส่วนย่อย (20 หาร 5 ได้ 4)
ดังนั้น นั่นคือ จะมี เส้นประๆย่อยอีก ทุกๆ 4 ช่อง Pixel เข้าใจไหมเอ่ย?

เมื่อพร้อมแล้ว ..
มาจัดการภาพในเกม กันครับ

ก่อนอื่น ถ้าเกิดว่าเกมเราเต็มจออยู่ .. ให้ทำตามนี้ เพื่อลดจอลง

กดที่ Option ตามภาพ



ไปที่ส่วนของ Video แล้วเอาเครื่องหมายตรง Full Screen ออกครับ



ปรับ Resolution ให้เล็กที่สุด ที่ผมใช้ก็ทำตามภาพเลย



เมื่อพร้อมแล้วก็โอเคเลย



หากปรับเสร็จ จอจะไม่เต็มจอแล้ว ..

ต่อไปเรามาวัดขนาดในเกม กันนะครับ
ขณะนี้ ผมจะเพนต์ลายลงเสื้อ Hana ด้านหน้า ครับ กลางเสื้อ

ผมจึง วัดที่กลางเสื้อเลยครับ



เราหาจุดกึ่งกลาง โดยผมจะใช้เฉพาะ ปากกาเบอร์ 1 เท่าันั้น ครับ
เมื่อหาจุดกลางได้แล้ว ก็ลากมันลงมา



ตามนี้เลย



จากนั้น ผมวัดขนาด โดยกะเอาตามเสื้อ เลยครับ
เวลาวัด ซ้ายขวา ให้วัดโดยกะออกจากเส้นกลาง นะครับ

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

ขยับเลื่อนขึ้น เลื่อนลงตามสบาย ถ้าได้ที่แล้ว ก็ตีกรอบให้เรียบร้อย
พอผมวัดเสร็จ ผมได้ตามนี้เลยครับ 50x50 ช่อง



จากนั้น ลบเส้นส่วนเกิน ออก ก็พร้อมสำหรับการเพนต์แล้วครับ  

มาต่อกันเลยครับ
ต่อมา กลับมาที่ Photoshop

ให้ Open ภาพ ที่ต้องการทำ เข้ามาในโปรแกรมก่อน
- แล้วจากนั้นให้ เลือกทั้งหมด (Select All อาจทำได้โดยกด Ctrl+A)
- และก็กด Copy (อาจทำได้โดยการกด Ctrl+C)

แล้วหลังจากนั้น ให้เลือก New ตามภาพ



ขนาดที่เราต้องการทำลงเสื้อคือ เท่าไหร่ ก็ใส่ไปตามนั้น
ที่ผมวัดมาเมื่อครู่คือ 50x50 Pixel ครับ



เมื่อขึ้นหน้าต่างใหม่ขึ้นมา ก็อาจจะ Zoom นิดหน่อย
สามารถกด Zoom ได้ด้วยปุ่ม Ctrl++ (ซูมเข้า) Ctrl+- (ซูมออก)



จากนั้นให้วางภาพที่ Copy เมื่อครู่ลงไป (กด Ctrl+V ก็ได้)
จะเห็นว่า ภาพมันใหญ่กว่า "มาก" แล้วกดที่เครื่องมือ ตามภาพ
เตรียมย่อขนาดภาพครับ



คลิก "ขวา" ที่ส่วนของภาพ แล้วเลือก Free Transform ตามรูป



จะขึ้นกรอบมา แล้วจับมุมมันย่อลงมาเลยครับ

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



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

พอได้ขนาดแล้วก็กดที่ เครื่องมือตามภาพ แล้วกด Apply โลดเลยคร้าบ



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

ตรงนี้ เรากดให้มีเส้นขึ้นเลยก็ได้ โดยการกดปุ่ม Ctrl+' ครับ (Ctrl+ง อ่ะ)



เรามา ปรับจำนวนสี ให้ไม่เยอะเกินไปก่อนนะจ๊ะ
เลือกคำสั่ง ตามภาพเลยจ้า



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

ภาพนี้ ผมจะทำที่ความละเอียด 16 สีครับ



พอมาถึงตรงนี้ แสดงว่าเราเตรียมตัว พร้อมแล้ว นะครับ
ต่อไปเรามาลงมือกันเลยดีกว่า .. โอวววว



Step ที่ 2 เริ่มทำกันดีกว่า

เลือกสีโดยการใช้คำสั่ง Color Range เลยครับ



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



* จิ้ม สีที่เราคิดว่า ทำง่ายที่สุด ก่อนนะครับ แนะนำ
ในที่นี้ ผมเริ่มที่สีน้ำเงินที่หมวก ครับ ตามภาพเลย

ว้าว ขึ้นกรอบล้อมรอบมาให้เห็นแล้ว



ต่อไป วิธีการเลือกสีในเกมนะจ๊ะ เราไปดูที่โปรแกรม Photoshop ก่อนเน่อ
คลิก "ซ้าย" ที่ตรงเนี้ย



กดตรง B อ่า เห็นป่าว แล้วจะขึ้นจอมาตามภาพ
จอนี้จะมีลักษณะใกล้เคียง กับสีในเกม ครับ


เอาล่ะ ไปเลือกสีในเกมเลย โดยดูให้ใกล้เคียงที่สุด
ให้ดูที่จุดที่ผม สี่เหลี่ยมไว้ให้ดูอ่ะ .. ทำออกมาจะใกล้ของจริงที่สุด

(ภาพบางภาพ ผมถ่ายด้วยโทรศัพท์มือถือ นะครับ อาจจะไม่ชัดเท่าไหร่)



** Tips เวลาที่เราอยู่ที่ Photoshop แล้วต้องการมาที่ เกมปังย่า
ไม่ควร ใช้เมาส์จิ้มที่ Bar ด้านล่าง ของ Windows

แต่ให้ใช้คำสั่ง Alt+Tab แทน (Alt ค้างไว้ แล้ว Tab จนไปเจอเกมปังย่า)

** ไม่อย่างนั้น กรอบที่เกิดจากการ Select ของเราจะไม่โชว์ครับ
จะโชว์เมื่อใช้คำสั่ง Alt+Tab เท่านั้น (ใช้ได้ใน Photoshop CS3 และคอมสเป๊กส่วนใหญ่)

ค่อยๆทำตามไปเลยครับ

thxxxxxxxxxxxxxx
สุดท้ายแล้วครับ

       
Quote:
กรณีที่ แนวเส้นประไม่ปรากฎ พอกลับมาที่จอปังย่า (ทำให้เพนต์ลำบาก)

ปัญหานี้ เคยมีคนถามผมมาแล้วครับ  

ไม่รู้เหมือนกันว่าเป็นที่อะไร (ไม่ที่ เวอชั่นของ photoshop ก็สเป๊กคอม)

แบบนี้ให้ใช้วิธี คลิกขวา ที่ Selection (ตอนที่เราเลือกให้มีกรอบล้อมๆขึ้นมาแล้ว)



แล้วเลือกใส่ Stroke ครับ ปรับสีที่ต้องการ และค่า pixel เลือกเป็น 1-3 ตามชอบ



พอกด ok จะมีกรอบ "สีทึบ" ตามสีที่เลือก ขึ้นมา จะทำให้มองง่ายขึ้น ครับ
แต่ขั้นตอน ก็อาจจะมากขึ้นอีกสักหน่อยนะ



พอทำเสร็จสีหนึ่ง ก็ให้ กด Alt+Ctrl+Z (Undo)
เพื่อกลับไป ก่อนที่เราจะใส่ Stroke เพิ่มมา ครับ แล้วจัดการต่อตามลำดับ


** อย่าลืม ว่าเราต้องเพนต์ในกรอบ ตาม ขนาดที่วางไว้ให้พอดี
ไม่งั้นภาพมันจะเลื่อน นะครับ




เสร็จแล้ว 1 สี สวยไหม อิอิ



จากนี้ ให้กลับไปที่ Photoshop แล้วกด Delete ที่คีบอด 1 ครั้ง
สีที่เราเลือกไว้จะหาย

** ที่ทำแบบนี้ เพราะจะได้ไม่สับสนกับบางสี เวลาที่ทำครับ



ต่อไปผมเลือกสีใหม่ครับ แล้วจิ้มตาม




ทำเสร็จแล้ว ก็กดลบไปอีก




ทำต่อไป เรื่อยๆ .. เรื่อยๆ .. จนครบทุกสีครับ

ต่อไปผมจะให้ดูภาพที่ ค่อยๆ ทำไปทีละสี ทีละสีนะครับ
ดูได้เลยจ้า

สีที่ 1



สีที่ 2



สีที่ 3 และ 4 สงสัย ผมลืมกดเซฟ มันหาย อดดูเลย

มาสีที่ 5 ละกันครับ



สีที่ 6 จ้า



สีที่ 7 จ้า



สีที่ 8 จ้า



สีที่ 9 จ้า



สีที่ 10   แล้ว



สีที่ 11 กับ 12 หายอีกแล้ว   สงสัยลืมกดเซฟ

ดูสีที่ 13 ละกัน  



สีที่ 14 จ้า  

อ๊ะ! ... เสร็จแล้ว  



เอ๊ะ!! ทำไมมีแค่ 14 สี ไม่ต้องแปลกใจ นะครับ
สีที่ 15 คือ สี ขาว และสีที่ 16 คือสี "เกือบขาว"

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

เสร็จแล้ว ภาพที่อยู่ใน Photoshop ก็จะถูกลบจนหมด พอดี  



ก็ขอจบเพียงเท่านี้ จ้า หลักสูตรนี้
รีบโพสทำไมค้าบบบบ =[]= โฮก !!
เจ๋ง!!!ครับ
ต้องเอาไปทำบ้างละ
กู้มายังไงครับเนี่ย - - ผมอยากกู้หลายๆัอันกลับมาเหมือนกัน
ตามนี้เลยครับ ^^ http://board.mysquare.in.th/view ... 1008&highlight=
ดันโลดเลยอะคับสุดๆ
ว้าวๆ มีสาระสุดๆ
ส่งไม้กายสิทธิ์มา,,,, !! "AVADA KEDAVRA"
thxxxxxxxxxxxxxx
ต้นฉบับโพสโดย ชิกกะชิก,,*ภู เมื่อ 2010-4-1 22:40
นายมาคั่นเค้านะนี่ `


เหมือนเคยเจอในบอร์ดเก่า

ขอบคุนค่ะ
ปรับความกว้างของตารางยังไงอ่ะ
เหมือนจะทำง่าย แต่พอเอาเข้าจริงๆ ตาแทบหลุด
ดันให้ เดี๋ยวหายาก
Drifterz_The 50 Chon Master
แจ๋วจิงๆ
แต่ถ้าเปนรูปอื่นจาใช้หลักการนี้เหมือนกันรึป่าวอ่า
-.-
แก้ไขล่าสุด Heyha ปาจิงโกะ เมื่อ 2010-5-27 22:03

คุณหมี เก่ง จัง อะ  หามาให้เป็นความรู้จิงๆ ขอบคุงน๊า
ขอบคุณอีกครั้งค่ะ
♥cafedress`shop  ★fb: http://www.facebook.com/qwenqwen
กระทู้ดีมีความรู้

ขอบคุณสำหรับความรู้ดีๆคะ
  
ขอบคุณครับ ทำได้แล้ว 100 สีแนะ

ไม่เคยพ้นตัวเอง ห่วยแตก  
เก่งเกิ๊น

P ray   
เเล้วที่เค้าบอกว่า ให้เลือกเป็นเเคช มันคืออะไรอ้ะ

- -

http://board.ini3.co.th/viewthread.php?tid=237&extra=page%3D3

^
^
^
ขอบคุณกระทู้ที่มาสาระมากมายครับ
คราวนี้ เคโรโระจะได้เป็นตัวซะที
เหอๆ  ดูยุ่งยากดีแฮะ !!!!

เดวลองเอาไปทำมั่ง

ขอบคุณสำหรับความรู้ดีๆนะคะ
Eagle´
น่าจะลองทำเสื้อคู่รักกันบ้างนะ  
อ่าขอบใจหมีมาก พี่จะได้เอาวิธีไปใช้บ้าง ฮาๆๆ
ขอบคุณมากค่ะ จะลองเอาไปยำมั่ง
ขอบคุณครับ

เดี๋ยวลองไปทำดูเฮะๆๆๆ ^^ จาทามได้ป่าวไม่รุ

เอาภาพมาลงในเกมไงอ่าค๊าบบ
ขอบคุณกระทู้นี้มากค่ะ

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

มู๋ เ ดี ย ว `,,lonely So Alone BB : 23A41990
สุดยอดหาวิธีนี้นานมากจะลองทำดูครับสุดยอดจริงๆ นาย
อยากถามอีกเรื่องหนึ่งครับว่าหารูปพวกนี้จากไหนครับ
ซิกเรปบน
อยากถามอีกเรื่องหนึ่งครับว่าหารูปพวกนี้จากไหนครับ
ต้นฉบับโพสโดย Gun เมื่อ 2010-8-2 22:44
Google ไง

---------------------------------------------------

ตำราเพ้นพิเซล เล่มแรกที่ ผมใช้ ละเล่มต่อไปคือ ของตนเอง ขั้นตอนทั้งหมด มันฝังลงไปสมองผมไปนานละ เหอๆๆ
www.sites.google.com/site/nanocontrolportfolio
ผลงานต่างๆครับ
เราอยากทำมั้งอ่า
บอกทีสิ่ ทำไงไห้สีที่อยุ่นัยโปรโต้ช๊อป


มาอยุ่ที่เกมงะ
อยากรู้บอกทีคับ
บอกทีสิ่ ทำไงไห้สีที่อยุ่นัยโปรโต้ช๊อป


มาอยุ่ที่เกมงะ
อยากรู้บอกทีคับ ...
ต้นฉบับโพสโดย PaeVirGin เมื่อ 2010-8-20 17:18
สีมันไม่ได้มาอยู่ในเกมเลย ครับ  เราต้องจิ้มสีตามทีละจุดๆ ตามโฟโต้ช๊อป ครับ
www.sites.google.com/site/nanocontrolportfolio
ผลงานต่างๆครับ
ดันน

*0* เปิดเทอมแร้ว
แก้ไขล่าสุด ถูกเสมอ,,* เมื่อ 2010-9-30 02:07

โห ขอบคุณสำหรับสาระดีๆที่มาแบ่งปันกันจ้า
เคยลองทำอยู่พักนึง โดยการประมาณสีเอง ตาจะบอด
หน้าหวาน สันดานแย่ ตอแหล แต่น่ารัก ><"
เหมือนง่าย แต่มาทำเอง งง - -"
เก่งจังเลยครับ อยกทำเป็นมั่ง  ต้องหัดทำซะละ
สำนึกดี  สังคมดี
ช่วยดันๆ
เริ๊ ษ จ่ะ
การลงลายแบบจิ้มทีละpixelคือยังไงหรอครับ
ขอบคุนครับ
กด คอนโท ง  ไม่ได้กรอบขึ้นอะทำไง
JB !
ขอบคุณค่ะ
ขอบคุงคร่ะ แต่ลองเอาไปใช้แล้ว เส้นที่ Selection เอาไว้มันไม่ขึ้นอ่ะคร่ะ
มีวิธีแก้ บ้างไม่คร่ะ ...
ต้นฉบับโพสโดย เดเด้จัง เมื่อ 2010-8-2 22:15
กด คอนโท ง  ไม่ได้กรอบขึ้นอะทำไง
ต้นฉบับโพสโดย 555555+.. เมื่อ 2010-10-11 10:00
ลองดูตามนี้ ผมโพสไว้ในร้าน
http://board.ini3.co.th/viewthre ... amp;page=1#pid42694

+ + ทำไมตาราง พิกเซล์ มันไม่ขึ้น อ่ะที่เป็น ช่องๆอ่ะ

    ไม่มีตารางวาดลำบากชะมัด

    กด Ctrl+' ไม่เห็ฯจะขึ้นเลย
กลับไปรายการกระดานข่าว