글
By this time I’m sure, the superheroes don’t have particular superpowers. The crisis are still running and I certainly cannot save the world, dammit! But… I’ve coded the PSD Template makingSEO and in this post you can read some quick tips used in the psd-to-html conversion (in case you missed the first part, please read Design A Clean And Fresh Company Website In Photoshop).
In previous tutorials we have learned some techniques on how to convert a design mockup into a complete web-page using xhtml and css, so the following information will be only a quick review on code. If you want more suggestions on psd-to-html conversion you can take a look at these articles:
- SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme
- Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop
- DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial
Below there are the final result of the makingSEO psd-to-html conversion and the link to download the complete CSS Template. Don’t forget, the source files are released under the Creative Common License (CC 3.0 Attribution) also for commercial use.
Final Result, Css Template
Here you can see a preview image and a live demo. You can also download the zip archive with the complete CSS template.
Coding makingSEO
We can partition the layout in five sections: header, down-header, contents, sidebar and footer. Besides we can use two general div, main_container and container. The first to add the top-background and the second to keep in 960 px the segments (header, down header, contents and sidebar).
Now is time for the code. This section of the post will show the essential steps to code the psd template.
In the folder “makingseo” we put in “images” folder and the necessary
files: “index.html” and “style.css” and “reset.css” (generally I use
the Yahoo! YUI Reset CSS, but in this case we test the reset file included in Blueprint CSS Framework).
Below the complete “reset.css” file (you can optimize it for your needs).
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1.5;
}
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
Step 1 – Main Structure
The markup for the main structure (edit “index.html”).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>makingSEO - Improve Your Business | A free CSS Template | made in PV.M Garage</title>
<link href="reset.css" rel="stylesheet" type="text/css" /><!-- blueprint css reset -->
<link href="style.css" rel="stylesheet" type="text/css" /><!-- css style for makingSEO -->
</head>
<body>
<div id="main_container"><!-- for general background -->
<div class="container clearfix"><!-- to keep in 960 pixels the segments -->
<div id="header"><!-- here we'll add logo and menu -->
</div>
<div id="down_header"><!-- here we'll add slogan, screenshot and call-to action button -->
</div>
<div class="contents"><!-- here we'll add the info boxes -->
</div>
<div class="sidebar"><!-- here some side information -->
</div>
</div><!-- end container -->
<div id="footer"><!-- here the footer -->
</div>
</div><!-- end main_container -->
</body>
</html>
To reproduce background we use the following image.
Below the css rules.
@charset "utf-8";
/* CSS Document */
body {
background: #f5f5f5;
font-family: Verdana, Georgia, “Lucida Sans Unicode”, sans-serif;
font-size: 12px;
color: #666;
}
/* General */
:focus {
outline: 0;
}
a {
text-decoration: none;
}
ul {
list-style-type:none;
color: #fff;
}
/* Container */
#main_container {
background: url("images/bck.jpg") repeat-x top; /* General Background */
}
.container {
width: 960px; /* here the width for the segments */
margin: auto;
}
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
Step 2 – Header with Logo and Menu
Now we add logo and menu in the header. Below there are the images exported from psd.
Below the (x)html code for header.
<div id="header">
<div class="logo">
<h1><a href="#">makingSEO - Improve Your Business</a></h1>
</div>
<div class="menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Strategies</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
And now, the style.
/* Header */
#header {
height: 156px;
}
.logo {
float: left;
background: url("images/light_head.png") no-repeat top left;
height: 156px;
}
.logo h1 {
text-indent: -9999px;
margin-top: 40px;
}
.logo h1 a {
display: block;
background: url("images/logo.png") no-repeat top;
width: 398px;
height: 61px;
}
.menu ul {
float: right;
margin-top: 5px;
padding-bottom: 10px;
width: 377px;
text-align: center;
background: url("images/dashed_h.png") no-repeat bottom;
}
.menu ul li {
display: inline;
padding: 10px 10px 70px 10px;
background: url("images/dashed_v.png") no-repeat top right;
margin-left: -5px;
}
.menu ul li a {
color: #fff;
padding-bottom: 70px;
}
.menu ul li:hover {
background: url("images/menu_hov.png") repeat-x top right;
}
Step 3 – Slogan and Screenshot in Down-Header
In Down-Header segment we add a direct slogan, a screenshot of a
website that rocks with the help of makingSEO team and a call-to-action
button. Below the pictures used to complete this section of the
web-page.
Below you can see the html code for the down-header.
<div id="down_header">
<div class="d_h_left">
</div>
<div class="d_h_right">
<span class="button"><a href="#"></a></span>
</div>
</div>
The style for this segment.
/* Down Header */
#down_header {
height: 320px;
padding-top: 25px;
}
.d_h_left {
float: left;
width: 520px;
height: 308px;
margin-left: -14px;
background: url("images/screenshot.png") repeat-x top left;
}
.d_h_right {
float: right;
width: 450px;
height: 138px;
margin: 16px 0 0 4px;
background: url("images/slogan.png") no-repeat top left;
}
.button a {
display: block;
width: 324px;
height: 70px;
position: relative;
top: 145px;
left: 61px;
background: url("images/call-but.png") no-repeat 0px -70px;
}
.button a:hover {
background: url("images/call-but.png") no-repeat 0px 0px; /* CSS Sprites technique for the button*/
}
Step 4 – The Contents
The left side is the core of the web-page in which the visitors have
the opportunity to know more about the Company. We use some icones and
a soft dashed grid.
We write the html code…
<div class="contents">
<div class="post_cont">
<h1 class="top_left"><a href="#">We Study the Best Solutions to Improve Your Visibility</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo</p>
</div>
<div class="post_cont">
<h1 class="top_right"><a href="#">In One Month You Could Be in the First Page of Google</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<span class="button_post_g"><a href="#"></a></span>
</div>
<div class="post_cont">
<h1 class="down_left"><a href="#">Organize Your Business with our Experts</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<div class="post_cont">
<h1 class="down_right"><a href="#">We Study the Best Solutions to Improve Your Visibility</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<span class="button_post_o"><a href="#"></a></span>
</div>
</div>
… and the rules for the style of the contents.
/* Contents */
.contents {
float: left;
width: 690px;
}
.post_cont {
width: 310px;
float: left;
margin: 0 30px 30px 0;
background: url("images/dashed_v_g.png") no-repeat right;
height: 300px;
}
.post_cont h1 a {
padding-bottom: 0px;
font-size: 14px;
color: #424242;
display: block;
}
.post_cont h1 a:hover {
color: #d5943f;
}
.post_cont p {
margin-left: 10px;
padding: 15px 10px 30px 0;
background: url("images/dashed_h_g.png") no-repeat top right;
}
h1.top_left a {
background: url("images/ico_top_left.png") no-repeat left center;
padding: 20px 5px 20px 85px;
}
h1.top_right a {
background: url("images/ico_top_right.png") no-repeat left center;
padding: 20px 5px 20px 70px;
}
h1.down_left a {
background: url("images/ico_down_left.png") no-repeat left center;
padding: 20px 5px 20px 72px;
}
h1.down_right a {
background: url("images/ico_down_right.png") no-repeat left center;
padding: 20px 5px 20px 72px;
}
span.button_post_g a, span.button_post_o a {
display: block;
width: 256px;
height: 46px;
position: relative;
top: -10px;
left: 83px;
}
span.button_post_g a {
background: url("images/call-but-post.png") no-repeat right top;
}
span.button_post_o a {
background: url("images/call-but-post_o.png") no-repeat right top;
}
Step 5 – The Sidebar
Side information for our page. Below the (x)html code and the style.
<div class="sidebar">
<div class="sidecont">
<h2>Side Info</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="sidecont">
<h2>Blog Posts</h2>
<ul>
<li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
<li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
<li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
<li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
</ul>
</div>
<div class="sidecont">
<h2>Working on...</h2>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<a href="#"><img src="images/img_side.jpg" alt="" /></a>
</div>
</div>
We update the “style.css” files with this lines of code.
/* Sidebar */
.sidebar {
float: right;
margin-top: -50px;
width: 220px;
background: #fff;
border: 1px solid #dcdcdc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.sidecont {
margin: 18px 10px;
font-size: 11px;
}
.sidecont img {
margin-top: 10px;
border: 3px solid #bdbdbd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.sidecont h2 {
font-size: 18px;
}
.sidecont p, .sidecont ul li {
padding-top: 7px;
}
.sidecont ul li a {
display: block;
font-weight: bold;
color: #666;
}
.sidecont ul li a:hover {
color: #d5943f;
}
.side_meta_info {
color: #d5943f;
}
Step 6 – The Footer
This segment isn’t included in the main-container div, this for
adding the background in the right way. Take a look at the images used.
Finally the code for the footer and the credits.
<div id="footer">
<div class="foot_info">
<div class="foot_col_l_c">
<h2>Our Tweets <a href="#">/ Follow Us</a></h2>
<ul>
<li><a href="#"><strong>@virtuosoblogger</strong> 400+ Beautifully Designed Twitter Icons http://ow.ly/oBb6</a></li>
<li><a href="#"><strong>@bkmacdaddy</strong> Bit.ly lowers the bar on URL shortening - http://bit.ly/cMBAc</a></li>
<li><a href="#"><strong>@gaksdesigns</strong> Retro Design and Typography http://bit.ly/1TRunk</a></li>
</ul>
</div>
<div class="foot_col_l_c">
<h2>Work in progress</h2>
<ul class="foot_center">
<li class="foot_ico_1"><a href="#">Sed ut perspiciatis unde omnis iste natus error sit </a></li>
<li class="foot_ico_2"><a href="#">At enim ad minima veniam, quis nostrum</a></li>
<li class="foot_ico_3"><a href="#">At vero eos et accusamus et iusto odio dignissimos ducimus qui</a></li>
</ul>
</div>
<div class="foot_right">
<h2>Work in progress</h2>
<ul>
<li><a href="#"><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img4.jpg" alt="" /></a></li>
</ul>
</div>
</div>
<div id="credits">
<p><a href="#">makingSEO</a> is released under a <a href="#"><em>Creative Common License</em></a> also for Commercial Use. We hope you'll support <a href="#">PV.M Garage</a>, it is an awesome place for sharing!</p>
</div>
</div>
We update the CSS file with the following rules.
/* Footer */
#footer {
background: url("images/bck_foot.jpg") repeat-x top; /* general background for footer */
}
.foot_info {
margin: auto;
width: 960px; /* keep in 960 pixels the footer contents */
}
.foot_col_l_c {
width: 285px;
float: left;
margin: 20px 35px -30px 0px;
padding: 0px 10px 0px 10px;
height: 300px;
}
.foot_info h2 {
font-size: 20px;
color: #fff;
margin-bottom: 6px;
padding: 8px 0px;
background: url("images/dashed_f.png") no-repeat center bottom;
}
.foot_info h2 a {
color: #306e8f;
background: url("images/ico_foot.png") no-repeat top right;
padding: 10px 45px 10px 0;
}
.foot_info h2 a:hover {
color: #fff;
}
.foot_col_l_c ul li {
padding: 8px 0px;
background: url("images/dashed_f.png") no-repeat center bottom;
}
.foot_col_l_c ul li a {
color: #fff;
display: block;
}
.foot_col_l_c ul li a:hover {
color: #c3dd6c;
}
ul.foot_center li a:hover { /* change hover color */
color: #d5943f;
}
li.foot_ico_1 a {
padding-right: 50px;
margin-right: 11px;
background: url("images/ico_foot_1.png") no-repeat center right;
}
li.foot_ico_2 a {
padding-right: 50px;
margin-right: 8px;
background: url("images/ico_foot_2.png") no-repeat center right;
}
li.foot_ico_3 a {
padding-right: 50px;
margin-right: 12px;
background: url("images/ico_foot_3.png") no-repeat center right;
}
.foot_right {
width: 221px;
float: right;
margin-top: 20px;
}
.foot_right ul {
background: url("images/foot_img_bck.png") no-repeat top left;
margin-left: 5px;
}
.foot_right ul li {
display: inline;
}
.foot_right img {
border: 3px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 10px 20px 8px 0px;
}
#credits {
clear: both;
margin-bottom: 10px;
}
#credits p {
width: 600px;
text-align: center;
margin: auto;
}
#credits p a {
font-weight: bold;
color: #666;
width: 600px;
text-align: center;
margin: auto;
font-size: 11px;
}
#credits p a:hover {
border-bottom: 1px dotted #666;
}
Conclusions
Yes, this layout is released under the Creative Common License (CC 3.0 Attribution) also for commercial use and you can copy, edit, sell, eat, drink, re-publish it. Remeber it is only a basic xhtml and css template if you have some ideas on how to improve the layout, please share them through the comments (e.g. maybe a slideshow for the screenshit section could be a good solution, but can it save the worls?).
The template has been tested on IE8, Firefox 3.5, Opera and Safari. It have a valid XHTML code.
Thanks fo reading dear friends!
PSD to HTML Services Sponsored on PV.M Garage
I’m sure! You have the necessary skill to convert a PSD mockup in a wonderful website, but if you have many projects in progress you could consider a PSD to HTML Service.
Pixel Crayons
XHTML.pixelcrayons.com (a specialized division of Pixelcrayons) offers high quality hand coded pixel-precise markup services and implementation into skins, themes, CMS, shopping carts and more. They accept files in all common formats (PSD/AI/PNG/PDF) and even existing markup.
Their online Order page details various markup packages offered
along with a variety of options for markup and software implementation.
Rapid XHTML
RapidxHTML is a small team
of designers and developers, with a wide range of skills and
experience. Each of us know our strengths and weaknesses and how these
fit into the big picture.
XHTML Chop
XHTML Chop is a team of
experienced web design and web programming professionals. They
specialize in providing the state-of-the-art PSD to HTML conversion
services. they have a talented team that is capable of handling all
types of conversion requirements.
XHTMLiT
XHTMLiT service is simple!
They are W3C Web Standards experts and they have been building and
coding website for over 5 years now. XHTMLiT provide coding services to
designers, taking the dirty job away so you can do what you are best
at, Design!
http://www.pvmgarage.com/2009/09/makingseo-coded-free-css-template-with-psd-to-html-tips/
RECENT COMMENT