Visual Development : character design for games & animation” โดย Jason Pichon

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

การออกแบบตัวละคร จะออกมาแบบไหน ขึ้นอยู่กับ STORY เป็นหลัก

หลังจากได้เนื้อเรื่องแล้วก็ต้องมาเริ่มสร้างเวิร์ล
- Visual Development
เวิร์ลกว้างๆๆๆ มากๆ เป็นไอเดีย ของโลกรวมๆ ที่ตัวละครนี้อาศัยอยู่
-  Concept Art Detail
ทำให้เห็นภาพมากขึ้น บ้านเมือง สิ่งของที่จะใช้ สีสัน
-  Character Sheet
หลังจากสรุปเวิร์ลแล้ว ก็เข้าสู่ขั้นออกแบบตัวละคร และ รายละเอียดต่างๆในแต่ละตัว

โดยก่อนจะออกแบบ Jason จะวาง ตัวละครไว้ บนตำแหน่งใดตำแหน่งหนึ่ง โดยคำนึงถึง
ความเป็นการ์ตูน มีมากน้อยแค่ไหน และ มีความเป็น fiction มากน้อยแค่ไหน
และการวางตำแหน่งนี้ ต้องอิงตาม เนื้อเรื่อง (ก่อนจะออกแบบคาแรคเตอร์ต้องมี เนื้อเรื่องก่อน)

Shape and Exaggeration

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

ขอบคุณรูปภาพจาก  PSUIC

Cultural Influences
เป็นการสอดแทรกวัฒธรรมลงไปในตัวละคร
การออกแบบคาแรคเตอร์ต้องหาแหล่งอ้างอิง เพื่อให้ คาแรคเตอร์ออกมาไม่ขัดกับความเป็นจริง ในตัวอย่างเป็นงานของ jason เรื่อง มู่หลาน
เนื้อเรื่องเกิดที่ จีน ดังนั้น คาแรคเตอร์ก็จะออกแบบอ้างอิงกับงานวาดของ จีนๆ รูปร่าง รูปหน้ากลมๆ หรือ ความพลิ้วของเสื้อผ้า ก็จะนำมาใช้ในตัวละคร
แทรกลงไปในงาน เพื่อให้อารมณ์โดยรวม ออกไปในทิศทางเดียวกับแหล่งอ้างอิง เส้น-รูปร่าง มาจากสิ่งของในสมัยนั้น

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

ขอบคุณรูปภาพจาก  PSUIC

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

ต้องดูเยอะๆ  ดูละเอียดๆ สังเกต และ ทำตาม แล้วก็ หาสไตล์เฉพาะตัวให้เจอ
** ขาด ตก บกพร่อง ขออภัย งานนี้เป็น international seminar คนเขียนเองก็ ภาษาอังกฤษกระดิกหูมาก – -

ขอบคุณรูปภาพจาก  PSUIC สงขลา ค่ะ

https://www.facebook.com/PSUInternationalCollege

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

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

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

ข้อดี(สำหรับฝั่ง designer) งานจบลงเร็วกว่าเดิมมาก บางทีไม่ต้องแก้เลยลูกค้าเลือกจากแบบที่ทำมาแล้ว บางครั้งมีแก้บ้างแต่ก็ไม่มาก โดยส่วนใหญ่คอมเม้นท์มักจะเป็น เอาสีแบบที่(1)นะ แต่ตัวหนังสือเป็นแบบที่(2) อย่างเช่น ตอนที่ออกแบบโลโก้ของเกม CYBERMON

สรุป โลโก้ไฟนอลคืออันนี้ครับ

คือแค่เอาสีพื้นหลังจากแบบที่ 5 แล้วเปลี่ยนสีตัวอักษรเป็นสีของพื้นหลังแบบที่ 1,3 เท่านั้นนเอง

ตัวอย่างงานออกแบบโลโก้ที่ใช้วิธีเดียวกัน

โลโก้ที่ทำให้ลูกค้า

โลโก้ที่ออกแบบตอนจะก่อตั้งบริษัทครั้งแรก(Levelup Studio!)

โลโก้ Levelup Plus ที่ออกแบบชุดแรก

*หมายเหตุ : ภายในเล่มจะมีตัวอย่างหลายๆแบบ ซึ่งในบลอคนี้ผมจะเอารูปตัวอย่างที่ผมหามาเอง มาใช้ในครับ ไม่ใช่รูปเดียวกับในหนังสือ

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

Griffin = สิงโต + อินทรี

Minotaur = กระทิง + มนุษย์

ตัวอย่างที่ผมเอาไปใช้ในงานของตัวเอง

มังกรบิน(ไวเวิร์น)+ไฟ

ไดโนเสาร์+น้ำแข็ง

จิ้งจอกเก้าหาง+ผู้หญิง+ชุดมิโกะ+ร่ม+ดาบญี่ปุ่น

สาวsexy+แมลงเต่าทอง

นอกจากนี้หลายๆครั้งผมเอาไปใช้การวิวัฒนาการด้วย

ร่างที่ 1 : นางเงือก
ร่างที่ 2 : นางเงือก + เครื่องประดับ
ร่างที่ 3 : นางเงือก + เครื่องประดับราชินี + สัตว์ำพาหนะ(นีโม)

ที่มาของรูป :

http://atcloud.com/stories/83917

http://pirun.kps.ku.ac.th/~b5420102412/Lion.html

http://animals.nationalgeographic.com/animals/birds/bald-eagle/

http://set2day.wordpress.com/2011/06/10/bull-and-bear/

http://www.success.co.il/knowledge/languages/index.html

http://www.chicagogluttons.com/walking-spanish-with-achatzs-cover-band/minotaur/

คร่าวๆละกันครับ Mockup คือ การร่างแบบโปรเจคคร่าวๆเืืพื่อให้
ทีมพัฒนาเห็นภาำพได้ชัดเจนและเข้าใจตรงกันครับ (อันนี้ความเข้าใจส่วนตัวผมนะ)
ถ้าอยากอ่านละัเอียดๆ เคยมีน้องฝึกงานของผม blog เรื่องนี้ไว้ละครับ เข้าไปอ่านได้ ที่นี่

Mockflow ล่ะคืออะไร? ดียังไง?

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

Mockflow เป็น Online Tool ในการทำ Mockup สำหรับ Software และ Web ครับ
สามารถเข้าไปใช้งานได้ที่ http://app.mockflow.com/mockflow

ข้อดีของ Mockflow มีเพียบเลยครับ ผมขอยกอันที่เด่นๆมาละกัน
component เยอะ, ใช้ง่าย, export เป็น powerpoint, pdf ได้

เริ่มสร้าง Mockup

Mockflow ทำผมประทับใจตั้งแต่เริ่มใช้งานเลยครับ เพราะแค่การ Create Mockup ยังไม่ธรรมดาเลย
มีตัวเลือกสร้าง Mockup ที่หลากหลายมาก (ชอบสุดตรงที่มี Facebook App นี่แหละ)

การใช้งาน

การใช้งานหลักๆคือ ลากเอา component ต่างๆจากทางขวามือเข้ามาครับ
สามารถใช้งาน Ctrl+C, Ctrl+V, Ctrl+Z ได้ตามปกติ
เวลาจะเซฟก็ Ctrl+S ด้วยนะเอ้อ

มี Component อะไรให้ใช้บ้าง?

พวกนี้เป็น component พื้นฐานครับ ไม่ขออธิบายมากนะครับ นอกจากนี้ก็ยังมี component แปลกๆเด็ดๆให้ใช้อีกเีพียบเลยครับ

Icon

เราสามารถเลือกได้เลยครับ จะใช้ icon อะไร มีให้เลือกเพียบ

Alert Box

Captcha

Horizontal & Vertical Scroll Bar

Pagination

Search Box

Text Editor

Video Player !?

Tag Cloud ก็มี

Tab Bar

Tab Navigator

อันนี้ Tab อีกแบบครับ component อันนี้เท่ตรงที่ว่ามันย้ายตำแหน่ง tab ได้

Map

Mockup Store

นอกจาก component ที่ให้มาแล้ว เรายังสามารถไปหา component มาเพิ่มได้อีกจาก Mockup Store

ในนี้จะมีทั้ง component และ layout ที่ผู้ใช้ทำขึ้นเองแล้วเอามาแชร์กันครับ

แบ่้ง Mockup เป็นหน้าๆ

เราสามารถทำ Mockup แยกเป็นหน้าๆได้ครับ โดยไปสร้าง page เพิ่มได้ที่ tab page ทางด้านขวา
(อยู่ที่เดียวกับ component)

และอีก 1 ความเจ๋งของ Mockflow ก็คือ เราสามารถทำ Page เป็น Template ได้ครับ
โดยที่คลิกที่ปุ่ม Apply Template ครับ มันจะให้เราเลือกว่าจะใช้ Page ไหนเป็น Template ของ Page นี้

สร้าง Page นึุงขึ้นมาเป็น Template ก่อน

หลังจากนั้นค่อยเอาไปใช้กับ Page อื่นๆ

การ Export

เราสามารถ export ได้หลายอย่างครับ ทั้ง Powerpoint, Pdf และ อืนๆอีก
คลิกที่ Mockup ตรงเมนูด้านบน แล้วเลือก export

ตัวเลือก export

อันนี้เป็นตัวอย่างทีผมทำเล่นๆ แล้ว export มาครับ Test_for_blog.ppt

ข้อเสียล่ะ?

ข้อเสียก็คือมันไม่ฟรีครับ ฮ่าๆๆ ถ้าใช้แบบฟรีจะโดนจำกัดให้ใช้ได้แค่ 4 page และ project เดียวครับ

ถ้าจะจ่ายตังก็ปีละ $59 ครับ ซึ่งผมว่ามันก็คุ้มดี โดยเฉพาะกับบริษัทที่ทำ Outsource รับโปรเจคเยอะๆผมว่ายิ่้งเหมาะมากเลย