How to Make Div Layouts in Photoshop CS2

If you are working on creating a website, then you will want to use divs to divide up your page. Divs are html code for a particular section of a document, allowing you to assign different functions (such as hyperlinks) to that section. Fortunately, you don't have to be an html expert to create divs in your webpage graphics. You can use Photoshop CS2 to create the design for your page, and then export the design to Photoshop's companion program, ImageReady.

Instructions

1. Open Photoshop. Select "File" and click "New." In the dialog box that pops up, select one of the web template sizes. It's usually best to go with 800 x 600, since this is the lowest common denominator most likely to work on anyone's screen settings.

2. Create your site design with all your graphics and navigation buttons. You can include text as long as you haven't rasterized it in Photoshop (if you rasterize the text in Photoshop, it will be fuzzy). Work in layers, so that you can easily make changes to the design.

3. Click on the ImageReady Export button at the bottom of the toolbar. This will open your design in ImageReady. Select the "Slicing Tool" and start creating slices on your design. Slice the image so as to create separate sections (divs) that conform to your design. For example, the individual navigation buttons on your page should be their own div. And if, like the navigation buttons, the div will be hyperlinked, you should add that link in the "Slice" panel.

4. Go to the "Optimize" panel and select what type of image you want each slice to be. Detailed images or photos are best saved as JPEGs.

5. Select "File" then "Save As Optimized" and select "HTML and Images." Import the html page you created into your webpage editor (along with the associated image folder). You are ready to publish.

Resources

• Slicing Tutorial