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

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 หน่วยการเรียนรู้ที่ 2 หลักการทางานและการจดั การแฟ้มภาพกราฟิก สาระสาคญั การแสดงผลของภาพคอมพวิ เตอร์กราฟิกมีความสาคัญกับงานท่สี ร้างเปน็ อย่างมาก เนอ่ื งจากการแสดงผลในรปู แบบทแี่ ตกต่างกันอาจสง่ ผลใหช้ นิ้ งานท่ีออกมาไมเ่ หมือนกนั เช่น การแสดงผลภาพคอมพวิ เตอร์กราฟิกผ่านจอภาพ ย่อมแตกต่างจากการแสดงผลผ่านกระดาษ เน่ืองจากองคป์ ระกอบในการแสดงผลในแตล่ ะรปู แตกตา่ งกนั และรปู ภาพที่นามาแสดงผล หากเป็นรปู ภาพทต่ี ่างชนดิ กันความคมชัดของรปู ภาพก็จะแตกตา่ งกนั ออกไปเชน่ กัน สาระการเรยี นรู้ 1. รูปแบบของภาพกราฟกิ 1.1 ภาพกราฟิกแบบ Vector 1.2 ภาพกราฟิกแบบ Bitmap 2. ประเภทและคุณลักษณะของแฟม้ ภาพกราฟกิ 3. ความแตกต่างระหว่างภาพกราฟิกแบบ Vector และ Bitmap 4. ข้อควรคานึงในการจัดเก็บแฟ้มภาพกราฟิก 5. ความละเอยี ดของภาพ 6. หลักการใชส้ แี ละแสงในคอมพวิ เตอร์ 6.1 โหมดสแี บบ RGB Color 6.2 โหมดสแี บบ CMYK Color 6.3 โหมดสีแบบ HSB Color 6.4 โหมดสแี บบ LAB Color 7. การจดั เตรียมรปู ภาพเพือ่ นามาใช้งานหลักการทางานและการจดั การแฟม้ ภาพกราฟกิ หน้า 25

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหัส 2204-2105จุดประสงคก์ ารเรยี นรู้เมอ่ื ศึกษาและปฏบิ ัตติ ามเอกสารประกอบการเรียน หนว่ ยการเรียนรูท้ ี่ 2 แล้วนกั เรยี นสามารถ1. อธิบายรปู แบบของภาพกราฟกิ ได้ 1.1 อธบิ ายภาพกราฟกิ แบบ Vector ได้ 1.2 อธบิ ายภาพกราฟิกแบบ Bitmap ได้2. บอกประเภทและคณุ ลักษณะของแฟม้ ภาพกราฟกิ ได้3. จาแนกความแตกต่างระหว่างภาพกราฟิกแบบ Vector และ Bitmap ได้4. บอกข้อควรคานึงในการจัดเกบ็ แฟ้มภาพกราฟิกได้5. อธบิ ายความละเอยี ดของภาพได้6. บอกการใช้สแี ละแสงในคอมพิวเตอร์ได้ 6.1 บอกการใช้โหมดสีแบบ RGB Color ได้ 6.2 บอกการใชโ้ หมดสแี บบ CMYK Color ได้ 6.3 บอกการใช้โหมดสีแบบ HSB Color ได้ 6.4 บอกการใชโ้ หมดสีแบบ LAB Color ได้7. จัดเตรียมรูปภาพเพ่ือนามาใช้งานได้หลกั การทางานและการจดั การแฟ้มภาพกราฟิก หนา้ 26

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 แผนภมู ิเน้ือหาหลักการทางานและการจัดการแฟม้ ภาพกราฟิก รปู แบบของภาพกราฟิก ความละเอยี ดของภาพ 1. ภาพกราฟิกแบบ Vector 2. ภาพกราฟิกแบบ Bitmap หลกั การใชส้ ีและแสงในคอมพิวเตอร์ 1. โหมดสีแบบ RGB Colorประเภทและคณุ ลักษณะของแฟม้ 2. โหมดสีแบบ CMYK Colorภาพกราฟิก 3. โหมดสีแบบ HSB Color 4. โหมดสแี บบ LAB Colorความแตกต่างระหว่างภาพกราฟกิแบบ Vector และ Bitmap การจัดเตรยี มรูปภาพเพื่อนามาใชง้ าน ขอ้ ควรคานึงในการจดั เก็บแฟ้ม ภาพกราฟกิหลักการทางานและการจดั การแฟ้มภาพกราฟกิ หนา้ 27

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหสั 2204-2105 หน่วยการเรียนรูท้ ี่ 2 หลักการทางานและการจัดการแฟ้มภาพกราฟกิ2.1 รูปแบบของภาพกราฟิก ภาพทีเ่ กิดบนจอคอมพิวเตอร์ (Monitor) เกิดจากการทางานของโหมดสีแบบอารจ์ บี ี คลั เลอร์(RGB Color) ซ่ึงประกอบดว้ ย สแี ดง (Red) สเี ขยี ว (Green) และสนี า้ เงิน (Blue) โดยใช้หลักการยงิประจุไฟฟา้ ให้เกิดการเปล่งแสงของสีทัง้ 3 สี มาผสมกันเกดิ เป็นจดุ สเี ลก็ ๆ ทีเ่ รียกว่า Pixel “พิกเซล”เป็นคาย่อมาจาก Picture Element หรอื องค์ประกอบของรปู ภาพ คอื หน่วยยอ่ ยท่ีเลก็ ทส่ี ุดของBitmap Graphic รูปร่างของพิกเซลมีลักษณะเปน็ ส่ีเหล่ยี มจตั ุรัส และขนาดของพกิ เซลขึ้นอยูก่ บัจานวนพกิ เซลทปี่ ระกอบกันเปน็ ภาพนั้นข้นึ มา โดยพกิ เซลจะมหี ลากหลายสีเมื่อนามาวางต่อกันจะเกิดเปน็ ภาพ มี 2 ประเภท คือ 2.1.1 ภาพกราฟิกแบบ Vector ภาพกราฟิกทส่ี รา้ งด้วยส่วนประกอบของเสน้ ลกั ษณะต่าง ๆและคณุ สมบตั ิเกยี่ วกับสขี องเสน้ นนั้ ๆ ซึง่ สรา้ งจากการคานวณทางคณิตศาสตร์ เช่น ภาพถ่ายคนจะถกู สรา้ งด้วยจุดของเส้นหลาย ๆ จดุ เปน็ ลักษณะของเส้นโครงรา่ ง (Outline) และสีของคนก็เกดิจากสขี องเสน้ โครงรา่ งนนั้ ๆ กับพื้นท่ีผวิ ภายใน เมื่อมีการแกไ้ ขภาพจะเป็นการแก้ไขคุณสมบัติของเสน้ทาใหภ้ าพไมส่ ูญเสียความละเอียดใด ๆ ไฟลภ์ าพมีขนาดไฟลเ์ ลก็ แต่อุปกรณท์ ่ีใชแ้ สดงผลภาพ เชน่การแสดงผลทางจอภาพคอมพวิ เตอร์ หรอื เคร่อื งพมิ พจ์ ะเป็นการแสดงผลภาพแบบ Vector นยิ มใช้เพ่อื งานสถาปตั ยกรรมตกแต่งภายใน และดา้ นการออกแบบ เช่น การออกแบบรถยนต์ การออกแบบงานอาคาร การสร้างภาพการ์ตูน ซึง่ โปรแกรมท่ีนิยมใชส้ รา้ งภาพกราฟกิ ลายเส้นแบบ Vector เชน่โปรแกรม Illustrator โปรแกรม CorelDraw โปรแกรม 3Ds และโปรแกรม Max ภาพกราฟิกแบบ Vector เมอ่ื มีการปรบั ขยายภาพใหญข่ ึ้นความละเอยี ดของภาพคงเดมิ รปู ภาพ 2-1 ภาพกราฟิกแบบ Vector หนา้ 28 ที่มา : อรทัย เลศิ ขนุ ทด (2559)หลักการทางานและการจัดการแฟม้ ภาพกราฟิก

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 2.1.2 ภาพกราฟกิ แบบ Bitmap เป็นภาพกราฟิกทเ่ี กิดจากการเรยี งตัวของจดุ สเี่ หลี่ยมเล็ก ๆหลากหลายสี เรียกว่า Pixel นามาประกอบกนั จนเกิดเป็นภาพขนาดใหญ่โดยเม็ดสแี ตล่ ะเม็ดจะมีค่าสีแตกตา่ งกนั ไปภาพกราฟิกแบบ Bitmap จะตอ้ งกาหนดจานวนพิกเซลให้กับภาพ ภาพที่มจี านวนเม็ดสมี าก ๆ ภาพจะมคี วามละเอียดมากสวยคมชัด ภาพท่มี ีจานวนเมด็ สีนอ้ ยเม็ดสที ปี่ ระกอบเป็นภาพจะเรยี งตอ่ กันแบบหา่ ง ๆ และมองเหน็ เม็ดสใี นภาพแต่ละเม็ด ภาพกราฟกิ แบบ Bitmap เมือ่ มกี ารขยายใหญข่ นึ้ ทาใหภ้ าพนั้นมคี วามหยาบมองเหน็ ภาพเปน็ จดุ สเี่ หล่ยี ม ดงั นน้ั การกาหนดจานวนพิกเซลจะบอกถึงความละเอยี ดของภาพ หากภาพถูกกาหนดใหม้ ีความละเอยี ด 1,200 ppi (ความละเอียด 1,200 เมด็ สีตอ่ตารางนิ้ว) จานวนพิกเซลควรกาหนดใหเ้ หมาะสมกบั ภาพกราฟกิ ในงานทสี่ รา้ ง เชน่ ภาพกราฟิกสาหรบั เว็บไซต์ตา่ ง ๆ นน้ั เป็นภาพท่มี คี วามละเอยี ดน้อยไฟล์ภาพควรกาหนดจานวนพิกเซล ประมาณ72 ppi เพอื่ ความสะดวกในการนาภาพอัพโหลด (Upload) ไฟลข์ ึ้นเซริ ์ฟเวอร์ (Server) ไดร้ วดเร็วการสร้างภาพกราฟิกใชง้ านทั่ว ๆ ไป กาหนดจานวน Pixel ประมาณ 100-150 ppi และภาพสาหรับนติ ยสาร ปกหนังสอื ภาพโปสเตอร์ขนาดใหญ่ และงานแบบพิมพ์ต่าง ๆ นั้นควรกาหนดจานวน Pixelประมาณ 300-350 ppi เนื่องจากงานดงั กลา่ วต้องการภาพทม่ี ีความละเอยี ดมาก ทาใหภ้ าพสวยสมจรงิ ภาพกราฟิกแบบ Bitmap สามารถแกไ้ ขปรบั แต่งสี โดยการตกแต่งภาพทาได้ง่ายและมีความสวยงาม ซ่งึ โปรแกรมทน่ี ิยมใช้สร้างภาพกราฟิกแบบ Bitmap คือ Adobe PhotoShop,Paint เป็นต้น ภาพขนาดเดมิ เมอ่ื มีการขยายภาพทาใหภ้ าพมีความหยาบที่มา : http://www.metalbridges.com/geostorm ทีม่ า : อรทยั เลิศขนุ ทด (2559)รปู ภาพ 2-2 ภาพกราฟกิ แบบ Bitmapหลักการทางานและการจดั การแฟม้ ภาพกราฟิก หน้า 29

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟิก รหัส 2204-21052.2 ประเภทและคุณลกั ษณะของแฟม้ ภาพกราฟิก รปู แบบของแฟ้มข้อมูลภาพแบบ Vector ทใ่ี ช้กนั อยา่ งแพร่หลาย ไดแ้ ก่ รูปแบบแฟ้มประเภทWMF ของ Microsoft Office รปู แบบแฟม้ ประเภท DXF ของ AutoDesk รปู แบบแฟ้มประเภทCDR ของโปรแกรม Corel Draw และรูปแบบแฟ้มประเภท TTF (TrueType Font) ของ Windows รูปแบบของแฟ้มข้อมูลภาพแบบ Bitmap ที่ใช้กันอย่างแพร่หลาย ได้แก่ แฟ้มข้อมูลประเภทBMP (Bitmap), GIF (Graphics Interchange Format), TIFF (Tagged Image File Format) และJPG (Joint Photographic Experts Group) รูปแบบของแฟ้มข้อมูลจะแตกต่างกันตามลักษณะของการใชง้ านตารางท่ี 2-1 แฟม้ ขอ้ มลู ภาพที่จัดเก็บขอ้ มูลแบบ Vectorชือ่ ฟอร์แมต ชื่อเต็ม ลกั ษณะของไฟล์.SVG Scalable Vector เปน็ การสร้างภาพกราฟิก 2 มิติ โดยใชร้ ปู แบบภาษา Graphics XML สามารถแสดงภาพ อกั ษร รปู แบบการแสดงผล และการเคลอื่ นไหวได้.DXF Drawing Interchange โปรแกรมชว่ ยด้านการออกแบบ โปรแกรมแก้ไข Format Vector และ Desktop Publishing บางตัว เชน่ AutoCAD, CorelDRAW, Dream 3D, Illustratorตารางท่ี 2-2 แฟม้ ข้อมลู ภาพที่จดั เก็บข้อมลู แบบ Bitmapชือ่ ฟอร์แมต ชื่อเตม็ ลักษณะของไฟล์.PSD Photoshop File เป็นไฟล์พ้นื ฐานของโปรแกรม Photoshop สามารถ เกบ็ บนั ทกึ คุณลักษณะต่าง ๆ ทีใ่ ช้ใน Photoshop ได้ ไมว่ า่ จะเป็นเลเยอร์ สี ฯลฯ เพ่ือเปลย่ี นแปลงแก้ไข ภาพอยา่ งต่อเน่ือง แต่มขี ้อเสยี คอื ใชก้ บั โปรแกรม Photoshop ได้อย่างเดียวเท่านนั้ และมีเน้ือที่ คอ่ นข้างมาก ถา้ จะนาไปใชใ้ นโปรแกรมอน่ื ต้องบันทกึ เปน็ ฟอร์แมตอ่นืหลักการทางานและการจัดการแฟม้ ภาพกราฟิก หน้า 30

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหัส 2204-2105ตารางท่ี 2-2 (ตอ่ ) แฟม้ ขอ้ มูลภาพท่จี ัดเกบ็ ข้อมลู แบบ Bitmapชื่อฟอรแ์ มต ชอื่ เต็ม ลกั ษณะของไฟล์.BMP Windows Bitmap File เปน็ ไฟล์มาตรฐานของระบบปฏิบัตกิ าร Windows ท่ี พบได้บ่อย ๆ คือ ภาพวอลล์เปเปอร์ท่ีแสดงบนจอภาพ ของวินโดวส์ โดยสามารถแสดงไดต้ ง้ั แต่ 2, 16, 256 และ 16 ลา้ นสี.TIF Tagged Image File เปน็ ไฟล์ท่ีสามารถใช้ไดท้ ัง้ ในเครือ่ ง PC และ Mac Format (TIFF) สว่ นใหญใ่ ชง้ านโปรแกรมเกย่ี วกบั ส่ิงพิมพ์ เชน่ PageMaker และ QuarkXpress.GIF Graphics Interchange เปน็ ไฟล์กราฟิกร่นุ แรกทีส่ นับสนุนการนาเสนอบน File Format ระบบเครือขา่ ยอินเทอร์เน็ต เพราะง่ายตอ่ การบีบอดั ข้อมูล ทาใหส้ ่งผ่านข้อมูลทางสายโทรศพั ท์ไดอ้ ย่าง รวดเร็ว รปู แบบของไฟลม์ ีขนาดเล็ก จานวนของสแี ละ ความละเอยี ดไม่สูงมากนกั สามารถทาพื้นแบบโปร่งใส (transparent) ได้ ระบบการแสดงภาพจะเร่ิมแสดงผล แบบหยาบและคอ่ ย ๆ ขยายไปสู่ภาพที่ละเอียดใน ระบบ Interlace แตส่ ามารถแสดงสีได้เพียง 256 สี.JPG Joint Photographic เปน็ ไฟล์ท่ีทาการบบี อดั ขอ้ มลู ให้มีขนาดเล็กแลว้ Experts Group เกบ็ บนั ทึกไว้ นยิ มใช้ในการสร้างเวบ็ บนเครือข่าย อนิ เทอรเ์ น็ต สนบั สนุนสีไดถ้ งึ 24 บิต มีระบบแสดงผล แบบหยาบและค่อย ๆ ขยายไปสูภ่ าพท่ีละเอียดใน ระบบ Progressive แตไ่ ม่สามารถทาใหพ้ น้ื ของ รปู โปรง่ ใสได้.PNG Portable Network เปน็ ไฟล์ทส่ี ามารถยดื หยนุ่ ได้ดี ถ้าต้องการเปลีย่ นแปลง Graphics การทางานในต่าง Application หรอื เปลี่ยนรุ่น คอมพิวเตอร์สนับสนุนสีไดต้ ามค่า True Color เชน่ 16, 32 หรือ 64 บติ สามารถทาพนื้ โปร่งใสได้ แต่ ข้อเสยี คือ หากกาหนดค่าบีบอดั ไฟลไ์ วส้ งู จะใช้เวลา ในการคลายไฟล์สงู ตามไปด้วยหลักการทางานและการจดั การแฟม้ ภาพกราฟกิ หน้า 31

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟกิ รหัส 2204-2105ตารางที่ 2-2 (ตอ่ ) แฟ้มข้อมลู ภาพที่จัดเกบ็ ข้อมูลแบบ Bitmapชือ่ ฟอรแ์ มต ชื่อเตม็ ลกั ษณะของไฟล์.PCX Z Soft PC Paintbrush เปน็ ไฟล์ที่สามารถใช้ได้กับเคร่ือง PC เท่านน้ั Format โปรแกรมกราฟิกส่วนใหญจ่ ะสนับสนนุ รูปแบบ PCX ขนาดของไฟลม์ ีขนาดใหญ่มากและทางานได้ดีกับ 16 หรอื 32 ลา้ นสี.RAW Raw Format เป็นไฟล์ที่พัฒนาต่อจากไฟลป์ ระเภท .GIF โดยมีข้อดี คือจะมีการสูญเสยี น้อยมากเมื่อมกี ารบบี อัดข้อมูล จึงเหมาะสาหรบั การโอนยา้ ยขอ้ มลู (Download)ตารางที่ 2-3 แฟม้ ขอ้ มลู ภาพทีจ่ ดั เก็บขอ้ มูลแบบ Vector และแบบ Bitmapชอ่ื ฟอร์แมต ชือ่ เตม็ ลักษณะของไฟล์.PCT PICT File เป็นไฟลท์ ่ีใชก้ ับงานพิมพ์บนเครอ่ื ง Mac เทา่ น้นั เนือ่ งจากมขี นาดใหญม่ ากเกนิ กวา่ ประสิทธิภาพของ เครื่อง PC จะรบั ได้.WMF Windows MetaFile ไฟล์ WMF นี้มขี ้อเสยี คือไมค่ ่อยมปี ระสิทธิภาพ ในการเกบ็ ภาพ แสดงภาพได้ไม่ถกู ต้อง แต่สามารถ ใชไ้ ดก้ บั โปรแกรมแบบ Vector และโปรแกรมแบบ Bitmap.EPS Encapsulated เป็นไฟล์ทบ่ี รรจุขอ้ มูลเปน็ ได้ท้ังแบบ Vector และแบบ PostScript File Bitmap ทาให้ไฟล์ประเภท .EPS สามารถเชือ่ ม โปรแกรมขา้ มการทางานระหวา่ งโปรแกรมกนั ได้ เชน่ Adobe Illustrator และAdobe Dimensions การย่อและขยายภาพไม่ทาให้สญู เสียความคมชดั เนอื่ งจากมคี วามละเอยี ดสูง.CGM Computer Graphic เปน็ มาตรฐานสากลสาหรบั การแลกเปลยี่ นไฟล์ดา้ น Metafile กราฟิกไปยังเครอ่ื งคอมพิวเตอร์ทม่ี ีระบบแตกต่างกันหลกั การทางานและการจัดการแฟ้มภาพกราฟกิ หน้า 32

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหัส 2204-2105ตารางท่ี 2-3 (ต่อ) แฟ้มขอ้ มูลภาพท่ีจดั เก็บขอ้ มูลแบบ Vector และแบบ Bitmapช่อื ฟอรแ์ มต ชื่อเต็ม ลกั ษณะของไฟล์.PDF Portable Document เป็นไฟล์อเนกประสงค์ทสี่ ามารถทางานขา้ มโปรแกรม Format ข้ามระบบปฏบิ ัตกิ าร แต่แสดงผลขอ้ มลู ไดอ้ ย่างแมน่ ยา ไมว่ ่าจะเปน็ เรื่องฟอนต์ การวางเลยเ์ อาต์ รวมท้ังภาพท่ี เปน็ แบบ Vector และแบบ Bitmap นอกจากนย้ี ัง สามารถใชบ้ รรจรุ ูปแบบเอกสารอิเลก็ ทรอนิกส์ทาให้ สามารถคน้ หาและเชือ่ มโยงข้อมลู ได้ โดยสว่ นใหญ่ มักเปน็ ไฟลพ์ นื้ ฐานของโปรแกรม Adobe Illustrator, Adobe Acrobat และ Adobe Photoshop2.3 ความแตกตา่ งระหว่างภาพกราฟิกแบบ Vector และ Bitmap ความแตกต่างระหว่างกราฟิกแบบ Vector และ Bitmap ภาพกราฟิกแบบ Vector ใช้สมการทางคณิตศาสตรเ์ ปน็ ตวั สร้างภาพ โดยรวมเอา Object เชน่ วงกลม เส้นตรงตา่ งชนิดมาผสมกันสามารถย่อและขยายขนาดได้มากกวา่ โดยสัดสว่ นและลกั ษณะของภาพยงั เหมือนเดมิ ความละเอยี ดภาพไมเ่ ปล่ยี นแปลงเหมาะสาหรบั งานแบบวาง Layout งานการพมิ พต์ ัวอักษรลักษณะ ภาพกราฟกิแบบ Bitmap ประกอบข้ึนด้วยจดุ ตา่ ง ๆ มากมายภาพมจี านวน Pixel คงทจี่ ึงต้องการค่าความละเอียดมากขึ้นเม่ือขยายภาพ โดยจะคานวณค่าสที ีละ pixel ทาใหภ้ าพแตกเมื่อขยายภาพให้ใหญ่เหมาะสาหรบั งานกราฟิกในแบบทีต่ อ้ งการใหแ้ สงเงาภาพตารางท่ี 2-4 ความแตกต่างระหว่างไฟลภ์ าพกราฟิกแบบ Vector และ Bitmapภาพกราฟกิ แบบ Vector ภาพกราฟิกแบบ Bitmap1. ภาพถกู สรา้ งด้วยจุดของเส้นหลาย ๆ จุด 1. ภาพกราฟิกที่เกิดจากจุดสีเ่ หลย่ี มเล็ก ๆเป็นลักษณะเส้นโครงร่าง (Outline) และสี หลากหลายสี เรยี กว่า Pixel มาเรยี งตอ่ กันของภาพก็เกดิ จากสีของเสน้ โครงรา่ งนั้น ๆ เป็นภาพกับพืน้ ผิวภายใน2. สามารถย่อและขยายได้มากกว่า 2. ภาพมีจานวนพิกเซลคงทีจ่ งึ ต้องการค่าโดยสัดส่วนลกั ษณะของภาพ และ ความละเอยี ดมากขนึ้ เมื่อขยายภาพความละเอียดไม่เปลีย่ นแปลง โดยจะคานวณคา่ สีทีละพกิ เซลทาให้ ภาพแตกเมอ่ื ขยายภาพให้ใหญ่หลกั การทางานและการจดั การแฟม้ ภาพกราฟิก หนา้ 33

เอกสารประกอบการเรยี นวิชาโปรแกรมกราฟิก รหัส 2204-2105ตารางที่ 2-4 (ตอ่ ) ความแตกตา่ งระหวา่ งไฟล์ภาพกราฟิกแบบ Vector และ Bitmapภาพกราฟกิ แบบ Vector ภาพกราฟิกแบบ Bitmap3. เหมาะกับงานออกแบบตา่ ง ๆ เช่น 3. การตกแต่งและแก้ไขภาพ สามารถทาได้งา่ ยงานสถาปัตย์ ออกแบบโลโก้ เป็นตน้ และสวยงาม เชน่ การปรบั สีผิวหนา้ และ ปรบั ผวิ กายใหข้ าวเนยี นขน้ึ4. คอมพวิ เตอร์จะใชเ้ วลาในการแสดงภาพ 4. แสดงภาพบนจอทันที เม่ือรับคาสัง่ ยา้ ยมากกวา่ เน่ืองจากต้องทาตามคาสั่งท่ีมี ขอ้ มูลจากหน่วยความจาทเี่ ก็บภาพไปยังจานวนมากกว่า หน่วยความจาของจอภาพ2.4 ข้อควรคานงึ ในการจัดเกบ็ แฟม้ ภาพกราฟกิ 1. เลอื กใช้จานวนสใี หเ้ หมาะสม การใชจ้ านวนสมี ากจะทาให้ได้ภาพทีม่ ีคุณภาพสงู แต่จะส้นิ เปลืองเน้อื ท่ีในการเกบ็ ข้อมลู ดังน้ันการเลือกใช้จานวนสีทเ่ี หมาะสมกับภาพจะทาใหเ้ ปลืองเนื้อท่ีนอ้ ยและส่งผลให้สามารถประมวลผลภาพไดเ้ ร็วขึ้น ตวั อย่างเชน่ ภาพทีใ่ ช้จานวนสี 16 ลา้ นสี(24 บิต) ต้องการเนอ้ื ท่ีตอ่ จุดเปน็ 3 เท่าของภาพท่ีใชจ้ านวนสี 256 สี ภาพบางภาพที่เป็นแผนภูมิอาจใช้จานวนสี 16 สี กเ็ พียงพอ 2. เลือกรูปแบบแฟม้ ขอ้ มูลกราฟิกทที่ าให้การจดั เกบ็ ขอ้ มลู มีขนาดลดลง รูปแบบแฟ้มขอ้ มูลกราฟิกมีผลขนาดของแฟ้มข้อมลู เชน่ รปู แบบแฟม้ ข้อมลู กราฟกิ แบบ .bmp ถกู ออกแบบมาเพื่อให้นาแสดงผลไดร้ วดเร็ว แฟ้มเหลา่ นจ้ี ะกินเนื้อที่มาก รปู แบบแฟม้ ขอ้ มลู กราฟิกแบบ .jpeg มีผลให้คณุ ภาพของภาพด้อยลง แต่ลดขนาดแฟ้มภาพกราฟิกให้มขี นาดหนึ่งในสามของรปู แบบแฟม้ ข้อมูลกราฟิกแบบ .gif ในขณะทรี่ ปู แบบแฟ้มข้อมูลกราฟกิ แบบ .gif เก็บจานวนสี 256 สี ดงั น้นั ควรเลอื กรปู แบบแฟ้มข้อมูลกราฟกิ ท่ีเหมาะสมกบั การใชง้ านเพ่ือจะได้ไมส่ ้ินเปลืองเนือ้ ทใี่ นการจัดเก็บภาพกราฟิก 3. เลอื กใช้โปรแกรมบีบอดั ข้อมูล ในกรณีท่ีไมส่ ามารถเก็บภาพในรูปแบบแฟ้มท่ลี ดขนาดข้อมลูการเลอื กใชโ้ ปรแกรมบีบอัดข้อมลู บางตัว เชน่ pkzip, winzip หรอื winrar จะชว่ ยลดขนาดข้อมูลในการจัดเกบ็ ลงแฟ้มได้หลกั การทางานและการจัดการแฟ้มภาพกราฟิก หนา้ 34

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหสั 2204-21052.5 ความละเอียดของภาพ (Image Resolution) คอื ค่าความละเอยี ดของภาพ โดยปกตจิ ะมีขนาดวัดเปน็ จุดตอ่ นิ้ว (dpi) Resolution มากหรือน้อยข้นึ อยกู่ ับ display ท่ภี าพนั้นแสดง เชน่ มีภาพขนาด 1,600 x 1,200 pixel จอคอมพิวเตอร์จะมีความละเอียดประมาณ 72 dpi ถา้ จะใชค้ อมพวิ เตอร์ท่สี ามารถแสดงภาพน้ีไดท้ ้ังภาพต้องใชจ้ อภาพขนาดกวา้ ง 1,600/72 น้ิว x สงู 1,200/72 นิว้ ประมาณ 23 x 17 นว้ิ เหตุผลท่ีจอภาพใช้Resolution 72 dpi เพราะขีดจากัดด้านฮาร์ดแวร์เน่อื งจากจอภาพใช้การเปล่งแสงในการแสดงสีหากใชค้ ่ามากกวา่ น้จี ะต้องใช้ต้นทนุ และความร้อนสูงข้ึนมาก ในขณะทงี่ านด้านการพมิ พท์ ีต่ ้องใช้ Resolution สูงเพราะขนาดหยดหมกึ ของเครอ่ื งพมิ พ์ในปัจจบุ ันมขี นาดท่ีเล็กมาก ๆ ดงั น้นั ในระยะทาง 1 นวิ้ เราใช้จานวนเมด็ สีนอ้ ย (dpi นอ้ ย) ภาพท่ีได้ก็จะหยาบกวา่ ภาพท่ีใช้จานวนเม็ดสมี ากในระยะทาง 1 น้ิวเท่ากนั (dpi มาก) การต้ังค่า Resolution หรือการต้ังค่าความละเอียดของงานน้ัน ต้องตัง้ ใหเ้ หมาะกบั งานคือถ้าจะนาภาพที่ทาไปใชใ้ นสื่อไหนกต็ ั้งตามความเหมาะสม ดังนี้ งานส่งิ พิมพ์ ต้ังคา่ Resolution = 300 dpi งานเว็บไซต์ ตง้ั คา่ Resolution = 72 dpi งานแอนิเมชนั ตั้งคา่ Resolution = 72 dpi การตั้งค่า Resolution น้อยกว่ามาตรฐานจะทาใหภ้ าพที่ออกมาแตก และเบลอ หากตั้งมากกว่ามาตรฐานจะทาใหเ้ ปลอื ง RAM ในการทางานย่ิงงานท่มี เี ลเยอร์มาก (จานวนชั้นของภาพมาก)จะทาใหเ้ คร่อื งคอมพิวเตอร์ทางานได้ช้าลง อีกท้ังไม่ไดท้ าให้ภาพชดั ขึน้ ความจุของสี (Color Capability) หมายถึง จานวนบติ ข้อมูลท่ีเก็บรายละเอยี ดเกีย่ วกบั สีของพกิ เซลหนึ่ง ๆ โดยเป็นค่าจานวนบติ ที่มากทสี่ ุดที่พิกเซลอนั นั้นเกบ็ ได้ ใน Photoshop เรยี กวา่Color Mode ซึ่งหมายถงึ จานวนบิตทม่ี ากที่สดุ ทีส่ ามารถบนั ทึกลงในไฟล์ได้ บิต (Bit) ย่อมาจาก Binary Digit หมายถงึ หนว่ ยความจาท่ีมีขนาดเลก็ ทีส่ ุดของคอมพิวเตอร์ประกอบด้วยตัวเลข 2 จานวน คือ 0 และ 1 โดยจานวนบิตทใี่ ช้ในแตล่ ะพิกเซล เรยี กวา่ ความลกึ ของบิต (Bit Depth) สาหรบั กราฟิกแบบ Raster ในการเกบ็ รวบรวมขอ้ มูลก็สามารถใช้สีได้ท้ังหมด256 สี เป็นต้นหลักการทางานและการจัดการแฟม้ ภาพกราฟกิ หนา้ 35

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟกิ รหัส 2204-21052.6 หลักการใช้สแี ละแสงในคอมพวิ เตอร์จอภาพคอมพิวเตอรส์ ามารถแสดงผลของภาพในรปู แบบสีโหมดตา่ ง ๆ ซ่ึงแบง่ หลักการใช้สีและแสงในคอมพิวเตอร์ทใี่ ช้งานดา้ นกราฟกิ ทั่วไปแบ่งเป็นโหมด (Mode) สี 4 แบบ คือ2.6.1 โหมดสแี บบ RGB Color โมเดลนไ้ี ด้แนวคิดมาจากการผสมแสงสีหลัก 3 สเี ขา้ ด้วยกนัคือ แดง (Red) เขียว (Green) และน้าเงิน (Blue) จะทาให้เกดิ สตี ่าง ๆ ไดจ้ านวนมาก โดยขนึ้ กับสดั สว่ นความเขม้ ของสีหลักแตล่ ะสีมีคา่ ให้ตั้งแต่ 0-255 (ในระบบสที ่ีใช้ข้อมูลแบบ 8 บิต) และเมอ่ื สหี ลักท้ังสามที่มีความเข้มขน้ สงู สุดมาผสมกันก็จะไดส้ ีขาว ซง่ึ ลักษณะเชน่ นเ้ี รียกวา่ การผสมสีแบบบวก (Additive color system)สว่ นใหญ่โมเดลนจ้ี ะใช้กบั อุปกรณ์ทเ่ี กี่ยวกับแสง เชน่ จอภาพและกลอ้ งดจิ ทิ ลั กลา่ วคือจุดสแี ต่ละพิกเซลบนหน้าจอจะเกิดจากการสรา้ งจุดสียอ่ ย ๆ ของสแี สงหลักทงั้ สามข้างต้น เพ่ือให้เกิดการผสมกนั เปน็ พกิ เซลสตี ่าง ๆ แดงเหลอื ง ม่วงเขียว นา้ เงนิ ฟา้ ขาว รปู ภาพ 2-3 โหมดสแี บบ RGB Color ทมี่ า : อรทยั เลศิ ขนุ ทด (2559)หลกั การทางานและการจัดการแฟ้มภาพกราฟกิ หน้า 36

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหสั 2204-2105 2.6.2 โหมดสแี บบ CMYK Color โมเดลน้เี กิดขึน้ จากระบบการพิมพ์แบบแยกสี โดยภาพจะถกู แยกออกเปน็ แม่พิมพข์ องสีหลักเพยี ง 4 สี คอื สฟี ้า (Cyan) สมี ่วงแดง (Magenta) สเี หลอื ง(Yellow) และสีดา (Black) เม่อื พมิ พส์ ีเหล่านซี้ ้อนกันจะได้ภาพบนหนา้ กระดาษตามตน้ ฉบับค่าของสหี ลกั ในโมเดลนี้อย่ใู นรูปแบบเปอร์เซน็ ต์ของนา้ หนักหมกึ พิมพต์ ัง้ แต่ 0-100% นา้ เงิน ฟ้า มว่ ง ดาเขยี ว แดง เหลืองรูปภาพ 2-4 โหมดสีแบบ CMYK Color ทีม่ า : อรทัย เลศิ ขุนทด (2559) 2.6.3 โหมดสแี บบ HSB Color คอื หลักการมองเห็นสดี ้วยสายตาของมนุษย์ จะประกอบขึ้นดว้ ยลกั ษณะของสี 3 ลกั ษณะ คือ 1. Hue เปน็ สีท่สี ะท้อนมาจากสขี องวตั ถซุ ึง่ แตกต่างกนั ตามความยาวของคล่นื แสงทีม่ ากระทบวตั ถุ และสะท้อนกลบั มาทีต่ าของเรา Hue ถูกวัดโดยตาแหนง่ บน Standard Color Wheelซงึ่ ถูกแทนดว้ ยองศาคือ 0 ถึง 360 องศา แตโ่ ดยการใชท้ ว่ั ไปแล้วจะเปน็ การเรยี กสีน้ันเลย เชน่ สีแดงสีม่วง สเี หลือง 2. Saturation เป็นคา่ ของความเขม้ ข้นและความจางของสี Saturation คือสัดส่วนของสี Hue ที่มีอยใู่ นสเี ทา วัดคา่ เปน็ เปอร์เซน็ ต์ ดังน้ี คือจาก 0% (สเี ทา) จนถึง 100%(Full saturation สีท่มี ีความอม่ิ ตวั เต็มที่) 3. Brightness เปน็ คา่ ของความสวา่ งและความมืดของสี ซ่งึ ถูกกาหนดค่าเป็นเปอรเ์ ซน็ ต์จาก 0% (สีดา) ถึง 100% (สขี าว)หลักการทางานและการจัดการแฟม้ ภาพกราฟิก หนา้ 37

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-2105 Saturation Brightness รปู ภาพ 2-5 โหมดสแี บบ HSB Color ท่ีมา : http://www.tomjewett.com 2.6.4 โหมดสีแบบ LAB Color คือ โหมดสีท่ีมีช่วงความกว้างในการแสดงสีได้สูงท่ีสุดเทยี บเทา่ กบั สดี วงตาของมนษุ ย์สามารถรับได้ โดยแบง่ ออกเป็น 3 สว่ นคือ 1. “L”หรือ Luminance การกาหนดค่าความสวา่ ง ซ่งึ มคี ่าต้งั แต่ 1 ถงึ 100 ถา้ กาหนดท่ี 0 จะกลายเปน็ สดี า แตถ่ า้ กาหนดที่ 100 จะกลายเปน็ สขี าว 2. “A” เป็นค่าของสที ่ีไลจ่ ากสีเขียวไปสแี ดง 3. “B”เป็นคา่ ของสที ไ่ี ลจ่ ากสนี ้าเงินไปสีเหลือง White L* Yellow Red Green +b* +a* -a* หน้า 38 Blue -b* Black รูปภาพ 2-6 โหมดสีแบบ LAB Color http://www.tomjewett.comหลักการทางานและการจัดการแฟ้มภาพกราฟกิ

เอกสารประกอบการเรียนวชิ าโปรแกรมกราฟิก รหัส 2204-21052.7 การจดั เตรยี มรปู ภาพเพื่อนามาใช้งาน รูปภาพเปน็ สว่ นประกอบท่ีสาคญั อยา่ งหนึง่ ของงาน เพราะต้องทาใหง้ านที่สร้างจากรูปภาพเดมิ น้ันดนู ่าสนใจขน้ึ โดยปกติแล้วรปู ภาพที่นิยมนามาประกอบงานที่นยิ มใชก้ ันมากในปจั จุบนัมดี ว้ ยกัน 2 นามสกุล คือ ไฟล์นามสกลุ JPG (JPEG) และ GIF การจัดเตรยี มรูปภาพท่ีนามาใชง้ านน้ันสามารถจัดเตรยี มได้หลายวธิ ี ซึ่งการจดั หารปู ภาพต้องทาก่อนการสรา้ งงานนาเสนอ และบนั ทึกในตาแหน่งทง่ี า่ ยต่อการจดจา การจดั เตรยี มรูปภาพเพ่ือนามาใช้ โดยทว่ั ไปสามารถทาไดด้ ังน้ี 1. สรา้ งรูปภาพโดยโปรแกรมกราฟิกตา่ ง ๆ เช่น Photoshop, Corel Draw เปน็ ตน้ในการสรา้ งแฟม้ ข้อมลู รปู ภาพ ซ่ึงจะได้ภาพที่ตรงกับความตอ้ งการ แตใ่ ชเ้ วลาในการสร้างภาพมากขน้ึ 2. เลอื กรปู ภาพจากชดุ ภาพสาเรจ็ รูป ทม่ี ีการวางจาหนา่ ยในลกั ษณะคลังรูปภาพสาหรับทาเวบ็ เพจ (Web ClipArt) ซงึ่ จะสะดวกรวดเรว็ และง่ายต่อการใช้งาน แต่อาจจะได้ภาพที่ไม่ตรงกับความตอ้ งการมาก 3. นารปู ภาพจากโปรแกรมอ่ืน หรือเวบ็ เพจอืน่ มาใช้งาน ซึ่งสะดวกรวดเร็วต่อการใช้งานเชน่ กัน แตอ่ าจเกิดปัญหาด้านลขิ สิทธิ์ของภาพ 4. รูปทีไ่ ด้จากการใช้กล้องดิจิตอลถา่ ยภาพด้วยตนเอง หรือรปู ภาพทไ่ี ด้มาจากการสแกนโดยใชเ้ ครอ่ื งสแกนจะไดร้ ปู ภาพทตี่ รงกับความต้องการรูปภาพ 2-7 แสดงการเลอื กรูปภาพจากเว็บเพจอืน่ มาใชง้ าน ท่มี า : http://google.comหลักการทางานและการจดั การแฟม้ ภาพกราฟิก หน้า 39

เอกสารประกอบการเรยี นวชิ าโปรแกรมกราฟกิ รหัส 2204-2105สรุปสาระสาคญั ภาพกราฟกิ ท่ีใช้กับคอมพิวเตอรแ์ บง่ เป็น 2 แบบ คือ ภาพกราฟิกแบบ Vector และภาพกราฟกิ แบบ Bitmap โดยภาพกราฟิกแบบ Vector ใช้สมการทางคณติ ศาสตรเ์ ปน็ ตัวสร้างภาพโดยรวมเอา Object เชน่ วงกลม เส้นตรงตา่ งชนิดมาผสมกันสามารถย่อและขยายขนาดได้มากกว่าโดยสดั สว่ นและลักษณะของภาพยงั เหมือนเดิมความละเอยี ดภาพไมเ่ ปลย่ี นแปลง ส่วนภาพกราฟกิแบบ Bitmap ประกอบข้นึ ดว้ ยจุดต่าง ๆ มากมายภาพมจี านวน Pixel คงที่จงึ ต้องการค่าความละเอยี ดมากขนึ้ เม่อื ขยายภาพ โดยจะคานวณค่าสที ีละ pixel ทาใหภ้ าพแตกเมื่อขยายภาพให้ใหญ่ เหมาะสาหรบั งานกราฟิกในแบบท่ตี ้องการใหแ้ สงเงา หลกั การใช้สีในการออกแบบภาพกราฟกิ มี 4 แบบ คือ โหมดสีแบบ RGB Color โหมดสแี บบ CMYK Color โหมดสแี บบ HSBColor และโหมดสแี บบ LAB Color การจัดเตรยี มรปู ภาพทน่ี ามาใช้งานน้ันสามารถจัดเตรียมได้หลายวธิ ี อาทิ สร้างรูปภาพโดยโปรแกรมกราฟิกต่าง ๆ เลอื กรปู ภาพจากชุดภาพสาเร็จรูป นารปู ภาพจากโปรแกรมอน่ื หรือเวบ็ เพจอื่นมาใช้งาน รปู ทีไ่ ด้จากการใชก้ ลอ้ งดจิ ติ อลหลักการทางานและการจัดการแฟ้มภาพกราฟิก หน้า 40

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหัส 2204-2105 แบบฝึกหดั ทา้ ยหนว่ ยการเรยี นรู้ที่ 2 เรื่อง หลักการทางานและการจดั การแฟ้มภาพกราฟกิคาส่งั จงตอบคาถามตอ่ ไปนใ้ี หส้ มบรู ณท์ ่สี ดุ 1. อธบิ ายรูปแบบของภาพกราฟกิ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… 2. บอกประเภทและคุณลกั ษณะของแฟม้ ภาพกราฟกิ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… 3. จาแนกความแตกตา่ งระหว่างภาพกราฟิกแบบ Vector และ Bitmap……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… 4. บอกข้อควรคานึงในการจัดเกบ็ แฟ้มภาพกราฟิก……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… 5. อธิบายความละเอียดของภาพ (Image Resolution)……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… 6. บอกการใช้สแี ละแสงในคอมพิวเตอร์……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… 7. จัดเตรยี มรปู ภาพเพื่อนามาใชง้ าน………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………หลกั การทางานและการจัดการแฟม้ ภาพกราฟกิ หน้า 41

เอกสารประกอบการเรียนวิชาโปรแกรมกราฟิก รหัส 2204-2105 ใบงานทา้ ยหน่วยการเรียนรู้ท่ี 2 เรอื่ ง หลักการทางานและการจดั การแฟ้มภาพกราฟกิจุดประสงค์ 1. อธบิ ายรูปแบบของภาพกราฟิกได้ 2. บอกประเภทและคุณลักษณะของแฟ้มภาพกราฟกิ ได้ 3. จาแนกความแตกตา่ งระหว่างภาพกราฟิกแบบ Vector และ Bitmap ได้ 4. บอกข้อควรคานึงในการจดั เก็บแฟ้มภาพกราฟิกได้ 5. อธบิ ายความละเอียดของภาพ (Image Resolution) ได้ 6. บอกการใชส้ ีและแสงในคอมพวิ เตอร์ได้ 7. จดั เตรยี มรปู ภาพเพ่ือนามาใช้งานได้ข้ันตอนการปฏิบตั ิงาน 1. แบ่งนักเรยี นเปน็ 6 กล่มุ 2. ให้นักเรียนค้นหาข้อมูลจากอินเตอร์เน็ต หรือสื่อต่าง ๆ แล้วสรุปประเด็นตามหัวข้อต่อไปนี้พรอ้ มทง้ั จดั ทาเอกสารนาเสนอหน้าชัน้ เรียน 2.1 รูปแบบของภาพกราฟิก 2.2 ประเภทและคุณลักษณะของแฟ้มภาพกราฟิก 2.3 ความแตกต่างระหว่างภาพกราฟิกแบบ Vector และ Bitmap 2.4 ข้อควรคานึงในการจดั เก็บแฟ้มภาพกราฟิก 2.5 ความละเอยี ดของภาพ (Image Resolution) 2.6 หลักการใชส้ แี ละแสงในคอมพิวเตอร์ 2.7 การจดั เตรยี มรูปภาพเพื่อนามาใชง้ าน3. สง่ ตวั แทนกลุม่ นาเสนอหนา้ หอ้ งเรยี น กลุ่มละ 5 นาทีหลักการทางานและการจดั การแฟ้มภาพกราฟิก หน้า 42