Freelance Home Page Conversion

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@charset "utf-8";
/* CSS Document */
body {
background-image: url(images/bg.png);
background-repeat: repeat;
}
.container {
height: 900px;
width: 1100px;
margin-right: auto;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

And our HTML:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Freelance Home Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">

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:

1
2
3
4
5
6
7
8
9
10
#logo {
background-image: url(images/logo.png);
float: left;
height: 53px;
width: 252px;
background-repeat: no-repeat;
text-indent: -999in;
margin-left: 20px;
margin-top: 15px;
}

The HTML:

1
<a href="index.html" id="logo" title="My Freelance Home Page Logo :: Go Back Home">My Freelance Home Page</a>

The Upper Navigation

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#navigation {
float: right;
height: auto;
width: 400px;
}
#navigation ul {
list-style-type: none;
display: block;
}
#navigation li {
list-style-type: none;
display: inline;
}
#navigation li a {
color: #FFF;
text-decoration: none;
font-family: "Lucida Sans Unicode";
font-size: 16px;
padding: 3px;
margin-right: 25px;
}
#navigation li a:hover {
background-image: url(images/nav_hover.png);
background-repeat: repeat;
height: auto;
width: auto;
-moz-border-radius: 5px;
border-radius: 5px;
}

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:

1
2
3
4
5
6
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Hire Me</a></li>
</ul>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#searchbar_overall {
clear: both;
float: right;
height: 20px;
width: 210px;
background-image: url(images/search_bg.PNG);
background-repeat: repeat-x;
margin-right: 40px;
}
.searchbar {
background-image: url(images/search.PNG);
background-repeat: repeat;
float: left;
height: 18px;
width: 169px;
text-decoration: none;
padding-left: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF;
}
.searchbar_submit {
background-image: url(images/search_submit_bg.PNG);
background-repeat: no-repeat;
height: 18px;
width: 32px;
float: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-indent: -999in;
}

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:

1
2
3
4
<div id="searchbar_overall">
<input name="searchbar" type="text" class="searchbar" id="input" value="TEST" size="30" maxlength="30" />
<input name="button" type="submit" class="searchbar_submit" id="button" value="Submit" />
</div>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
@charset "utf-8";
/* CSS Document */
body {
background-image: url(images/bg.png);
background-repeat: repeat;
}
.container {
height: 900px;
width: 1100px;
margin-right: auto;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#logo {
background-image: url(images/logo.png);
float: left;
height: 53px;
width: 252px;
background-repeat: no-repeat;
text-indent: -999in;
margin-left: 20px;
margin-top: 15px;
}
#navigation {
float: right;
height: auto;
width: 400px;
}
#navigation ul {
list-style-type: none;
display: block;
}
#navigation li {
list-style-type: none;
display: inline;
}
#navigation li a {
color: #FFF;
text-decoration: none;
font-family: "Lucida Sans Unicode";
font-size: 16px;
padding: 3px;
margin-right: 25px;
}
#navigation li a:hover {
background-image: url(images/nav_hover.png);
background-repeat: repeat;
height: auto;
width: auto;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar_overall {
clear: both;
float: right;
height: 20px;
width: 210px;
background-image: url(images/search_bg.PNG);
background-repeat: repeat-x;
margin-right: 40px;
}
.searchbar {
background-image: url(images/search.PNG);
background-repeat: repeat;
float: left;
height: 18px;
width: 169px;
text-decoration: none;
padding-left: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF;
}
.searchbar_submit {
background-image: url(images/search_submit_bg.PNG);
background-repeat: no-repeat;
height: 18px;
width: 32px;
float: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-indent: -999in;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Freelance Home Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container"><a href="index.html" id="logo" title="My Freelance Home Page Logo :: Go Back Home">My Freelance Home Page</a>
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Hire Me</a></li>
</ul>
<div id="searchbar_overall">
<input name="searchbar" type="text" class="searchbar" id="input" value="TEST" size="30" maxlength="30" />
<input name="button" type="submit" class="searchbar_submit" id="button" value="Submit" />
</div>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.center_content_container {
clear: both;
float: left;
height: 246px;
width: 1100px;
margin-top: 34px;
background-color: #CE8B32;
}
#content_images {
background-image: url(images/center_images.png);
background-repeat: no-repeat;
float: left;
height: 243px;
width: 349px;
margin-left: 50px;
}
#content_spacer {
margin-left: 95px;
background-image: url(images/center_spacers.png);
float: left;
height: 237px;
width: 9px;
margin-top: 3px;
}
#content_text {
float: left;
height: 220px;
width: 500px;
margin-left: 40px;
color: #FFF;
font-family: "Qlassik Bold";
font-size: 20px;
margin-top: 15px;
}
#content_text h1 {
padding: 0px;
font-size: 38px;
margin: 0px;
}

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.

1
2
3
4
5
6
7
8
9
<div class="center_content_container">
<div id="content_images"></div>
<div id="content_spacer"></div>
<div id="content_text">
<h1>Lorem ipsum dolor sit
amet just lectus.</h1>
<p>lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. </p>
</div>
</div>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.middle_content {
float: left;
height: 135px;
width: 1100px;
margin-top: 25px;
}
.three_boxes {
float: left;
height: 135px;
width: 270px;
margin-left: 40px;
font-family: "Qlassik Medium";
font-size: 11pt;
color: #FFF;
margin-right: 50px;
}
#mailbox_icon {
background-image: url(images/mailbox_icon.png);
background-repeat: no-repeat;
float: left;
height: 135px;
width: 60px;
margin-right: 15px;
}
#pencil_icon {
background-image: url(images/pencil_icon.png);
background-repeat: no-repeat;
float: left;
height: 135px;
width: 60px;
margin-right: 15px;
}
#gears_icon {
float: left;
height: 135px;
width: 77px;
background-image: url(images/gears_icon.png);
background-repeat: no-repeat;
margin-right: 15px;
}
.three_boxes h1 {
font-family: "Qlassik Medium";
font-size: 20px;
color: #FFF;
margin: 0px;
}

And the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="middle_content">
<div class="three_boxes">
<div id="mailbox_icon"></div>
<h1>Lorem Ipsum Dolir</h1>
<p>lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum.</p>
</div>
<div class="three_boxes"><div id="pencil_icon"></div>
<h1>Lorem Ipsum Dolir</h1>
<p>lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum.</p></div>
<div class="three_boxes"><div id="gears_icon"></div>
<h1>Lorem Ipsum Dolir</h1>
<p>lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum.</p></div>
</div>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
.white_box_overall {
float: left;
height: 185px;
width: 1100px;
background-image: url(images/white_box_overlay.png);
background-repeat: repeat-x;
margin-top: 35px;
}
.blog_post_overall {
float: left;
height: 165px;
width: 750px;
margin-top: 10px;
margin-left: 15px;
}
#blog_post_title {
font-family: Nyala;
font-size: 24px;
color: #000;
float: left;
height: auto;
width: auto;
}
#blog_post_date {
float: left;
height: auto;
width: auto;
font-family: Nyala;
font-size: 11px;
color: #CCC;
padding-top: 10px;
padding-left: 15px;
font-variant: small-caps;
}
.blog_thumb_post_overall {
clear: left;
float: left;
height: 130px;
width: 745px;
margin-top: 8px;
}
#blog_thumb {
float: left;
height: 120px;
width: 160px;
background-color: #000;
padding: 5px;
}
#blog_post{
float: left;
height: auto;
width: 560px;
margin-left: 15px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 13px;
color: #000;
font-variant: small-caps;
margin-top: 5px;
}
.contact_overall {
float: right;
height: 190px;
width: 260px;
}
#contact_header {
font-family: "Qlassik Bold";
font-size: 30px;
height: auto;
width: auto;
float: left;
}
#contact_subheader {
font-family: "Qlassik Medium";
font-variant: small-caps;
color: #CCC;
float: left;
height: auto;
width: auto;
margin-top: 15px;
margin-left: 20px;
}
.contact_phone_overall {
clear: left;
float: left;
height: 25px;
width: 200px;
margin-top: 15px;
margin-left: 20px;
font-family: Nyala;
font-size: 24px;
}
#contact_phone {
font-family: Nyala;
font-size: 24px;
color: #000;
float: left;
height: 24px;
width: 60px;
margin-right: 8px;
}
.contact_email_overall {
clear: left;
float: left;
height: 25px;
width: 240px;
margin-top: 15px;
margin-left: 10px;
font-family: Nyala;
font-size: 14px;
}
#contact_email_main {
float: left;
height: auto;
width: auto;
font-family: Nyala;
font-size: 24px;
margin-right: 5px;
}
#contact_email_text {
margin-top: 5px;
float: left;
width: auto;
}
.contact_address_overall {
clear: left;
float: left;
height: 50px;
width: 240px;
margin-top: 15px;
margin-left: 10px;
font-family: Nyala;
font-size: 14px;
text-align: center;
}
#contact_address {
font-size: 24px;
float: left;
height: auto;
width: auto;
margin-right: 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="white_box_overall">
<div class="blog_post_overall">
<div id="blog_post_title">Your Latest Blog Post Here</div>
<div id="blog_post_date">posted on oct 6, 2010 by me</div>
<div class="blog_thumb_post_overall">
<div id="blog_thumb"><img src="images/blog_post_thumb.PNG" width="160" height="120" alt="Latest Blog Thumb" /></div>
<div id="blog_post">lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. </div>
</div>
</div>
<div class="contact_overall">
<div id="contact_header">Contact</div>
<div id="contact_subheader">Get In Touch With Me
</div>
<div class="contact_phone_overall">
<div id="contact_phone">Phone:</div>
xxx-xxx-xxxx
</div>
<div class="contact_email_overall">
<div id="contact_email_main">Email:</div>
<div id="contact_email_text">[email protected]</div>
</div>
<div class="contact_address_overall">
<div id="contact_address">Address:</div>
Your Address Here<br />Your City, State and Zip
</div>
</div>
</div>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.bottom_navigation {
float: left;
height: 30px;
width: 400px;
padding: 0px;
margin-top: 45px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 35px;
}
.bottom_navigation ul{
}
.bottom_navigation li{
list-style-type: none;
display: inline;
color: #b47004;
font-family: "Qlassik Bold";
font-size: 20pt;
margin-right: 20px;
}
.bottom_navigation li a {
text-decoration: none;
color: #B47004;
}

And our HTML:

1
2
3
4
5
<ul class="bottom_navigation">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Hire Me</a></li></ul>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.newsletter_overall {
float: right;
height: 105px;
width: 270px;
font-family: "Qlassik Bold";
color: #FFF;
font-size: 20pt;
margin-top: 15px;
}
#newsletter_text {
float: left;
height: auto;
width: auto;
margin-bottom: 10px;
}
#newsletter_input_overall {
float: left;
height: 60px;
width: 180px;
clear: left;
}
#newsletter_input {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(images/newsletter_input.png);
background-repeat: no-repeat;
float: left;
height: 22px;
width: 178px;
margin-bottom: 10px;
}
#newsletter_two_input {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(images/newsletter_input.png);
background-repeat: no-repeat;
float: left;
height: 22px;
width: 178px;
margin-bottom: 10px;
}#newsletter_submit {
background-image: url(images/newsletter_submit.png);
background-repeat: no-repeat;
float: right;
height: 30px;
width: 68px;
margin-right: 20px;
margin-top: 15px;
text-indent: -999in;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

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:

1
2
3
4
5
6
7
8
9
<div class="newsletter_overall">
<div id="newsletter_text">Newsletter</div>
<div id="newsletter_input_overall">
<input type="text" name="textfield" id="newsletter_input" />
<input type="text" name="textfield" id="newsletter_two_input" />
</div>
<input type="submit" name="button2" id="newsletter_submit" value="Submit" />
</div>
</div>

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:

1
2
3
4
5
6
7
8
9
10
.copyright {
font-family: "Qlassik Bold";
font-size: 14px;
color: #FFF;
height: 20px;
width: 215px;
margin-right: auto;
margin-left: auto;
margin-top: -15px;
}

The HTML:

1
2
3
<div class="copyright">Copyright Aaron Nichols and HV-Designs</div>
</body>
</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.

 

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

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!

Your ads will be inserted here by

AdSense Now!.

Please go to the plugin admin page to paste your ad code.