| Interfaces & Imageready |
pages (3): 1 2 [3] |
|
|
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
| 

|
|
 |
TrentonCS Author: ahstanford Posted: Nov 06th, 7:40pm Activity: 3 replies, 27 views
|  | Html 5 Author: ahstanford Posted: Nov 05th, 1:32pm Activity: 5 replies, 89 views
|  | What are your favorite websites? Author: ahstanford Posted: Nov 05th, 12:51am Activity: 0 replies, 47 views
|  | What do you do for a living? Author: ahstanford Posted: Nov 04th, 11:04pm Activity: 0 replies, 45 views
|  | What is your favorite Subway sandwich? Author: ahstanford Posted: Nov 04th, 11:02pm Activity: 4 replies, 88 views
|  | Windows 7 Author: ahstanford Posted: Nov 04th, 10:59pm Activity: 0 replies, 49 views
|  | Google Wave Author: ahstanford Posted: Nov 04th, 10:52pm Activity: 0 replies, 60 views
|  | University Project Author: Gjbphp Posted: Nov 03rd, 8:59pm Activity: 1 replies, 90 views
|  | Hello BioRust! Author: ahstanford Posted: Nov 02nd, 5:39pm Activity: 4 replies, 87 views
|  | Illustrator cs4 - Convert outlines/graphics to ... Author: izidrew Posted: Oct 29th, 3:48pm Activity: 3 replies, 259 views
|  | Hello BioRust!! Author: MOST Posted: Oct 29th, 12:52am Activity: 4 replies, 144 views
|  | Hey! newbie Author: prelimiting Posted: Oct 28th, 11:51pm Activity: 1 replies, 113 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 212 |
| Total Downloads: | 415 |
| Linkbase Links: | |
 |
|
 |
 |
|