Bloggang.com : กึ่งยิงกึ่งผ่าน : Advance Image Transparency with PNG

Advance Image Transparency with PNG

พูดถึง Image Transparency ก็คงเป็นที่รู้กันครับ ว่า GIF ทำได้อยู่แล้ว แต่ก็อย่างที่ทราบกัน มันจะมองทะลุแบบเป็นเหลี่ยมๆ ไม่ค่อยนุ่มนวลซักเท่าไหร่ อย่างในรูปครับ

จะเห็นว่าส่วนโค้งๆ เนี่ย มันไม่โค้งจริง ยิ่งตรงที่เป็นเงานี่เลิกพูดเลยครับ ตลกน่าดู

ไฟล์รูปภาพแบบ PNG ได้เข้ามาแก้ปัญหานี้ โดยใช้หลักการ Alpha Transparency .. ถ้านึกภาพไม่ออกนะครับ นึกถึงตอนทำ Photoshop เวลาที่เราทำ "เงา" นะครับ แล้วมันมองทะลุไปถึง layer อันล่างๆ นั่นล่ะครับ หลักการเดียวกันเลย

เรามาลองทำกันเล่นๆ ดีกว่าดีไหมครับ สนุกๆ

ก็เปิด Photoshop มาเลย แล้วก็ทำรูปซักรูป ให้มันมีส่วนโค้งๆ หน่อยครับ จากนั้นก็ใส่เงาให้มันซักหน่อย เพื่อทดสอบครับ ดังในรูป

จากนั้นเราก็ เตรียมตัว Save โดยเราต้องให้ layer ที่อยู่ต่ำกว่า ไม่แสดง จะมีผลให้เกิดการ transparent เกิดขึ้น จากนั้นเราก็ Save มันเป็น Save for Web .. โดยกำหนดให้เป็นภาพแบบ PNG 24 bit ครับ

ทีนี้มาลองดูครับ ว่ามันแตกต่างกันยังไงครับ

24 bit PNG ALPHA transparency	GIF transparency with PATTERN transparency dither	GIF transparency with no transparency dither

By กึ่งยิงกึ่งผ่าน : July 13, 2005 Not Available on Internet Explorer

สำหรับข้างบนนะครับ จะดูไม่ได้บน IE เพราะว่า ตัว IE เอง ยังไม่ได้ Implement การแสดงผล PNG อย่างเต็มรูปแบบ แต่ข่าวแว่วมาว่าจะทำให้เรียบร้อยบน IE7 ครับ

แต่ผมก็ทำตัวอย่างเผื่อไว้แล้วครับสำหรับ IE ที่ยังไม่ support ซึ่งคลิกดูได้ที่นี่ครับ [ Click เพื่อดูผลบน IE ]

เป็นไงบ้างครับ ..
ต่อไปหลังจากนี้ การทำภาพสำหรับแสดงผลบนเว็บ คงจะมีลูกเล่นมากขึ้นนิดหน่อยล่ะครับ

ปล. ขอบคุณคุณ รำเพย ที่เอื้อเฟื้อที่เก็บตัวอย่างครับ (พอดีต้องใช้ php ในการทำให้ IE มัน transparent สำหรับ png อ่ะครับ)

Create Date : 13 กรกฎาคม 2548

Last Update : 13 กรกฎาคม 2548 8:56:27 น.

20 comments

Counter : 2437 Pageviews.

ได้ความรู้ใหม่อีกแล้วครับ
ขอบคุณครับ

ปล. พี่กึ่งนี่ สนิทกับ พี่เพยจังเลยน้าาาา

โดย: GuiLty PLeaSure

วันที่: 13 กรกฎาคม 2548 เวลา:9:05:59 น.

เอ่อ... มีใครใช้ไฟร์ฟอกซ์แล้วส่งรูปที่เปน png
ประกอบโพสตอบพันทิปได้บ้างใหมง่า

โดย: นู๋เองง่ะ

วันที่: 13 กรกฎาคม 2548 เวลา:9:13:03 น.

เมื่อวานลองเอาไฟล์ png ตอบกระทู้ pantip.com ด้วย firefox ...
มันไม่ได้ล่ะ นู๋เองง่ะ ... บอกว่าไม่ Support
(คิดว่าคงเชคจาก User Agent ของ Browser + ชนิดของไฟล์)

ก็เลยเอา ie เป็นตัวตอบกระทู้ ... ได้แฮะ
แต่แสดงใน IE จะมีพื้นขาวๆ ฟ้าๆ แต่แสดงกระทู้ใน firefox นี่ไม่มีปัญหา

โดย: กึ่งยิงกึ่งผ่าน

วันที่: 13 กรกฎาคม 2548 เวลา:9:21:22 น.

ใครแซวเสียงแว่วๆมาแต่ไกล

โดย: รำเพย

วันที่: 13 กรกฎาคม 2548 เวลา:9:34:19 น.

โห มีการให้ยื้ม host กันด้วย นี่มันเข้าข่าย เชิญผู้ชายไปบ้านแล้วนะครับทำเล่นไป สำคัญๆ

โดย: หมาร่า login ไม่ได้ IP: 203.155.104.67 วันที่: 13 กรกฎาคม 2548 เวลา:10:18:11 น.

ขโมยขึ้นบ้านอะ แต่บังเอิญว่าขโมยคนนี้เป็นช่างซ่อมวงจรไฟฟ้าในบ้าน เลยจะเปลี่ยนกุญแจก็ไม่ได้น่ะพี่

โดย: รำเพย

วันที่: 13 กรกฎาคม 2548 เวลา:10:23:34 น.

โอ้ ไฮโซวววคับ

โดย: ทามะจัง IP: 203.130.128.129 วันที่: 13 กรกฎาคม 2548 เวลา:10:25:49 น.

ทำไม IE ต้องใช้ PHP?

โดย: Oakyman IP: 203.181.22.136 วันที่: 13 กรกฎาคม 2548 เวลา:10:53:26 น.

ขอบคุณมากค่า ได้ฟามรู้อีกแล้ว

โดย: Kitsunegari

วันที่: 13 กรกฎาคม 2548 เวลา:11:21:58 น.

ตอบ Oakyman

เพราะใน IE เวอร์ชั่นนี้ (และก่อนหน้านี้) ไม่สามารถแสดงผล .png ด้วย HTML ปกติได้ จึงต้องใช้ PHP ในการตรวจสอบดูว่าเป็น IE หรือไม่ ถ้าใช่ จะส่ง Header มาให้ยัง Browser ในรูปแบบที่ไม่ใช่ HTML ปกติทั่วๆ ไป

แต่ถ้า IE7 มัน Support เมื่อไหร่ ก็คงไม่ต้องทำแบบนี้ ก็คงใช้ <img src...> ธรรมดาได้เลยอ่ะ

โดย: กึ่งยิงกึ่งผ่าน

วันที่: 13 กรกฎาคม 2548 เวลา:12:28:04 น.

IE7 รองรับ Transparency PNG แน่นอนครับ

^^

โดย: panumas05

วันที่: 13 กรกฎาคม 2548 เวลา:21:20:41 น.

มาอ่านความรู้คับ

โดย: หมื่นทิพ TRAVOLTA (เทพบุตรตบะแตก!!

) วันที่: 13 กรกฎาคม 2548 เวลา:23:15:55 น.

เวียนเฮดเดอร์

โดย: N4 IP: 210.250.195.46 วันที่: 14 กรกฎาคม 2548 เวลา:9:02:47 น.

เฮ้อ สมองน้อย ๆ ของเราเนี่ย มันไม่มีรอยหยักเลยรึไงว้า งง เชียว

โดย: เจ้าหญิงพันธ์ไม้สีขาว

วันที่: 15 กรกฎาคม 2548 เวลา:14:17:36 น.

เทสๆ

โดย: ถั่วงอกเป็นฆาตกร

วันที่: 16 กรกฎาคม 2548 เวลา:2:55:55 น.

มาหาอะไรทำแถวนี้หน่อย

โดย: ป้ามด

วันที่: 17 กรกฎาคม 2548 เวลา:19:42:49 น.

ก่อนอื่น จอมแก่น มาขอโทษ คุณ กึ่งยินกึ่งผ่าน ด้วยเรื่อง การเอา โค๊ตของ Comment ไปบอกต่อผู้อืนโดยไม่ได้ เขียนชื่อของคนที่คิดทำ สิ่งนี้ขึ้นมา ..

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

หลังจากที่มีคนมาต่อว่า จอมแก่น เรื่องนี้ และ คุณ รำเพย เองก็ บอกว่า จอมแก่น นั้นผิด ที่เอาโค๊ตนี้ไปสอนคนอื่นต่อโดยไม่ได้เขียนชื่อคนที่คิดสร้างขึ้นมา...จอมแก่น เลย ขอปิด บล้อคตัวเอง เพื่อเป็นการ ขอโทษ คุณ หมาร่า...หวังว่า สิ่งที่จอมแก่นทำนี้คงพอใจ สำหรับความผิดที่จอมแก่มทำนะค่ะ..

**ขอให้มีความสุขมากๆๆนะจ้า**

โดย: จอมแก่นแสนซน

วันที่: 17 กรกฎาคม 2548 เวลา:21:28:31 น.

และ คุณ กึ่งยิงกึ่งผ่าน ด้วยนะจ้า

โดย: จอมแก่นแสนซน

วันที่: 17 กรกฎาคม 2548 เวลา:21:32:36 น.

กรู เกี่ยวไรด้วยฟะเนี่ย

T___T โค๊ดเคิ๊ดไร ไม่ได้รู้เรื่องเล้ย

โดย: หมาร่าหมาหรอด

วันที่: 17 กรกฎาคม 2548 เวลา:23:30:21 น.

ขอบคุณมากจริง ๆ คับ....

โดย: Modernplay IP: 125.25.131.171 วันที่: 27 พฤศจิกายน 2550 เวลา:23:08:16 น.