ชุดที่ 1...

1

1. ชุดฝึกทักษะ คอมพิวเตอร์กราฟิก จัดท าขึ้นเพ่ือประกอบการจัดการเรียนการสอนรายวิชา คอมพิวเตอร์กราฟิก รหัสวิชา ง 20246 ชั้นมัธยมศึกษาปีที่ 1 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี

2. เอกสารชุดนี้ประกอบด้วย ค าชี้แจงเกี่ยวกับชุดฝึกทักษะ ค าแนะน าส าหรับผู้เรียน แผนภูมิล าดับขั้นตอนการศึกษาชุดฝึกทักษะ ผลการเรียนรู้ / จุดประสงค์การเรียนรู้ แบบทดสอบก่อนเรียน กระดาษแบบทดสอบก่อนเรียน เนื้อหา กิจกรรม แบบทดสอบหลังเรียน เฉลยแบบทดสอบก่อนเรียน/หลังเรียน เฉลยกิจกรรมฝึกทักษะ

3. ชุดฝึกทักษะชุดนี้ใช้เวลาในการศึกษา 4 ชั่วโมง

ชุดที่ 1 เริ่มต้นงานกราฟิก

2

1. อ่านค าชี้แจงและค าแนะน าส าหรับผู้เรียนให้เข้าใจก่อนที่จะลงมือศึกษาชุดฝึกทักษะ 2. ท าแบบทดสอบก่อนเรียน จ านวน 10 ข้อ เพื่อประเมินความรู้พ้ืนฐานของนักเรียน 3. ศึกษาชุดฝึกทักษะโดยการปฏิบัติกิจกรรมตามค าชี้แจงที่ได้ระบุไว้ ตามล าดับขั้นตอนให้ครบ

ทุกเรื่อง 4. หากนักเรียนยังไม่เข้าใจให้กลับไปศึกษาอีกครั้ง หรือขอค าแนะน าจากครูเพ่ือให้เกิดความ

เข้าใจมากยิ่งข้ึน 5. ท าแบบทดสอบหลังเรียนเพ่ือเปรียบเทียบความก้าวหน้าในการศึกษาของนักเรียน 6. ในการศึกษาและท ากิจกรรมให้ผู้เรียนท าความด้วยความตั้งใจและมีความซื่อสัตย์ต่อตนเอง

โดยไม่เปิดดูเฉลยก่อน

ค าแนะน าส าหรับผูเ้รียน

3

แผนภูมิแสดงล าดับขั้นตอนการศึกษาชุดฝึกทักษะ

อ่านค าชี้แจง

อ่านค าแนะน าส าหรับนักเรียน

ทดสอบก่อนเรียน

กิจกรรมการเรียนรู้

- ศึกษากรอบเนื้อหา - ท ากิจกรรมฝึกทักษะ

ทดสอบหลังเรียน

ไม่ผ่านเกณฑ์

ผ่านเกณฑ์

ศึกษาชุดต่อไป

4

ชุดที่ 1 เริ่มต้นงานกราฟิก มาตรฐานการเรียนรู้ สาระท่ี 3 เทคโนโลยีสารสนเทศและการสื่อสาร มาตรฐาน ง 3.1

เข้าใจ เห็นคุณค่า และใช้กระบวนการเทคโนโลยีสารสนเทศในการสืบค้นข้อมูล การเรียนรู้ การสื่อสาร การแก้ปัญหา การท างานและอาชีพอย่างมีประสิทธิภาพ ประสิทธิผล และมีคุณธรรม

ผลการเรียนรู้ 1. อธิบายความหมายของงานกราฟิกได้ 2. อธิบายการจัดองค์ประกอบภาพลักษณะต่าง ๆ ได้ จุดประสงค์การเรียนรู้ 1. เข้าใจความหมายของงานกราฟิกได้ 2. เข้าใจความหมายของคอมพิวเตอร์กราฟิกได้ 3. สามารถจ าแนกประเภทของภาพที่ใช้ในงานคอมพิวเตอร์กราฟิกได้

5

ให้นักเรียนเลือกค าตอบที่ถูกต้องที่สุดเพียงข้อเดียว แล้วท าเครื่องหมาย

กากบาท (x) ลงในกระดาษค าตอบ (ใช้เวลา 10 นาที)

1. ค าว่าทฤษฎีคอมพิวเตอร์กราฟิก ถูกบัญญัติไว้ในศัพท์คอมพิวเตอร์และเทคโนโลยีสารสนเทศฉบับราชบัณฑิตยสถานว่า ก. เรขภาพคอมพิวเตอร์ ข. แอนิเมชันคอมพิวเตอร์ ค. กราฟิกคอมพิวเตอร์ ง. ดีไซน์คอมพิวเตอร์

2. Graphic มาจากภาษาใด ก. ก.ภาษาอังกฤษ ข. ภาษาโรมัน ค. ภาษาฝรั่งเศส ง. ภาษากรีก

3. ข้อใด ไม่ใช่ ประโยชน์ของงานกราฟิก ก. ช่วยให้การสื่อสารเข้าใจได้ง่าย ข. ช่วยสื่อความคิดถึงกันได้ชัดเจนถูกต้อง ค. ช่วยเพิ่มประสิทธิภาพให้กับภาษาพูดและภาษาเขียน ง. ช่วยให้เกิดความสามัคคีของคนในสังคม

4. ข้อใด ไม่ใช่ คุณสมบัติของงานกราฟิก ก. งานกราฟิกเข้าใจได้ง่าย ข. งานกราฟิกดึงดูดความสนใจ ค. งานกราฟิกแสดงผลทางเว็บไซต์อย่างเดียว ง. งานกราฟิกช่วยจดจ าได้มากและเร็วกว่า

5. ข้อใด ไม่ใช่ บทบาทของงานกราฟิก ก. ความก้าวหน้าทางการคมนาคม ข. ความก้าวหน้าทางเทคโนโลยี ค. ความก้าวหน้าทางวิชาการ ง. ความก้าวหน้าทางความคิด

รายวิชา คอมพิวเตอร์กราฟิก รหัสวิชา ง 20246 ชั้นมัธยมศึกษาปีท่ี 1 ชุดฝึกทักษะ คอมพิวเตอร์กราฟิก ชุดท่ี 1 เริ่มต้นงานกราฟิก

แบบทดสอบก่อนเรียน

ค าชี้แจง

6

6. ข้อใด ไม่จัดอยู่ ในสื่อโฆษณา ก. แผ่น CD เพลงต่าง ๆ ข. แผ่นพับ, ใบปลิว ค. หนังสื่อพิมพ์ ง. แผ่นป้ายหาเสียงผู้แทนราษฎร

7. องค์ประกอบที่เล็กท่ีสุดของภาพ เรียกว่า ก. DPI ข. Pixel ค. LPI ง. PPT

8. ภาพกราฟิกท่ีใช้กับคอมพิวเตอร์แบ่งออกเป็นก่ีประเภท ก. 2 ประเภท ข. 3 ประเภท ค. 4 ประเภท ง. 5 ประเภท

9. ข้อใดกล่าวถูกต้องเกี่ยวกับหลักการท างานของกราฟิกแบบ Raster ก. ใช้สร้างภาพ แก้ไขและตกแต่งภาพ เหมาะกับการสร้างโลโก และออกแบบ ข. ภาพเกิดจากจุดสีสี่เหลี่ยมเล็ก ๆ หลาย ๆ จุดมาเรียงต่อกันจนเกิดเป็นรูปภาพ ค. ภาพเกิดจากการอ้างอิงความสัมพันธ์ทางคณิตศาสตร์ หรือการค านวณ ง. ภาพเกิดจากการยิงแสงของประจุไฟฟ้าไปยังแม่สี RGB และเกิดเป็นภาพสีต่าง ๆ

10. ข้อใดกล่าวถูกต้องเกี่ยวกับหลักการท างานของกราฟิกแบบ Vector ก. ใช้สร้างภาพ แก้ไขและตกแต่งภาพ เหมาะกับการสร้างโลโก และออกแบบ ข. ภาพเกิดจากจุดสีสี่เหลี่ยมเล็ก ๆ หลาย ๆ จุดมาเรียงต่อกันจนเกิดเป็นรูปภาพ ค. ภาพเกิดจากการอ้างอิงความสัมพันธ์ทางคณิตศาสตร์ หรือการค านวณ ง. ภาพเกิดจากการยิงแสงของประจุไฟฟ้าไปยังแม่สี RGB และเกิดเป็นภาพสีต่าง ๆ

7

ชื่อ.........................................................................เลขที่..............ชั้น..................

ข้อ ก ข ค ง

1

2

3

4

5

6

7

8

9

10


กระดาษค าตอบแบบทดสอบก่อนเรียน

สรุปผลคะแนนที่ได้

......................................

8

ความหมายของคอมพิวเตอร์กราฟิก คอมพิวเตอร์กราฟิก (Computer Graphics) หรือในศัพท์คอมพิวเตอร์และเทคโนโลยีสารสนเทศ ฉบับราชบัณฑิตยสถานว่า เรขภาพคอมพิวเตอร์ เป็นสาขาหนึ่งในแขนงวิทยาการคอมพิวเตอร์ ซึ่งมีเรื่องเกี่ยวกับการท าให้เครื่องคอมพิวเตอร์แสดงภาพบนจอภาพได้ เช่น การหมุนภาพ, การเติมสีแต่งภาพ, ตัดต่อภาพ, เคลื่อนย้ายต าแหน่งภาพ รวมไปถึงการสร้างภาพเคลื่อนไหว แอนิเมชั่น ค าว่า กราฟิก มีที่มาจากภาษากรีก 2 ค า คือ Graphikos แปลว่า “การวาดเขียน และเขียนภาพ” หรือ Graphein แปลว่า “การเขียน” ความส าคัญของภาพกราฟิก ภาพกราฟิก เป็นภาพที่ถูกตกแต่งและสร้างข้ึน เพ่ือแทนความหมายที่จะสื่อไปถึงผู้ชมได้รับรู้ในสิ่งที่เราต้องการ ดังนั้นภาพกราฟิกจึงได้รับความนิยมในการประกอบอยู่ในสื่อต่าง ๆ ได้แก่ ข้อมูลข่าวสาร โฆษณา กล่องสินค้า งานน าเสนอ และเวปไซต์ ล้วนแต่ต้องใช้ภาพกราฟิกเป็นส่วนประกอบทั้งสิ้น

ภาพที่ 1.1 ตัวอย่างกราฟิกกล่องสนิค้า

ที่มาภาพ :http://www.pepsico.com/Purpose/ Human-Sustainability/Product-Choices,

วันท่ี 2 เมษายน 2559

ภาพที่ 1.2 การออกแบบหัวเวปไซต์ ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 2 เมษายน 2559

เร่ือง ความหมายและความส าคัญของคอมพิวเตอร์กราฟิก

ใบความรู้ที่ 1

9

ประเภทของงานกราฟิก การออกแบบงานกราฟิกใด ๆ ย่อมมีวัตถุประสงค์และเป้าหมายที่แตกต่างกันไป ตาม

ลักษณะเฉพาะของงาน การออกแบบจึงควรศึกษาถึงองค์ประกอบส าคัญ ๆ หลาย ๆ ด้าน แนวทางในการคิดงานกราฟิก จะแปรเปลี่ยนไปตามลักษณะของสื่อหรืองานแต่ละประเภท โดยสามารถจัดหมวดหมู่ได้ดังนี้

1. งานกราฟิกบนสื่อโฆษณาสิ่งพิมพ์ สื่อโฆษณามีหลายประเภทโดยเฉพาะ

อย่างยิ่งงานด้านสิ่งพิมพ์ ปัจจุบันในวงการธุรกิจนิยมใช้เป็นสื่อประเภทนี้ค่อนข้างสูง เพ่ือช่วยในการส่งเสริมการขาย เพ่ิมการตลาด วิธีในการสร้างสื่อสิ่งพิมพ์มีมากมายและตัวสื่อสิ่ ง พิมพ์เองก็มีการพัฒนาตัว เองให้ทันกับเทคโนโลยีใหม่ ๆ ที่ เข้ามา จึงช่วยส่งเสริมแนวทางในการออกแบบงานกราฟิก และเทคนิคในการออกแบบได้ เป็นอย่างดี สื่ อโฆษณามีอยู่หลายประเภทด้วยกัน แต่ที่ใช้กันมากเป็นเรื่องรูปแบบของการออกแบบสื่อที่น่าสนใจ ได้แก่ แผ่นป้ายโฆษณาหรือโปสเตอร์ แผ่นพับ แผ่นปลิว และบัตรเชิญ

ภาพที่ 1.4 ตัวอย่างการออกแบบแผ่นพับ ที่มาภาพ : http://www.vecteezy.com/free-vector/brochure,


ภาพที่ 1.3 แผ่นป้ายโฆษณา ที่มาภาพ : http://pantip.com/topic/31887822,


10

2. แผ่นป้ายโฆษณาหรือโปสเตอร์ (poster) เป็นสื่อที่มีบทบาทอย่างมากในการประชาสัมพันธ์เพราะสื่อประเภทนี้สามารถเผยแพร่ได้

สะดวกและกว้างขวาง สามารถเข้าถึงกลุ่มบุคคลได้ทุกเพศทุกวัย ทุกระดับการศึกษา มีความยืดหยุ่นในตัวสื่อได้เป็นอย่างดี ในการออกแบบสามารถสร้างรูปภาพประกอบ ตลอดจนแนวทางการออกแบบกราฟิกได้อย่างอิสระและสวยงามลักษณะของแผ่นป้ายโฆษณาจะสามารถน าเสนอข้อมูลรายละเอียดได้มากพอสมควร ผลิตง่าย ใช้สะดวก จึงเป็นที่นิยมตลอดมา

ภาพที่ 1.5 การออกแบบแผ่นป้ายโฆษณา

ที่มาภาพ : http://viktorhertz.com/portfolio/ pictogram-rock-posters/,


ภาพที่ 1.6 การออกแบบแผ่นป้ายโฆษณา

ที่มาภาพ : https://www.pinterest.com/pin/ 249105423114927232/,


11

3. การออกแบบเครื่องหมายสัญลักษณ์ เครื่องหมายหรือสัญลักษณ์ (Logo) เป็นการออกแบบกราฟิกที่เกี่ยวข้องกับสัญลักษณ์

(Symbolism) อันได้แก่ ภาพสัญลักษณ์และเครื่องหมายต่างๆ ที่ช่วยสร้างเอกลักษณ์ ได้แก่สินค้าและบริษัทผู้ผลิตเช่นการออกแบบตราสัญลักษณ์ของสินค้า และบริษัทให้มีเอกลักษณ์แบบเฉพาะตนเอง เพ่ือความจดจ า ความเชื่อถือ และตราตรึงผู้บริโภคตลอดไป

ภาพที่ 1.8 การออกแบบเคร่ืองหมายสัญลักษณ ์

http://www.gmdist.com/2012/12/11/pepsi-slogans-and-logos-throughout-the-years/, วันท่ี 2 เมษายน 2559

ภาพที่ 1.7 การออกแบบเคร่ืองหมายสัญลักษณ ์ที่มาภาพ : http://the-digital-reader.com/wp-content/uploads/2014/03/Apple-logo1.jpg,


12

ภาพบนคอมพิวเตอร์เกิดขึ้นได้อย่างไร

รูปภาพต่าง ๆ ที่เราเห็นปรากฏอยู่บนจอคอมพิวเตอร์นั้น เกิดจาการเรียงตัวของจุดสีที่มีลักษณะเป็นรูปสีเหลี่ยมเล็ก ๆ มากมายประกอบกันจนกลายเป็นภาพให้เรามองเห็น โดยจุดเล็ก ๆ แต่ละจุดนั้นต่างก็มีสีสันที่แตกต่างกันไป เราเรียจุดสีจุดเล็ก ๆ เหล่านั้นว่า "พิกเซล" Pixel และพิเซลนี่เองที่จะเป็นตัวก าหนดถึงความคมชัดของภาพแต่ละภาพ

ภาพที่ 1.9 ลักษณะของพิกเซล (Pixel)

ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 2 เมษายน 2559

13

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

2. ภาพเรสเตอร์ (Raster)

หรือภาพแบบบิตแมป (Bitmap) จะเป็นภาพที่ประกอบจากจุดสีขนาดเล็กๆ จ านวนมากเรียงเรียงตัวกันในลักษณะรูปแบบตาราง เรียกว่า พิกเซล (pixel) โดยในแต่ละภาพจะมีค่าและขนาดที่แน่นอน ถ้ามีการขยายเพ่ิมมากขึ้นจากขนาดเดิมจะท าให้มองเห็นเป็นภาพหยาบหรือรูปภาพแตกอย่างชัดเจน

ภาพที่ 1.12 ภาพเรสเตอร์ (Raster) ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 2 เมษายน 2559

ภาพที่ 1.10 ภาพเวคเตอร์ (Vector) 1 ที่มาภาพ :http://clipart.me/animals-wildlife/rabbit-vector-png-amp-eps-11020,วันท่ี 2 เมษายน 2559

ภาพที่ 1.11 ภาพเวคเตอร์ (Vector) 2 ที่มาภาพ : http://www.clipartbest.com/ vector-design-png, วันท่ี 2 เมษายน 2559

14

ความแตกต่างระหว่างกราฟิกแบบ เวคเตอร์ และ เรสเตอร์ เวคเตอร์ เรสเตอร์

1. ใช้สมการทางคณิตศาสตร์เป็นตัวสร้างภาพโดยรวมเอา Object เช่น วงกลม เส้นตรง ต่างชนิดมาผสมกัน

1. องค์ประกอบภาพประกอบขึ้นด้วยจุดต่าง ๆ มาก

2. สามารถย่อและขยายขนาดได้มากกว่าโดยสัดส่ วนลักษณะของภาพ และความละเอียดไม่เปลี่ยนแปลง

2. ภาพมีจ านวนพิกเซลคงที่จึงต้องการค่าความละเอียดมากข้ึนเมื่อขยายภาพ โดยจะค านวณค่าสีทีละพิเซลท าให้ภาพแตกเมื่อขยายภาพให้ใหญ่

3. เหมาะส าหรับงานจ าพวกวาง Layout งานพิมพ์ตัวอักษร หรือ Illustration

3. เหมาะส าหรับงานกราฟิกในแบบต้องการให้แสงเงาในรายละเอียด

4. คอมพิวเตอร์จะใช้เวลาในการแสดงภาพมากกว่า เนื่องจากต้องท าตามค าสั่งที่มีจ านวนมาก

4. แสดงภาพบนจอทันที เมื่อรับค าสั่งย้ายข้อมูลจากหน่วยความจ าที่เก็บภาพไปยังหน่วยความจ าของภาพ

ภาพที่ 1.13 ลักษณะของภาพแบบเวคเตอร์ และเรสเตอร์ ที่มาภาพ : http://lumne.net/wp-content/uploads/2013/12/RasterVsVector-01.jpg,


15

ในการท างานด้านกราฟิกโดยใช้เครื่องคอมพิวเตอร์นั้น จ าเป็นที่ต้องอาศัยโปรแกรมที่สร้างขึ้นมาเพ่ือจัดการกับงานกราฟิกโดยเฉพาะ ซึ่งโปรแกรมกราฟิกนี้มีอยู่มากมายหลายโปรแกรม ซึ่งสามารถแบ่งออกเป็นประเภทได้ดังนี้ 1. Photo Retouching โปรแกรมท่ีเหมาะส าหรับการแก้ไข ตกแต่งภาพ และ ท าเอฟเฟกต์ให้กับภาพที่ได้สร้างข้ึนมาแล้ว ซึ่งอาจจะ มาจากภาพถ่ายจริง ได้แก่ Adobe Photoshop, Corel Photo paint, Paint Shop, PhotoScape

ภาพที่ 1.14 ภาพโปรแกรม Adobe Photoshop ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 15 เมษายน 2559

ภาพที่ 1.15 ภาพโปรแกรม PhotoScape ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 15 เมษายน 2559

เร่ือง ประเภทของโปรแกรมคอมพิวเตอร์กราฟิก


16

2. Graphic Illustrator โปรแกรมส าหรับการออกแบบงานกราฟิก หรืองาน Lay out ซึ่งเป็นงานสองมิติ มีการเขียนรูปในลักษณะการเน้น เส้นเน้นรูปทรงเรขาคณิต ซึ่งไม่ใช่รูปถ่าย ได้แก่ Adobe Illustrator, CorelDraw

ภาพที่ 1.16 ภาพโปรแกรม Adobe Illustrator ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 15 เมษายน 2559

ภาพที่ 1.17 ภาพโปรแกรม CorelDraw ที่มาภาพ : http://mrfree09.com/corel-draw-x6-

keygen-only-serial-number/,วันท่ี 15 เมษายน 2559

17

3. Computer Aided Design โปรแกรมส าหรับการเขียนภาพที่แสดงออกถึงมิติ ขนาด ที่ ให้ความชัดเจนของวัตถุท่ีต้องการสร้างขึ้นมา ได้แก่ Auto CAD, PRO Landscape

ภาพที่ 1.18 ภาพโปรแกรม Auto CAD ที่มาภาพ : http://forums.autodesk.com/t5/autocad-lt-forum/hatch-missing-in-transparent-zoom-in-autocad-

2014/td-p/4480409, วันท่ี 15 เมษายน 2559

ภาพที่ 1.19 ภาพโปรแกรม PRO Landscape ที่มาภาพ : http://prolandscape.com/en/software/, วันท่ี

15 เมษายน 2559

18

4. 3D Photo Realistic โปรแกรมท่ีสามารถสร้างภาพสามมิติ ที่มีมวลและปริมาตร และมีคุณสมบัติของพื้นผิว จนเกิดความสมจริงของแสง และเงา ได้แก่ 3D studio MAX, Auto CAD 3D, SketchUP

ภาพที่ 1.20 ภาพโปรแกรม 3D studio MAX ที่มาภาพ : http://area.autodesk.com/blogs/the-3ds-max-blog/introducing-3ds-max-2016, วันท่ี 15 เมษายน 2559

ภาพที่ 1.21 ภาพโปรแกรม SketchUP ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 15 เมษายน 2559

19

5. Presentation โปรแกรมกราฟิก ส าหรับช่วยในการน าเสนองาน ใน ลักษณะเป็นสไลค์ประกอบค าบรรยาย มีการสร้างภาพ กราฟฟิกที่ดูแล้วเข้าใจง่ายขึ้น เช่น กราฟชนิดต่าง ๆ หรือการสร้างแผนผังการจัดองค์กรโปรแกรมประเภทนี้ ส่วนมากใช้ในงานธุรกิจ

ภาพที่ 1.22 ภาพโปรแกรม Microsoft PowerPoint ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 15 เมษายน 2559

ภาพที่ 1.23 ภาพโปรแกรม Sliderocket ที่มาภาพ : http://www.sliderocket.com/, วันท่ี 15 เมษายน

2559

20

6. Animation เป็นโปรแกรมสร้างภาพเคลื่อนไหวตามล าดับ โปรแกรมจะ แสดงภาพเป็นล าดับให้แลดูเหมือนภาพเคลื่อนไหว โดย อาจมีเทคนิคต่างๆ ประกอบการแสดงภาพเช่น การซ้อนภาพ , เลื่อนภาพ, การเลื่อนภาพให้หายไปได้ และ การ แปลงภาพ รวมถึงมีลักษณะการโต้ตอบกับผู้ใช้ด้วย

ภาพที่ 1.24 ภาพโปรแกรม Animate cc ที่มาภาพ : http://www.bleepstatic.com/images/news/ companies/adobe/adobe-animate-cc/adobe-animate-

cc-program.jpg, วันท่ี 15 เมษายน 2559

ภาพที่ 1.25 ภาพโปรแกรม Adobe After Effects CC ที่มาภาพ : https://i.ytimg.com/vi/wgbuPc66iX0/

maxresdefault.jpg, วันท่ี 15 เมษายน 2559

21

ปัจจุบันจะเห็นได้ว่าไฟล์รูปภาพนั้นมีอยู่มากมาย หลากหลายนามสกุล ซึ่งในแต่ละนามสกุล มีการใช้งานที่แตกต่างกัน เช่น bmp, psd, jpg, gif, wmf, png, cgm, tif, eps เป็นต้น ดังนั้น ก่อนด าเนินการจัดเก็บไฟล์ใด ๆ ก็ตาม ผู้ใช้งานจึงจ าเป็นต้องรู้ว่าประเภทของไฟล์ภาพนั้นๆ มีข้อดี ข้อเสีย อย่างไร เพ่ือจะจัดการไฟล์ภาพนั้นให้ถูกต้องเหมาะสมกับการใช้งาน และมีประสิทธิภาพสูงสุด

BMP สามารถบันทึกภาพชนิดขาวด าแบบ 16 สี และภาพสีขนาด 24 บิท (True color) ได้ GIF เก็บข้อมูลภาพในลักษณะ 8 bit (256 สี) สามารถเก็บภาพไว้ได้หลายภาพในไฟล์เดียว

จึงสามารถท าภาพเคลื่อนไหวได้, มีการบีบอัดข้อมูลแบบ LZW (Lamp Ziv-Welch) JPG เก็บข้อมูลภาพในลักษณะของการบีบอัดข้อมูล สามารถเก็บภาพสีได้สูงถึง 16.7 ล้านสี

โดยคุณภาพสูงจะมีขนาดไฟล์ใหญ่และคุณภาพต่ าขนาดของไฟล์ก็จะมีขนาดเล็กลงตามไปด้วย

PNG เป็นภาพที่เกิดจากการน าเอาคุณสมบัติของภาพ JPG และ GIF มาผสมผสานกันให้ได้ลักษณะเฉพาะ สีมากกว่า 256 สีและโปร่งใสได้ (Transparent) มีการบีบอัดข้อมูลโดยไม่เสียคุณภาพ และยังสามารถควบคุมองศาของความโปร่งใส (Opacity) ได้ด้วย

PSD หรือ .psd หรือ Photoshop flie คือ คือนามสกุลไฟล์ ของโปรแกรม photoshop โดยฉพาะ ประโยชน์ไฟล์ .psd คือไฟล์จะท าการบันทึก แบบแยกเลเยอร์ และประวัติการท างาน อย่างเช่นรายละเอียดการตกแต่งภาพว่าได้ท าการเปลี่ยนแปลงและตกแต่งอะไรบ้าง เก็บเอาไว้ให้ แต่มีข้อจ ากัดคือไฟล์มีขนาดใหญ่เมื่อเทียบกับไฟล์รูปภาพประเภทอ่ืน เช่น JPEG และ PNG เป็นต้น

เร่ือง ชนิดของไฟล์ภาพ


ภาพที่ 2.6 สัญลักษณ์ชนิดของไฟล์ภาพ ที่มาภาพ : http://america.pink/image-file-formats_2065311.html, วันท่ี 15 เมษายน 2559

22

ความละเอียดของรูปภาพ (Resolution) Resolution คือค่าความละเอียดของภาพ โดยปกติจะมีขนาดวัดเป็นจุดต่อนิ้ว (dpi) Resolution มากหรือน้อยขึ้นอยู่กับ display ที่ภาพนั้นแสดง เช่น มีภาพขนาด 1600 X 1200 pixel จอคอมพิวเตอร์จะมีความละเอียดประมาณ 72 dpi ถ้าจะใช้จอคอมพิวเตอร์ที่สามารถแสดงภาพนี้ได้ทั้งภาพต้องใช้จอภาพขนาดกว้าง 1600/72 นิ้ว x 1200/72 นิ้ว ประมาณ 23 x 17 นิ้ว เหตุผลที่จอภาพใช้ Resolution 72 dpi เพราะมีขีดจ ากัดด้านฮาร์ดแวร์เนื่องจากจอภาพใช้การเปล่งแสงในการแสดงสี หากใช้ค่ามากกว่านี้จะต้องใช้ต้นทุนและความร้อนสูงขึ้นมาก ในขณะที่งานด้านการพิมพ์ที่ต้องใช้ Resolution สูงเพราะขนาดหยดหมึกของเครื่องพิมพ์ในปัจจุบันมีขนาดที่เล็กมาก ๆ ดังนั้นในระยะทาง 1 นิ้ว ถ้าเราใช้จ านวนเม็ดสีน้อย (dpi น้อย) ภาพที่ได้ก็จะหยาบกว่าภาพที่ใช้จ านวนเม็ดสีมากในระยะทาง 1 นิ้วเท่ากัน (dpi มาก) การตั้งค่า Resolution หรือการตั้งค่าความละเอียดของงานนั้น ต้องตั้งให้เหมาะสมกับงาน คือ ถ้าจะน าภาพที่ท าปใช้ในสื่อไหนก็ตั้งตามความเหมาะสมดังนี้

งานสิ่งพิมพ์ ตั้งค่า Resolution = 300 dpi งานเวปไซต์ ตั้งค่า Resolution = 72 dpi งานแอนิเมชั่น ตั้งค่า Resolution = 72 dpi

การตั้งค่า Resolution น้อยกว่ามาตรฐานจะท าให้ภาพที่ออกมาแตก และเบลอ หากตั้งมากกว่ามาตรฐานจะท าให้เปลือง RAM ในการท างาน ยิ่งงานที่มีเลเยอร์มาก (จ านวนชั้นของภาพมาก) จะท าให้เครื่องคอมพิวเตอร์ท างานได้ช้าลง อีกทั้งไม่ได้ท าให้ภาพชัดขึ้น

ภาพที่ 2.7 การต้ังค่า Resolution งานสิ่งพิมพ ์ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 15 เมษายน 2559

งานสิ่งพิมพ์ ตั้งค่า Resolution = 300 dpi

23

ภาพที่ 2.8 การต้ังค่า Resolution งานเวปไซต์ ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 15 เมษายน 2559

ภาพที่ 2.9 การต้ังค่า Resolution งานแอนิเมชั่น ที่มาภาพ : จุฑารตัน์ จันทร์อ่อน, วันท่ี 15 เมษายน 2559

งานเวปไซต์ ตั้งค่า Resolution = 72 dpi

งานแอนิเมชั่น/APP ตั้งค่า Resolution = 72 dpi

24

ชื่อ...............................................................................................เลขท่ี..............ช้ัน................

ค าสั่ง : ให้นักเรียนตอบค าถามดังต่อไปนี้ (10 คะแนน ข้อละ 2 คะแนน)

1. ให้นักเรียนบอกความหมายของค าว่า “คอมพิวเตอร์กราฟิก” (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….……………………………………………………………………………………………..........…………………………………..... 2. ให้นักเรียนยกตัวอย่างของประเภทของงานกราฟิก (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….……………………………………………………………………………………………..........…………………………………..... 3. ให้นักเรียนอธิบายลักษณะของ “ภาพกราฟิกแบบ Vector” (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….…… ………………………………………………………………………………………..........…………………………………..... ………………………………………………………………………………………..........…………………………………..... 4. ให้นักเรียนอธิบายลักษณะของ “ภาพกราฟิกแบบ Raster” (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….…… ………………………………………………………………………………………..........…………………………………..... ………………………………………………………………………………………..........…………………………………..... 5. ให้นักเรียนอธิบายค าว่า “พิกเซล (Pixel)” (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….……………………………………………………………………………………………..........………………………………….....

25

ค าสั่ง : ให้นักเรียนจับคู่เลือกชื่อโปรแกรมกับการท างานของโปรแกรมให้ถูกต้อง (10 คะแนน ข้อละ 2 คะแนน) ชื่อโปรแกรม ความสามารถของโปรแกรม

1.

2.

3.

4.

5.

Adobe Photoshop, PhotoScape , Adobe Illustrator, CorelDraw , Auto CAD, PRO Landscape, 3D studio MAX, SketchUP Microsoft PowerPoint, Sliderocket, Animate cc

26

ค าสั่ง : ให้นักเรียนหาภาพนิ่งที่น่าสนใจจากอินเทอร์เน็ต 10 ภาพ น ามาใส่ในโปรแกรมน าเสนอ และบอกนามสกุลของไฟล์ที่หามา พร้อมบอกรายละเอียดของภาพ (ในการดูรายละเอียดของภาพสามารถท าได้โดยการคลิกขวาที่ไฟล์รูปภาพ แล้วเลือก Properties เลือก Tab ชื่อ General, Details แล้วเลื่อนลงมาที่หัวข้อ Image) Name : 0software002 Type of file : PNG file (.png) Size : 332 KB Size on disk: 336 KB Dimensions: 800x500 Width: 800 pixels Height: 500 pixels

1

2

1

ตัวอย่างกิจกรรมที่ 2.2

เกณฑ์การให้คะแนน 2 คะแนน นักเรียนตอบค าถามที่ก าหนดใหไ้ด้อย่างสมบรูณ์ ตรง

ประเด็นกับค าถาม 1 คะแนน นักเรียนตอบค าถามที่ก าหนดใหไ้ด้บางส่วน ประเด็นส่วน

ใหญ่ไมต่รงกับค าถาม

27

ให้นักเรียนเลือกค าตอบที่ถูกต้องที่สุดเพียงข้อเดียว แล้วท าเครื่องหมาย

กากบาท (x) ลงในกระดาษค าตอบ (ใช้เวลา 10 นาที)

1. ค าว่าทฤษฎีคอมพิวเตอร์กราฟิก ถูกบัญญัติไว้ในศัพท์คอมพิวเตอร์และเทคโนโลยีสารสนเทศฉบับราชบัณฑิตยสถานว่า ก. แอนิเมชันคอมพิวเตอร์ ข. กราฟิกคอมพิวเตอร์ ค. เรขภาพคอมพิวเตอร์ ง. ดีไซน์คอมพิวเตอร์

2. Graphic มาจากภาษาใด ก. ภาษากรีก ข. ภาษาอังกฤษ ค. ภาษาโรมัน ง. ภาษาฝรั่งเศส

3. ข้อใดไม่ใช่ ประโยชน์ของงานกราฟิก ก. ช่วยเพิ่มประสิทธิภาพให้กับภาษาพูดและภาษาเขียน ข. ช่วยให้การสื่อสารเข้าใจได้ง่าย ค. ช่วยให้เกิดความสามัคคีของคนในสังคม ง. ช่วยสื่อความคิดถึงกันได้ชัดเจนถูกต้อง

4. ข้อใด ไม่ใช่ คุณสมบัติของงานกราฟิก ก. งานกราฟิกเข้าใจได้ง่าย ข. งานกราฟิกดึงดูดความสนใจ ค. งานกราฟิกช่วยจดจ าได้มากและเร็วกว่า ง. งานกราฟิกแสดงผลทางเว็บไซต์อย่างเดียว

5. ข้อใด ไม่ใช่ บทบาทของงานกราฟิก ก. ความก้าวหน้าทางวิชาการ ข. ความก้าวหน้าทางการคมนาคม ค. ความก้าวหน้าทางความคิด ง. ความก้าวหน้าทางเทคโนโลยี


แบบทดสอบหลังเรียน

ค าชี้แจง

28

6. ข้อใด ไม่จัดอยู่ ในสื่อโฆษณา ก. หนังสือพิมพ์ ข. แผ่นพับ, ใบปลิว ค. แผ่น CD เพลงต่าง ๆ ง. แผ่นป้ายหาเสียงผู้แทนราษฎร

7. องค์ประกอบที่เล็กท่ีสุดของภาพ เรียกว่า ก. LPI ข. PPT ค. Pixel ง. DPI

8. ภาพกราฟิกท่ีใช้กับคอมพิวเตอร์แบ่งออกเป็นก่ีประเภท ก. 2 ประเภท ข. 3 ประเภท ค. 4 ประเภท ง. 5 ประเภท

9. ข้อใดกล่าวถูกต้องเกี่ยวกับหลักการท างานของกราฟิกแบบ Raster ก. ภาพเกิดจากการอ้างอิงความสัมพันธ์ทางคณิตศาสตร์ หรือการค านวณ ข. ใช้สร้างภาพ แก้ไขและตกแต่งภาพ เหมาะกับการสร้างโลโก และออกแบบ ค. ภาพเกิดจากจุดสีสี่เหลี่ยมเล็ก ๆ หลาย ๆ จุดมาเรียงต่อกันจนเกิดเป็นรูปภาพ ง. ภาพเกิดจากการยิงแสงของประจุไฟฟ้าไปยังแม่สี RGB และเกิดเป็นภาพสีต่าง ๆ

10. ข้อใดกล่าวถูกต้องเกี่ยวกับหลักการท างานของกราฟิกแบบ Vector ก. ภาพเกิดจากการอ้างอิงความสัมพันธ์ทางคณิตศาสตร์ หรือการค านวณ ข. ใช้สร้างภาพ แก้ไขและตกแต่งภาพ เหมาะกับการสร้างโลโก และออกแบบ ค. ภาพเกิดจากจุดสีสี่เหลี่ยมเล็ก ๆ หลาย ๆ จุดมาเรียงต่อกันจนเกิดเป็นรูปภาพ ง. ภาพเกิดจากการยิงแสงของประจุไฟฟ้าไปยังแม่สี RGB และเกิดเป็นภาพสีต่าง ๆ

29

ชื่อ.........................................................................เลขที่..............ชั้น..................

ข้อ ก ข ค ง

1

2

3

4

5

6

7

8

9

10


กระดาษค าตอบแบบทดสอบหลังเรียน

สรุปผลคะแนนที่ได้

......................................

30

ภาคผนวก

31

ข้อ ก ข ค ง ข้อ ก ข ค ง

1 1

2 2

3 3

4 4

5 5

6 6

7 7

8 8

9 9

10 10


เฉลยค าตอบแบบทดสอบ

แบบทดสอบก่อนเรียน แบบทดสอบหลังเรียน

32

ชื่อ...............................................................................................เลขท่ี..............ช้ัน................

ค าสั่ง : ให้นักเรียนตอบค าถามดังต่อไปนี้ (10 คะแนน ข้อละ 2 คะแนน)

1. ให้นักเรียนบอกความหมายของค าว่า “คอมพิวเตอร์กราฟิก” (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….……………………………………………………………………………………………..........…………………………………..... ………………………………………………………………………………………..........…………………………………..... 2. ให้นักเรียนยกตัวอย่างของประเภทของงานกราฟิก (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….……………………………………………………………………………………………..........…………………………………..... 3. ให้นักเรียนอธิบายลักษณะของ “ภาพกราฟิกแบบ Vector” (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….…… ………………………………………………………………………………………..........…………………………………..... ………………………………………………………………………………………..........…………………………………..... 6. ให้นักเรียนอธิบายลักษณะของ “ภาพกราฟิกแบบ Raster” (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….…… ………………………………………………………………………………………..........…………………………………..... ………………………………………………………………………………………..........…………………………………..... 7. ให้นักเรียนอธิบายค าว่า “พิกเซล (Pixel)” (2 คะแนน) ตอบ…………………………………………………………………………..……….………………………………...….……………………………………………………………………………………………..........………………………………….....

เกณฑ์การให้คะแนน 2 คะแนน นักเรียนตอบค าถามที่ก าหนดใหไ้ด้อย่างสมบรูณ์ ตรงประเด็นกับค าถาม 1 คะแนน นักเรียนตอบค าถามที่ก าหนดใหไ้ด้บางส่วน ประเด็นส่วนใหญ่ไม่ตรงกับค าถาม

เป็นสาขาหนึ่งในแขนงวิทยาการคอมพิวเตอร์ ซึ่งมีเรื่องเก่ียวกับการท าให้เครื่องคอมพิวเตอร์ แสดงภาพบนจอภาพได้ เชน่ การหมุนภาพ, การเติมสีแต่งภาพ, ตัดต่อภาพ, เคลื่อนย้ายต าแหน่ง ภาพ รวมไปถึงการสร้างภาพเคลื่อนไหวแอนิเมชั่น

งานกราฟิกบนสื่อโฆษณาสิ่งพิมพ์ได้แก่ แผ่นป้ายโฆษณาหรือโปสเตอร์ แผ่นพับ แผ่นปลิว และบัตรเชิญ แผ่นป้ายโฆษณาหรือโปสเตอร์ (poster) และการออกแบบเครื่องหมายสัญลักษณ์ (Logo)

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

หรือภาพแบบบิตแมป (Bitmap) จะเป็นภาพทีป่ระกอบจากจุดสีขนาดเล็กๆ จ านวนมากเรียงเรียงตัวกันในลักษณะรปูแบบตาราง เรียกว่า พิกเซล (pixel) โดยในแต่ละภาพจะมีค่าและขนาดที่แน่นอน ถ้ามีการขยายเพิ่มมากขึ้นจากขนาดเดิมจะท าให้มองเห็นเป็นภาพหยาบหรือรูปภาพแตกอย่างชัดเจน ลักษณะเป็นรปูสีเหลี่ยมเล็ก ๆ มากมายประกอบกันจนกลายเปน็ภาพให้เรามองเห็น โดยจุดเล็ก ๆ แต่ละจุดนั้นตา่งก็มีสสีันที่แตกต่างกันไป

33

ค าสั่ง : ให้นักเรียนจับคู่เลือกชื่อโปรแกรมกับการท างานของโปรแกรมให้ถูกต้อง (10 คะแนน ข้อละ 2 คะแนน) ชื่อโปรแกรม ความสามารถของโปรแกรม

1. Animate cc โปรแกรมสร้างภาพเคลื่อนไหวตาม ล าดับ ให้แลดูเหมือภาพเคลื่อนไหว โดย อาจมีเทคนิคต่าง ๆ ประกอบการแสดงภาพเช่น การซ้อนภาพ , เลื่อนภาพ,

2. 3D studio MAX โปรแกรมที่สามารถสร้างภาพสามมิติ ที่มีมวลและปริมาตร และมีคุณสมบัติของพื้นผิว จนเกิดความสมจริงของแสง และเงา

3. Adobe Illustrator โปรแกรมส าหรับการออกแบบงานกราฟกิ หรืองาน Lay out ซึ่งเป็นงานสองมิติ มีการเขียนรูปในลักษณะการเน้น เส้นเน้นรูปทรงเรขาคณิต ซึ่งไม่ใช่รูปถ่าย

4. Microsoft PowerPoint โปรแกรมกราฟิก ส าหรับช่วยในการน าเสนองาน ใน ลักษณะเป็นสไลค์ประกอบค าบรรยาย มีการสร้างภาพ กราฟฟิกที่ดูแล้วเข้าใจง่ายขึ้น

5. Adobe Photoshop โปรแกรมที่เหมาะส าหรับการแก้ไข ตกแต่งภาพ และ ท าเอฟเฟกต์ให้กับภาพที่ได้สร้างขึ้นมาแล้ว ซึ่งอาจจะ มาจากภาพถ่ายจริง

เกณฑ์การให้คะแนน 2 คะแนน นักเรียนตอบค าถามที่ก าหนดใหไ้ด้อย่างสมบรูณ์ ตรงประเด็นกับค าถาม 1 คะแนน นักเรียนตอบค าถามที่ก าหนดใหไ้ด้บางส่วน ประเด็นส่วนใหญ่ไม่ตรงกับค าถาม

Adobe Photoshop, PhotoScape , Adobe Illustrator, CorelDraw , Auto CAD, PRO Landscape, 3D studio MAX, SketchUP, Microsoft PowerPoint, Sliderocket, Animate cc

34

เกียรติพงษ์ บุญจิตร. (2552). คู่มือ Photoshop CS4 Professional Guide ฉบับสมบูรณ์. นนทบุรี : ไอดีซีฯ

เกียรติพงษ์ บุญจิตร. (2557). Photoshop CC Professional Guide. นนทบุรี : ไอดีซีฯ ปิยะ นากสงค.์ (2557). การใช้โปรแกรมกราฟิก Photoshop เวอร์ชั่น CS6. กรุงเทพฯ :

ซัคเซส มีเดีย อนุรักษ์ วิไลวัลย์ และฐิตารัตน์ รัชระวรรณ. (2549). Photoshop CS Workshop. นนทบุรี :

ไอดีซีฯ อิศเรศ ภาชนะกาญจน์. (2552). Photoshop CS6 Essential. นนทบุรี : ไอดีซีฯ ความส าคัญของภาพกราฟิก (2559). [Online]. เข้าถึงได้จาก :

https://sites.google.com/site/pphotoshopcs6/home [2559, เมษายน 2] คอมพิวเตอร์กราฟิก (2559). [Online]. เข้าถึงได้จาก :

https://th.wikipedia.org/wiki/คอมพิวเตอร์กราฟิกส์ [2559, เมษายน 2] ธิดารัตน์ วงษ์ละคร. ประเภทของโปรแกรมคอมพิวเตอร์กราฟิก (2550). [Online]. เข้าถึงได้จาก :

http://thaidarat.blogspot.com/2007/09/blog-post_20.html [2559, เมษายน 15]

โปรแกรมกราฟิก (2559). [Online]. เข้าถึงได้จาก : https://sites.google.com/site/01theerapong/hna-raek [2559, เมษายน 15]

อินฟินิตี้ คัลเลอร์ พริ้นติ้ง บ.จก. ประเภทของไฟล์ (2559). [Online]. เข้าถึงได้จาก : http://www.infinityprinting.co.th/main/content.php?page=sub&category=22&id=59 [2559, เมษายน 15]

บรรณานุกรม

ชุดที่ 1...

Documents

Transcript of ชุดที่ 1...