How to Convert PSD to HTML Tutorial

Hello, everybody! Today I'm going to take you through my entire process of getting from Photoshop to completed HTML.

Are you ready? Let’s get started!

This is the final result

Step 1: Preparation for the PSD to HTML Tutorial

We all know that in converting PSD to HTML/CSS we will need to go back and forth in Photoshop (or other image editing tool) to measure the sizes, distance, and colours. So make sure you open up the PSD file in Adobe Photoshop.

Of course you’ll need your favorite code editor and debugging tools. I used Adobe Dreamweaver as my text editor and for debugging tools I recommend Firebug.

It is important to test our code using different browsers every step of the way so that we can keep on track of our code. I used CSS3 styles in this tutorial, which should work in Chrome and Firefox.

You will need to create a directory folder and inside of it you should have /images directory for images and /css directory for CSS.

Step 2: Checkout Your PSD Design

To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.
1. Background
2. Header
3. Slider
4. Main Section
5. Footer
Firstly cut the background image

Open PSD in Adobe Photoshop and cut the background image


Select Slice tool in photoshop 

And select the background image

For cut image layer use ctrl + shift + c

And save background image using ctrl + shift + alt + s file save as (.png).

*If you want to correct slice image size then you find image layer and right click on that layer and click on select pixel after that use ctrl + shift + c for copying image layer and open new blank page on using ctrl + n  and paste that layer and save as ctrl + alt +shift +s (.png) extension. Below screenshot for guide..

I am select social icon image layer for correct image size using select pixe style cause slice tool is not working on correct cut image size…

After that using select pixel copy image layer using ctrl + shift + c and open new document file using ctrl + n and paste image using ctrl + v and save as ctrl + alt +shift + s.

This is the better way to slice image from PSD.

Step 3: Create HTML Code

Open Adobe Dreamweaver and create new document using ctrl + n and select blank page as  HTML and click on create button.

Now, Based on these notes we create the following HTML layout.

Index.html
Now let's add a little CSS as follows:

Create css file using ctrl + n and select css document and click on create button and make css class or id and include in HTML document.

Style.css


Css code:

@charset "utf-8";

/* CSS Document */

body{

background:url(../images/bg.png) repeat-x;

}

/*wrapper css start */

#wrapper{

width:100%;

}

/* wrapper css end */

/* header css start */

.header{

width:100%;

}

Note: Download Reset CSS and include above style.css.

Step 4: Working on Header Section

Now lets focus more on the header section we will mark up the HTML elements that can be found in this section.

HTML Code:
Step 5: Working on Slider Section and sidebar

let’s add the content inside the slides element, here’s the HTML.

Now let’s style all the element, here’s the CSS.
Step 6: Working on Main Section
Now let’s add the content inside the Main element, here’s the HTML
Css Code Here:
Step 7: Working on the Footer Section
Now let’s add the content inside the footer element, here’s the HTML.
Now let’s style all the element, here’s the CSS.
Now our layout should look like this.

Complete HTML and CSS Code:

CSS Code:
We’re done, Finally!

Wew! This took me so long to write. How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below. Also, for the next tutorial I’m going teach you how to make this layout responsive. Yeah! You heard it right, let’s make it responsive!


If you liked this tutorial kindly share it with your friends. Thanks! :)