Code a Corporate Website from a Photoshop Design: PSD to

HTML Tutorial
by Steven Snell
on February 9, 2010
in Tutorials

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

In order to work though this tutorial you will need the PSD file from the first tutorial which can be
downloaded here. Id 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 lets 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 were going to use the light gray as the body background color, and well 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.

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.
Save this file in the images folder as bg.jpg.
Next, well work on the logo. Set vertical guides at 227 pixels and 440 pixels. Set horizontal guides at
11 pixels and 130 pixels.

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.
Then you should have something that looks like this.

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.

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, well 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.
Set a horizontal guide at 170 pixels. Use the rectangular marquee tool to select everything above this
guide, the full width of the canvas.

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.

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

Next, well 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.
Create a new file that is 1 pixel wide and 88 pixels high. Go to Edit Paste to paste in the copied
selection.

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

Next, well 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.
Save this in the images folder as featured-bg.jpg
Next, well 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.

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.

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

Next, well work on the services button from the featured area. Youll 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.

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.

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

Next, well 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.

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

Now were down to our last image, the news icon. Find the news icon layer (its 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.

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.
Open the index.html file. Im going to paste the full HTML code for the page here, and then as we
work on specific sections of the design with CSS Ill explain some things about the code.
[cc lang="html"]

Home
Services
About Us
Case Studies
Contact Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque non enim in lectus rhoncus ultricies mauris sodales fermentum.
Sed Pharetra Varius Laoreet Mauris Scelerisque
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.

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.

Company News

Recent Company News Item Title

January 5, 2010

Recent Company News Item Title

December 27, 2009
Recent Company News Item Title
December 17, 2009

Recent Company News Item Title

December 4, 2009

Recent Company News Item Title

November 21, 2009
Home
Services
About Us
Case Studies
Contact Us
Testimonials
[/cc]
Here is a view of our unstyled page.
Step 4: The CSS
Ok, well 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 were 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.
Were also setting some basics like link styling and paragraph styling. The PSD file did not include
anything for the hover state of links, but well use CSS to give links a lighter shade of green on hover.
Of course, with just these styles our page isnt much to look at, but here it is.
Now lets 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 were 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 were 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, were working with the CSS for the navigation menu. Were 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]
Were 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. Weve
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.
Heres how it will look now.

The next thing were 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 were using the auto margin on the left and right to center it.
Heres how it looks after that small change.

Now well 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]
Were 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. Were 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 well 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.
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. Were also using
CSS to give it the linear gradient background image that repeats horizontally.
Were then styling the h2, which is contained in the featured div, and the paragraph of text. Were
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. Were giving the
buttons a top and right margin to space them properly.
At this point our page looks like this.
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. Were 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.

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]
Were giving the sidebar a width of 290 pixels, setting the margins, and floating it to the right. Well
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.
Were 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.

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]
Well 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. Well give the unordered list in the footer (navigation) a list-style-type of none to get rid of bullets,
and well float the list items to the left to line them up horizontally.
And now we have the finished product.

The PNG Fix:

One last thing were 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. Were 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 sites folder (the one we referred to as
consulting at the beginning of the tutorial. And save the clear.gif file to the images folder. Thats it,
and now the PNGs should be displayed properly in IE6.
If youre 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 youll probably want to re-
organize the style sheet.