ใบความรู้สอบ อาชีวศึกษา

เอกสารประกอบการสอน วชิ าโปรแกรมกราฟิก รหัสวชิ า 20204-2007 หนว่ ยการเรยี นรูท้ ่ี 2 เรือ่ ง หลกั การของภาพกราฟิก แบบ Vector และ Bitmap ปวช.ประกาศนียบัตรวชิ าชพี แอนนา กาทอง ครผู ้สู อน สำนกั งำนคณะกรรมกำรกำรอำชวี ศึกษำ กระทรวงศกึ ษำธิกำร SCAN sites.google.com/view/kruanna27 เอกสำรประกอบกำรสอน

สาระสาคัญ ภาพกราฟิกสามารถแบ่งได้เป็นภาพ Bitmap และ Vector มีหลักการ คุณลักษณะและ รูปแบบการใช้งานท่ีแตกต่างกัน หากต้องการสามารถสร้าง ภาพกราฟิกได้ดีต้อง มีความรู้ความเข้าใจ และสามารถเลือกใช้งานชนิดของ ภาพไดอ้ ยา่ งถูกต้องด้วย จุดประสงคข์ องบทเรียน 1. อธิบายหลักการของภาพกราฟิกแบบ Bitmap ได้ 2. สามารถอธิบายหลกั การของภาพกรฟิกแบบ Vector 3. อธบิ ายความแตกต่างระหวา่ งภาพกราฟกิ แบบ Bitmap และ Vector  Google Classroom รหัสวชิ า 20204-2007 วชิ าโปรแกรมกราฟิก ระดับประกาศนียบัตรวิชาชีพ (ปวช.)

ใหน้ ักเรียนเลือกคำตอบทถ่ี ูกตอ้ ง ท่สี ดุ เพยี งข้อเดียว 1. สกุลใดทเ่ี ก็บไฟลภ์ ำพกรำฟกิ แบบ Bitmap ก. .jpeg ข. .EPS ค. .WMF ง. .CDR 2. จดุ สสี ่ีเหลยี่ มเล็กๆที่ประกอบข้นึ เป็นภำพ เรยี กวำ่ ก. Bitmap ข. Raster ค. Pixel ง. Vector 3. นำมสกลุ ใดทใ่ี ชเ้ กบ็ ไฟล์ภำพกรำฟกิ แบบ Vector ก. .jpeg ข. .GIF ค. .TIFF ง. EPS 4. ข้อใดไม่ถกู ตอ้ งเกย่ี วกบั ภำพกรำฟกิ แบบ Bitmap ก. .เป็นภำพกรำฟกิ ทเ่ี กดิ จำกกำรนำจุดสีรูปสีเ่ หลย่ี มเล็กๆ มำเรียงตอ่ ข. เป็นภำพกรำฟกิ ท่ีไดจ้ ำกภำพถ่ำยและภำพจำกกำรแสกน ค. ภำพกรำฟิกแบบ bitmap เรยี กอีกอย่ำงว่ำ Raster ง. ภำรกรำฟกิ แบบ Bitmap จะเป็นภำพท่ีไม่ขน้ึ อยูก่ ับควำมละเอียด 5. ข้อใดไม่ถูกต้องเก่ยี วกบั ภำพกรำฟกิ แบบ Vector ก. ภำพกรำฟกิ ท่เี กิดจำกเส้นตรงและเส้นโค้ง ข. ภำพแบบVectorภำพท่ไี ม่ขึน้ อย่กู บั ควำมละเอียด ค. เปน็ ภำพท่ไี ดจ้ ำกภำพถำ่ ยและภำพจำกกำรสแกน ง. เหมำะสำหรบั ภำพกรำฟิกที่ตอ้ งมีกำรเปลยี่ นขนำด ควำมเหมำะสมเม่ือนำไปใช้งำนจริง

ภาพท่ีเกิดบนจอคอมพิวเตอร์ เกิดจากการทางาน ของโหมดสี RGB ซึ่งประกอบด้วยสีแดง (Red) สีเขียว (Green) และสีนาเงิน (Blue) โดยใช้หลักการยิงประจุ ไฟฟ้าให้เกิดการเปล่งแสงของสีทัง 3 สีมาผสมกันทาให้ เกิดเป็นจุดสีสี่เหลี่ยมเล็ก ๆ ที่เรียกว่า พิกเซล (Pixel) ซ่ึง มาจากคาว่า Picture กับ Element โดยพิกเซลจะมี หลากหลายสี เม่ือนามาวางต่อกันจะเกิดเป็นรูปภาพ ซ่ึง ภาพที่ใช้กับเครื่องคอมพิวเตอร์มี 2 ประเภท คือ แบบ Raster และแบบ Vector รหัสวชิ า 20204-2007 วชิ าโปรแกรมกราฟิก ระดับประกาศนยี บัตรวิชาชพี (ปวช.)

เป็นภาพกราฟิกที่เกิดจากการเรียงตัวกัน ของจุดส่ีเหลี่ยมเล็กๆหลากหลายสี ซ่ึงเรียกว่า พิกเซล (Pixel) ในการสร้างแบบกราฟิกแบบ Raster จะต้องกาาหนดจานวนของพิกเซลให้กับ ภาพที่ต้องการสร้าง ถ้ากาหนดจานวนพิกเซล น้อย เมื่อขยายภาพให้มีขนาดใหญ่ขึนจะทาให้ มองเห็นภาพเป็นจุดสีเ่ หลยี่ มเล็กๆ หรือถา้ กาหนด จานวนพิกเซลมากก็จะทาให้แฟ้มภาพมีขนาด ใหญ่ ดังนันการกาหนดพิกเซลจึงควรกาหนด จานวนพิกเซลใหเ้ หมาะกบั งานทสี่ รา้ ง ไฟล์ภาพนามสกุล. BMP, . PCX. , .TIF, .GIF, . JPG รหสั วชิ า 20204-2007 วชิ าโปรแกรมกราฟกิ ระดับประกาศนียบตั รวชิ าชพี (ปวช.)

ภ า พ ที่ น า ม า ใ ช้ กั บ โ ป ร แ ก ร ม Adobe Photoshop ส่วนมากจะเป็น ภาพเหมอื น ภาพถ่าย และไฟล์ ท่ีได้จากโปรแกรม Adobe Photoshop จะเป็น Bitmap แต่หากสร้างไฟล์แบบ Vector รู ป ภ า พ ที่ ไ ด้ จ ะ เ ห มื อ น ภ า พ การ์ตูนหรือภาพเขยี น ภาพกราฟิก 2 มิติแบบ Bitmap และ แบบ Vector มคี วามแตกต่างกันดงั นี รหัสวิชา 20204-2007 วิชาโปรแกรมกราฟกิ ระดบั ประกาศนียบตั รวชิ าชีพ (ปวช.)

น อ ก จ า ก โ ป ร แ ก ร ม Adobe Photoshopที่มี คว า มส า มา รถ ใ นก า ร ต ก แ ต่ ง ภ า พ ก ร า ฟิ ก Bitmapแ ล้ ว ยั ง มี โ ป ร แ ก ร ม อื่ น ๆ ที่ มี ค ว า ม ส า ม า ร ถ เหมือนกับโปรแกรม Adobe Photoshop ซ่ึ ง เ ป็ น โ ป ร แ ก ร ม ใ น โ ท ร ศั พ ท์ เ ช่ น โปรแกรม PicsArt, MOLDIV, Line ฯลฯ ก็ ต ก แ ต่ ง ภ า พ ก ร า ฟิ ก Bitmapใ ห้ สวยงามได้ โดยส่วนใหญ่นามสกุลท่ีใช้ เกบ็ เป็นไฟลน์ ามสกุล .jpg ภาพ Bitmap ทไี่ ดจ้ ากโปรแกรม PicsArt ซ้อนภาพในวงกลม ภาพ Bitmap ทีไ่ ดจ้ ากโปรแกรม Line แสดงช่อื รา้ นและวนั ที่ รหัสวชิ า 20204-2007 วิชาโปรแกรมกราฟิก ระดับประกาศนียบตั รวิชาชีพ (ปวช.)

ภาพเวกเตอร์เป็นภาพท่ีสรา้ งด้วยลายเส้น เช่น เส้นตรง เส้นโค้ง และคุณสมบัติเก่ียวกับสี ของเส้นท่ีได้จากการคานวณทางคณิตศาสตร์ เชน่ ภาพของตัวการ์ตูนท่ีสร้างขึนมาจากจุดของ เส้นหลายจุด และสีของตัวการ์ตูนก็เกิดจากสี ของเส้นนัน ๆ เมื่อมีการแก้ไขภาพก็จะเป็นการ แก้ไขคุณสมบัติของเส้น เม่ือเราขยายภาพจะ ไม่ทาาให้ภาพสูญเสียความละเอียดเหมือนภาพ บิตแมป .ai .eps .wmf รหสั วชิ า 20204-2007 วชิ าโปรแกรมกราฟกิ . svg ระดบั ประกาศนียบตั รวชิ าชพี (ปวช.)

ภาพกราฟิกแบบเวกเตอร์จะ ใช้การคานวณทางคณิตศาสตร์ใน การกาหนดโครงร่าง และจัดเก็บ ไฟล์ภาพในลักษณะของตัวแปร ทางคณิตศาสตร์เป็นผลให้ไฟล์มี ขนาดเล็ก ส่วนโครงร่างประกอบ ขึ น จ า ก เ ส้ น ต ร ง แ ล ะ เ ส้ น โ ค้ ง เรียกว่า ภาพลายเส้น (Draw type graphics) ลกั ษณะของภาพกราฟิกแบบเวกเตอร์ ลักษณะเด่นของไฟล์ภาพนีคือ เม่ือภาพถูกพิมพ์ออกท่ีเครื่องพิมพ์จะมี ขอบภาพที่คมชัดมากภาพแบบเวกเตอร์นิยมใช้ในการออกแบบงานโลโก้ อักษรศิลป์ งานภาพเขียน ซึ่งคุณภาพของภาพนันจะไม่ขึนอยู่กับอัตราการ ขยาย (Resolution - independent) หมายถึง เมื่อภาพถูกขยายให้ใหญ่ขึน คุณภาพของภาพจะยังคงเดิม แต่ลักษณะของภาพจะดูเป็นภาพวาด ซ่ึง แบ่งออกได้ดังนี รหัสวิชา 20204-2007 วชิ าโปรแกรมกราฟกิ ระดับประกาศนียบัตรวชิ าชีพ (ปวช.)

ภ า พ โ ล โ ก้ ท วิ ต เ ต อ ร์ จ า ก เ ว็ บ ไ ซ ต์ ท วิ ต เ ต อ ร์ เ ป็ น บ ริ ก า ร เครือข่ายสังคมออนไลน์จาพวกไมโค รบลอ็ ก เมื่อพจิ ารณาพบว่าขนาดของ ภาพเวกเตอร์ 100% ภาพมีความ คมชัดปกติ เม่ือมีการขยายขนาด เพิ่มขึนจาก 100% เป็น 300% ภาพก็ ยั ง มี ค ว า ม ค ม ชั ด เ ห มื อ น เ ดิ ม ไ ม่ เปล่ียนแปลง เ ม่ื อ พิ จ า ร ณ า ภ า พ ก ร ะ ต่ า ย จ า ก โปรแกรม Adobe Photoshop ท่ีสร้างขึน จากเครื่องมือ Custom Shape Tool พบว่าขนาดภาพของกระต่ายที่ใหญ่ขึนมี ความคมชัดปกติ เมื่อคลิกที่ตัวกระต่าย โปรแกรมจะแสดงจุด และเส้นที่ได้จาก การคานวณทางคณิตศาสตร์ซึ่งตรงกับ หลักการของภาพกราฟิกแบบเวกเตอร์ จึงถือว่าภาพกระต่ายเป็นภาพกราฟิก แบบเวกเตอร์ รหสั วชิ า 20204-2007 วิชาโปรแกรมกราฟิก ระดบั ประกาศนยี บตั รวิชาชพี (ปวช.)

จากภาพชุดแบบตัวอักษรในคอมพิวเตอร์ ชื่อ Tahomaมีขนาด 10 Point, 100 Point และ 200 Point จะเห็นว่าตัวอักษร “ก” ไม่ว่าจะมีขนาด ใดก็ตามก็มีความคมชัดไม่เปล่ียนแปลง ดังนัน ชุด แบบตัวอักษรในคอมพิวเตอร์จึงถือว่าเป็นภาพ เวกเตอร์ จากภาพวาดบลูด็อกโลโก้ พบว่าภาพท่ีมี ขนาดใหญ่ขึนนันยังคงคมชัด เม่ือสังเกตขอบภาพท่ี เปน็ สดี าจะเหน็ ถึงความคมชัดสูง หากนาไปพิมพ์เป็น สติกเกอร์หรือโลโก้ป้ายร้านจะมีความคมชัดสูงมาก จึงถือว่าภาพวาดบลูด็อกโลโก้นีเป็นภาพกราฟิก แบบเวกเตอร์ แผนท่ีในโปรแกรม Google Map มีแบบ 2 มิติเมื่อมีการขยายแผนที่ให้ใหญ่ หรือย่อให้ เล็กลงแผนที่กย็ ังคงความคมชัดปกติ เนื่องจาก ตัวแผนที่มีการแยกชินส่วนของภาพเป็นเส้น เม่ือขยายภาพความละเอียดของภาพจึงไม่ ลดลง เป็นหลักการของภาพกราฟิกแบบ เวกเตอร์ ดังนันแผนที่ในโปรแกรมGoogle Map จงึ เป็นภาพกราฟกิ แบบเวกเตอร์ รหสั วิชา 20204-2007 วชิ าโปรแกรมกราฟกิ ระดับประกาศนยี บตั รวิชาชีพ (ปวช.)

รหสั วชิ า 20204-2007 วชิ าโปรแกรมกราฟิก ระดบั ประกาศนยี บัตรวชิ าชีพ (ปวช.)

รหสั วชิ า 20204-2007 วชิ าโปรแกรมกราฟิก ระดบั ประกาศนยี บัตรวชิ าชีพ (ปวช.)

รหสั วชิ า 20204-2007 วชิ าโปรแกรมกราฟิก ระดบั ประกาศนยี บัตรวชิ าชีพ (ปวช.)

รหสั วชิ า 20204-2007 วชิ าโปรแกรมกราฟิก ระดบั ประกาศนยี บัตรวชิ าชีพ (ปวช.)

ตารางเปรยี บเทียบภาพกราฟิก รหสั วิชา 20204-2007 วชิ าโปรแกรมกราฟิก ระดับประกาศนยี บตั รวชิ าชพี (ปวช.)

ใหน้ ักเรยี นโยงเสน้ ข้อใดคอื ภำพ Vector และ Bitmap ใหถ้ กู ตอ้ ง ชื่อ- นำมสกุล ระดบั ชั้น เลขท่ี

ใหน้ ักเรียนเลือกคำตอบทถ่ี ูกตอ้ ง ท่สี ดุ เพยี งข้อเดียว 1. สกุลใดทเ่ี ก็บไฟลภ์ ำพกรำฟกิ แบบ Bitmap ก. .jpeg ข. .EPS ค. .WMF ง. .CDR 2. จดุ สสี ่ีเหลยี่ มเล็กๆที่ประกอบข้นึ เป็นภำพ เรยี กวำ่ ก. Bitmap ข. Raster ค. Pixel ง. Vector 3. นำมสกลุ ใดทใ่ี ชเ้ กบ็ ไฟล์ภำพกรำฟกิ แบบ Vector ก. .jpeg ข. .GIF ค. .TIFF ง. EPS 4. ข้อใดไม่ถกู ตอ้ งเกย่ี วกบั ภำพกรำฟกิ แบบ Bitmap ก. .เป็นภำพกรำฟกิ ทเ่ี กดิ จำกกำรนำจุดสีรูปสีเ่ หลย่ี มเล็กๆ มำเรียงตอ่ ข. เป็นภำพกรำฟกิ ท่ีไดจ้ ำกภำพถ่ำยและภำพจำกกำรแสกน ค. ภำพกรำฟิกแบบ bitmap เรยี กอีกอย่ำงว่ำ Raster ง. ภำรกรำฟกิ แบบ Bitmap จะเป็นภำพท่ีไม่ขน้ึ อยูก่ ับควำมละเอียด 5. ข้อใดไม่ถูกต้องเก่ยี วกบั ภำพกรำฟกิ แบบ Vector ก. ภำพกรำฟกิ ท่เี กิดจำกเส้นตรงและเส้นโค้ง ข. ภำพแบบVectorภำพท่ไี ม่ขึน้ อย่กู บั ควำมละเอียด ค. เปน็ ภำพท่ไี ดจ้ ำกภำพถำ่ ยและภำพจำกกำรสแกน ง. เหมำะสำหรบั ภำพกรำฟิกที่ตอ้ งมีกำรเปลยี่ นขนำด ควำมเหมำะสมเม่ือนำไปใช้งำนจริง

รหสั วชิ า 20204-2007 วชิ าโปรแกรมกราฟิก ระดบั ประกาศนยี บัตรวชิ าชีพ (ปวช.)

……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… รหัสวชิ า 20204-2007 วิชาโปรแกรมกราฟิก ระดับประกาศนยี บตั รวชิ าชีพ (ปวช.)