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

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105 หน่วยการเรียนรทู้ ี่ 7การระบายสีและภาพกราฟิกสาหรบั เวบ็ เพจ สาระสาคัญ การระบายสีใหภ้ าพสามารถนาเคร่อื งมือกลุ่มระบายสภี าพรูปแบบตา่ ง ๆ นามาประยกุ ตใ์ ชก้ บัการปรับแต่งภาพถา่ ย หรอื ระบายสีรปู แบบสาเร็จรูปที่โปรแกรมกาหนดให้ เช่น การวาดโดยการเลือกรูปแบบหัวพกู่ นั สาเร็จรูประบายสีเป็นภาพตา่ ง ๆ เพ่ือใหภ้ าพดนู า่ สนใจมหี ลายมิติและนาความรู้ต่าง ๆทงั้ รูปแบบการสรา้ งตัวอกั ษร การระบายสีพ้ืนหลังหรือการวาดเส้นลวดลายต่าง ๆ นามาประยกุ ตใ์ ช้ในการออกแบบ Web Page แล้วเลือกบนั ทึกไฟลใ์ หเ้ หมาะสมกับงานเวบ็ ไซต์ สาระการเรยี นรู้ 1. เครื่องมือระบายสี 1.1 กลมุ่ เครื่องมือการไล่โทนสีและเทสี 1.2 กลุม่ วาดภาพและระบายสี 1.3 กลมุ่ เคร่ืองมือการระบายสีพเิ ศษ 2. กล่มุ เคร่ืองมือการลบ 2.1 การลบภาพด้วยเครื่องมือ Eraser Tool 2.2 การลบภาพเคร่ืองมือ Background Eraser Tool 2.3 การลบภาพดว้ ยเครื่องมือ Magic Eraser Tool 3. การเติมสแี ละ Pattern ให้ภาพดว้ ยคาส่ัง Fill 4. การออกแบบ Web Page 4.1 การเลอื กใชส้ ีสาหรับการออกแบบ Web Page 4.2 ขนาดของภาพ 4.3 ความละเอียดของภาพ 4.4 ส่วนประกอบสาคัญของ Web Page 4.5 การใช้เครอ่ื งมือสาหรบั การออกแบบ Web Page 4.6 การออกแบบปมุ่ ลงิ ค์ 4.7 การออกแบบ Page Header 4.8 การสรา้ งปุม่ เมนูการระบายสีและภาพกราฟิกสาหรบั เว็บเพจ หนา้ 182

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟิก รหัส 2204-2105จดุ ประสงคก์ ารเรียนรู้เมื่อศึกษาและปฏิบตั ิตามเอกสารประกอบการเรียน หนว่ ยการเรียนรทู้ ี่ 7 แลว้ นกั เรยี นสามารถ1. ระบายสโี ดยการใชก้ ลมุ่ เคร่ืองมือระบายสีได้ 1.1 ใช้งานเคร่อื งมือการไลโ่ ทนสีและเทสีได้ 1.2 วาดภาพและระบายสีได้ 1.3 ใชง้ านเครื่องมอื การระบายสีพเิ ศษได้2. ลบรูปภาพโดยใชเ้ ครื่องมือกลมุ่ การลบได้ 2.1 ลบภาพดว้ ยเครอ่ื งมอื Eraser Tool ได้ 2.2 ลบภาพเครอ่ื งมือ Background Eraser Tool ได้ 2.3 ลบภาพด้วยเครื่องมือ Magic Eraser Tool ได้3. เติมสแี ละ Pattern ให้ภาพด้วยคาสัง่ Fill ได้4. ออกแบบ Web Page ได้ 4.1 เลือกใชส้ ีสาหรบั การออกแบบ Web Page ได้ 4.2 บอกขนาดของภาพได้ 4.3 อธิบายความละเอียดของภาพได้ 4.4 บอกสว่ นประกอบสาคญั ของ Web Page ได้ 4.5 ใช้เครื่องมือสาหรับการออกแบบ Web Page ได้ 4.6 ออกแบบปุ่มลงิ คไ์ ด้ 4.7 ออกแบบ Page Header ได้ 4.8 สรา้ งปุ่มเมนูได้การระบายสีและภาพกราฟิกสาหรับเวบ็ เพจ หนา้ 183

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหัส 2204-2105 แผนภูมเิ นื้อหาการระบายสแี ละภาพกราฟิกสาหรับเว็บเพจเคร่อื งมอื ระบายสี การเตมิ สีและ Pattern ใหภ้ าพ 1. กล่มุ เครอื่ งมือการไล่โทนสแี ละเทสี ดว้ ยคาส่งั Fill 2. กลมุ่ วาดภาพและระบายสี 3. กลุ่มเครอ่ื งมือการระบายสีพเิ ศษ การออกแบบ Web Page 1. การเลอื กใช้สสี าหรับการออกแบบ กลมุ่ เคร่ืองมือการลบ 1. การลบภาพด้วยเครอื่ งมอื Eraser Web Page 2. ขนาดของภาพ Tool 3. ความละเอียดของภาพ 2. การลบภาพเคร่ืองมือ 4. ส่วนประกอบสาคญั ของ Web Background Eraser Tool Page 3. การลบภาพด้วยเครอื่ งมือ Magic 5. การใช้เครือ่ งมือสาหรบั การ Eraser Tool ออกแบบ Web Page 6. การออกแบบปุ่มลิงค์ 7. การออกแบบ Page Header 8. การสร้างปุ่มเมนูการระบายสีและภาพกราฟิกสาหรบั เว็บเพจ หนา้ 184

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105 หนว่ ยการเรยี นรู้ท่ี 7 การระบายสแี ละภาพกราฟิกสาหรบั เว็บเพจ การเลอื กใช้รูปแบบสตี ่าง ๆ นอกจากการปรับแตง่ ความสว่างภาพและสสี ันแล้วสามารถใช้งานเครอื่ งมอื อน่ื ๆ เช่น เครอ่ื งมอื สาหรับระบายสี และการสรา้ งพื้นผิวในลักษณะต่าง ๆ ในโปรแกรมซ่งึ รปู แบบเหล่านมี้ ีประโยชนก์ ับการปรับแต่งภาพ และนาความร้มู าประยุกต์ใชส้ าหรับการออกแบบWeb Page ใหส้ วยงาม7.1 เคร่อื งมือการระบายสี เครื่องมือทีร่ ะบายสมี ีอยูม่ ากมาย ซ่งึ แตล่ ะแบบมคี วามสามารถในการใช้งานทแ่ี ตกต่างกนั ไปขึน้ อยกู่ ับภาพทส่ี ร้างข้ึน โดยการเลอื กเครอื่ งมือใหเ้ หมาะกับภาพนั้น ๆ เคร่ืองมือสาหรับการระบายสีแบ่งออกเปน็ 3 กลมุ่ ดงั นี้ 7.1.1 กลุ่มเคร่อื งมือการไลโ่ ทนสแี ละเทสี คือ กลุ่มเคร่ืองมือสาหรบั การไล่โทนสแี ละเทสีพืน้ ตา่ ง ๆ ในภาพ ดงั นี้ รปู ภาพ 7-1 กลุ่มเครือ่ งมือการไลโ่ ทนสีและเทสี ทม่ี า : จากโปรแกรม Adobe Photoshop CS6 1. Gradient Tool คือ การไลโ่ ทนสใี หภ้ าพนาไปสร้างพน้ื หลงั ให้ภาพต่าง ๆหรอื สร้าง Effects ในการออกแบบภาพ การลงสแี บบไล่โทนสดี ว้ ยเครื่องมือ Gradient Tool คอื การเตมิ สีแบบไล่โทนสี สามารถกาหนดสีและทิศทางของแถบสีอย่างอิสระ รปู แบบวธิ กี ารปรบั แต่ง Option Barดงั รูปภาพ 7-2การระบายสีและภาพกราฟิกสาหรบั เว็บเพจ หน้า 185

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหสั 2204-2105รูปแบบสี กาหนดคา่ ความโปรง่ ใส สลับสี การไล่โทนสีนมุ่ นวล ทิศทางการไลโ่ ทนสี โหมดการผสานสีของการใชเ้ ครอ่ื งมือแต่ละครงั้ ไล่โทนแบบโปรง่ ใสแถบสที ต่ี ้องการใช้งาน รปู ภาพ 7-2 การลงสีแบบไลโ่ ทนสดี ้วยเครอื่ งมอื Gradient Tool ท่มี า : จากโปรแกรม Adobe Photoshop CS6 กรณที ชี่ ดุ สที ่ีกาหนดใหย้ ังไมเ่ พียงพอหรือไมเ่ หมาะสม สามารถสร้างชดุ สใี หม่ขนึ้ มาใหม่โดยมวี ิธกี ารสร้าง ดงั รูปภาพ 7-3กาหนดชอื่ รปู แบบ โหลดรปู แบบสีจากแหล่งอ่นื แถบสที ี่สร้าง บนั ทกึ รูปแบบสไี ว้ใชภ้ ายหลัง แถบสี เพ่ิมแถบสไี ว้ใน Preset ตวั กาหนดสี กาหนดความโปรง่ ใสของสี จุดกาหนดระยะสรี ะหว่าง สีท่เี ลือก ระบคุ ่าสีช่วงหยุด ชว่ งหยดุ รูปภาพ 7-3 การสร้างชดุ สีใหม่ ท่ีมา : อรทัย เลศิ ขนุ ทด (2559) หน้า 186การระบายสแี ละภาพกราฟิกสาหรบั เว็บเพจ

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหัส 2204-2105 รปู แบบการคลิกเมาส์ไล่โทนสมี ี 5 รปู แบบ โดยคลิกจดุ เร่ิมต้นกอ่ น แล้วลากเมาส์ไปยังตาแหนง่ ต่าง ๆ เกดิ รปู แบบลักษณะการไล่โทนสดี ังรปู ตัวอย่าง การลากเมาสเ์ พ่ือไลโ่ ทนสใี นแตล่ ะแบบต้องคลิกเลือกรูปการไลโ่ ทนสกี ่อน แลว้ จึงคลิกเมาสล์ ากเพ่ือไลโ่ ทนสี ดงั รปู ภาพ 7-4 เลอื กรปู แบบการไล่โทนสี ตวั อยา่ ง การไล่โทนสีแต่ละรูปแบบ และทิศทางการลากเมาส์ตามลกู ศรในภาพผลลัพธร์ ปู แบบสดี งั ภาพ รปู แบบ Linear รูปแบบ Radialรูปแบบ Angle รปู แบบ Reflected รูปแบบ Diamond รูปภาพ 7-4 รปู แบบการลากโทนสี 5 แบบ ทม่ี า : อรทยั เลิศขุนทด (2559) 2. Paint Bucket Tool คอื การเทสลี งไปในขอบเขตพน้ื ท่ีท่กี าหนดไว้ และรปู แบบการเทสพี ้นื ผิวแบบ Pattern สาเร็จรูปในโปรแกรม การเติมสีแบบ Paint Bucket Tool คอื การเติมสีดว้ ย Foreground หรือสแี บบ Pattern มขี ัน้ ตอนดงั นี้ (1) คลกิ เครื่องมือ (2) ปรบั เปล่ียน Option Bar ดงั รูปภาพ 7-5การระบายสแี ละภาพกราฟิกสาหรบั เวบ็ เพจ หน้า 187

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหัส 2204-2105กาหนดการเตมิ สี กาหนดการเตมิ สี กาหนดสไี หลไปตาม Pixels ท่ตี อ่ เน่ืองกัน กาหนดการกระจายของสตี ง้ั แต่ 0-255 การเทสที กุ Layer ทีม่ สี ีตอ่ เน่อื งกนั(3) คลกิ บริเวณทีต่ ้องการแลว้ เทสีลงไป ลกั ษณะสีที่เทลงไปหรือเลือกเติมสแี บบ Pattern คอื เลือกเทสสี าเรจ็ รปู ที่โปรแกรมกาหนดใหด้ ังรปู การเลอื กเทสแี บบ Pattern อนื่ ๆ ท่ี โปรแกรมจดั ให้ รูปภาพ 7-5 เติมสีแบบ Pattern ทมี่ า : อรทัย เลศิ ขุนทด (2559) 7.1.2 กลุ่มวาดภาพและระบายสี คือ การวาดและการระบายสภี าพด้วยการใช้เมาส์คลิกเพ่อืวาดรปู แบบต่าง ๆ หรือเลือกรูปแบบหัวพู่กันสาเรจ็ รปู ต่าง ๆ ท่ีโปรแกรมกาหนดให้ โดยการระบายสีแบ่งเคร่ืองมือออกเปน็ 4 ตวั มคี วามสามารถในการใช้งานแตกตา่ งกนั ไป ดงั รูปภาพ 7-6 รูปภาพ 7-6 กลุ่มวาดภาพและระบายสี หนา้ 188 ทมี่ า : จากโปรแกรม Adobe Photoshop CS6การระบายสแี ละภาพกราฟิกสาหรบั เวบ็ เพจ

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 1. Brush Tool คอื เครอ่ื งมือสาหรับการระบายสี โดยสามารถกาหนดรูปแบบของเสน้ ได้มากมาย มีความยืดหยุ่นในการใช้งานกบั ภาพสูงสดุ 2. Pencil Tool คอื เครือ่ งมือระบายสีเปน็ ภาพต่าง ๆ ผลของการใช้เคร่ืองมือน้ีจะไดเ้ สน้ ที่เป็นเสน้ แขง็ และหยาบซงึ่ เหมาะกบั ภาพบางประเภทเท่านั้น 3. Color Replacement Tool คือ การระบายสีทบั ลงไปบนพืน้ ผวิ เพอ่ื เปล่ียนสีของจดุ ท่นี าเมาส์คลิกเลอื ก 4. Mixer Brush Tool คือ เคร่ืองมือระบายสี โดยสามารถเลือกกาหนดรูปแบบได้มากมาย และได้เส้นท่มี ีสีออ่ นหรอื นมุ่ นวลกว่า กลมุ่ วาดภาพและระบายสภี าพนน้ั มีข้นั ตอนการใชง้ านไมแ่ ตกตา่ งกันมาก จึงขอยกตวั อยา่ งการใชง้ านเคร่ืองมือจานวน 2 ตัวคอื เครื่องมือ Brush Tool และเครื่องมือ Pencil Toolดงั น้ี 1. เครือ่ งมือ Brush Tool คือ เครื่องมือท่โี ดดเด่นทสี่ ดุ ในกลุ่ม เนื่องจากมีความสามารถในการทางานและประยุกต์ใชก้ ับการวาดภาพร่วมกบั การปรบั แต่งภาพระบายสี ดังนี้ (1) เลอื กเคร่ืองมือ (2) ปรับแต่งเครือ่ งมือที่ Option Bar ดงั รปู ภาพ 7-7รปู แบบ Brush Tool Option Bar การปรับความเขม้ โหมดภาพ ปรับแตง่ Brush Tool รูปภาพ 7-7 เครือ่ งมอื Brush Tool ที่มา : จากโปรแกรม Adobe Photoshop CS6 Option การปรับความเข้ม Brush Tool มวี ธิ กี ารปรบั รูปแบบความเข้มการระบายสี เชน่ Opacity คือ การกาหนดความเข้มสงู สุดของเครอ่ื งมือในการแดรกเมาส์ระบายสีหนง่ึ คร้ัง เมอ่ื ปลอ่ ยเมาสแ์ ลว้ ระบายสซี า้ ทีจ่ ดุ เดิมอกี กจ็ ะเข้มขึ้น Flow คือ การกาหนดเปอรเ์ ซ็นตข์ องสีท่ีจะถูกระบายสอี อกมาในการ DragMouse หนึ่งครัง้ โดยความเข้มจะข้นึ อยู่กับค่า Opacity ทีก่ าหนด เช่น หากกาหนด Opacity 40%การระบายสแี ละภาพกราฟิกสาหรบั เวบ็ เพจ หนา้ 189

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหสั 2204-2105และค่า Flow 20% หมายความว่าสีที่ถูกระบายคร้ังแรกนัน้ จะเป็น 20% ถ้าตอ้ งการให้สีมคี วามเข้มสงู สุดจะต้องระบายทบั จุดเดมิ ถงึ 2 ครงั้ Airbrush ผู้ใชส้ ามารถคลกิ เลือกปมุ่ น้ี เพื่อกาหนดความเข้มของสีท่ีระบายลงไปจากการคลิกเมาส์คา้ งไวท้ ่จี ุดเดิมซึง่ มีหลกั การเหมือนกบั การพน่ สีดว้ ย Airbrush (3) เลอื กรูปแบบ Brush Tool โดยกาหนดคา่ ตามต้องการแล้วคลกิ เมาส์ซา้ ยค้างไว้แลว้ ระบายสีบรเิ วณพืน้ ที่การทางานเพ่ือวาดรูปตามต้องการ ดงั รปู ภาพ 7-8 รูปภาพ 7-8 ระบายสีบริเวณพน้ื ท่ีการทางาน ทม่ี า : อรทยั เลิศขุนทด (2559) 2. เคร่อื งมือ Pencil Tool การระบายสเี ปน็ ภาพตา่ ง ๆ การใช้เครื่องมือน้ี ได้เส้นทเ่ี ป็นเส้นแขง็ และหยาบซงึ่ เหมาะกบั ภาพบางประเภทเทา่ นั้น ขั้นตอนดงั น้ี (1) คลิกเลือกเครือ่ งมอื (2) กาหนดค่า Option Bar ดังน้ีรปู แบบ Pencil Tool Option Bar การปรบั ความเข้ม โหมดภาพ ปรบั แต่ง Pencil Tool (3) เลอื กรูปแบบและกาหนดคา่ ตามต้องการแล้วคลกิ เมาสซ์ ้ายค้างไว้ระบายบริเวณพ้ืนทีก่ ารทางานเพ่ือวาดภาพตามตอ้ งการ ดังน้ีการระบายสแี ละภาพกราฟกิ สาหรบั เวบ็ เพจ หน้า 190

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105 รปู ภาพ 7-9 เลือกรูปแบบและกาหนดคา่ ที่มา : อรทัย เลิศขนุ ทด (2559) 7.1.3 กลุม่ เครื่องมือการระบายสีพิเศษ คือ กลุ่มเคร่อื งมือการระบายสีพเิ ศษสามารถเลือกใช้งานได้ 2 แบบ ทีแ่ ตกตา่ งกัน ดังรูปภาพ 7-10รปู ภาพ 7-10 กลุ่มเครอื่ งมอื การระบายสีพเิ ศษที่มา : จากโปรแกรม Adobe Photoshop CS6 1. History Brush Tool คอื เครื่องมือเรยี กคืนภาพก่อนหนา้ การปรับแตง่ คืนมาซงึ่ มีลักษณะเหมือนกับการใช้คาส่งั Undo แต่สามารถเรยี กใช้การทางานเฉพาะจดุ ได้ 2. Art History Brush Tool คือ เครื่องมือทใ่ี ชส้ าหรบั การเปลีย่ นแปลงภาพถ่ายธรรมดาให้มรี ูปแบบเหมือนกับงานศลิ ปะ ขั้นตอนการเรยี กใชเ้ ครอ่ื งมือกลุ่มระบายสีพเิ ศษทแ่ี ตกตา่ งกนั ดังนี้ 1. เครือ่ งมือ History Brush Tool คอื การเรียกภาพที่ตกแต่งภาพหรือตัดภาพออกจากฉากหลงั แล้วพืน้ ท่ีบางส่วนหายไปแล้วสามารถ เรียกคืนสว่ นท่หี ายไปได้ ซงึ่ สามารถปรบั แตง่คา่ การทางานบน Option Bar ดงั รูปภาพ 7-11ขนาดและรูปแบบของเคร่ืองมอื กาหนดความโปรง่ ใสโหมดภาพ กาหนดความหนกั เครื่องมอื ในการแดรกเมาสผ์ ่านรปู ภาพ 7-11 เครอ่ื งมือ History Brush Toolท่ีมา : จากโปรแกรม Adobe Photoshop CS6การระบายสีและภาพกราฟิกสาหรับเวบ็ เพจ หนา้ 191

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 การเรียกภาพที่ตกแตง่ ภาพแลว้ กลับคนื มาเหมือนเดมิ เชน่ วาดภาพผเี สอื้แล้วตอ้ งการลบภาพทว่ี าดออก มขี ้ันตอนดังนี้คลกิ เคร่ืองมอื แล้วแดรกเมาส์บริเวณน้แี ล้วภาพทว่ี าดหายไปรูปภาพ 7-12 เคร่อื งมอื เรียกคืน History Brush Tool ที่มา : อรทัย เลศิ ขุนทด (2559) 2. เครอ่ื งมือ Art History Brush Tool คือ การเปลยี่ นภาพถา่ ยธรรมดาใหม้ ีรปู แบบเหมอื นกับงานศลิ ปะ เกดิ จากการบดิ จุดสีภาพใหห้ มุนวน โดยการแดรกเมาส์ผา่ นสว่ นตา่ ง ๆของภาพทาใหผ้ ลลัพธ์เหมือนกับงานศลิ ปะ กาหนดค่าตา่ ง ๆ บน Option Bar ดงั น้ีกาหนดรปู แบบเครือ่ งมือ กาหนดเปอรเ์ ซน็ ต์ความเปลี่ยนแปลงของสใี กลเ้ คยี ง กาหนดความกว้างที่จะเปลี่ยนแปลงกาหนดโหมดการผสานสี กาหนดความโปรง่ ใส เลอื กรปู แบบการหมุนหวั แปรง การเปลี่ยนภาพถ่ายธรรมดาให้มีรูปแบบเหมือนกับงานศิลปะ โดยการแดรกเมาส์ผ่านสว่ นต่าง ๆ ของภาพขั้นตอนดงั นี้ (1) เปดิ ไฟลภ์ าพ (2) คลิกเครอ่ื งมือ แลว้ แดรกเมาสบ์ ริเวณภาพท้ังหมด รปู ภาพ 7-13 เคร่อื งมอื Art History Brush Tool หน้า 192 ทมี่ า : อรทยั เลิศขนุ ทด (2559)การระบายสีและภาพกราฟกิ สาหรับเวบ็ เพจ

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟิก รหสั 2204-21057.2 กลมุ่ เครอื่ งมือการลบ ภาพที่สร้างข้ึนสามารถลบบางส่วน โดยการกาหนดขอบเขตพ้ืนที่การลบ หรือลบแบบไม่กาหนดขอบเขตพ้ืนที่ แลว้ กดปุ่ม ทแ่ี ปน้ พมิ พแ์ ต่เครอ่ื งมือในกลมุ่ ของการลบยงั มีรปู แบบการลบที่นา่ สนใจที่จะช่วยใหก้ ารทางานสะดวก ดังรูปภาพ 7-14 รปู ภาพ 7-14 กลุม่ เคร่ืองมือการลบทม่ี า : จากโปรแกรม Adobe Photoshop CS6 1. Eraser Tool คือ การลบภาพใน Layer ปกตภิ าพที่แดรกเมาส์ผา่ นจะหายไป 2. Background Eraser Tool คือ เคร่อื งมือสาหรบั ลบภาพใน Layer พื้นหลังภาพทีใ่ ช้งานเคร่ืองมอื น้แี ลว้ Layer พน้ื หลังจะถกู ลบไปและจะถกู เปลยี่ นเปน็ Layer ปกติจดุ ทถ่ี ูกลบทิ้งเปลย่ี นเปน็ พื้นหลงั แบบโปรง่ ใส (Transparent) ทันที 3. Magic Eraser Tool คือ เครอื่ งมือท่ีคลกิ เมาส์เลือกช่วงสีที่ตอ้ งการลบภาพแล้วกดปมุ่ เพือ่ ลบท้ิงโดยจะลบสีทเี่ หมือนกนั หรือใกล้เคยี งกันมากท่สี ดุ (แต่มขี ้อจากดั คือตวั เลอื กน้จี ะใชง้ านไม่ได้ถา้ หากภาพมีการย่อหรือขยายด้วยคาสง่ั Image Size ขณะที่ปรับแตง่ ภาพ) 7.2.1 การลบภาพด้วยเคร่ืองมือ Eraser Tool คือ เครื่องมือลบภาพ และแก้ไขความผิดพลาดจากการทางานกาหนดค่า Option Bar ดังน้ี กาหนดเปอรเ์ ซ็นตค์ วามหนกั เครื่องมอื กาหนดขนาดเคร่อื งมอื ความโปรง่ ใสของเครื่องมือ ในการแดรกเมาส์เลือกรปู แบบของหวั เครอ่ื งมือแบบ คลิกเลือกเมอื่ ตอ้ งการเรียกภาพเดมิหวั แปรง ดนิ สอ หรอื สเ่ี หลี่ยม กลบั เม่อื แดรกเมาสผ์ ่าน Eraser Tool ใชล้ บภาพ คลิกเมาส์ซ้ายค้างไว้ ออกจากพน้ื หลัง ลบบริเวณทีต่ ้องการลบ รปู ภาพ 7-15 การลบรูปภาพออกจากพืน้ หลงั หน้า 193 ทมี่ า : อรทยั เลิศขนุ ทด (2559)การระบายสีและภาพกราฟกิ สาหรับเวบ็ เพจ

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 7.2.2 การลบภาพเครื่องมือ Background Eraser Tool คือ เคร่ืองมือสาหรบั คลกิเลอื กสที ี่ต้องการลบแลว้ กดปุ่ม เพื่อลบทิ้งการกาหนดคา่ Option ตา่ ง ๆ ดงั น้ีกาหนดขนาดเคร่อื งมอื รปู แบบความตอ่ เนื่อง กาหนดเปอรเ์ ซ็นต์ความตอ่ เน่อื งของสี ของสที ีต่ อ้ งการลบทิง้วิธีการกาหนดสตี ้นแบบ ปอ้ งกันไม่ใหล้ บสีที่กาหนดไว้บน Foregroundสาหรบั การลบทงิ้Background Eraser Tool ลบ คลกิ เมาสซ์ า้ ยค้างไวแ้ ลว้ภาพออกจากพ้นื หลงั จดุ ทล่ี บท้งิ ลากเมาสล์ บบรเิ วณท่ีพืน้ หลังเปน็ แบบโปร่งใส ต้องการลบออก รปู ภาพ 7-16 Background Eraser Tool ทมี่ า : อรทัย เลศิ ขุนทด (2559) 7.2.3 การลบภาพด้วยเครอ่ื งมอื Magic Eraser Tool คอื เครื่องมือลบภาพทีต่ ้องคลิกเลอื กสีทต่ี ้องการลบแล้วกดปุ่ม เพ่ือลบทิ้ง เครือ่ งมือนจี้ ะใชง้ านไม่ไดถ้ า้ หากรปู ภาพดังกลา่ วมีการยอ่ หรือขยายดว้ ยคาสง่ั Image Size ขณะที่ปรบั แตง่ การกาหนดคา่ Option Bar ดงั นี้กาหนดคา่ 0-255 เพอ่ื ระบุ กาหนดความโปร่งใสช่วงของความต่อเนอ่ื งของสี ปรบั เส้นขอบให้นมุ่ นวล ให้สว่ นทถ่ี ูกลบ ลบสีทมี่ ีคา่ ใกลเ้ คยี งกนั ลบภาพทกุ Layer ทม่ี ีสีเหมือนกนั นาเมาสค์ ลกิ ทบี่ รเิ วณสที ี่ต้องการลบภาพ โดยสีทใี่ กล้เคยี งกันอยู่บริเวณเดยี วกัน จะถกู ลบทง้ิ จุดที่ถูกลบทง้ิ เปน็ พ้ืนหลงั แบบโปรง่ ใส รปู ภาพ 7-17 การลบภาพด้วยเครอื่ งมอื Magic Eraser Tool ท่ีมา : อรทัย เลิศขุนทด (2559)การระบายสีและภาพกราฟกิ สาหรบั เวบ็ เพจ หนา้ 194

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟิก รหัส 2204-21057.3 การเตมิ สีและ Pattern ใหภ้ าพดว้ ยคาสงั่ Fill การเติมสีให้ภาพดว้ ยคาสงั่ Fill การเทสลี งในภาพก่อนการเทสีลงไปต้องเลือกขอบเขตพืน้ ที่ก่อนแล้วการเทสี ขั้นตอนดังนี้ 1. กาหนดสีดา้ นบน (สีสม้ ) Foreground Color 2. สร้างขอบเขตพน้ื ทภ่ี าพทีต่ ้องการเตมิ สี 3. คลิกเมนู Edit > Fill หรือ + กาหนดคา่ ต่าง ๆ ดงั น้ีเลอื กสีหรอื พ้นื ผิว เลือก Option เพ่ือทจี่ ะเทสลี งไปบนภาพ ปอ้ งกนั การเทสลี งพืน้ ที่ สว่ นทไี่ ม่มจี ุดของสีกาหนดโหมดการผสานสีและความโปรง่ ใส ตัวอย่าง การเติมสีบริเวณทสี่ รา้ งขอบเขตพ้นื ที่ โดยกาหนดคา่ Opacity 100% กาหนดสีด้านบน Foreground Color (สีส้ม) การกาหนดคา่ การผสานและความโปรง่ ใสของภาพ ถ้ากาหนดคา่ มากจะทาใหส้ มี คี วามเข้มสูงแต่ถ้ากาหนดคา่ น้อยสีจะจางหรือโปรง่ ใสตามค่าทีก่ าหนด เช่น คา่ Opacity = 50% ดงั รปู ภาพ 7-18 รูปภาพ 7-18 กาหนดค่า Opacity 50% ท่มี า : อรทัย เลศิ ขนุ ทด (2559) ตวั อย่าง การเตมิ สบี ริเวณทีส่ รา้ งขอบเขตพืน้ ท่ี โดยกาหนดค่า Opacity 50% สี ForegroundColor เหมือนกบั สีตัวอยา่ งขา้ งตน้การระบายสีและภาพกราฟิกสาหรบั เว็บเพจ หนา้ 195

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหสั 2204-21057.4 การออกแบบ Web Page การสรา้ ง Web Page ใหม้ ีความสวยงามต้องใชโ้ ปรแกรมสาหรบั การสรา้ งภาพกราฟิก เพอื่ ให้ได้ Web Page ทสี่ วยงาม เชน่ การออกแบบภาพ นาภาพถ่ายตกแตง่ แก้ไขความบกพร่องส่วนตา่ ง ๆของภาพ และการใช้ Effects ตา่ ง ๆ เชน่ สร้างตวั อักษรใหเ้ หมาะสมสาหรบั Web Pageการเลอื กภาพ การกาหนดขนาดภาพดังน้ี 7.4.1 การเลือกใชส้ สี าหรับการออกแบบ Web Page คอื การออกแบบภาพสาหรบัWeb Page นน้ั ตอ้ งควบคุมโทนสขี องภาพใหเ้ หมาะสมและการเลือกสแี ตล่ ะโทนสจี ะให้อารมณ์ภาพทีแ่ ตกตา่ งกันออกไป ท่สี าคญั ควรใชส้ ที ีด่ ูสบายตา ไมฉ่ ูดฉานรุนแรง สแี ตล่ ะสีควรมีความหมาย และสีควรเหมาะสมกับเน้อื หาที่แตกตา่ งกนั เชน่ สีแดงใหค้ วามรู้สึกดเู ร่าร้อน เซ็กซ่ี และกา้ วรา้ ว สเี หลอื งให้ความรสู้ ึกถึงความเป็นมิตร และความอบอ่นุ สนี า้ เงินและสีเขียวให้ความรู้สึกสบายตา เปน็ ต้น 7.4.2 ขนาดของภาพ คือภาพจะมีผลโดยตรงต่อผเู้ ข้ามาใช้งานเวบ็ ไซต์ถา้ มีภาพขนาดใหญ่จะทาให้การโหลดภาพนานเกินไปทาใหผ้ เู้ ขา้ ชมเวบ็ ไซตร์ อนานซึง่ อาจปดิ เวบ็ ไซต์น้ันทั้ง ๆ ยงั ไม่ได้เขา้ชม ดงั น้นั จึงจาเป็นต้องตดั ภาพออกเป็นภาพเลก็ ๆ เรยี งลาดับกอ่ นหลัง แล้วนาไปใชง้ านจริงในโปรแกรมสาหรบั สร้าง Web Page เช่น โปรแกรม Adobe Dreamweaver ตัวอยา่ งการตัดภาพเปน็ ภาพเลก็ ๆ ช่วยในการโหลดภาพเรว็ ข้ึน ดงั รปู ภาพ 7-19 ลักษณะภาพที่ถกู ตดั เปน็ ภาพเล็ก จะมี กรอบ ณ จุดท่ีตดั และบอกลาดบั ชอื่ ไฟลภ์ าพ เปน็ 01 รูปภาพ 7-19 การตัดภาพ ทม่ี า : อรทยั เลิศขุนทด (2559) 7.4.3 ความละเอยี ดของภาพ การกาหนดความละเอยี ดของภาพจะมีผลต่อขนาดของภาพถ้ามีความละเอียดของภาพมากจะทาให้การแสดงผลภาพบนเว็บไซต์ช้ากว่าภาพที่มีความละเอียดต่าการกาหนดความละเอียดให้ภาพสามารถทาได้ขณะบันทึกภาพ คือ คลิกเมนู File>Save for webดงั น้ีการระบายสีและภาพกราฟกิ สาหรับเวบ็ เพจ หนา้ 196

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหัส 2204-2105 1. การบันทึกไฟล์ คือ การบนั ทกึ ไฟล์ เพ่ือปรับเปลย่ี นความละเอยี ดของภาพ มขี ้ันตอนดงั นี้ (1) คลิกเมนู File > Save for web (2) ลักษณะภาพท่ีได้ (3) คลกิ ปุ่ม Save เพื่อบนั ทึกภาพเครอื่ งมอื สาหรับการเลือกภาพท่ตี ดั กาหนดประเภทของไฟล์ การบบี อดั เลอื กจานวนภาพในการเปรยี บเทยี บค่าที่ปรบั แตกตา่ ง ของสีคณุ ภาพของไฟล์ หรือจานวนสี ที่สามารถแสดงในภาพนั้นประเภทของไฟล์ และขนาดไฟลห์ ลงั จากบีบอดั แลว้ ตารางแสดงสที ้ังหมด รูปภาพ 7-20 การบนั ทึกไฟล์ ทม่ี า : อรทัย เลิศขนุ ทด (2559) (4) เลือก Folder เก็บภาพและกาหนดการบันทึกภาพเฉพาะภาพเท่านน้ั โดยเลือกรปู แบบ Image Only จากชอ่ ง Format และคลกิ ปุ่ม Save 2. การเลอื กประเภทไฟลภ์ าพสาหรับ Web Page คอื การเลอื กไฟลภ์ าพประเภทต่าง ๆทีส่ ามารถใช้งานบน Web Page เชน่ สว่ นขยาย .GIF .JPEG และ .PNG เนอื่ งจากแสดงขอ้ มลู สีได้ดแี ละมีขนาดไฟลท์ ่เี ล็ก โดยไฟล์แตล่ ะแบบเหมาะกับภาพมีลักษณะตา่ งกนั ดังนี้การระบายสแี ละภาพกราฟกิ สาหรับเว็บเพจ หนา้ 197

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 (1) .GIF ย่อมาจาก Graphics Interchange Format คือไฟล์ภาพท่จี ะลดทอนสไี ด้สงู สดุ 256 สเี ทา่ นนั้ เหมาะกบั ภาพทม่ี ีรายละเอียดไม่มาก เช่น Logo ภาพการต์ นู ต่าง ๆ ท่ีไมเ่ น้นลวดลายภาพแสดงภาพแบบพืน้ หลังทะลุ และบนั ทึกไฟลภ์ าพแบบเคล่อื นไหว ดงั รปู ภาพ 7-21 ตวั อย่างภาพแบบ .GIF ทเ่ี หมาะกบั กราฟิก รายละเอียดนอ้ ย ๆ และพน้ื หลงั แบบทะลุ รปู ภาพ 7-21 Graphics Interchange Format ท่มี า : อรทัย เลศิ ขุนทด (2559) (2) JPG และ JPEG ยอ่ มาจาก Joint Photographic Export Group คือ ไฟลภ์ าพที่แสดงสไี ดส้ งู สดุ ถงึ 16.7 ลา้ นสีเมอ่ื ต้องการแสดงภาพเหมือนจรงิ เชน่ ภาพวิวทวิ ทศั น์ ภาพคน ตัวอยา่ งภาพแบบ JPEG จะแสดงสไี ดอ้ ยา่ งสมจริง แต่ถ้าบบี อดั มากเกนิ ไป ภาพกจ็ ะสูญเสียรายละเอียดและความคมชัด รูปภาพ 7-22 Joint Photographic Export Group ทมี่ า : อรทัย เลศิ ขุนทด (2559) (3) PNG ย่อมาจาก Portable Network Graphics ไฟลภ์ าพทร่ี วมเอาคุณสมบัติของไฟลแ์ บบ .GIF และ .JPEG เขา้ ด้วยกันสามารถแสดงสีได้มากถึง 16.7 ล้านสี และบนั ทกึ ไฟลภ์ าพพ้ืนหลงั แบบพ้นื หลังทะลุได้ ตัวอยา่ งภาพแบบ .PNG สีคงรายละเอียดไวไ้ ด้ เหมอื นเดมิ และสามารถบันทกึ แบบพืน้ หลงั ทะลุ รูปภาพ 7-23 Portable Network Graphics ทม่ี า : อรทยั เลิศขนุ ทด (2559)การระบายสแี ละภาพกราฟกิ สาหรับเว็บเพจ หนา้ 198

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105 7.4.4 ส่วนประกอบสาคัญของ Web Page คอื การกาหนดรูปแบบของ Web Page ใหม้ สี ว่ นตา่ ง ๆ แยกออกจากกันอย่างชัดเจน เพอ่ื ลดความซบั ซ้อนในการเรยี กใช้งาน โดยโครงสร้างหลกั ที่นิยมใช้มีสว่ นประกอบ ดงั รปู ภาพ 7-24 Page Header หรือส่วนหวั เว็บลิงค์ (Link) เชอื่ มโยงระหวา่ ง Web Page Page Footerรูปภาพ 7-24 สว่ นประกอบสาคญั ของ Web Page ท่ีมา : อรทยั เลศิ ขนุ ทด (2559) 7.4.5 การใชเ้ ครื่องมือสาหรับการออกแบบ Web Page โดยขนั้ ตอนการออกแบบWeb Page มเี ครอ่ื งมอื ทเ่ี กยี่ วขอ้ ง 2 ตัว คือ Slice Tool และ Select Slice Toolซง่ึ เป็นขนั้ ตอนสาคัญสุดทา้ ยหลังจากออกแบบกราฟิก ดังน้ี 1. การใช้เครอ่ื งมอื Slice Tool คือ ตดั ภาพเปน็ ภาพเลก็ ๆ ขัน้ ตอนดงั น้ี (1) เปิดภาพท่ีตอ้ งการนาไปใชง้ านบน Web Page (2) คลิกเลือกเคร่อื งมือ แลว้ แดรกเมาส์คลมุ ภาพให้ไดข้ นาดทตี่ อ้ งการตดั ภาพเป็นสว่ น ๆ จะปรากฏกรอบรอบ ๆ ภาพท่ีถูกตัด (3) แดรกเมาสบ์ นภาพท่เี หลอื โดยเสน้ กรอบท่ีแดรกเมาสผ์ า่ นเกดิ เป็นเส้นติดกันพอดี (ถ้ามีช่องวา่ งเลก็ ๆ จะนับเป็นไฟล์ลาดบั ถัดมา) ดังรูปภาพ 7-25การระบายสีและภาพกราฟกิ สาหรับเวบ็ เพจ หนา้ 199

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105แดรกเมาสล์ ากให้ไดข้ นาดเหมาะสม ภาพที่ถกู ตัดมลี าดับชื่อไฟล์ทนั ที รูปภาพ 7-25 เคร่ืองมอื Slice Tool ตัดภาพ ทีม่ า : อรทัย เลศิ ขุนทด (2559) 2. การปรบั แตง่ Slice ดว้ ยเครื่องมือ Slice Select Tool คือ หลังจากตัดภาพแล้วพบวา่ เสน้ Slice ทีส่ ร้างไว้ยงั ไมเ่ รียบร้อย หรือสร้าง Slice ภาพมากเกนิ ไป สามารถใช้เครื่องมือในการย่อหรือขยายขอบเขตภาพได้ ข้ันตอนดังน้ี (1) คลกิ เครอื่ งมือ คลิกบนภาพที่ต้องการแก้ไข จะปรากฏเสน้ Slice ปรากฏข้ึนมาใหแ้ กไ้ ข (สีเส้นเปล่ยี นเป็นสนี ้าตาลสามารถคลิกปุ่มส่ีเหล่ยี มเพ่ือแก้ไข) (2) คลกิ เมาสท์ ่จี ุดส่ีเหล่ียมแดรกเมาส์ปรับแต่งเส้นขอบเขตได้ (3) ถ้าต้องการลบคลิกเมาส์บนเสน้ Slice แลว้ กดป่มุ ทีแ่ ป้นพมิ พเ์ พื่อลบSlice ของภาพเสน้ Slice จะหายไป 7.4.6 การออกแบบปุ่มลิงค์ คอื การออกแบบปมุ่ ลิงคเ์ พ่ือความสวยงามของ Web Pageโดยการอาศัยรูปแบบสาเรจ็ รูปที่กาหนดจากพาเลต Style ข้ันตอนดงั น้ี 1. สรา้ งไฟล์ใหม่ แลว้ เลือกเครือ่ งมือ วาดรูปสเี่ หล่ยี มมุมมน 2. เปดิ พาเลต Style แลว้ เลอื กชดุ สไตลแ์ บบ Web Style 3. คลกิ เลอื กรูปแบบปุ่มที่ตอ้ งการ 4. พิมพ์ขอ้ ความ “การออกแบบกราฟิก” บนปุ่มแล้วบันทึกไฟล์ ถ้าตอ้ งการปมุ่ สถานะแบบ Rollover ใหท้ าตามข้อ 3-4 อีกคร้ัง แลว้ บนั ทึกไฟล์การระบายสีและภาพกราฟกิ สาหรบั เวบ็ เพจ หนา้ 200

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหสั 2204-2105เปดิ พาเลต Style วาดรปู สเี่ หลีย่ มมมุ มน ลกั ษณะปมุ่ ท่ีได้ พิมพ์ข้อความหรอื เลือกลักษณะป่มุ ดงั น้ี รปู ภาพ 7-26 การออกแบบปุม่ ลงิ ค์ ทมี่ า : อรทัย เลิศขนุ ทด (2559) 7.4.7 การออกแบบ Page Header การออกแบบ Page Header สว่ นแรกท่ดี ึงดดู ความสนใจต่อผเู้ ข้าชมเว็บไซต์ เนอ่ื งจากเป็นสว่ นแรกทบ่ี อกถึงความหมาย ชอื่ หวั เว็บ และแสดงชอ่ื เจา้ ของWeb Page ขนั้ ตอนดังนี้ 1. สรา้ งไฟลใ์ หม่ขนาด 800x100 Pixels 2. คลิกเคร่อื งมือ Gradient Tool แล้วกาหนดค่า Option คลิกเลือก แลว้คลกิ เมาส์ซ้ายคา้ งไว้ลากเมาส์เพือ่ ไล่โทนสี เหลือง–สม้ ดังรูป 3. คัดลอกภาพ Logo วางมมุ ด้านซา้ ยของภาพ หนา้ 201การระบายสแี ละภาพกราฟกิ สาหรบั เวบ็ เพจ

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหัส 2204-2105 4. คลิก Add Layer Styles > เลือก Outer Glow 5. พิมพ์ชอื่ “วิทยาลัยการอาชพี ขอนแก่น” ใสเ่ สน้ ขอบและเงา แล้วคัดลอกภาพตกแต่งภาพวางด้านขวาของหัวเวบ็ ดงั รปู รปู ภาพ 7-27 ข้นั ตอนการออกแบบ Page Header ที่มา : อรทยั เลศิ ขนุ ทด (2559) 7.4.8 การสร้างปุ่มเมนู การสรา้ งปมุ่ เมนสู าหรับ Link ตา่ ง ๆ เพือ่ ความสวยงามแลว้ นาไปตกแตง่ Web Page เช่น สรา้ งป่มุ เมนูหนา้ หลักแล้วนาไปเชื่อมโยงไปยัง Link ตา่ ง ๆ ในโปรแกรมAdobe Dreamweaver หรอื นาภาพดังกล่าวประยุกตใ์ ช้ในงานเอกสารตา่ ง ๆ ในโปรแกรมอ่นื ๆเชน่ Microsoft Word, Microsoft Power Point ฯลฯ ข้นั ตอนดงั นี้ 1. สร้างไฟลภ์ าพขนาด 500x75 pixels (พ้ืนหลงั Transparent) 2. คลิกเครอ่ื งมือ Polygonal Lasso Tool วาดภาพ ดังนี้ 3. คลิกเมนู Select > Modify > Smooth กาหนดค่า 10 pixelsการระบายสีและภาพกราฟกิ สาหรบั เว็บเพจ หนา้ 202

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหสั 2204-2105 4. คลกิ เครอ่ื งมอื Gradient Tool เพ่ือไลโ่ ทน 3 สี แลว้ คลกิ เมาส์ลากไลโ่ ทนสแี ล้วกด + ดังรปู 5. พมิ พ์ข้อความ “หนา้ หลกั ” คลิก Add Layer Styles > BlendingOption ตกแต่งข้อความให้สวยงาม ดงั รูป 6. บนั ทกึ ไฟลน์ ามสกุล .GIF รูปภาพ 7-28 ขน้ั ตอนการสรา้ งปมุ่ เมนู ท่ีมา : อรทัย เลศิ ขุนทด (2559)สรปุ สาระสาคัญ เคร่ืองมือสาหรับระบายสแี บ่งออกเป็นกลมุ่ 2 กล่มุ คือ กลุ่มเครอ่ื งมอื การไล่โทนสี และเทสีเชน่ เครอ่ื งมือ Gradient Tool ไลโ่ ทนสีให้ภาพนาไปสร้างพื้นหลงั ใหภ้ าพตา่ ง ๆ สร้าง Effectsในการออกแบบภาพ และเคร่ืองมือ Paint Bucket Tool เทสีลงในขอบเขตพื้นทท่ี ่ีกาหนดไว้กล่มุ การวาดภาพและระบายสี คือ กลมุ่ เครื่องมอื สาหรบั การวาดและระบายสดี ว้ ยการใชเ้ มาสค์ ลกิเพือ่ วาดรูปแบบต่าง ๆ แบ่งเคร่อื งมือออกเป็น 4 ตวั เชน่ เคร่ืองมือ Brush Tool ระบายสีกาหนดรูปแบบของเส้นได้มากมาย มีความยืดหยุ่นในการใชง้ านกับภาพสูงสุด เครื่องมือ Pencil Toolสาหรบั การระบายสีเปน็ ภาพผลของการใชง้ านไดเ้ สน้ ทเ่ี ป็นเสน้ แขง็ เคร่ืองมือ Color ReplacementTool การระบายสีทับลงไปบนพ้ืนผวิ เพือ่ เปลีย่ นสีของจดุ ท่ีนาเมาส์คลิกเลือกเครอื่ งมอื Mixer BrushTool สามารถเลือกกาหนดรูปแบบได้มากมาย และได้เส้นทมี่ ีสอี ่อนหรอื นุ่มนวล กลุม่ เครื่องมือการระบายสีพเิ ศษ คอื การเลือกใช้งานได้ 2 แบบ เช่น เคร่ืองมือ History Brush Tool เรยี กคนื ภาพกอ่ นหน้าการปรับแต่งคนื มา ซงึ่ มลี ักษณะคล้ายกบั การใช้คาส่งั Undo แตเ่ รียกใช้การทางานเฉพาะจดุได้ เครอื่ งมือ Art History Brush Tool เครอ่ื งมือทใ่ี ช้สาหรับการเปล่ยี นแปลงภาพถา่ ยธรรมดาให้มีรูปแบบเหมือนกับงานศิลปะ สาหรบั กลุม่ เครอื่ งมือการลบ เช่น เครือ่ งมือ Eraser Tool ลบภาพการระบายสีและภาพกราฟกิ สาหรับเว็บเพจ หน้า 203

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105ใน Layer ปกติ โดยภาพที่แดรกเมาสผ์ ่านจะหายไป เคร่ืองมอื Background Eraser Tool สาหรับลบภาพใน Layer พืน้ หลังถกู เปลย่ี นเป็น Layer ปกติจดุ ที่ถูกลบทง้ิ เปลีย่ นเปน็ พ้ืนหลังแบบโปร่งใสเครือ่ งมือ Magic Eraser Tool คลกิ เมาสเ์ ลอื กชว่ งสที ่ีต้องการลบสที ีเ่ หมอื นกันหรอื ใกล้เคียงกันมากที่สดุ การออกแบบ Web Page ต้องคานงึ ถึงรายละเอียดต่าง ๆ เชน่ การเลือกใชส้ สี าหรับการออกแบบ Web Page ขนาดของภาพ ความละเอยี ดของภาพ การบนั ทึกไฟล์ และนารายละเอยี ดสร้างองคป์ ระกอบของ Web Page เพอื่ ความเหมาะสมตามส่วนประกอบสาคัญของ Web Page และปฏบิ ัติการสร้าง Web Page ตามข้นั ตอนการสรา้ งเวบ็ ไซต์ โดยใชเ้ ครือ่ งมือสาหรบั การออกแบบWeb Page การออกแบบปุ่มลงิ ค์ตา่ ง ๆ การออกแบบ Page Header และการเลือกไฟล์ภาพสาหรับWeb Pageการระบายสีและภาพกราฟกิ สาหรับเว็บเพจ หน้า 204

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหสั 2204-2105 แบบฝกึ หดั ทา้ ยหนว่ ยการเรยี นร้ทู ี่ 7 เรอื่ ง การระบายสแี ละภาพกราฟิกสาหรบั เว็บเพจคาส่งั จงตอบคาถามตอ่ ไปนี้ใหส้ มบรู ณท์ ี่สุด 1. กล่มุ เครื่องมือระบายสี มีอะไรบา้ ง อธบิ าย.......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................... ...................................................................................................................................................................... 2. กลุ่มเคร่อื งมือในการลบรูปภาพ มอี ะไรบ้าง อธิบาย................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................ 3. จงอธิบายวิธีการเติมสแี ละ Pattern ให้ภาพดว้ ยคาส่ัง Fill................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................ 4. จงบอกวิธกี ารเลอื กใชส้ สี าหรบั การออกแบบ Web page................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................การระบายสแี ละภาพกราฟกิ สาหรับเว็บเพจ หนา้ 205

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหสั 2204-2105 ใบงานทา้ ยหนว่ ยการเรียนรู้ท่ี 7เรื่อง การระบายสีและภาพกราฟกิ สาหรับเว็บเพจจดุ ประสงค์ 1. ระบายสีโดยการใชก้ ลมุ่ เครือ่ งมือระบายสีได้ 2. ลบรปู ภาพโดยใช้เคร่ืองมอื กลุ่มการลบได้ 3. เตมิ สีและ Pattern ให้ภาพด้วยคาส่ัง Fill ได้ 4. ออกแบบ Web Page ได้ขั้นตอนการปฏบิ ัติงาน 1. แบ่งนกั เรียนออกเปน็ กลุม่ กลมุ่ ละ 2 คน ศึกษาเอกสารประกอบการเรียน 2. ชมการสาธติ แนะนาการใช้โปรแกรม Adobe Photoshop โดยครผู ู้สอน 3. นักเรยี นฝึกปฏบิ ตั ิตามหวั ขอ้ ท่มี อบหมายคาช้แี จง จงปฏิบัติตามคาส่ังตอ่ ไปน้ีให้สมบรู ณ์1. ออกแบบหวั Web Page จานวน 2 ภาพ ข้อกาหนดในการสรา้ งไฟล์ภาพมดี งั ต่อไปนี้ขนาดพน้ื ท่ใี นการทางานไฟลภ์ าพ กว้าง 1,000 Pixels สงู 140 Pixelsความละเอียดของภาพ (Resolution) 72 Pixelsเมอื่ เรยี บร้อยแลว้ ให้บนั ทกึ ไฟล์ชือ่ “ใบงานหนว่ ยท่ี7-1.jpg” และ “ใบงานหนว่ ยที่7-2.jpg”จากน้ันนาภาพที่บันทึกไปใสล่ งในโปรแกรม Microsoft Word แล้วบรรยายแนวคิดในการออกแบบความยาวประมาณ 5-7 บรรทดั กาหนดแบบอกั ษรเปน็ “TH Sarabun New” ขนาด 16 Pointภาพตวั อย่างการออกแบบหัว Web Pageการระบายสแี ละภาพกราฟิกสาหรับเวบ็ เพจ หนา้ 206

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-21052. จงสร้างแผ่นพับแนะนาสถานศึกษา (หนา้ แรกของแผน่ พบั ) 1 หนา้ บนั ทกึ ไฟล์ชอ่ื“ใบงานหนว่ ยที่7-3.jpg”ข้อกาหนดในการสร้างไฟล์ภาพมดี งั ตอ่ ไปนี้ขนาดพ้ืนท่ใี นการทางานไฟลภ์ าพ กว้าง 29 cm สูง 21 cmความละเอยี ดของภาพ (Resolution) 150 Pixelsโหมดสขี องภาพ RGBพ้นื หลงั Whiteภาพตัวอย่างการออกแบบแผ่นพับการระบายสีและภาพกราฟกิ สาหรบั เว็บเพจ หน้า 207