PSD to HTML Tutorial
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.
Page Specifics
-
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.
-
