TUTORIALS SUBMENU ---->

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING

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!

- Tutorial written by Man1c M0g

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

Automatic Translations: