Differences

This shows you the differences between the selected revision and the current version of the page.


graphics:gif 2008/10/12 20:52 graphics:gif 2008/12/07 17:36 current
Line 1: Line 1:
-ไฟล์สกุล GIF (Graphics Interlace File) +> [[graphics:start|สร้างสรรค์งานกราฟิก]] 
 + 
 +====== ไฟล์สกุล GIF (Graphics Interlace File) ====== 
ภาพกราฟิกสกุล GIF พัฒนาโดยบริษัท CompuServe จัดเป็นไฟล์ภาพสำหรับการเผยแพร่ผ่านอินเทอร์เน็ตตั้งแต่ยุคแรก เนื่องจากมีลักษณะเด่น คือ ภาพกราฟิกสกุล GIF พัฒนาโดยบริษัท CompuServe จัดเป็นไฟล์ภาพสำหรับการเผยแพร่ผ่านอินเทอร์เน็ตตั้งแต่ยุคแรก เนื่องจากมีลักษณะเด่น คือ
-สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้ + 
-มีขนาดไฟล์ต่ำ จากเทคโนโลยีการบีบอัดภาพ ทำให้สามารถส่งไฟล์ภาพได้รวดเร็ว  +  * สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์ทุกระบบ ไม่ว่าจะใช้ Windows, Unix ก็สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้ 
-สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ (Transparent)  + * มีขนาดไฟล์ต่ำ จากเทคโนโลยีการบีบอัดภาพ ทำให้สามารถส่งไฟล์ภาพได้รวดเร็ว  
-มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace  + * สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ (Transparent)  
-มีโปรแกรมสนับสนุนการสร้างจำนวนมาก  + * มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace  
-เรียกดูได้กับ Graphics Browser ทุกตัว  + * มีโปรแกรมสนับสนุนการสร้างจำนวนมาก  
-ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation)+ * เรียกดูได้กับ Graphics Browser ทุกตัว  
 + * ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation) 
 + 
 +{{  :graphics:gif-animation.png  |GIF Animation}}
-อย่างไรก็ตามไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้ +อย่างไรก็ตามไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้การนำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัยฟอร์แมตอื่น  
-การนำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัยฟอร์แมตอื่น  + 
-ประเภทของไฟล์ GIF +==== ประเภทของไฟล์ GIF ==== 
-ไฟล์ .GIF มีการพัฒนา 2 รูปแบบ ได้แก่  + 
-GIF87 +ไฟล์ .GIF มีการพัฒนา 2 รูปแบบ ได้แก่ 
 + 
 +=== GIF87 === 
พัฒนาขึ้นในปี ค.ศ. 1987 เป็นไฟล์กราฟิกรุ่นแรกที่สนับสนุนการนำเสนอบนอินเทอร์เน็ต เป็นไฟล์ที่มีขนาดเล็กและแสดงผลสีได้เพียง 256 สี และกำหนดให้แสดงผลแบบโครงร่างได้ (Interlace) พัฒนาขึ้นในปี ค.ศ. 1987 เป็นไฟล์กราฟิกรุ่นแรกที่สนับสนุนการนำเสนอบนอินเทอร์เน็ต เป็นไฟล์ที่มีขนาดเล็กและแสดงผลสีได้เพียง 256 สี และกำหนดให้แสดงผลแบบโครงร่างได้ (Interlace)
-GIF89A + 
 +=== GIF89A === 
พัฒนาขึ้นในปี ค.ศ. 1989 เป็นไฟล์กราฟิกที่พัฒนาต่อจาก GIF87 โดยเพิ่มความสามารถการแสดงผลแบบพื้นโปร่งใส (Transparent) และการสร้างภาพเคลื่อนไหว (GIF Animation) ซึ่งเป็นไฟล์กราฟิกที่มีความสามารถพิเศษโดยนำเอาไฟล์ภาพหลายๆ ไฟล์มารวมกันและนำเสนอภาพเหล่านั้นโดยอาศัยการหน่วงเวลา มีการใส่รูปแบบการนำเสนอลักษณะต่างๆ (Effects) พัฒนาขึ้นในปี ค.ศ. 1989 เป็นไฟล์กราฟิกที่พัฒนาต่อจาก GIF87 โดยเพิ่มความสามารถการแสดงผลแบบพื้นโปร่งใส (Transparent) และการสร้างภาพเคลื่อนไหว (GIF Animation) ซึ่งเป็นไฟล์กราฟิกที่มีความสามารถพิเศษโดยนำเอาไฟล์ภาพหลายๆ ไฟล์มารวมกันและนำเสนอภาพเหล่านั้นโดยอาศัยการหน่วงเวลา มีการใส่รูปแบบการนำเสนอลักษณะต่างๆ (Effects)
-การบีบอัดภาพ+ 
 +==== การบีบอัดภาพ ==== 
เทคนิคการบีบอัดภาพสกุล GIF เป็นเทคนิคการบีบอัดคงสัญญาณ LZW (Lempel-Ziv-Welch) Lossless compression โดยข้อมูลเดิมจะถูกสร้างขึ้นใหม่ด้วยวิธีสร้าง Index สีจากสีที่ซ้ำๆ และใกล้เคียงกัน โดยจะ Scan แนวตั้งของภาพทั้งหมด และ Scan แนวนอนของภาพทั้งหมด และเปรียบเทียบว่าแนวใดได้ข้อมูลที่จะบันทึกเป็นไฟล์น้อยกว่ากัน เทคนิคการบีบอัดภาพสกุล GIF เป็นเทคนิคการบีบอัดคงสัญญาณ LZW (Lempel-Ziv-Welch) Lossless compression โดยข้อมูลเดิมจะถูกสร้างขึ้นใหม่ด้วยวิธีสร้าง Index สีจากสีที่ซ้ำๆ และใกล้เคียงกัน โดยจะ Scan แนวตั้งของภาพทั้งหมด และ Scan แนวนอนของภาพทั้งหมด และเปรียบเทียบว่าแนวใดได้ข้อมูลที่จะบันทึกเป็นไฟล์น้อยกว่ากัน
 +
LZW เป็นชื่อย่อของนักวิจัยชาวอิสราเอล Abraham Lempel และ Jacob Zif ซึ่งได้เผยแพร่ผลงานไว้ในเอกสารของ IEEE ภายใต้ชื่อเรียก LZ77 และ LZ78 LZW เป็นชื่อย่อของนักวิจัยชาวอิสราเอล Abraham Lempel และ Jacob Zif ซึ่งได้เผยแพร่ผลงานไว้ในเอกสารของ IEEE ภายใต้ชื่อเรียก LZ77 และ LZ78
-Transparent+ 
 +==== Transparent ==== 
คุณสมบัติของไฟล์ GIF ในด้าน Transparent หรือความโปร่งแสงของภาพนับเป็นคุณสมบัติที่เด่นมาก ซึ่งเป็นคุณลักษณะของภาพที่มีการดรอป (Drop) การแสดงสีที่ต้องการ มักจะเป็นสีพื้น เพื่อให้สีที่เลือกโปร่งใส และแสดงผลตามสีพื้นของเบราว์เซอร์ คุณสมบัติของไฟล์ GIF ในด้าน Transparent หรือความโปร่งแสงของภาพนับเป็นคุณสมบัติที่เด่นมาก ซึ่งเป็นคุณลักษณะของภาพที่มีการดรอป (Drop) การแสดงสีที่ต้องการ มักจะเป็นสีพื้น เพื่อให้สีที่เลือกโปร่งใส และแสดงผลตามสีพื้นของเบราว์เซอร์
- + 
 +{{:graphics:transparent-gif.gif|}}
รูปการแสดงภาพ GIF บนพื้นที่มีสีแตกต่างกันไป รูปการแสดงภาพ GIF บนพื้นที่มีสีแตกต่างกันไป
-Interlaced +==== Interlaced ==== 
-เป็นคุณสมบัติที่เกี่ยวกับการแสดงผล เนื่องจากเป็นการแสดงผลแบบโครงร่าง และค่อยๆ แสดงแบบละเอียด โดยใช้หลักการแทรกสอดของเส้นสี โดยปกติการแสดงผลภาพบนอินเทอร์เน็ต จะแสดงผลไล่จากขอบบนของภาพจนถึงขอบล่าง ซึ่งมักจะแสดงผลช้ามาก เพราะต้องรอให้แต่ละส่วนแสดงผลครบทุกความละเอียด แต่ด้วยเทคนิคการแทรกสอด ภาพจะแสดงแบบเต็มรูป แต่แสดงผลแบบหยาบๆ คล้ายๆ กับการแสดงผลแบบเบลอ แล้วค่อยๆ ชัดเจนขึ้นตามเวลา ทำให้ผู้ใช้เห็นภาพโครงร่างก่อน หากไม่พอใจจะดูก็สามารถข้ามการแสดงผลไปได้เลยทันที เทคนิคนี้จะอาศัยการแสดงผลของเส้นสีทีละเส้นให้แสดงผล + 
-แทรกสอดกันไปเรื่อยๆ จนครบทุกเส้น +เป็นคุณสมบัติที่เกี่ยวกับการแสดงผล เนื่องจากเป็นการแสดงผลแบบโครงร่าง และค่อยๆ แสดงแบบละเอียด โดยใช้หลักการแทรกสอดของเส้นสี โดยปกติการแสดงผลภาพบนอินเทอร์เน็ต จะแสดงผลไล่จากขอบบนของภาพจนถึงขอบล่าง ซึ่งมักจะแสดงผลช้ามาก เพราะต้องรอให้แต่ละส่วนแสดงผลครบทุกความละเอียด แต่ด้วยเทคนิคการแทรกสอด ภาพจะแสดงแบบเต็มรูป แต่แสดงผลแบบหยาบๆ คล้ายๆ กับการแสดงผลแบบเบลอ แล้วค่อยๆ ชัดเจนขึ้นตามเวลา ทำให้ผู้ใช้เห็นภาพโครงร่างก่อน หากไม่พอใจจะดูก็สามารถข้ามการแสดงผลไปได้เลยทันที เทคนิคนี้จะอาศัยการแสดงผลของเส้นสีทีละเส้นให้แสดงผลแทรกสอดกันไปเรื่อยๆ จนครบทุกเส้น 
-  + 
-การแสดงผลภาพปกติ การแสดงผลภาพแบบ Interlace +{{:graphics:normal-show.png?250|}} 
-การเลือกใช้ภาพฟอร์แมต GIF+การแสดงผลภาพปกติ 
 + 
 +{{:graphics:interlaced.png?250|}} 
 +การแสดงผลภาพแบบ Interlace 
 + 
 +{{:graphics:9-3.gif|ตัวอย่างภาพที่แสดงผลแบบ GIF Interlace}} 
 + 
 +==== การเลือกใช้ภาพฟอร์แมต GIF ==== 
ภาพที่เหมาะต่อการบันทึกในรูปแบบ GIF คือภาพที่มีสีไม่มากนัก ภาพขนาดใหญ่และมีสีทึบ เช่น ภาพจากคลิปอาร์ตของ Microsoft Office ภาพวาดลายเส้น ภาพตราสัญลักษณ์ ข้อความกราฟิก เป็นต้น ภาพที่เหมาะต่อการบันทึกในรูปแบบ GIF คือภาพที่มีสีไม่มากนัก ภาพขนาดใหญ่และมีสีทึบ เช่น ภาพจากคลิปอาร์ตของ Microsoft Office ภาพวาดลายเส้น ภาพตราสัญลักษณ์ ข้อความกราฟิก เป็นต้น
 +
 +{{:graphics:image004.gif|}}  {{:graphics:image006.gif|}}  {{:graphics:image007.png?150|}}
 +
 +===== การจัดเก็บภาพ (Save) ภาพในฟอร์แมต GIF87 ด้วย PhotoShop =====
 +
 +  * เลือกคำสั่ง File, Save สำหรับการจัดเก็บงานครั้งแรก หรือ File, Save as สำหรับการจัดเก็บงานครั้งที่สองและต้องการเปลี่ยนชื่อไฟล์ภาพ
 +  * ปรากฏจอภาพโต้ตอบการทำงาน
 +  * เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ จากรายการ Save in:
 +  * ตั้งชื่อไฟล์ภาพโดยพิมพ์ในบรรทัด File name:
 +  * เลือกประเภทของไฟล์เป็น CpmpuServe GIF (*.GIF) จากรายการ Format:
 +  * คลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ
 +  * กรณีที่ภาพนั้นๆ มีหลายเลเยอร์จะปรากฏกรอบโต้ตอบการรวมเลเยอร์
 +
 +{{  :graphics:image167.png  |}}
 +
 +  * คลิกปุ่ม Ok เพื่อรวมเลเยอร์
 +  * ปรากฏกรอบโต้ตอบการกำหนดค่าเกี่ยวกับ Indexed Color
 +
 +{{  :graphics:image169.png  |}}
 +
 +  * ตรวจสอบค่าสี หรือปรับเปลี่ยนตามที่ต้องการ แล้วคลิกปุ่ม OK
 +  * ปรากฏกรอบโต้ตอบการตั้งคุณสมบัติของภาพ
 +
 +{{  :graphics:image171.png  |}}
 +
 +  * ถ้าภาพขนาดเล็ก ให้เลือกเป็น Normal แต่ถ้าภาพมีขนาดโต ให้เลือกเป็น Interlaced แล้วคลิกปุ่ม OK
 +
 +===== การจัดเก็บภาพ (Save) ภาพในฟอร์แมต GIF89 - Transparent =====
 +
 +ไฟล์ภาพฟอร์แมต GIF89 Transparent ก็เป็นอีกหนึ่งฟอร์แมตที่นิยมใช้ในการสร้างเอกสารเว็บ ปกติจะใช้กับภาพที่มีสีหรือความคมชัดไม่มากนัก และต้องการให้พื้นหลังของภาพ (Background) มีลักษณะโปร่งใส โปรแกรม PhotoShop มีวิธีการจัดเก็บภาพให้เป็นฟอร์แมต GIF89 Transparent ดังนี้
 +
 +  * ภาพลักษณะเป็นเลเยอร์ ควรรวมเลเยอร์ก่อนด้วยคำสั่ง Layer, Flatten Image
 +  * ใช้เครื่องมือ Magic Wand {{:graphics:image173.png|}}  คลิกที่พื้นภาพที่ต้องการทำให้โปร่งใส จะปรากฏเส้น Selection โดยอัตโนมัติ (กรณีที่ต้องการยกเลิกเส้น Selection เพื่อเลือกใหม่ให้เลือกคำสั่ง Select, Deselect)
 +  * เลือกเมนูคำสั่ง Help, Export Transparent Image…
 +  * ปรากฏกรอบโต้ตอบเลือกรูปแบบของภาพต้นฉบับ ดังนี้
 +
 +{{  :graphics:image175.png  |}}
 +
 +      * เลือกรายการ My image is on a transparent background ถ้าภาพที่สร้าง มีพื้นเป็นแบบ Transparent อยู่แล้ว
 +      * เลือกรายการ I have selected the area to be made transparent เมื่อใช้คำสั่ง Selection เลือกสีที่ต้องการกำหนดให้มีโหมดเป็น Transparent แล้ว
 +      * เลือกรายการ I need to select the area to be made transparent เมื่อขอกลับไปกำหนด Selection เพื่อเลือกสีที่ต้องการกำหนดให้มีโหมดเป็น Transparent ก่อน
 +
 +  * หากเลือกรายการ 1 หรือ 2 แล้ว ก็ให้คลิกปุ่ม Next ปรากฏกรอบโต้ตอบ ดังนี้
 +
 +{{  :graphics:image177.png  |}}
 +
 +  * คลิกเลือกรายการ Online เพื่อกำหนด Transparent สำหรับภาพนำเสนอผ่านเว็บ แล้วคลิกปุ่ม Next ปรากฏกรอบโต้ตอบ เลือกฟอร์แมตของภาพ เลือกเป็น .GIF
 +
 +{{  :graphics:image179.png  |}}
 +
 +  * โปรแกรมจะตรวจสภาพของรูปภาพ ให้คลิกปุ่ม Next จากนั้นจะปรากฎกรอบโต้ตอบถามค่าสีที่ต้องการใช้งานกับภาพนั้นๆ โดยสามารถเลือกระดับค่าสีได้ตามต้องการ เพื่อให้เหมาะสมกับภาพนั้นๆ แล้วคลิกปุ่ม OK
 +
 +{{  :graphics:image181.jpg  |}}
 +
 +  * ปรากฏจอภาพโต้ตอบ Save As เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ จากรายการ Save in: ตั้งชื่อไฟล์ภาพโดยพิมพ์ในบรรทัด File name: เลือกประเภทของไฟล์เป็น CpmpuServe GIF (*.GIF) จากรายการ Format: คลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ
 +  * ปรากฏกรอบโต้ตอบการตั้งคุณสมบัติของภาพ
 +
 +{{  :graphics:image182.jpg  |}}
 +
 +  * ถ้าภาพขนาดเล็ก ให้เลือกเป็น Normal แต่ถ้าภาพมีขนาดโต ให้เลือกเป็น Interlaced หรือตามต้องการ แล้วคลิกปุ่ม OK
 +  * กดปุ่ม Finish รอสักครู่โปรแกรมจะจัดเก็บภาพในฟอร์แมต GIF89

Personal Tools
Creative Commons License
STKS Online Learning โดย http://stks.or.th/wiki อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.