View topic - saving PNG's in photoshop

Stylegala Forums » Forums list » Problem solving

saving PNG's in photoshop

Author	Message
Yaral New member Joined: 13 Oct 2006 Posts: 47 Status: Offline	Posted: Fri May 09, 2008 02:00 I've been running into a problem while trying to save a large PNG file with PS (CS3). Using save for web, if I choose PNG 8-bit, I do not get true transparency. I get rough transitions similar to saving as a gif. However, if I save as a 24-bit PNG, I get a large file size (700k). Does anyone have experience using PNG's? If so, how do you go about saving them?

Sponsor

karmedic New member Joined: 26 May 2008 Posts: 1 Status: Offline	Posted: Mon May 26, 2008 17:52 24bit PNGs support alpha transparency whereas 8 PNGs do not. Since you are saving 8 bits per channel in the 24 bit PNG (and then another 8 bits for the Alpha) the file size will be alot bigger - ie, it's true colour. The trade off with an 8 bit PNG is that a) you get flat transparency and b) you are restricted a 256 colour palette. I will typically only use 24bit PNGs if I require true alpha transparency ... if not i got with another format. For a large image that has many colours and does not require alpha transparency i will typically use JPEG and adjust the lossiness to suit my needs. hth

objx New member Joined: 19 May 2008 Posts: 4 Status: Offline	Posted: Tue May 27, 2008 09:01 Remember that 24-bit PNG's isn't supported in IE6 browsers too.(the background gets colored) There is a javascript-solution for IE6. This will fix the transparency problem, but it's quite alot of code, just to get the transparency working: http://www.twinhelix.com/css/iepngfix/ _________________ World Maps - Geography Resource

Bill Posters Site Moderator Joined: 26 Jun 2006 Posts: 264 Status: Offline	Posted: Tue May 27, 2008 11:11 objx wrote: Remember that 24-bit PNG's isn't supported in IE6 browsers too.(the background gets colored) There is a javascript-solution for IE6. This will fix the transparency problem, but it's quite alot of code, just to get the transparency working: http://www.twinhelix.com/css/iepngfix/ Js solutions simply automate the application of a CSS-based solution. For more control and for fewer instances, simply apply the CSS fix manually via an IE stylesheet. e.g. styles.css `#something { background: url(/images/bg-something.png); }` ie-5-6.css `#something { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/bg-something.png"); }` IE filtered background images won't tile, so you may need to use an alternative version of the image, large enough to span the desired area. e.g. styles.css `#something { background: url(/images/bg-something.png); }` ie-5-6.css `#something { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/bg-something-large.png"); }` _________________ aka 'clemi'

Yaral New member Joined: 13 Oct 2006 Posts: 47 Status: Offline	Posted: Wed Aug 06, 2008 03:16 Thanks for everyone's reply. I ended up finding the solution I needed. The problem I was having is that I have a large image that needed full alpha transparency. This is naturally unattainable with 8-bit, yet file sizes are far to large with 24-bit. The solution is in Adobe Fireworks. It actually has the ability to save 8-bits with full transparency, thus leading to small file sizes and true transparency. However, you are still limited to 256 colors so the image will loose some detail if its full of color. I hope this helps someone in the future.

Bill Posters Site Moderator Joined: 26 Jun 2006 Posts: 264 Status: Offline	Posted: Wed Aug 06, 2008 11:19 I honestly didn't know that FW offered those kinds of PNG (w/ alpha transparency) optimisation options. Consequently, the (pseudo?) PNG32 generated by FW was 25% smaller in filesize than the PNG32 generated by PS starting from the same PSD. That said, the anti-aliasing around the edge is predictably less smooth in the FW image than from PS's PNG32 version. Despite having Adobe CS3 Web Premium, which includes FW, I have continued to use Photoshop exclusively for web image generation. I'll have to start looking into how FW can benefit my work process. Incidentally, the PNG32 from FW was 10% larger than that from PS. YMMV _________________ aka 'clemi'

Yaral New member Joined: 13 Oct 2006 Posts: 47 Status: Offline	Posted: Thu Aug 07, 2008 02:07 I use photoshop as well because I'm used to the workflow. However, I keep hearing about people using Fireworks and saw (but havent read) this article: http://www.digital-web.com/articles/photoshop_versus_fireworks/

Kiran New member Joined: 18 Jun 2008 Posts: 45 Status: Offline	Posted: Fri Aug 08, 2008 17:17 Yaral wrote: I use photoshop as well because I'm used to the workflow. However, I keep hearing about people using Fireworks and saw (but havent read) this article: http://www.digital-web.com/articles/photoshop_versus_fireworks/ Hi Yaral, Just read the article... it was really interesting... Inconclusive but very informative. Kiran

kelly86 New member Joined: 18 Jun 2008 Posts: 35 Status: Offline	Posted: Fri Aug 08, 2008 17:29 Good to see even the top boys forget to name their layers in Photoshop... I thought that was just me :)

Page 1 of 1

Post new topic Reply to topic