Differences

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


graphics:gif 2008/10/12 20:56 graphics:gif 2008/12/07 17:36 current
Line 12: Line 12:
  * เรียกดูได้กับ Graphics Browser ทุกตัว   * เรียกดูได้กับ Graphics Browser ทุกตัว
  * ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation)   * ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (GIF Animation)
 +
 +{{  :graphics:gif-animation.png  |GIF Animation}}
อย่างไรก็ตามไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้การนำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัยฟอร์แมตอื่น อย่างไรก็ตามไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซึ่งแสดงได้เพียง 256 สี ทำให้การนำเสนอภาพถ่าย หรือภาพที่ต้องการความคมชัดหรือภาพสดใส จะต้องอาศัยฟอร์แมตอื่น
Line 44: Line 46:
เป็นคุณสมบัติที่เกี่ยวกับการแสดงผล เนื่องจากเป็นการแสดงผลแบบโครงร่าง และค่อยๆ แสดงแบบละเอียด โดยใช้หลักการแทรกสอดของเส้นสี โดยปกติการแสดงผลภาพบนอินเทอร์เน็ต จะแสดงผลไล่จากขอบบนของภาพจนถึงขอบล่าง ซึ่งมักจะแสดงผลช้ามาก เพราะต้องรอให้แต่ละส่วนแสดงผลครบทุกความละเอียด แต่ด้วยเทคนิคการแทรกสอด ภาพจะแสดงแบบเต็มรูป แต่แสดงผลแบบหยาบๆ คล้ายๆ กับการแสดงผลแบบเบลอ แล้วค่อยๆ ชัดเจนขึ้นตามเวลา ทำให้ผู้ใช้เห็นภาพโครงร่างก่อน หากไม่พอใจจะดูก็สามารถข้ามการแสดงผลไปได้เลยทันที เทคนิคนี้จะอาศัยการแสดงผลของเส้นสีทีละเส้นให้แสดงผลแทรกสอดกันไปเรื่อยๆ จนครบทุกเส้น เป็นคุณสมบัติที่เกี่ยวกับการแสดงผล เนื่องจากเป็นการแสดงผลแบบโครงร่าง และค่อยๆ แสดงแบบละเอียด โดยใช้หลักการแทรกสอดของเส้นสี โดยปกติการแสดงผลภาพบนอินเทอร์เน็ต จะแสดงผลไล่จากขอบบนของภาพจนถึงขอบล่าง ซึ่งมักจะแสดงผลช้ามาก เพราะต้องรอให้แต่ละส่วนแสดงผลครบทุกความละเอียด แต่ด้วยเทคนิคการแทรกสอด ภาพจะแสดงแบบเต็มรูป แต่แสดงผลแบบหยาบๆ คล้ายๆ กับการแสดงผลแบบเบลอ แล้วค่อยๆ ชัดเจนขึ้นตามเวลา ทำให้ผู้ใช้เห็นภาพโครงร่างก่อน หากไม่พอใจจะดูก็สามารถข้ามการแสดงผลไปได้เลยทันที เทคนิคนี้จะอาศัยการแสดงผลของเส้นสีทีละเส้นให้แสดงผลแทรกสอดกันไปเรื่อยๆ จนครบทุกเส้น
-{{:graphics:normal-show.png|}} +{{:graphics:normal-show.png?250|}} 
-การแสดงผลภาพปกติ การแสดงผลภาพแบบ Interlace +การแสดงผลภาพปกติ 
-การเลือกใช้ภาพฟอร์แมต 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 ประเทศไทย.