Group Blog
 
<<
กรกฏาคม 2548
 12
3456789
10111213141516
17181920212223
24252627282930
31 
 
13 กรกฏาคม 2548
 
All Blogs
 
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 : 1489 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 น.  

ชื่อ :
Comment :
  *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 
รหัสส่งข้อความ
กรุณายืนยันรหัสส่งข้อความ

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

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

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




มีคนถามมาเยอะ ว่าชื่อผมแปลว่าอะไร บอกง่ายๆ ว่ามาจากฟุตบอลครับ "กึ่งยิงกึ่งผ่าน" เป็นการส่งลูกไปที่

หน้าประตูฝ่ายตรงข้าม โดยผู้เล่นที่เลี้ยงลูกมาจากทางด้านข้างของสนาม พอถึงจังหวะ ก็ผ่านลูกมาให้เพื่อนที่วิ่งมารออยู่หน้าประตู .... ต่าแว่!!

... แต่ว่า!!! ... ลูกมันเลยเพื่อนไป แต่ก็ไม่ถึงประตู เหมือนจะเป็นการยิงประตูก็ไม่ใช่ จะส่งให้เพื่อนก็ไม่ใช่


นี่จึงเป็นที่มาของคำว่า "กึ่งยิงกึ่งผ่าน" ครับ

ผมไม่ได้คิดเองแต่อย่างใด แต่เอามาจากการดูฟุตบอลครับ

ปล. ชื่อผมนี่บ่งบอกเลยว่า "ฟุตบอล" แต่ผมไม่ได้เล่นห้องศุภฯ นะครับ .. แหะ แหะ แหะ
Friends' blogs
[Add กึ่งยิงกึ่งผ่าน's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.