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 น.
Counter : 2040 Pageviews.

20 comments
ขอแนะนำให้รู้จัก ผู้ชายที่ทำให้เราปันใจจากคนข้างกาย กลายมาเป็นติ่งซีรีส์ blue_medsai
(12 ม.ค. 2564 10:23:37 น.)
วิ่งเพื่อน้อง รักผืนป่าห้วยขาแข้ง อ.บ้านไร่ จ.อุทัยธานี สองแผ่นดิน
(11 ม.ค. 2564 23:39:08 น.)
กาเฟเวียด @หนองคาย ร้านอาหารเวียดนามริมโขง อาหารอร่อย วิวสวย sawkitty
(11 ม.ค. 2564 14:14:22 น.)
夫妻比强 Fūqī bǐ qiáng สามีภรรยาใครดีกว่ากัน Kavanich96
(4 ม.ค. 2564 04:15:51 น.)
  
ได้ความรู้ใหม่อีกแล้วครับ
ขอบคุณครับ

ปล. พี่กึ่งนี่ สนิทกับ พี่เพยจังเลยน้าาาา
โดย: 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 น.
ชื่อ :
Comment :
 *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 

Over.BlogGang.com

กึ่งยิงกึ่งผ่าน
Location :
กรุงเทพ  Thailand

[ดู Profile ทั้งหมด]
 ผู้ติดตามบล็อก : 4 คน [?]

บทความทั้งหมด