ฉันจะลบพิกเซลสีขาวรอบ ๆ ขอบเมื่อส่งออก GIF แบบโปร่งใสได้อย่างไร

ฉันนำตัวตักจากxooplate.comจากนั้นส่งออกด้วยความช่วยเหลือของการกระทำที่รวมไปยัง GIF แต่ฉันมีพิกเซลสีขาวรอบตัวโหลดซึ่งน่ารำคาญจริง ๆ เมื่อแสดงบนพื้นหลังสีเข้ม คุณสามารถดูได้ที่นี่ในกรอบที่สกัดจาก gif:

ฉันจะป้องกันพิกเซลสีขาวเหล่านั้นและรักษาพื้นหลังโปร่งใสได้อย่างไร

ผลงานทางความโปร่งใสกับGIFs 8-bit / PNGsคือพิกเซลเป็นอย่างใดอย่างหนึ่งอย่างโปร่งใสหรือทึบแสงได้อย่างเต็มที่

ที่มุมของวงกลมที่วงกลมกลมกลืนกับพื้นหลังโดยปกติจะมีพิกเซลที่กึ่งโปร่งใสเพื่อให้การเปลี่ยนแปลงราบรื่นขึ้น การเปลี่ยนแปลงที่ราบรื่นนี้ไม่สามารถทำซ้ำได้อย่างสมบูรณ์ด้วย 8-bit gifs / pngs

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

พิกเซลสีขาวในวงกลม gif ของคุณมีความสุขเช่นนี้เนื่องจากมีการใช้ gif กับพื้นหลังสีขาว พิกเซลกึ่งโปร่งใสของวงกลมดั้งเดิมได้ถูกแรสเตอร์กับสีเคลือบสีขาวทำให้เกิดพิกเซลสีขาวเกือบทั้งหมด แต่ทึบแสงรอบ ๆ มุม

วิธีที่จะแก้ไขปัญหานี้ถ้าคุณมีเดิมวงกลมอย่างโปร่งใสคือการsave for web & devicesและเลือกสีเคลือบที่เหมาะสมกับพื้นหลังของคุณ ด้วยวิธีนี้พิกเซลกึ่งโปร่งใสที่อาจเกิดขึ้นจะถูกรวมเข้ากับพิกเซลทึบแสงอย่างสมบูรณ์กับสีด้านและมองดูเว็บไซต์ของคุณด้วยสีพื้นหลังที่คล้ายกันซึ่งจะปรากฏอย่างราบรื่น โปรดทราบว่าก) กราฟิกที่มีช่วงเล็ก ๆ ของพื้นที่กึ่งโปร่งแสง (เป็นพิกเซล) ทำงานได้ดีที่สุดและ b) สิ่งนี้ต้องการให้พื้นหลังที่แสดง gif นั้นเป็นสีที่สอดคล้องกันซึ่งคุณเลือกสำหรับการเคลือบของคุณ

ในภาพนี้:

• ด้านซ้ายบนเป็นกราฟวงกลมแบบดั้งเดิมที่มี anti aliased คือมุมที่ราบเรียบ
• ผลลัพธ์เดียวกันกับที่คุณได้รับด้วย png-24 ตามที่เห็นด้านบนขวา - แต่นี่ไม่ได้ผลสำหรับการเคลื่อนไหว
• มุมมองด้านล่างซ้ายแสดงให้คุณเห็นว่าพิกเซลแบบกึ่งโปร่งใสของกราฟิกถูกเปลี่ยนเป็นสีเคลือบสีแดงที่เลือกไว้อย่างไร และโปรดสังเกตว่าพิกเซลเหล่านั้นที่โปร่งใสอย่างสมบูรณ์ยังคงโปร่งใสอย่างสมบูรณ์ ในขณะที่พิกเซลเหล่านั้นที่มีความโปร่งใสเล็กน้อยจะได้รับ "underlayed" ด้วยสีด้านและพิกเซลทึบแสงทั้งหมดยังคงไม่ได้รับผลกระทบอย่างสมบูรณ์จากการตั้งค่าความโปร่งใส
• ด้านล่างขวามีลักษณะคล้ายกับตัวเลือกการส่งออกที่ใช้สำหรับรูปภาพตัวอย่างของคุณ ด้วยการเลือกเคลือบสีขาวพิกเซลเดียวกันที่แสดงสีแดงในภาพด้านล่างซ้ายจะแสดงสีขาวในภาพด้านล่างขวา สิ่งนี้ยอมรับได้อย่างสมบูรณ์ถ้าคุณแสดงกับพื้นหลังสีขาว พิกเซลสีขาวอื่น ๆ ที่มีความเข้มกว่าพื้นหลังแสดงขึ้นเนื่องจากการใช้สีเคลือบด้านที่ไม่ถูกต้องเพื่อสร้างพิกเซลทึบแสงสำหรับพิกเซลใด ๆ ที่ไม่โปร่งใสอย่างสมบูรณ์

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

หากคุณอยู่ในสถานการณ์ที่โชคไม่ดีที่คุณไม่มีไฟล์ต้นฉบับที่มีตัวอักษรแทนนามแฝงเต็มรูปแบบ (เช่นคุณมีเพียง 8 บิต gif) มันเป็นปัญหาในการย้อนกลับภาพแรสเตอร์แบบนี้ - พิกเซลต่อพิกเซลที่คุณต้องลบ สีด้านจากพิกเซลกึ่งโปร่งใสแล้วส่งออกอีกครั้งด้วยการตั้งค่าที่เหมาะสมยิ่งขึ้น

ในกล่องโต้ตอบบันทึกสำหรับเว็บให้ตั้งค่าสีเคลือบด้านขวาของหน้าต่างเป็นสีพื้นหลังของหน้าเว็บของคุณ

GIF ไม่สนับสนุนความโปร่งใส 8 บิตเต็มรูปแบบพวกเขาสนับสนุนความโปร่งใส 1 บิตเท่านั้น สิ่งที่ดีที่สุดที่คุณสามารถทำได้คือใช้สีที่ตรงกับพื้นหลังของหน้าเว็บเพื่อให้ภาพกลมกลืนกับสีนั้นได้อย่างง่ายดาย