Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Photoshop

  • Print
  • + Share This
From the author of

[Part 6 of 8]

9  Making the buttons move. For one last touch of realism, you can make the pressed buttons actually move down by doing some final tweaking to the simplified file. In this file all the effects and textures have been "flattened," or combined, in a single layer for each state. Activate the layer for the mouse-down state. Choose Filter, Other, Offset; use 0 for the Horizontal setting, and for the Vertical entry use a value that's smaller than the difference between the original Distance setting for the buttons layer's Drop Shadow used in step 2 (in this case 12 pixels) and the changed Distance setting used in step 8 (in this case 6 pixels); we used 4 pixels.

Offset filter
Using the Offset filter to "press" the buttons
for the mouse-down state

10  Reducing the size of the graphics. With the graphics completed, it's time to size them down to their final on-screen dimensions. To save a version of the file at full size, choose File, Save A Copy. Then reduce the size of the active file by choosing Image, Image Size. Make sure the Constrain Properties and Resample Image (Bicubic) boxes are checked. Then choose Percent for the units of the Width setting and type in "50." The other dimensions will change automatically; click OK to complete the resizing. Run the Unsharp Mask filter on each layer (Filter, Sharpen, Unsharp Mask) to fix any softening caused by resampling in the scaling process.

reduce file size
Reducing the size of the image

Unsharp Mask
Sharpening the scaled file
Now you'll move to ImageReady to optimize file size and color, slice the buttons panel into individual buttons, animate the rollover states, and save the HTML code and the images. Keep Photoshop open and jump to ImageReady by clicking the Jump To button at the bottom of Photoshop's toolbox. (If you're working in Photoshop 5 and you don't have ImageReady, you can save the buttons, and then use a Web editor to assign the button states.)

11 Optimizing in ImageReady. After opening the file in ImageReady, click the 4-Up tab in the main window, open the Optimize palette (Window, Show Optimize), make sure that Auto Regenerate is turned on in the Optimize palette's pop-out menu so the previews will be updated, and experiment with GIF and JPEG settings. (Step 5 of "'Onion-Skinning' a GIF Animation" on page 328 tells more about choosing settings in the Optimize palette). Because of all the shading in this image, JPEG at a low setting did a better job of compressing the file without degrading the color than GIF did with a reduction to 32 colors.

ImageReadyOptimizing color and file compression in ImageReady

  • + Share This
  • 🔖 Save To Your Account