Today, I will show you step by step how to convert PSD to HTML based on a simple Web 2.0 design example. Five years ago, you would have had to use a lot of additional graphic elements for rounded boarders and shadows and you would have had to crop rounded images or create a transparent .png mask for the news block. In those days, you would have used CSS 2.1 and XHTML, with a long Doctype. Today, I’m not going to use these outdated website coding methods. I will apply modern solutions, using CSS3 and HTML5. I won’t use any frameworks, such as Bootstrap or Zurb Foundation. I’ll show you how to simply turn your PSD to HTML5 and CSS markup.
To get started, download the design files.
In this tutorial, you will need a text editor with code highlighting (I prefer Sublime) and Adobe Photoshop, where you’ll do most of the work.
First off, open the designs in Photoshop.
Create a new directory with a project name. Here, create two more directories: css (for your CSS files) and images (for your images).
Then, open your code editor and create two files. The first one is
index.html. This is your page’s main file, leave it in the root of the directory. Create a style.css file in the css directory. This is the file for the styles required for the page layout. You will write your HTML code in index.html, and CSS code in style.css.
Now, let’s write a simple code in index.html that is suitable for most HTML slicing projects.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insight</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
Sample text
</body>
Here, I’ve added <!doctype html> that will notify the browser that this is HTML5. I’ve specified the title of the site Insight in the tag
<title></title> and connected the file with the stylesstyle.css, which is in the css directory. Now I have the following record <link rel="stylesheet" href="css/style.css">.
Here’s what you will see in the code:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
This is necessary to make HTML5 tags work in outdated browsers like Internet Explorer 8 or older. If you don’t need this browser support, you can skip this.
The next HTML code will be written between the
<body> and</body> tags.
Let’s open the
index.html in the browser (I prefer Google Chrome) and see what you have. You’ll see the following text “Sample text.”
Now, take a look at the designs and try to define separate areas.
At the top you’ll see a black bar with a logo and navigation menu. You can call it
.header.
Then there is a block with a big image and some promo text. Let’s call it
.hero.
Then there is a white area with the main content. I prefer calling it
.middle, but you can choose any title you find suitable.
The last block is
.footer.
All the content is centered. The two first blocks and footer are stretched across the whole screen width. The main content on the white background has the same width as the stretched areas. Since blocks with the content, and not the their visuals (the dark background and hero image), have the same width, you can use containers of the same width to center them. Let’s start with the HTML code for the main blocks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insight</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header class="header">
<div class="container">
header is here
</div>
</header>
<div class="hero">
<div class="container">
hero content is here
</div>
</div>
<main class="middle">
<div class="container">
middle content is here
</div>
</main>
<footer class="footer">
<div class="container">
footer is here
</div>
</footer>
</body>
</html>
Add some styles to these areas.
First, let’s use the Eric Meyer tool to reset all tag properties. Just copy and paste the code to the top of the CSS file. Then add the following CSS code. You can read more about it here.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Now, remove underlines from links since they are not underlined in the design.
a {
text-decoration: none;
}
Open Photoshop and measure the width of the main content. To do this, simply select the “Rectangular Marquee Tool” or press M.
On the information panel or by the cursor point you’ll see that the width is 1140px. Now you know the width of
.container.
If you take a closer look at the design, you’ll notice that the header and footer have the same checked texture in the background. Disable the grid by hitting Ctrl + H and zoom in on the design to find the repeating element of the texture. Select and copy it to the buffer by pressing CTRL + Shift + C.
Then create a new document, paste the texture there, and save it for the Web by hitting CTRL + Alt + Shift + S. Choose preset – JPEG Height, set the quality to 60%, and click “Save”. In the pop-up, select the images folder. Name the image bg-texture.jpg. Then enable the Eyedropper Tool I and click on the footer. Now you have the code for the color of the dark blocks, which you’ll specify in styles so that these areas are a dark color, while the image with the texture hasn’t been uploaded yet.
Write down your measurements in CSS:
.container {
width: 1140px;
margin: 0 auto;
}
.header,
.footer {
background: #15181f url(../images/bg-texture.jpg) repeat;
color: #fff;
}
.middle {
background: #fff;
}
If you refresh the browser, here’s what you’ll see.
The text in dark areas is white because I wrote the following property
color: #fff.
Now save the image from the
.hero block. Just select the layer with the image and left-click on the eye icon while holding downAlt.
Select the missing layer with the image. Select the required image area and save it as bg-hero.jpg.
Measure the height of the saved image (it’s 465px) and encode this image in CSS:
.hero {
background: #333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
background-size: cover;
height: 465px;
}
Here you’ve added the image and placed it in the middle of the block by setting 50%-50%. The property
background-size: cover; tells the browser to stretch the background image to its maximum size by either width or height. You can learn more about this property here.
Here’s what you’ll see in the browser:
Now, let’s code the header elements. Save the logo in a PNG24 format and name it logo.png.
Then write the code for the header in the HTML file:
<header class="header">
<div class="container">
<div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
<div class="slogan">your nice slogan</div>
<nav>
<ul class="nav">
<li class="how-it-works"><a href="#">How it works</a></li>
<li class="sign-up"><a href="#">Sign up</a></li>
<li class="login"><a href="#">Login</a></li>
</ul>
</nav>
</div>
</header>
I gave the class
.slogan to the site slogan and added the navigation as a list of links wrapped in the HTML5 tag nav.
Now, here’s what you have in the browser:
It’s time to create styles for these elements. Measure the top margin between the logo and the top of the page in Photoshop. The CSS code will look as follows:
.logo {
float: left;
margin: 19px 17px 0 0;
}
The property
float: left; is necessary to wrap further elements around the current one.
Now style the slogan:
The font family is “Times New Roman”, 16 size, italic lettering and white color with opacity at 35% opacity.
.slogan {
float: left;
margin-top: 22px;
font: italic 16px "Times New Roman", Times, Georgia, serif;
color: rgba(255, 255, 255, .35);
}
Now style the site navigation. Each element has its own navigation icon. To minimize the time it takes the page to load, create a sprite (or a combination of multiple images) from the icons , so the browser will load one image instead of three. To do this, create a new document in Photoshop and drag every icon into it.
Save this file as nav-icons.png.
The next step of PSD to HTML conversion is writing the CSS code for the menu. You need to set the
.nav navigation to the right so use float: right;. Since it is a list and its items are arranged vertically by default, you need to wrap them usingfloat: left;. Each menu item has a gray border to the left, so set border-left: 1px solid #2c323d; for each element..nav {
float: right;
}
.nav li {
float: left;
border-left: 1px solid #2c323d;
}
.nav a {
display: block;
line-height: 62px;
}
The result will look like this:
As you can see, all the elements are in their places, but the header and background are still missing. This is due to the
floaton the elements inside the header. You just need a small fix, also known as a clearfix. I’ll apply it to the element .containerbecause it is a parent element of the ones I applied float to..container:after {
content: "";
display: table;
clear: both;
}
Everything works fine now.
Now, style the menu. Set the white color to the links, specify margins (I applied
display: block to the links to increase their area) and remove underlines from the links..nav a {
display: block;
line-height: 62px;
padding: 0 24px 0 53px;
color: #fff;
}
Set the font family for the menu. If you click on the link, you’ll see that there is no such font in the OS.
It’s not a problem. The font is Open Sans and you can find it in the Google fonts directory. When you find it, click on the following button:
Then click on the texts in the design to define the lettering and thickness.
There you will have normal, semi-bold, and bold.
Select the language and copy the code from the step 3.
Paste it to the
<head> tag.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insight</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Now you can use this font in your CSS with
font-family: 'Open Sans', sans-serif;. Since it is the main font on the page and the menu according to the design, you can set this font family for the entire document. Also, you can define the main color and the size at 16px of the text in the document.body {
font: 16px 'Open Sans', Arial, Helvetica, sans-serif;
color: #55606e;
}
Refresh the browser to see the updates. The page coding process isn’t that complicated, is it?
Set the hover state for the menu link.
.nav a:hover {
background-color: #13151a;
}
Now add buttons. Just add
position: relative; to the tag a and encode icons with a pseudo-element..nav a:after {
content: '';
background: url(../images/nav-icons.png) no-repeat;
position: absolute;
top: 22px;
left: 24px;
}
Set the parameters (size and position of the sprite) of the required icon for each link. I like to use this tool for this task. Upload the sprite, click on the icon, and get its size and position in the sprite.
Copy the necessary values and paste them to CSS.
.nav .how-it-works a:after {
background-position: 0 -1px;
width: 19px;
height: 18px;
}
.nav .sign-up a:after {
background-position: -24px -1px;
width: 19px;
height: 18px;
}
.nav .login a:after {
background-position: -47px -1px;
width: 14px;
height: 17px;
}
You now have the following menu displayed in the browser.
Let’s proceed with the section
.hero. Add the content of this block to HTML. You have a headline, one paragraph of text, and two buttons with the same style but different colors.
HTML:
<div class="hero">
<div class="container">
<h1>Don't ignore your dreams</h1>
<p><strong>The 5 regrets</strong> paint a portrait of post-industrial man, who shrinks himself into a shape that fits his circumstances, then turns dutifully till he stops.</p>
<a href="#" class="btn btn-green">See how it works</a>
<a href="#" class="btn btn-blue">Join us</a>
</div>
</div>
Now write the styles for the header and paragraph. Measure the size and thickness of the text, indents and line heights in Photoshop. Since all the text in the block is white and located in the center, add
color: #fff and text-align: center; on.hero.
CSS:
.hero {
background: #333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
background-size: cover;
height: 465px;
color: #fff;
text-align: center;
padding-top: 31px;
}
.hero h1 {
font-size: 52px;
font-weight: bold;
margin: 0 0 30px;
}
.hero p {
font-size: 22px;
line-height: 36px;
font-weight: 600;
max-width: 715px;
margin: 0 auto 51px;
}
.hero p strong {
font-weight: 700;
}
Now, I’ll show you how to create buttons. I created these buttons as a tag
<a> with a general class .btn, where I will write general styles. I created a relevant class .btn-green and .btn-blue for each color..btn {
display: inline-block;
border-radius: 4px;
line-height: 50px;
color: #fff;
font-weight: 600;
font-size: 18px;
line-height: 50px;
padding: 0 55px;
margin: 0 11px;
}
.btn-green {
background-color: #83c129;
box-shadow: 0 4px 0 #518719;
}
.btn-blue {
background-color: #068fd5;
box-shadow: 0 4px 0 #046b9f;
}
To create rounded corners, I will use
border-radius and add a shadow to the lower border using box-shadow.
Now, let’s create the
footer. Set the tag .nav with the class.footer-nav to the navigation. Add columns with .column. Then, to each of them, add a title as a div with a class .titleand a list of links.<footer class="footer">
<div class="container">
<nav class="footer-nav">
<div class="column">
<div class="title">MAIN</div>
<ul>
<li><a href="#">Start Here</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Meet Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="column">
<div class="title">COMPANY</div>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Directory</a></li>
</ul>
</div>
<div class="column">
<div class="title">ONE MORE</div>
<ul>
<li><a href="#">Meetups</a></li>
<li><a href="#">Handbook</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">API</a></li>
<li><a href="#">Equipment</a></li>
</ul>
</div>
<div class="column">
<div class="title">THE LAST ONE</div>
<ul>
<li><a href="#">Meetups</a></li>
<li><a href="#">Handbook</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">API</a></li>
<li><a href="#">Equipment</a></li>
</ul>
</div>
</nav>
</div>
</footer>
Add margins at the top and the bottom of the footer and style the title and list:
.footer {
padding: 36px 0;
}
.footer-nav {
float: left;
}
.footer-nav .column {
float: left;
width: 136px;
}
.footer-nav .title {
font-size: 12px;
margin-bottom: 15px;
font-weight: bold;
}
.footer-nav ul {
font-size: 12px;
}
.footer-nav ul li {
margin-bottom: 7px;
}
.footer-nav a {
color: #8e959c;
}
Now, add the icons of social networks. You can crop them as images and paste into the code or use as background images for the links, but I prefer icon fonts. To do this, use the following handy icon generation tool.
Select the icons you need, specify the size, color, and a sequence of output. Choose the hover state and write
transparent in the Button Color field. Then, click on the socicon.zip button to download the files. Now, you have to create a new fonts directory in your project and unzip the file there. Then, copy ton with the HTML code, but paste the code right after the tag nav.footer-nav. Resize the icons to match the design in .soc li a.
Now add copywrite. Add
div.copyright and place the content in it.<div class="copyright">
<p>© 2013 be happy<br>
<a href="#">Privacy Policy</a> <a href="#">Terms of Service</a>
</p>
</div>
Add styles:
.copyright {
clear: right;
text-align: right;
line-height: 20px;
font-size: 12px;
color: #8e959c;
}
.copyright a {
color: #8e959c;
margin-left: 8px;
}
On
ul.soc, add a lower margin margin:0 0 79px;. Here’s what the page look now:
It’s time to create three big blocks in the middle of the page.
If you look closely at these blocks, you’ll see that they are one and the same block, but with different contents. Therefore, you need to create one block, style it, multiply it, and fill it in with the necessary content. I will save photos in these blocks as .jpg images. The border and triple border at the bottom will be created with CSS. If photos do not have transparency, they should always be saved in a .jpg format, so that they weigh less and retain an excellent quality. As a rule, a compression ratio of 60% is enough. You will only need 70 to 80% if there is text on the photo and you want to save it as an image.
The top big images will be named photo1, photo2, ect.
Now, write the HTML and paste the saved images in it. Create
div.blocks and place three inner blocks (each calleddiv.block) in it. You can see an example of one of the blocks below.<div class="blocks">
<div class="block">
<div class="image"><img src="images/photo1.jpg" height="180" width="319" alt=""></div>
<div class="person">
<div class="photo"><img src="images/person1.jpg" height="50" width="50" alt=""></div>
<div class="text">
<div class="phrase">You neglect your friends</div>
<div class="info">Valerie Adams. Moldova. 19.</div>
</div>
</div>
</div>
</div>
You need to add
float:left to the inner blocks to align them horizontally and apply clearfix like you did with .container. To do this, go back to the beginning of the CSS file and write the element..container:after,
.blocks:after {
content: "";
display: table;
clear: both;
}
Now measure the width of the blocks and margins between them. Their width is 351px and the right margin is 43px. Since there is only one row of blocks, it would be best to set a left margin and cancel it for the first one using the selector :
first-child..blocks .block {
float: left;
width: 351px;
margin-left: 43px;
}
.blocks .block:first-child {
margin-left: 0;
}
Now, add
margin-bottom: 75px to div.blocks. Add a border to the div.block blocks and set a margin. You can take the margin size and border color from the Photoshop file. Since the blocks have rounded corners, define the required border-radius. Also set the property ertical-align: top; to remove the unnecessary bottom margin from the images.
.blocks .block {
float: left;
width: 351px;
margin-left: 43px;
padding: 15px;
border-radius: 4px;
border: 1px solid #d9dbdf;
}
.blocks .block:first-child {
margin-left: 0;
}
.blocks img {
vertical-align: top;
}
Set the bottom margin to 13px for the block with photos of people. In the block
.person, float the image to the left and text to the right. Then apply clearfix to the block so that they won’t collapse. Set the color and font sizes..blocks .image {
margin-bottom: 13px;
}
.blocks .photo {
float: left;
}
.blocks .text {
float: right;
width: 258px;
}
.blocks .phrase {
color: #454e5c;
margin-bottom: 2px;
font-weight: 600;
}
.blocks .info {
color: #8e959c;
font-size: 14px;
}
We’re almost done.
To add additional stying to bottom blocks, use pseudo-selectors :after and :before. You can apply them to
.blocks and position at the bottom. To do this, add the following code.block position: relative;..blocks .block:after,
.blocks .block:before {
content:'';
height: 3px;
border-radius: 0 0 4px 4px;
border: 1px solid #e1e2e5;
border-top: 0;
position: absolute;
}
.blocks .block:after {
bottom: -4px;
left: 3px;
right: 3px;
}
.blocks .block:before {
bottom: -7px;
left: 6px;
right: 6px;
}
Refresh the browser to see the results.
Now let’s code a news block. It consists of three news pieces. Each of them has a round image, title and date. Like in the blocks above, code one block and duplicate it. Crop square images from the PSD file and make them round with the CSS property
border-radius: 50%. The date will be created with the tag<time>and the paragraph with <p>.
To cut a rectangular image, which is made round via mask in the design, you need to do the following: select the “Move Tool (V)“, then the checkbox “Auto-Select” and “Layer” in the select.
Then click on a round image to select it in the layers.
Carefully select the required area of the image. The image should be the same size as the area you select.
Press Ctrl + C,then press Ctrl + N to create a new document,Ctrl + V to insert the image there, and Alt + Shift + Ctrl + S to save the image for the Web as a .jpg. I prefer naming images like the blocks, so I’ll name it news1.jpg. Repeat the same actions for the two other images.
Write the code for one of the blocks. Call the parent block
div.news, and each news item div.one. Add a 2px border to the main block, set the margins at the bottom and add clearfix.
HTML:
<div class="news">
<div class="one">
<div class="img"><a href="#"><img src="images/news1.jpg" height="89" width="89" alt=""></a></div>
<div class="text">
<time>Oct 18</time>
<p><a href="#">I would like to avoid making these mistakes.</a></p>
</div>
</div>
<div class="one">
<div class="img"><a href="#"><img src="images/news2.jpg" height="89" width="89" alt=""></a></div>
<div class="text">
<time>Oct 8</time>
<p><a href="#">But how do you avoid mistakes you make by default?</a></p>
</div>
</div>
<div class="one">
<div class="img"><a href="#"><img src="images/news3.jpg" height="89" width="89" alt=""></a></div>
<div class="text">
<time>Oct 2</time>
<p><a href="#">Ideally you transform your life so it has other defaults.</a></p>
</div>
</div>
</div>
CSS:
.news {
border-top: 2px solid #e7e7e7;
border-bottom: 2px solid #e7e7e7;
padding: 31px 0;
margin-bottom: 30px;
}
.news .one {
float: left;
width: 352px;
margin-left: 42px;
}
.news .one:first-child {
margin-left: 0;
}
.news .img {
float: left;
width: 98px;
text-align: center;
}
.news .text {
float: right;
width: 234px;
padding-top: 4px;
}
.news img {
border-radius: 50%;
}
.news time {
font-size: 14px;
color: #abb1bb;
}
.news p {
margin: 4px 0 0;
}
Finally:
It’s a news section, so you can add links to the images too.
The next section to work on is “Featured on:“. Use
<ul>for the list of images and a usual <div> with the class .title for a mini header. According to the design, logos have hover states and their initial state has 50% transparency, while, when saving images, you need to set it at 100% transparency, i.e. disable it. In the markup, you will implement it with a property opacity. You should save logos, icons and other non-photo elements in the .png format to ensure these images will remain of high quality.
The code will be like this:
HTML
<div class="featured">
<div class="title">Featured on:</div>
<ul>
<li><a href="#"><img src="images/logo-new-texas-times.png" height="28" width="262" alt=""></a></li>
<li><a href="#"><img src="images/logo-wooden.png" height="29" width="147" alt=""></a></li>
<li><a href="#"><img src="images/logo-vremya.png" height="22" width="112" alt=""></a></li>
<li><a href="#"><img src="images/logo-open-book.png" height="29" width="217" alt=""></a></li>
<li><a href="#"><img src="images/logo-twitter.png" height="29" width="36" alt=""></a></li>
</ul>
</div>
CSS:
.featured {
padding: 26px 0;
margin-bottom: 34px;
}
.featured * {
display: inline-block;
vertical-align: middle;
}
.featured ul li {
margin-right: 38px;
}
.featured .title {
margin-right: 20px;
}
.featured a {
opacity: .5;
}
.featured a:hover {
opacity: 1;
}
Create a bottom margin for the blocks .news and .featured.
That’s it! Refresh the browser window and see the page looks exactly like the design. Now let’s bring it to life and make it a little better by adding underlines as hover states for the links and subtle effects on the image and menu links.
a {
text-decoration: none;
transition: all 0.3s;
}
a:hover {
text-decoration: underline;
}
Remove the underlines from the navigation hover state and buttons in the .hero block. Add a slight transparency to the button hover states.
.btn:hover {
text-decoration: none;
opacity: .9;
}
Hurrah, the page is ready! Now you know how to code PSD to HTML!
I hope this tutorial was helpful. Please feel free to download the template code.
