Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial

Last week we published a tutorial for designing a basic corporate website layout in Photoshop, and in this tutorial we will walk through the process of coding that design in HTML and CSS. Here is a look at the design that we will be coding (click the image to see it in full-size).

PSD to HTML Tutorial

In order to work though this tutorial you will need the PSD file from the first tutorial which can be downloaded here. I’d also recommend saving a backup copy of the PSD in case something that we do messes up the file that you are working with.

Step 1: The Files and Folders

The sample site that we will be coding will be contained inside a folder called “consulting” (of course, you can call the folder whatever you like). That folder will contain index.html and style.css. Also, the “consulting” folder will include an “images” folder where we will store all of the images that will be used to create the page. Go ahead and create those blank files and folders now.

Step 2: The Images

Before we get started with the HTML and CSS coding, we will first prepare all of the images that will be used in the design, including those that will be used as background images with CSS.

The design contains 10 images, so let’s get started with the one that will be used for the body background. Our design includes a narrow dark stripe with a thin border at the top of the page, followed by the header, a green horizontal band, and then the light gray background of the page. When we code the site we’re going to use the light gray as the body background color, and we’ll use an image to set the stripes and horizontal bands.

Open Photoshop and set a horizontal guide (View – New Guide) at 321 pixels. This will be immediately below the border between the green horizontal band and the gray background color. We want everything above the gray, include the border to be in our background image. Then set vertical guides at 1300 pixels and 1400 pixels. Because the gray header includes noise, we want to make this image wide enough that it looks smooth when it repeats horizontally. Use the rectangular marquee tool to select the area between the guides.

PSD to HTML Tutorial

With that area selected, go to Edit – Copy Merged. Then create a new file (File – New) that is 100 pixels wide and 321 pixels high. In the new file, go to Edit – Paste to paste in what you have copied.

PSD to HTML Tutorial

Save this file in the images folder as bg.jpg.

Next, we’ll work on the logo. Set vertical guides at 227 pixels and 440 pixels. Set horizontal guides at 11 pixels and 130 pixels.

PSD to HTML Tutorial

In the layers palette, deactivate all of the layers in the header folder except the two text layers that make up the logo. Also deactivate the background layer in the background folder.

PSD to HTML Tutorial

Then you should have something that looks like this.

PSD to HTML Tutorial

Back in the layers palette, select both of the text layers of the logo (hold ctrl + click to select both), go to Layer – Merge Layers and both of the text layers will be combined. Now, select the crop tool and use the guides to crop just the area of the logo. It should be 213 pixels wide and 113 pixels high.

PSD to HTML Tutorial

Save this file in the images folder as logo.png.

After that file is saved, undo the crop so that the full PSD is open again. If for some reason you have trouble with the undo, you can open up your backup copy.

Next, we’ll work on the header background image. Reactive the layers of the header except those that are use for the navigation menu. Now we want to deactivate the layer(s) that includes the logo, and you should have something that looks like this.

PSD to HTML Tutorial

Set a horizontal guide at 170 pixels. Use the rectangular marquee tool to select everything above this guide, the full width of the canvas.

PSD to HTML Tutorial

With that area selected, go to Edit – Copy Merged. The open a new file that is 1400 pixels wide by 170 pixels high and paste in the selection.

PSD to HTML Tutorial

Save this in the images folder as header-bg.jpg

Next, we’ll work on the gradient background image for our teaser section. Set horizontal guides at 221 pixels and 309 pixels. Set vertical guides at 232 pixels and 233 pixels. Increase the view to about 700%. Use the rectangular marquee tool to select the area between the guides and go to Edit – Copy Merged.

PSD to HTML Tutorial

Create a new file that is 1 pixel wide and 88 pixels high. Go to Edit – Paste to paste in the copied selection.

PSD to HTML Tutorial

Save this in the images folder as teaser-bg.jpg

Next, we’ll do the same thing for the gradient background of the featured area, which is just below the teaser. Set horizontal guides at 321 pixels and 553 pixels. You can still use the vertical guides at 232 pixels and 233 pixels. Use the rectangular marquee tool to select the area between the guides and go to Edit – Copy Merged. Create a new file that is 1 pixel wide and 232 pixels high and paste in what you copied.

PSD to HTML Tutorial

Save this in the images folder as featured-bg.jpg

Next, we’ll work on the “Get in Touch” button from the teaser area. In the PSD file, find the layer with the rounded rectangle shape that makes up the button and the layer of text that sites on top of it (they are in the “Featured Area” folder of the PSD). In the layers palette, click on the shape layer and then hold CTRL and click on the text layer that says “GET IN TOUCH”.

PSD to HTML Tutorial

With both layers highlighted, go to Layers – Merge Layers. With the merged layer highlighted in the layers palette, go to Select – All, and then Edit – Copy. Create a new file that is 262 pixels wide and 52 pixels high, with a transparent background. Then paste in the button that you copied.

PSD to HTML Tutorial

Save this in the images folder as get-in-touch-button.png.

Next, we’ll work on the “services” button from the featured area. You’ll want to follow the same process that we just did for the “get in touch” button. Find the shape layer and the text layer in the layers palette that make up the button, merge the two layers, copy the merged layer to your clipboard, create a new file that is 130 pixels wide and 35 pixels high, with a transparent background. Then paste in the button.

PSD to HTML Tutorial

Save it in the images folder as services-button.png

Next, repeat this process for “testimonials” button. It is the same height and width as the “services” button.

PSD to HTML Tutorial

Save it in the images folder as testimonials-button.png.

Next, we’ll do the chart icon. Use the layers palette to find the layer with the chart icon and click on that layer. Go to Select – All and then Edit – Copy. Create a new file that is 178 pixels wide and 200 pixels high, with a transparent background. Go to Edit – Paste to paste in the icon that has been copied.

PSD to HTML Tutorial

Save it in the images folder as chart-icon.png.

Now we’re down to our last image, the news icon. Find the news icon layer (it’s in the “Sidebar” folder) and click on it in the layers palette. Go to Select – All and then Edit – Copy. Then create a new file that is 30 pixels wide and 26 pixels high, with a transparent background. Go to Edit – Paste to paste the icon in the new file.

PSD to HTML Tutorial

Save it in the images folder as news-icon.png

Step 3: The HTML

Now that we have all of our images ready we can go ahead and start coding the page. Here is a diagram that shows the basic sections of the page as they will be coded.

PSD to HTML Tutorial

Open the index.html file. I’m going to paste the full HTML code for the page here, and then as we work on specific sections of the design with CSS I’ll explain some things about the code.

[cc lang=”html”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque non enim in lectus rhoncus ultricies mauris sodales fermentum.

Get in Touch

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit

Pellentesque non enim in lectus rhoncus ultricies. Mauris sodales fermentum vulputate. Sed ut convallis magna. Aliquam ullamcorper ornare sem sit amet pharetra. Nunc vitae ante nulla, in consequat felis. Nam eget nisl enim, quis dapibus sapien. Ut semper magna in dui feugiat accumsan. Nunc eget arcu lorem. Curabitur ultrices, odio a mollis aliquam, tellus nunc bibendum quam, eget molestie justo ipsum vitae justo. In et varius sem.

Sed pharetra varius laoreet. Mauris scelerisque diam ut nisl volutpat consectetur. Fusce iaculis rhoncus accumsan. Vivamus semper nisl non libero iaculis quis vehicula lorem porta. Praesent lobortis volutpat sapien, a facilisis lorem consectetur et. Etiam et metus nec augue convallis lacinia. Morbi sagittis lorem non diam feugiat faucibus. In tempor tincidunt neque, sed congue ligula vulputate a. Integer sagittis, lectus ac consectetur egestas, sem eros rutrum sem, at pharetra purus nulla sed ligula. Sed bibendum feugiat suscipit. Pellentesque at mi magna, eu convallis mi.

[/cc]

Here is a view of our unstyled page.

PSD to HTML Tutorial

Step 4: The CSS

Ok, we’ll start with a CSS reset and some basic styling.

[cc lang=”css”]
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
body {
background: #dde0dd url(images/bg.jpg) repeat-x top;
font: normal 14px/24px Arial, Helvetica, sans-serif;
color: #171817;
padding-bottom: 20px;
}
a {
color: #112002;
}
a:hover {
color: #569814;
}
p {
margin: 20px 0;
}[/cc]

On the body tag we are applying the background image from the PSD file and we’re setting it at the top of the page and to repeat horizontally (along the X axis). This image will repeat so that on widescreen monitors the background will still be in place.

We’re also setting some basics like link styling and paragraph styling. The PSD file did not include anything for the hover state of links, but we’ll use CSS to give links a lighter shade of green on hover.

Of course, with just these styles our page isn’t much to look at, but here it is.

PSD to HTML Tutorial

Now let’s take care of some of the header styling.

[cc lang=”css”]
#header {
width: 100%;
height: 170px;
}
#headerInner {
width: 960px;
height: 130px;
margin: 0 auto;
}
h1 img {
margin: 11px 0 0 5px;
}[/cc]

We are using a header with a width of 100%, and the reason for this is that our header image in the PSD file has a radial gradient applied behind the logo, and it extends beyond our width of 960 pixels that contains the content of the page. So then we are using CSS to set the background image of the header, and we’re placing it at the top and center with no repeating.

Inside the header we have the headerInner div, which will be centered using a margin of “auto” for the left and right. Our logo is inside the h1 tag, so we’re setting the h1 image to have a top margin of 11 pixels, which clears the dark gray bar at the top of the page.

Next, we’re working with the CSS for the navigation menu. We’re placing the unordered list inside a div with an id of “nav” and that div is 960 pixels wide and centered to keep it lined up with our headerInner div.

[cc lang=”css”]
#nav {
width: 960px;
height: 40px;
margin: 0 auto;
}
#nav ul {
width: 960px;
height: 40px;
list-style: none;
}
#nav li {
height: 40px;
float: left;
}
#nav li a {
width: 190px;
height: 39px;
line-height: 39px;
background: #959695;
color: #171817;
border-top: solid 1px #787a78;
border-right: solid 1px #bdbebd;
border-left: solid 1px #787a78;
display: block;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
}
#nav li a.active {
height: 40px;
background: #356406;
color: #fff;
border: solid 1px #224003;
border-bottom: none;
}[/cc]

We’re using list-style-none on the unordered list to remove bullets, and each list item is floated left so they will line up horizontally rather than vertically. The non-active tabs are given a gray background color and border styling, and the active tabbed is styled separately through the class “active”. We’ve increased the height of this tab from 39 pixels to 40 pixels so it will overlap and cover the green bottom border, giving it the appearance of a tab that flows from the green horizontal band.

Here’s how it will look now.

PSD to HTML Tutorial

The next thing we’re going to do is style the wrapper. The wrapper div contains every other part of content on the page that we have not styled already, except for the footer.

[cc lang=”css”]
#wrapper {
width: 960px;
background: #fff;
border: solid 1px #cccfcc;
margin: 39px auto 0;
}[/cc]

The wrapper has a width of 960 pixels and we’re using the auto margin on the left and right to center it.

Here’s how it looks after that small change.

PSD to HTML Tutorial

Now we’ll work on the teaser section that includes some text and the “get in touch” button.

[cc lang=”css”]
#teaser {
width: 900px;
height: 68px;
background: url(images/teaser-bg.jpg) repeat-x top;
margin: 10px;
padding: 10px 20px;
border: solid 1px #646464;
}
#teaser p {
width: 635px;
float: left;
font-size: 16px;
margin: 10px 0 0 0;
display: inline;
}
#teaser img {
float: right;
margin-top: 8px;
}
.largeText {
font-size: 20px;
}[/cc]

We’re giving this div a width of 900 pixels with 20 pixels of padding on the sides and a 10 pixel margin. The margin creates the whitespace inside of the wrapper div. We’re also giving the teaser div a background image that will give the section the gradient background from our design.

The text of this section is inside of paragraph tags, so we’ll give the paragraph a width of 635 pixels and float it to the left. There is a span with a class of “largeText” and this is being styled to be 20 pixels instead of 16 pixels. The button is floated to the right.

Here is a preview.

PSD to HTML Tutorial

Below the teaser area is the “featured” div, which we will style next.

[cc lang=”css”]
#featured {
width: 900px;
height: 212px;
background: #3c3934 url(images/featured-bg.jpg) repeat-x top;
margin: 10px;
padding: 10px 20px;
border: solid 1px #312f2b;
}
h2 {
width: 670px;
font-size: 30px;
font-weight: normal;
color: #f8fcf8;
margin: 10px 0;
}
#featured p {
width: 670px;
float: left;
font-size: 16px;
line-height: 24px;
color: #cfd1cf;
margin: 0;
}
.featured-button {
margin: 30px 45px 0 0;
}
.featured-icon {
float: right;
margin: 0 36px 0 0;
display: inline;
}[/cc]

Like the teaser div, the featured div is also given the same with, padding, and margin. We’re also using CSS to give it the linear gradient background image that repeats horizontally.

We’re then styling the h2, which is contained in the featured div, and the paragraph of text. We’re giving it a light color to be readable on the background. As with the teaser area, we are giving the paragraph a width and floating it to the left. The icon is then floated to the right. We’re giving the buttons a top and right margin to space them properly.

At this point our page looks like this.

PSD to HTML Tutorial

The next area to tackle is the main content.

[cc lang=”css”]
#mainContent {
width: 580px;
float: left;
display: inline;
margin: 30px 30px;
}
h3 {
font-size: 18px;
font-weight: normal;
color: #112002;
}[/cc]

Here we are giving the mainContent div a width of 580 pixels and floating it to the left. We’re also setting the necessary margins, and in a minute we will float the sidebar to the right. Here we are also styling the h3 tage to have larger text and a dark green color.

Here is a look.

PSD to HTML Tutorial

Now on to the sidebar.

[cc lang=”css”]
#sidebar {
width: 290px;
float: right;
display: inline;
margin: 30px 30px 30px 0;
}
h4 {
height: 26px;
line-height: 26px;
font-size: 18px;
font-weight: normal;
color: #112002;
padding-left: 40px;
background: url(images/news-icon.png) no-repeat left center;
}
h5 {
font-size: 14px;
font-weight: normal;
color: #112002;
margin: 15px 0 0 0;
}
h5 a {
text-decoration: none;
}
.small-text {
font-size: 12px;
color: #43433e;
margin: -5px 0 0 0;
}[/cc]

We’re giving the sidebar a width of 290 pixels, setting the margins, and floating it to the right. We’ll also style the h4 tag to match the h3 tag, except we will be using CSS to set the news icon as a background image, and then applying left padding to the h4 so that the text sits next to the icon.

We’re also styling the h5 tags, which are the news headlines, and using the small-text class on the paragraphs that contain the date the news was published.

And it now looks like this.

PSD to HTML Tutorial

The last thing we have to style is the footer.

[cc lang=”css”]
.clear {
clear: both;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 20px 0;
}
#footer ul {
list-style-type: none;
}
#footer li {
float: left;
}
#footer li a {
margin-left: 30px;
}[/cc]

We’ll start by adding the styling to the clear div so that the white background color of the wrapper stretches below the main content and the sidebar.

Then we will give the footer a width of 960 pixels and use the auto margin to the left and right to center it. We’ll give the unordered list in the footer (navigation) a list-style-type of “none” to get rid of bullets, and we’ll float the list items to the left to line them up horizontally.

And now we have the finished product.

PSD to HTML Tutorial

The PNG Fix:

One last thing we’re going to do is add a PNG fix since we have used some transparent PNG files. This will help IE6 to handle the transparency correctly. We’re going to use the Unit PNG Fix from Unit Interactive. Download the zip file from their site and add the following code to the header:

[cc lang=”html”]
[/cc]

Save the unitpngfix.js file from the download to your site’s folder (the one we referred to as “consulting” at the beginning of the tutorial. And save the clear.gif file to the images folder. That’s it, and now the PNGs should be displayed properly in IE6.

If you’re interested, the files for this tutorial can be downloaded in a zip file. It contains the index.htm, style.css, and unitpngfix.js files, in addition to the images folder with all of the PNG, JPG, and GIF files. To try to make it easy to follow, the style sheet is organized in the order that it was presented in this tutorial. If you are actually going to use this for any real-world purpose you’ll probably want to re-organize the style sheet.

0 shares
Stephen Snell is the owner and editor of Vandelay Design, a popular design blog.
  1. February 9, 2010

    Now this is what i call a wonderful tutorial πŸ™‚ πŸ™‚
    Hey Steven πŸ™‚ πŸ™‚ You are great πŸ™‚ πŸ™‚
    Thanks for such a nice tutorial πŸ™‚ πŸ™‚
    I have tweeted it πŸ™‚ πŸ™‚ πŸ™‚

  2. February 9, 2010

    Sunil,
    Good, I’m glad it was helpful.

  3. February 9, 2010

    Great article. I liked it very much. Thanks for sharing your knowledge.

  4. February 9, 2010

    wow, well explained, thanks for sharing good tutorial πŸ™‚

  5. February 9, 2010

    Is there any reason you chose not to use slices for the images? Exporting each image to a new PSD seems silly. Using the slice tool lets you create your images in the same PSD.

  6. February 9, 2010

    Powlie,
    No good reason I guess. That’s just how I’m used to doing it, but you’re right, for a tutorial I shouldn’t have done it that way. I’ll keep that in mind for future tutorials.

  7. February 9, 2010

    This is one of my first lessons in PSD to HTML Conversion and i am lucky enough to get such a good one like this.

    It had all the elements of basics, advanced and such detailed description

  8. February 9, 2010

    Simple way to reset basic styling:

    *{margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    }

  9. February 9, 2010

    Maybe you could do step two of this but with some slicing? If you’d like a few tips I could provide some. I consider myself a slice master πŸ™‚ There are even a few bits here where no images should be needed πŸ™‚

  10. February 9, 2010

    I read alot about PSD to HTML but this artile is the best to understand easily.

    Thanks Steven

  11. February 9, 2010

    Nice tutorial. That’s a png fix I haven’t tried before. Will see how it goes!

  12. February 10, 2010

    Cool & Awesome for beginners
    But need some CSS simplifications

  13. February 10, 2010

    I was loving it from step 1 up to step 2 but when you reach step 3, you miss me. You did not tell me what you where using to write does codes and all that things. If you can tell me how to go about it i will be happy. That you.

    NOTE(Am new in this website coding) but am now leaning how to write HTML from this website. http://www.w3schools.com

    In all, thank you every much for what you have posted. Keep doing things like this for people like me. Thank you.

  14. February 10, 2010

    Wow and nice!. this is the best tutorial for this job.
    Thanks Steven.

  15. February 10, 2010

    pakaworld,
    You can used any code editor for the coding. Here are a few choices:

    http://notepad-plus.sourceforge.net/uk/site.htm
    http://www.panic.com/coda/
    http://www.adobe.com/products/dreamweaver/

  16. February 10, 2010

    Good article, very easy to understand how it works for beginners.
    I would recommand Adobe Creative Suite for psd2html, with Photoshop and Dreamweaver this is simply the best.

  17. February 10, 2010

    Great article. It’s always nice to see a more entry level tutorial on this that walks you through the basics of slicing and then coding the html. Wish this had been around when I got started. THX!

  18. Bhausaheb Zaware from India
    February 12, 2010

    it is usefull for how to write the css and html code.

  19. February 13, 2010

    Sorry to say so – but I hated it! The reason is that it plays right into the hands of those people who don’t understand that a website isn’t *done* when you have uploaded the images and the HTML. When creating any website, particularly a corporate one, thinking about how to update it has to be part of the creation process from the very beginning. With this approach, how is the company going to add content? How will they upload a new case study or even a press release? Any kind of website design has to take the technical capabilities of the people into account who will maintain the website. In most cases that means you will needs some for of backend which will influence you design. Suggesting that you can just take photoshop and have a working website is – in my opinion – the wrong message.

  20. February 14, 2010

    Timo,
    I agree with you that all of those things are important issues, but they are beyond the scope of this post. The only purpose of this post was to demonstrate the PSD to HTML part of the design process. Admittedly, it’s not the whole process, just a part of it. Even if you are going to integrate a content management system to allow the client to update the site, you’ll still probably have to convert it to HTML before integrating the CMS.

  21. February 17, 2010

    Excellent tutorial! Thanks a lot!

  22. March 2, 2010

    Nice write up, Thanks for the great tutorial!

  23. Khuzema
    May 12, 2010

    Thanks for the post this is excellent as I am building a site on my own

  24. ruchika
    May 29, 2010

    thanks it’s awsome

  25. May 29, 2010

    What a beautiful tutorial – complete with all of the steps! This was absolutely wonderful. Thank you for sharing.

  26. August 14, 2010

    thanks it’s awsome!

  27. September 9, 2010

    I love this tutorial. Thanks

  28. November 8, 2010

    Thanks for the post this is excellent as I am building a site on my own

  29. Atip2k9
    January 2, 2011

    best tut so far

  30. January 13, 2011

    Sorry but whole page isn’t centered in IE, this index page is well centered on firefox but not on IE or i forgot something?

  31. February 6, 2011

    Thanks a lot for this tutorial. Very very good πŸ™‚

  32. March 17, 2011

    We read your post tutorial for designing a basic corporate website layout in Photoshop (posted a comment). It was very useful.

    Thanks for the additional information.

  33. Douglas
    May 1, 2011

    I love this tutorial. I never sow something so easy like that. But you missing one little thing. (The link between html and CSS). I did step by step but when goes to CSS is not work. So, took some time to fig what is missing and there go: On top of index.html before needs to include:

    01
    02
    03
    04
    05 Professional Consulting Services by ABC Company
    06
    07
    08
    09
    10
    11
    <div ……
    ………..

    On line 6 is the link.
    On line 7, 8 and 9 is in comment. To do the unitpngfix.js has to uncomment.
    Thanks for this tutorial. I would like to ask the same tutorial but in Dreamwever next time.
    Doug – MD

  34. June 7, 2011

    I think that the tutorial is very easy, thank you man πŸ˜‰

  35. salberto
    June 8, 2011

    I follow the tut to the end and my result don^t match ..them I download the .zip and I realize than the CSS and HTML code is not the same than the tutorial posted here….

    I LIKE TO KNOW WHYYYYYYYY !!!!!!!!!!….ALMOST EXPLOTE MY HEAD !!!

    thanks

  36. August 2, 2011

    Loved the tutorial!
    however you have to mention that the following were left out from your code:
    – header background image
    – teaser p
    – teaser image not positioned correctly
    – one has to add the clear div just before the end of the closing tag of the wrapper div.

    These are good errors to keep the reader awake.

    Thanks!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

100+ Resources for WordPress Theme Developers