E-Book โปรแกรมกราฟิก 2204-2105

ใบงานที่ 1.1

คำสั่ง จัดหารายละเอียด โปรแกรมสำหรับงานกราฟิกที่น่าสนใจ กำหนดให้ห้ามทำโปรแกรมซ้ำกนั
เมื่อจัดทำเรียบร้อยแล้วให้นำเสนอโปรแกรมละ 5-10 นาที ผู้ที่ฟังการนำเสนอให้จด
รายละเอยี ดของการนำเสนอ และซักถามเพิ่มเตมิ ในกรณที ่ีมขี ้อสงสยั

หวั ขอ้ รายละเอียดโปรแกรมสำหรับงานกราฟกิ ทนี่ ่าสนใจมดี งั น้ี
1. ช่ือโปรแกรมกราฟิก
2 รุ่นของโปรแกรม
3 ขนาดไฟล์
4 ประวัติความเป็นมาของโปรแกรม และบริษทั ที่สรา้ งโปรแกรมกราฟกิ
5 ความตอ้ งการของโปรแกรมข้นั ตำ่
6. ความสามารถของโปรแกรมพืน้ ฐาน
7. แหลง่ ข้อมูลอา้ งอิง
8. ผู้จดั ทำ



ตัวอย่างใบงานท่ี 1

ชือ่ โปรแกรมกราฟกิ : Adobe Photoshop รุ่นของโปรแกรม: Extended ขนาดไฟล:์ 979.9 MB
CS5

ประวัติความเป็นมาของโปรแกรม รวมไปถงึ บริษัททสี่ ร้างโปรแกรมกราฟกิ :

โปรแกรม Photoshop เวอรช์ ันแรกน้ันเริ่มต้นสรา้ งข้นึ ในปี ค.ศ. 1990 จากบริษทั Adobe และได้รับการพัฒนา
มาเรื่อยๆ จากเวอร์ชัน 2, 2.5, 3, 4, 5, 5.5 เวอร์ชัน 6, 7, CS จนถึงเวอร์ชั่นล่าสุดในปัจจุบัน ที่เรียกกันว่า
เวอร์ชัน CS5 Extend โดยได้ทำการเพิ่มประสทิ ธิภาพการจดั การกับภาพกราฟิกข้ึนเรื่อยๆ จากเดิมที่เน้นใช้งาน
เพื่อการสร้างภาพสิง่ พิมพ์ ก็หันมาเน้นเกี่ยวกบั การจัดการภาพกราฟิกที่ใช้บนเว็บมากย่ิงขึ้น และนอกจากนี้แล้ว
ยงั ไดส้ ร้างโปรแกรม Image Ready ซ่งึ เปน็ โปรแกรมท่ใี ช้สร้างภาพเคลอ่ื นไหวควบคมู่ ากบั โปรแกรม Photoshop
อกี ดว้ ย เพ่ือเพ่ิมความสามารถเกย่ี วกบั การทำภาพกราฟิกท่ใี ช้สำหรบั การทำเว็บไซต์โดยเฉพาะ
ความต้องการของโปรแกรมข้ันตำ่ :

• Windows ซีพียขู ั้นต่ำ Intel® Pentium 4 or AMD Athlon 64 processor

• Microsoft® Windows® XP with Service Pack 3; Windows Vista® Home Premium,
Business, Ultimate, or Enterprise with Service Pack 1 (Service Pack 2 recommended); or
Windows 7

• แรม 1GB หรอื สงู กว่า

• พน้ื ที่ว่างของฮารด์ ดิสก์ 1GB สำหรับลงโปรแกรม

• หน้าจอขนาด 1024x768 (ขนาดของจอที่เหมาะสมคือ 1280x800) และมีการ์ดจอเป็น OpenGL
graphics, 16-bit color, และ 256MB of VRAM

• ไดรฟ์ DVD-ROM

• อนิ เทอร์เน็ตความเรว็ สูงสำหรบั อัพเดตโปรแกรม
ความสามารถของโปรแกรมพน้ื ฐาน:

1. ตกแต่งหรอื แกไ้ ขรูปภาพ ตดั ตอ่ ภาพบางส่วน หรือท่ีเรยี กว่า crop ภาพ
2. เปลี่ยนแปลงสขี องภาพ จากสหี นึง่ เป็นอีกสีหน่ึงได้
3. สามารถลากเสน้ แบบฟรสี ไตล์ หรือใสร่ ูปภาพ สี่เหล่ียม วงกลม หรือสรา้ งภาพไดอ้ ยา่ งอสิ ระ
4. มีการแบ่งชัน้ ของภาพเปน็ Layer สามารถเคลอ่ื นย้ายภาพได้เป็นอสิ ระตอ่ กนั
5. การทำ cloning ภาพ หรอื การท่าภาพซ้ำในรปู ภาพเดยี วกัน
6. เพ่มิ เตมิ ข้อความ ใส่ effect ของขอ้ ความได้
7. Brush หรือแปรงทาสี ท่ีสามารถเลอื กรูปแบบสำเร็จรปู ในการสร้างภาพได้
8. สามารถสร้างภาพเคล่ือนไหวและสนบั สนนุ รูปภาพสามมิติ

9. มี Plug-In ทีส่ ามารถไปหาดาวนโ์ หลดมาเสรมิ โปรแกรมได้



แหล่งขอ้ มลู อ้างอิง:

1 http://www adobe cm
2 http://www thainextstep.com
3 http://www.it-guides.com

ผู้จดั ทำ:

ชือ่ -นามสกุลของผู้จัดทำ หากมีการทำเป็นกล่มุ ใหเ้ ขยี นชื่อกล่มุ หรอื เลขที่กล่มุ



ใบงานท่ี 1.2

คำสั่ง ค้นคว้าหารูปภาพที่เกี่ยวข้องกับคอมพิวเตอร์กราฟิก การประยุกต์การใช้งานคอมพิวเตอร์ใน
งานดา้ นต่างๆ น้นั มอี ยู่ 5 หวั ขอ้ คือ
1. การประยุกต์ตา้ นการออกแบบ
2. การประยุกต์ดา้ นสิ่งพมิ พ์
3. การประยกุ ต์ด้านการแพทย์
4. การประยุกต์ด้านบันเทงิ
5. การประยุกต์ด้านอื่นๆ กำหนดให้หาหัวข้อละ 3 รูปภาพ โดยหาจากหนังสือพิมพ์ นิตยสาร

วารสาร หรอื ในอนิ เทอร์เนต็ เม่ือหารูปภาพได้แลว้ ให้เขียนว่ารูปภาพนน้ั เป็นรูปภาพการประยุกต์ด้าน
ใด และอธบิ ายพอสังเขป



หน่วยการเรียนรูท้ ี่ 2 หลกั การทำงานและการแสดงผลของภาพคอมพิวเตอร์กราฟิก

แนวคิด
การแสดงผลของภาพคอมพิวเตอร์กราฟิกส์มีความสำคัญกับงานที่สร้างเป็นอย่างมาก

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

สาระการเรียนรู้
1.ประเภทของภาพกราฟิก
2. ระบบสี (Color Model)
3. ชนิดของไฟลร์ ปู ภาพ
4. ความละเอียดรปู ภาพ (Resolution)
5.การจดั เตรียมรปู ภาพเพ่ือนำมาใช้งาน
6.การติดตั้งโปรแกรม Adobe Photoshop CS4
7. การปรับร่นุ โปรแกรมผา่ นอินเทอรเ์ นต็

ผลการเรยี นรทู้ ่ีคาดหวัง
1. บอกประเภทของภาพกราฟิกได้
2. อธิบายระบบสี (Color Model) ได้
3 บอกชนิดของไฟลร์ ูปภาพได้
4. อธิบายความละเอียดรูปภาพ (Resolution) ได้
5. จดั เตรยี มรปู ภาพเพื่อนำมาใช้งานได้
6. ติดตงั้ โปรแกรม Adobe Photoshop CS4 ได้
7 ปรบั รุ่นโปรแกรมผา่ นอนิ เทอรเ์ น็ตได้



แบบประเมินผลกอ่ นเรยี นหน่วยท่ี 2

คำสงั่ จงเลอื กคำตอบท่ถี กู ต้องเพยี งข้อเดียว
1. ขอ้ ใดคือความหมายของคำวา่ เวกเตอร์กราฟิกส์ (Vector Graphics)

ก. ภาพทเี่ กิดขน้ึ เกิดจากการกำหนดพกิ ดั และการคานวณค่าบนระนาบหนงึ่ มติ ิ
ข. ภาพท่เี กิดขนึ้ เกดิ จากการกำหนดพกิ ดั และการคำนวณค่าบนระนาบสองมิติ
ค. ภาพท่ีเกดิ ขึน้ เกดิ จากการกำหนดพิกดั และการคำนวณค่าบนระนาบท่ีมีมิติ
ง. ภาพที่เกดิ ขึ้นเกดิ จากการกาหนดพิกัดและการคานวณคา่ บนระนาบท่ีไมม่ ีมิติ
2. ข้อใดคือความหมายของคำว่า ราสเตอรก์ ราฟิกส์ (Raster Graphics)
ก. รปู ภาพที่ประกอบขน้ึ ดว้ ยจุดสี (Pixel) ตา่ งๆ
ข. รูปภาพทป่ี ระกอบขึน้ ดว้ ยเวกเตอร์กราฟกิ ส์ (Vector Graphics) ตา่ งๆ
ค. รปู ภาพทปี่ ระกอบขึ้นด้วยโปรแกรมกราฟิกต่างๆ
ง. รูปภาพท่ีประกอบขึน้ ด้วยไฟลน์ ามสกลุ รูปภาพหลายๆ ไฟล์
3. ขอ้ ใดคือลักษณะของภาพแบบ Resolution Dependent
ก. เม่ือขยายภาพมีลักษณะเป็นตารางเลก็ ๆ
ข. เมื่อเพ่ิมความละเอียดจะทำใหภ้ าพมีขนาดใหญ่
ค. ส่วนใหญ่เป็นไฟลส์ กุล EPD
ง. ขอ้ ก. และ ข. ถกู
4. โมเดลใดมแี นวคิดมาจากการผสมแสงสีหลกั 3 สีเข้าดว้ ยกนั
ก. โมเดลซีเอม็ วายเค
ข. โมเดลอารจ์ บี ี
ค. โมเดลแอลเอบี
ง. ไมม่ ีข้อใดถูก
5. นกั วิทยาศาสตร์ทา่ นใดเปน็ ผู้คิดคน้ ผลกึ ปรซิ ึม
ก. เซอร์ไอแซก นิวตนั
ข. จอห์น สมิธ
ค. กาลเิ ลโอ
ง. โทมสั แอลวา เอดิสนั
6. ข้อใดเป็นรูปภาพกราฟิกท่ีนยิ มนำมาใช้ในการแทรกภาพลงในเอกสาร
ก. ไฟลท์ มี่ นี ามสกลุ เป็น JPEG



ข. ไฟลท์ ่มี ีนามสกุลเป็น GIF
ค. ไฟล์ท่ีมนี ามสกุลเปน็ PNG
ง. ถกู ทุกขอ้
7. ขอ้ ใดส่ือให้เหน็ ถงึ ความสำคญั ของการมองเห็นของรูปภาพกบั การมองเหน็ ของมนษุ ย์
ก. สิบปากวา่ ไม่เท่าตาเห็น
ข. ตาบอดไดแ้ ว่น
ค. คำพดู พนั คำกไ็ มเ่ ท่ากับรปู ภาพเพียงภาพเดียว
ง. ขอ้ ก. และ ค. ถูก
8. ข้อใดคือปัญหาทอี่ าจตามมาเมอ่ื นำภาพจากเว็บเพจอ่ืนมาใช้งาน
ก. ไฟลภ์ าพมีการขยายตัวเมอ่ื เวลาผ่านไป
ข. สีของภาพที่ผิดเพยี้ น
ค. ความสมบรู ณ์ของภาพ
ง. ลขิ สทิ ธิข์ องภาพ
9. โปรแกรมใดแสดงภาพแบบ Bitmap
ก. Illustrator
ข. Adobe PhotoShop
ค. AutoCAD
ง. Freehand
10. เหตุใดจงึ นยิ มใช้ฟอร์แมตที่มีการบบี อัดภาพสำหรับงานแสดงผลในเว็บเพจ
ก. เพอื่ เพม่ิ มิติของภาพ
ข. เพอ่ื ลดขนาดของภาพ
ค. เพื่อเพม่ิ คุณภาพของภาพ
ง. เพ่ือเพ่ิมความละเอยี ดของภาพ



ประเภทของภาพกราฟิก

ภาพกราฟิกสามารถแบ่งได้ออกเป็น 2 ประเภท คือ เวกเตอร์กราฟิกส์ (Vector Graphics)
และ ราสเตอร์กราฟิกส์ (Raster Graphics) การเลือกชนิดรูปภาพที่เหมาะสมกับประเภทของ
ภาพกราฟิก เปน็ ส่งิ สำคัญหนงึ่ ทจ่ี ะทำให้ผลงานดูนา่ สนใจ

รปู ภาพแสดงภาพแบบ Vector Graphics รูปภาพแสดงภาพแบบ Raster Graphics

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

สกลุ EPD, WMF, CDR, AI, CGM, DRW, PLT และฟอนต์แบบ TrueType
ต่างๆ เป็นต้น โดยมีโปรแกรมประเภท วาดรูป (Drawing Program) เช่น
CorelDraw หรือ AutoCAD เป็นโปรแกรมสร้างขณะทีบ่ นแมคอินทอชใช้
Illustrator และ Freehand ในบางครั้งภาพเวกเตอร์กราฟิกยังอาจ
หมายถงึ กราฟกิ สามมติ ิอีกด้วย



รูปภาพแสดงตัวอยา่ งเวกเตอร์กราฟิกส์ รูปภาพแสดงภาพแบบ Vector Graphics

ตวั อยา่ งโปรแกรมท่ใี ชส้ รา้ งเวกเตอรก์ ราฟกิ ส์ Vector Graphics

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



รูปภาพตวั อย่างราสเตอรก์ ราฟิกส์ (Raster Graphics)

ภาพแบบ Bitmap จึงเหมาะสำหรับงานกราฟิกในแบบที่ต้องการให้แสงเงาในรายละเอียด
เป็นไฟล์ที่เหมาะกับการทำงานกับภาพเหมือนจริงประเภทภาพถ่าย เนื่องจาก Bitmap มี Channel
พิเศษเรยี กวา่ Alpha Channel ซึ่งเป็น 32 bits หรือ true color คือสีสมจรงิ เช่น ภาพทน่ี ำมาใช้กับ

โปรแกรม Adobe Photoshop จะเป็นภาพเหมือนภาพถ่าย เพราะ
ไฟล์ที่ได้จาก Adobe Photoshop เป็น Bitmap ในขณะที่ไฟล์ที่สร้าง
จาก Illustrator จะเหมือนการ์ตูนหรือภาพเขียนเพราะเป็นไฟล์แบบ
Vector และภาพแบบ Bitmap ยงั เหมาะสำหรบั ภาพท่ีต้องการระบาย
สี สร้างสีหรือกำหนดสที ีต่ ้องการความละเอยี ดและสวยงาม
ไฟล์ภาพแบบ Bitmap คือไฟลท์ ี่มนี ามสกลุ .BMP, .PCX, .TIF, .GIF, .JPG, .MSP, .PCD เป็น
ต้น สำหรับโปรแกรมที่ใช้สร้างกราฟิกประเภทนี้คือ โปรแกรม Paint, Paint.net, gimp, Adobe
Photoshop, CorelDraw เป็นต้น

รปู ภาพตวั อย่างราสเตอร์กราฟกิ ส์ (Raster Graphics)



รูปภาพตัวอยา่ งโปรแกรมสร้างภาพแบบราสเตอรก์ ราฟิกส์

ความแตกต่างระหว่างกราฟิกแบบ Raster และ Vector

Raster Vector

1. องคป์ ระกอบภาพประกอบขึ้นด้วยจุดตา่ งๆ 1. ใช้สมการทางคณิตศาสตรเ์ ป็นตวั สร้างภาพ

โดยรวมเอา Object (เชน่ วงกลม เส้นตรง)

ตา่ งชนดิ มาผสมกัน

2. ภาพมีจำนวนพิกเซลคงทจ่ี งึ ต้องการคา่ ความ 2. สามารถยอ่ และขยายขนาดไดม้ ากกว่าโดย

ละเอียดมากขึน้ เมื่อขยายภาพ โดยจะ สัดสว่ นลักษณะของภาพ และความละเอยี ด

คำนวนค่าสที ลี ะพกิ เซลทำให้ภาพแตกเมอ่ื ไมเ่ ปล่ียนแปลง

ขยายภาพใหใ้ หญ่

3. เหมาะสำหรับงานกราฟิกในแบบต้องการให้ 3. เหมาะสำหรับงานจำพวกวาง Layout งาน

แสงเงาในรายละเอียด พมิ พ์ตวั อักษร Line Art หรอื Illustration

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

ขอ้ มลู จากหนว่ ยความจำที่เก็บไปยัง มากกวา่ เนื่องจากต้องทำตามคำสั่งทม่ี ี

หน่วยความจำของจอภาพ จำนวนมากกวา่



รปู ภาพแสดงความแตกต่างระหว่างกราฟิกแบบ Vector และ Raster

ระบบสี (Color Model)

ระบบสี คอื ระบบจําลองซ่ึงสร้างข้นึ เพ่ืออธบิ ายสที ่ีมนุษยส์ ามารถมองเหน็ โดยแยกสีออก
เปน็ องค์ประกอบพ้นื ฐานต่างๆ ดังนี้

1. โมเดลอารจ์ บี ี (Model RGB)
โมเดลนีไ้ ดแ้ นวคิดมาจากการผสมแสงสีหลกั 3 สเี ข้าด้วยกัน คือ แดง (Red) เขยี ว (Green)
และนำ้ เงนิ (Blue) จะทำให้เกิดสตี า่ งๆ ได้จำนวนมาก โดยข้ึนกบั สดั ส่วนความเขม้ ของสีหลกั แตล่ ะสี
ทีม่ คี ่าให้ตงั้ แต่ 0-255 (ในระบบสีที่ใช้ข้อมลู แบบ 8 บติ ) และเม่ือสหี ลักท้ังสามท่ีมีความเข้มข้น สงู สุด
มาผสมกนั ก็จะไดส้ ีขาว ซ่ึงลักษณะเชน่ นีเ้ รยี กว่า การผสมสีแบบบวก (additive color system)



WHITE

Model RGB: สตี า่ งๆ เกิดจากการผสมของแสงสหี ลัก 3 สี คือ
สแี ดง (Red) สเี ขียว (Green) และสนี ้ำเงนิ (Blue)

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

Model RGB: สตี า่ งๆ เกดิ จากการผสมของสี 3 สี ซึง่ เปน็ สแี สง
จากรูปภาพเปน็ การแสดงผลบนระบบปฏบิ ัติการ Windows 7

2. โมเดลซีเอ็มวายเค (Model CMYK)
โมเดลน้เี กดิ ข้นึ จากระบบการพิมพแ์ บบแยกสี โดยภาพจะถูกแยกออกเปน็ แม่พิมพ์ของสหี ลกั
เพยี ง 4 สี คือ ฟ้า (Cyan) ม่วงแดง (Magenta) เหลอื ง (Yellow) และดำ (Black) เม่ือพิมพ์สีเหลา่ นี้
ซ้อนกันก็จะได้ภาพบนหน้ากระดาษตามตน้ ฉบับ คา่ ของสหี ลักในโมเดลนีอ้ ยู่ในรูปเปอรเ์ ซ็นต์ของ
น้ำหนกั หมกึ พมิ พ์ตงั้ แต่ 0-100%



Model CMYK: สตี า่ งๆ เกิดจากการผสมของสีหลกั คือ สีฟ้า (C) สมี ว่ งแดง (M) และสเี หลอื ง (Y)
ซึ่ง 3 สีนี้ไม่สามารถแสดงผลเป็นสดี ำ (K) ได้ จงึ ต้องเพ่มิ สดี ำเพ่ือใหส้ ามารถพิมพ์งานสขี าวดำได้

รปู ภาพที่เกดิ จากการพิมพ์ 4 สี ตอ้ งใช้ระบบ CMYK

3. โมเดลแอลเอบี (Modes LAB)
เปน็ ค่าสีท่ีถูกกำหนดขน้ึ โดย CIE (Commission Internationaled Ecclairage) ใหเ้ ป็น
มาตรฐาน การวดั สที กุ รูปแบบ ครอบคลุมทุกสีใน RGB และ CMYK และใชก้ ับสีทีเ่ กิดจากอปุ กรณ์ทกุ
อย่าง เช่น Monitor, Printer, Scanner สว่ นประกอบของโหมดสีได้แก่



รปู ภาพประกอบ Model LAB

Luminance Model (L) คือ ความสวา่ ง
A หมายถึง ส่วนประกอบท่ีแสดงการไลส่ ีจากสีเขียวไปยงั สแี ดง
B หมายถงึ ส่วนประกอบทแ่ี สดงการไล่สจี ากสีน้ำเงนิ ไปถึงสีเหลือง

รูปภาพแสดงอุปกรณ์ทเี่ ก่ียวขอ้ งกบั Model LAB

4. โมเดลเอชเอสบี (Model HSB)
Model HSB คือหลกั การมองเห็นสดี ้วยสายตาของมนุษย์ เปน็ พืน้ ฐานการมองเหน็ สตี ามปกติ

จาก สายตามนุษย์ Model HSB จะประกอบขนึ้ ดว้ ยลกั ษณะของสี 3 ลกั ษณะ



รปู ภาพแสดง Model HSB

1) Hue เปน็ สีท่ีสะท้อนมาจากสขี องวตั ถุซ่ึงแตกต่างกนั ตามความยาวของคลนื่ แสงท่มี า
กระทบ วัตถุ และสะทอ้ นกลับมาทีต่ าของเรา Hue ถูกวดั โดยตำแหน่งบน Standard Color Wheel
ซง่ึ ถกู แทนด้วยองศาคือ 0 ถึง 360 องศา แตโ่ ดยการใช้ทั่วไปแลว้ จะเปน็ การเรยี กสีนน้ั เลย เช่น สแี ดง
สีมว่ ง สเี หลือง

2) Saturation เป็นคา่ ของความเขม้ ข้นและความจางของสี Saturation คือสัดส่วนของสี
Hue ทมี่ ีอยู่ในสีเทา วัดค่าเป็นเปอร์เซน็ ต์ ดงั นี้ คือจาก 0% (สเี ทา) จนถงึ 100% (full saturation สี
ท่มี ีความอม่ิ ตัวเต็มที่)

3) Brightness เป็นคา่ ของความสวา่ งและความมดื ของสี ซ่ึงถกู กำหนดค่าเปน็ เปอรเ์ ซน็ ต์
จาก 0% (สีดำ) ถึง 100% (สีขาว)

รปู ภาพการทำงานของดวงตามนษุ ย์ ซง่ึ ถกู จำลองด้วย Model HSB



ความรูพ้ น้ื ฐานเกี่ยวกบั แสงและสจี ากดวงอาทติ ย์
มนษุ ยส์ ามารถรู้สึกและสัมผัสถึงพลงั งานจากดวงอาทติ ย์ได้ 2 รปู แบบ คือ
1) รังสีของแสงสว่าง (Visible Light) ที่สามารถรับรู้ได้ผ่านการมองเห็น ดวงตามนุษย์

มองเห็นแสงอาทิตย์เป็นสีขาว แต่นักวิทยาศาสตร์ (เซอร์ไอแซก นิวตัน) ใช้ผลึกปริซึม แยกรังสีแสง
ออกได้ถงึ เจ็ดสี คือ มว่ ง คราม นำ้ เงนิ เขยี ว เหลือง แสด และแดง ซ่งึ เปน็ สีของรุ้งกินน้ำ

ในราว ค.ศ. 1666 เซอร์ไอแซก นิวตันได้แสดงให้เห็นว่าสีคือส่วนหนึ่งในธรรมชาติของ
แสงอาทิตย์ โดยใหล้ ำแสงสอ่ งผ่านแท่งแกว้ ปริซึม แสงจะหกั เหเพราะแทง่ แก้วปริซึมมคี วามหนาแนน่

มากกวา่ อากาศ เม่อื ลำแสงหกั เหผ่านปรซิ มึ จะปรากฏ
แถบสีสเปกตรัม (Spectrum) หรือที่เรียกว่า สีรุ้ง
(Rainbow) คือ สีม่วงคราม น้ำเงิน เขียว เหลือง แสด
แดง เมือ่ แสงตกกระทบโมเลกุลของสสาร พลังงานบาง
สว่ น จะดดู กลืนสีจากแสงบางสว่ น และสะทอ้ นสีบางสีให้ปรากฎเห็นได้ พน้ื ผวิ วัตถทุ เี่ ราเห็นเป็นสีแดง
เพราะวัตถุดูดกลืนแสงสีอื่นไว้ สะท้อนเฉพาะแสงสีแดงออกมา วัตถุสีขาวจะสะท้อนแสงสีทุกสี และ
วัตถุสีดำจะดูดกลืนทุกสี จากสเปกตรัมนี้เองที่ทำให้นิวตันเข้าใจถึงธรรมชาติของแสง และ สามารถ
อธิบายการเกิดรุ้งขึ้นได้ รุ้งหรือรุง้ กินน้ำเกิดขึ้นเมื่อลำแสงอาทิตย์ผ่านเข้าไปในเม็ดฝน และหักเหแยก
เป็นสตี า่ งๆ

เซอรไ์ อแซก นวิ ตัน ผู้พัฒนาทฤษฎีสโี ดยอา้ งองิ จากผลสงั เกตการณว์ ่า ปรซิ มึ สามเหลย่ี ม
สามารถแยกแสงสีขาวออกมาเปน็ หลาย ๆ สีใต้ ซ่ึงเป็นท่ีมาของสเปกตรมั แสงท่มี องเหน็



รปู ภาพแสดงหญงิ สาวทใี่ สช่ ุดสีทง้ั 7 สี (สรี ้งุ ) ทท่ี ำให้ความรู้สึกแตกต่างกนั

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

2.1 รงั สีเหนอื ม่วง หรอื รงั สีอัลตราไวโอเลต (Ultraviolet)
2.2 รังสใี ตแ้ ดง หรือรงั สีอนิ ฟราเรด (Infrared)

รูปภาพแสดงรงั สเี หนอื มว่ งและรังสใี ต้แดง ท่ีดวงตาของมนุษยไ์ ม่สามารถมองเห็นได้



ชนดิ ของไฟลร์ ปู ภาพ

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

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

1.GIF (Graphics Interchange Format)
ฟอร์แมต GIF ถกู พัฒนาขึ้นโดยมีจุดมุ่งหมายในการแสดงผลออนไลน์ (อนิ เทอรเ์ น็ต) , เป็น
หลกั รองรบั ภาพทมี่ ีจำนวนสีสงู สดุ 256 อลั การิทมึ การบีบอดั ข้อมูลของไฟลแ์ บบ GIF น้นั ไม่มีการ
ลดทอนคุณภาพของภาพลงแต่อย่างใด (lossless) เหมาะสำหรบั ใช้จดั เกบ็ ภาพการ์ตนู ตราสญั ลกั ษณ์
ต่างๆ ที่มีความละเอียดของสีสันนอ้ ย แสดงผลได้เรว็ รวมทั้งสนบั สนนุ การแสดง ภาพเคลอื่ นไหวได้
ทำให้เปน็ ภาพชนดิ พ้นื โปรง่ ใส (Transparency) จงึ มคี วามน่าสนใจมากขึ้น มีความสามารถในการ
แสดงผลแบบหยาบ และค่อยๆ ขยายไปสู่ละเอียด (Interlace)

ตวั อยา่ งรปู ภาพฟอร์แมต GIF



2. JPEG (Joint Photographic Experts Group)
เปน็ ฟอร์แมตทสี่ ามารถบีบอดั ขอ้ มูลได้สงู สดุ เพราะยอมให้มกี ารสญู เสียข้อมลู สีของภาพไป
บา้ ง (lossy) ท้ังนีส้ ามารถกำหนดความสมดุลระหว่างการบบี อัดกบั คณุ ภาพของภาพได้ ไฟล์แบบ
JPEG รองรับสจี ำนวน 16.7 ล้านสที ำใหภ้ าพมีความคมชัดสูง
ไฟล์ JPEG หรือ JPG (Joint Photographic Experts Group) มีนามสกุลเป็น *.jpg เป็น
ไฟล์ชนิดบบี อัด ข้อมลู ท่มี ีขนาดเลก็ มาก เน่ืองจากไฟล์ชนดิ น้ผี า่ นการบีบอดั ข้อมลู มาก จึงใชเ้ วลาใน
การคลายภาพกลบั มาเพ่อื แสดงผลนานกว่าไฟล์ GIF มรี ะบบการแสดงภาพแบบหยาบแล้วคอ่ ยๆ
ละเอียดชัดเจนขึ้นแบบ Progressive มีจุดออ่ นที่ไมส่ ามารถทำพ้นื โปร่งใสได้ จึงควรเลือกใชใ้ ห้
เหมาะสม

ตวั อย่างรูปภาพฟอร์แมต JPEG

3. PNG (Portable Network Graphics)
ไฟล์ PNG (Portable Network Graphic) ถกู พัฒนาขึ้นเพ่ือเป็นอีกทางเลือกหนึ่งของ
ฟอรแ์ มต GIF (เนื่องจากฟอร์แมต GIF เปน็ ลขิ สทิ ธ์ิของ Compu-Serve ซ่ึงในอดีตคือผู้ให้บรกิ าร
ออนไลน์รายหนึ่ง ในสหรฐั อเมรกิ า) ฟอร์แมต PNG รองรบั สจี ำนวน 16.7 ล้านสี และกำลงั เป็นท่ี
แพร่หลายในอนิ เทอรเ์ นต็ มากข้นึ สำหรบั การบนั ทกึ ไฟล์ภาพเพื่อนำไปใชใ้ นงานสิ่งพิมพ์ หรอื บนั ทกึ ไว้
เพอื่ นำกลบั มาตกแต่ง ต่อไปในอนาคตน้ัน ควรใช้ฟอรแ์ มตท่ีสามารถรักษาข้อมูลสีของภาพไวไ้ ดโ้ ดยไม่
ขาดตกบกพร่อง เชน่ ฟอรแ์ มต TIFF หรอื แมก้ ระท่งั ฟอร์แมตเฉพาะของโปรแกรม Photoshop คอื
PSD



ตัวอยา่ งไฟลภ์ าพนามสกุล PNG

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

ถา้ ภาพมีขนาดความกวา้ งใหญก่ ว่าเนือ้ ที่ทตี่ ้องการ ควรปรับขนาดของภาพดว้ ยโปรแกรม
ตกแตง่ ภาพ ให้มีขนาดภาพเท่าท่ตี ้องการ จะได้ขนาดไฟล์ท่เี ล็กลง

ตารางประเภทไฟล์ และนามสกุลไฟล์รปู ภาพกราฟกิ

ประเภทไฟล์ นามสกลุ
Microsoft Windows Metafile .emf, .wmf
Windows Bitmap .bmp, .dib, .rle
Computer Graphics Metafile .cgm
Graphics Interchange Format .gif
Joint Photographic Experts Group .jpg
Portable Network Graphics .png
Macintosh PICT .pct
Tagged Image File Format .tif
Vector Markup Language .vml
Microsoft Windows Media .avi, .asf, .asx, .rmi, .wma, .wax, .wav



ความละเอียดรปู ภาพ (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 นามสกุล คือ ไฟล์นามสกลุ JPG (JPEG) และ GIF

ตวั อยา่ งรูปภาพท่ีมีอยใู่ น Windows7 ซ่ึงเป็นไฟลน์ ามสกลุ JPG



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

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

1. สรา้ งรปู ภาพโดยโปรแกรมกราฟิกตา่ งๆ เชน่ Photoshop, Corel Draw เป็นตน้ ในการ
สร้างแฟ้มข้อมูลรปู ภาพ ซงึ่ จะได้ภาพท่ีตรงกบั ความต้องการ แตใ่ ชเ้ วลาในการสรา้ งภาพมากขึ้น

2. เลือกรปู ภาพจากชุดภาพสำเร็จรูป ท่ีมกี ารวางจำหนา่ ยในลักษณะคลังรปู ภาพสำหรับทำ
เว็บเพจ (Web ClipArt) ซง่ึ สะดวกรวดเร็วและงา่ ยต่อการใชง้ าน แตอ่ าจจะไดภ้ าพทไี่ มต่ รงกบั ความ
ต้องการมาก

รปู ภาพแสดงการเลือกรูปภาพจากคลงั รปู ภาพซึ่งสะดวกรวดเรว็ และง่ายต่อการใชง้ าน

3. นำรูปภาพจากโปรแกรมอื่น หรอื เวบ็ เพจอ่ืนมาใช้งาน ซึ่งสะดวกรวดเรว็ ตอ่ การใช้งาน
เชน่ กัน แตอ่ าจเกิดปญั หาดา้ นลขิ สิทธ์ขิ องภาพ

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



รปู ภาพแสดงอุปกรณก์ ลอ้ งดจิ ิทัล และเคร่ืองสแกน

รูปภาพทไ่ี ด้จากกล้องดจิ ทิ ลั และรปู ภาพทไี่ ด้จากเครอ่ื งสแกน

การติดตั้งโปรแกรม Adobe Photoshop CS4

โปรแกรม Adobe Photoshop CS4 เป็นโปรแกรมที่ใชส้ ร้างภาพกราฟกิ ตดั ต่อ แกไ้ ข
เคลอื่ นย้ายรูปภาพ ในโปรแกรมรุ่นใหม่ยังรองรับรูปภาพที่มลี กั ษณะสามมติ ไิ ด้ การตดิ ต้ังโปรแกรม
Adobe Photoshop CS4 จากแผน่ DVD ลงเครอื่ งคอมพิวเตอรร์ ะบบปฏบิ ัติการ Windows 7 ทำได้
ดงั นี้



1. เมือ่ ใสแ่ ผ่น DVD แลว้ ให้ไปที่ Computer

รูปภาพแสดงการเข้า Computer และเลอื ก Drive DVD (ในภาพคอื E:)

2. เลือกท่ี Setup.exe เพื่อติดตั้งโปรแกรมแล้วรอสักครู่

รปู ภาพแสดงการตดิ ตง้ั โปรแกรม