pages (3): [1] 2 3

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.

When your interface is all nicely sliced up, progress onto page 2...

view all