Skip to Content

Stylegala Forums » Forums list » Problem solving

saving PNG's in photoshop

saving PNG's in photoshop

post new topic Post new topic    Reply to topic Reply to topic

Author Message
Yaral

New member
  • Joined: 13 Oct 2006
  • Posts: 47
  • Status: Offline
Reply with quote Post 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?

View user's profile Send private message AIM Address MSN Messenger
 
Sponsor
 
karmedic

New member
  • Joined: 26 May 2008
  • Posts: 1
  • Status: Offline
Reply with quote Post 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

View user's profile Send private message
 
objx

New member
  • Joined: 19 May 2008
  • Posts: 4
  • Status: Offline
Reply with quote Post 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

View user's profile Send private message Visit poster's website
 
Bill Posters

Site Moderator
Reply with quote Post 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'

View user's profile Send private message
 
Yaral

New member
  • Joined: 13 Oct 2006
  • Posts: 47
  • Status: Offline
Reply with quote Post 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.

View user's profile Send private message AIM Address MSN Messenger
 
Bill Posters

Site Moderator
Reply with quote Post 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'

View user's profile Send private message
 
Yaral

New member
  • Joined: 13 Oct 2006
  • Posts: 47
  • Status: Offline
Reply with quote Post 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/

View user's profile Send private message AIM Address MSN Messenger
 
Kiran

New member
  • Joined: 18 Jun 2008
  • Posts: 45
  • Status: Offline
Reply with quote Post 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

View user's profile Send private message
 
kelly86

New member
  • Joined: 18 Jun 2008
  • Posts: 35
  • Status: Offline
Reply with quote Post 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 :)

View user's profile Send private message
 

Page 1 of 1

post new topic Post new topic    Reply to topic Reply to topic

Display posts from previous:   

Powered by phpBB. © 2001, 2006 phpBB Group & Logo Design