Interfaces & Imageready Tutorial Author - Man1c M0g (http://forums.biorust.com/member.php?s=&action=getinfo&userid=1)

Photoshop is an amazingly powerful tool, capable of creating the most awe-inspiring interfaces, but it can only take you so far.  When all your work is finished, its often the job of Photoshop's sister application, Imageready, to transform your creation into a living, breathing, web-interface.  The aim of this article is to provide an insight into the correct usage of Imageready to produce flexible interfaces with minimal bandwidth footprint.  The general principles in this interface can also apply to skins, and CSS-generated interfaces, but for the sake of simplicity, I will only explain my technique, which splits the interfaces into tables.   Still interested?  Read on...

Why Use Imageready?
     If Photoshop is so powerful, why use Imageready?  Well, unlike standard creative work (wallpapers, skins, etc), web-interfaces are very size sensitive.  If you don't optimize your images correctly you'll end up creating a website that takes an utter AGE to load. The immediate effect of this will be that you drive most of your visitors away, and eventually rack up a huge bandwidth bill from your hosting provider for the few visitors that do remain.  Whilst nearly all image-compression is, of course, lossy (i.e. you'll lose quality), the difference between a well-compressed image and that of a full-fat original is often imperceptible and never noticed.  Imageready makes size optimization an absolute cinch to manage too, allowing full flexibility without actually downgrading the quality of your original .PSD in the process.
     In addition to size benefits, Imageready allows you to split interfaces up into slices.  So, rather than loading the whole thing at once, your interface will load up more steadily and let your viewers know they are actually getting somewhere.  In addition, you can isolate repetitive or solid-colour areas of your interface from complex parts.  The exact importance of this will be discussed later in this article.
     Finally, Imageready makes it extremely easy to create animations and rollovers for your designs.   Notice how my menus are dynamic and change when the mouse pointer goes over them?   Imageready did all that, and its VERY easy to do too (in fact, all the necessary HTML code is automatically generated!).  I won't go into how to create those in this article though, because the program's help file already contains all the details you'll ever need on this subject (and I see no reason to redesign the wheel).

Slicing your Images
     Its time to get onto the real 'meat-and-bones' of this tutorial.  Load up your Interface in Imageready and, using the Slice Tool and Slice Select Tool, slice up your design into its component parts.  As an example, here's one of my favourite interfaces split up in this manner:

Believe it or not, this is actually quite a simple interface to slice.  Don't lose heart though, because its NOT THAT HARD - I have a large volume of slices for the sake of optimization (explained later).  There are a number of principles you really should adhere to whilst slicing, and these are as follows:

• Split the interface up into areas of similar content. If, for example, If you have a section with a large contiguous gradient,  encapsulate it entirely within a slice (i.e. slice 19 and 22 above).  This especially applies to areas of solid colour (i.e. area 51). It will make optimization of the images much easier later.
• If you have any rollovers in your design, make sure they are sliced as tightly as possible.  As you can guess, each rollover slice has a different image for both the on and off states, and if you include a lot of pixels which don't change in both states you'll have a lot of wasted space.
• Try to encapsulate your interface background in its own slices.  You should try and program your backgrounds into the HTML and not 'hard-code' them into the interface.  The rationale behind this will be explained later.
• Remember that several small images load a lot faster than one big image (and take up less bandwidth too).  Don't be afraid of slicing up complex areas into lots of tiny bits if this means you can isolate large areas of solid colour or gradients.

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.

Further Optimizations
We are in the home-stretch of our website creation marathon. True to a real-life race, this is the moment where the most gains are made, or the biggest losses are suffered.  Now that our website layout is controlled by HTML, however, we can leverage both the power of Imageready and a HTML editor to their full potential...

• Solid Colour Slices - Did you have any solid colour slices in your design?  If so, go into your HTML editor, delete the coloured image slice, and define that colour as a background for the blank cell instead.  The end result is identical, but can shave many KBs off your interface.
• Contiguous Gradient Slices - When an image is defined as a cell background in HTML it will tile endlessly in all directions (unless defined otherwise using CSS code).  We can, of course, use this to our advantage.  Take a look at the example below - the first cell uses a solid image, the end cost being around 0.61kb.  A little cropping in Imageready creates a much smaller image (0.35kb), which can be defined as a cell background.  The third cell places this image into a cell background and it tiles endlessly.  This gives us an identical effect for a much lower bandwidth cost and, of course, the third cell can be resized to almost any height without additional bandwidth penalty.   Needless to say, you should make sure your images tile seamlessly before doing this, or you'll end up with a right mess!

• Background Slices - Do you still have a few background slices in your interface?  Delete them from the HTML and define the page background properly instead.
• Re-Use Images - Don't be afraid to re-use images in different parts of your interface if they are identical or very similar.  Chance is that most viewers wont be able to see small differences anyway!
  

With a little care, and attention to fine detail, it is often staggering how much you can shave off the size of an interface.  My Biorust Interface, for example, is a shocking 286kb when defined as a solid image.  When optimized fully, however, its only ~80kb - quite a large saving, I'm sure you'll agree!

Expanding Designs
And now, for the final touches, try adding lots of fake content to your design to see how it expands.  If all goes well, you SHOULD have no problems, or merely have to define a few slices as cell backgrounds to make them tile.   One thing is certain though - master Imageready and you will surely have the world of web design at your feet.  Good Luck!