Welcome, Guest

Please login or register

TUTORIALS SUBMENU

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

Related Links

Interfaces & Imageready

pages (3): 1 [2] 3


Slice Optimization

One of the most important tools within Imageready is, of course, the Slice Optimization dialog.  Using the slice selection tool, select a slice of your choice and study the dialog closely. You have a large number of options available to you, so don't be afraid to experiment.  Here are my suggestions for each file format:
  • GIF - Whilst not the most compact filetype in the world, GIFs are relatively efficient and can be fine-tuned to a high level. They also load in all browsers and have transparency capabilities (although this is in an on-or-off basis - only PNGs have variable levels of transparency).   GIFs are ideally used for edges and areas where only a few colours are needed (since they have a limit of 256 colours).  When optimizing, start with 256 colours and step down until you notice substantial changes.
  • JPG - An extremely compact filetype, JPGs are a good trade-off between quality and file size.  Unlike GIFs, which merely lose colours to optimize, JPGs become more diffuse, which can be unsightly.  They have no transparency capabilities.  The best interfaces use a mixture of JPG and GIF images.   When using JPGs, aim to use a quality of 60-80% for best effect.
  • WBMP - An archaic standard, BMPs use no compression and, as such, are utterly HUGE.  Best avoided.
  • PNG - The use of PNGs is controversial. Based on a newer graphical standard, PNGs are not supported by all browsers and have a tendency to sport quite large filesizes.  They are, however, very advanced and support varying levels of transparency as well as other fantastic innovations.  If you decide to design a Winamp 3 skin you'll invariably end up using them.  Their use for website interfaces is less clear-cut and best considered on a case-by-case basis.


Above your interface you should see the tabs shown above.  When playing around with file optimizations make sure you do it in the 'Optimized' screen which will, of course, show the effects of your tweaks as they are applied.  The 2-up and 4-up dialogs are useful too, and allow cross-comparison of different levels of optimization.   Where possible you should aim, of course, to get the lowest file size possible without sacrificing too much quality.  The Zoom Tool can help pick out changes in smaller slices, but don't be too anal about quality when zoomed in close because differences in quality are often imperceptible at original size.  Be sure to spend lots of time in this penultimate stage of the design process - the filesize-reduction rewards can be quite staggering if you take your time.


Outputting your Interface
Now that you have done all the hard stuff, you can take a small rest and let Imageready do all the hard work for you.  Just select File > Save Optimized As... from the menu, choose a blank output directory, and watch as your creation comes to life. Of course, our work isn't quite done yet - the templates that Imageready generates are static, non-expandable, and can be optimized even further.

- Tutorial written by Man1c M0g

Pages (3): <Prev 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

Planetary Rings
Planetary Rings
- Adobe Photoshop -
Asphalt Textures
Asphalt Textures
- Adobe Photoshop -
HyperNURBs Modelling
HyperNURBs Modelling
- Maxon Cinema 4D -
Crescent Shapes
Crescent Shapes
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Related Links



Special Options
Printer Friendly Version
Forum Threads

 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 11:16am
Activity: 1 replies, 880 views
 changes....
Author: supertackyman
Posted: Sep 12th, 2:56am
Activity: 2 replies, 1044 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 3:50pm
Activity: 0 replies, 1049 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 12:58pm
Activity: 0 replies, 1927 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 2:18pm
Activity: 0 replies, 1824 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 2:33pm
Activity: 0 replies, 14435 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 3:37am
Activity: 0 replies, 2741 views
A New Designer has joined the ranks
Author: skates1
Posted: Mar 28th, 2:19pm
Activity: 2 replies, 2769 views
The hole in Photoshop
Author: Mars
Posted: Feb 13th, 9:28pm
Activity: 2 replies, 3434 views
Colour Swatch
Author: ebz7350
Posted: Jan 15th, 11:18am
Activity: 0 replies, 2352 views
 BioRUST Forums - Reply to Topic
Author: inonShozy
Posted: Jan 11th, 11:32am
Activity: 8 replies, 2494 views
 Version 2 of my portfolio site.
Author: andrewnleon
Posted: Jan 08th, 6:18am
Activity: 6 replies, 2796 views
Forum Threads

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