Computer and Web Graphics

กราฟิก (Graphic)
กราฟิก คำนี้คงได้ยินกันอย่างแพร่หลาย เนื่องจากเป็นสิ่งที่เกี่ยวข้องกับตัวเรา
อย่างมาก หันไปทางไหนก็เจอแต่กราฟิก ไม่ว่าจะเป็นสัญลักษณ์ โลโก้ กระดาษ แผ่น
พับ โฆษณา เป็นต้น คำว่ากราฟิกมีที่มาจากคำในภาษากรีก คือ Graphikos ที่แปลว่า
"การวาดเขียน และเขียนภาพ" หรือคำว่า "Graphein" ที่แปลว่า "การเขียน" ซึ่งมีผู้ให้
นิยามไว้หลายลักษณะ เช่น
• ศิลปะอย่างหนึ่ง ที่แสดงออกด้วยความคิดอ่าน โดยใช้เส้น รูปภาพ ภาพเขียน
ไดอะแกรม และอื่นๆ
• การสื่อความหมายด้วยการใช้ภาพวาด ภาพสเกต แผนภาพ ภาพถ่าย และอื่นๆ
ที่ต้องอาศัยศิลปะ และศาสตร์ เข้ามาช่วย เพื่อให้ผู้ดูเกิดความคิด และตีความ
หมายได้ตรงตามที่ผู้สร้างสรรค์ต้องการสื่อ เช่น แผนภูมิ แผนภาพโฆษณา
การ์ตูน เป็นต้น
• โสตทัศนวัตถุที่ผลิตขึ้นเพื่อแสดงสัญลักษณ์ หรือความหมายของสิ่งหนึ่งสิ่งใด
ทำให้คนได้มองเห็นความจริง หรือความคิดอันถูกต้องชัดเจนจากวัสดุกราฟิก
นั้นๆ
• การพิมพ์ การแกะสลัก การถ่ายภาพ และการจัดทำหนังสือ
• ...
จะเห็นว่ากราฟิก มีความหมายกว้างขวาง อย่างไรก็ตาม กราฟิกก็คือรูปแบบการสื่อสาร
รูปแบบหนึ่ง ที่ใช้ศิลปะมาเกี่ยวข้อง เพื่อสร้างสัญลักษณ์ ที่เข้าใจได้ง่าย และตรงกัน
ระหว่างผู้สื่อสาร กับผู้รับสาร
2
คอมพิวเตอร์กราฟิก
ก็คือ กราฟิกที่นำคอมพิวเตอร์มาดำเนินการ ตั้งแต่การเตรียมการ ออกแบบ นำ
เสนอ ใช้งาน
ดังนั้นงานกราฟิก จึงมีความสำคัญ คือ
• เป็นสื่อกลางในการสื่อความหมาย
• เกิดการเรียนรู้ การศึกษา
• เกิดความน่าสนใจ ประทับใจ และน่าเชื่อถือ
• กระตุ้นความคิด
• ก่อให้เกิดความคิดสร้างสรรค์
ส่งเสริมความก้าวหน้าทางความคิด
พิกเซล (Pixel)
พิกเซล (Pixel) เป็นคำผสมของคำว่า Picture กับคำว่า Element หรือหน่วยพื้น
ฐานของภาพ เทียบได้กับ "จุดภาพ" 1 จุด แต่ละพิกเซลเปรียบได้กับสี่เหลี่ยมเล็กๆ ที่
บรรจุค่าสี โดยถูกกำหนดตำแหน่งไว้บนเส้นกริดของแนวแกน x และแกน y หรือในตา
รางเมตริกซ์สี่เหลี่ยม ภาพบิตแมปจะประกอบด้วยพิกเซลหลายๆ พิกเซล
3
พิกเซลของภาพเฉดสีขาว/ดำ
Pixel ของภาพสี
จำนวนพิกเซลของภาพแต่ละภาพ จะเรียกว่า ความละเอียด หรือ Resolution โดยจะ
เทียบจำนวนพิกเซลกับความยาวต่อนิ้ว ดังนั้นจะมีหน่วยเป็น พิกเซลต่อนิ้ว (ppi: pixels
per inch) หรือจุดต่อนิ้ว (dpi; dot per inch) ภาพขนาดเท่านั้นแต่มีความละเอียดต่าง
กัน แสดงว่าจำนวนพิกเซลต่างกัน และขนาดของจุดพิกเซลก็ต่างกันด้วย
ภาพแบบ Vector
ภาพแบบ Vector เป็นภาพที่สร้างด้วยส่วนประกอบของเส้นลักษณะต่างๆ และ
คุณสมบัติเกี่ยวกับสีของเส้นนั้นๆ ซึ่งสร้างจากการคำนวณทางคณิตศาสตร์ เช่น ภาพ
ของคน ก็จะถูกสร้างด้วยจุดของเส้นหลายๆ จุด เป็นลักษณะของโครงร่าง (Outline)
และสีของคนก็เกิดจากสีของเส้นโครงร่างนั้นๆ กับพื้นที่ผิวภายในนั่นเอง เมื่อมีการแก้ไข
ภาพ ก็จะเป็นการแก้ไขคุณสมบัติของเส้น ทำให้ภาพไม่สูญเสียความละเอียด เมื่อมีการ
ขยายภาพนั่นเอง
ภาพแบบ Vector ที่หลายๆ ท่านคุ้นเคยก็คือ ภาพ .wmf ซึ่งเป็น clipart ของ Microsoft
Office นั่นเอง นอกจากนี้คุณจะสามารถพบภาพฟอร์แมตนี้ได้กับภาพในโปรแกรม
Adobe Illustrator หรือ Macromedia Freehand จะสังเกตได้ง่ายว่าภาพลักษณะนี้ จะ
มีจุดจับ (Handle) ช่วยให้การแก้ไข ย่อขยายขนาด หมุนภาพ ทำได้ง่าย สะดวก และ
รวดเร็ว
ภาพแบบ Bitmap
ภาพแบบ Bitmap หรืออาจจะเรียกว่าภาพแบบราสเตอร์ (Raster) เป็นภาพที่
เกิดจากจุดสีที่เรียกว่า pixels ซึ่งประกอบกันเป็นรูปร่างบนพื้นที่ที่มีลักษณะเป็นเส้นตา
ราง (กริด) แต่ละพิกเซลจะมีค่าของตำแหน่ง และค่าสีของตัวเอง ภาพหนึ่งภาพ จะ
ประกอบด้วยพิกเซลหลายๆ พิกเซลผสมกัน แต่เนื่องจากพิกเซลมีขนาดเล็กมาก จึงเห็น
ภาพมีความละเอียดสวยงาม ไม่เห็นลักษณะของกรอบสี่เหลี่ยม จึงเป็นภาพที่เหมาะสม
ต่อการแสดงภาพที่มีเฉด และสีสันจำนวนมาก เช่นภาพถ่าย หรือภาพวาด
ภาพแบบ Bitmap เป็นภาพที่ขึ้นอยู่กับความละเอียด หรือความคมชัด (Resolution) ซึ่ง
ก็คือ จำนวนพิกเซลที่แน่นอนในการแสดงภาพ ดังนั้นเมื่อมีการขยายภาพ จะเกิดปัญหา
คือ เห็นเป็นกรอบสี่เหลี่ยมเล็กๆ หลายๆ จุด ประกอบกัน เพราะกริดของภาพมีขนาดที่
แน่นอนนั่นเอง
ระบบสี Additive
ปกติเมื่อพูดถึงสี มักจะนึกถึงแม่สี 3 สี แต่อย่างไรก็ตาม การใช้สีกับงานกราฟิก
ในคอมพิวเตอร์ มีรายละเอียดหลายประการ ซึ่งเป็นลักษณะเฉพาะ ดังนั้นจึงควรทราบ
ระบบสีของคอมพิวเตอร์ก่อน
ระบบสีของคอมพิวเตอร์ จะเกี่ยวข้องกับการแสดงผลแสงที่แสดงบนจอคอมพิวเตอร์
โดยมีลักษณะการแสดงผล คือ ถ้าไม่มีแสดงผลสีใดเลย บนจอภาพจะแสดงเป็น "สีดำ"
หากสีทุกสีแสดงผลพร้อมกัน จะเห็นสีบนจอภาพเป็น "สีขาว" ส่วนสีอื่นๆ เกิดจากการ
แสดงสีหลายๆ สี แต่มีค่าแตกต่างกัน การแสดงผลลักษณะนี้ เรียกว่า การแสดงสีระบบ
Addivtive
สีในระบบ Additive ประกอบด้วยสีหลัก 3 สี (เช่นเดียวกับแม่สี) คือ สีแดง (Red) สี
เขียว (Green) และ สีน้ำเงิน (Blue) เรียกรวมกันว่า RGB ซึ่งมีรูปแบบการผสมสีของ
RGB ดังนี้
การผสมกันของแม่สีทั้งสาม
1. ถ้าแม่สีมีค่าเท่ากัน มาผสมกันเป็นคู่ จะได้ผลดังนี้
1 Red
+1 Blue
= Magenta
1 Blue
+1 Green
=Cyan
1 Green
+1 Red
=Yellow
2. ถ้าแม่สีมีค่าเท่ากัน มาผสมทั้ง 3 สี จะได้ผลดังนี้1 Red+1Blue
+1 Green
=White
3. ถ้าแม่สีมีค่าไม่เท่ากัน ผสมกัน จะได้สีต่างๆ กันไป เช่น
2 Red
+1 Green
=Orange
2 Green
+1 Red
=Lime
1 Blue
+1 Green
+4 Red
=Brown
ระบบสี Subtractive
ระบบสี Subtractive มีลักษณะที่ตรงข้ามกับ Additive โดยสีแต่ละสีจะได้จาก
การลบสีต่างๆ ออกไปจากระบบ ดังนั้น หากไม่มีการแสดงสีใดๆ จะแสดงผลเป็นสีขาว
ขณะที่การแสดงสีทุกสี จะปรากฏเป็นสีดำ และสีหลัก หรือแม่สีของระบบนี้ จะประกอบ
ด้วย สีฟ้า (Cyan) สีม่วงแดง (Magenta) และสีเหลือง (Yellow) หรือระบบ CMY เป็น
ระบบสีที่ใช้กับงานสิ่งพิมพ์ ซึ่งมักจะรวมเอาสีดำ มาเป็นแม่สีด้วย จึงเรียกว่าระบบ
CMYK (Cyan, Magenta, Yellow, blacK) นั่นเอง
ตัวอย่างการผสมสี
CYAN INK
MAGENTA INK
YELLOW INK
BLACK INK
ALL INKS
100% CYAN
100% YELLOWEN
100% CYAN
100% YELLOW
25% BLACK
100% MAGENTA
100% YELLOW
100% MAGENTA
100% YELLOW
25% BLACKRK RED
100% CYAN
50% MAGENTAUE
50% CYAN
75% MAGENTA
100% YELLOWWN
45% CYAN
30% MAGENTA
30% YELLOW

กราฟิกไฟล์สำหรับอินเทอร์เน็ต
ไฟล์กราฟิกที่สนับสนุนระบบอินเทอร์เน็ต ปัจจุบันมี 3 ไฟล์หลัก ๆ คือ
• ไฟล์สกุล GIF (Graphics Interlace File)
• ไฟล์สกุล JPG (Joint Photographer's Experts Group)
• ไฟล์สกุล PNG (Portable Network Graphics)
ไฟล์สกุล GIF (Graphics Interlace File)
ภาพกราฟิกสกุล GIF พัฒนาโดยบริษัท CompuServe จัดเป็นไฟล์ภาพสำหรับ
การเผยแพร่ผ่านอินเทอร์เน็ตตั้งแต่ยุคแรก เนื่องจากมีลักษณะเด่น คือ
• สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์ทุก
ระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้
• มีขนาดไฟล์ต่ำ จากเทคโนโลยีการบีบอัดภาพ ทำให้สามารถส่งไฟล์ภาพได้รวด
เร็ว
• สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ (Transparent)
• มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace
• มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
• เรียกดูได้กับ Graphics Browser ทุกตัว
• ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation)
จุดด้อย
ไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้ การ
• นำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัย
ฟอร์แมตอื่น
ไฟล์ .GIF มี 2 สกุล ได้แก่
GIF87 พัฒนาขึ้นในปี ค.ศ. 1987
เป็นไฟล์กราฟิกรุ่นแรกที่สนับสนุนการนำเสนอบนอินเทอร์เน็ต เป็นไฟล์ที่มีขนาดเล็ก
และแสดงผลสีได้เพียง 256 สี และกำหนดให้แสดงผลแบบโครงร่างได้ (Interlace)
GIF89A พัฒนาขึ้นในปี ค.ศ. 1989
เป็นไฟล์กราฟิกที่พัฒนาต่อจาก GIF87 โดยเพิ่มความสาu3617 .ารถการแสดงผลแบบพื้น
โปร่งใส (Transparent) และการสร้างภาพเคลื่อนไหว (GIF Animation) ซึ่งเป็นไฟล์
กราฟิกที่มีความสามารถพิเศษโดยนำเอาไฟล์ภาพหลายๆ ไฟล์มารวมกันและนำเสนอ
ภาพเหล่านั้นโดยอาศัยการหน่วงเวลา มีการใส่รูปแบบการนำเสนอลักษณะต่างๆ
(Effects) ในลักษณะภาพเคลื่อนไหว
การบีบอัดภาพ
เทคนิคการบีบอัดภาพสกุล GIF เป็นเทคนิคการบีบอัดคงสัญญาณ LZW
(Lempel-Ziv-Welch) Lossless compression โดยข้อมูลเดิมจะถูกสร้างขึ้นใหม่ด้วย
วิธีสร้าง Index สีจากสีที่ซ้ำๆ และใกล้เคียงกัน โดยจะ Scan แนวตั้งของภาพทั้งหมด
และ Scan แนวนอนของภาพทั้งหมด และเปรียบเทียบว่าแนวใดได้ข้อมูลที่จะบันทึก
เป็นไฟล์น้อยกว่ากัน
LZW เป็นชื่อย่อของนักวิจัยชาวอิสราเอล Abraham Lempel และ Jacob Zif ซึ่งได้เผย
แพร่ผลงานไว้ในเอกสารของ IEEE ภายใต้ชื่อเรียก LZ 77 และ LZ 78
การเลือกใช้ภาพฟอร์แมต GIF
ภาพที่เหมาะต่อการบันทึกในรูปแบบ GIF คือภาพที่มีสีไม่มากนัก ภาพขนาด
ใหญ่และมีสีทึบ เช่น ภาพจากคลิปอาร์ตของ Microsoft Office ภาพวาดลายเส้น ภาพ
ตราสัญลักษณ์ ข้อความกราฟิก เป็นต้น
ไฟล์สกุล JPG (Joint Photographer’s Experts Group)
เป็นอีกไฟล์หนึ่งที่นิยมใช้บน Internet มักใช้กรณี
1. ภาพที่ต้องการนำเสนอมีความละเอียดสูง และใช้สีจำนวนมาก (สนับสนุนถึง 24
bit color)
2. ต้องการบีบไฟล์ตามความต้องการของผู้ใช้
3. ไฟล์ชนิดนี้มักจะใช้กับภาพถ่ายที่นำมาสแกน และต้องการนำไปใช้บนอินเทอร์
เน็ต เพราะให้ความคมชัดและความละเอียดของภาพสูง
จุดเด่น
สนับสนุนสีได้ถึง 24 bit
สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ
Progressive
มีโปรแกรมสนับสนุนการสร้างจำนวนมาก
เรียกดูได้กับ Graphics Browser ทุกตัว
ตั้งค่าการบีบไฟล์ได้ (compress files)
จุดด้อย
ทำให้พื้นของรูปโปร่งใสไม่ได้
ข้อเสียของการบีบไฟล์ (Compress File)
กำหนดค่าการบีบไฟล์ไว้สูง (1 - 10) แม้ว่าจะช่วยให้ขนาดของไฟล์มีขนาดต่ำ
แต่ก็มีข้อเสีย คือ เมื่อมีการส่งภาพจาก Server ไปแสดงผลที่ Client จะทำให้การแสดง
ผลช้ามาก เพราะต้องเสียเวลาในการคลายไฟล์ ดังนั้นการเลือกค่าการบีบไฟล์ ควร
กำหนดให้เหมาะสมกับภาพแต่ละภาพ
ไฟล์สกุล PNG (Portable Network Graphics)
ไฟล์สกุลล่าสุดที่นำจุดเด่นของไฟล์ GIF และ JPEG มาพัฒนาร่วมกัน ทำให้
ภาพในสกุลนี้แสดงผลสีได้มากกว่า 256 สี และยังสามารถทำพื้นภาพให้โปร่งใสได้ จึง
เป็นไฟล์ภาพที่ได้รับความนิยมมากในปัจจุบันด้วยอีกสกุลหนึ่ง คุณสมบัติของภาพคือ
• สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า u3619 .ะบบคอมพิวเตอร์
ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้
• ขนาดไฟล์เล็ก ด้วยเทคนิคการบีบอัดคงสัญญาณ LZW
• สามารถทำภาพโปร่งใสจากสีพื้น 256 ระดับ
• แสดงภาพแบบสอดประสานเช่นเดียวกับ GIF โดยมีความคมชัดที่ดีกว่า
• มีคุณสมบัติ Gamma ทำให้ภาพสามารถปรับตัวเองได้ตามจอภาพ และปรับ
ระดับความสว่างที่แท้จริงตามที่ควรจะเป็น
จุดเด่น
• สนับสนุนสีได้ถึงตามค่า True color (16 bit, 32 bit หรือ 64 bit)
• สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
• มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด (Interlace)
• สามารถทำพื้นโปร่งใสได้
จุดด้อย
• หากกำหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่
ขนาดของไฟล์จะมีขนาดต่ำ
• ไม่สนับสนุนกับ Graphic Browser รุ่นเก่า สนับสนุนเฉพาะ IE 4 และ
Netscape 4
• ความละเอียดของภาพและจำนวนสีขึ้นอยู่กับ Video Card
• โปรแกรมสนับสนุนในการสร้างมีน้อย
Transparent Feature
หมายถึงคุณลักษณะของภาพ ที่มีการดรอป (Drop) การแสดงสีที่ต้องการ มัก
จะเป็นสีพื้น (จริงๆ เลือกสีได้มากกว่า 1 สี) เพื่อให้สีที่เลือกโปร่งใส และแสดงผลตามสี
พื้นของ Browser
ภาพ Gif Transparent บนพื้น Background ขาว
ภาพ Gif Transparent บนพื้น Background เขียว
Interlace Feature
หมายถึงคุณลักษณะของการแสดงผลแบบโครงร่าง และค่อยๆ แสดงแบบ
ละเอียด โดยใช้หลักการแทรกสอดของเส้นสี โดยปกติการแสดงผลภาพบนอินเทอร์เน็ต
จะแสดงผลไล่จากขอบบนของภาพจนถึงขอบล่าง ซึ่งมักจะแสดงผลช้ามาก เพราะต้อง
รอให้แต่ละส่วนแสดงผลครบทุกความละเอียด
แต่ด้วยเทคนิคการแทรกสอด ภาพจะแสดงแบบเต็มรูป แต่แสดงผลแบบหยาบๆ คล้ายๆ
กับการแสดงผลแบบเบลอ แล้วค่อยๆ ชัดเจนขึ้นตามเวลา ทำให้ผู้ใช้เห็นภาพโครงร่าง
ก่อน หากไม่พอใจจะดูก็สามารถข้ามการแสดงผลไปได้เลยทันที เทคนิคนี้จะอาศัยการ
แสดงผลของเส้นสีทีละเส้นให้แสดงผลแทรกสอดกันไปเรื่อยๆ จนครบทุกเส้น
การแสดงภาพแบบปกติ
การแสดงภาพแบบ Gif Interlace ระยะที่ 1
การแสดงภาพแบบ Gif Interlace ระยะที่ 2
การแสดงภาพแบบ Gif Interlace ระยะที่ 3
การแสดงภาพแบบ Gif Interlace ระยะที่ 4
การนำเสนอแบบโครงร่าง (Progressive)
การนำเสนอแบบโครงร่างของไฟล์ .JPG แตกต่างกับไฟล์ .GIF คือ อาศัยการ
แสดงผลแบบโครงร่างด้วยภาพความละเอียดต่ำ แทนการนำเสนอแบบเส้นสี ลักษณะ
ของภาพแบบนี้จึงจะแสดงผลโดยมีลักษณะของภาพโครงร่างทั้งภาพที่มีจุดของภาพ
เบลอๆ แล้วค่อยๆ กระจายจุดภาพให้เต็มทั้งภาพ
การนำภาพจากอินเทอร์เน็u3605 .มาใช้งาน
หลายๆ คนคงชอบเล่นเกม หรือเล่นอินเทอร์เน็ต โดยเฉพาะการเข้าไปยังเวบไซต์
ต่างๆ สิ่งหนึ่งที่คิดเหมือนกัน ก็คือ รูปภาพจากเกม หรืออินเทอร์เน็ตสวยมาก อยากนำ
มาเก็บไว้ในเครื่องตัวเอง เพื่อว่าต่อไปสามารถนำไปใช้งานต่างๆ ได้ เช่น นำไปประกอบ
เมื่อต้องทำรายงาน พิมพ์ ส.ค.ส. สวยๆ หรือใช้ในงานนำเสนอจาก PowerPoint และ
บางท่านอาจจะต้องรับผิดชอบผลิตสิ่งพิมพ์ให้กับหน่วยงาน โดยนำรูปภาพจากหน้าจอ
โปรแกรมต่างๆ มาใช้ประกอบในเอกสาร วิธีการพิมพ์งานโดยเว้นที่ว่าง แล้วนำรูปภาพ
หรือรูปถ่ายมาแปะ คงจะเคยทำมาแล้วใช่ไหม วิธีล้าสมัยแล้ว ในยุคคอมพิวเตอร์ระบบ
Windows ไม่ว่าจะใช้ Windows 3.1 หรือ Windows 95 มีวิธีที่สะดวก รวดเร็ว และสวย
งามกว่า ซึ่งรู้จักกันโดยวิธี การจับจอภาพ (Screen Capture)
ด้วยความสามารถจับจอภาพ (Screen Capture) ไม่ว่าอยากได้รูปอะไร ภาพไหน บน
จอภาพโปรแกรมแบบไหน เพียงแต่ขอให้แสดงผลบนจอภาพผ่านระบบ Windows ได้ ก็
สามารถนำภาพนั้นมาใช้งานได้สะดวก รวดเร็ว จะนำมาใช้ทันที หรือเก็บเป็นไฟล์รูป
ภาพก็ได้ ตามแต่คุณต้องการ สำหรับเทคนิควิธีในการจับจอภาพมีหลากหลายวิธี
หลายรูปแบบ แต่สามารถแบ่งเป็นประเภทใหญ่ๆ ได้ 2 ลักษณะ คือ
• การจับจอภาพโดยใช้ความสามารถ Clipboard ของโปรแกรม Windows
การจับจอภาพโดยใช้โปรแกรมจับจอภาพเฉพาะ
การจับจอภาพโดยใช้ความสามารถ Clipboard
การจับจอภาพโดยใช้ความสามารถของ Clipboard เป็นวิธีที่นิยมสะดวกที่สุด
เพราะ Windows เตรียมความสามารถนี้ให้โดยตรง ไม่ต้องอาศัยโปรแกรมพิเศษใดๆ
เพียงแต่คุณมีโปรแกรม PaintBrush ซึ่งแน่นอนว่าถ้าเล่น Windows ต้องมี PaintBrush
อยู่แล้วใช่ไหม
เรามาเริ่มที่การจับจอภาพจากหน้าจอโปรแกรมที่ทำงานบน Windows กันก่อนนะมีวิธี
การคร่าวๆ ดังนี้
• เปิดโปรแกรมที่ต้องการจับจอภาพ เช่น เกม, อินเทอร์เน็ต, Microsoft Word
เรียกหน้าจอที่ต้องการ
• กดปุ่ม <PrintScreen> การกดปุ่มนี้จะเป็นการคัดลอกจอภาพไปเก็บไว้ใน
Clipboard
• เรียกโปรแกรม Paint จากคำสั่ง Start, Program, Accessories, Paint
• ขยายหน้าต่างการทำงานให้เต็มจอ
นำภาพที่เก็บไว้ใน Clipboard มาวางบนหน้าต่างโปรแกรม Paint ด้วยคำสั่ง Edit,
Paste
• เมื่อนำภาพที่จับไว้วางในหน้าต่างโปรแกรม Paint แล้ว ขั้นตอนต่อไปก็ให้เลื่อนจอ
ภาพ เพื่อแสดงภาพที่ต้องการนำไปใช้งาน
• เมื่อปรากฏภาพที่ต้องการ ให้คลิกที่ปุ่มเครื่องมือเลือกภาพ (Select tools) ซึ่งเป็น
ปุ่มเครื่องมือสี่เหลี่ยมเส้นประปรากฏในชุดเครื่องมือของโปรแกรม Paint
• นำเมาส์ซึ่งเป็นกากบาท ไปชี้ ณ ตำแหน่งมุมบนซ้ายของพื้นที่ภาพที่ต้องการ จาก
นั้นกดปุ่มซ้ายของเมาส์ค้างไว้ ลากเมาส์ไปแนวเฉียงลงมายังมุมล่างขวาของภาพ
ปรากฏเป็นเส้นประคลุมภาพที่ต้องการ เมื่อได้ขนาดเส้นประที่ถูกต้องให้ปล่อยนิ้ว
จากปุ่มซ้ายของเมาส์
• หากต้องการนำภาพไปใช้ตอนนี้ ให้เลือกคำสั่ง Edit, Copy หรือหากต้องการจัดเก็บ
ภาพไว้เป็นไฟล์ เพื่อนำไปใช้งานต่อไป ให้เลือกคำสั่ง Edit, Copy to ซึ่งมีหลักการ
คล้ายคำสั่ง File, Save เพียงแต่เป็นการจัดเก็บภาพเฉพาะส่วนพื้นที่ที่ระบุเท่านั้นไม่
จัดเก็บทั้งจอ
• กรณีที่เลือกคำสั่ง Edit, Copy การนำไปใช้ เพียงแต่เลือกคำสั่ง Edit, Paste ณ จอ
ภาพโปรแกรมปลายทางที่ต้องการ เช่น หน้าจอ Mail ของ Lotus Notes, หน้าจอ
เอกสารของ Word เป็นต้น
• กรณีที่เลือกคำสั่ง Edit, Copy to โปรแกรมจะจัดเก็บภาพในนามสกุล .bmp ซึ่งเป็น
นามสกุลภาพกราฟิกมาตรฐาน ที่สามารถนำไปใช้งานในโปรแกรมได้หลาก
โปรแกรม เช่น นำไปใช้ใน MS-Office ด้วยคำสั่ง Insert, Picture เป็นต้น
สำหรับภาพจากโปรแกรมอื่นๆ ก็ใช้หลักการเดียวกัน ลองจับภาพที่ชอบดูสิ แล้วจะรู้ว่า
สามารถ สร้างสรรงานพิมพ์ได้อีกหลากหลายวิธี หลากรูปแบบ
การเซฟภาพ (Save) จากหน้าเว็บเพจ
รูปภาพที่ปรากฏในหน้าจอเว็บไม่ว่าจะผ่าน Netscape หรือ IE มี 2 ลักษณะคือ
• รูปภาพที่เป็นภาพชิ้นๆ ที่เรียกว่า Clipart
• รูปภาพที่นำมาใช้แสดงผลเป็นพื้นของเว็บ ที่เรียกว่า Background
ดังนั้นหากต้องการจัดเก็บภาพจาก Internet เพื่อนำมาใช้งาน จะต้องพิจารณาว่า
ต้องการเก็บภาพลักษณะอย่างไร โดยมีวิธีการจัดเก็บที่แตกต่างกัน ดังนี้
รูปภาพที่เป็นภาพชิ้นๆ ที่เรียกว่า Clipart
• เข้าสู่เว็บที่ต้องการ
• นำเมาส์ไปชี้ ณ รูปภาพที่ต้องการ
• คลิกปุ่มขวาของเมาส์ แล้วเลือกคำสั่ง Save image as
• กำหนดไดร์ฟและโฟลเดอร์ที่ต้องการจัดเก็บภาพ จากกรอบโต้ตอบ Save as:
รูปภาพที่นำมาใช้แสดงผลเป็นพื้นของเวบ ที่เรียกว่า Background
• เข้าสู่เว็บที่ต้องการ
• นำเมาส์ไปชี้ ณ พื้นที่ว่างๆ ของพื้นเว็บ นอกพื้นที่แสดงรูปภาพ
• คลิกปุ่มขวาของเมาส์ จะสังเกตได้ว่าเมนูคำสั่งเปลี่ยนไป มีคำสั่งน้อยกว่า และมี
จุดสังเกตที่คำสั่ง Save background as :
• เลือกคำสั่ง Save background as :
กำหนดไดร์ฟและโฟลเดอร์ที่ต้องการจัดเก็บภาพ จากกรอบโต้ตอบ Save as
สร้างไฟล์ภาพสำหรับเว็บด้วย Paint
โปรแกรม Paint เป็นโปรแกรมมาตรฐานของ Windows ทุกรุ่น โดยเฉพาะ
Windows 98 เป็นต้นไป ได้เพิ่มความสามาu3619 .ถในการจัดเก็บไฟล์ (Save) ในฟอร์แมต
.GIF และ .JPG ดังนั้นจึงเป็นทางเลือกที่สะดวกในการสร้างไฟล์กราฟิกสำหรับเว็บแบบ
ง่ายๆ และรวดเร็ว โดยมีตัวอย่างการสร้างงานดังนี้
• เปิดโปรแกรมที่ต้องการนำภาพมาใช้งาน เช่น Microsoft Word, Excel หรือ
PowerPoint
• ปรับแต่งรูปภาพตามต้องการ เช่น ย่อขนาด
• คลิกเลือกภาพ แล้วเลือกเมนูคำสั่ง Edit, Copy (แก้ไข, คัดลอก) เพื่อบันทึกรูปภาพ
ไว้ในหน่วยความจำ
• เรียกใช้โปรแกรม Paint โดยคลิกปุ่ม Start จากแถบสั่งงาน แล้วเลือกรายการ
Program, Accessories, Paint
• เมื่อปรากฏหน้าจอโปรแกรม Paint ให้ใช้เมนูคำสั่ง Image, Attribute เพื่อตั้งค่าพื้น
ที่ทำงานให้มีขนาดเล็ก เช่นขนาด 100 x 100 Pixels
• จากนั้นเลือกเมนูคำสั่ง Edit, Paste เพื่อวางภาพลงในโปรแกรม ถ้าโปรแกรม
ปรากฏหน้าต่างสอบถามการวาง ให้คลิกปุ่ม Yes
• จากนั้นเลือกเมนูคำสั่ง File, Save (หรือ File, Save As..) ตั้งชื่อไฟล์, ไดร์ฟ และ
เลือกรูปแบบของภาพเป็น .GIF หรือ .JPG ตามที่ต้องการ
โปรแกรม SnagIt
Microsoft Office ได้เตรียมภาพ Clipart จำนวนมากเพื่อใช้งาน ซึ่งสามารถนำ
มาใช้ประยุกต์สร้างเป็นภาพสำหรับงานเว็บได้ โดยการแปลงไฟล์ภาพ ซึ่งจะต้องอาศัย
โปรแกรมพิเศษ โดยขอแนะนำโปรแกรม SnagIt โปรแกรมยอดนิยมสำหรับการจับจอ
ภาพ แล้วบันทึกเป็นภาพนิ่งและภาพเคลื่อนไหว ได้หลากหลายฟอร์แมต เช่น .gif, .jpg,
.bmp, .tif, .avi เป็นต้น เมื่อติดตั้งโปรแกรม จะได้ไอคอนทำงานบน Desktop ดังนี้
การใช้งาน
• ดับเบิ้ลคลิกเรียกโปรแกรม
ปรับแต่งค่าการใช้งานโปรแกรม เช่น ปุ่มที่ใช้ในการ Capture จากเมนูคำสั่ง Options,
Program Preference… แล้วเลือกรายการจาก Capture Hotkeys
• เลือกลักษณะการจับจอภาพ จากเมนู Input เช่นเลือกรายการ Region เพื่อจับจอ
ภาพเฉพาะบางพื้นที่ที่ต้องการ
• เลือกลักษณะของผลลัพธ์ จากเมนู Output เช่นเลือกรายการ Clipboard เพื่อบันทึก
ภาพที่จับไว้ในหน่วยความจำพิเศษของ Microsoft Windows ที่เรียกว่า Clipboard
เพื่อรอการนำไปใช้งาน หรือเลือกรายการ File เพื่อบันทึกภาพที่จับไว้ในไฟล์ภาพ
และกำหนดคุณสมบัติของไฟล์ภาพได้จากเมนูคำสั่ง Output, Properties…
• ตัวอย่างต้องการแปลงภาพไว้ในฟอร์แมต .gif เมื่อคลิกเลือกรายการ Output,
Properties… ให้กำหนดรายการย่อย ดังนี้
• File Format : GIF
• คลิกปุ่ม Options…
• เลือกรายการดังนี้
• เรียกโปรแกรมที่ต้องการจับภาพ หรือเรียกโปรแกรม Microsoft Word แล้วเรียก
ภาพที่ต้องการแปลง
• กดปุ่ม <PrintScreen> หรือปุ่มที่กำหนดจากรายการ Capture Hotkey
• โปรแกรมจะทำการบันทึกภาพตามค่าที่กำหนด เพื่อรอ
การนำไปใช้งาน
ภาพถูกใจกับเครื่องสแกนเนอร์
"วันปีใหu3617 .่ไปเที่ยวภาคเหนือ ถ่ายภาพสวยๆ มาเยอะมาก วันเกิดปีนี้ รวมกลุ่ม
กับเพื่อนชมบรรยากาศริมน้ำ ได้ภาพน่าประทับใจ วันลอยกระทง กระทงลอยเป็นสาย
สวยสด เก็บบันทึกไว้ในภาพถ่ายเรียบร้อยแล้ว" ภาพสวยๆ ต่างๆ เหล่านี้อยากเผยแพร่
ผ่านเครือข่ายอินเทอร์เน็ต ไม่ใช่เรื่องยาก ด้วยความสามารถของอุปกรณ์ที่ชื่อ
"สแกนเนอร์ (Scanner)" ทำให้การเปลี่ยนภาพถ่ายเป็นภาพดิจิตอล เป็นเรื่องง่าย
เหมือนปอกกล้วยเข้าปาก
สแกนเนอร์ เป็นอุปกรณ์ต่อเชื่อมคอมพิวเตอร์แบบกราฟิก ที่มีหน้าที่ในการเปลี่ยนแปลง
ภาพต้นฉบับ (รูปถ่าย ตัวอักษรบนหน้ากระดาษ ภาพวาด) ให้เป็นข้อมูลดิจิตอล เพื่อให้
คอมพิวเตอร์สามารถนำข้อมูลดังกล่าว มาใช้ประโยชน์ในการแสดงผลที่หน้าจอ ทำให้
สามารถแก้ไข ตกแต่งเพิ่มเติม และจัดเก็บข้อมูลได้ ในปัจจุบันสแกนเนอร์แบ่งได้ 2 รูป
แบบคือ
• แบบใส่กระดาษแล้วกระดาษจะเลื่อนผ่านหัวสแกนเอง เรียกว่า Sheet - Fed
Scanner
• แบบวางกระดาษแล้วให้หัวสแกนเลื่อนอ่านข้อมูลจากกระดาษ โดยกลไกการ
ทำงานคล้ายๆ กับเครื่องถ่ายเอกสาร เรียกว่า Flatbed Scanner
หลักการสแกนภาพ
แม้ว่าสแกนเนอร์จะมีหลากหลายรุ่น หลากหลายยี่ห้อ แต่การใช้งานไม่แตกต่างกันมาก
นัก ความรู้ในการใช้สแกนเนอร์รุ่นหนึ่ง ก็สามารถนำไปประยุกต์ใช้กับรุ่นอื่น ยี่ห้ออื่นได้
เช่นกัน โดยมีหลักการสแกนพื้นฐานดังนี้
เลือกโหมดภาพที่เหมาะสม – โดยปกติสแกนเนอร์จะตรวจสอบประเภทของ
• ข้อมูลที่จะทำการสแกนโดยอัตโนมัติ ดังนั้นหากนำเอกสารเนื้อหาหนังสือไป
สแกน โปรแกรมจะกำหนดโหมดเป็นขาวดำ หรือลายเส้น แต่ถ้านำภาพถ่ายไป
สแกน ก็จะใช้โหมดสี อย่างไรก็ตามผู้ใช้ก็สามารถกำหนดหรือเปลี่ยนแปลง
โหมดให้เหมาะสมกับการใช้งานได้เช่นกัน
• กำหนดความละเอียดให้เหมาะสมกับลักษณะการนำไปใช้งาน - ความ
ละเอียดของภาพ หรือ Resolution ไม่ควรกำหนดไว้สูงเกินไป โดยเฉพาะถ้า
ต้องการนำมาใช้งานกับเว็บเพจ เพราะทำให้เสียเวลาสแกนนานเกินไป รวมทั้ง
เสียพื้นที่ในการจัดเก็บภาพ
• กำหนดขนาดของภาพให้เหมาะสม - ขนาดของภาพ (Size) สำหรับการทำ
เว็บ ควรกำหนดให้เท่ากับภาพต้นฉบับ เพื่อไม่ให้เกิดปัญหาภาพเบลอในขั้น
ตอนการตกแต่งด้วยโปรแกรมแต่งภาพ
วิธีการสแกนภาพ สำหรับการสแกนภาพ มีวิธีปฏิบัติดังนี้
1. เตรียมภาพต้นฉบับ ได้ทั้งข้อความ, ภาพขาวดำ และภาพสี (สแกนเนอร์บางรุ่น
สามารถสแกนวัตถุ 3 มิติได้ เช่น กระป๋อง, นาฬิกา ฯลฯ
2. เรียกโปรแกรมสแกนภาพ ตัวอย่างการเรียกโปรแกรมสแกนของสแกนเนอร์รุ่น HP
DeskScan II
3. นำภาพหรือวัตถุที่ต้องการสแกน วางบนกระจกของสแกนเนอร์ ปิดฝาของเครื่อง
สแกนเนอร์เพื่อป้องกันแสงภายนอก
4. ตั้งค่าการสแกนภาพ เช่น โหมดภาพ, ขนาดภาพ และความละเอียด
- ภาพที่ต้องการนำไปใช้ในงานพิมพ์ ควรกำหนดความละเอียด 150 - 300 จุดต่อนิ้ว
- ภาพที่ต้องการใช้ในการสร้างเอกสารเว็บ ควรกำหนดความละเอียด 72 จุดต่อนิ้ว
5. คลิกปุ่มเริ่มสแกน (แสดงด้วยคำว่า Preview หรือ Start Scan เป็นต้น) ช่วงนี้จะใช้
เวลาพอสมควรสำหรับสแกนเนอร์บางรุ่น ทั้งนี้ระหว่างที่สแกนเนอร์ทำงาน ไม่ควร
ขยับภาพหรือวัตถุ
6. เมื่อเครื่องทำการสแกนภาพต้นฉบับ ภาพจะปรากฏบนหน้าต่างโปรแกรม ผู้ใช้
สามารถกำหนดหรือเลือกขอบเขตที่ต้องการได้ หลังจากนั้นคลิกปุ่ม Final หรือ
Save (ตามแต่ระบบ)
7. โปรแกรมจะทำการแปลงสัญญาณแล้วส่งภาพไปปรากฏบนหน้าต่างทำงานของ
โปรแกรมกราฟิก หรือบันทึกเป็นไฟล์ภาพ (ตามแต่ระบบ)
8. สำหรับการสแกนแบบบันทึกผลลัพธ์เป็นไฟล์ มีหลักพิจารณาดังนี้ หากต้องการนำ
ภาพนั้นไปใช้เป็นภาพต้นฉบับสำหรับงานสิ่งพิมพ์ และมีพื้นที่ของฮาร์ดดิสก์เหลือ
จำนวนมาก แนะนำให้บันทึกไฟล์ภาพด้วยฟอร์แมต TIF เนื่องจากจะได้ไฟล์ภาพที่มี
ความสมบูรณ์ครบถ้วน แต่ถ้าต้องการภาพเพื่อประกอบเอกสารเว็บโดยเฉพาะ
สามารถเลือกฟอร์แมตเป็น JPEG ได้เลย ซึ่งจะช่วยประหยัดพื้นที่ของฮาร์ดดิสก์ได้