Tutorial Psdtohtmlcss13

Convert 1stDelicious Portfolio Layout From
PSD to HTML [Very Detailed]

Posted in Coding, Coding, HTML & CSS, Tutorials, Tutorials 3 years ago Written by Ahmad Hania
21 Comments
In this article you will learn how to convert 1stDelicious: A Simple Clean Portfolio Layout from PSD
to HTML in a detailed step by step tutorial. You will learn how to create this layout by using a CSS
framework, CSS Sprites and CSS3 into a valid HTML/CSS and cross browser compatible layout. I
hope that you can go through this tutorial and learn a few techniques that will help you in future
projects.
Now, lets get started with this tutorial.
Links you will need to complete this tutorial:
1stDelicious: Create A Simple Clean Portfolio Layout In Photoshop
960 Grid System
Heres what well be creating (Click on image to view a full working demo).
You can also download this tutorial source files from here.
Step 1 Preparation
If you read the Photoshop tutorial for creating this layout you probably noticed that 960gs grid system
was used for guidelines creation. Well, in this tutorial we will also need the 960gs grid system as a CSS
framework. Using CSS frameworks makes layout and styles creation a lot easier and saves time in web
development. Now you should download the 960 Grid system source files for usage in this tutorial.
You will also need a good code editor of your choice; you can use a plain text editor such as the
Notepad. I always recommend you use a free code editor and get used to it, this helps you get things
done faster.
Now in the process of creating this tutorial you should test your layout in different browsers, you dont
want to return to the beginning because of browser compatibility issues. In this tutorial I am using some
CSS3 styles but as you might know not all browsers support CSS3 features. The results shown in this
tutorial will be from Firefox version 3.6 which supports all CSS3 styles used in this tutorial.
Step 2 Getting Your Files Ready

First thing you should do is to create a directory structure to build our layout in. I usually create an
/images/ directory to put every image in it and a /styles/ directory which will hold every style sheet
(CSS) file. The HTML file goes in the root directory.
Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP
file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy
960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the
same files but in a bigger and more readable format, I recommend using the compressed CSS files. You
also need to create a new file in your root directory called index.html and create another file called
style.css in /styles/ directory.
In this tutorial we need to export images from Photoshop to use it in our HTML layout. You can export
these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can
just grab the source files with this tutorial and youll find the images I created.
Step 3 Simple Earlier Layout

We need to start by creating a Simple HTML layout to hold all the pieces together. By looking on the
Photoshop Layout you should notice a few things:
1. Youll notice that the layout has four sections: Header(with logo and menu), Featured Project,
Content and Footer section.
2. We have a background image for the Header and Featured Project sections which repeats
horizontally, and another background image for the Footer section that also repeats horizontally.
3. Now notice that all sections: Header, Featured and Footer has a fixed height and the content
section height isnt fixed.
4. Finally, youll notice that the Featured section has different overlay background.
Based on these points we create the following HTML layout.
<!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>Portfolio Layout</title>
<link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>
<body>
<div class="header_container container_12">
Header Content Goes Here.
</div>
<div class="featured_container">
<div class="container_12">
Featured Project Goes Here.
</div>
</div>
<div class="content_container container_12">
Main Contect Goes Here.
</div>
<div class="footer_container">
Footer Content Goes Here.
</div>
</body>
</html>
As you can see in this layout we added links for the CSS files in the header, created four main <div>
sections each with a unique class name for styling later, youll notice that both header_container
and content_container class argument includes also container_12 because both need to have the
same style as container_12 implemented in the 960gs framework. Theres also a <div> section with
a class attribute container_12 inside featured_container and we separated it from the main
<div> so it can hold the overlay background. Now the repeating background image for the header and
featured section is going to be styled in the body. Now lets add the CSS as follows (all CSS should be
added in style.css file):
body {
color: #1d1d1d;
background: #fff url(../images/bg.png) repeat-x top center;
font-size: 12px;
font-family: Arial;
}
a {
color: #0cb0ca;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.header_container {
height: 100px;
overflow: hidden;
}
.featured_container {
height: 454px;
overflow: hidden;
color: #fff;
font-size: 14px;
}
.featured_container .container_12 {
background: url(../images/featured_bg.png) no-repeat top center;
height: 454px;
}
.content_container {
color: #1d1d1d;
line-height: 24px;
padding: 38px 0 60px 0;
}
.footer_container {
background: #000 url(../images/footer_bg.png) repeat-x top center;
height: 234px;
width: 100%;
display: block;
overflow: hidden;
color: #fff;
}
Lets see what we have here, we set the whole page font color to dark gray #1d1d1d and set the
background color to white #fff with a horizontally repeating image bg.png. We also set the default
font family and size then styled the links color to #0cb0ca with no text decoration and a hover state
with an underline text decoration. Next we styled the header_container with a fixed height of
100px and set overflow to hidden. Now lets look at featured_container style, a fixed height of
454px, hidden overflow, white font color and a font size of 14px. then we added the overlay
background image featured_bg.png to container_12 with no repeat and aligned to center top. We
then added the style for content_container with 24px line height (which controls the space between
lines of text), a 38px top padding and a 60px bottom padding to keep the space between featured,
footer section and content section.
Finally, we style footer_container with a horizontally repeating background image
footer_bg.png, a fixed height, a 100% width to fill the browser visible area horizontally, set display
to block, overflow to hidden and set font color to white. The result should be as the image below.
Step 4 Adding Logo and Menu to Header

Now lets add the logo and the menu items in the header section. Heres the HTML for the
header_container.
<div class="header_container container_12">
<div class="grid_5">
<h1><a href="#" title="Home">FirstWebDesigner</a></h1>
</div>
<div class="menu_items">
<a href="#" title="home page" class="home active">Home</a>
<a href="#" title="things I've done"
class="portfolio">Portfolio</a>
<a href="#" title="all about me" class="about">About Me</a>
<a href="#" title="get in touch" class="contact">Contact Me</a>
</div>
</div>
</div>
Here I used a grid_5 class to hold the logo and a grid_7 to hold the menu items. I added an <h1>
element with a link inside it that will represent the logo and a link to home page. I also added a <div>
element to hold menu items with simple links, the only thing different here is that each link has a
special class name which we will use to set the style of each item. You will also notice that the home
link has an added class active which will hold the style for the active state of the link.
Now lets add the style for the header content.
.header_container .grid_5 {
padding: 36px 0 0 0;
}
.header_container .grid_5 a {
display: block;
text-indent: -9999px;
height: 61px;
width: 280px;
background: url(../images/logo.png) no-repeat;
float: left;
}
.header_container .grid_7 .menu_items {

float: right;
}
.header_container .grid_7 a {
display: block;
text-indent: -9999px;
height: 100px;
background: url(../images/menu_items.png) no-repeat;
float: left;
margin: 0 40px 0 0;
}
.header_container .grid_7 a.home {

width: 62px;
}
.header_container .grid_7 a.home:hover,

.header_container .grid_7 a.home.active {
background-position: 0px -100px;
}
.header_container .grid_7 a.portfolio {

width: 94px;
background-position: -100px 0px;
}
.header_container .grid_7 a.portfolio:hover,

.header_container .grid_7 a.portfolio.active {
background-position: -100px -100px;
}
.header_container .grid_7 a.about {

width: 75px;
}
.header_container .grid_7 a.about:hover,

.header_container .grid_7 a.about.active {
}
.header_container .grid_7 a.contact {

width: 94px;
}
.header_container .grid_7 a.contact:hover,

.header_container .grid_7 a.contact.active {
}
To style the logo I added top padding of 36px to grid_5 style holding the heading and the link of the
logo, then I styled the link with block display, fixed height and width, a background image logo.png,
a float to the left and a value of -9999px to text indent and this value is set to make the link text
invisible when you view it in browsers and it also has SEO benefits.
Now lets style the menu items, to style the menu items I used a technique called CSS Sprites which
allows all the menu item images to be in a single image and then we choose what to show using CSS
background position properties. Now all normal state and hover state images are available in
menu_items.png, now I set the style for menu_items to float to the right so that all menu items
stay on the right side of the header and then set the a links style to display block, a fixed height, set
background image to menu_items.png, a right margin to make a space between menu items and a
-9999px text indent to hide link text. Now I add a style for each menu item class and for its hover and
active states. Finally, I set respective width and background position to show the part I want from the
Sprite image. The result should be as the image below.
Step 5 Adding Featured Project Content

Now lets add the HTML for the Featured Project section.
<div class="featured_container">
<div class="current_project">
<h2>
Duis ullamcorper, metus a dapibus euismod, velit enim varius
mi, tristique diam.
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer dictum, magna id aliquam aliquet, nulla turpis tempus metus, vitae
sollicitudin nisl nunc ut neque. Ut at felis a neque sollicitudin egestas.
</p>
<a href="#" title="read more">READ MORE</a>
<a href="#" title="my portfolio">MY PORTFOLIO</a>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque sed erat ut sapien laoreet venenatis suscipit non neque. Sed mollis
sagittis lobortis. - <span class="name">John Doe</span>
</p>
</div>
<a href="#" title="Hire Me">Project On Your Mind? Hire Me</a>
</div>
</div>
</div>
Now lets see what we added, I added a <div> with a grid_12 class which will take the full width
and hold project title, description and buttons. Then added two more div elements with grid_8 and
grid_4 which holds the content for customer testimonials. Now lets add the CSS style for Featured
Project Content, heres the CSS.
.featured_container .container_12 .grid_12 .current_project {
width: 470px;
height: 300px;
overflow: hidden;
}
.featured_container .container_12 .grid_12 .current_project h2 {

font-family: Georgia;
font-size: 30px;
font-weight: normal;
line-height: 24px;
}
.featured_container .container_12 .grid_12 .current_project p {

line-height: 24px;
width: 450px;
margin: 0 0 50px 0;
}
.featured_container .container_12 .grid_12 .current_project a {

color: #1d1d1d;
float: left;
width: 150px;
height: 38px;
text-align: center;
font-weight: bold;
line-height: 38px;
border: 5px solid #a3a4a4;
background: #fff;
margin: 0 10px 0 0;
-moz-border-radius: 14px;
border-radius: 14px;
text-shadow: 1px 1px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=0, offy=1);
background: -moz-linear-gradient(top, #FFFFFF 0%, #DCDCDC 100%); /* firefox
*/
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#FFFFFF), color-stop(100%,#DCDCDC)); /* webkit */
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF',
endColorstr='#DCDCDC',GradientType=0 ); /* ie */
}
.featured_container .container_12 .grid_12 .current_project a:hover {

background: -moz-linear-gradient(top, #DCDCDC 0%, #FFFFFF 100%); /*
firefox */
stop(0%,#DCDCDC), color-stop(100%,#FFFFFF)); /* webkit */
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#DCDCDC',
endColorstr='#FFFFFF',GradientType=0 ); /* ie */
}
.featured_container .container_12 .grid_8 p {

font-size: 12px;
height: 76px;
margin: 0;
padding: 10px 0 0 30px;
line-height: 24px;
}
.featured_container .container_12 .grid_8 p span.name {

font-style: italic;
color: #0cb0ca;
}
.featured_container .container_12 .grid_4 a {

color: #1d1d1d;
float: right;
width: 235px;
height: 40px;
text-align: center;
line-height: 40px;
border: 4px solid #141a20;
background: #fff;
margin: 15px 0 0 0;
-moz-border-radius: 12px;
border-radius: 14px;
text-shadow: 1px 1px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=0, offy=1);
background: -moz-linear-gradient(top, #FFFFFF 0%, #DCDCDC 100%); /* firefox */
stop(0%,#FFFFFF), color-stop(100%,#DCDCDC)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF',
endColorstr='#DCDCDC',GradientType=0 ); /* ie */
}
.featured_container .container_12 .grid_4 a:hover {

background: -moz-linear-gradient(top, #DCDCDC 0%, #FFFFFF 100%); /* firefox
*/
stop(0%,#DCDCDC), color-stop(100%,#FFFFFF)); /* webkit */
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#DCDCDC',
endColorstr='#FFFFFF',GradientType=0 ); /* ie */
}
First I styled current_project with a fixed height and width, hidden overflow and a top padding of
78px to make a space between header and featured content, then I set the header 2 style with a Georgia
as font, 30px font size a normal font weight and 24px line height. Now I set the paragraph style with
line height, fixed width and a bottom margin.
Now to style both READ MORE and MY PORTFOLIO buttons I used CSS3 features which
gives you the same results you have in Photoshop without using images. There are two sections here,
one for normal button state .featured_container .container_12 .grid_12 .current_project a and the
other for hover state .featured_container .container_12 .grid_12 .current_project a:hover, for normal
state style I set text color to #1d1d1d to override the default color of links, float to left, fixed width
and height, text align to center, bold font weight and a line height similar to height for the text to center
align vertically, a 5px border with a border radius of 14px, a right margin to make a space between
both buttons, set text-shadow property which allows the text to have a shadow to 1px horizontal and
vertical length and 0px to blur radius and a white shadow color, and then set the button to have a
gradient effect for the background.
I recommend this tool CSS Gradient Generator which I use to generate gradient background effect
easily. Now for the hover effect, we will change only the gradient effect using the gradient generator.
Youll notice that I styled the paragraph element in customer testimonial section to have a smaller font
size, fixed height, zero margins, a top and left padding and a bigger line height, then I styled the span
element which contains the name to be italic and have #0cb0ca as text color. Finally I styled the
Project On Your Mind? Hire Me button the same way I did on the previous buttons with a few
values changed. Now our layout should look like this.
Step 6 Adding Main Content

Now lets add the Main Content, as youll notice from the design, the main content is divided into three
sections which are equal in width so we are going to use three <div> elements with a class attribute
grid_4. Heres the HTML for the main content.
<div class="content_container container_12">
<h2>
<img src="images/whatido.png" alt="What I do" />
What I Do?
<br />
<span>Aenean ullamcorper euismod</span>
</h2>
<p>
Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper.
Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo. Nulla facilisi.
Etiam pretium, libero sit amet gravida hendrerit, tortor risus lacinia odio, mattis
venenatis felis massa nec eros.
</p>
<ul>
<li>Pellentesque</li>
<li>Mauris ac tincidunt</li>
<li>Cras elementum</li>
<li>Mauris ac tincidunt </li>
</ul>
<ul>
<li>Mauris ac tincidunt</li>
<li>Cras elementum</li>
<li>Mauris ac tincidunt </li>
</ul>
</div>
<h2>
<img src="images/myportfolio.png" alt="My Portfolio" />
My Portfolio
<br />
</h2>
<p>
Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo.
</p>
<img src="images/image.png" alt="" />
</div>
<h2>
<img src="images/isocialize.png" alt="I Socialize" />
I Socialize
<br />
</h2>
<p>
Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo.
</p>
<div class="social_icons">
<a href="#" title="Twitter"><img src="images/twitter.png" alt="Twitter"
/>Twitter</a>
<a href="#" title="Twitter"><img src="images/flickr.png" alt="Flickr
Group" />Flickr Group</a>
<a href="#" title="Twitter"><img src="images/digg.png" alt="Digg"
/>Digg</a>
<a href="#" title="Twitter"><img src="images/rss.png" alt="RSS
Subscribe" />RSS Subscribe</a>
<a href="#" title="Twitter"><img src="images/skype.png" alt="Skype"
/>Skype</a>
<div class="clear"></div>
</div>
</div>
</div>
Notice that the header section contains an image, a normal text and a text inside a span element. You
should either export the icons from the PSD file or just use the ones included in source files. All we
have to do now is add a little CSS styles. Heres the CSS for the main content section.
.content_container {
line-height: 24px;
padding: 38px 0 60px 0;
}
.content_container .grid_4 h2 {
font-size: 24px;
line-height: 18px;
}
.content_container .grid_4 h2 img {

float: left;
margin: -8px 15px 0 0;
}
.content_container .grid_4 h2 span {

font-family: Verdana;
font-size: 14px;
}
.content_container .grid_4 p {
text-align: justify;
margin: 0 0 42px 0;
}
.content_container .grid_4 ul {
float: left;
}
.content_container .grid_4 ul li {
list-style-type: none;
margin: 0 40px 0 0;
}
.content_container .grid_4 ul li:before {

content: "- ";
}
.content_container .grid_4 .social_icons a {

display: block;
text-decoration: none;
line-height: 26px;
height: 26px;
width: 150px;
float: left;
margin: 0 0 35px 0;
}
.content_container .grid_4 .social_icons a:hover {

text-decoration: underline;
}
.content_container .grid_4 .social_icons a img {

float: left;
margin: 0 25px 0 0;
}
First we set h2 style to have Georgia for font, fixed font size and line height with no normal weight.
Then we style the image in the header (icon) with left floating, a positive right margin and a negative
top margin to make the image align similar to the original design. Now we style the span to have a
different font family and a smaller font size. We then style the paragraph with a text align of justify and
a bottom margin. Now we style the unordered list items in the left content section, first we style ul
element to float to left and then we style li element with no list type and a right margin 40px. Now you
should notice that when we used list-style-type: none the list items has no bullets of any kind but in
the original design we have a dash character - as a bullet, because the dash isnt supported as list
item bullet character we are going to insert it before each list item text using .content_container
.grid_4 ul li:before and content: - .
Finally, we style the social icons in the right content section by styling the link normal and hover states
along with a style for the icon image. Now our layout should look like this.
Step 7 Adding Footer Content

The footer section has three equal in width sections so we will also use gird_4. The copyright text
needs to be at the bottom of the footer, center aligned so we are going to use a <div> with a class
container_12 copyright with a <div> inside it with a class grid_12 to fill the whole container.
Now heres the HTML for the footer content.
<div class="footer_container">
<h3>Quick Links</h3>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Project Pricing</a></li>
<li><a href="#">Mauris ac tincidunt</a></li>
</ul>
</div>
<h3>Latest From Blog</h3>
<ul>
<li><a href="#">Sed mi sem, tempor sed ullamcorper</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Etiam pharetra gravida scelerisque</a></li>
</ul>
</div>
<div class="grid_4 contact_details">
<h3>Contact Me</h3>
<p>
Sed mi sem, tempor sed ullamcorper ac, tempor
Integer at urna diam, Duis ornare viverra.
</p>
<a href="#" title="burns.michaeljohn@gmail.com"><img
src="images/email.png" alt="Email" />burns.michaeljohn@gmail.com</a>
<a href="#" title="RSS Feed Subscribe"><img src="images/rss.png"
alt="RSS Feed Subscribe" />RSS Feed Subscribe</a>
</div>
</div>
<div class="container_12 copyright">
Copyright 2010 <a href="http://www.1stwebdesigner.com"
title="1stwebdesigner">1stwebdesigner</a>, All Rights Reserved
</div>
</div>
</div>
Now lets style the footer content. Heres the CSS for the footer content.
.footer_container {
background: #000 url(../images/footer_bg.png) repeat-x top center;
height: 234px;
width: 100%;
display: block;
overflow: hidden;
color: #fff;
}
.footer_container .container_12 {
}
.footer_container .container_12 .grid_4 h3 {

font-size: 18px;
line-height: 12px;
}
.footer_container .container_12 .grid_4 ul li {

list-style-type: none;
margin: 0 0 0 35px;
padding: 0 30px 0 0;
height: 29px;
line-height: 29px;
border-bottom: 1px solid #47535d;
}
.footer_container .container_12 .contact_details p {

margin: 0 0 15px 0;
}
.footer_container .container_12 .contact_details a {

display: block;
clear: both;
height: 28px;
line-height: 28px;
font-style: italic;
}
.footer_container .container_12 .contact_details a img {

float: left;
margin: 0 10px 12px 0;
}
.footer_container .container_12.copyright {
padding: 0;
}
.footer_container .container_12 .grid_12 {

text-align: center;
font-size: 11px;
line-height: 40px;
height: 40px;
}
Notice that we set the top margin for container_12 to 20px which will make the upper space
between the footer and the main content. Then we styled header 3 with Georgia font, 18px font size,
12px line height and a normal font weight. We styled list elements with no list type (no bullet), a
similar line height and list height to center text vertically, a bottom border of 1px, a left margin and a
right padding. Then we style the paragraphs, links and contact details icons. Finally, we set copyright
section with no padding and align grid_12 text to center with small font size and equal line height
and height values.
Now if you followed this tutorial correctly then you should have a full working HTML/CSS layout
from a PSD one that looks exactly like this.
Conclusion
In this tutorial you learned how to convert a layout from PSD to HTML/CSS using CSS sprites and
CSS3 techniques. Dont forget to validate and check browser compatibility, of course all CSS3 styles
wont validate so make sure to remove all CSS3 styles before validating. Now if you think that
anything is not clear to you or you have a better technique to create something, please be kind and say
something in the comments.

Tutorial Psdtohtmlcss13

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Psdtohtmlcss13

Uploaded by

Copyright:

Available Formats

Convert 1stDelicious Portfolio Layout From

PSD to HTML [Very Detailed]

Step 2 Getting Your Files Ready

Step 3 Simple Earlier Layout

Step 4 Adding Logo and Menu to Header

.header_container .grid_7 .menu_items {

.header_container .grid_7 a.home {

.header_container .grid_7 a.home:hover,

.header_container .grid_7 a.portfolio {

.header_container .grid_7 a.portfolio:hover,

.header_container .grid_7 a.about {

.header_container .grid_7 a.about:hover,

.header_container .grid_7 a.contact {

.header_container .grid_7 a.contact:hover,

Step 5 Adding Featured Project Content

.featured_container .container_12 .grid_12 .current_project h2 {

.featured_container .container_12 .grid_12 .current_project p {

.featured_container .container_12 .grid_12 .current_project a {

.featured_container .container_12 .grid_12 .current_project a:hover {

.featured_container .container_12 .grid_8 p {

.featured_container .container_12 .grid_8 p span.name {

.featured_container .container_12 .grid_4 a {

.featured_container .container_12 .grid_4 a:hover {

Step 6 Adding Main Content

.content_container .grid_4 h2 img {

.content_container .grid_4 h2 span {

.content_container .grid_4 ul li:before {

.content_container .grid_4 .social_icons a {

.content_container .grid_4 .social_icons a:hover {

.content_container .grid_4 .social_icons a img {

Step 7 Adding Footer Content

.footer_container .container_12 .grid_4 h3 {

.footer_container .container_12 .grid_4 ul li {

.footer_container .container_12 .contact_details p {

.footer_container .container_12 .contact_details a {

.footer_container .container_12 .contact_details a img {

.footer_container .container_12 .grid_12 {

You might also like