Slice Optimization

• GIF - Whilst not the most compact filetype in the world, GIFs are relatively efficient and can be fine-tuned to a high level. They also load in all browsers and have transparency capabilities (although this is in an on-or-off basis - only PNGs have variable levels of transparency).   GIFs are ideally used for edges and areas where only a few colours are needed (since they have a limit of 256 colours).  When optimizing, start with 256 colours and step down until you notice substantial changes.
• JPG - An extremely compact filetype, JPGs are a good trade-off between quality and file size.  Unlike GIFs, which merely lose colours to optimize, JPGs become more diffuse, which can be unsightly.  They have no transparency capabilities.  The best interfaces use a mixture of JPG and GIF images.   When using JPGs, aim to use a quality of 60-80% for best effect.
• WBMP - An archaic standard, BMPs use no compression and, as such, are utterly HUGE.  Best avoided.
• PNG - The use of PNGs is controversial. Based on a newer graphical standard, PNGs are not supported by all browsers and have a tendency to sport quite large filesizes.  They are, however, very advanced and support varying levels of transparency as well as other fantastic innovations.  If you decide to design a Winamp 3 skin you'll invariably end up using them.  Their use for website interfaces is less clear-cut and best considered on a case-by-case basis.
  

Above your interface you should see the tabs shown above.  When playing around with file optimizations make sure you do it in the 'Optimized' screen which will, of course, show the effects of your tweaks as they are applied.  The 2-up and 4-up dialogs are useful too, and allow cross-comparison of different levels of optimization.   Where possible you should aim, of course, to get the lowest file size possible without sacrificing too much quality.  The Zoom Tool can help pick out changes in smaller slices, but don't be too anal about quality when zoomed in close because differences in quality are often imperceptible at original size.  Be sure to spend lots of time in this penultimate stage of the design process - the filesize-reduction rewards can be quite staggering if you take your time.

Outputting your Interface
Now that you have done all the hard stuff, you can take a small rest and let Imageready do all the hard work for you.  Just select File > Save Optimized As... from the menu, choose a blank output directory, and watch as your creation comes to life. Of course, our work isn't quite done yet - the templates that Imageready generates are static, non-expandable, and can be optimized even further.

- Tutorial written by Man1c M0g

Pages (3): <Prev 1 [2] 3 Next>

Automatic Translations: