Trace:
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 | ||
