Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!

Home Explore ใบความรู้ การสร้างวัตถุด้วยเครื่องมือ Shape Tool และเส้น Path

ใบความรู้ การสร้างวัตถุด้วยเครื่องมือ Shape Tool และเส้น Path

Published by wiraya_srikarw, 2018-03-28 06:10:44

Description: ใบความรู้ การสร้างวัตถุด้วยเครื่องมือ Shape Tool และเส้น Path

Search

Read the Text Version

รายวชิ า เทคนคิ การสรางภาพเคล่อื นไหวคอมพิวเตอร 1 13.3 กลุม เครื่องมอื Drawingเปน กลมุ เครื่องมอื ทใี่ ชใ นการสรา งเสน และรปู ทรงขึ้นมาใชง านในรูปแบบตางๆ รวมท้ังการแกไขรปู ทรงชดุ เคร่ืองมือสรา ง Pathการสรา ง Path เปนการสรา งเสนทางหรอื ขอบเขตของรปู ทรงเพื่อจะนาํ ไปไลสีเปน เสน เปนรปู ทรง หรือนาํ ไปใส Style ใส Effects นอกจากนัน้ ยังใชเ ปน ตัวกาํ หนดขอบเขตของพืน้ ท่ี SelectionPen Tool เปน เครื่องมอื หลักท่ใี ชในการสราง Path โดยการเลอื กเคร่ืองมอื เลอื ก Options ซึ่งเราสามารถเลอื กสรา งไดสองลกั ษณะ คอื สรางเปน Shape Layers และสรา งเปน Path

รายวชิ า เทคนคิ การสรา งภาพเคลื่อนไหวคอมพวิ เตอร 2จากน้ันกม็ าทําการสรา ง Path ลงบนพ้นื ทที่ าํ งานดวยการคลิกแลว ปลอ ย แลวมาคลกิ ยงั จุดตอไป ก็จะเกิดเสนเช่ือมโยงกนั ขึ้นมาFreeform Pen Tool ใชในการสราง Path แบบอิสระคือใชวาดรูปทรงเหมือนการวาดดว ยดนิ สอ ปากกาAdd Anchor Point Tool การเพม่ิ จุด Anchor เพ่อื เพม่ิ ตาํ แหนงยดึ เหนย่ี วใหกบั เสน เลือกเคร่ืองมือ AddAnchor Point แลวนาํ เมา สม าวางบน Curved Line Segment ท่ไี มมจี ุด Anchor คลกิ เมา สเพอ่ื เพม่ิ จุดบน CurvedLine SegmentDelete Anchor Point Tool การลบจดุ Anchor เพอื่ แกไขทางเดนิ ของเสน เลือกเครื่องมือ Dlete Anchor Pointแลว นาํ เมา สม าวางบน Anchor Point คลิกเมาสเพอ่ื ลบจุดบน Curved Line SegmentConvert Point Tool ใชเ พอื่ ทจ่ี ะทําใหตําแหนง ของ Direction Point และ Direction Line ยอ นกลบั มาตั้งตนท่ีจุด Anchor ทเี่ ราใชเครื่องมือน้คี ลกิ ลงไป และยงั ใชดึงเอา Direction Point และ Direction Line ออกมาใหมไดใช Convert Point Tool คลิกเมา สลงไปยังตําแหนงของ Anchor Point ท่ตี อ งการปรับแตง จะทําใหต าํ แหนง ของDirection Point และ Direction Line ยอ นกลบั มาต้ังตนที่จุดAnchorทใ่ี ชเครื่องมอื คลิกลงไปใช Convert Point Tool ดงึ เอา Direction Point และ Direction Line ออกมาใหมแ ลวปลอยจากการกดเมา ส คลกิที่ Direction Point อีกครั้งแลวลากปรบั แตงเฉพาะสว นนน้ั ดวยเครื่องมือนี้

รายวชิ า เทคนคิ การสรางภาพเคล่อื นไหวคอมพิวเตอร 313.4 ชดุ เคร่ืองมอื Path SelectionPath Selection Tool ใชเลอื กและเคลื่อนยา ย Path ที่สรา งไวแ ลว ไปวางยังตําแหนง ใหมDirect Selection Tool ใชเคลอ่ื นยา ย Anchor Point ดว ยการคลกิ คา งไวแ ลวลากไปตามตอ งการ หรือใชในการปรับแตง Curved Line Segment โดยการคลกิ ที่ Direction Point แลวลากเมา สปรบั แตงตามท่ีตองการ มักจะใชสลบั กบั เคร่อื งมือ Convert Point ToolPath PalettePath ทเ่ี ราสรา งข้ึนน้ันจะถูกเกบ็ ไวใน Path Palette ซ่งึ จะชวยใหเราเกบ็ ไวใ ชงานไดห ลายๆ Path ดว ยกัน และยงัสามารถเลอื กแสดงทีละลําดบั ช้ันของ Thumbnail ท่เี กบ็ Path น้ันไวได เพียงแตเราตองมาดบั เบ้ลิ คลิกทชี่ ื่อ WorkPath แลว ทําการเปลย่ี นชื่อใหม นอกจากนีย้ งั มปี มุ คาํ สงั่ และเมนคู าํ ส่ังอนื่ ๆ ท่ีเกย่ี วของกับ Path เชน การเติมสีใหกับพน้ื ทขี่ อง Path หรือเสน การ Load Selection และ ฯลฯชุดเครื่องมือสราง Shape Toolการใชเครื่องมือในชุดน้ีน้ันถือเปนการสรา งรูปทรงอกี แบบคลา ยการใช Pen tool ตา งกแ็ ตเ พยี งวาเปนการสรางดว ยรูปทรงสาํ เรจ็ รูปเทาน้นั เอง และยังสามารถทีจ่ ะสรางรปู ทรงสาํ เรจ็ รูปเก็บไวเรียกใชใน Custom Shape ไดเชน การสราง Logo แตอ ยา งไรก็ดไี ดมกี ารรวมเอาคณุ สมบัตขิ อง Pen tool มาไวใ นออปชนั่ นีด้ วย ทาํ ใหสรา งรูปทรงอสิ ระไดเ ชนกัน และยงั สามารถเลอื ก Style เขามาใชรวมกันไดเลย

รายวชิ า เทคนคิ การสรา งภาพเคลอื่ นไหวคอมพิวเตอร 4Photoshop - Pen Tool กับ การสรา ง Paths เบื้องตน การทีจ่ ะสรา งเสนโคง ท่ีมคี วามโคงที่สมบูรณนน้ั ทาํ ไดไมยากถา รจู กั การใช Pen Tool ของ Photoshopหลายคนอาจจะไมคุน เคย กบั การใช Pen Tool เพราะ Pen Tool ในPhotoshop มันไมไ ดใ ชง านเหมือน ปากกาทีเ่ ราเขียนกนั อยูทุกวันนี้ การลากเสน ดวย Pen Tool เปดรูปทีต่ องการใน Photoshop ขึ้นมากอน เครือ่ งหมาย Pen Toolแลว เลอื ก Path ถา เขยี นเสนตรง กเ็ พียงแคไปวาง Pointer ตรงจุดเร่ิมตน แลว กค็ ลิกตรงจุดที่ตองการแลว ปลอ ย แลว ก็คลกิ ตรงจุดตอ ๆไป กจ็ ะไดเ สน ตรงสรา งรูปทรงเรขาคณิตตามตอ งการ แตจ ะไมขอกลาวถึงรายละเอียดเพราะงายสวนใหญทํากันเปนแลว จะขอกลาวถึงการเขียนเฉพาะเสนโคงเทา นนั้ เร่มิ จาก วาง Pointer ตรงจดุ เร่มิ ตน แลวก็คลกิ ตรงจุดนัน้ แลว แลว ปลอ ยเมาส จากนน้ั วาง Pointer ตรงจุดตอ ไป (วางตรงจดุ หักโคง ความโคงตองโคง ทางเดยี วกนั นะครบั ) แลว คลกิ แตอ ยาปลอ ยเมาส แลว ลากเมาสจนเกดิ เสน โคงขึ้นมา ความโคงจะเกิดตรงขา มกบั ทิศทางของการลากเมาส ถา ความโคงไมพ อดีกอ็ าจจะลากเอยี งซา ยหรือขวาลากขึน้ หรือลงจนความโคง ไดท ี่จงึ คอ ยปลอยเมาส จากในรูปจะเห็นมีแขนเกิดข้ึนสองแขนมใี วเพอื่ ขยับในกรณที ่ีเสนยังโคง ไมพ อดี การปรับความโคง ทําไดโดย วาง Pointer ตรงปลายสุดของตําแหนงแขนของแตละอนั หรือแมแตจ ุด Anchor กส็ ามารถขยับไดด วยการกด ปมุ CTRL, Pointer รปู ปากกาจะเปล่ยี นเปน ลูกศรสีขาว ลากเอียงซายหรอื ขวาลากขขนึ้ หรือลงจนความโคงไดท จ่ี งึ คอยปลอยเมาส ถา เราไมก ดปุม CTRL กอน Photoshop จะสรางจุด Anchor ขึ้นมาใหมสน ของความยุงเหยิงจะเรมิ่ ข้ึนทนั ที ดงั ตวั อยาง แกโดย Edit > Undo หรอื ไมก็ไปที่ History Pallet แลวเลอื ก ขน้ั ตอนที่สรางข้ึนกอ นหนาน้ี การทีจ่ ะลากเสนหรือตอเสนไปยงั จุดตอไปเราควรจัดการกับแขนปรบั ความโคงกอน โดยการวาง Pointerไปตรงจุด Anchor (ทเี่ ราจะตอเสน) แลวกดปมุ ALT แขนขางหน่ึงจะหายไป

รายวชิ า เทคนคิ การสรางภาพเคลอื่ นไหวคอมพิวเตอร 5 จากน้ันเราคอยวาง จดุ Anchor ตอ ไป คลกิ แลวลากเมาสไปเล็กนอ ย จะเกดิ จุด Anchor และแขน 2 แขนขึ้นมาใหม ดงั รปู ถัดไปตองจําไวเ สมอวาการกาํ หนดจุดใหมแตล ะครง้ั ตองกด ปมุ ALT ทกุ ครั้ง เวน แตการสรางเสน โคงท่ีโคง ไปในทางเดยี วกันกไ็ มจ าํ เปน ตองกดปมุ นี้ ทําแบบนีไ้ ปจนรอบสงิ่ ท่ีเราตองการ พอครบรอบPointer จะขนึ้ เปนเลข 0 กแ็ สดงวาเสน มาบรรจบกันพอดี จุด Anchor ท้ังหมดจะหายไป ถา เราตองการเรยี กจดุ Anchor ขนึ้ มาเพ่ือการปรับเปล่ยี น ก็นาํ Pointer ไปวางที่เสนแลว กดปุม CTRL แลวคลกิ เมาส จุด Anchor จะกลบั คืนมาเหมือนเดิม จะใหหายไปก็กดซ้าํ หรอื ตองการเพ่มิ แขนท่ีจุใดจุดหนงึ่ ก็ใหกดปมุ CTRL แลว คลกิ เมาสต รงจดุ นน้ั ๆ จะมีแขนขึน้ มาใหเราทําการขยับไดต ามที่ตองการ แตอ ยา ลมื กด ปุมCTRL หรอื ALT ทกุ คร้ังทที่ ําการขยบั แขนแตล ะอัน เมื่อไดเสน ท่ีตองการแลว จะเอารปู ท่ไี ดไปใชใ บงานอืน่ ๆเราตองทาํ การ Selection ดวยการคลิกขวา แลวเลอื ก Make Selection จะเกิดหนาตา งอยา งท่เี หน็ เลือก FeatherRadius ตามตองการแลวกด OK กจ็ ะได Selection ทีน่ ําไปใชใ บงานตอ ไป อาจจะใชว ิธี Edit > Copy หรือจะใชMove Tool ลากไปวางใบงานตอ ไปที่เราเปด ขน้ึ ไวแลวใน Photoshop ก็สามารถทําได ที่มา :http://www.waiimun.com

รายวชิ า เทคนคิ การสรางภาพเคลอ่ื นไหวคอมพวิ เตอร 613.5 การวาดภาพ ตอนท่ี 1 : เรยี นรูเครื่องมือ Pen Tool โดยละเอยี ด Photoshopการวาดภาพ บทที่ 1 : เรียนรูเครอื่ งมือ … การวาดภาพ วาดตาม การดราฟในโปรแกรม Photoshop นะครับขั้นตอนแรกเราควรเรียนรเู ครอ่ื งมือทจี่ ะใชกอน โดยเครื่องมือหลัก ๆที่ใชในการวาดหลกั ๆ คือBrush Tool และPen Toolสวนในการลงสนี ้ัน เราจะศกึ ษาใน การวาดภาพ ตอนที่ 2 : ข้ันตอนการวาดตาม 1Pen Tool : เราจะเหน็ วา ในสวนของ Pen Tool จะมีใหใชแบบทีเ่ ปน Shapeและ Path  Shape ใชในการสรางเสนวาดตาม สามารถทาํ ในสวนของสรี ปู เสน ขอบ ใหเห็นไดเ ลย  เรมิ่ ตน 1. Pen Tool 2. Shape 3. ปรับสเี สน ขอบ สพี น้ื หลงั ขนาดเสน ขอบ รปู แบบเสนขอบ

รายวชิ า เทคนคิ การสรางภาพเคลื่อนไหวคอมพวิ เตอร 7เร่ิมวาด 1. ใชเมาส คลิก 1 ครง้ั 2. ตอจุด คลิก 1 ครัง้ 3. เล่ือนเมาสออก เพ่ือใหเห็นเสน path ในจดุ ตอไป การใชShift เปน การทาํ เสน path ตรงกับองศา 45,90,180 เปนตน และในสวนของ การใชAltเม่อื เราลากจากจดุ ที่ 1-2 แลว เราตองการตัดเสน เปนจุดตอ จดุ ใหม ันตอเน่ืองกันไปเรื่อยๆและถาไดล องทาํ ตามจะเห็นวา เมื่อเราลาก จุด1-2 แลวกด Alt เสนจากจดุ 1-2 จะหยุดเพยี งที่เราไดล าก (วิธีน้ี อาจจะเปนวธิ ที คี่ นชาํ นาญแลวนะครบั ) 4. เราสามารถเปล่ียนรูปราง เสน path กอ นหนา หรือ จะใหเสน path ตอ ไปจะไปในทิศทางใดก็ได โดย กด Alt + คลิกเมาส คา ง เลอ่ื นเมาส 5. เมือ่ เสน path ของเราหาย เราจะใชว ิธที ี่ 6 6. ยอนกลับไป 1 ครงั้ Ctrl+zแลว เมาสชี้จะเหน็ สัญลกั ษณ หมึกซมึ และรปู ส่เี หลี่ยมดานลา งขวา ทําการ คลิก 1 คร้งั เพอ่ื ตอจุด 7. การตัดจุด path ตอไป กด Alt + คลกิ 1 ครงั้ 8. ขั้นตอนนเ้ี มื่อวาดรูป จากขั้นตอน 1-7 แลว มาถึง จดุ ส้นิ สดุ เราจะเหน็ สัญลกั ษณ แลวคลิก 1 ครง้ั เปนอัน เสร็จส้นิ หรือถา เราจะปลอ ยใหเปน เสน เรากดจะ กด shift+คลิกพน้ื ท่วี าง 9. การเปลี่ยนสีของพน้ื หลัง เสนขอบ และขนาดของเสน ขอบ

รายวชิ า เทคนคิ การสรา งภาพเคลื่อนไหวคอมพิวเตอร 8  Pathใชใ นการสรางเสนวาดตาม โดยใชรวมกบั Brush Tool อาจจะเปน การใชจุดตอเทา นน้ั จะเห็นภาพ ในลกั ษณะท่เี ปนเสน ทส่ี วยงาม มีจดุ ตนเลก็ กลางใหญ จุดปลายเล็ก เหมาะสําหรบั การดราฟรปู คน …เร่มิ ตน ตงั้ คา 1.Brush Tool >> 2.ตัง้ คาในทีน่ ้ี ผมใช brush วงกลมปกติกไ็ ดป ระมาณ 4-7px สวนอวศา ใหปรบัเปน วงรี ลกู ศรเอยี งประมาณ 125 องศา : ในการวาดภาพ จะใช Pen Tool (Path) + Brush Tool เพ่อื ใหภ าพมีจากจุดตนเล็ก กลางใหญ จดุ ปลายเล็ก หรืออื่นๆ

รายวชิ า เทคนคิ การสรา งภาพเคลอ่ื นไหวคอมพิวเตอร 9จากนัน้ ไปท่ี Pen Tool >> Pathเร่ิมวาด :ขน้ั ตอนการวาดเหมือนกนั กบั Shape เพยี งแตวา ถาเราคดิ วา จะใหจุดน้ันเปนจดุ สิ้นสดุ แลว เราจะ (4)คลิกขวาเลอื ก stroke path ขอแนะนําเราอาจจะแบง Layer หรือ Path ใหชัดเจน ขนึ้ อยกู ับแตล ะคน

รายวชิ า เทคนคิ การสรา งภาพเคล่อื นไหวคอมพวิ เตอร 1013.6 มาวาดการตนู Power Puff Girlขนั้ ตอนการปฏบิ ตั งิ าน วาดการต นู Power Puff Girl1.เร่มิ จากวาดเปน รปู วงรี โดน เลือก ที่ elliptical shape tool.2. กําหนด Stoke ใหเปนดงั รูปภาพขางลาง3.ทาํ Duplicate Layer นําเอาEffect ออก แลวเติมสีดําใส4. คลิก Enable Subtract จาก shape area ท่ีตาํ แหนงเมนูบาร ดังรปู ขา งลาง5. เลอื กใชเคร่ืองมอื Pen tool จากน้นั ทําการวาด ดงั รูปขางลา ง6.ใช Pen tool ในการวาดผมสวนของนอก ดงั รปู ขางลาง

รายวชิ า เทคนคิ การสรางภาพเคลือ่ นไหวคอมพิวเตอร 117. Duplicate Layer ในสวนของผม และนําไปไวอ ีกขาง ดงั รปู8. วาดวงกลม เพ่ือทาํ เปนตา ดังรปู9. ใชsubtract ทพ่ี น้ื ท่ี shape area . ใช pen toolวาดดังรปู ภาพขางลา ง.10. เติมสีของ Shape นน้ั ดว ยสขี าว ดงั รูป11. ใส Stoke ใหกับ Layer ตามภาพดานบน12. Duplicate layer น้อี กี ครง้ั และ เอา effect ออก . ใสสดี วยสีเขียว. กด Ctrl+T and บบี ขนาดใหเ ลก็ กวา Layerสขี าว ดงั ภาพขางลาง

รายวชิ า เทคนคิ การสรา งภาพเคลื่อนไหวคอมพวิ เตอร 1213. เลือก rounded rectangle tool. ปรับแตงคา Setting ดงั รูปภาพขางลา ง14. วาด rounded rectangle สาํ หรบั สรางนัยนตา15. สราง นัยนตาขางในอกี เปนสีขาว16. เลอื ก Layer ทง้ั หมดท่เี กี่ยวกบั การวาดตาทาํ การ Duplicate และ flip horizontally และทาํ ไปวางอีกขา ง17. วาดปากโดยใช pen tool18. วาดสว นตวั ทอนบนดงั รูปภาพขางลา ง19.วาดแขน โดยใช pen tool และ apply stroke layer style.20. วาดสวนขาโดยใช pen tool และ apply stroke layer style.

รายวชิ า เทคนคิ การสรา งภาพเคล่ือนไหวคอมพวิ เตอร 1321. เพม่ิ รายละเอยี ด ใหกับขา22. ใสส ี background ดว ยสชี มพู23. ใช pen tool สรางรปู สามเหลยี่ ม บนพื้น background. ดังรูปขา งลาง24. เปลย่ี น layer mode เปน overlay สาํ หรบั Shape ดงั กลา ว จะไดดังรูปภาพน้ีทม่ี า : http://www.tlcthai.com/webboard/view_topic.php?table_id=1&cate_id=28&post_id=26618

รายวชิ า เทคนคิ การสรา งภาพเคลื่อนไหวคอมพวิ เตอร 1413.7 การสรางเสนตัวการต นู ดว ย Path (Photoshop)เมื่อรางภาพเสร็จไปตรงOpacityปรับใหจ างสรางlayer ใหมขึน้ มาคลกิ เครอื่ งมือ Pen Tool (หรือจะใชค ยี ล ัด [P] กไ็ ด) ใชเ ครื่องมอื Pen Tool คลกิ ลงไปมนั จะเปนจุดเร่ิมตนทเ่ี ราตองการจะวาดเสน Pathเราก็ดราฟตามเสน ที่เรารางไปเลย โดยการคลกิ จดุ เพม่ิ ขึ้นมาอีกจดุ (จะเหน็ เสนลากเช่อื มตอระหวา งสองจุดขึน้ มา)เมื่อเราดราฟเสน เสร็จ ใหกด Enter เพ่อื ทีจ่ ะใหจุดดราฟหายไปคลกิ ขวาไปที่ Stroke Path

รายวชิ า เทคนคิ การสรา งภาพเคลือ่ นไหวคอมพวิ เตอร 15 จะขึน้ หนาตา งนก้ี ็กด OKจะไดเสน Stroke ทีเ่ ราดราฟไวต ง้ั กะตอนแรกสรา ง Layer ขนึ้ มาอีกอนั เปล่ียนชอื่ Layer (เพอื่ ใหไ มสับสนในการใชง าน)ในอันน้ีเปลี่ยนจากLayer 1 เปน เสนรา งLayer 2 เปน เสนLayer 3 เปน สนี าํ Layer ที่ 3 ไปไวอนั ที่ 2 (กอน Layer 1 )เพื่อที่จะลงสีไปท่เี ครอ่ื งมือ magic wand tool

รายวชิ า เทคนคิ การสรางภาพเคล่ือนไหวคอมพิวเตอร 16คลิกตรงสว นทเ่ี ราจะลงสี จะเกิด Selection ขึ้นมาตามขอบของเสน ดทู ่ี Layer ดว ยวา เราทาํ ท่ีLayerไหนอยู (อนั น้ีทําในLayerเสน แตเวลาลงสีใหไ ปลงสใี นLayerสี)ถาสงั เกตดุ ีๆจะเหน็ ขอบระหวา ง Selection กับเสนอยูถ า ลงสีไปตอนนจี้ ะทําใหมชี อ งวา งเหลือระหวา งเสน กับสีไดแกดวย คลิกเมน>ู Select > Modify > Expandกาํ หนดคาของ Expand Selection ใหเปน 2 เพ่อื ขยายขอบออกไปมาลงสีกนั*****ในการลงสีอยาลมื ดู Layer ดว ยลงสีใหค รบทุกสวน เทา น้ีTip เลก็ ๆนอ ยๆกอนจะตัดเสน ใหด ูหัว Brush กะขนาดหัว Brush

รายวชิ า เทคนคิ การสรา งภาพเคลอื่ นไหวคอมพิวเตอร 1713.7 เทคนิคการวาดหนา การตูนขน้ั ตอนที่1. เปดงานขึน้ มาใหม1งาน ขนาด300*300 pix สรา งเลเยอรใ หมมา1 เลเยอร ใช tool ellipticalmarquee สรา ง selection รูปวงกลม แลวเตมิ สลี งไปโดยไปที่เมนู edit/fill ใหใสส ขี าว ใน foreground colorจากนัน้ ใชเ คร่ืองมือ pentool วาดเสน path ตามภาพเพ่ือทเี่ ราจะทาํ ปากของวัว เทคนิดการวาด กดshift คา งในเคร่ืองมือ pen tool เราจะไดเ สนทต่ี รง จากนั้นในเครื่องมือ pen tool ใหเราใช convert point tool เพอื่ ปรับมุมของเสน path ในเคร่ืองมอื pen tool เมือ่ เราวาดบอยๆจะเกิดความชาํ นาญไปในตัวขน้ั ตอนท่ี2. หลงั จากนัน้ ก็ทําเสน path ใหเปน selection โดยคลกิ ขวาทีเ่ สน path จะมีเมนยู อยใหเราเลือก ไปท่ีเมน make selection กําหนดคา ของ feather-radius ..ใหเปน 0 pixelsขนั้ ตอนที่3. จากน้ันทําการเติมเสนและสีลงไปใน selection โดยไปที่คาํ สงั่ edit/stroke เพื่อเตมิ เสนในท่ีน่เี ลือกสีโทน เทา แลว จากนั้นเติมสชี มพลู งไปไปทค่ี ําสัง่ edit/fill..ก็จะไดร ูป ปากดงั น้นั ภาพขน้ั ตอนที่4. จากน้นั ใหท าํ การสราง Layer ใหมแ ลวสรา งselection รปู วงกลมเล็กๆ1รูปแลว ทําการเติมสีดําลงไปโดยไปทีค่ ําส่งั edit/fill Foreground Color ซ่ึงเปน สีดาํ จากนัน้ ใหท าํ การ Fill สีลงไป ดงั ภาพ. เทคนคิ การทําควรทาํ ทีละวงกลม เมอื่ ไดวงกลมแรกแลว ทาํ การ copy layer มาอกี อันมา เลอ่ื นใหไดจ มกู ทั้ง2ขางจากนัน้ กท็ าํการรวมเลเยอรโดยใชค ําสงั่ layer/merge down รวม layer อันบนกับอันลา ง ก็จะไดดังภาพ

รายวชิ า เทคนคิ การสรางภาพเคลื่อนไหวคอมพวิ เตอร 18ข้ันตอนที่5. จากนัน้ ใหท ําใหจมูกดูนูนข้ีนโดย layer style เขา ชว ยโดยทําการคลก๊ิ ท่ไี อคอนรปู ตัวอกั ษร f (สังเกตในวงกลม) ไปทคี่ าํ สัง่ ยอย bevel and emboss กาํ หนดคาความนนูข้ันตอนที่6. กําหนดใหรูปปากดมู ีเงานดิ หนอ ยโดยสราง layerข้ึนมาใหม ใหอยดู า นบนสดุ จากนนั้ สรางselection รูปวงกลม แลวใชเครอื่ งมือ air brush กาํ หนดหัวแปรงตามตัวอยา ง แลว เลอื กโทนสเี ทาออนๆ พนสีตามขอบของ selection ก็จะไดเงาตามตัวอยาง

รายวชิ า เทคนคิ การสรางภาพเคลอ่ื นไหวคอมพิวเตอร 19ขน้ั ตอนท่ี7. ตวั อยางตอไปสราง layer ขน้ึ มาอกี อันใหอยดู า นบนสุด แลวทําการวาดเสน path โดยใชเคร่ืองมือpen tool ตามภาพ จากนน้ั เปล่ียน path ใหเปน selection เหมือนข้ันตอนที่ 2 กาํ หนดคาของ feather-radius ..ใหเปน 0 pixels ตอ ไปทําการเติมสีลงไป ในท่ีนี่เราใชสขี าว โดยไปท่คี าํ ส่งั edit/fill เพอ่ื เติมสีขาวลงไปใน selectionขน้ั ตอนท่ี8. ตวั อยา งตอไปสรา งลูกตา ใหสราง layerใหมขึน้ อกี อันใหอ ยดู า นบนของ layer รูปหนา ในที่น้ีเราใชtool elliptical marquee สราง selection รูปตาดงั ภาพ แลว สรา ง selection อกี อันเพ่อื ใหอยูในวงกลมใหญโดยเลือกทไ่ี อคอ น selection ตามหมายเลข 2 สว นรปู ลูกตา ใหสรางlayer ใหมอ กี อัน ใหอ ยูขา งบนของ layer ขอบตาสรา งรูปตาตามหมายเลข 3 แลว ทําการเติมสดี ํา ลงไปทัง้ สอง layer ไปทค่ี าํ สงั่ edit/fill เพ่ือเตมิ สีดําลงไป เม่ือทาํเสรจ็ ใหรวม layer ขอบตากับรปู ตาเขา ดว ยกัน โดยใชคาํ สงั่ layer/merge down รวม layer เขา ดวยกนั เราจะไดร ปูตา1 layer จากนั้นทําการ copy layer รปู ตามาอีก 1 layerทําการสลับขา งโดยไปทคี่ ําส่ัง edit/transform/fliphorizontal กลบั ขา งทําการเล่ือนรูปตาใหค งที่ เราสามารถใชค ําสั่ง edit/free transform เพ่อื กําหนดให รูปตาเอียงเสร็จแลว ทําการรวมรปู ตา 2 รูปเปน layerเดยี วกัน โดยใชคําส่งั layer/merge down

รายวชิ า เทคนคิ การสรางภาพเคล่ือนไหวคอมพวิ เตอร 20ขั้นตอนท่ี9. เม่อื ไดร ูปตาแลวทาํ การใหม ันดนู ูนข้ีนโดยการใชค ําส่ัง layer style เขา ชว ยโดยทําการคลกิ ไอคอนรูปตวั อกั ษร f ไปทีค่ าํ ส่ังยอ ย bevel and emboss กําหนดคาความนูนตามตวั อยา ง. หรือตามใจชอบจะสังเกตไดวาตาจะนูนข้ึนดงั ตัวอยาง แลวกาํ หนดใหโครงหนา มีแสงเงาเราจะกําหนดใหรปู โครงหนา ดมู เี งานิดหนอยโดยสราง layer ขึ้นมาใหม ใหอยูดา นบนสุดจากนั้นสราง selection รปู วงกลม แลวใชเคร่ืองมือ air brushข้นั ตอนที่10. กาํ หนดใหรปู โครงหนาทง้ั 2มีลกั ษณะนูนมนโดยใช filter เขาชวยโดยไปท่ีเมนู filter/distort/pinchกําหนดคาใหเปนคาตดิ ลบ -52% หรือตามใจชอบ กจ็ ะไดโครงหนามีลักษณะนูนมนขึน้ ทาํ ทง้ั 2 layer ตามภาพข้ันตอนท่ี11. ตัวอยางตอไปการสวมเขา สรางเขาตางหากทําการวาดเสนpathใน layerใหมอีกอันโดยใชเครื่องpen tool ตามภาพ จากน้ันเปล่ียน path ใหเปน selection เหมือนข้ันตอนท่ี 2 กําหนดคาของ feather-radius ..ใหเปน 0 pixels ตอไปทําการเติมสีลงไปในที่นี่เราใชสีดํา โดยไปท่ีคําสั่ง edit/fill เพื่อเติมสีดําลงไปใน selectionแลวทาํ การสรา งหตู อโดยวาดหขู ึน้ มาเหมอื นเดิม เตมิ สี ดาํ ลงไปข้นั ตอนที่12. จากน้นั copy layer เขากะหู มาเปนอกี 1 layer ทําการสลับขางโดยไปทคี่ ําสัง่ edit/transform/fliphorizontal กลับขา งทาํ การเลื่อนรปู เขากะหใู หค งที่ เราสามารถ ใชค ําสัง่ edit/free transform เพือ่ กาํ หนดให รปูเขากะหูเอียงไปอีกขาง เสร็จแลว ทาํ การรวมรปู เขากะหู 2 รูปเปน layerเดยี วกนั โดยใชคาํ สั่ง layer/merge downก็จะไดด งั ภาพ แลว แตง สีเงาเหมอื นข้ันตอน 5 ซึ่งเราไดแ ตงมาแลวขนั้ ตอนท่ี13. ตัวอยางตอไปทาํ การสราง layer มาใหมอีกอันตามตวั อยา งสราง selection รูปวงรีๆแลวทาํ การเตมิสีเทาลงไปโดยใชคาํ สั่ง edit/fill Foreground Color ซึ่งเปนสเี ท เรากจ็ ะไดภ าพตามตัวอยาง

รายวชิ า เทคนคิ การสรา งภาพเคลื่อนไหวคอมพวิ เตอร 2113.8 การวาดดวยเครื่องมอื Pen Toolองคประกอบของเครอ่ื งมือ1 = เครือ่ งมือหลกั ใชล ากกําหนดจุดหรือลากเสน path (เปรียบเสมือนเสนราง)2 = เหมือนกบั แบบแรก แตจ ะอิสระ ลากไปไดเ ร่ือยๆแลวแตม ือเราจะลากไป (จะเกดิ จุดยบุ ยบั เลย)3 = ใชเ พม่ิ จุด path4 = ใชลบจุด path5 = ใชแปลงจดุ pathเคร่ืองมือที่เกยี่ วขอ งกับการวาด Tool Option Bar ของเครื่องมือ Pen Tool6 = เวลาเราลากจะมีแคเสน path ธรรมดา7 = จะเกิดแถบสีขณะทเี่ ราลากเสน เหมือนกบั เราเทสีดว ยตลอดเวลา

รายวชิ า เทคนคิ การสรา งภาพเคลื่อนไหวคอมพิวเตอร 228 = ชอ งของเสน path ทีเ่ ราสรา งข้นึ เหมือนกบั layer ในหนาตา งทาํ งานปกติ9 = สรา งเสน ไขปลาจากเสน path เหมอื นกับเวลาใชเ คร่ืองมือ Magic wand Tool10 = stroke เสน จากเสน path11 = fill หรือเทสีจากเสน pathการวาดสเี่ หล่ียมขนั้ ตอน 1 เร่มิ แรกเราก็จิ้มจ้ึกลงไป 1 จุดกอน (จม้ิ แลว ปลอ ยเมาส)ขั้นตอน 2 ไปจม้ิ อีกจดุ หนง่ึ มันกจ็ ะเกดิ เสน ท่ีเช่ือมระหวา งจุดสองจุดขน้ั ตอน 3 - 5 ทาํ แบบเดียวกันครบั จนครบ เกดิ เปนเสน path รปู สเี่ หลยี่ มขั้นตอน 6 กดทีเ่ ครอ่ื งมือเทสี มันกจ็ ะเตมิ สลี งไปในชอ งวา งทเี่ กดิ จากการลากเสน วิธขี างตนจะใชวาดเฉพาะเสน ตรงธรรมดา ก็เพม่ิ จุดไปเรือ่ ยๆแลว กลับมาบรรจบท่จี ุดแรก

รายวชิ า เทคนคิ การสรางภาพเคลื่อนไหวคอมพิวเตอร 23- ภาพตัวอยางสังเกตวาสว นหักมมุ ก็คอื จุดที่เรากาํ หนดท้งั หมด -เมอ่ื ไดเสน ตรงแลว ในกรณที ่ีจะวาดเสนโคงกท็ ําตามน้ี สาธติ การวาดรปู ครึ่งวงกลม ...ขน้ั ตอน 1 ก็จม้ิ ไปกอ น 1 จดุข้ันตอน 2 จมิ้ จดุ เพม่ิ แตย งั กดเมาสค างไวน ะครับขั้นตอน 3 ลากเมาสไปดานขา งเพื่อใหเกดิ เสนทใ่ี ชด ัดสวนโคง แลวปลอ ยเมาสขั้นตอน 4 - 5 จุดเพิ่มจนครบตามรูปทีเ่ ราตองการขั้นตอน 6 กดเทสี กจ็ ะไดร ปู ครึง่ วงกลมขึน้ มา::ขอ สงั เกต :: เสน ที่เกดิ ขน้ึ ขางๆจดุ 2 เสน ถาเราดงึ ยืดเขา - ออกเอียงซาย - ขวาก็จะปรบั ใหเสน path โคง มากนอยตา งกนั

รายวชิ า เทคนคิ การสรา งภาพเคลอื่ นไหวคอมพวิ เตอร 24- เวลาเราจะปรับความโคง ก็เลอื กลูกศรสขี าวแลวหมุน จะปรับไดทีละจดุ ถาเปน ลูกศรสีดาํ จะเปนการยา ยตําแหนงเสน path ท่ีเราวาดทั้งเสน มีอกี วิธใี นการสรางเสน โคง แรกๆอาจจะฝกจากวิธีนีก้ อ นก็ได ...ขั้นตอน 1 ก็สรา งจุดธรรมดา เกิดเสน path เปนเสนตรงขน้ั ตอน 2 กดเครือ่ งมือปากกาท่ีมีเคร่ืองหมายบวก แลวจดุ เพิ่มเขาไปบนเสน path ระหวางจุดเดมิข้ันตอน 3 ใชลูกศรลากเพอ่ื ใหเกิดเสนโคง (สงั เกตวาจุดท่ีเพมิ่ ขนึ้ มาจะตา งจากจุดทีเ่ ราสรางไว)ขั้นตอน 4 กเ็ ทสีตามปกติ กรณที ่ตี อ งการเปลยี่ นจุดท่ีเปนสวนโคง ใหเปนจุดหักมมุ ตรง หรอื จดุ มุมเปนจดุ โคง

รายวชิ า เทคนคิ การสรางภาพเคล่อื นไหวคอมพวิ เตอร 25เลอื กเคร่ืองมือ convert point tool แลวกจ็ ้ิมตรงจุดทต่ี องการเปลี่ยนถา จ้ิมธรรมดา = จดุ หกั มมุ ตรง, ถา จ้มิ แลว ลาก = จุดเสนโคงไวใ ชแกไขหรอื เพ่มิ จดุ เวลาตองการใหเ สน ดสู มจรงิ ข้ึนครับ- ภาพตวั อยา งการลากเสน path เปน เสนโคง กับจุดหกั มมุ รวมกัน -ขอ แนะนําเพิ่มเติม : กอนการเทสี ใหเราเลือกเครื่องมือ brush หรือหัวแปรงกอ นทกุ ครั้งไมง น้ั ภาพจะไมเ รียบและการเลือกหัวแปรงแบบตางๆ จะทําใหเ กดิ effect ทแี่ ตกตา งกนั ดวย

รายวชิ า เทคนคิ การสรางภาพเคลอ่ื นไหวคอมพิวเตอร 26- ตวั อยา งการ stroke เสนดวยหัวแปรงแบบตางๆ เสน path สามารถปรบั ขนาดใหญเ ล็กไดเ หมอื น layer ปกติ(Edit > Transform > Scale ... ซง่ึ จะปรบั ใหใ หญเทา ไหรก็ไดแลวคอ ยเทสี ภาพก็จะคมชัดเสมอ) หลักการครา วๆก็ตามทีอ่ ธิบายไปตอไปกเ็ ปนการนําไปกระยกุ ตใช ถา ฝก จนชนิ กจ็ ะใชว าดภาพขึน้ มาใหม หรือใชตดัขอบภาพใหค มชดั มากขึน้ ก็ได- ลากเสน path แลว stroke แบบปกติ เราตอ งกําหนดหัวแปรงกอนใสเสน ถา จะถึกกวา นี้ก็สรางเสน ท่ีเปนรปู ปดแลว เทสีจะไดภาพทดี่ ูสมจริงมากข้ึน