Designs By EBS: Lessons in Photoshop

Lesson 1 > continued

Next we will be creating slices to prepare the image and preparing rollover images.

Download Lesson 1b.psd

Step 4 Setting Guides

Set Guides in the following locations. This will help to snap our slices in exact locations. View > New Guide

Horizontal Guides: 215, 411, 456, 498, 631, 652

Vertical Guides: 98, 306, 602, 801

Step 5 Duplicating layers and applying rollover properties

1 Duplicate the text layers: Lessons, Tutorials, Links, by going to Layer >Duplicate Layer. Rename the new layers, lessons_rollover, tutorials_rollover, links_rollover.

2 Choose a type of change to apply to the new layers. In this webpage, I have applied a Gaussian Blur to the original state of the layers. You could also change the color of the text, change the opacity of the background, create an outerglow, add a shadow, warp the text, etc. The possibilities are endless. Here is an example of several changes that occur on rollover.

Use the text tool to make changes in color, size, font, warp, boldness. Use the layer palette to apply styles such as borders, glows, drop shadows, and contours.

3 When finished, make sure the rollover layers are hidden (click on the eye in the layer palette).

Step 6 Slicing Images

There are three different kinds of slices : image based, layer based, and no image slices. Image based slicing is used to divide up a large image into smaller sections. Layer based uses individual layers to create slices. No image slices creates a space for future text. They are saved as part of an HTML file. Slices are optimized in ImageReady and saved as individual graphics and placed in a finished webpage. You can choose to have the HMTL file in tables or layers and CSS.

1 Save your Photoshop document. Use the Jump To button to switch to ImageReady. The Jump To button will not only launch ImageReady but also "jumps" the file that is open in Photoshop.

2 Set your workplace in ImageReady by opening Window > Optimize, Options, Slice, Tools, Web Content

3 Select the slice tool.

4 Using the guides, create a rectangle around the image of the apple. You will notice that once you drew the slice, Photoshop filed in the rest of the image with autoslices. You may continue to create more slices and Photoshop will autoslice the rest of the document. You can adjust the slices at any time. The slices you create are called "user slices" and you have the option of saving just the user slices or all of them.

5 Continue to make slices of each image: apple, book, and link. Also apply slices around each text layer: lessons, tutorials, links. Make a long vertical slice along the entire side, about 4 pixels wide. This will be used for a repeating background in a CSS layer. Create three slices of the rounded rectangle: top, bottom, and a small cross section through the middle which will be used for an expandable rectangle background.

6 Name each of the slices (web file appropriate i.e. link_img) using the WebContent Palette.

Step 7 Assigning Rollover Behavior with ImageReady

1 in the Web Content palette, double-click the Lessons Text slice. Select the Create Rollover State button. A new Over state rollover appears nested below the Lessons slice in the Web Content palette.

2 In the Layers palette, select the Lessons layer. Hide the original view and make visible the rollover state of "Lessons".

3 In the Web Content palette, click Normal to deactivate the rollover-state display in the image window.

These steps must be followed in exact order: select the slice, select the rollover layer, hide the original view, show the rollover state, click Normal. These steps must be followed to create the Rollover HTML needed.

Step 8 Previewing a Rollover

ImageReady allows you to test the interactive behaviors of your slices.

1 In the Layers palette, click a blank area to deselect the Lessons layer.

2 In the toolbox, first select the Toggle Slices Visibility button or press Q to hide the slice boundaries and remove the ghosting appearance over the image.

3 Select the Preview Document button or press Y to activate preview mode. Test your rollover buttons in the browser to see if you have achieved the desired affect.

< Previous | Next step >

lessons . tutorials . links . home