PSD to HTML Tutorial: Tips on Converting PSD Files to Web Pages

The basic web design process starts with a designer mocking up a design for the web page in a program like Photoshop. The designer then gets the client’s input, makes appropriate modifications, and gets the final nod. After the client gives the green signal, it’s the designer’s (or the front-end developer, though these roles are increasingly overlapping) job to convert the Photoshop PSD file into a live webpage with HTML, CSS, JavaScript and jQuery.

In this tutorial, we will take a look at the PSD to HTML conversion process. For a more in-depth explanation on how to convert PSD files to live web pages, take a look at this Adobe certified PSD to HTMl conversion course.

1. Understand Your Tools

Transferring a website from PSD to an actual web page requires a thorough understanding of front-end development. This includes, but isn’t limited to:

• HTML5

• CSS3

• JavaScript

• jQuery

A few years ago, a web designer could get by with a smattering of HTML, a bit of CSS, and a dash of JavaScript thrown in for good measure. Translating modern web pages, however, requires a thorough understanding of not just the markup (i.e. HTML) and styling (i.e. CSS), but also the dynamic features of a webpage – i.e. JavaScript and jQuery. It’s nearly impossible to find any modern web page that doesn’t utilize at least some JavaScript and jQuery. Furthermore, device fragmentation requires web designers to develop not just for desktops, but also mobiles and tablets. At the same time, the increasing complexity of HTML5 and CSS3 means that a web designer must be willing to spend a lot of time learning the latest trends and technologies.

Fortunately, web designers today have a ton of frameworks and reference source to make their lives easier. Let’s look at a few of them:

1. Bootstrap: A framework for responsive web design made by the good people at Twitter, Bootstrap provides the basic HTML, CSS and JavaScript to create high quality, responsive web pages on the fly.

2. Less Framework: The Less framework is built around LESS, the stylesheet language that extends CSS capabilities. Like Bootstrap, Less helps designers build responsive pages, and includes built-in templates for four different screen sizes (default, mobile, wide mobile, and tablet).

3. Foundation by ZURB: Similar to Bootstrap, Foundation uses a 12-grid system for developing responsive websites.

4. jQuery Plugin Libraries: You don’t actually need to know jQuery to use it in your designs, thanks to the hundreds of pre-existing plugins. Unheap and the official jQuery plugin registry are two great places to get started.

For more robust, enterprise-grade web development, consider using a framework like KendoUI, AlloyUI, or jQueryUI.

As far as development software is concerned, most developers swear by Dreamweaver. For cheaper alternatives, consider Coffeecup HTML editor ($69), Aptana (free), or Qanta Plus (free).

New to web design? This HTML prep course will help you get started.

2. Understand Site Structure

Virtually every site can be demarcated into four distinct sections:

• Navigation: Usually appears at the top of the page. May appear in the sidebar in some designs. Remains mostly the same across all web pages.

• Main Header: Chief content ‘above the fold’. A lot of designs use jQuery sliders.

• Primary Content: This holds all the content on the website.

• Footer: The footer contains links, contact information, etc. Remains mostly the same across all web pages.

Let’s see how this structure appears on the Udemy.com homepage:

Thanks to frameworks such as 960.js, virtually all web design today is grid based. The most popular responsive framework, Bootstrap, utilizes a 12-grid system for aligning content.

As seen in the above example, the navigation and header have a full-width layout that occupies the entire 12-grid system. The primary content, on the other hand, is divided into 4 separate sections (i.e. each sub-section is 3 grids wide). The footer, on the other hand, is divided into 3 sections made up of 4 separate grids.

In Bootstrap, this would be represented as follows:

<!-- Navigation -->

<div class=”container-fluid”>

<div class=”row”>

<div class=”col-lg-12”>

<navbar></navbar>

</div>

</div>

</div>

<!-- Header -->

<div class=”container-fluid”>

<div class=”row”>

<div class=”col-lg-12”>

<header></header>

</div>

</div>

</div>

<!-- Main Content -->

<div class=”container-fluid”>

<div class=”row”>

<div class=”col-lg-3”></div>

<div class=”col-gl-3”></div>

<div class=”col-gl-3”></div>

<div class=”col-gl-3”></div>

</div>

</div>

<!-- Footer -->

<div class=”container-fluid”>

<div class=”row”>

<div class=”col-lg-4”></div>

<div class=”col-lg-4”></div>

<div class=”col-lg-4”></div>

</div>

</div>

Let’s consider a few important things from the code above

<div class=”container-fluid”>

We used container-fluid because the web page fills the entire screen area and doesn’t have a fixed width. Hence, the layout is ‘fluid’.

<div class=”col-lg-12”>

In the header and navigation, we have a single section that occupies the full width of the page, hence we used col-lg-12, meaning that all the 12 grids have to be occupied.

<div class=”col-lg-3”>

We used col-lg-3 in the primary content because we need to create 4 separate grids, and 12 grids/3 = 4 grids.

<div class=”col-lg-4”>

Since we have three grids in the footer, we’ve used col-lg-4 (12/4 = 3 grids).

With the above structure in place, putting together the PSD slices will be far easier.

Confused bt the code? Check out this course on HTML and CSS for beginners to clear away your doubts.

Bootstrap Example

To illustrate the above, let’s take a very rough web page with a navigation menu and header:

We will build this in Bootstrap as follows:

1. Download and extract the Bootstrap files as directed at GetBootstrap.com. Link to the Bootstrap CSS files in a new HTML page.

2. For the Navigation, enter the following code after <body>

<div class="container-fluid">

<div class="navbar">

<a class=navbar-brand" href="#">YourWebsite.com</a>

<ul class="nav navbar-nav pull-right">

<li><a href="#">Home</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

3. For the main header, enter the following after </div>:

<div class="jumbotron">

<h1>HELLO!</h1>

</div>

</div>

Here, we’ve used one of Bootstrap’s built-in CSS selectors, jumbotron to create our main header. You can read more about it in the Bootstrap documentation.

4. In the custom CSS file, add the following:

.navbar {

background:#252525;

margin-bottom:0px;

border-radius:0px;

}

a.navbar-brand {

color:#fff;

padding-left:4%;

}

.navbar ul {

padding-right:2%;

}

.navbar ul li a {

color:#fff;

margin-right:4%;

}

.jumbotron {

background:#ddd;

min-height:300px;

}

.jumbotron h1 {

font-size:100px;

color:#e12b74;

line-height:150px;

padding-left:2%;

font-family:Droid Sans;

}

Things to note here:

• We’ve set the border-radius in the navbar to 0px. We’ve also added a margin-bottom of 0px because we don’t want any gap between the navbar and the main header.

• We have a padding-right: 2% for the navbar <ul></ul>, and a separate margin-right:4% for the individual list elements in <li></li>

• We want our jumbotron to be at least 300 pixels high. Hence, we’ve added min-height:300px;

• The jumbotron h1 line-height is set to 150px (or half of the min-height) because we want to center the element vertically. This is just one way of doing so.

• We’ve used a custom font in jumbotron h1. This is the Droid Sans font, which is also used in Android OS. You can use it through the Google Font API.

This is what the end result looks like:

Extending the same methodology, you can create the entire website from PSD to HTML. For more in-depth grounding in HTML and CSS for converting PSD to webpages, take this course on how to convert PSD to HTML in less than 4 hours.