[WSG] images against color backgrounds
I hope I'm not bending/breaking the purpose of the list but wanted opinions on best practices for preparing images for use on web pages where there are color backgrounds, and the image must have some of that background color in them. Example: you want to place an image with a drop shadow, so in photoshop, you prepare your image with drop shadow, both of them in layers above the same background color as on the page. When you place such an image, flattened and jpg'd, it looks seamless. Trouble comes when you want to change the background color on the page (s) where you've already prepped the images with a given color..then you have to change that, too, and re-jpg, re-place, etc.. Some images don't look right unless their lifted off the page with a drop shadow, IMHO... cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] images against color backgrounds
.png with alpha channel is the best way to go. IE6 and lower can't handle the alpha channel and make the transparent background gray. Based on my site audience I'll make fallback .gif replacements for the .png images (that look crappier but are at least transparent) You can also make 8 bit .pngs (with no alpha channel) that behave just like .gif Joseph R. B. Taylor /Web Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone: (609) 335-3076 Web: http://sitesbyjoe.com Email: j...@sitesbyjoe.com On 12/8/10 4:01 PM, cat soul wrote: I hope I'm not bending/breaking the purpose of the list but wanted opinions on best practices for preparing images for use on web pages where there are color backgrounds, and the image must have some of that background color in them. Example: you want to place an image with a drop shadow, so in photoshop, you prepare your image with drop shadow, both of them in layers above the same background color as on the page. When you place such an image, flattened and jpg'd, it looks seamless. Trouble comes when you want to change the background color on the page(s) where you've already prepped the images with a given color..then you have to change that, too, and re-jpg, re-place, etc.. Some images don't look right unless their lifted off the page with a drop shadow, IMHO... cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] images against color backgrounds
.png with alpha channel is the best way to go. IE6 and lower can't handle the alpha channel and make the transparent background gray. Can be conditionally fixed with js, for example: http://www.dillerdesign.com/experiment/DD_belatedPNG/ Based on my site audience I'll make fallback .gif replacements for the .png images (that look crappier but are at least transparent) You can also make 8 bit .pngs (with no alpha channel) that behave just like .gif Joseph R. B. Taylor Web Designer / Developer -- Sites by Joe, LLC Clean, Simple and Elegant Web Design Phone: (609) 335-3076 Web: http://sitesbyjoe.com Email: j...@sitesbyjoe.com On 12/8/10 4:01 PM, cat soul wrote: I hope I'm not bending/breaking the purpose of the list but wanted opinions on best practices for preparing images for use on web pages where there are color backgrounds, and the image must have some of that background color in them. Example: you want to place an image with a drop shadow, so in photoshop, you prepare your image with drop shadow, both of them in layers above the same background color as on the page. When you place such an image, flattened and jpg'd, it looks seamless. Trouble comes when you want to change the background color on the page(s) where you've already prepped the images with a given color..then you have to change that, too, and re-jpg, re-place, etc.. Some images don't look right unless their lifted off the page with a drop shadow, IMHO... cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] images against color backgrounds
Good point on the javascript repairs (there are a couple techniques of fixing .png support in IE6) Trouble with this method is it can cause other troubles (like links over .png backgrounds etc) so be careful. It all depends on what you're trying to do. Joseph R. B. Taylor /Web Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone: (609) 335-3076 Web: http://sitesbyjoe.com Email: j...@sitesbyjoe.com On 12/8/10 5:11 PM, Henrik Madsen wrote: .png with alpha channel is the best way to go. IE6 and lower can't handle the alpha channel and make the transparent background gray. Can be conditionally fixed with js, for example: http://www.dillerdesign.com/experiment/DD_belatedPNG/ Based on my site audience I'll make fallback .gif replacements for the .png images (that look crappier but are at least transparent) You can also make 8 bit .pngs (with no alpha channel) that behave just like .gif Joseph R. B. Taylor /Web Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone: (609) 335-3076 Web: http://sitesbyjoe.com Email: j...@sitesbyjoe.com On 12/8/10 4:01 PM, cat soul wrote: I hope I'm not bending/breaking the purpose of the list but wanted opinions on best practices for preparing images for use on web pages where there are color backgrounds, and the image must have some of that background color in them. Example: you want to place an image with a drop shadow, so in photoshop, you prepare your image with drop shadow, both of them in layers above the same background color as on the page. When you place such an image, flattened and jpg'd, it looks seamless. Trouble comes when you want to change the background color on the page(s) where you've already prepped the images with a given color..then you have to change that, too, and re-jpg, re-place, etc.. Some images don't look right unless their lifted off the page with a drop shadow, IMHO... cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org mailto:memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Re: WSG Digest (office days)
Thanks for your email. I am in the office Mondays - Wednesdays. If you have requested a response I will get back to you when I can. If it is urgent please contact David Linden on 9269 0267 or email davi...@vla.vic.gov.au. Regards, Sam Sam Lawry Acting Content Manager (Mon-Wed) Online Services Victoria Legal Aid www.legalaid.vic.gov.au 9269 0279 wsg@webstandardsgroup.org 12/09/10 16:34 * WEB STANDARDS GROUP MAIL LIST DIGEST * From: Ladybug beli...@ladybug.com.au Date: Wed, 08 Dec 2010 16:38:38 +1100 Subject: We are currently out of the office Thank you for your email. We will be out of the office until Wednesday 15th December 2010. We will reply to your email as soon as we return. For any urgent enquiries or support, please email supp...@ladybug.com.au Kind Regards, Belinda * From: Andy Dempster ademps...@sme.org Date: Wed, 8 Dec 2010 00:42:31 -0500 Subject: Out of Office AutoReply: [BULK] WSG Digest I will be out of the office on Wednesday. I will get back to you on Thursday. * From: cat soul cats...@thinkplan.org Date: Wed, 8 Dec 2010 13:01:42 -0800 Subject: images against color backgrounds I hope I'm not bending/breaking the purpose of the list but wanted opinions on best practices for preparing images for use on web pages where there are color backgrounds, and the image must have some of that background color in them. Example: you want to place an image with a drop shadow, so in photoshop, you prepare your image with drop shadow, both of them in layers above the same background color as on the page. When you place such an image, flattened and jpg'd, it looks seamless. Trouble comes when you want to change the background color on the page (s) where you've already prepped the images with a given color..then you have to change that, too, and re-jpg, re-place, etc.. Some images don't look right unless their lifted off the page with a drop shadow, IMHO... cs * From: Joseph Taylor j...@sitesbyjoe.com Date: Wed, 08 Dec 2010 16:51:59 -0500 Subject: Re: [WSG] images against color backgrounds .png with alpha channel is the best way to go. IE6 and lower can't handle the alpha channel and make the transparent background gray. Based on my site audience I'll make fallback .gif replacements for the .png images (that look crappier but are at least transparent) You can also make 8 bit .pngs (with no alpha channel) that behave just like .gif Joseph R. B. Taylor /Web Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone: (609) 335-3076 Web: http://sitesbyjoe.com Email: j...@sitesbyjoe.com On 12/8/10 4:01 PM, cat soul wrote: I hope I'm not bending/breaking the purpose of the list but wanted opinions on best practices for preparing images for use on web pages where there are color backgrounds, and the image must have some of that background color in them. Example: you want to place an image with a drop shadow, so in photoshop, you prepare your image with drop shadow, both of them in layers above the same background color as on the page. When you place such an image, flattened and jpg'd, it looks seamless. Trouble comes when you want to change the background color on the page(s) where you've already prepped the images with a given color..then you have to change that, too, and re-jpg, re-place, etc.. Some images don't look right unless their lifted off the page with a drop shadow, IMHO... cs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** * From: Henrik Madsen hen...@igenerator.com.au Date: Thu, 9 Dec 2010 06:11:50 +0800 Subject: Re: [WSG] images against color backgrounds .png with alpha channel is the best way to go. IE6 and lower can't handle the alpha channel and make the transparent background gray. Can be conditionally fixed with js, for example: http://www.dillerdesign.com/experiment/DD_belatedPNG/ Based on my site audience I'll make fallback .gif replacements for the .png images (that look crappier but are at least transparent) You can also make 8 bit .pngs (with no alpha channel) that behave just like .gif Joseph R. B. Taylor Web Designer / Developer -- Sites by Joe, LLC Clean, Simple and Elegant Web Design Phone: (609) 335-3076 Web:
