Project Management

Slicing and dicing graphics in Photoshop

The latest version of Adobe Photoshop boasts a "slice" tool that allows Web developers to carve images into sections, as well as a companion program for special graphic effects. Find out how these tools can solve some common graphics problems.


Editor’s note: This article originally appeared in TechRepublic’s Web Development Zone TechMail. Subscribe, and you’ll receive information on Web development-related projects and trends.

Web sites have become something of an art form. As such, companies have come to rely on advertising and design firms to devise interesting and innovative layouts for their online and print media.

This has both good and bad implications for in-house developers who—assuming the design firm doesn’t also provide functionality—then inherit these visual concoctions. On the one hand, developers are relieved of the responsibility of interpreting the dreams and visions of our corporate management teams. On the other hand, you can end up with some really outrageous layouts that now require a hefty chunk of back-end coding.

We'll tell you how the newest version of Adobe Photoshop can eliminate some of these worries by allowing you to work with individual graphic elements and how its ImageReady companion program can make quick work of special graphic effects.

Working with layers
If you find yourself developing functionality for predesigned graphic layouts, the first and most important step is to communicate directly with the graphic designers. Insist that any work done in Photoshop be maintained in Photoshop .psd file format, with all of the separate elements held on separate layers.

Working with layers allows you to break down the graphic elements as foreground and background images, separate from text elements. This opens the door for you to benefit from all of Photoshop 6.0’s Web-friendly features.

Photoshop’s new slice tool allows you to carve an image into sections. Each slice will become a separate image when you Save For Web from the File menu. Photoshop also generates the HTML for you and places the now separate images into a table layout that matches the image that you started with.

ImageReady 3.0
As if the slice feature wasn't enough, you can now use the companion program that comes with Photoshop 6, ImageReady 3.0, to generate client-side JavaScript to add the special effects that really make your site sizzle. Just go to the Jump To Selection of Photoshop's File menu to select and launch ImageReady.

Once ImageReady is launched, select the Slice Select tool from the tool palette. The slices that you defined in Photoshop will now show up on the screen.

If the Rollover palette is not visible, you can select Show Rollover from the Window menu. Select the user-defined slice that you wish to add a Rollover action to, and you will see a Normal thumbprint image on the rollover palette.

On the lower edge of the rollover palette, you will see a small image that resembles a paper peeling up. By clicking on this image, you will create an event action for the selected slice.

You can select from Over, Down, Click, Out, Up, and Custom. By clicking on the event thumbnail, you can modify the image or add or hide layers and elements. Click back and forth to preview the action as it will function on your Web site. ImageReady generates all the JavaScript code and graphic components necessary to create your active Web element for you.

A tip of the hat goes to the people at Adobe for the Web enhancements that they have added to their programs in this release. If you have any doubts about upgrading to these versions, don't worry; the time saved on layout alone should pay for the programs’ cost in very short order.

Have any advice for Photoshop users?
Is there a Photoshop trick that you’ve learned or a tip you would like to share with your fellow TechRepublic members? Send them to us. We’ll publish them in future articles.

 

Editor's Picks