Creating Slices in Photoshop

Tables are a common technique used in web design today. To control the content of web pages, such as how your text and images display, web designers use tables within their HTML. Table cells allow you to better define how a web page should look. With tables, you can ensure that text and images align correctly through the use of rows and columns.

You’ve already done some design with tables when you used the Slice tool back in previous tutorial. The Slice tool helps you divide your images into workable tables. Before we get started, save your work as Jackson_home.psd.

Let’s continue with our web page design. Perform the following:

1. Select the Slice tool from the toolbox.
2. Click and drag to draw your slices. Create the following slices, as shown in figure below:
   • Slice 01: Around the navigation bar and steel plate graphic
   • Slice 02: Around the top, which will hold the title of the page
   • Slice 03: Around the contents window area
     
     
     
3. Select File ▶Save for Web from the menu bar. The Save For Web dialog box displays.
4. In the Save For Web dialog box, change the file format (the first drop-down field on the right side of the screen) to JPEG.
5. Press the Save button. A Save Optimized As dialog box displays. Name your file Jackson_home.html, and change the Save type as text box to HTML and Images. Then, navigate to where you wish to save this file.

In this tutorial:

1. Creating a Professional Web Page Style
2. The Navigation Bar/Title Bar Style
3. Creating a Metallic Navigation Bar
4. Creating a Logo 
5. Adding a Steel Plate Graphic to your Web 
6. Creating a Contents Area 
7. Creating Slices in Photoshop 
8. Editing your Web Page in Dreamweaver