Today I will be walking you through the process of turning our Freelance Home Page PSD into a working HTML / CSS template.

The Live Version

You can check out the Live Version of the template by clicking here. The template has been tested in the following browsers without any problems; however, due to our use of CSS3 the website will render a bit differently in each web browser that you choose.

• Firefox 2.0, 3.0 and 3.5
• Internet Explorer 7 and 8
• Chrome 3.0
• Safari 3.0 and 4.0

Preparing Your Files

You will need to create a new folder on your desktop titled “Coming Soon”. Please create the following files: index.html, style.css, and a folder titled images. It should be set up like below:

Begin Slicing Your Images

Before we begin working on coding our website we need to slice our images. Since we can use CSS for most of our website we will only be slicing a few images to use in our website.

Start out slicing your logo image. Make a selection like below:

Hide your background layer and save it as logo.PNG

For our navigation we only need to slice a portion of the hover state, as the rest of it can be accomplished with CSS. Make a selection like below:

Now save your document as nav_hover.PNG

Your Search Bar is a little bit more difficult to do because there is an extra step added in there. You need to select your search box layer, right click, and choose “Convert to Smart Object”; like below:

Now hide your Search My Site Text Layer and your Search Icon. Make a selection like below:

Now save that as search_bg.png

Like I said this part is complicated because now we have to slice our input layers background. Unhide your Search Icon Layer. Now make a selection like below:

Now save is as search.png

Now leave your layers the way there were and make a selection like below:

Now save that selection as search_submit_bg.PNG

Time to start working on our Center Content. We will only need to slice two images for our center content; our image collage and our spacer.

For our image collage make a selection like below:

Now save that as center_images.png

For your spacers make a selection like below:

Now save that as center_spacers.PNG

Now we will be working on slicing our three icons. Make three selections like below:

We will now be slicing our white content background. Make a selection like below:

Now save this as white_box_overlay.png

For our last two images we will be slicing we will be working in the newsletter group. We will be slicing out our newlsetter input area and our submit button.

To slice your input layer you will need to right click your document again and choose “Convert to Smart Object” again. Now make a selection like below:

Save this as newsletter_input.png

Now make a selection like below for your submit button:

Save your image as newsletter_submit.png.

And we are done, that’s all we need to slice for our document. Time to start coding!

Set Up Main Document

To set up our main document we need to get our body and .container CSS setup as well as the beginning to our HTML file. The container class will have the width and height of our page. You can get this measurement from photoshop, but I always add a little bit more because things never add up exactly. You could also set the height to auto for right now, but your document will not be auto centered by our left and right auto margins until you set a definite height.

And our HTML:

Set Up The Logo

Setting up our logo is really simple. We get all our CSS measurements from our logo.png file and then we need to add a few other tidbits to make it work. Of course you can take out the Text Indent attribute if you don’t want to put any text in your logo and just want to stick to the title.

The CSS:

The HTML:

The Upper Navigation

Our upper navigation is going to be where our CSS3 comes into play. In our photoshop document we had rounded corners for our navigation, and we can accomplish this with a simple snidbit of CSS. This will render without rounded corners in documents that don’t support CSS3 and may render differently between Safari, Firefox, Opera, and IE.

We will be using the ul and li attributes in CSS to create our navigation. Here is our full navigation CSS:

Now our html is going to be very simple. We will just be setting up our ul class and then the lines. Here it is:

Set Up the Search Bar

Now we get a little bit complicated. We need to set up our overall search bar to be a bit taller and wider than our actual inputs so there are no discrepancies in our design. This will be accomplish with a simple bit of CSS, but we had to use a lot of trial and error to get it just right with the input and submit fields. Here is our CSS:

Now our CSS is the full CSS styling for what we used. There are several areas, like the border style, that you could shorten to make less CSS code and faster load times while you are working on your own website.

The HTML for our inputs are very easy. We are not going to have a working Search Bar in this tutorial, but you can use a free one from Google or create on in PHP yourself and still style it simply with the CSS above and some slight additions.

Here is our HTML:

STOP! Lets see what you have so far!

I just wanted to stop here to make sure that your CSS and HTML is matching up so far. This is what you should have, so far, for both your CSS and your HTML:

Ok, now that everything is straight we can move on again

Setting Up Your Center Content

Time to start working on setting up our main content. We will accomplish most of the main content through CSS with only two images being placed into the document (via the CSS). Our CSS for all parts should look like this:

And the HTML will be even easier. We have our container div, our two empty image divs, and then our div to display our text. Now we have used the font Qlassik but have found that it does not render well with the web so you may want to change it.

Setting Up Our Main Business Content

Now we are going to start working on our three boxes, with our three icons. I see these boxes being used to draw attention to the three most important things that you want to draw attention to on your website (ie. pricing, cms/wordpress, development). The CSS for our main content is simple CSS that will bring everything within a container div.

The CSS:

And the HTML:

The Blog Post and Contact Box

Our “White Box” as we call it is an area on our home page where we can show off our Latest Blog Post so that people can see and drive more traffic to the website and blog. In this tutorial we will not be creating the PHP to show you how to accomplish this and will be merely placing static content in the container.

We can accomplish the styling we need on this with just one image and the rest will be CSS and HTML. Here is our CSS:

Time For Our Footer

Now our footer will be set up in two different areas, the Bottom Navigation and the Newsletter.

Our Bottom Navigation will be using the ul and li attributes in CSS as well and will be full CSS styling, no images. To get the proper color we used our color picker tool in Photoshop to grab the right Hex Code for our bottom navigation. Here is our bottom nav CSS:

And our HTML:

Now our Newsletter is a matter of an overall container, an input container, two simple inputs, and a right aligned submit button. All will be accomplished with CSS and background images. Again we will not be actually setting up the PHP for the newsletter form, but you can find a nice mail form on our Coming Soon PSD to HTML Tutorial.

The CSS:

Now in our final HTML to finish out the newsletter we will also need to close out our main container div. Here is our HTML:

The Copyright

The copyright for our website will actually be placed in its own div, outside our main container div. You will see most of the same styles from our container div used in our copyright CSS. Overall though the copyright is one simple CSS class and one simple line of HTML coding.

The CSS:

The HTML:

Conclusion

As you can see you can use CSS to create a good majority of most sites you design in Photoshop. Having to rely less on images and more on CSS will greatly improve your page load speeds. Keep the HTML short and to the point, not adding in meaningless tidbits of HTML.