07web Slicing a page and adding a URL in ImageReady

Difficulty Level: Beginners
PhotoShop Version: 7
Assumed Knowledge: Limited

 

 

Slicing a page

You can use slices in ImageReady to divide a document into smaller files. Each slice is an independent file, containing its own individual optimisation settings, colour palettes, URLs, rollover effects, and animation effects. You can use slices for faster download speeds and increased image quality when working with documents that contain mixed images, or text and images.

Slices are assembled in an HTML table in the document's HTML file. By default, the document starts with one slice that comprises the entire document. You can then create more slices in the document-ImageReady will automatically make additional slices to complete the full table in the HTML file.

Slices that you create are called user-slices. Slices that ImageReady creates automatically are called auto-slices.

You will create a slice from one of the Web page buttons, so that you can then define a rollover effect for it. For example, one type of rollover effect would take place when the viewer rolls the mouse pointer over a defined area in the image.

  1. Choose the slice tool from the toolbox. Notice that all of the slices in the image are now visible.
  2. Position the pointer at the upper left corner of the Sculpture button. Drag to create a slice around the button.

Creating a slice with the slice tool automatically creates other slices in the image.

In the example, the slice is numbered 06, although you may see a different number on your screen if you have created a slice in some other part of the image.

Assigning a URL to a button in ImageReady

 

A URL (Uniform Resource Locator) is just another way of saying web address.

 

Now that you have created slices, you can use the Slice palette to link the Order Now button to an order form. In the example, you will link the button to the webwasp site.

Once you've created a slice and assigned a URL to it, the viewer of the Web site simply clicks on the slice in a Web browser to jump to the defined URL. After you have assigned a URL to the slice, you can preview how the jump works using the Preview In Browser command.

You can assign a URL to a slice using the Slice palette. In this example, you will use the Order Now button that you created and assign a URL to its slice.

  1. Select the Slice tool, and draw a slice rectangle around the Order button.
  2. If the Slice palette is not visible, choose Window > Slice.


    Assigning a URL to the selected slice

  3. In the Slice palette, enter http://www.webwasp.co.uk in the URL text box, or choose the URL from the URL pop-up menu.

  4. Choose File> Save to save your changes.
  5. Go to File > Preview In > Internet Explorer and test if the button works by clicking on it in the browser.

     

Back to PhotoShop Home Page