Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

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.

Migel67.

Reply to this post


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

Featured Tutorialsmore

Airbrushing On Pho...
Airbrushing On Pho...
- Adobe Photoshop -
Night Lights (Basi...
Night Lights (Basi...
- Macromedia Flash -
Type Along A Path
Type Along A Path
- Adobe Photoshop -
DuoTones
DuoTones
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Advertisements





Special Options
Printer Friendly Version
Forum Threads

hello
Author: anderkober
Posted: Jul 14th, 3:09pm
Activity: 1 replies, 3284 views
 Re: 3ds Max Tutorials for Beginners
Author: 3DSMaxresources
Posted: Feb 22nd, 4:29pm
Activity: 0 replies, 3317 views
Delete Account
Author: Neo824
Posted: Oct 18th, 7:47am
Activity: 1 replies, 4434 views
Back...
Author: unleash
Posted: Jul 02nd, 12:37pm
Activity: 3 replies, 4455 views
Help Please :)
Author: Roosta
Posted: Mar 25th, 5:08am
Activity: 0 replies, 4940 views
thank you
Author: HypepapyHer
Posted: Mar 24th, 9:18pm
Activity: 1 replies, 3518 views
 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 12:16pm
Activity: 1 replies, 4374 views
 changes....
Author: supertackyman
Posted: Sep 12th, 3:56am
Activity: 2 replies, 5762 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 4:50pm
Activity: 0 replies, 4020 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 1:58pm
Activity: 0 replies, 5127 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 3:18pm
Activity: 1 replies, 11290 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 3:33pm
Activity: 0 replies, 19538 views
Forum Threads

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