When a web developer is about to create a web page usually he will get an Adobe Photoshop document, or PSD, from the web designer. This PSD may include multiple design instances called Layer Comps. Layer Comps (a new layer management tool in Photoshop) show the web developer what changes to the original design to focus on. The developer then assesses each page and translates the design into the proper website format and code. This guide will help you create a strategy to properly convert PSDs into HTML pages.
Review Layer Comps
Click through each Layer Comp in Photoshop to see the various states of the design. Each Layer Comp will have various differences that are important to the design and your code. For example, one layer comp may have rollover states; another may have background image differences. If Layer Comps are not available, then review PSD as is.
Create Guides of Main Areas
Separate the design into three areas: Header, Content, Footer. This is done in Photoshop through Guides. Create a Guide by dragging grid lines with the mouse from the edge of the Photoshop document to the edge of the areas you want to separate. For example, you want to create a Guide that separates header from content. There is usually a distinct difference from where the header ends and where the content starts; if not, use your best judgment.
Create HTML/CSS for Main Areas
In your text editor code basic HTML tags: html, head, and body. Inside the body tag create a container for the page (i.e., <div id="container"></div>). Inside this container insert a div for the header, content, and footer areas you created guides for. In Photoshop, using the Rectangular Marquee Tool draw a box along the edges of the guides you created, then under "Image" (located at the top of the program) select "Crop". Go to "Image" then "Image Size" and you'll see exact height and width dimensions of the area you cropped. You will need this to define your CSS. For background images, in Photoshop go to your layers palette, click the eyes to show and hide certain layers until you get just the background you need.
Create guides for padding and margins between areas of the page (i.e., header to content, content to footer, footer to bottom of the page). Save graphics of all text elements in unusual fonts that cannot be rendered as system text. For example, text done in a Papyrus font needs to be sliced and saved as an image because the web won't render it as system text. Toggle between Layer Comps to make sure Guides do not overlap.
Create HTML/CSS of Page Specifics
Define universal CSS for consistent tags such as paragraphs, anchors, tables, header tags, and list items. Begin plugging in content starting with the header and footer then filling in the content areas. The header and footer are usually consistent on every page of your website. Break up the content area into copy, modules, and navigation. Obtain colors, fonts and line spacing from the PSD and incorporate into your CSS file.
Compare HTML file with PSD
Save CSS files as .css and your HTML files as .html. Open HTML file through multiple web browsers by going to File then Open Location. Review the HTML file against the Photoshop design and check for differences. Note differences on a sheet of paper, then fix your HTML or CSS code to match PSD design. Continue this process until what you see in the web browser matches that of the PSD design.
How to Convert PSD to HTML
The .psd file extension is the format extension used for saved Photoshop files. HTML code is used as a building block for...
CSS Tutorial in PDF Format
What Is the Difference Between HTML and PDF Files? Hyper Text Markup Language, or HTML, ... Most websites are built on HTML...
How to Convert PSD to HTML With Gimp
GIMP is a free, full-featured image editing program that can perform many of the same functions as Adobe Photoshop. For example, it...
How to Convert a PDF to a PSD in Photoshop
Photoshop is an application made by Adobe for creating, manipulating and editing image files. When you work on a document in Photoshop,...
How to Edit a Layered PSD in Gimp
Layers are a powerful feature in image editing software that let you create certain special effects. Photoshop supports the layers feature, and...
How to Convert a PSD to a Dreamweaver File
Import Photoshop files into Dreamweaver to convert them ... You can export complex layered PSD file layouts to HTML web pages that...