*** From the Archives ***
This article is from June 14, 2000, and is no longer current.
The Creative Toolbox: ImageReady Slices Away at Your Workload
A few years ago, one of the truly tedious tasks for a Web designer/producer was the creation and optimization of Web graphics. First we had to plan out how the Photoshop build was to be split up or sliced so that each slice fit nicely with the arrangement of the HTML table layout. Relying solely on tools such as Debabelizer to optimize the manually sliced Web graphics, we would then proceed to recreate the layout in an HTML page, piecing the slices back together as if we were putting together a jigsaw puzzle — and having almost as much fun.
To address the problem, Adobe developed an application specifically designed to slice and optimize Web graphics — Adobe ImageReady. ImageReady 2.0 can now be found as a component of Photoshop 5.5 and is no longer sold separately. Using ImageReady to its fullest potential means smoother sailing when it comes time to export graphics into an HTML environment such as Adobe GoLive 4.0.
It Slices, It Dices
ImageReady 2.0 introduced Slices, editable boxes that allow you to designate filename and optimization settings for each individual area. Using the Slice tool and the Slice Select tool, you can cut up your Web page and rebuild it as you see fit. Slices can be duplicated by selecting the Duplicate command found in the Slices menu. They can also be automatically created from Guides or a Selection. Combining Slices is also a breeze: Just select two or more slices and choose Combine Slices under the Slices menu.
Whether you’re creating a quick working prototype or building towards the real thing, here are some other helpful ImageReady tips to keep in mind:
- Slices can be set to include no image data, allowing you to preset a table cell to a certain background color. This is accomplished by selecting a Slice, then going to the Slice palette and changing the Type pull-down to “No Image.” Now set your chosen table cell background color under the “BG:” pull-down.
- Not only can you set a Slice to be a particular background color, but you can also fill that slice with text that will be written out as HTML. Follow the above instructions and enter your text in the “Text” field. And here’s the clincher: HTML tags (such as <FONT>) can also be entered in this field, meaning you can program your Web page to save out a complete HTML file.
- An HTML Background color (or image) can be set within ImageReady. Look for this option under the File menu, “HTML Background…”
- Slices establish the area for Rollovers also. You must create a Slice before creating a Rollover. Incidentally, the JavaScript code for Rollovers is also written out in your HTML file.
Writing the Code Before You Write the Code
Now that you went to all the trouble of setting up your Slices, Rollovers, and Non-Image Slices that even include HTML tags, you may be wondering what it was all for. Where is the fame and glory? Well, you’ll have to wait for that, but all that extra up-front effort leaves us with very little tweaking to do in GoLive (if any).
Before saving out your images, be sure to set ImageReady’s preferences so that it creates GoLive-compatible code. This is not the default setting. To do this, go to ImageReady’s preferences and select the “HTML” pull-down. Then select “GoLive” in the Code pull-down. Now select the “Save HTML File” checkbox in the Save Optimized dialog box and everything should be ready to go into GoLive.
What’s Left For GoLive?
Once you have saved your slices and HTML from ImageReady, you can import the page to your site or open it as a new one within GoLive. Rollovers, table backgrounds, and HTML code you’ve entered in ImageReady should all remain intact. One thing to keep in mind is that the HTML code that was written within ImageReady assumes that the location of the Slice images will stay relative to the HTML file. With this in mind, I strongly suggest that you select the “Put in images subfolder:” option in ImageReady. Create an identically named images folder in your GoLive site and you shouldn’t have any problems with broken references.
Most designers I talk to sheepishly admit to me that they have overlooked this seamless process between ImageReady and GoLive. They would use ImageReady to create their slices, but instead of importing them en masse to GoLive, they would painstakingly import them one by one and place them manually on the pages. I suppose they simply expected it to be hard, and acted accordingly.
ImageReady 2.0
…to GoLive 4.0
This ImageReady-to-GoLive process helps minimize the tedium that once cursed this industry. Although the code that ImageReady generates may not be as lean and mean as code you yourself may generate, it may be just the thing when knocking out a prototype or hundreds of pages on a tight deadline.
 |
This article reflects an attitude that the entire graphics world revolves around Adobe, and backs up this position by stating “facts” that are blatantly incorrect. Quoting from the article:
“A few years ago, one of the truly tedious tasks for a Web designer/producer was the creation and optimization of Web graphics.”
Incorrect. I use Corel and Ulead products to create my web graphics. I have not found the “creation and optimization of Web graphics” to be “tedious” in any way.
“First we had to plan out how the Photoshop build was to be (exported) …”
“[T]he Photoshop build” ? That makes it sound as if a Corel or Ulead (or Macromedia or Jasc or Metatools or Fractal Design or Microsoft, etc…) “build” would be out of the question. As we know, that was never the case.
“Relying solely on tools such as Debabelizer to optimize the manually sliced Web graphics…”
Perhaps George Penston relied solely on Debabelizer, but many of us found Debabelizer to be bulky, overpriced, and inefficient. At the time, I was using Smart Saver (the original 1.0 release of the product) and continue to use Smart Saver (now Smart Saver Pro) for the vast majority of my optimization. The newest version of Smart Saver is Smart Saver Pro 3.0, which is actually the sixth release of the product (there were three releases of the original Smart Saver followed by three releases of Smart Saver Pro). Given the fact that this optimizer is currently in its *sixth* release, I’d say that alternatives to Debabelizer have been around for quite a bit longer than Mr. Penston is aware of.
“It Slices, It Dices ImageReady 2.0 introduced Slices…”
Wrong again. Adobe was actually the last major company to introduce a slicing product. Corel, Macromedia, and Ulead were all way ahead of Adobe when it came to creating an image slicer.
“… all that extra up-front effort leaves us with very little tweaking to do in GoLive …”
So now, I’m not only using Photoshop as my exclusive bitmap editor and Debabelizer as my exclusive optimizer, I’m also using GoLive as my exclusive HTML editor. Without exception, every Web designer I know uses Dreamweaver, Front Page, or Homesite. Personally, I decided not to purchase GoLive after I saw Adobe’s original page promoting it. The page was designed for 1280 x 1024 resolution, making it virtually unreadable for those of us at more common resolutions. “My way is the right way, my resolution is the right resolution”. How typically (and egocentrically) Adobe…
Mr. Penston’s article reminded me a bit of Joe Gillespie’s October 1999 article in Web Page Design for Designers in which he declared that 8-bit PNGs have bad compression compared to 8-bit GIFs. What’s wrong with this statement ? Mr. Gillespie used Photoshop (and only Photoshop) for his compression testing, and Photoshop is known for its bugs in PNG implementation.
My comments are not meant as a shot at Mr. Penston. I’m sure he knows his stuff when it comes to discussing Photoshop, Image Ready, and GoLive. But for him to present the use of these products as the correct way (and possibly even the only way) of doing things is highly innaccurate, and is somewhat offensive to those of us who make our living using products created by companies such as Corel and Ulead.
Your site should strive to provide information for the entire graphics community, not just to Adobe-ites.
I honestly intended this article to be a how-to. In hopes that people that are using Photoshop, ImageReady, and GoLive would benefit. My column features are based on Adobe software predominately. I write them hoping they inform and benefit the interested user. I believe all software has its merits and downsides and to each his or her own.
“Perhaps George Penston relied solely on Debabelizer, but many of us found Debabelizer to be bulky, overpriced, and inefficient. “
I agree it was bulky, overpriced, and inefficent. I actually used Photoshop plug-ins then ImageReady 1.0 and Fireworks 2.0. But I felt the going standard at the time was Debabelizer. That is what one of the top Web companies was using at the time when I worked for them.
I also wanted to clarify that I was not trying to say that ImageReady 2.0 introduced the world to Slices, but that ImageReady 2.0 introduced Slices to the application itself. Sorry for the confusion.
… to give his own article 2 positive reviews. Wouldn’t it be more appropriate to post an unrated comment (as I just did) ?
Great highlight of a very useful feature. I was originally intimidated by slices and restructuring large graphics, but with this info. I have ready to go! Thanks!
I enjoyed the article quite a bit since by natural selection I have ended up with almost entirely Adobe software. I realize, as does the author, that there is other software equally or more capable, but the point of his article was to show the amount of integration in Adobe’s products. A different author might show a scenario using Macromedia products which might be very useful for many other people. The one readers complaint about this being an Adobe centric article was articulate and well laid out. I, however, disagree with his opinion because I (though I may be the only one ;-) use mostly Adobe software – for better or worse.