หน่วยการเรียนรู้ที่ 5

องคป์ ระกอบศลิ ปส์ ำหรบั งานคอมพิวเตอร์

การวาดภาพคอื ความสามารถหนง่ึ ทม่ี ีในโปรแกรม Illustrator ทน่ี ยิ มกันอย่างแพร่หลาย ซ่งึ เราจะมาศกึ ษาหลกั การและวธิ ี ทาในหนว่ ยการเรยี นน้ี 1. อธิบายการวาดภาพใหก้ ับชิ้นงาน 2. อธบิ ายเก่ียวกับลกั ษณะของภาพเวกเตอร์ 3. อธบิ ายการเรียกใช้เครอื่ งมอื วาดรปู ทรงสาเรจ็ รปู 4. อธบิ ายการวาดภาพตามตอ้ งการด้วยรูปทรงเรขาคณติ และรูปทรงสาเรจ็ รปู 5. อธิบายการวาดรปู อิสระด้วยเครือ่ งมอื ปากกา 6. อธิบายการใชค้ าสัง่ จดั การกับส่วนประกอบพาธ หนว่ ยการเรียนรทู้ ี่ 5 การวาดภาพด้วยเคร่อื งมอื ตา่ ง ๆ ใน Illustrator

5.1 การวาดภาพใหก้ บั ช้ินงาน 5.2 ลกั ษณะของภาพเวกเตอร์ 5.3 สว่ นประกอบของออบเจ็ค 5.4 เสน้ พาธ 5.5 การวาดรปู ทรงเรขาคณิตและรปู ทรงสำเรจ็ รูป 5.6 การวาดรปู ทรงอสิ ระดว้ ยเครือ่ งมือตา่ ง ๆ 5.7 การกำหนดลกั ษณะเส้น 5.8 การลบภาพด้วย Eraser Tool

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

การวาดภาพในโปรแกรม Illustrator มีลักษณะของพาธ (Path) หรือเส้น โครงร่าง ซึ่งเส้นพาธเหล่านี้สามารถดึงให้ตรง หรือดัดให้โค้งเกิดเป็นรูปร่างต่าง ๆ ได้ตามที่เราต้องการ โดยลักษณะของเส้นพาธจะถกู แบง่ ให้เป็น 2 ประเภท 5.2.1 เส้นพาธท่ีมรี ูปทรงตายตวั เส้นพาธที่มีรูปทรงตายตัว จะแบ่งเป็น 2 ลักษณะ คือ กลุ่มท่ีใช้วาดเส้น ได้แก่ เส้นตรง เส้นโค้ง เส้นก้นหอย เส้นตารางส่ีเหลี่ยม และเส้นตารางวงกลม และกลุ่มที่ใชว้ าดรูปทรง ได้แก่ รูปส่ีเหลี่ยม รูปวงรี รูปวงกลม รูปหลายเหลี่ยม รปู ดาว และรปู รัศมี 5.2.2 เสน้ พาธทมี่ ีรูปทรงอิสระ เสน้ พาธท่มี ีรปู ทรงอิสระเกิดจากการลากเส้นพาธและดัดเส้นให้เกิด ความโค้งโดยใช้เคร่ืองมือวาดท่ีเรียกว่า Pen Tool (ปากกา) เพ่ือให้ได้ ภาพที่เป็นรูปทรงตามที่เราต้องการ คล้าย ๆ กับการใช้ตะปูยึดสายไฟ ตามสว่ นตา่ ง ๆ ของผนังบ้านได้ หน่วยการเรยี นรูท้ ่ี 5 การวาดภาพด้วยเครอ่ื งมือต่าง ๆ ใน Illustrator

ภาพกราฟิกแบบเวกเตอร์มักจะประกอบไปด้วยช้ินส่วนต่าง ๆ ซ่ึงเรียกว่า ออบเจ็ค (Object) หลายช้ินมาวางรวมกัน โดยแต่ ละออบเจ็คจะมีองคป์ ระกอบหลักเหมอื นกันดังน้ี 5.3.1 สนั (Storke) สัน เป็นเส้นตามรูปทรงของออบเจ็ค 5.3.2 สีพื้น (Fill) สีพ้ืน เป็นพ้ืนที่ด้านในของออบเจ็คซึ่งสามารถกาหนดสีได้ทั้งสีแบบทึบ ไล่โทนสี ใส่ลวดลาย (Pattern) กาหนดความโปร่งใส หรือไมใ่ ชส้ ีเลยก็ได้ 5.3.3 กรอบภาพ (Bounding Box) แสดงเส้นขอบ 5.3.4 เส้นพาธ เส้นพาธ เป็นโครงร่างออบเจ็คทป่ี ระกอบด้วยจุดแองเคอร์หลาย ๆ จดุ ใชใ้ นการปรับรูปทรงออบเจ็ค 5.3.5 จดุ แองเคอร์ (Anchor Point) จุดแองเคอร์ เป็นจดุ ทใ่ี ชต้ รึงแนวของเส้น Pant และกาหนดใหเ้ ปน็ เส้นตรงหรือเสน้ โคง้ ได้ หน่วยการเรยี นรู้ที่ 5 การวาดภาพดว้ ยเครือ่ งมอื ต่าง ๆ ใน Illustrator

การวาดภาพแบบเวกเตอร์ จะเป็นการสร้างเส้นพาธ (Path) จาดจดุ หนงึ่ ไปยงั อกี จดุ หนึง่ ต่อกนั ไปจนเปน็ รูปทรง หรือภาพตามท่เี ราตอ้ งการ กาหนด โดยท่ีจดุ ปลายทงั้ 2 ดา้ นของเสน้ แตล่ ะเสน้ นน้ั จะทาหนา้ ที่เปน็ ตวั ยดึ เส้นให้เช่ือมตอ่ กัน และยังสามารถกาหนดทศิ ทางให้เส้นทางเหล่านนั้ ถูก วางตามตาแหน่งทเ่ี กดิ เป็นรปู ทรงตามความต้องการ ซ่งึ เราเรยี กจดุ นว้ี า่ จดุ ยดึ (Anchor Point) A จุดปลาย BC จดุ ยึด D พาธทีเ่ ป็นเส้นโคง้ E แขปรบั ความโค้ง F จดุ ปรับความโคง้ 5.4.1 พาธแบบเปดิ (Open Path) พาธแบบเปิด เปน็ เส้นพาธทม่ี จี ดุ เริ่มต้น และจุดจบของพาธ ไมเ่ ปน็ จดุ เดียวกัน 5.4.2 พาธแบบปิด (Close Path) พาธแบบปิด เปน็ เส้นพาธทม่ี จี ดุ เริ้มตน้ และจุดจบของเสน้ พาธ เปน็ จดุ เดยี วกนั หนว่ ยการเรียนร้ทู ี่ 5 การวาดภาพดว้ ยเครอ่ื งมอื ต่าง ๆ ใน Illustrator

การวาดรูปทรงเรขาคณิตด้วย Shape Tool เป็นการวาดรูปทรงเรขาคณิต ต่าง ๆ ได้โดยใช้เคร่ืองมือสาหรับวาดรูปทรงสาเร็จรูปภายในโปรแกรม ซ่ึงมีให้ เลือกใชอ้ ยมู่ ากมาย ดังนี้ 5.5.1 การวาดรปู สีเ่ หลย่ี มมมุ ฉากดว้ ย Rectangle Tool มีดังน้ี 1. คลิกเลือกรปู แบบของเคร่อื งมอื ใน Rectangle Tool 2. เลือนตัวช้เี มาส์ไปทีบ่ รเิ วณภาพ ตวั ชเ้ี มาส์จะเปลี่ยนเปน็ สญั ลักษณ์ หลงั จากนั้นคลิกคา้ งไว้เพอ่ื คลิกวาดรปู บนอารต์ บอร์ด การใชเ้ มาสร์ ่วมกบั คียบ์ อร์ดในการเลอื ก กด <Shift> จาทาใหไ้ ดร้ ูปสเี่ หล่ยี มจตั ุรสั ซง่ึ มดี า้ นเทา่ กันทง้ั 4 ดา้ น กด <Alt> จุดท่ีคลิกจะกลายเป็นจุดกึ่งกลาง และจะเป็นการวาดรูป สเี่ หล่ยี มออกมาจาดจดุ ก่ึงกลาง หนว่ ยการเรียนรู้ที่ 5 การวาดภาพดว้ ยเครือ่ งมือตา่ ง ๆ ใน Illustrator

5.5.2 การวาดรูปส่เี หลยี่ มมุมโค้งดว้ ย Rounded Rectangle Tool 1. คลกิ เลือกรูปแบบของเครอื่ งมือ ใน Rounded Rectangle Tool 2. เลื่อนตัวชเ้ี มาสไ์ ปท่ีบริเวณภาพ ตัวชี้เมาส์จะเปลี่ยนสัญลกั ษณ์ หลงั จากน้ันคลิกค้างไว้เพือ่ คลิกวาดรปู บนอาร์ตบอรด์ การใชเ้ มาสร์ ่วมกบั คยี ์บอร์ดในการเลอื ก กด <Shift> จะทาให้ได้รูปสีเ่ หมย่ี มมมุ โค้ง ซึ่งมีดา้ นเท่ากนั ทง้ั 4 ดา้ น กด <Alt> จดุ ทค่ี ลิกจะกลายเปน็ จดุ กง่ึ กลาง และจะเปน็ การวาดรปู สเ่ี หลี่ยมออกมาจากจดุ กง่ึ กลางกดคีย์ เพ่อื เพม่ิ ความ โคง้ ของมมุ หรือ เพ่อื ลดความโคง้ ของมมุ หนว่ ยการเรียนร้ทู ี่ 5 การวาดภาพด้วยเครอื่ งมือต่าง ๆ ใน Illustrator

5.5.3 การวาดรูปวงกลมหรือวงรดี ว้ ย Ellipse Tool เราสามารถวาดรูปวงกลม หรือวงรีด้วย Ellipse Tool คือ 1. คลกิ เลือกรูปแบบของเคร่ืองมือ ใน Ellipse Tool 2. เล่อื นตัวชเ้ี มาส์ไปทีบ่ รเิ วณภาพ ตวั ช้ีเมาส์จะเปล่ียนเป็นสญั ลกั ษณ์ หลังจากนั้นคลิกค้างไว้ เพื่อคลิกวาดรูป บนอาร์ตบอรด์ การใชเ้ มาส์ร่วมกับคยี บ์ อรด์ ในการเลือก กด <Shift> เพอื่ วาดรูปวงกลม กด <Alt> จดุ ท่คี ลกิ จะกลายเป็นจุดกง่ึ กลางและจะเป็นการวาดวงกลมหรอื วงรีออกมาจากจุดกงึ่ กลาง หนว่ ยการเรียนรู้ท่ี 5 การวาดภาพด้วยเครอ่ื งมือต่าง ๆ ใน Illustrator

5.5.4 การวาดรปู หลายเหล่ียมด้วย Polygon Tool 1. คลกิ เลอื กรปู แบบของเครอ่ื งมอื ใน Polygon Tool 2. เลอื่ นตัวชเี้ มาสไ์ ปทบ่ี รเิ วณภาพ ตัวช้ีเมาส์จะเปลี่ยนเป็นสญั ลักษณ์ หลงั จากนั้นคลิกคา้ งไว้ เพอ่ื คลิกวาดรูปบน อาร์ตบอร์ด การใช้เมาสร์ ่วมกับคยี บ์ อรด์ ในการเลือก กด <Shift> เพื่อใหไ้ ดร้ ปู หลายเหลี่ยมที่ดา้ นเทา่ กันทกุ ดา้ น และระยะระหวา่ งจดุ ก่ึงกลางไปยงั มุมตา่ ง ๆ ก็มีระยะห่างเทา่ กนั ทุกมุม กดคีย์ เพ่ือเพิ่มจานวนด้านของรูปหลายเหล่ียม หรือ เพอ่ื ลดจานวนดา้ นของรปู หลายเหล่ยี ม หนว่ ยการเรียนรทู้ ี่ 5 การวาดภาพดว้ ยเครอ่ื งมือตา่ ง ๆ ใน Illustrator

5.5.5 การวาดรูปดาว Star Tool 1. คลกิ เลอื กรปู แบบของเครื่องมอื ใน Star Tool 2. เล่ือนตวั ชีเ้ มาส์ไปทีบ่ รเิ วณภาพ ตัวชี้เมาสจ์ ะเปลีย่ นเป็นสัญลกั ษณ์ หลังจากนัน้ คลิกคา้ งไว้เพ่อื คลิกวาดรูปบน อารต์ บอรด์ การใชเ้ มาส์ร่วมกับคีย์บอร์ดในการเลือก กดคยี ์ เพ่ือเพิม่ จานวนแฉกของรปู ดาว หรือ เพอื่ ลดจานวนแฉกของรูปดาว กด <Alt> จะทาใหแ้ ฉกแต่ละด้านของรูปดาวเป็นเส้นตรงแนวเดยี วกนั หนว่ ยการเรยี นรทู้ ี่ 5 การวาดภาพดว้ ยเคร่ืองมือต่าง ๆ ใน Illustrator

5.5.6 การวาดแสงสะทอ้ นด้วย Flare Tool เราสามารถวาดรูปหลายเหลี่ยมด้วย Flare Tool ซึ่งจะสร้างภาพเลยี นแบบการส่องแสง และสะท้อนของแหลง่ กาเนดิ แสง ต่าง ๆ เช่น แสงจากดวงอาทิตย์ หลอดไฟ เป็นต้น โดยปกติแล้วมักจะใช้วาดประกอบภาพอ่ืน เพื่อให้ดูโดดเด่นข้ึน โดยสีของแสง สะทอ้ นจะเปลย่ี นไปตามสขี องภาพพ้นื หลงั โดยอัตโนมัติสว่ นวธิ กี ารวาดแสงสะท้อนมดี ังน้ี 1. คลกิ เลือกรูปแบบของเครอ่ื งมือ ใน Flare Tool 2. จากน้ันเล่ือนตัวช้ีเมาส์ไปบริเวณภาพตัวชี้เมาส์จะเปล่ียนสัญลักษณ์ หลังจากน้ันคลิกค้างไว้เพื่อคลิกลากรูปจุด สะท้อนแสงอารต์ บอร์ด การใชเ้ มาส์รว่ มกับคีย์บอรด์ ในการเลือก กด <Ctrl> เพอื่ ขยายเฉพาะวงรศั มแี สง (Halo) ใหก้ ว้าง กดคีย์ เพ่ือเพ่มิ จานวนรัศมีแสง (Rays) หรือ เพ่ือลดจานวนเสน้ รัศมแี สง (Rays) หน่วยการเรียนรูท้ ี่ 5 การวาดภาพด้วยเครอื่ งมอื ตา่ ง ๆ ใน Illustrator

ในส่วนนี้จะกลา่ วถึง Pen Tool เปน็ เครื่องมอื ทใี่ ชว้ าดเส้นอิสระ โดยแต่ละส่วนของเส้นนนั้ จะถูกเช่อื มต่อกนั ดว้ ย จดุ ยดึ (Anchor) ซึ่งภายในกลมุ่ ของ Pen Too จะมีเครือ่ งมือต่าง ๆ สาหรบั ปรบั แต่ง เส้นพาธใหเ้ ปน็ รปู ทรงต่าง ๆ ได้ตามที่ต้องการ ดังน้ี 5.6.1 ร้จู กั กับการวาดเส้นดว้ ยกลุม่ เคร่ืองมือ Pen Tool เราใช้เคร่ืองมือ Pen Tool วาดได้ทั้งเส้นตรงและเส้นโค้งอิสระ โดยสามารถควบคุมเครื่องมือได้ง่ายและลงรายละเอียดได้อย่างแม่นยา เครอ่ื งมือในกลมุ่ Pen Tool หนว่ ยการเรยี นรทู้ ี่ 5 การวาดภาพด้วยเคร่อื งมือต่าง ๆ ใน Illustrator

1. วาดเสน้ ตรง เราสามารถใช้ Pen Tool สร้างเส้นตรง โดยกาหนดจุดยดึ เพยี ง 2 จุด คือ จดุ เรมิ่ ตน้ และจุดปลาย โดยเลือกเครื่องมือ Pen Tool ตัวช้ีเมาส์จะเปล่ียนเป็นรูป ใหว้ าดจดุ เร่ิมต้น จากน้ันตวั ช้เี มาส์จะเปลี่ยนไปเป็น ให้คลิก วาดปลาย เราจะได้เส้นตรงจากน้ันเราสามารถวาดพาธ เพ่ิมเติมให้กลายเป็นรูปทรงแบบเปิดหรือแบบปิด โดยให้ จดุ ส้นิ สดุ ของพาธเปน็ จุดเดยี วกบั จุดเริ่มต้นของพาธ ซึ่งตัว ช้เี มาส์จะเปลี่ยนเป็น บอกให้ทราบวา่ เป็นเส้นพาธแบบปดิ 2. วาดเส้นโค้ง เราสามารถใช้ Pen Tool สร้างเส้นโค้ง โดยกาหนดแขนปรับความโค้งได้ตามต้องการดังตัวอย่าง ต่อไปนี้เส้นโค้งท่ีมีจุดเช่ือมต่อกันเป็นการเชื่อมต่อกัน ระหวา่ งเสน้ โค้งกับเสน้ โคง้ โดยเมอ่ื เส้นโคง้ เหลา่ นั้นเชือ่ มตอ่ กันจะเกิดเส้นโคง้ ทม่ี ีลกั ษณะทีแ่ ตกต่างกนั

5.6.2 การวาดรปู ทรงดว้ ยเคร่อื งมือดินสอ (Pencil Tool) เครื่องมือดนิ สอ (Pencil Tool) เปน็ เครื่องมอื สาหรับวาดเสน้ ให้เป็นรูปตา่ ง ๆ ได้ อย่างอิสระตามการลากเมาส์ และเราสามารถทาการแกไ้ ขไดอ้ ย่างงา่ ยดาย โดยใช้เคร่อื งมือ Smooth Tool และ Path Eraser Tool เป็นเสน้ อสิ ระทว่ี าดดว้ ยเครอื่ งมอื ดนิ สอนี้ การวาดเส้นอสิ ระดว้ ยเคร่ืองมือ (Pencil Tool) โดยมวี ธิ กี ารดงั น้ีตอ่ ไปนี้ 1. คลิกเลอื กเครอ่ื งมอื Pencil Tool 2. จาดนั้นสร้างรูปขึ้นมาโดยมีการวาดเชื่อมต่อปลายทั้งสองของเส้นพาธให้เปน็ แบบปดิ 5.6.3 การวาดภาพดว้ ย Paintbrush Tool เราสามารถเปดิ ใชง้ านพาเนล Brushes ไดโ้ ดยใช้คาสงั่ Window > Brushes 1. คลิกเลอื กเครอ่ื งมือ Paintbrush Tool 2. คลกิ เลือกรูปแบบ หวั พู่กนั ทเี่ ราต้องการใช้งาน 3. คลิกวาดภาพบนอารต์ บอรด์ ตามตาแหนง่ ทต่ี ้องการ หนว่ ยการเรยี นรทู้ ่ี 5 การวาดภาพดว้ ยเครอื่ งมือต่าง ๆ ใน Illustrator

การกาหนดเส้นลักษณะเส้นของขอบภาพ (Stroke) เพื่อนาไปใช้สร้างภาพจากเคร่ืองมือ เช่นการกาหนดลักษณะของเส้นประ และขนาดของเส้นหนาหรือบางตามท่ีเราต้องการโดยสามารถเลือกคาสั่ง Window > Stroke จะปรากฏพาเนล Stroke ให้เรา สามารถทาการกาหนดลกั ษระของเส้นได้ ดังนี้ 1. คลิกเลอื กส่วนของภาพท่ีต้องการกาหนดลกั ษณะเส้น 2. กาหนดลกั ษณะของเสน้ ตามคา่ ตา่ ง ๆ ในพาเนล Stroke หนว่ ยการเรียนร้ทู ่ี 5 การวาดภาพด้วยเครื่องมือต่าง ๆ ใน Illustrator

เปน็ การใช้เคร่ืองมอื ยางลบลบสง่ิ ท่ีเราวาดผดิ ซ่ึงมีหลกั สาคญั 2 ขอ้ คอื 1. ถ้ามีการเลือกภาพเครื่องมือนจี้ ะลบเฉพาะภาพทถี่ ูกกเลือก วัตถทุ อี่ ยใู่ กล้ ๆ จะไม่ถูกลบแมจ้ ะลากเมาสไ์ ปโดนกต็ าม 2. ถ้าไม่มีการเลอื กภาพใดเลย เคร่อื งมือน้จี ะลบทุกวตั ถุทเ่ี มาส์ลกผา่ น หน่วยการเรียนรูท้ ่ี 5 การวาดภาพด้วยเครือ่ งมอื ตา่ ง ๆ ใน Illustrator