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.

  1. 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.

Related Searches



You May Also Like

  • 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...

  • PSD to WordPress Tutorial

    Like most applications, WordPress, a leading blog server application, doesn't support direct imports of Adobe Photoshop's native PSD file format. Photoshop is,...

  • 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 Markup Your PSD for Developers

    Include palettes, layer comps, shapes and smart objects in your PSD to make your developer happy.

  • How to Convert to PSD

    PSD (PhotoShop Data) is the Adobe Photoshop native file format. The .psd file extension indicates that the file contains graphic data. When...

  • PSD to HTML Coding

    The software engineers at Adobe, the developer of Photoshop, have streamlined the process for users to produce HTML and CSS output from...

  • 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 Slice a PSD in CS4 to HTML

    Coding a Web site or Web file may be a difficult task for designers, but using Adobe Photoshop CS4 to create Web...

  • How to Convert PSD to PDF for Free

    Photoshop is a powerful and useful program for creating and editing images. After creating an image, Photoshop creations are saved as .PSD...

  • 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 Cut a PSD to HTML

    When you create and save an image in Photoshop, it is saved as a PSD file. This format allows you to modify...

  • Chrome PSD Tutorial

    How to Convert PSD Templates to HTML in CSS; PSD to WordPress Tutorial; Comments. Related Ads. Check It Out Parenting With Social...

  • PSD WordPress Themes Tutorial

    Send it to a developer who specializes in converting PSD template mock-ups into full-fledged WordPress templates. ... PSD to WordPress Tutorial;

  • How to Import a PSD File Into InDesign

    Choose from the "Layer Comp" drop-down menu if your PSD file contains any layer comps; if not, this option will be grayed...

  • How to Convert PSD Layers to One PNG

    Adobe Photoshop Documents (PSD files) store their data in a series of layers. These PSD layers make it easy to manipulate individual...

  • 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...

  • How to Convert PSD Templates to HTML in CSS

    PSD or Photoshop Document is a specific file format for images and graphics created within the Adobe Photoshop application. Photoshop is often...

  • Watercolor PSD Tutorial

    Working with a computer monitor full of pixels doesn't have to limit your artistic ability or the opportunity to work with multiple...

  • How to Make Photoshop Layer Comps

    Photoshop's layer comp feature can save a lot of time and trouble. Rather than saving several versions of a file to see...

Related Ads

Check It Out

Prep for Black Friday Checklist [Infographic]