 |
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.
- Tutorial written by Man1c M0g
| |
TUTORIALS SUBMENU
