EbookPictureFormat

2,233 views

Published on

กราฟิก สำหรับเว็บไซต์

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,233
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

EbookPictureFormat

  1. 1. หนังสืออิเล็กทรอนิกส์<br />กราฟิกสำหรับงานเว็บไซต์<br />วิชาการงานอาชีพและเทคโนโลยี<br />กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี <br />นายสันติชัย บุญรักษ์<br />โรงเรียนสงวนหญิง จังหวัดสุพรรณบุรี<br />สำนักงานเขตพื้นที่การศึกษาสุพรรณบุรี เขต 1<br />
  2. 2. ก<br />สาระสำคัญ<br /> กราฟิกแบ่งเป็น 2 ประเภทคือบิตแมปและเวกเตอร์ ภาพกราฟิกสำหรับงานเว็บไซต์ นิยมใช้ 3 รูปแบบ คือ ไฟล์รูปแบบ JPG ไฟล์รูปแบบ GIF ไฟล์รูปแบบ PNG<br />
  3. 3. ข<br />จุดประสงค์การเรียนรู้<br /> 1.อธิบายความหมายของคำว่า “กราฟิก” ได้ถูกต้อง<br /> 2.บอกรูปแบบภาพกราฟิกที่นิยมใช้ในงานเว็บไซต์ได้ถูกต้อง<br /> 3.อธิบายความแตกต่างของภาพกราฟิกแต่ละรูปแบบได้ถูกต้อง<br />
  4. 4. ค<br />สารบัญ<br />สาระสำคัญ ก<br />จุดประสงค์การเรียนรู้ ข<br />สารบัญ ค<br />แบบทดสอบก่อนเรียน ง<br />ความหมายของกราฟิก 1<br />ประเภทกราฟิก 3<br />กราฟิกสำหรับเว็บไซต์ 14<br />รูปแบบ JPEG 16<br />รูปแบบ GIF 19<br />รูปแบบ PNG 27<br />ผังความคิด 30<br />แบบทดสอบหลังเรียน 36<br />หนังสืออ้างอิง 46<br />ประวัติผู้จัดทำ 47<br />
  5. 5. ง<br />แบบทดสอบก่อนเรียน<br />1. ข้อใดไม่ใช่ความหมายของ กราฟิก<br /> ก. การสื่อความหมายด้วยการใช้ศิลปะ การแสดง แสง สี เสียง<br /> ข. ภาพวาดที่สื่อความหมายได้ทันที<br /> ค. การสื่อความหมายด้วยภาพเขียนขาว - ดำ<br /> ง. สัญลักษณ์ ซึ่งมีลักษณะเห็นได้ชัดเจนเข้าใจ ความหมาย<br />
  6. 6. จ<br />แบบทดสอบก่อนเรียน<br />2. ข้อใดให้ความหมายไม่ถูกต้องเกี่ยวกับกราฟิก<br /> ก. แดงวาดภาพสุนัข<br /> ข. สุชาติถ่ายรูปต้นไม้<br /> ค. พยอมเชิดสิงโต<br /> ง. สุธีดูสัญลักษณ์ห้องน้ำชาย<br />
  7. 7. ฉ<br />แบบทดสอบก่อนเรียน<br />3. ภาพแบบ Bitmap มีชื่อเรียกอีกอย่างหนึ่งว่าอะไร<br /> ก. Vector Image<br /> ข. Raster Image<br /> ค. BMP Image<br /> ง. Photo Image<br />
  8. 8. ช<br />แบบทดสอบก่อนเรียน<br />4. ฟอร์แมตภาพในข้อใดเป็นแบบ Vector<br /> ก. WMF<br /> ข. Video Clip<br /> ค. JPG<br /> ง. GIF<br />
  9. 9. ซ<br />แบบทดสอบก่อนเรียน<br />5. รูปแบบภาพใดที่เหมาะสำหรับภาพถ่าย<br /> ก. JPG<br /> ข. GIF<br /> ค. BMP<br /> ง. WMF<br />
  10. 10. ฌ<br />แบบทดสอบก่อนเรียน<br />6. รูปแบบภาพใดที่เหมาะสำหรับภาพการ์ตูนลายเส้นที่มีจำนวนสีไม่มาก<br /> ก. JPG<br /> ข. GIF<br /> ค. BMP<br /> ง. PCX<br />
  11. 11. ญ<br />แบบทดสอบก่อนเรียน<br />7. รูปแบบภาพใด ที่พัฒนาเพื่อแก้ปัญหาด้านลิขสิทธิ์<br /> ก. JPG<br /> ข. GIF<br /> ค. BMP<br /> ง. PNG<br />
  12. 12. ฎ<br />แบบทดสอบก่อนเรียน<br />8. รูปแบบภาพในข้อใดที่ไม่นิยมมาแทรกลงในเว็บเพจ<br /> ก. JPG<br /> ข. GIF<br /> ค. TIFF<br /> ง. PNG<br />
  13. 13. ฏ<br />แบบทดสอบก่อนเรียน<br />9. โปรแกรมในข้อใดใช้สำหรับสร้างรูปแบบ JPG<br /> ก. Adobe Photoshop <br /> ข. Adobe Illustrator ค. Macromedia Freehand <br /> ง. Corel Draw <br />
  14. 14. ฐ<br />แบบทดสอบก่อนเรียน<br />10. ข้อใดเป็นคุณสมบัติของรูปแบบ GIF<br />ก. แสดงสีได้ 16.7 ล้านสี<br /> ข. แสดงสีได้ 256 สีค. แสดงผลภาพได้ทั้งระบบพีซีและระบบแมคอินทอช<br /> ง. Corel Draw <br />
  15. 15. 1<br />กราฟิก (Graphic)<br />ความหมาย<br />การสื่อความหมายด้วยการใช้ศิลปะและศาสตร์ทางการใช้เส้น ภาพวาดภาพเขียนแผนภาพ ตลอดจนสัญลักษณ์ ทั้งสีและขาว-ดำซึ่งมีลักษณะเห็นได้ชัดเจนเข้าใจ ความหมายได้ทันที ตรงตามที่ผู้สื่อสารต้องการ<br />
  16. 16. 2<br />คำถามชวนคิด<br />ประเภทของภาพกราฟิกมีอะไรบ้าง<br />
  17. 17. 3<br />กราฟิก (Graphic)<br />ประเภทของกราฟิก<br /> 1.แบบบิตแมพ (bitmap) <br /> 2.แบบเวกเตอร์ (vector) หรือ สโตรก (stroke)<br />
  18. 18. 4<br />ประเภทของกราฟิก<br />บิตแมป<br />หมายถึงภาพที่ประกอบด้วยจุดสีเล็ก ๆ ที่เรียกว่า Pixel มาประกอบกันขึ้นจนเป็นภาพ คำว่า บิตแมป เรียกอีกอย่างหนึ่งว่า Still Image หรือ Raster Image<br />
  19. 19. 5<br />บิตแมป<br />ข้อดี<br />เหมาะกับภาพที่ต้องการระบายสี สร้างสี กำหนดสีที่ต้องการความละเอียดได้ง่ายจุดสีมีขนาดเล็กเท่าใดภาพก็จะยิ่งดูเนียนและกลมกลืนเป็นภาพเดียวกันมากขึ้นเท่านั้น <br />
  20. 20. 6<br />บิตแมป<br />ข้อเสีย<br />หากจุดสีมีขนาดใหญ่และเมื่อ มีการขยายภาพ ภาพที่เห็นก็จะดูขรุขระ ขาดความคมชัด ไม่เรียบกลมกลืนภาพแตก มองเห็นเป็นสี่เหลี่ยมเล็กๆ<br />
  21. 21. 7<br />บิตแมป<br />รูปแบบของภาพ<br /> รูปแบบของภาพประเภทนี้ได้แก่JPG, GIF, PNG, TIFF, BMPPCX, JPEG2000 เป็นต้น<br />
  22. 22. 8<br />บิตแมป<br />โปรแกรมที่สร้าง<br /> เช่น Adobe Photoshop , Fractal Design Painter ,Pain, Paint Shop Pro , L-View เป็นต้น<br />
  23. 23. 9<br />ประเภทของกราฟิก<br />เวกเตอร์<br /> หมายถึงการกำหนดพิกัดและการคำนวณค่าบนระนาบสองมิติ รวมทั้งมุมและระยะทางตามทฤษฎีเวกเตอร์ในทางคณิตศาสตร์ ในการก่อให้เกิดเป็น เส้น หรือรูปภาพ<br />
  24. 24. 10<br />เวกเตอร์<br />ข้อดี<br /> สามารถย่อขยายได้ โดยคุณภาพไม่เปลี่ยนแปลง การจัดเก็บสิ้นเปลืองเนื้อที่น้อยกว่า bitmap มาก การหมุนจะทำได้ดีกว่า<br />
  25. 25. 11<br />เวกเตอร์<br />ข้อเสีย<br /> ไม่สามารถเก็บรายละเอียดของสีสันต่าง ๆ ได้ดี  เนื่องจากเก็บในรูปสูตรแบบของเส้น<br />
  26. 26. 12<br />เวกเตอร์<br />รูปแบบของภาพ<br /> รูปแบบของภาพประเภทนี้ได้แก่SVG,PS, EPS, WMF, CDR, AI, CGM, DRW, PLT และฟอนต์แบบ TrueType ต่างๆ เป็นต้น<br />
  27. 27. 13<br />เวกเตอร์<br />โปรแกรมที่สร้าง<br /> เช่น Adobe Illustrator Macromedia Freehand Corel Draw เป็นต้น<br />
  28. 28. 14<br />กราฟิกสำหรับงานเว็บไซต์<br />ความหมาย<br />การนำภาพกราฟิกรูปแบบต่างๆ มาใช้เป็นองค์ประกอบในการสร้างเว็บไซต์<br />
  29. 29. 15<br />กราฟิกสำหรับงานเว็บไซต์<br />.GIF<br />รูปแบบที่ใช้คือ<br />.JPEG<br />PNG<br />1. ไฟล์รูปแบบ JPEG<br />2. ไฟล์รูปแบบ GIF<br />3. ไฟล์รูปแบบ PNG<br />
  30. 30. 16<br />JPEG<br />(Joint Photographic Experts Group ) <br />ความหมาย<br /> เป็นรูปแบบการบีบอัดแฟ้มภาพโดยให้เสียความละเอียดน้อยที่สุด เหมาะสำหรับภาพถ่ายหรือภาพที่มีการไล่เฉดสีเช่น ภาพวิวทิวทัศน์ ภาพถ่ายคน สามารถเก็บค่าสีได้มากถึง 16.7 ล้านสี ไฟล์ภาพยังถูกบีบอัดให้มีขนาดเล็ก จึงเหมาะสำหรับการนำไปใช้ในเว็บเพจ<br />
  31. 31. 17<br />JPEG<br />(Joint Photographic Experts Group) <br />จุดเด่น<br /> สนับสนุนสีได้ถึง 24 bit สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ มีระบบกรแสดงผลแบบหยาบๆ และค่อยๆขยายไปสู่ละเอียดในระบบ progressive มีโปรแกรมสนับสนุนจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัวตั้งค่าการบีบไฟล์ได้ (compress files )<br />
  32. 32. 18<br />JPEG<br />(Joint Photographic Experts Group) <br />จุดด้อย<br />ทำให้รูปโปร่งใสไม่ได้ <br />
  33. 33. 19<br />GIF<br />(Graphic Interchange Format) <br />ความหมาย<br /> เป็นรูปแบบแฟ้มภาพและแฟ้มภาพเคลื่อนไหว รูปแบบ GIF ถูกออกแบบโดย Compuserveซึ่งเป็นระบบเครือข่ายข่าวสารแบบออนไลน์ เพื่อให้บริการแลกเปลี่ยนกราฟิกในรูปแบบบิตแมปเหมาะสำหรับจัดเก็บภาพการ์ตูน หรือภาพวาดลายเส้น<br />
  34. 34. 20<br />GIF<br />(Graphic Interchange Format) <br />ไฟล์ GIF มี 2 สกุล<br />GIF87 พัฒนาขึ้นในปี ค.ศ. 1987<br />GIF89A พัฒนาขึ้นในปี ค.ศ. 1989<br />
  35. 35. 21<br />GIF87<br />ความหมาย<br /> เป็นไฟล์กราฟิกรุ่นแรกที่สนับสนุนบนอินเตอร์เน็ต เป็นไฟล์ที่มีขนาดเล็กและแสดงผลสีได้เพียง 256 สี และกำหนดให้แสดงผลแบบโครงร่างได้( Interlace )<br />
  36. 36. 22<br />GIF89A<br />ความหมาย<br />เป็นการพัฒนาเพิ่มจาก GIF87 โดยเพิ่มความสามารถการแสดงผลในพื้นที่โปร่งใส (Transparent) และการสร้างภาพเคลื่อนไหว (GIF Animation) โดยนำเอาไฟล์ภาพหลายๆ ไฟล์มารวมกันและนำเสนอภาพเหล่านั้น โดยอาศัยการหน่วงเวลา มีการใส่รูปแบบนำเสนอลักษณะต่างๆ ( Effects ) ในลักษณะภาพเคลื่อนไหว<br />
  37. 37. 23<br />GIF<br />(Graphic Interchange Format) <br />จุดเด่น<br /> มีขนาดไฟล์ต่ำ สามารถทำพื้นภาพให้เป็นพื้นโปร่งใสได้ ( Transparent ) มีระบบแสดงผลหยาบและค่อยๆขยายไปสู่ละเอียดในระบบ Interlaceมีโปรแกรมสนับการสร้างจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัว ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว ( GIFAnimation )<br />
  38. 38. 24<br />GIF<br />(Graphic Interchange Format) <br />จุดด้อย<br />แสดงสีได้ทั้งหมด 256 สี<br />
  39. 39. 25<br />คุณลักษณะ<br />Transparent Feature<br />คุณลักษณะของภาพที่มีการดรอป ( Drop ) การแสดงสีที่ต้องการ มักจะเป็นสีพื้น ( จริงๆเลือกสีได้มากกว่า 1 สี ) เพื่อให้สีที่เลือกโปร่งใส และแสดงสีตาม ( Browser )<br />
  40. 40. 26<br />คุณลักษณะ<br />Interlace Feature<br />คุณลักษณะของการแสดงผลแบบโครงร่าง และค่อยๆแสดงผลแบบรายละเอียด โดยใช้หลักการแทรกสอดของสี โดยปกติการแสดงภาพบนอินเตอร์เน็ต จะแสดงผลไล่ขอบบนของภาพจนถึงขอบล่าง ซึ่งมักจะแสดงผลช้ามาก เพราะต้องรอให้แต่ละส่วนแสดงผลครบทุกความละเอียด )<br />
  41. 41. 27<br />PNG<br />(Portable Network Graphic) <br />ความหมาย<br />เป็นรูปแบบแฟ้มภาพที่พัฒนาขึ้นมาทดแทนรูปแบบแฟ้มแบบ GIF เพื่อแก้ปัญหาด้านสิทธิบัตร<br />
  42. 42. 28<br />PNG<br />(Portable Network Graphic) <br />จุดเด่น<br />สามารถแสดงผลภาพได้ทั้งในคอมพิวเตอร์ระบบพีซีและในระบบแมคอินทอช จัดเก็บภาพถ่ายได้ดีและทำภาพเคลื่อนไหว ทำภาพไม่มีพื้นหลัง และแสดงภาพแบบ Interlace ได้ <br />
  43. 43. 29<br />PNG<br />(Portable Network Graphic) <br />จุดด้อย<br /> ยังไม่เป็นที่นิยมมากนัก เพราะมีปัญหาด้านการแสดงผลในอินเทอร์เน็ตเอกซ์พลอเรอร์ เวอร์ชัน 6 กำลังพัฒนา ปรับปรุง<br />
  44. 44. 30<br /> แผนผังความคิด <br />
  45. 45. 31<br />ทบทวนความเข้าใจ<br />กิจกรรม<br />ให้นักเรียนเข้าเว็บไซต์ http://www.google.co.th<br />ค้นหาภาพ รูปแบบ .JPG,.GIF,.PNG และทำการบันทึกไฟล์รูปแบบละ 5 ไฟล์ พร้อมนำเสนอภาพหน้าชั้นเรียน<br />
  46. 46. 32<br />ปุจฉา<br />กราฟิกสำหรับงานเว็บไซต์มี 3 รูปแบบอะไรบ้างครับ<br />คลิกที่รูปครับ<br />
  47. 47. เฉลย<br />.JPEG<br />กราฟิกสำหรับงานเว็บไซต์มี 3 รูปแบบอะไรบ้างครับ<br />.GIF<br />.PNG<br />คลิกที่รูปครับ<br />
  48. 48. 33<br />เพื่อนๆ รู้จักคำว่า“เว็บไซต์” ไหมครับอยากรู้ ... คลิกหน้าถัดไปได้เลย<br />น่ารู้<br />
  49. 49. 34<br />เว็บไซต์ (website)<br />ความหมาย<br /> =<br />+<br />หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์<br />
  50. 50. 35<br />รู้หรือไม่<br />HTML กับ XHTML ย่อมาจากอะไร<br />HTMLหรือ XHTML<br />ถ้าไม่รู้ คลิก ที่ ข้อความได้เลยครับ<br />
  51. 51. เฉลย<br />รู้จัก HTML กับ XHTML ไหมครับ<br />HTMLหรือ XHTML<br />เอชทีเอ็มแอล - เป็นคำย่อจากคำขึ้นต้นของ <br />(HyperText Markup Language)<br />
  52. 52. เฉลย<br />รู้จัก HTML กับ XHTML ไหมครับ<br />XHTML<br />เอกซ์เอชทีเอ็มแอล เป็นคำย่อจากคำขึ้นต้นของ <br />(Extensible HyperTextMarkup Language)<br />
  53. 53. 36<br />แบบทดสอบหลังเรียน<br />1. ฟอร์แมตภาพในข้อใดเป็นแบบ Vector<br /> ก. WMF<br /> ข. Video Clip<br /> ค. JPG<br /> ง. GIF<br />
  54. 54. 37<br />แบบทดสอบหลังเรียน<br />2. ข้อใดไม่ใช่ความหมายของ กราฟิก<br /> ก. การสื่อความหมายด้วยการใช้ศิลปะ การแสดง แสง สี เสียง<br /> ข. ภาพวาดที่สื่อความหมายได้ทันที<br /> ค. การสื่อความหมายด้วยภาพเขียนขาว - ดำ<br /> ง. สัญลักษณ์ ซึ่งมีลักษณะเห็นได้ชัดเจนเข้าใจ ความหมาย<br />
  55. 55. 38<br />แบบทดสอบหลังเรียน<br />3. รูปแบบภาพใดที่เหมาะสำหรับภาพถ่าย<br /> ก. JPG<br /> ข. GIF<br /> ค. BMP<br /> ง. WMF<br />
  56. 56. 39<br />แบบทดสอบหลังเรียน<br />4. ข้อใดให้ความหมายไม่ถูกต้องเกี่ยวกับกราฟิก<br /> ก. แดงวาดภาพสุนัข<br /> ข. สุชาติถ่ายรูปต้นไม้<br /> ค. พยอมเชิดสิงโต<br /> ง. สุธีดูสัญลักษณ์ห้องน้ำชาย<br />
  57. 57. 40<br />แบบทดสอบหลังเรียน<br />5. รูปแบบภาพใดที่เหมาะสำหรับภาพการ์ตูนลายเส้นที่มีจำนวนสีไม่มาก<br /> ก. JPG<br /> ข. GIF<br /> ค. BMP<br /> ง. PCX<br />
  58. 58. 41<br />แบบทดสอบหลังเรียน<br />6. รูปแบบภาพใด ที่พัฒนาเพื่อแก้ปัญหาด้านลิขสิทธิ์<br /> ก. JPG<br /> ข. GIF<br /> ค. BMP<br /> ง. PNG<br />
  59. 59. 42<br />แบบทดสอบหลังเรียน<br />7. รูปแบบภาพในข้อใดที่ไม่นิยมมาแทรกลงในเว็บเพจ<br /> ก. JPG<br /> ข. GIF<br /> ค. TIFF<br /> ง. PNG<br />
  60. 60. 43<br />แบบทดสอบก่อนเรียน<br />8. ข้อใดเป็นคุณสมบัติของรูปแบบ GIF<br />ก. แสดงสีได้ 16.7 ล้านสี<br /> ข. แสดงสีได้ 256 สีค. แสดงผลภาพได้ทั้งระบบพีซีและระบบแมคอินทอช<br /> ง. Corel Draw <br />
  61. 61. 44<br />แบบทดสอบหลังเรียน<br />9. ภาพแบบ Bitmap มีชื่อเรียกอีกอย่างหนึ่งว่าอะไร<br /> ก. Vector Image<br /> ข. Raster Image<br /> ค. BMP Image<br /> ง. Photo Image<br />
  62. 62. 45<br />แบบทดสอบหลังเรียน<br />10. โปรแกรมในข้อใดใช้สำหรับสร้างรูปแบบ JPG<br /> ก. Adobe Photoshop <br /> ข. Adobe Illustrator ค. Macromedia Freehand <br /> ง. Corel Draw <br />
  63. 63. 46<br />เอกสารอ้างอิง<br />กรมสามัญศึกษา, กระทรวงศึกษาธิการ. พระราชบัญญัติการศึกษาแห่งชาติ พ.ศ. 2542 แก้ไขเพิ่มเติม (ฉบับที่ 2) พ.ศ. 2545. กรุงเทพฯ : พริกหวานกราฟฟิค, 2546.<br />พิสุทธา อารีราษฎร์. การสร้างหนังสืออิเล็กทรอนิกส์เพื่อการเรียนรู้. (เอกสาร ประกอบการบรรยาย), คณะเทคโนโลยีสารสนเทศ. มหาวิทยาลัยราชภัฏ มหาสารคาม, 8-12 กุมภาพันธ์ 2553. <br />โรงเรียนสงวนหญิง.หลักสูตรสถานศึกษา.สุพรรณบุรี.2552<br />http://th.wikipedia.org/wiki/<br />
  64. 64. 47<br />ผู้จัดทำ<br />ชื่อ-สกุล นายสันติชัย บุญรักษ์<br />ตำแหน่ง ครู วิทยฐานะครูชำนาญการพิเศษ<br />โรงเรียนสงวนหญิง อำเภอเมืองสุพรรณบุรี <br /> จังหวัดสุพรรณบุรี<br />สำนักงานเขตพื้นที่การศึกษาสุพรรณบุรี เขต1<br />โทรศัพท์ 089-9122166<br />e-Mail santichai87@hotmail.com<br />
  65. 65. รายงานผลการทำแบบทดสอบ<br /> คะแนนเต็ม 10 คะแนน<br /> คะแนนที่ทำได้ คะแนน<br />

×