Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Fireworks To The Rescue!
206
single,single-post,postid-206,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
stroke

Fireworks To The Rescue!

Is very important for us vendors to make sure they meet the client’s swf size specs. With some banners required to be 40kb or even lower, sometimes is very important that we optimize our assets as much as possible in order to meet this requirements without lowering the quality of our work.

This is a very handy technique I was taught by one of my co-workers. It will allow to decrease png and jpeg size dramatically conserving most of the original export pixel data.

The first step is to make sure that the image we are exporting is clean of extra unnecessary pixels that we dont need.

Adding a stroke to the layer will show any pixels that could be floating around.

Step 2  is to make sure that we are exporting only the pixels we need. Right now, it looks like we have a lot of extra transparent pixels around our object that we dont need, and will make our file unnecessarily large.

Trimming our image will get rid of those extra pixels and keep only the necessary ones.

 

When Trimmed, the object we are exporting should look like this:

Step 3 Now we can export our image. Save for Web & Devices ( command + alt + shift + S )

 

On the Save for Web & Devices dialog box we see how the image will be compressed from 154k to 31k, but is still too big.

Export you image.

 

Step 4 Fireworks To The Rescue!

Let’s Open our image in Fireworks and click the 2-Up tab so we can see the comparison.

 

 

 

 

Let’s open the Optimize Panel and change our setting from PNG 32 to PNG 8 with Alpha Transparency.

 

 

 

 

 

 

 

 

 

 

 

 

Boom! Our file just whent from 32k to 12k! we can also mess with the colors dropdown menu and take the number of colors down to 128 or even 64, but when we do this we run the risk of losing to much color data and our image will start to decrease in quality.

Go to file>Export ( command + shift + R ) save your file with different name and you are done.