เอกสารประกอบการเรียน หน่วยการเรียนรู้ที่ 8

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหสั 2204-2105 หน่วยการเรยี นรู้ที่ 8 การวาดภาพและรปู ทรง สาระสาคญั การสร้างภาพให้เหมาะสมสวยงาม โดยการใช้กลมุ่ เครอื่ งมือวาดรูปทรงสาเรจ็ รูปท่โี ปรแกรมกาหนดใหแ้ ล้วตอ้ งการให้รูปทรงต่าง ๆ มลี ักษณะที่แตกตา่ งไปจากการวาดรปู ทรงปกติ โดยการเลอื กรปู แบบการรวมหรอื การลดพ้ืนท่ีรูปทรงเพ่ือให้ไดร้ ปู ทรงใหม่ และการสร้างรปู ทรงจากการวาดเส้นแบบ Vector แลว้ ปรับแต่งเสน้ Path ให้มีความสวยงามเพ่ิมขึ้น การสรา้ งขอบเขตพืน้ ท่ีเพ่อื การระบายสีเฉพาะหรือการไลโ่ ทนสใี หม่ใหม้ สี วยงามเพ่ือใหไ้ ด้องคป์ ระกอบภาพใหม่แล้วนาภาพพมิ พอ์ อกทางเคร่ืองพมิ พ์ สาระการเรยี นรู้ 1. กลมุ่ เครอื่ งมอื รปู ทรงสาเร็จรูป 1.1 การใชเ้ ครื่องมือ Rectangle 1.2 การใชเ้ ครือ่ งมือ Rounded Rectangle 1.3 การใช้เคร่อื งมือ Ellipse 1.4 การใช้เครื่องมือ Polygon Tool 1.5 การใชเ้ ครื่องมือ Line Tool 1.6 การใช้เครื่องมือ Custom Shape 2. การวาดรูปทรงแบบรวม-ลดพน้ื ที่ 2.1 เลอื กใชเ้ ฉพาะส่วนของรูปทรง 2.2 การรวมรปู ทรงเข้าดว้ ยกัน 3. การใช้เครื่องมือวาดเสน้ Path 3.1 การสร้างเส้น Path 3.2 การเคลอื่ นย้ายเสน้ Path 3.3 สรา้ งข้อความบนเส้น Pathการวาดภาพและรปู ทรง หน้า 214

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-21054. แสดงตวั อยา่ งและการตงั้ ค่ากอ่ นพมิ พ์ 4.1 แสดงตัวอย่างก่อนพมิ พ์ 4.2 การตัง้ คา่ ก่อนพมิ พ์ 4.3 ขน้ั ตอนการพิมพ์จุดประสงค์การเรียนรู้เมื่อศึกษาและปฏิบัตติ ามเอกสารประกอบการเรยี น หนว่ ยการเรยี นรทู้ ี่ 8 แล้วนกั เรียนสามารถ1. สร้างรูปทรงสาเร็จรปู ได้ 1.1 ใช้เครื่องมือ Rectangle ได้ 1.2 ใชเ้ คร่ืองมือ Rounded Rectangle ได้ 1.3 ใช้เครื่องมือ Ellipse ได้ 1.4 ใช้เครอ่ื งมือ Polygon Tool ได้ 1.5 ใชเ้ ครอ่ื งมือ Line Tool ได้ 1.6 ใชเ้ ครอื่ งมือ Custom Shape ได้2. วาดรปู ทรงแบบรวม-ลดพ้ืนทไ่ี ด้ 2.1 เลือกใชเ้ ฉพาะส่วนของรูปทรงได้ 2.2 รวมรูปทรงเข้าดว้ ยกันได้3. สร้างเส้น Path รูปทรงต่าง ๆ ได้ 3.1 สรา้ งเส้น Path ได้ 3.2 เคลอื่ นย้ายเส้น Path ได้ 3.3 สร้างข้อความบนเส้น Path ได้4. แสดงตัวอยา่ งและการตงั้ ค่าก่อนพมิ พ์ได้ 4.1 แสดงตวั อย่างก่อนพิมพไ์ ด้ 4.2 ต้งั ค่าก่อนพิมพ์ได้ 4.3 อธิบายข้นั ตอนการพิมพไ์ ด้การวาดภาพและรปู ทรง หนา้ 215

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหัส 2204-2105 แผนภูมิเนอ้ื หา การวาดภาพและรปู ทรงกลุ่มเคร่ืองมือรปู ทรงสาเรจ็ รูป การใช้เครื่องมือวาดเส้น Path 1. การใชเ้ ครือ่ งมือ Rectangle 1. การสร้างเส้น Path 2. การใชเ้ ครอ่ื งมือ Rounded 2. การเคลื่อนย้ายเสน้ Path 3. สร้างข้อความบนเสน้ PathRectangle 3. การใชเ้ ครื่องมอื Ellipse แสดงตัวอย่างและการต้ังค่าก่อนพิมพ์ 4. การใช้เครื่องมือ Polygon Tool 1. แสดงตวั อยา่ งกอ่ นพิมพ์ 5. การใช้เครือ่ งมอื Line Tool 2. การตงั้ ค่ากอ่ นพิมพ์ 6. การใชเ้ ครอื่ งมือ Custom Shape 3. ขัน้ ตอนการพิมพ์ การวาดรูปทรงแบบรวม-ลดพ้ืนท่ี 1. เลือกใช้เฉพาะสว่ นของรปู ทรง 2. การรวมรปู ทรงเขา้ ด้วยกนัการวาดภาพและรปู ทรง หนา้ 216

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหัส 2204-2105 หนว่ ยการเรียนร้ทู ี่ 8 การวาดภาพและรปู ทรง กลุ่มเครื่องมือหนง่ึ ที่สนับสนนุ การทางานด้านการวาดภาพ คือ ปากกาสาหรับวาดภาพซึ่งสามารถสรา้ งรปู ทรงแบบ Vector การสร้างเส้น Path เพอื่ ออกแบบสร้างสรรค์งานกราฟิกทีส่ วยงามได้มากมายเพ่ือตัดต่อปรบั แต่งสีสนั ภาพใหส้ วยงามการวาดรูปทรงหรือภาพแบบลายเส้นที่มคี วามซบั ซอ้ นด้วยเครือ่ งมือในกล่มุ Shape Tool และเครือ่ งมือ Pen Tool เครอ่ื งมือเหลา่ นี้ครอบคลุมไปถงึ การสรา้ งขอบเขตพืน้ ที่ให้รูปทรงการสรา้ งเส้น Path เพือ่ ให้เกิดลวดลายจากเสน้กาหนดขอบเขตพื้นที่ในการลงสีเพอื่ การระบายสเี ส้น เส้นสามารถย่อ/ขยายและภาพไมส่ ูญเสยีความละเอยี ดคมชัด8.1 กลุ่มเครอ่ื งมอื สรา้ งรปู ทรงสาเร็จรปู เครอ่ื งมือวาดรูปทรงแบบ Vector แบบงา่ ย ๆ เช่น ส่เี หลยี่ ม ส่ีเหลีย่ มมมุ มน วงกลม หรือรปู ทรงแบบตา่ ง ๆ ท่โี ปรแกรมจัดไวใ้ ห้ ดังภาพ รปู ภาพ 8-1 เครือ่ งมอื วาดรปู ทรงแบบ Vector ทม่ี า : จากโปรแกรม Adobe Photoshop CS6Rectangle Tool สรา้ งรูปทรงแบบสีเ่ หล่ียมRounded Rectangle Tool สร้างรปู ทรงสเี่ หลยี่ มมมุ มนEllipse Tool สรา้ งรูปทรงกลมหรอื ทรงรีPolygon Tool วาดรปู ทรงหลายเหลี่ยม และดัดแปลงให้สามารถวาดรปู ทรงแบบอนื่ ได้Line Tool สรา้ งเสน้ ตรง โดยกาหนดความหนาและสรา้ งหวั ลกู ศรการวาดภาพและรปู ทรง หนา้ 217

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟิก รหสั 2204-2105 Custom Shape Tool สรา้ งรปู ทรงสาเรจ็ รปู เครื่องมือแต่ละตัวมี Option Bar สาหรบั กาหนดคุณสมบัติพิเศษต่าง ๆ เฉพาะเพื่อความสะดวกเชน่ Option Bar เคร่ืองมือ Rectangle Tool ดงั รูปภาพ 8-2รปู ทรงมีพนื้ หลัง ขนาดเสน้ รปู แบบเส้น รูปแบบการจดั วาง รปู แบบการวาด เลอื กสี กาหนดขนาด รปู ภาพ 8-2 Option Bar เคร่อื งมอื Rectangle Tool ท่ีมา : จากโปรแกรม Adobe Photoshop CS6 8.1.1 การใช้เคร่ืองมือ Rectangle การวาดรูปทรงส่ีเหลี่ยมแบบอิสระ หรือการกาหนดรปู แบบในการวาดรปู ทรงใน Option Bar เครอ่ื งมือแต่ละตัว ดังนี้ 1. คลิกที่เคร่ืองมือ 2. กาหนดลกั ษณะการทางานของเคร่อื งมอื และเลอื กรปู แบบสี ดงั รปู ภาพ 8-3 รปู ภาพ 8-3 คณุ ลกั ษณะการทางานเครือ่ งมอื Rectangle ที่มา : อรทัย เลิศขนุ ทด (2559) 8.1.2 การใช้เครอื่ งมือ Rounded Rectangle คอื เครอื่ งมอื วาดรูปทรงสี่เหลย่ี มมุมมนกาหนดมมุ ไดจ้ ากคาสง่ั Radius ข้นั ตอนดังน้ี 1. คลกิ เครอ่ื งมือ 2. กาหนดลกั ษณะการทางานเครือ่ งมือ ซ่ึงมีรายละเอียดเหมือนกับเคร่อื งมือRectangle แต่เพ่ิมช่องของ Radius บน Option Bar กาหนดความโค้งมนของมมุ ภาพการวาดภาพและรูปทรง หนา้ 218

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105 3. คลกิ เมาสซ์ ้ายคา้ งไวแ้ ลว้ ลากเพือ่ วาดภาพ ดังรูปภาพ 8-4 รูปภาพ 8-4 เครื่องมอื Rounded Rectangle ทมี่ า : อรทัย เลศิ ขนุ ทด (2559)8.1.3 การใช้เคร่อื งมือ Ellipse คือ เคร่ืองมือวาดรูปทรงวงกลมหรือทรงรี มขี ั้นตอนดังน้ี 1. คลิกเครอ่ื งมือ 2. กาหนดคณุ ลกั ษณะเหมอื นกับเครือ่ งมือ Rectangle 3. คลิกเมาสซ์ ้ายค้างไวแ้ ลว้ ลากเพอื่ วาด ดงั รปู ภาพ 8-5 รูปภาพ 8-5 เครือ่ งมือ Ellipse Options ทม่ี า : อรทยั เลิศขนุ ทด (2559) 8.1.4 การใช้เครื่องมือ Polygon Tool คือ เครอ่ื งมือวาดรูปทรงเหลย่ี มและสามารถกาหนดจานวนเหลย่ี มของภาพได้ ดังนี้1. คลิกท่ีเครอ่ื งมือ กาหนดลักษณะการทางานของเครือ่ งมอื รายละเอยี ด ดงั นี้Sides กาหนดจานวนมุมให้กบั รูปทรงRadius กาหนดรปู ทรงให้มีขนาดแน่นอนโดยกาหนดเสน้ รัศมีSmooth Corners กาหนดใหม้ มุ มคี วามโคง้ มนStar สร้างรปู ดาวIndent Sides By กาหนดระยะการเว้าโค้งมนSmooth Indents กาหนดให้มุมที่เวา้ มีความโคง้ มนการวาดภาพและรปู ทรง หน้า 219

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหสั 2204-21052. คลกิ เมาสซ์ า้ ยค้างไว้แล้วลากบนพื้นท่กี ารทางานเพื่อวาดรปู ทรง ดงั รูปภาพ 8-6 Smooth Corners Star ภาพที่ 8.6 เครื่องมือ Polygon Options ที่มา : อรทัย เลศิ ขนุ ทด (2559) 8.1.5 การใช้เครือ่ งมือ Line Tool คอื เครื่องมือวาดเส้นตรงและสามารถกาหนดเป็นลูกศรทศิ ทางต่าง ๆ ขน้ั ตอนดังน้ี1. คลกิ ท่เี คร่ืองมอื2. กาหนดคุณลกั ษณะการทางานของเครื่องมอื รายละเอยี ด ดงั นี้Weight กาหนดขนาดเส้นArrowheads กาหนดหัวลูกศรStart สร้างหัวลกู ศรทส่ี ่วนหวั เสน้End สร้างหวั ลูกศรสว่ นปลายเส้นWidth กาหนดความกว้างหัวลกู ศรLength กาหนดความยาวหัวลูกศรConcavity กาหนดความเว้าของฐานลูกศร3. คลกิ เมาส์ซา้ ยค้างไว้แล้วลากบนพน้ื ทก่ี ารทางานเพ่ือวาดรูปทรง ดงั ภาพกาหนดคณุ ลักษณะการทางาน คลิกปมุ่ Start คลิกปุม่ Endของเครื่องมือ รูปภาพ 8-7 เคร่อื งมือ Line Tool คลกิ ปุ่ม Start และ ป่มุ End ท่ีมา : จากโปรแกรม Adobe Photoshop CS6การวาดภาพและรูปทรง หน้า 220

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหัส 2204-2105 8.1.6 การใช้เครอ่ื งมือ Custom Shape คอื เครื่องมือสรา้ งรูปทรงสาเรจ็ รปูท่ีโปรแกรมกาหนด ขนั้ ตอนดังนี้1. คลกิ เคร่อื งมอื2. กาหนดลักษณะของเคร่อื งมอื รายละเอยี ด ดงั รูป รปู ภาพ 8-8 เครือ่ งมอื Custom Shape Options ที่มา : จากโปรแกรม Adobe Photoshop CS6Custom Shape Options การวาดรปู ทรงสาเรจ็ รูป รายละเอยี ดดังนี้Unconstrained วาดรูปทรงอยา่ งอิสระโดยไม่กาหนดสดั สว่ นDefined Proportional วาดรูปทรงแบบกาหนดสดั ส่วนDefined Size วาดรูปทรงแบบกาหนดสดั สว่ นตายตวั มีขนาดเท่ากนัFixed Size กาหนดขนาดรปู ทรงโดยระบุค่าดว้ ยตนเองFrom Center เลอื ก Option การวาดรูปทรง โดยให้ขยายขนาดจากจุดท่ี แดรกเมาส์3. คลกิ เลอื กชดุ รูปทรงสาเร็จรปู แลว้ คลกิ ลากเมาส์เพอื่ วาดรูปทรง รปู ทรงสาเร็จรปู รปู ภาพ 8-9 ชุดรปู ทรงสาเรจ็ รปู ทม่ี า : จากโปรแกรม Adobe Photoshop CS6การวาดภาพและรูปทรง หนา้ 221

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105 การเพ่ิมชุดรปู ทรง คือ ชุดรูปทรงสาเร็จรปู ท่โี ปรแกรมเตรียมไวใ้ หเ้ ลอื กหลายชุด ซง่ึ หากต้องการเพิ่มชุดรปู ทรงเข้ามาใหม่ โดยคลกิ แล้วคลิกเลือกชื่อชุดรปู ทรงทต่ี ้องการใชง้ าน เลือกลกั ษณะของภาพตัวอยา่ ง คลกิ Reset Shapes เมื่อต้องการกลับไปใชช้ ดุ เริม่ ตน้ ชดุ รปู ทรงสาเร็จรูปอ่นื ๆ ทส่ี ามารถเรียกใช้ได้ แทนท่ชี ุดเดมิ ต่อทา้ ยชดุ เดมิ รปู ภาพ 8-10 การเพ่ิมชดุ รปู ทรงสาเรจ็ รูป ทมี่ า : จากโปรแกรม Adobe Photoshop CS6 ตวั อยา่ ง Custom Shape ToolAnimals Arrows Artistic Textures Banners and Awards Film Framesการวาดภาพและรปู ทรง หนา้ 222

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหัส 2204-2105Grime Vector Pack LightBulb MusicNature Objects OmamentsShapes Symbols Talk BubblesTiles Web รูปภาพ 8-11 ตัวอย่าง Custom Shape Tool ทีม่ า : จากโปรแกรม Adobe Photoshop CS6การวาดภาพและรปู ทรง หน้า 223

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหัส 2204-21058.2 การวาดรูปทรงแบบรวม-ลดพน้ื ที่ การวาดรูปทรงในรปู แบบต่าง ๆ ข้นึ มาใหม่ โดยการกาหนดคา่ บน Option Bar สาหรับการสรา้ งรูปทรงหลาย ๆ ภาพใหม้ ีลักษณะทโ่ี ดดเดน่ โดยวธิ ีการซ้อนทับของเส้น Path ไดร้ ปู ทรงแบบใหมก่ ารกาหนดค่า Option Bar ดงั นี้ รปู ภาพ 8-12 การวาดรปู ทรงแบบรวม-ลดพน้ื ที่ ที่มา : จากโปรแกรม Adobe Photoshop CS6 New layer การเลอื กขอบเขตพน้ื ที่ใหม่ Combine Shapes ขอบเขตพ้ืนท่กี ารรวมพ้ืนที่ซอ้ นกันหลายชิน้ ใหเ้ ปน็ ชน้ิ เดยี วกนั Subtract Front Shape ขอบเขตพืน้ ท่ีตัดรูปทรง เก็บเฉพาะสว่ นทีไ่ ม่ซ้อนทับกันไว้ Intersect Shape Areas ขอบเขตพ้ืนทต่ี ัดส่วนที่ซ้อนทบั กนั ออก Exclude Overlapping Shapes ขอบเขตพ้นื ที่ตัดรปู ทรง เก็บเฉพาะสว่ นท่ีซอ้ นทับกันไว้ 8.2.1 เลอื กใชเ้ ฉพาะส่วนของรปู ทรง คอื การสรา้ งรปู ทรงด้วยเครื่องมือในกลุ่ม Shape Toolมีหลักการทางาน ขน้ั ตอนดงั น้ี 1. คลกิ เลือกเครอ่ื งมือ แล้วเลอื กวาดรปู ทรงแบบมีพืน้ หลงั และเลือกภาพทต่ี อ้ งการวาดรูปทรง กาหนดรูปแบบเปน็ Shape 2. วาดรูปทรงแลว้ คลกิ เลอื ก Option Bar กาหนดแบบ Exclude OverlappingShapes เลอื กรูปทรงแบบวงกลม แลว้ วาดรปู ทรงใหม่ทบั รปู ทรงเดิม ดงั รปู ภาพ 8-13การวาดภาพและรูปทรง หน้า 224

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหสั 2204-2105 รูปภาพ 8-13 เลอื กใชเ้ ฉพาะส่วนของรปู ทรง ท่ีมา : อรทัย เลศิ ขุนทด (2559) 8.2.2 การรวมรูปทรงเข้าดว้ ยกัน คอื การวาดรูปทรงหลาย ๆ สว่ นให้เป็นรปู ทรงเดยี วกนัขั้นตอนดงั น้ี 1. เลอื กการวาดรปู ทรงแบบมีพืน้ หลงั 2. เลือกรปู ทรงแล้วเลือกสี 3. คลิกเลือกแลว้ วาดรปู ทรงแรก และวาดภาพต่อไปตามจานวนทเ่ี หมาะสม(ก) วาดรปู ทรงแรก (ข) วาดรปู ทรงเพมิ่ (ค) นาภาพตกแตง่ เพิ่มเติม รปู ภาพ 8-14 การรวมรปู ทรงเข้าดว้ ยกัน ท่ีมา : อรทยั เลศิ ขนุ ทด (2559)8.3 การใช้เครื่องมือวาดเส้น Path เครอ่ื งมอื สรา้ งเสน้ Path หรือรปู ทรงต่าง ๆ ซึ่งส่วนประกอบของเสน้ มจี ุดแองเคอร์(จดุ ย่อยที่อยู่ตามแนวเส้น) คือ กลมุ่ เคร่ืองมือ Pen Tool สามารถสรา้ งเสน้ Path ดงั รปู ภาพ 8-15 รปู ภาพ 8-15 เครื่องมอื ท่ีใช้สรา้ งเส้น Path หน้า 225 ทีม่ า : จากโปรแกรม Adobe Photoshop CS6การวาดภาพและรูปทรง

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟิก รหสั 2204-2105Pen Tool สรา้ งเส้น Path โดยการคลิกวางจุดแองเคอร์ Freeform Pen Tool สร้างเสน้ Path แบบลากอสิ ระAdd Anchor Point Tool เพม่ิ จดุ แองเคอร์Delete Anchor Point Tool ลดจุดแองเคอร์Convert Point Tool แปลงรปู แบบของเส้นและมุมลักษณะของเส้น Path สามารถแบ่งออกเป็น 2 แบบ คือ1. แบบ Shape Layer คือ การวาดเสน้ Path แบบ Layer ภาพโดยการเลือกสขี องรูปทรงเส้น Path นไี้ ด้2. แบบ Paths คือ การวาดเสน้ Path อย่างเดียว ทป่ี ระกอบด้วยจดุ และเสน้ โค้ง โดยยังไม่มีการกาหนดสีเส้นหรือสพี ื้น และเส้น Path จะไมป่ รากฏในภาพผลลพั ธ์ทน่ี าไปใช้งานแตส่ ามารถเตมิ สพี ้นื หรือสีเส้นในภายหลงั ได้ 8.3.1 การสร้างเสน้ Path คอื การวาดรูปทรงด้วยการคลิกเมาสว์ าดรปู ทรงตามจนิ ตนาการของผ้วู าด ซงึ่ สามารถวาดไดห้ ลายวธิ ี และแกไ้ ขรูปทรงในภายหลังได้ ดังน้ี1. การสร้างเส้น Path ด้วยเคร่อื งมือ Pen Tool คือ เคร่อื งมือสร้างเส้น Pathรูปทรงตา่ ง ๆ แบบอสิ ระ ขน้ั ตอนดังนี้(1) คลิกเคร่ืองมือ(2) คลิกเมาส์ซา้ ยในตาแหนง่ ท่ตี อ้ งการสรา้ งเป็นเส้น Path หรอื รปู ทรงทีต่ ้องการจดุ ที่คลกิ เมาส์จะปรากฏจดุ ส่ีเหลย่ี มเลก็ ๆ ณ บริเวณดงั กล่าว เรยี กวา่ จุดแองเคอร์ ดงั รูปภาพ 8-16 เส้น Path จดุ แองเคอร์ รปู ภาพ 8-16 เครื่องมือ Pen Tool ทมี่ า : อรทยั เลิศขุนทด (2559)การวาดภาพและรูปทรง หน้า 226

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหัส 2204-2105 2. การสร้างเส้น Path ดว้ ยเคร่อื งมือ Freeform Pen Tool คอื การวาดเสน้Path แบบครา่ ว ๆ ก่อน ขน้ั ตอนดังน้ี (1) คลกิ เคร่อื งมอื (2) คลิกเมาส์ซ้ายค้างไว้แล้วลากไปในตาแหนง่ ทีต่ ้องการสร้างเปน็ เสน้ Path แลว้ปลอ่ ยเมาสเ์ ม่ือไดร้ ูปทรงที่ต้องการ ดงั รูปภาพ 8-17 รปู ภาพ 8-17 เครอ่ื งมอื Freeform Pen Tool ทมี่ า : อรทัย เลศิ ขุนทด (2559) 3. การเพ่มิ จดุ แองเคอร์ดว้ ยเคร่ืองมือ Add Anchor Point Tool คอืเครอ่ื งมอื เพิ่มจุดแองเคอร์และแกไ้ ขจุดดังกล่าว ขนั้ ตอนดงั นี้ (1) คลิกทเ่ี ครอื่ งมอื (2) คลกิ เมาส์ซ้ายในตาแหนง่ ทตี่ อ้ งการเพ่ิมจุดแองเคอร์แลว้ คลิกเมาส์ซา้ ยคา้ งไว้ณ ตาแหน่งจดุ แองเคอร์แลว้ ดัดเส้นในตาแหน่งทีต่ ้องการเมื่อได้ความโคง้ ท่ีต้องการแลว้ ปล่อยเมาส์เพ่อื เปน็ การหยุดการดัดเสน้ ใหม่ ดงั รูปภาพ 8-18 ผลลัพธ์ คลิกเมาส์เพือ่ บดิ รูปทรงรปู ภาพ 8-18 การเพม่ิ จดุ แองเคอรด์ ้วยเคร่อื งมอื Add Anchor Point Tool ทมี่ า : อรทยั เลศิ ขุนทด (2559)การวาดภาพและรูปทรง หน้า 227

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟิก รหัส 2204-2105 4. การลบจดุ แองเคอรด์ ว้ ยเครื่องมือ Delete Anchor Point Tool คอืเครอ่ื งมือลบจุดแองเคอร์ออกเพื่อแก้ไขภาพ ดงั รูปภาพ 8-19 ผลลพั ธ์ รูปภาพ 8-19 การลบจดุ แองเคอร์ด้วยเครอื่ งมอื Delete Anchor Point Tool ทมี่ า : อรทัย เลิศขนุ ทด (2559) 5. การแปลงรูปแบบของเสน้ และมมุ ดว้ ยเคร่ืองมือ Convert Point toolข้นั ตอนดงั น้ี (1) คลกิ ท่เี คร่ืองมือ (2) คลกิ เมาส์ซ้ายในตาแหนง่ ท่ตี อ้ งการแปลงเสน้ รูปแบบใหม่ ดงั รูปภาพ 8-20 ผลลัพธ์ รูปภาพ 8-20 การแปลงรูปแบบของเสน้ และมุมด้วยเครือ่ งมอื Convert Point tool ที่มา : อรทยั เลิศขนุ ทด (2559) 8.3.2 การเคล่ือนยา้ ยเสน้ Path การวาดรูปทรงเส้น Path น้ันเม่ือรปู ทรงท่ีได้ยังไมเ่ หมาะสม และต้องการแกไ้ ขทิศทางหรือตาแหน่งต่าง ๆ ในรูปทรง ซึ่งสามารถแก้ไขได้ด้วยเครื่องมือ Direct Select Tool คือ เคร่ืองมือสาหรบั แก้ไขเสน้ Path ดังนี้ รูปภาพ 8-21 การเคล่ือนย้ายเสน้ Path หนา้ 228 ที่มา : จากโปรแกรม Adobe Photoshop CS6การวาดภาพและรูปทรง

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 1. การเคลื่อนย้ายเสน้ Path ดว้ ยเครือ่ งมือ Path Selection Tool คอืการเคลือ่ นย้ายเส้น Path ท้งั หมดไปยังตาแหนง่ ต่าง ๆ คลิกทีเ่ คร่ืองมือ คลกิ เมาส์ท่ีภาพแล้วสามารถเคลื่อนย้ายภาพไดท้ งั้ หมด ดงั รปู ภาพ 8-22 คลกิ ภาพ ณ ตาแหน่งใด ๆ เพอ่ื เคล่อื นย้ายภาพ รปู ภาพ 8-22 การเคล่ือนย้ายเส้น Path ด้วยเครือ่ งมือ Path Selection Tool ทีม่ า : อรทัย เลิศขุนทด (2559) 2. การเคล่ือนยา้ ยเสน้ Path ดว้ ยเครือ่ งมือ Direct selection Tool คือการเคลอ่ื นย้ายเสน้ Path เฉพาะจุดแองเคอร์ทค่ี ลิกเมาส์ คลิกที่เคร่ืองมอื ณ จดุ แองเคอร์คา้ งไว้แลว้ ลากไปในตาแหน่งที่ต้องการ ดงั รูปภาพ 8-23 คลิกภาพ ณ ตาแหน่งใด ๆ เพ่ือเคลอ่ื นย้ายภาพ รปู ภาพ 8-23 การเคลื่อนย้ายเส้น Path ดว้ ยเครอ่ื งมอื Direct selection Tool ท่ีมา : อรทยั เลศิ ขุนทด (2559)การวาดภาพและรปู ทรง หน้า 229

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 การปรบั แต่งรปู ทรง คลิกเลือกเคร่อื งมือ แลว้ คลิกจุดแองเคอรท์ ี่ต้องการปรบั หรอืเคล่ือนยา้ ยจะปรากฏแขนของจดุ ขึ้นมาเพือ่ ปรับระยะและกาหนดทิศทางของแขนแต่ละขา้ งของภาพดงั รูปภาพ 8-24 รูปภาพ 8-24 การปรบั แต่งรปู ทรง ที่มา : อรทยั เลิศขุนทด (2559) 8.3.3 สร้างขอ้ ความบนเสน้ Path คือ การสรา้ งข้อความทอดโคง้ ไปตามแนวเส้น Path ใด ๆโดยการวาดเสน้ Path ดว้ ยเคร่ืองมือ Pen Tool เพื่อให้ได้ลักษณะเสน้ ท่ตี ้องการแล้วจงึ พมิ พข์ ้อความลงไปในเสน้ Path นัน้ ขอ้ ความเหล่านี้สามารถกาหนดทิศทางตามเส้น Path ตา่ ง ๆ ดงั น้ี 1. การพมิ พ์ขอ้ ความ คอื ขน้ั ตอนการพิมพข์ ้อความตามแนวเส้น Path ขัน้ ตอนดงั นี้ (1) คลิกเคร่อื งมือ เลือกรูปแบบไม่มสี พี ้นื หลงั (2) วาดเส้น Path เปน็ ตามแนวภาพ (3) คลกิ เครอื่ งมือ นาเมาส์วางจะปรากฏสัญลกั ษณ์ คลิกเมาส์บนเส้น Path (4) พมิ พ์ขอ้ ความ โดยข้อความจะไลไ่ ปตามแนวเสน้ Path ทส่ี รา้ งไว้การวาดภาพและรปู ทรง หน้า 230

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหสั 2204-2105 สรา้ งแนวเสน้ Pathคลิกจุดเริม่ ต้นคลกิ เมาส์แล้วพมิ พ์ข้อความทต่ี อ้ งการ รปู ภาพ 8-25 สร้างข้อความบนเส้น Path ท่มี า : อรทยั เลศิ ขนุ ทด (2559)2. แก้ไขข้อความบนเสน้ Path คอื การแกไ้ ขข้อความท่ีอยู่บนแนวเส้น Path ทาเหมอื นกบั การแกไ้ ขข้อความปกติ โดยคลกิ เลอื กเครื่องมือ เพอื่ แก้ไขข้อความนนั้ หรือปรบั เปลี่ยนตวั เลือกOption Bar เช่น การเปลีย่ น Font เปล่ยี นสี หรือขนาดข้อความใหม่ ข้ันตอนดงั นี้(1) ดับเบลิ คลิก Layer ข้อความ(2) เลือก Option ข้อความทตี่ ้องการปรบั แตง่ เลอื กข้อความท้งั หมด ผลลัพธ์การเปลี่ยนสขี อ้ ความ รูปภาพ 8-26 การแก้ไขข้อความบนเสน้ Path หน้า 231 ที่มา : อรทัย เลศิ ขนุ ทด (2559)การวาดภาพและรูปทรง

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหสั 2204-2105 3. การปรบั ตาแหน่งข้อความบน Path คือ การเลื่อนตาแหนง่ ขอ้ ความท่ีพิมพ์โดยการกาหนดจุดเร่ิมต้นและจุดสิ้นสุดขอ้ ความแล้วใชเ้ ครอื่ งมอื Path Selection Tool หรือDirect Selection Tool ปรับแต่งตาแหน่งขอ้ ความ ดงั รปู ภาพ 8-27เลอ่ื นขอ้ ความ เลื่อนข้อความ เม่อื เล่ือนเมาส์จากต้นข้อความ สังเกตเมาสจ์ ะเป็นรูป เม่อื เล่ือนเมาส์จากทา้ ยขอ้ ความ สังเกตเมาส์จะเปน็ รปูลากเมาสพ์ ลกิ กลบั ขอ้ ความ รปู ภาพ 8-27 การปรบั ตาแหน่งขอ้ ความบน Path ท่มี า : อรทัย เลศิ ขุนทด (2559)การวาดภาพและรูปทรง หน้า 232

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหัส 2204-21058.4 แสดงตัวอยา่ งและการตั้งค่าก่อนพมิ พ์ 8.4.1 แสดงตวั อย่างก่อนพมิ พ์ กอ่ นพมิ พ์ภาพจริงนั้นต้องมีการดตู วั อยา่ งภาพก่อนพมิ พ์ก่อน เพือ่ ให้ไดภ้ าพตรงความตอ้ งการหรือกาหนดขนาดของภาพใหม่ เช่น เปลย่ี นแนวการพมิ พ์ หรือเลอื ก Option การพิมพ์อนื่ ๆเพิ่มเติมได้ โดยการเลือกคาส่งั File > Print เพื่อเข้าสู่ Dialog Box การพิมพ์ 8.4.2 การต้งั คา่ ก่อนพิมพ์ รายละเอียดใน Dialog Box การพมิ พ์ ดังน้ี 1. Printer เลอื กชอ่ื เคร่ืองพิมพท์ ่ีใช้งาน 2. Copies จานวนชุดที่พิมพ์ 3. Print Settings ตงั้ คา่ เกยี่ วกับเครื่องพิมพ์ หนา้ กระดาษ และการใส่กระดาษ 4. เลือกแนวการพมิ พ์ แนวตงั้ หรอื แนวนอน 5. กลมุ่ Position จดั แนวของภาพ โดย (1) Center Image คลิก ถา้ ตอ้ งการจัดภาพอยูก่ งึ่ กลางหน้ากระดาษ (2) Top, Left คือ ระบตุ าแหนง่ ขอบบนและขอบซ้าย 6. กลุ่ม Scaled Print Size กาหนดขนาดภาพ (1) Scale to Fit Media ตอ้ งการให้ปรับขนาดพอดกี บั กระดาษ (2) Scale ขนาดของภาพเป็นเปอรเ์ ซ็นต์ (ต้องยกเลิก Scaled Tool Print ก่อน) (3) Height ความสูงของภาพ (ตามหนว่ ยวดั ของ Unit) (4) Width ความกวา้ งของภาพ (ตามหนว่ ยวัดของ Unit) (5) Print Resolution แสดงคา่ ความละเอียดจริงภาพจากการพิมพ์ 7. Bounding Box คลกิ เลือก แสดงกรอบปรับขนาดและเลื่อนตาแหน่งภาพบนหน้ากระดาษ 8. Unit เลอื กหน่วยวดั 8.4.3 ขั้นตอนการพมิ พ์ คือ เมอื่ เข้าใจหลกั การการกาหนดค่าต่าง ๆ สาหรบั การพิมพแ์ ล้วตอ้ งการพิมพภ์ าพออกทางเคร่อื งพิมพ์ สามารถปฏิบัตไิ ด้ ขั้นตอนดงั น้ี 1. เปดิ ไฟลภ์ าพท่ีตอ้ งการพิมพ์ เลอื กเมนู File > Print 2. ต้ังคา่ การพิมพ์ 3. ส่งั พิมพ์คลิกการวาดภาพและรปู ทรง หน้า 233

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหัส 2204-2105สรปุ สาระสาคญั กลุ่มเครื่องมือวาดรูปทรง และการสรา้ งเส้นแบบ Vector เป็นการสรา้ งเส้นหรอื สรา้ งลายเสน้ตามรปู แบบทโี่ ปรแกรมกาหนด คือ เครื่องมือ Rectangle Tool ใช้สาหรับสร้างรปู ทรงแบบสเี่ หล่ยี มเคร่ืองมอื Rounded Rectangle Tool ใชส้ าหรับสรา้ งรูปทรงแบบสเ่ี หลี่ยมมุมมน เคร่ืองมอื EllipseTool ใช้สาหรบั วาดรูปทรงกลมหรอื เคร่ืองมือ Polygon Tool สาหรับการวาดรูปทรงหลายเหลี่ยมโดยดัดแปลงเครอ่ื งมือให้สามารถวาดรูปทรงแบบอืน่ ไดด้ ว้ ย เครื่องมือ Line Tool สาหรับสร้างเส้นตรงโดยกาหนดความหนา และสรา้ งหวั ลกู ศร เคร่ืองมือ Custom Shape Tool สาหรับสรา้ งรูปทรงสาเรจ็ รูปทโ่ี ปรแกรมจัดไว้ให้ หรอื สร้างข้นึ เองจากการวาดรูปดว้ ยเครอ่ื งมือ Pen Toolการสรา้ งเส้น Path ต่าง ๆ ให้เปน็ ขอบเขตพ้นื ท่ีสร้างเส้น Path แล้วสามารถพิมพ์ขอ้ ความตามเส้นPath ท่สี ร้างข้ึน ก่อนพมิ พ์ภาพตอ้ งมกี ารดูแลตวั อยา่ งภาพกอ่ นพมิ พ์ เพ่ือใหไ้ ด้ภาพตรงความต้องการหรอื กาหนดขนาดของภาพใหม่ เช่น การเปล่ียนแนวการพิมพ์ เลอื กกาหนดค่า Option การพิมพ์เพม่ิ เติมได้ โดยการเลือกคาส่งั เมนู File > Print เพื่อเขา้ สู่ Dialog Box การพิมพ์การวาดภาพและรูปทรง หนา้ 234

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 แบบฝึกหัดท้ายหนว่ ยการเรยี นรู้ท่ี 8 เรอ่ื ง การวาดภาพและรูปทรงคาส่งั จงตอบคาถามตอ่ ไปนีใ้ หส้ มบรู ณท์ ่สี ุด 1. กลุ่มเคร่ืองมือสรา้ งรูปทรงสาเรจ็ รปู มอี ะไรบา้ ง อธบิ าย................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................ 2. เครือ่ งมือการวาดรูปทรงแบบรวม-ลดพนื้ ที่ มคี วามหมายว่าอยา่ งไร อธบิ าย 2.1 New layer …………………………………………………………………………………………. 2.2 Combine Shapes ………………………………………………………………………………. 2.3 Subtract Front Shape ………………………………………………………………………. 2.4 Intersect Shape Areas ………………………………………………………………………. 2.5 Exclude Overlapping Shapes ………………………………………………………….. 3. เครือ่ งมอื ในการวาดเสน้ Path มีความหมายวา่ อยา่ งไร อธิบาย 3.1 Pen Tool สรา้ งเส้น Path …………………………………………………………………… 3.2 Freeform Pen Tool ……………………………………………………………….………… 3.3 Add Anchor Point Tool ……………………………………………………………………. 3.4 Delete Anchor Point Tool ……………………………………………………………….. 3.5 Convert Point Tool ……………………………………………………………………………. 4. จงบอกประโยชน์ของการแสดงตัวอย่างและการต้งั ค่าก่อนพิมพ์................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................การวาดภาพและรูปทรง หนา้ 235

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหสั 2204-2105 ใบงานท้ายหนว่ ยการเรยี นรูท้ ่ี 8 เรอ่ื ง การวาดภาพและรปู ทรงจุดประสงค์ 1. สรา้ งรูปทรงสาเร็จรปู ได้ 2. วาดรูปทรงแบบรวม-ลดพนื้ ทีไ่ ด้ 3. สร้างเส้น Path รปู ทรงตา่ ง ๆ ได้ 4. แสดงตัวอย่างและการต้ังค่าก่อนพมิ พ์ได้ขน้ั ตอนการปฏิบตั งิ าน 1. แบง่ นกั เรียนออกเป็นกล่มุ กลุม่ ละ 2 คน ศึกษาเอกสารประกอบการเรียน 2. ชมการสาธิตแนะนาการใชโ้ ปรแกรม Adobe Photoshop โดยครผู สู้ อน 3. นกั เรียนฝกึ ปฏบิ ตั ิตามหัวขอ้ ทีม่ อบหมายคาชีแ้ จง จงปฏิบตั ิตามคาสง่ั ต่อไปน้ีใหส้ มบูรณ์ขอ้ กาหนดในการสร้างไฟลภ์ าพมีดังต่อไปนี้ขนาดพ้นื ทีใ่ นการทางานไฟล์ภาพ กวา้ ง 90 cm สงู 120 cmความละเอียดของภาพ (Resolution) 150 Pixelsโหมดสขี องภาพ CMYKพนื้ หลัง White1. จงสร้างโปสเตอร์ขา่ วประชาสมั พันธ์ของวิทยาลยั การอาชีพขอนแก่น ทน่ี ักเรียนมีความสนใจบันทึกไฟล์ช่ือ “ใบงานหน่วยท่ี8.PSD” และ “ใบงานหน่วยที่8.jpg” สามารถค้นหาภาพได้จากwww.kknic.ac.th2. พมิ พไ์ ฟลภ์ าพ “ใบงานหนว่ ยที่8.jpg” ขนาดกระดาษ A4 ออกทางเคร่อื งพมิ พ์การวาดภาพและรูปทรง หน้า 236

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-2105ตวั อย่างภาพขา่ วประชาสัมพนั ธ์ของวิทยาลยั การอาชีพขอนแก่นการวาดภาพและรูปทรง หนา้ 237