Web Design with HTML and CSS

108

Slicing an image

Web Design with HTML and CSS Digital Classroom

3 In the Open dialog box, navigate to the web05lessons folder and open the sitefolder

located inside. Choose to open the index.html fi le. An image created to help viewers

navigate a website appears.

The completed navigation bar in a web browser.

4 Click the ABOUT, RECIPES, BOOKS, and STORE text links; these links take you to

generic pages with related titles. As you can see, each slice can have its own independent

attributes, such as fi le type and link.

You will create this web page from start to fi nish, including adding the links, and export

the page using CSS.

5 You can keep the fi nished web page open in the browser for reference, or choose File >

Close.

6 Return to Photoshop.

Creating slices

You will now use the existing layers in this image to create layer-based slices using Adobe

Photoshop.

You will start by saving a work fi le.

1 Choose File > Open and browse to the web05lessons folder. Open the fi le named

web0507.psd. The navigational banner appears.

2 Choose File > Save as. In the dialog box that appears, browse to the web05lessons folder.

In the Name text box, type web0507_work.psd.

3 Choose Window > Layers to open the Layers panel.

4 Select the Slice Select tool ( ), which is hidden under the Crop tool.

5 Select the About Shape layer, hold down the Shift key, and click the Store Shape layer. All

four shape layers are now selected.

6 Choose Layer > New Layer Based Slices. The shape layers are now defi ned as slices.

7 Choose File > Save; keep this fi le open for the next section.