Welcome, Guest

Please login or register



Sponsored Links

Interfaces & Imageready

pages (3): [1] 2 3

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

Pages (3): [1] 2 3 Next>
Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments

User:  Migel67 (#35323)
Date: Mon Dec 04, 2006. 09:13:28

Post #1 of 1

Thank you very much for a quick ImageReady introduction. I needed that.


Reply to this post

--- View Entire Thread ---
Amazing Font Pack!

Featured Tutorialsmore

Planetary Rings
Planetary Rings
- Adobe Photoshop -
Micro Buttons
Micro Buttons
- Adobe Photoshop -
Whispy Smoke
Whispy Smoke
- Adobe Photoshop -
Breast Enlargement
Breast Enlargement
- Adobe Photoshop -

Remember Me

Lost Password? || Register


Special Options
Printer Friendly Version
Forum Threads

hello guys!..i`m back
Author: yusreey
Posted: Oct 25th, 9:09pm
Activity: 1 replies, 7868 views
Author: anderkober
Posted: Jul 14th, 3:09pm
Activity: 1 replies, 4770 views
 Re: 3ds Max Tutorials for Beginners
Author: 3DSMaxresources
Posted: Feb 22nd, 4:29pm
Activity: 0 replies, 5174 views
Delete Account
Author: Neo824
Posted: Oct 18th, 7:47am
Activity: 1 replies, 5737 views
Author: unleash
Posted: Jul 02nd, 12:37pm
Activity: 3 replies, 6329 views
Help Please :)
Author: Roosta
Posted: Mar 25th, 5:08am
Activity: 0 replies, 6949 views
thank you
Author: HypepapyHer
Posted: Mar 24th, 9:18pm
Activity: 1 replies, 4761 views
 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 12:16pm
Activity: 1 replies, 5576 views
Author: supertackyman
Posted: Sep 12th, 3:56am
Activity: 2 replies, 7543 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 4:50pm
Activity: 0 replies, 5028 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 1:58pm
Activity: 0 replies, 5936 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 3:18pm
Activity: 1 replies, 42114 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4669