web design: in your face, png transparency!

Heres a section of a traditionally nightmarish image to convert to a png. Its that complex transparency that increases the file size.

In photoshop…

Step 1: remove as much colour information from the image as possible. Seeing as its basically just black with this image you can select the transparency

and create a solid colour fill…

Already its a little better:

2. Posterise the transparency: alt/option click on the layer mask. Goto image>adjustments>posterise. I chose 6 levels for this image.

And bingo:

Lets see if it works for a messy graphic with a gradient.

Photoshop save for web is saying 59.6K

And after: 45.95K So – not great but it’s the gradient here that the png doesn’t like. Take it away and you get before and after values of…

51.3K and 35.8. You can also try posterising the image.

This one has 11 levels and no gradient, bringing it to 24K

Advertisements

0 Responses to “web design: in your face, png transparency!”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Calendar

May 2011
M T W T F S S
« Mar   Nov »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

twitter


%d bloggers like this: