How to Code a PSD Web Layout
You can create and code PSD Web layouts in Photoshop. PSD is Photoshop's native file format. To code a PSD for the Web, start by designing the layout in Photoshop. Define the Web page sections, such as the header, footer, sidebar and buttons, with the Slice Tool, and then use Photoshop's Slice Options dialog box to code the various sections of the layout.
Other People Are Reading
Instructions
-
-
1
Open the Photoshop PSD file you want to convert to a Web layout, or start a new Photoshop document by clicking the "File" menu and choosing "New." This opens the New dialog box. Click the "Preset" drop-down menu, and choose "Web." This displays options for setting up a Web page layout. You can choose one of the preset Web page sizes from the "Size" drop-down menu, or define a custom size with the "Width" and "Height" fields. Click "OK."
-
2
Lay out the Web page as desired. For example, you can create a header image across the top of the page, as well as a navigation menu, or you can create a menu down the left side of the page. You can also create a footer across the bottom of the page. Your design options are nearly unlimited.
-
-
3
Select the "Slice Tool" in the tools panel. The Slice Tool is located on the Crop Tool fly-out menu. Click and hold the "Crop Tool," and then select "Slice Tool" from the flyout.
-
4
Hold the mouse button and drag the "Slice Tool" over the first section of your Web page. The Slice Tool slices the PSD into sections and places each section in an HTML table. For example, you can create a slice for the header, the footer, the sidebar and each button or menu item.
-
5
Slice up the PSD as desired.
-
6
Click and hold the "Slice Tool" in the Tools panel to display the fly-out menu, and then select the "Slice Select Tool."
-
7
Double-click a slice you want to code. For example, to make a button a clickable link, double-click the button's slice. This opens the Slice Options dialog box.
-
8
Click in the "URL" field and type the link destination.
-
9
Click in the "Message Text" field and type a message. This is the text that displays when the user hovers the mouse cursor over the slice in a browser.
-
10
Select the "Alt Tag" field and type the alternative text for the slice. This is the text that displays if the browser can't display the image. Instead, a text link containing the Alt Tag text displays.
-
11
Repeat this process for each slice you want to code.
-
12
Click the "File" menu and choose "Save for Web & Devices." This opens the Save for Web & Devices dialog box.
-
13
Click "Save" to open the "Save Optimized As" dialog box.
-
14
Click the "Format" drop-down menu and choose "HTML and Images," and then click the "Slices" drop-down menu and choose "All Slices."
-
15
Click "Save." Photoshop saves the sliced up PSD Web layout as an HTML file and creates separate image files for each slice, saving them in a subfolder named "images."
-
1
Tips & Warnings
You can make changes to the HMTL code in Dreamweaver or a text editor, such as Notepad.
When you upload the HTML page to a Web server, don't forget to upload the images folder. Otherwise, your PSD Web layout won't display properly.
