Creating Web Pages in Photoshop

Create a mockup layout in Photoshop

When choosing the dimensions of the document, remember that not all the screen resolution will be available for content. When the web page is displayed in the browser, one loses only a few pixels from the screen resolution width, but one loses a lot of pixels from the screen resolution height due to the location bar of the browser, menus, icons at the top and the status bar and taskbar at the bottom.

In your Photoshop document, create non-overlapping rectangular areas for the various portions of your page - navigation, content, banner, etc. It is preferable to use text in your Photoshop document where text is to be used in the web page and actual images where images are to be used. View>Show>Grid will display the grid and View>Rulers will display the rulers.

Alignment and Distribution of Layers

You can align and distribute layers which are linked. To link layers, select the layers to be linked and then either from the main menu at the top choose Layer>Link Layers or choose Link Layers from the Layers panel options. Once the layers are linked, choose Layer>Align or Layer>Distribute. The former allows the layer contents to line up. The latter allows the spacing of the objects from the layers to be even across the an area.

Exercise: Create four text areas, each corresponding to a navigational link -- e.g Home, About Us, Contact Us, and Links. Then align and distribute the entries.

Creating a Web Page from the Photoshop Layout through Image Slicing

You can create slices from guides. To create a ruler guide, show the rules and then drag from the ruler into the document. You can move any guide with the Ruler tool. Choose View>Show>Slices to view th4e default slices based on intersection of the guides.

You can also creates slices by using the Slice Tool which is underneath the Crop tool (3rd row, left). Choose the tool and draw non-overlapping rectangular areas to define the slices.

Editing slice options - Select the slice tool and then right-click in a slice and choose Edit Slice Options.

Exporting a web page - File>Save for Web and Devices. In the Save for Web & Devices dialog box, select the Slice Select tool (second from top on the left) and select the slices. As you select the slices, you can optimize each individually if you so choose. Click Save which will bring up the Save Optimized As dialog box and you can select the appropriate location and you can choose from among the following: Images only, HTML only and Images and HTML. The HTML will include a table that displays the sliced image as if it were a single image. The HTML generated can be the starting point for your web page -- it will already include the images you will use in the web page and the areas where text was used in the layout will have images of this text which can be replaced by actual text as desired. If the No Image slice type was chosen, this text will appear in the table cell instead of an image of the text.

Sources: Adobe Photoshop CS4 Web Production, Element K. Adobe CS 4 Help, Revised: July 6, 2010