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

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟกิ รหัส 2204-2105 หนว่ ยการเรียนรูท้ ่ี 3ความรเู้ บ้ืองต้นเก่ียวกบั โปรแกรมสรา้ งภาพกราฟิก สาระสาคญั การเปดิ ไฟล์ภาพหรือการสรา้ งไฟล์ภาพใหม่ในโปรแกรม Adobe Photoshop โปรแกรมสามารถแก้ไข ปรบั แต่งภาพด้วยเครื่องมือของโปรแกรม เครือ่ งมือทุกตัวมีตวั ชว่ ยสนบั สนนุ การทางานการกาหนดรูปแบบ Option Bar ใหเ้ หมาะสมกบั การใชง้ าน และบนั ทกึ ค่า Option Bar ดงั กล่าวไวใ้ ช้ในภายหลงั ได้ การเรียกใชง้ านง่ายเม่อื แก้ไขภาพแล้วตอ้ งการบนั ทึกไฟลส์ ามารถบนั ทึกได้ตามทผี่ ใู้ ช้กาหนด เลอื กรูปแบบตามความเหมาะสมกับไฟล์ภาพใหต้ รงวตั ถปุ ระสงค์การนาภาพไปใช้งานดา้ นต่าง ๆ และเพ่ือความสะดวกในการนาภาพกลับมาแก้ไขไดใ้ หม่อีกคร้ัง เชน่ การเคลือ่ นย้ายไฟล์ภาพไปใชง้ านยงั คอมพวิ เตอร์อ่ืน ๆ เครื่องมือสามารถจัดวางตาแหนง่ ตามผู้ใชก้ าหนด สาระการเรยี นรู้ 1. ความรูเ้ บอ้ื งต้นเกย่ี วกับโปรแกรม Adobe Photoshop 1.1 การเรียกใช้โปรแกรม Adobe Photoshop 1.2 สว่ นประกอบของโปรแกรม Adobe Photoshop 2. Menu Bar 3. Option Bar 4. วธิ กี ารเรยี กใชพ้ าเลต 4.1 การเปิดพาเลต 4.2 การปดิ พาเลต 4.3 การย่อกรอบพาเลต 5. กล่องเครื่องมือ 5.1 การปรบั แต่งกลอ่ งเครื่องมอื 5.2 การเรียกใชก้ ล่องเครื่องมือ 5.3 กลมุ่ เครื่องมือของโปรแกรม Adobe Photoshop 6. การสร้างไฟลภ์ าพใหม่และการบนั ทึกไฟล์ภาพ 6.1 การสร้างไฟลภ์ าพใหม่ 6.2 การบนั ทึก Fileความร้เู บือ้ งตน้ เกี่ยวกับโปรแกรมสรา้ งภาพกราฟกิ หนา้ 47

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 6.3 การเปิดไฟล์ภาพ 6.4 การปดิ ไฟลภ์ าพ 6.5 การออกจากโปรแกรมจดุ ประสงค์การเรียนรู้เมือ่ ศึกษาและปฏบิ ตั ิตามเอกสารประกอบการเรียน หนว่ ยการเรยี นรู้ที่ 3 แล้วนักเรียนสามารถ1. อธบิ ายความรเู้ บื้องตน้ เกีย่ วกบั โปรแกรม Adobe Photoshop ได้ 1.1 เรยี กใช้โปรแกรม Adobe Photoshop ได้ 1.2 อธบิ ายส่วนประกอบของโปรแกรม Adobe Photoshop ได้2. กาหนดคา่ Option Bar ได้3. อธบิ ายรปู แบบการทางาน Menu Bar ได้4. อธบิ ายข้นั ตอนการเรยี กใช้พาเลตได้ 4.1 เปิดพาเลตได้ 4.2 ปดิ พาเลตได้ 4.3 ยอ่ กรอบพาเลตได้5. เรียกใช้กลอ่ งเครอ่ื งมือได้ 5.1 ปรบั แตง่ กล่องเคร่ืองมือได้ 5.2 เรยี กใช้กลอ่ งเคร่อื งมือได้ 5.3 เรยี กใช้กลุม่ เคร่ืองมอื ของโปรแกรม Adobe Photoshop6. สรา้ งไฟลภ์ าพใหมแ่ ละบนั ทกึ ไฟล์ภาพได้ 6.1 สรา้ งไฟลภ์ าพใหม่ได้ 6.2 บนั ทึก File ได้ 6.3 เปิดไฟลภ์ าพได้ 6.4 ปิดไฟล์ภาพได้ 6.5 ออกจากโปรแกรมได้ความรเู้ บ้ืองตน้ เกี่ยวกับโปรแกรมสรา้ งภาพกราฟิก หนา้ 48

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 แผนภมู ิเนอื้ หาความรู้เบอ้ื งตน้ เก่ียวกบั โปรแกรมสรา้ งภาพกราฟิกความรเู้ บ้อื งต้นเกยี่ วกับโปรแกรม กลอ่ งเครอื่ งมอืAdobe Photoshop 1. การปรับแต่งกล่องเครื่องมือ 2. การเรยี กใช้กล่องเคร่ืองมือ 1. การเรยี กใชโ้ ปรแกรม Adobe 3. กลุ่มเคร่ืองมอื ของโปรแกรมPhotoshop Adobe Photoshop 2. ส่วนประกอบของโปรแกรมAdobe Photoshop การสรา้ งไฟล์ภาพใหม่และการบนั ทึก ไฟลภ์ าพ Menu Bar 1. การสร้างไฟลภ์ าพใหม่ Option Bar 2. การบนั ทกึ File 3. การเปิดไฟล์ภาพ วิธีการเรียกใชพ้ าเลต 4. การปิดไฟล์ภาพ 1. การเปดิ พาเลต 5. การออกจากโปรแกรม 2. การปดิ พาเลต 3. การยอ่ กรอบพาเลตความรเู้ บอ้ื งตน้ เก่ยี วกบั โปรแกรมสรา้ งภาพกราฟิก หนา้ 49

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 หน่วยการเรียนร้ทู ่ี 3ความรเู้ บอ้ื งตน้ เก่ยี วกบั โปรแกรมสร้างภาพกราฟกิ โปรแกรม Adobe Photoshop CS6 มกี ารปรับปรงุ รูปแบบใหม่ คาสั่งท่ีใช้งานเป็นประจานั้นจะสร้างเปน็ พาเลตใหมเ่ พื่อเพิ่มความสะดวกในการเรยี กใชง้ าน การปรบั แต่งแก้ไขรูปภาพ หนา้ ต่างวนิ โดวข์ องภาพทเ่ี ปดิ ใชง้ านไดส้ ะดวกข้ึน สามารถเปดิ ไฟล์ภาพพร้อมกันได้หลายไฟล์ เพื่อเพิ่มความสะดวกในการแกไ้ ขภาพ การคัดลอกภาพ และมเี ครื่องมอื ใหม่อานวยความสะดวกในการทางานดา้ นตา่ ง ๆ3.1 ความรูเ้ บ้ืองตน้ เกี่ยวกับโปรแกรม Adobe Photoshop CS6 ความสามารถของ Photoshop มอี ยู่มากมายอยา่ งท่ีเรานึกไม่ถึง แตท่ ี่เปน็ ความสามารถหลักของตวั โปรแกรมจะถูกแบ่งออกเป็น 3 เร่ือง คือ เอาไว้แต่งภาพถ่าย ออกแบบงานกราฟกิ และใช้สาหรบั งานกราฟิกและตกแตง่ ภาพสาหรบั เว็บไซต์ งานตกแต่งภาพ Photoshop สามารถตกแตง่ แก้ไขสสี ันในภาพถา่ ย งานรีทชั ลบร้วิ รอยส่วนเกินออกจากภาพ หรอื จะเป็นงานตกแต่งภาพให้ดูดีมีเทคนิคพิเศษ อาทิ เปลี่ยนภาพธรรมดาให้กลายเป็นภาพสนี า้ งานออกแบบกราฟิก ในกรณีทต่ี อ้ งการเป็นนักกราฟกิ สายการออกแบบ เชน่ ออกแบบโลโก้ทานามบตั ร โบรชัวร์ ปฏทิ นิ หรือโปสเตอรไ์ ปจนถึงการวาดภาพกราฟกิ หรือการสร้างตัวอักษร งานกราฟิกสาหรับเว็บไซต์ เปน็ ความสามารถท่ถี ูกใสม่ าเพอื่ เอาใจชาวเวบ็ โดยเฉพาะไม่ว่าจะเป็นการแตง่ ภาพให้นาไปใชง้ านบนเวบ็ ไซตไ์ ดส้ ะดวก หรือการสรา้ งส่วนประกอบต่าง ๆ สาหรบัเว็บไซต์ เช่น ปมุ่ กดทโี่ ต้ตอบกับผูใ้ ช้งานได้ นอกจากน้นั ยังสามารถสร้างภาพเคลอ่ื นไหวท่ีเป็นแอนเิ มชน่ั เลก็ ๆ หรือสร้างแกลเลอร่รี ปู ภาพขน้ึ โชว์บนเว็บไซต์ได้อกี ด้วย การสร้างภาพกราฟิกโดยใช้โปรแกรม Adobe Photoshop CS6 ควรคานงึ ถึงทรพั ยากรของเครื่องคอมพวิ เตอร์ด้วย เพอ่ื ใหก้ ารสร้างงานกราฟิกเปน็ ไปด้วยความสะดวก แต่ถา้ สเปคเครอื่ งคอมพวิ เตอรต์ ่า จะทาให้ไมไ่ ด้คุณภาพเทา่ ทค่ี วร ดังน้ัน สเปคเครื่องคอมพวิ เตอรท์ ่เี หมาะสมกับโปรแกรม Adobe Photoshop CS6 ควรเป็นดังน้ี 1. ความเร็วของซีพยี ู (CPU) ข้ันต่า 1.8 GHz หรอื มากกว่า 2. ระบบปฏิบัติการ Windows XP Service Pack 2 (แนะนาให้ใช้ Service Pack 3) หรือWindows Vista หรือ Windows 7 และ Windows 8 3. หน่วยความจา (Ram) 1 GBความรเู้ บ้ืองตน้ เกี่ยวกบั โปรแกรมสรา้ งภาพกราฟกิ หน้า 50

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหัส 2204-2105 4. พ้ืนทว่ี ่างในฮาร์ดดิสก์ 1 GB สาหรบั ตดิ ตั้งโปรแกรม และควรมีพน้ื ทว่ี ่างสาหรับการทางานอกี อยา่ งน้อย 1 GB 5. ความละเอียดของจอภาพขั้นต่า 1,024x768 (แนะนาให้ใชท้ ี่ 1,280x800) พรอ้ มการ์ดจอ16-bit (Video Card) หากใช้ Photoshop Extended และใชง้ านภาพ 3D ควรมีคณุ สมบัตขิ องCPU-accelerated ท่ีทางานรว่ มกับ Shader Model 3.0 และใชง้ านกบั OpenGL 2.0 6. ไดรว์ DVD-ROM สาหรับใส่ DVD ตดิ ต้ังโปรแกรม 7. โปรแกรม QuickTime 7.2 ขน้ึ ไป สาหรบั การทางานกับมัลตมิ ีเดยี เช่น วิดีโอ 8. การเช่อื มต่ออินเทอรเ์ น็ต ถ้าจาเปน็ ต้องเข้าไปใชบ้ รกิ ารออนไลน์ เช่น Help หรือดาวนโ์ หลดปลก๊ั อนิ เป็นตน้ 3.1.1 การเรียกใชโ้ ปรแกรม Adobe Photoshop การเรียกใชง้ านมวี ธิ กี ารหลายวิธีเช่นขัน้ ตอนการเรียกใช้จากหนา้ ต่างโปรแกรมท่ปี ุ่ม ขน้ั ตอนดังน้ี 1. คลกิ เลือกปุ่ม หรอื ปุม่ Start 2. เลอื กโปรแกรมทง้ั หมด (All Program) 3. คลิกเลือกโปรแกรม 4. เข้าสหู่ น้าจอโปรแกรม Adobe Photoshop รูปภาพ 3-1 การเรยี กใช้โปรแกรม Adobe Photoshop ทมี่ า : จากหน้าจอคอมพวิ เตอร์ความร้เู บอ้ื งตน้ เกย่ี วกับโปรแกรมสรา้ งภาพกราฟิก หนา้ 51

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหัส 2204-2105 3.1.2 สว่ นประกอบของโปรแกรม Adobe Photoshop หนา้ ต่างการทางานของโปรแกรมโดยแบง่ หมวดหมู่ของกล่องเคร่ืองมือตา่ ง ๆ การแบ่งพน้ื ทก่ี ารทางาน Workspace รูปแบบเคร่อื งมือการทางานทห่ี ลากหลาย ซึ่งประกอบเป็นหน้าต่างโปรแกรม Adobe Photoshop ดงั รูปภาพ 3-2 รปู ภาพ 3-2 ส่วนประกอบของหนา้ จอโปรแกรม Adobe Photoshop ทมี่ า : จากโปรแกรม Adobe Photoshop CS61. PS Button ปุ่มควบคุมโปรแกรม Adobe Photoshop2. Menu Bar รวบรวมคาสง่ั ท่ใี ชภ้ ายในโปรแกรม3. Toolbox รวบรวมเคร่ืองมอื สาหรบั การทางานตกแตง่ ภาพและสรา้ งสรรคง์ านกราฟิก4. Option Bar เปน็ สว่ นทใ่ี ช้กาหนดคุณสมบตั ิเพิ่มเติมของเครอ่ื งมือที่กาลงั เลอื กทางานอยู่5. Control Button ปมุ่ ควบคมุ หนา้ ต่างโปรแกรม Adobe Photoshop6. Palette แถบหนา้ ต่างท่ีมคี วามสัมพนั ธก์ บั งานในขณะนัน้7. Title Bar แสดงชื่อภาพและรายละเอยี ดของภาพแบบย่อ8. Document Window ไฟล์ภาพท่เี ปดิ ใชง้ านปัจจุบนั9. Status Bar แถบแสดงสถานะ แสดงสถานภาพของรปู ภาพความรเู้ บอ้ื งตน้ เกย่ี วกับโปรแกรมสรา้ งภาพกราฟิก หน้า 52

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหัส 2204-21053.2 Menu Bar ชุดเมนูคาส่ังทใ่ี ชจ้ ดั การไฟลภ์ าพที่เปิดใช้งานการปรับแตง่ แกไ้ ขภาพในโปรแกรมAdobe Photoshop โดยแบง่ กล่มุ เมนูคาส่งั การทางานดังตารางตารางที่ 3-1 ชุดคาสงั่ Menu Bar ในโปรแกรม Adobe Photoshop ชอ่ื เมนู หน้าที่ File ทางานเก่ียวกับไฟล์ภาพ เชน่ การเปดิ ไฟล์ และปดิ ไฟล์ Edit ปรบั แตง่ ภาพในรปู แบบตา่ ง ๆ เช่น การคัดลอก การวาง รวมถงึ การปรบั แตง่ ค่าเบื้องต้นของโปรแกรม เชน่ ระบบการจดั โหมดสี Image ชดุ คาสงั่ ที่ใชจ้ ดั การภาพ เชน่ การแก้ไขความสวา่ ง หรอื สีภาพใหส้ มดุลมากย่ิงข้ึน การปรบั ขนาดของภาพ และการกาหนดพน้ื ทีก่ ารทางานในส่วนของภาพ Layer จดั การกับ Layer ของภาพ เชน่ การสร้าง Layer ใหม่ การรวม Layer การแปลง Layer และการจัดการเกี่ยวกับ Layer ภาพนัน้ ๆ Type จดั การเก่ียวกบั ตวั อักษร เชน่ การจดั รูปแบบข้อความ การสร้างขอ้ ความแบบ เสน้ Path และเปล่ยี นรูปแบบข้อความแบบ Shape Select จัดการกบั พนื้ ทภ่ี าพทเี่ ลือกไว้ มกั ใชร้ ่วมกบั กล่องเครื่องมอื Filter ชุดคาสงั่ สาหรับแปลงภาพให้มีรปู แบบทีน่ า่ สนใจ View กาหนดมุมมองการแสดงภาพในรปู แบบตา่ ง ๆ เช่น การขยายดภู าพใกล้ ๆ Window เลอื กแสดงพาเลตที่ใชใ้ นการทางาน รวมถงึ การกาหนดรูปแบบ การแสดงหน้าต่าง วนิ โดวใ์ นรูปแบบต่าง ๆ Help แสดงความช่วยเหลอื รายละเอียดการใช้งานโปรแกรมรปู แบบตา่ ง ๆ3.3 Option Bar Option Bar คอื แผงควบคุมเครื่องมือ ซึ่งจะมีรูปแบบแตกตา่ งกันไปตามเครื่องมือท่เี ลอื กใช้งานขณะนั้น โดยการทางานสว่ นใหญ่จะมีการปรบั แต่งใหเ้ หมาะสมกบั การทางานในแตล่ ะเคร่ืองมือน้นั ๆ เช่น การใช้เครอ่ื งมือ Brush Tool ดงั รูปภาพ 3-3 รปู ภาพ 3-3 Option Bar ของ Brush Tool หนา้ 53 ทม่ี า : จากโปรแกรม Adobe Photoshop CS6ความรเู้ บอ้ื งตน้ เกยี่ วกบั โปรแกรมสรา้ งภาพกราฟิก

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 การบนั ทึกคา่ การปรบั แตง่ ของเครื่องมือสามารถบันทกึ ลักษณะของเครื่องมอื ที่ใช้เปน็ ประจาเชน่ ความฟงุ้ ของเสน้ ขอบเครื่องมือ Brush Tool ไวใ้ ช้ในภายหลัง ขัน้ ตอนดงั น้ี 1. ลักษณะของ Option Bar เมอ่ื เลือกใชเ้ ครือ่ งมอื 2. กาหนดรูปแบบเครือ่ งมือท่ีต้องการใช้ภายหลัง 3. คลิกเพ่อื บนั ทกึ ค่ามหี น้าต่างยนื ยันการบันทกึ กดปุม่ OK 4. รูปแบบเคร่อื งมอื ท่บี นั ทึกแล้ว รปู ภาพ 3-4 การบันทึกค่าการปรบั แตง่ ของเคร่ืองมอื Brush Tool ทมี่ า : จากโปรแกรม Adobe Photoshop CS63.4 วิธกี ารเรยี กใช้พาเลต (Palette) พาเลต (Palette) คอื หนา้ ตา่ งเพม่ิ ความสะดวกประกอบการทางานร่วมกบั เครือ่ งมือต่าง ๆแตล่ ะพาเลตมีรปู แบบหนา้ ทีก่ ารทางานแตกตา่ งกนั เชน่ พาเลต Color ใช้สาหรับเลือกสีพน้ื หรือสีเส้นพาเลต History บนั ทกึ การทางานทผี่ า่ นมาเพอื่ กลับไปคาสัง่ กอ่ นหนา้ กรณที ต่ี ้องการการทางานชดุ เกา่พาเลต Info ใช้สาหรับแสดงขอ้ มลู พาเลต Layer ใช้แสดงลาดบั ภาพและข้นั ตอนการทางานเหมอื นการวางหนงั สอื ซ้อนกันหลายเล่ม พาเลต Navigator กาหนดการแสดงภาพและการยอ่ หรือขยายภาพโดยพาเลตทุกพาเลตมวี ิธกี ารเรียกใช้เหมือนกัน เชน่ วธิ กี ารเรยี กใชพ้ าเลต Layer ดงั น้ีความรเู้ บ้อื งต้นเก่ียวกับโปรแกรมสร้างภาพกราฟกิ หน้า 54

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหสั 2204-2105 3.4.1 การเปดิ พาเลต คอื การเปดิ ใชง้ านพาเลตตา่ ง ๆ ดงั น้ี 1. การเรยี กใชพ้ าเลตจากเมนู Window เช่น วิธกี ารเรยี กใช้ พาเลต Layerคลิกเมาสท์ ่ีเมนู Window > Layers รูปภาพ 3-5 พาเลต Layer ท่มี า : จากโปรแกรม Adobe Photoshop CS6 พาเลตใดทถี่ ูกเปิดใช้งานอยู่ในปัจจุบนั นน้ั จะมีเคร่ืองหมาย อยหู่ นา้ คาส่งั เมนู ถ้าไม่ต้องการพาเลตดังกล่าวให้ทาตามขัน้ ตอนการเรียกใช้พาเลตซา้ อีกครั้งพาเลตนนั้ จะหายไป 2. กดคียล์ ดั จากแปน้ พมิ พ์ เช่น กด เพื่อเปิดพาเลต Layer เป็นตน้ 3. การเรียกใชพ้ าเลตทซ่ี อ้ นกนั อย่ซู ่งึ อาจจะอย่ใู นกลุ่มเดยี วกนั ดงั รูปภาพ 3-6 คลกิ ช่อื พาเลตทซี่ ้อนกนัไอคอนพาเลตที่ปิด รปู ภาพ 3-6 การเรียกใช้พาเลตทซ่ี อ้ นกัน หน้า 55 ทม่ี า : จากโปรแกรม Adobe Photoshop CS6ความรู้เบ้อื งตน้ เกยี่ วกบั โปรแกรมสร้างภาพกราฟกิ

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหสั 2204-2105 4. คลิกเปิด/ปิดพาเลตจากไอคอนท่ีแสดงอยบู่ นแถบพาเลตที่พับเกบ็ ไว้คลิกเปดิ จากไอคอนทีแ่ สดงอยู่ รูปภาพ 3-7 คลกิ เปดิ /ปดิ พาเลตจากไอคอน ทม่ี า : จากโปรแกรม Adobe Photoshop CS63.4.2 การปดิ พาเลต คือ การปิดพาเลตหรือยกเลกิ พาเลตต่าง ๆ ดังนี้ 1. เลือกเมนู Window > ชื่อพาเลตทเี่ ปิดอยู่ เชน่ การปดิ พาเลต Layer รปู ภาพ 3-8 การปิดพาเลต Layer หน้า 56 ที่มา : จากโปรแกรม Adobe Photoshop CS6ความรเู้ บ้อื งต้นเกีย่ วกบั โปรแกรมสร้างภาพกราฟกิ

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหสั 2204-21052. คลิกขวาบนแถบช่อื พาเลตแลว้ เลอื ก Close คลกิ ปิดเฉพาะพาเลตนี้ หรอื คลิกปดิ ท้ังกลุ่ม รูปภาพ 3-9 คลิกขวาบนแถบชือ่ พาเลตทีม่ า : จากโปรแกรม Adobe Photoshop CS63. คลกิ ทเ่ี มนูของพาเลต แลว้ เลือก Close ดงั รูปภาพ 3-10 คลิกเมนู รูปภาพ 3-10 คลกิ เมนูของพาเลต หนา้ 57 ที่มา : จากโปรแกรม Adobe Photoshop CS6ความรเู้ บ้อื งตน้ เกย่ี วกับโปรแกรมสร้างภาพกราฟกิ

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหัส 2204-2105 3.4.3 การยอ่ กรอบพาเลต คือ การเรียกใช้งานพาเลตใดแล้วหากตอ้ งการปิดพาเลตดงั กลา่ วหรอื ตอ้ งการย่อหน้าต่างพาเลตเพ่อื เพ่มิ พนื้ ท่ีการแสดงภาพ และขยายกลบั คืนเมื่อต้องการเรียกใช้ เช่นคลิกเมาส์ เม่ือต้องการย่อพาเลต ดงั รูปภาพ 3-11 คลิกเพื่อย่อพาเลต รปู ภาพ 3-11 การยอ่ กรอบพาเลต ท่ีมา : จากโปรแกรม Adobe Photoshop CS63.5 กล่องเครือ่ งมอื (Toolbox) คือ ชุดกล่องเคร่ืองมือที่ใชจ้ ดั การไฟลภ์ าพทสี่ รา้ งขึ้นในหนา้ ตา่ งโปรแกรม วิธีการเรยี กใช้คลกิ เมาส์ทีเ่ มนู Windows > Tools 3.5.1 การปรบั แตง่ กล่องเครื่องมือ สามารถปรบั แต่งกล่องเครอื่ งมอื ดงั รูปภาพ 3-12 คลิกเพอ่ื แสดงแถบเครอื่ งมอื 2 แถว คลิกเพือ่ แสดงแถบเคร่อื งมือ 1 แถว ลักษณะของแถบเคร่ืองมอื 2 แถว ลกั ษณะของแถบเคร่อื งมอื 1 แถว รปู ภาพ 3-12 กล่องเครื่องมือท่ีมา : จากโปรแกรม Adobe Photoshop CS6ความรู้เบื้องตน้ เกย่ี วกับโปรแกรมสร้างภาพกราฟกิ หน้า 58

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหัส 2204-2105 การรวมกล่องเคร่ืองมือกับพาเลตสามารถนาเมาส์คลิกท่ีกล่องเคร่ืองมือแล้วกดเมาส์ค้างไว้ดงึกลอ่ งเครือ่ งมือมาวาง ณ มมุ ด้านซา้ ยของพาเลตแลว้ ปล่อยเมาส์ ดงั รปู ภาพ 3-13คลิกเมาส์ท่ีแถบเครอื่ งมอื พาเลตและแถบเครือ่ งมือแล้วดึงมาปล่อยทพ่ี าเลต ท่ีอยู่รวมกัน รปู ภาพ 3-13 การรวมกล่องเครื่องมือกบั พาเลต ท่มี า : จากโปรแกรม Adobe Photoshop CS6 3.5.2 การเรียกใช้กล่องเคร่ืองมือ คือ การเรียกใช้เคร่ืองมือต่าง ๆ ในกลุ่ม ซ่ึงมีกลุ่มเครือ่ งมอื ย่อยอีกสังเกตจากสัญลกั ษณ์รูปสามเหล่ยี มสดี ามุมด้านล่างของเครื่องมือแตล่ ะตวั จะสามารถคลิกเมาสค์ า้ งไว้เพือ่ เลอื กเคร่ืองมอื ย่อยตา่ ง ๆ ในกลุ่มได้ ดงั รูปภาพ 3-14 คลกิ เมาส์คา้ งไว้แลว้ เลอื กเครื่องมอื ยอ่ ยทตี่ อ้ งการ เครื่องมอื ทีถ่ กู เรียกใชอ้ ยู่ในปัจจบุ นั จะมีสเี่ หลยี่ มดาหน้ารูปเครอ่ื งมือนั้นสัญลักษณ์รปู สามเหล่ยี มสีดา รูปภาพ 3-14 การเรียกใช้กล่องเครอื่ งมือ ท่มี า : จากโปรแกรม Adobe Photoshop CS6ความร้เู บอื้ งต้นเกีย่ วกบั โปรแกรมสร้างภาพกราฟกิ หนา้ 59

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหสั 2204-2105การเรียกใช้เครื่องมือดว้ ยวธิ ีการกดปุม่ บนแปน้ พมิ พ์เปน็ อีกวิธกี ารหน่งึ ทน่ี ิยมใช้โดยผูใ้ ช้ทมี่ คี วามชานาญนยิ มใช้วิธดี ังกล่าวเนอ่ื งจากสามารถใช้คาสั่งไดร้ วดเรว็ ไม่ยุ่งยากลดขัน้ ตอนการเรยี กใช้คาสง่ั ที่ย่งุ ยากเปน็ การกดปุ่มง่าย ๆ บนแป้นพิมพร์ ว่ มกบั ปมุ่ การเรยี กใชค้ าสงั่ ใด ๆเรียกใชจ้ ากตัวอักษรท่แี สดงอยู่ดา้ นหลังชอ่ื ของเครื่องมือแต่ละตัว ข้ันตอนดังนี้ สญั ลกั ษณ์แสดงว่าเป็น ตัวอกั ษร คอื Shortcut สาหรบั เครือ่ งมือทเี่ ลอื กใช้อยู่ เรียกใชเ้ ครอ่ื งมือในกลมุ่ น้ี รูปภาพ 3-15 การเรียกใช้กลอ่ งเครอ่ื งมอื บนแป้นพิมพ์ ที่มา : จากโปรแกรม Adobe Photoshop CS6การเรยี กใชป้ มุ่ ท่ีแปน้ พิมพ์ กดปุ่ม คา้ งไว้ แล้วตามดว้ ยตัวอกั ษรทีเ่ ปน็ ปมุ่ของเครื่องมอื ในกลมุ่ ท่ีตอ้ งการ เช่น กดปมุ่ ค้างไว้แล้วกดตัวอกั ษร ทแี่ ปน้ พมิ พ์หมายถงึ การเรยี กใชเ้ คร่ืองมือ Rectangular Marquee Tool ถ้ากดซ้าอกี คร้งั จะเรยี กใช้เครื่องมือElliptical Marquee Tool3.5.3 กลุ่มเคร่ืองมือของโปรแกรม Adobe Photoshop คอื เคร่ืองมือต่าง ๆ ประกอบดว้ ยเคร่อื งมอื ท่ีใช้ในการทางานหลากหลาย ซ่งึ ได้มีการจัดกลุ่มของเครือ่ งมือทม่ี ลี ักษณะการทางานคล้ายกนั อยู่ในกลมุ่ เดียวกัน แบง่ กลมุ่ ยอ่ ยได้ 8 กลุม่ ดงั นี้1. กลุ่มเคร่ืองมอื สาหรบั การเลอื กเพือ่ เคล่อื นยา้ ยวตั ถุหรือภาพต่าง ๆ และสร้างขอบเขตพื้นทเ่ี พอื่ ลบบางสว่ นออกจากภาพ ดังตารางที่ 3-2ตารางที่ 3-2 กล่มุ เครอื่ งมือสาหรบั การเลือกเพ่ือย้ายวัตถุรปู เครือ่ งมือ ช่ือเคร่อื งมือ หนา้ ที่ Move Tool (V) เคลอ่ื นย้ายภาพทง้ั ที่สร้างขอบเขตพื้นท่ี (Selection) หรือไมส่ รา้ งขอบเขตพื้นทีข่ องภาพ Rectangular Marquee Tool สร้างขอบเขตพน้ื ทีร่ ูปแบบพนื้ ฐาน คอื สเ่ี หลย่ี ม Elliptical Marquee Tool สรา้ งขอบเขตพ้นื ท่ีรปู แบบพน้ื ฐาน คือ วงกลม Single Row Marquee Tool สรา้ งเสน้ selection เปน็ เสน้ ตรงในแนวนอน Single Column Marquee สร้างเส้น selection เป็นเส้นตรงในแนวต้งั Toolความรู้เบอ้ื งตน้ เกี่ยวกับโปรแกรมสร้างภาพกราฟิก หนา้ 60

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหสั 2204-2105ตารางท่ี 3-2 (ต่อ) กลุ่มเคร่อื งมอื สาหรบั การเลอื กเพอ่ื ย้ายวตั ถุรปู เคร่อื งมือ ช่ือเคร่ืองมอื หนา้ ท่ี Lasso Tool สร้างขอบเขตพน้ื ทต่ี ามรปู ทรงของภาพ ท่ีคลิกเมาสแ์ ละลากเมาส์ผ่านรูปภาพตาม ลกั ษณะท่ีเลือก Polygonal Lasso Tool สร้างขอบเขตพ้นื ที่ตามรปู แบบการลากเสน้ แตล่ ะจดุ Magnetic Lasso Tool สร้างขอบเขตพน้ื ที่ โดยยดึ ตามสีทใี่ กล้เคยี งกนั ของภาพเพ่ือกาหนดขอบเขตพืน้ ที่ของสี2. กล่มุ เครือ่ งมอื สาหรับการตัดภาพเพ่ือเลอื กเฉพาะสว่ น และบนั ทึกไฟล์ภาพเป็นภาพเล็ก ๆ ขนาดความจุของไฟล์นอ้ ย เพ่ือใช้งานบนเว็บไซต์ ดังตารางท่ี 3-3ตารางท่ี 3-3 กลุ่มเครือ่ งมอื สาหรับการตัดภาพรูปเคร่อื งมือ ชอื่ เครอ่ื งมอื หน้าที่ Crop Tool ตดั ภาพ โดยเลือกเฉพาะสว่ นทต่ี ้องการไว้ใช้งาน Perspective Crop Tool ตดั ภาพที่มีมติ ิ ความกวา้ ง ความยาว ความลึก Slice Tool ตดั ภาพ เพื่อนาไปใช้ออกแบบเวบ็ เพจ Slice Select Tool ย่อหรอื ขยายภาพที่ตัดด้วยเครอื่ งมือ Slice Tool3. กลุม่ เคร่ืองมือสาหรบั วดั คา่ เช่น เกบ็ คา่ สีเพ่ือใชเ้ ปรียบเทียบ การวดั ระยะการตรวจนับภาพ ดังตารางท่ี 3-4ตารางท่ี 3-4 กลมุ่ เคร่ืองมือสาหรับวัดค่ารูปเคร่ืองมือ ช่อื เครื่องมือ หนา้ ท่ี Eyedropper Tool เลือกสจี ากภาพไปใช้งาน และ Color Sampler Tool ทใี่ ชค้ ลกิ เลือกสีอ้างอิงการปรบั แตง่ Color Sampler Tool อ่านคา่ สีในภาพ Ruler Tool วัดระยะหา่ งจดุ 2 จุด Note Tool แทรกโน้ตบนภาพ เพ่อื แจ้งผู้ทที่ างานรว่ มกนั ใหท้ ราบความคดิ เห็นความร้เู บ้อื งต้นเก่ยี วกบั โปรแกรมสรา้ งภาพกราฟกิ หนา้ 61

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหสั 2204-21054. กลมุ่ เครือ่ งมือสาหรับการระบายสตี ่าง ๆ โดยมแี บ่งกลมุ่ ย่อยตามลักษณะของการใช้งานดา้ นตา่ ง ๆ เชน่ การระบายสี วาดเส้น แปลงภาพเป็นภาพระบายสนี า้ หรือการลงสีแบบไลโ่ ทนสี ดงั ตารางท่ี 3-5ตารางท่ี 3-5 กลุ่มเครือ่ งมอื สาหรับการระบายสีรูปเครอ่ื งมือ ช่อื เครอ่ื งมือ หน้าที่ Brush Tool สร้างเสน้ หรอื วาดลายเสน้ Pencil Tool สร้างเสน้ หรอื ลดลายเสน้ แบบหยาบ ๆ Color Replacement Tool แดรกเมาสเ์ พื่อเปลีย่ นสีภาพเป็นสีใหม่ Mixer Brush Tool แดรกเมาส์ภาพเพื่อทาใหภ้ าพเบลอ History Brush Tool เรยี กภาพก่อนปรับแต่งคืนมา Art History Brush Tool ปรับเปลีย่ นเป็นภาพวาด Gradient Tool แดรกเมาส์ผ่าน เพื่อสร้างแถบสี Paint Bucket Tool คลกิ เพ่ือเทสีลงไป5. กล่มุ เครื่องมือสาหรบั การปรับแต่งภาพโดยแบ่งเคร่อื งมอื ออกเปน็ กลุ่มย่อย ๆ ไดแ้ ก่กล่มุ การแกไ้ ขพน้ื ผวิ กลมุ่ สาหรับการตดั ฉากหลัง กล่มุ สาหรับปรบั ความคมชดั ภาพ และกลุ่มสาหรบัการปรับแต่งสเี ฉพาะจดุ ดังตารางที่ 3-6ตารางที่ 3-6 กลมุ่ เครอื่ งมือสาหรับการปรับแตง่ ภาพรปู เคร่อื งมือ ชอ่ื เครอื่ งมือ หน้าท่ี Spot Healing Brush Tool คลกิ แก้ไขจุดบกพรอ่ งเล็ก ๆ บนภาพ Healing Brush Tool แก้ไขจดุ บกพรอ่ งขนาดใหญ่บนภาพ Patch Tool แก้ไขพ้ืนผิวของภาพ โดยการนาพืน้ ผวิ อ่นื มาวางทับพ้ืนที่ในขอบเขตพืน้ ที่ทีเ่ ลอื ก Content Aware Move ย้ายหรือเคลอื่ นท่ีวัตถุที่อยใู่ นภาพ Tool เพื่อจัดองคป์ ระกอบไดต้ ามต้องการ Red Eye Tool ใช้แกไ้ ขภาพถ่ายตาแดง Clone Stamp Tool คัดลอกพนื้ ผิวจากจดุ หนง่ึ วางทบั อีกจุดหนงึ่ Pattern Stamp Tool สาหรับรีทชั ภาพพน้ื ผวิ ลงในภาพถา่ ย Eraser Tool ลบพื้นที่ไม่ต้องการออกจากพ้ืนหลังความรู้เบื้องต้นเก่ยี วกบั โปรแกรมสร้างภาพกราฟิก หน้า 62

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-2105ตารางที่ 3-6 (ตอ่ ) กลุม่ เครอ่ื งมือสาหรับการปรบั แตง่ ภาพรปู เครื่องมือ ช่อื เครอ่ื งมือ หนา้ ที่ Background Eraser Tool ลบพน้ื หลังโดยการแดรกเมาส์ Magic Eraser Tool ลบพน้ื หลงั ออกจากภาพโดยคลกิ สีทต่ี อ้ งการลบ Blur Tool ปรบั สว่ นทแี่ ดรกเมาส์ใหน้ ุ่มนวลขน้ึ Sharpen Tool ปรับเพิ่มความคมชดั Smudge Tool เกลยี่ สีใหภ้ าพ Dodge Tool ปรับเพิ่มความสวา่ งจดุ ที่แดรกเมาส์ผา่ น Burn Tool เพ่มิ ความมดื ใหจ้ ุดทีแ่ ดรกเมาสผ์ ่าน Sponge Tool ลดความอิม่ ตัวของสี หรือเพ่ิมความอม่ิ ตวั จุดที่ แดรกเมาสผ์ ่าน6. กลมุ่ เครอื่ งมือสาหรับสร้างเส้นรูปทรงแบบ Vector สามารถบิดเสน้ หรือดดั รปู ทรงโดยไม่สูญเสียรายละเอยี ด เช่น การวาดภาพในกลุ่มเครื่องมือ Pen Tool การสร้างตวั อักษรหรือการวาดรูปทรงในกล่มุ Shape Tool ดงั ตารางที่ 3-7ตารางที่ 3-7 กลมุ่ เครือ่ งมอื สาหรับสรา้ งเสน้ รูปทรงแบบ Vectorรูปเครื่องมือ ชอ่ื เครอ่ื งมอื หนา้ ท่ี Pen Tool สร้างเสน้ พาธโดยการแดรกเมาส์กาหนดทศิ ทาง Freeform Pen Tool สร้างเสน้ พาธคร่าว ๆ เพ่ือปรับแต่งภายหลงั Add Anchor Point Tool เพิ่มจุดแองเคอร์ Delete Anchor Point Tool ลบจุดแองเคอร์ Convert Point Tool ปรบั แต่งมุมเส้นพาธทศิ ทาง Path Selection Tool คลิกเลือกเส้นพาธเพื่อย้ายตาแหนง่ Direct Selection Tool คลกิ จุดแองเคอร์เพ่ือปรบั แตง่ หรือเคลื่อนยา้ ย ตาแหนง่ จุดแองเคอร์ Rectangle Tool วาดรูปส่ีเหลย่ี ม Rounded Rectangle Tool วาดรูปส่เี หลย่ี มมมุ โคง้ Ellipse Tool วาดรปู วงกลม วงรี Polygon Tool วาดรปู หลายเหลยี่ มมุมฉากความรเู้ บ้อื งตน้ เก่ยี วกบั โปรแกรมสรา้ งภาพกราฟกิ หน้า 63

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหัส 2204-2105ตารางท่ี 3-7 (ตอ่ ) กลมุ่ เครื่องมอื สาหรบั สรา้ งเส้นรปู ทรงแบบ Vectorรูปเครื่องมือ ชื่อเครอ่ื งมอื หน้าที่ Line Tool วาดรปู เสน้ ตรง Custom Shape Tool สร้างรูปทรงท่ีโปรแกรมเตรยี มไว้ให้ Horizontal Type Tool สรา้ งข้อความปกติแนวนอน Vertical Type Tool สรา้ งข้อความปกติแนวตัง้ Horizontal Type Mask สรา้ งขอ้ ความแบบขอบเขตพ้ืนที่แนวนอน Tool Vertical Type Mask Tool สรา้ งข้อความแบบขอบเขตพื้นท่ีแนวตงั้7. กลุ่มเคร่อื งมอื สาหรับจัดการกับมุมของภาพ เช่น การเล่อื นดูภาพแต่ละสว่ นการหมนุ ภาพไปในทศิ ทางต่าง ๆ และการมองภาพ ดังตารางท่ี 3-8ตารางที่ 3-8 กลมุ่ เครอ่ื งมอื สาหรับจัดการกบั มุมของภาพรูปเครื่องมือ ชื่อเครอ่ื งมอื หน้าท่ี Hand Tool เลื่อนดสู ่วนตา่ ง ๆ ของภาพ Rotate View Tool หมนุ ภาพไปทิศทางต่าง ๆ Zoom Tool (Z) ขยายดูส่วนท่ตี ้องการของภาพ3.6 การสรา้ งไฟล์ภาพใหม่และบันทกึ ไฟล์ การสรา้ งไฟลภ์ าพใหม่นัน้ จะต้องกาหนดขนาดของภาพก่อน เพ่อื ระบุขนาดของไฟลภ์ าพใชง้ านจริงภาพนนั้ ท่ที าการบันทึกไฟล์จะมีคุณภาพของภาพแตกตา่ งกนั ตามประเภทของไฟลท์ ี่บนั ทึก 3.6.1 การสรา้ งไฟล์ภาพใหม่ การสรา้ งไฟลภ์ าพใหมน่ นั้ จะตอ้ งกาหนดขนาดของภาพก่อนเพื่อระบุขนาดของไฟล์ภาพใช้งานจรงิ เมอ่ื มีการพมิ พ์ออกทางเครือ่ งพิมพ์แล้วได้ขนาดรูปภาพตามทรี่ ะบใุ นการสรา้ งไฟลภ์ าพใหมโ่ ดยการคลกิ ทเ่ี มนู File > New หรอื + จะปรากฏหน้าต่างท่ใี ชส้ รา้ งไฟล์ภาพใหม่ ซึ่งมสี ว่ นประกอบดงั รปู ภาพ 3-16ความรเู้ บ้ืองต้นเกี่ยวกับโปรแกรมสร้างภาพกราฟิก หน้า 64

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 รูปภาพ 3-16 การสรา้ งไฟล์ภาพใหม่ ทมี่ า : จากโปรแกรม Adobe Photoshop CS6โดยสามารถเลือกรปู แบบ หรือกาหนดค่าต่าง ๆ เชน่ ความกว้าง ความสงู และโหมดการพมิ พ์ของภาพแตล่ ะรปู แบบ มีความหมาย ดงั นี้1. Name คอื การกาหนดชอ่ื รปู ภาพ2. Preset คือกาหนดรปู แบบของพนื้ ทร่ี ูปภาพหรือรูปแบบของพน้ื ท่ีในการทางาน3. Size คอื กาหนดขนาดรปู ภาพ4. Width คอื การกาหนดความกว้างของรปู ภาพ5. Height คือการกาหนดความสูงของภาพPixels พกิ เซลInches น้ิวCm เซนตเิ มตรMm มลิ ลิเมตรPoint จุดPicas ไพคะColumns สดมภ์6. Resolution คือความละเอยี ดของรูปภาพ สามารถใส่ค่าได้ตามที่ต้องการโดยส่วนมากภาพท่ีนาไปใช้บนเครือ่ งคอมพวิ เตอร์ (ใช้แสงสีในการแสดงผล) จะใชค้ วามละเอยี ด72 pixels per Inch (PPI) ขนึ้ ไปและภาพที่นาไปใชใ้ นงานพิมพ์ (ใช้หมึกสีในการแสดงผล)จะใชค้ วามละเอยี ด 300 pixels per Inch (PPI) ขน้ึ ไปความร้เู บือ้ งตน้ เก่ยี วกบั โปรแกรมสรา้ งภาพกราฟกิ หน้า 65

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหสั 2204-21057. Color Mode คือระบบสีทีจ่ ะนาไปใชใ้ นรูปภาพBitmap แบบจุดสีGray scale แบบขาวดาRGB Color แบบ Additive สาหรับภาพบนเว็บCMYK Color แบบใชก้ ับสงิ่ พมิ พ์Lab Color แบบไม่คานึงถึงอปุ กรณ์ท่ีนามาใช้8. Background Contents คือการกาหนดรูปแบบพ้นื หลงัWhite พน้ื หลงั สขี าวBackground Color พื้นหลังเปน็ สที ่ีต้งั ไว้Transparent พนื้ หลงั โปรง่ แสงWhite กาหนดพน้ื หลังสขี าว Background Color กาหนด Transparent กาหนดพื้นหลงั พื้นหลังเปน็ สีแบ็คกราวนด์ โปรง่ ใส ที่กาหนดไว้ในกล่องเครอ่ื งมือ รปู ภาพ 3-17 ตวั อยา่ งการกาหนดสีพ้นื ไฟล์ภาพใหม่ ทมี่ า : จากโปรแกรม Adobe Photoshop CS69. Color Profile คือการระบุประเภทของสที ใ่ี ช้ในสภาพแวดลอ้ มทต่ี ่างกนั10. Pixel Aspect Ration คือการกาหนดอัตราสว่ นของรูปภาพ11. OK คือปุ่มยอมรบั การสร้างรูปภาพจากคา่ ท่ีได้เลือกไว้12. Cancel คอื ปมุ่ ยกเลิกการสรา้ งรปู ภาพจากค่าทไี่ ด้เลือกไว้13. Save Preset เปน็ การบันทึกคา่ ท่ีเลอื กไวเ้ พ่อื นามาใชใ้ นงานอ่ืน14. Delete Preset เป็นการลบค่าที่บันทึกทเ่ี ลือกไว้15. Image Size คอื ขนาดไฟล์ท่ตี ้องใชใ้ นการจดั เก็บรูปภาพความรูเ้ บื้องตน้ เกย่ี วกบั โปรแกรมสร้างภาพกราฟกิ หนา้ 66

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหัส 2204-2105 3.6.2 การบนั ทกึ File คอื การบันทึกไฟล์ (File) ภาพน้นั ท่ีทาการบันทึกไฟลจ์ ะมคี ุณภาพของภาพแตกต่างกันตามประเภทของไฟลท์ ี่บันทกึ โดยการเลอื กประเภทของไฟล์ภาพนัน้ ขึ้นอยู่กบั ความเหมาะสมกับงานทจ่ี ะนารูปภาพมาประยุกต์กบั โปรแกรมต่าง ๆ ในภายหลงั ดังตารางที่ 3-9ตารางที่ 3-9 ชนดิ ของไฟล์ประเภทไฟล์ ลักษณะของไฟล์.GIF เป็นไฟลท์ ี่ใช้กนั มากในการสร้างเวบ็ ไซต์ เพราะไฟล์มีขนาดไมใหญ่ ง่ายต่อการบีบอัดข้อมลู ทง้ั ไฟล์ประเภทน้สี ว่ นใหญจ่ ะสามารถเคล่อื นไหวได สรา้ งข้นึ จาก โปรแกรมกราฟก และแอนเิ มชั่น เช่น โปรแกรม Image Ready.PNG ใชบ้ ันทึกรปู ภาพประเภทเวกเตอร์ จะมีคุณสมบัติคล้ายกบั ไฟล์ GIF ซึ่งสามารถ บบี อัดข้อมูลให้มขี นาดเล็ก บนั ทกึ สว่ นทโี่ ปร่งใสและสามารถเลือกระดับสใี หแ้ สดง ถงึ 16.7 ล้านสี.TIFF เปน็ การบนั ทึกไฟลภ์ าพซงึ่ สามารถบบี อดั ข้อมูลทาใหค้ ณุ ภาพของสภี าพเหมือน ต้นฉบับ แตไ่ ฟล์ภาพน้ันจะมขี นาดใหญ่ ในกรณีท่ีบนั ทึกเป็นไฟล์สกุล TIFF สามารถนาไปใชร้ ่วมกบั PageMaker เพ่ือสรา้ งส่อื ส่ิงพิมพ์ต่อไป.BMP เปน็ รปู แบบของไฟล์มาตรฐานที่ใช้ในระบบปฏิบตั ิการ Windows และ Dos ซึ่งสามารถท่จี ะจัดเรียงสดี าไปหาสขี าว (1 ไบต์ต่อ 1 pixel) และจะสามารถ เลือกระดบั สสี งู ถึง 24 บติ หรือ 16.7 ล้านสี.EPS เปน็ รูปของไฟล์ทสี่ ามารถบรรจภุ าพแบบ Vector และ Bitmap สนับสนุน การนารูปภาพไปเป็นภาพประกอบใน Illustrator หรอื นาไปใช้ร่วมกับโปรแกรม จดั หนา้ เอกสาร ในกรณที ่ีนาภาพแบบเวกเตอรม์ าเปดิ ใน Photoshop จะถูกแปลงเป็น Bitmap ทนั ที.PDF เปน็ รปู แบบของไฟล์ทใี่ ช้เปน็ เอกสารอเิ ล็กทรอนิกสห์ รือนาเสนอขอ้ มลู บน อนิ เทอรเ์ น็ต ข้อดีของไฟล์ PDF คอื รักษารูปแบบหนา้ กระดาษ ตัวอกั ษร รูปภาพ ใหเ้ หมือนกบั ตน้ ฉบบั และนยิ มนาไฟล์ PDF บันทึกไฟลง์ านก่อนส่งโรงพมิ พ์ ส่วนโปรแกรมทีใ่ ช้อา่ นไฟล์ PDF คือ Adobe Acrobat Reader.JPEG เปน็ ไฟลท์ ่สี ามารถบบี อดั ข้อมูลทเี่ ป็นไฟลร์ ปู ภาพประเภท Bitmap หรือภาพถ่าย และสามารถกาหนดการแสดงภาพบนเว็บจากหยาบไปหาความละเอียดทเ่ี รียกว่า Progressive ซึง่ เราสามารถปรับค่าออปชนั ของรูปแบบไฟล์ JPEG ได้ (ส่วนมากไฟลภ์ าพเปน็ .JPEG เกือบท้ังหมด)ความรู้เบ้ืองต้นเกี่ยวกับโปรแกรมสรา้ งภาพกราฟิก หนา้ 67

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหสั 2204-2105ตารางท่ี 3-9 (ตอ่ ) ชนดิ ของไฟล์ประเภทไฟล์ ลักษณะของไฟล์.PSD เปน็ ไฟล์มาตรฐานท่สี ร้างขน้ึ ด้วยโปรแกรม Photoshop สามารถเปิดไฟลท์ ่ีสร้าง ข้นึ ดว้ ยเวอรช์ ันก่อนหน้าน้ีได้ด้วย โดยไฟล์ .PSD จะไมสามารถเปิดใช้งานได จากโปรแกรมอนื่ ๆ.RAW เป็นไฟล์ทีส่ ามารถยืดหยุ่นไดเ้ ป็นอยา่ งดี ถาหากมีการเปลี่ยนแปลงการทางาน ในระหวา่ ง Application หรือ ตา่ งเครอื่ งคอมพิวเตอร์.PCT เป็นไฟล์ท่ีใชใ้ นบนเครื่อง Macintosh เทา่ นน้ั และมีขนาดของไฟลค์ ่อนขา้ งใหญ่ มาก 1. การบันทึกไฟลภ์ าพดว้ ยคาสัง่ Save คอื การบนั ทึกไฟล์กอ่ นการทางานอื่น ๆควรบนั ทกึ ไฟลภ์ าพให้เรียบรอ้ ยก่อนการปดิ หรือเปดิ ไฟลภ์ าพอ่นื การบันทึกไฟล์ภาพ ข้ันตอนดังน้ี (1) เลือกเมนู File โดยคลิกที่เมนู File > Save จะปรากฏหน้าต่างการบันทึกไฟล์ดงั รปู ภาพ 3-18 บนั ทกึ ทบั ไฟลเ์ ดมิ รูปภาพ 3-18 การบันทกึ ไฟล์ดว้ ยคาสัง่ Save ที่มา : จากโปรแกรม Adobe Photoshop CS6ความรเู้ บอื้ งตน้ เกยี่ วกับโปรแกรมสร้างภาพกราฟิก หนา้ 68

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหสั 2204-2105 (2) เลือกโฟลเดอร์ที่ต้องการเก็บไฟล์ภาพ ต้ังช่ือไฟล์ เลือกนามสกุลของไฟล์และขั้นตอนสดุ ทา้ ยคือ Save หรือ บนั ทึก 1. เลือกโฟลเดอร์ที่ ตอ้ งการเกบ็ ไฟล์2. ตัง้ ชอ่ื ไฟล์ที่ตอ้ งการ 4. คลกิ ปุ่ม Saveเกบ็ ไฟลภ์ าพ เพอ่ื บันทึก3. เลอื กนามสกลุ ท่ีตอ้ งการเก็บ รูปภาพ 3-19 เลอื กโฟลเดอร์บันทึกไฟล์ และพมิ พ์ชอ่ื ไฟล์ ทีม่ า : จากโปรแกรม Adobe Photoshop CS6 2. การบนั ทึกไฟลภ์ าพดว้ ยคาสงั่ Save As คอื บนั ทึกไฟลภ์ าพกรณีที่ต้องการเปลยี่ นชอ่ื การทางานคล้ายกับคาส่งั Save แต่แตกต่างท่ี Save As จะใช้เมอื่ ต้องการเกบ็ ไฟลภ์ าพที่ตาแหน่งใหมห่ รือเม่ือต้องการเปล่ยี นชื่อไฟล์ภาพใหม่ ขั้นตอนดังนี้ 1. เลอื กโฟลเดอร์ ท่ตี ้องการเก็บไฟลภ์ าพ2. ต้งั ชอ่ื ไฟล์ที่ต้องการเกบ็ 4. คลกิ ป่มุ Saveไฟลภ์ าพ เพือ่ บันทึก 3. เลือกนามสกลุ ท่ี หน้า 69 ต้องการเกบ็ รปู ภาพ 3-20 หน้าตา่ งไฟลภ์ าพดว้ ยคาสัง่ Save As ทม่ี า : จากโปรแกรม Adobe Photoshop CS6ความรู้เบือ้ งตน้ เก่ยี วกับโปรแกรมสร้างภาพกราฟิก

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหัส 2204-2105 เมอ่ื นาเมาส์คลกิ ปุ่ม Save (บันทกึ ไฟล์นามสกุล .JPEG) จะปรากฏหน้าตา่ งปรับเปลีย่ นคณุ ภาพของไฟลภ์ าพ โดยการกาหนดคา่ Image Options ซง่ึ Quality คือคุณภาพของไฟลป์ ระกอบด้วย (1) Low ไฟล์คุณภาพตา่ (2) Medium คณุ ภาพปานกลาง (3) High ไฟล์คุณภาพดี (4) Maximum ไฟล์คณุ ภาพดีสูงสุด (5) Small File/Large File การปรับขนาดไฟลภ์ าพ โดยถ้าลากแถบเลื่อนไปดา้ นซ้ายไฟล์ภาพมีขนาดเล็ก แตถ่ ้าเลื่อนไปดา้ นขวาไฟลภ์ าพจะมีขนาดใหญ่ Format Options คือ คุณสมบตั ไิ ฟลร์ ูปภาพ ประกอบดว้ ย (1) Baseline (“Standard”) กาหนดเป็นไฟลแ์ บบมาตรฐานสามารถรองรับบราวเซอร์ได้หลายบริษัท (2) Baseline Optimized กาหนดเป็นไฟล์แบบลดคณุ ภาพของสีลง แต่ใชไ้ ด้กบั บางบราวเซอร์ (3) Progressive กาหนดไฟล์แบบแสดงภาพขึ้นมาทีละนิดขณะโหลดไฟล์ใช้ได้กบั บางบราวเซอร์ Size คือ ขนาดของไฟล์รปู ภาพซ่ึงเรม่ิ ท่ี 14.4 Kbps ถงึ 2 Mbps 3. การบนั ทกึ ไฟล์ภาพ Adobe Photoshop (.PSD) การแกไ้ ขไฟล์ภาพโดยการสรา้ งภาพกราฟิก เชน่ การตดั ต่อภาพ การเพิ่มขนาด หรือเปล่ียนแปลงลักษณะไฟล์ท่ีมีผลกับโครงสร้างเดมิของภาพ เม่ือมีการเลือกคาสง่ั File > Save แสดง Dialog box ตรงเมนู Save As ขน้ึ โดยเลือกรปู แบบของไฟลภ์ าพเปน็ Adobe Photoshop (*.PSD, * .PDD) เปน็ คา่ พ้นื ฐาน ดงั รูปภาพ 3-21 รูปภาพ 3-21 ไฟลภ์ าพ Adobe Photoshop หนา้ 70 ทม่ี า : อรทยั เลศิ ขนุ ทด (2559)ความรู้เบื้องตน้ เก่ียวกับโปรแกรมสร้างภาพกราฟกิ

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหสั 2204-2105 คณุ สมบตั ิของไฟล์ดงั กล่าวคือ เก็บรายละเอยี ดการทางานต่าง ๆ เชน่ Layer รูปแบบอักษรและรูปแบบเสน้ พาธไวไ้ ด้อย่างครบถว้ นชว่ ยให้การนาไฟล์ภาพกลบั มาแก้ไขทาได้ง่าย ในขณะที่ไฟล์ประเภทอืน่ จะเกบ็ ข้อมลู เหล่านไี้ ม่ได้ หรือได้เพียงบางสว่ น 3.6.3 การเปิดไฟลภ์ าพ คือ การเปดิ ไฟลภ์ าพสามารถทาได้หลายวิธขี น้ึ อยู่กบั ความตอ้ งการของผ้ใู ชจ้ ะเลอื กใช้วิธีใด เช่น วิธกี ารเปดิ ไฟลภ์ าพจากเมนู File ดังน้ี 1. การเปิดไฟล์จากเมนไู ฟล์ ขน้ั ตอนดังนี้ (1) คลกิ เมนู File > Open หรือกดคียล์ ัด + จะปรากฏหนา้ ต่าง Open (2) ช่อง Look in เลอื ก Drive และโฟลเดอรท์ ่ีเกบ็ ไฟล์ (3) ดูตัวอยา่ งภาพและคลกิ เลือกชอื่ ไฟลจ์ ากรายการ (4) คลิกป่มุ Open เปลี่ยนมุมมองไฟล์ใหแ้ สดงรายชอ่ื หรอื ภาพตวั อยา่ ง (Thumbnails) ตวั อยา่ งไฟล์ เปิดไฟล์ภาพ รูปภาพ 3-22 การเปิดไฟลภ์ าพ ท่ีมา : จากโปรแกรม Adobe Photoshop CS6 2. การเปดิ ไฟลภ์ าพ Adobe Photoshop (PSD) คอื การเปดิ ไฟลโ์ ปรแกรมวธิ ีเรียกใช้เหมอื นการเปดิ ไฟล์ภาพทว่ั ไป แตไ่ มส่ ามารถมองเหน็ ตวั อย่างไฟลภ์ าพทั้งหมดในกรอบรายการไฟล์แตต่ อ้ งคลิกเลอื กไฟล์ก่อนแล้วดูตวั อย่างที่ด้านลา่ งแทน (สามารถคลิกเลือกไฟล์ครง้ั ละ 1 ภาพ) แต่เมือ่ เปิดไฟลภ์ าพขึ้นมาแลว้ บนพาเลต Layer น้นั จะแสดง Layer ท้งั หมด และสามารถแกไ้ ขตอ่ ได้โดยแสดงภาพใน Layer เป็นชนั้ ๆ ดังรปู ภาพ 3-23ความรู้เบ้อื งต้นเกย่ี วกบั โปรแกรมสร้างภาพกราฟกิ หน้า 71

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหสั 2204-2105 ไอคอนแสดงประเภทไฟล์ Adobe Photoshop รูปภาพ 3-23 การเปดิ ไฟล์ภาพ ที่มา : จากโปรแกรม Adobe Photoshop CS6 3. การเปิดไฟล์ภาพอย่างรวดเรว็ ดว้ ยคาสัง่ Open Recent เปน็ คาสง่ั การเปิดไฟลภ์ าพอย่างรวดเร็ว ซึง่ เกบ็ ช่อื ไฟล์ภาพท่ีเคยเปิดใชง้ านแล้วก่อนหนา้ น้ัน 10 ไฟล์ โดยคลกิ ที่เมนูFile > Open Recent ปรากฏชือ่ ไฟลต์ ่าง ๆ แล้วคลิกเลือกไฟล์ที่ต้องการ ดงั รปู ภาพ 3-24รปู ภาพ 3-24 การเปิดไฟล์ภาพอยา่ งรวดเรว็ ดว้ ยคาส่งั Open Recent ทมี่ า : จากโปรแกรม Adobe Photoshop CS6ความรู้เบอื้ งตน้ เกย่ี วกบั โปรแกรมสรา้ งภาพกราฟกิ หน้า 72

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหัส 2204-21053.6.4 การปดิ ไฟล์ภาพ คอื การปิดไฟล์ภาพการทางานในโปรแกรมจาก Adobe Photoshopเสร็จสิน้ แล้วสามารถเลอื กปิดไฟลภ์ าพทีท่ างานอยู่ได้หลากหลายวธิ ี เชน่ คลิก หรอื คลกิ จากเมนูคาส่ังไฟลด์ ังน้ี1. นาเมาส์คลกิ ในหนา้ ต่างไฟล์ภาพ ดังรูปภาพ 3-25 คลกิ ท่ปี มุ่ Yes หากต้องการบนั ทึกไฟล์ รปู ภาพ 3-25 การปิดไฟลภ์ าพ ที่มา : จากโปรแกรม Adobe Photoshop CS6 2. เรียกใช้คาส่งั จากเมนูไฟล์ คือ การปิดไฟลภ์ าพทีเ่ ปิดใชง้ านในปัจจบุ นั วิธีการดงั รูปภาพ 3-26คลกิ เลอื กเพอ่ื ปิดภาพที่ใช้งานอยู่คลิกเลอื กเพอ่ื ปดิ ภาพท่ใี ชง้ านทง้ั หมดคลกิ เลอื กเพอ่ื ปิดภาพ และเปดิ โปรแกรมAdobe Bridge รูปภาพ 3-26 การปิดไฟลภ์ าพจากเมนู File ที่มา : จากโปรแกรม Adobe Photoshop CS6ความรู้เบ้อื งตน้ เก่ยี วกับโปรแกรมสรา้ งภาพกราฟิก หนา้ 73

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 3.6.5 การออกจากโปรแกรม กอ่ นออกจากโปรแกรมควรบันทึกรูปภาพและปิดรปู ภาพให้เรียบร้อยเพ่ือแสดงถึงตัวผใู้ ชว้ ่าได้ทางานเรยี บรอ้ ยดีแล้วและต้องการออกจากโปรแกรม ซึง่ สามารถทาได้ 4 วธิ ีดังนี้ 1. คลิกท่เี มนู File > Exit 2. คลิกป่มุ Ps Button แลว้ เลือกคาส่งั Close 3. กดแปน้ พมิ พ์ลัด + 4. กดแป้นพมิ พล์ ดั + รูปภาพ 3-27 การออกจากโปรแกรมท่มี า : จากโปรแกรม Adobe Photoshop CS6สรปุ สาระสาคัญ เคร่อื งมืออานวยความสะดวกในการตกแต่งภาพ แก้ไขภาพ โดยอาศัยความรู้เบ้ืองตน้ เก่ียวกับโปรแกรม Adobe Photoshop หน้าตา่ งโปรแกรม เมนูบาร์ ออปชนั บาร์ แผงควบคุมเคร่อื งมือ และพาเลตมีหนา้ ท่ีการทางานแตกต่างกนั ไป กลุ่มเครอ่ื งมือแบ่งออกเป็นกลุ่ม ๆ คอื กลมุ่ เคร่ืองมือสาหรับเคล่ือนย้ายวตั ถุ กลุ่มเครื่องมือสรา้ งขอบเขตพืน้ ที่ กลมุ่ เครื่องมือสาหรบั การตดั ภาพเพื่อเลอื กเฉพาะสว่ นของภาพหรือตดั ภาพเพ่ือใช้งานบนเวบ็ ไซต์ กลุม่ เครื่องมือสาหรบั วัดคา่ กลุ่มเครื่องมือสาหรบัการรีทัชภาพ กลมุ่ เครอื่ งมอื สาหรับการระบายสี กลุ่มเคร่ืองมอื สาหรบั สรา้ งเสน้ รูปทรงแบบ Vectorสามารถบดิ หรือตัดรปู ทรงได้โดยไมส่ ญู เสียรายละเอยี ด กลุ่มเครอื่ งมอื การสร้างตวั อักษรหรอื การวาดรปู ทรงในกลมุ่ เคร่ืองมือ Save Tool กลมุ่ เครื่องมือสาหรับจัดการกับมมุ มองของภาพ การสรา้ งไฟล์ภาพใหม่ การเปิดไฟลภ์ าพ การบนั ทกึ ไฟล์ภาพ และการออกจากโปรแกรมความรเู้ บื้องต้นเก่ยี วกบั โปรแกรมสรา้ งภาพกราฟกิ หน้า 74

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 แบบฝึกหดั ทา้ ยหนว่ ยการเรียนร้ทู ี่ 3 เรอื่ ง ความร้เู บ้อื งต้นเกยี่ วกบั โปรแกรมสรา้ งภาพกราฟกิคาสงั่ จงตอบคาถามต่อไปน้ีให้สมบูรณท์ ี่สดุ 1. จงบอกส่วนประกอบและหนา้ ต่างของโปรแกรม Adobe Photoshop CS6พร้อมคาอธบิ ายหมายเลข ช่ือ คาอธิบาย 1 2 3 4 5 6 7 8 9ความร้เู บ้อื งต้นเกย่ี วกับโปรแกรมสร้างภาพกราฟกิ หนา้ 75

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟิก รหสั 2204-21052. ชือ่ เมนใู นตารางท่ีกาหนดให้ มีรปู แบบการทางานอยา่ งไรMenu Bar รูปแบบการทางานFileImageLayerSelectWindow3. จงอธบิ ายความหมายของ Option Bar............................................................................................................................................................................................................................................................................................................................................................................................................................................................... .................................................................................................................................................................................................4. จงอธิบายขัน้ ตอนการเรยี กใช้พาเลต................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................5. จงอธิบายความหมายของกล่องเครื่องมือ............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................. ...................6. จงบอกชนิดของไฟล์ภาพดังต่อไปนี้ประเภทไฟล์ ลกั ษณะของไฟล์.GIF.JPEG.PSDความรู้เบอ้ื งต้นเก่ียวกบั โปรแกรมสรา้ งภาพกราฟิก หนา้ 76

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหสั 2204-2105 ใบงานทา้ ยหน่วยการเรียนรู้ท่ี 3 เรอื่ ง ความร้เู บ้อื งตน้ เกีย่ วกบั โปรแกรมสรา้ งภาพกราฟกิจดุ ประสงค์ 1. อธิบายความรเู้ บ้อื งตน้ เก่ยี วกบั โปรแกรม Adobe Photoshop ได้ 2. กาหนดค่า Option Bar ได้ 3. อธบิ ายรปู แบบการทางาน Menu Bar ได้ 4. อธิบายข้นั ตอนการเรียกใช้พาเลตได้ 5. เรยี กใช้กล่องเครือ่ งมือได้ 6. สร้างไฟลภ์ าพใหมแ่ ละบันทกึ ไฟล์ภาพได้ขั้นตอนการปฏบิ ัตงิ าน 1. แบง่ นกั เรียนออกเป็นกลุ่ม กลุ่มละ 2 คน ศกึ ษาเอกสารประกอบการเรียน 2. ชมการสาธิตแนะนาการใชโ้ ปรแกรม Adobe Photoshop โดยครูผสู้ อน 3. นกั เรยี นฝึกปฏบิ ัตติ ามหวั ข้อที่มอบหมายคาชี้แจง จงปฏบิ ัติตามคาสง่ั ต่อไปนใ้ี หส้ มบูรณ์ 1. จงคน้ หาไฟล์ภาพนามสกลุ .GIF, .PNG, .TIFF, .BMP, .EPS, .PDF, .JPEG, .PSD, .RAW,.PCT โดยการสบื คน้ จากระบบอนิ เตอร์เน็ต นามสกุลละ 10 ภาพตัวอย่างไฟลภ์ าพนามสกุล ตวั อย่างภาพ ตวั อย่างภาพ.GIF 2. สรา้ งภาพ ความกว้าง 6 นิ้ว สูง 4 น้วิ ความละเอยี ด 72 Pixel/Inch โดยใชเ้ ครื่องมือ Brushกาหนดหวั แปรงเป็นรปู แบบใดกไ็ ด้ สีตามใจชอบ วาดรูปในหวั ข้อ “อาชีพในฝนั ” แล้วบนั ทกึ ไฟล์ช่อื“ใบงานหนว่ ยท่ี3.jpg” จากนัน้ นาภาพทบี่ ันทึกไปใส่ลงในโปรแกรม Microsoft Word แลว้ บรรยายรปู ภาพ ความยาวประมาณ 5-7 บรรทดั กาหนดแบบอกั ษรเป็น “TH Sarabun New” ขนาด 16Pointความรู้เบอื้ งต้นเกีย่ วกับโปรแกรมสรา้ งภาพกราฟิก หน้า 77