PSD to HTML

For many web designers the design process starts with Photoshop. Photoshop files have the .psd file extension, hence the title for these pages. Much can and has been written on creating web site designs in Photoshop. This page, and the ones related to it, are not about Photoshop but rather about what to do after you create the design in Photoshop. Here are some links to creating the design in Photoshop:

http://www.hongkiat.com/blog/40-greatest-web-interface-design-tutorials-photoshop-tutorial/
http://dzineblog.com/2008/07/best-photoshop-layout-design-tutorials.html
http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/

Once you have the design there are a number of different steps you have to go through in order to get the final HTML, CSS and image files you will need for the web site. The process will seem difficult at first, but with time it gets much easier since many of the steps and techniques are the same or similar from site to site. This page is  a general outline of the process that links to other pages with more detail.

Throughout the pages the same design is used as a base. If you would like to download the PSD file here it is. This file includes the images slices and many of the annotations I made while writing the tutorials below:

grid-withAnnotations.psd

Step 1: Everything is a Box

http://webdesign.blogs.peopleio.net/layout/psd-to-html/everything-is-a-box/

In HTML every piece of content has to be inside of an element (like <p></p> or <h1></h1>) The browser sees these elements as boxes. So one of the first things you have to do is to view your design in the same way an break everything down into boxes. Then the names you give these boxes can be used to start writing what I call the Foundational HTML for the page. This is the HTML on which you hang all of your content. The following page has links to three videos which go through this process

Step 2: CSS Layout

http://webdesign.blogs.peopleio.net/layout/psd-to-html/basic-css-layout/

In this step we take the foundational HTML and add CSS to it in small steps to get a layout. The layout shown on the linked page is a relatively simple one as it is a fixed layout with a header, content areas and a footer. The basic techniques outlined can transfer to more complex designs, but some other steps will be needed.

Step 3: Add HTML Content

http://webdesign.blogs.peopleio.net/layout/psd-to-html/add-html-content/

Now that the basic layout is complete it’s time to add the HTML elements for content. Much of this is actually covered in the videos for step 1. This page recaps that information in text and image format and adds some more details.

Step 4: Styling Content

http://webdesign.blogs.peopleio.net/layout/psd-to-html/styling-content/

Now the the main content is added you can style it.

Step 5: HTML/CSS Navigation

http://webdesign.blogs.peopleio.net/layout/psd-to-html/htmlcss-navigation/

This page shows how to create an HTML and CSS based navigation using the Listamatic examples

Step 6: Image Slices

http://webdesign.blogs.peopleio.net/layout/psd-to-html/psd-to-html-image-slices/

Many people start with image slices as one of the first steps to converting a PSD to HTML. The reason it’s left off until later here is that in the end it is the basic HTML framework and the CSS that styles it that is the most important. The images can and often do change. Also it can be easier to add images to a structure that already exists.

There is more that can be done even after step 6. For example there are a number of different techniques for adding quality typography to a page. You will find those techniques and others in the other pages of the site.

If you’re interested here are links to the final HTML and CSS files after these steps (images not included):

psd2html_withContent.html

style.css

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>