Creating Images for the Web and Application Design - Advanced Adobe Photoshop CC - page 206

Viewing the completed file
Before starting this lesson, you'll use your browser to view the completed image with navigational links
that you will create in this section.
1 Open your web browser.
2 Choose File > Open, or the Open file command appropriate for your specific browser.
This page is created using CSS; you can export pages built from tables of CSS from the Photoshop
Save for Web window. Find out more about CSS at w3.org/Style/CSS/ .
3 In the Open dialog box, navigate to the advps10lessons folder and open the sitefolder located inside.
Choose to open the index.html file. 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 file type
and link.
You will create this web page from start to finish, including adding the links, and export the page us-
ing CSS.
5 You can keep the finished 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 file.
1 Choose File > Open and browse to the advps10lessons folder. Open the file named advps1007.psd .
The navigational banner appears.
2 Choose File > Save as. In the Save As dialog box, type advps1007_work.psd into the Name text field.
Make sure that you are saving into the advps10lessons folder, and then click Save.
3 Choose Window > Layers to open the Layers panel if it is not already visible.
4 Select the Slice Select tool ( ), which is hidden under the Crop tool.
5 Select the About Shape layer, press and hold 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 defined as slices.
7 Choose File > Save; keep this file open for the next section.