PSD to HTML Conversion

Designing a website involves many
steps, and one of the most important is
the conversion of PSD files into HTML
format. Here, we will discuss how to do
the conversion process easily and
efficiently. Before you start the
process, you first need to know some
of the basics.

What is PSD?
PSD means a Photoshop document. Photoshop
is a popular application for image editing. It helps
you to edit photos, create designs using layers
and save the final design in various formats. The
default file format in Photoshop is *.PSD.
Web designers first create their designs in
Photoshop. Those designs are then converted
into HTML format. Generally, the conversion job
is handled by the coding experts — not by
graphic designers.

What is HTML?
HTML stands for Hypertext Markup Language.
HTML is a popular coding language used for web
page creation. It uses preset tags. The latest HTML
version is HTML5.
Web design is a creative process, and if you start
coding directly, you may not get the creativity and
the aesthetic appeal in the process. Hence, having
a graphic representation of your design at the start
can tell you where you are heading in your website
creation. When you have the graphic representation
of the design, it is rather easier to work with the
codes.

Different approaches for converting PSD to
HTML
It is important to know what the options are before
beginning the process to convert your Photoshop
files into an HTML file.
Ways to enable the conversion process:

Self coding

Automated tools

Getting help from a PSD conversion company
This document will cover the process of self-coding.

Beginning the conversion process
We assume that you already have your design in
the PSD format. Finalize the design before you
start the conversion process.
If you are designing the website for your client,
then first get the approval of the design from your
client before you start the conversions so that
you don’t need to rework unnecessarily. PSD to
HTML conversions can be time-consuming: plan
well to avoid time wastage.

Different components of your web pages

Logo: The logo is generally placed in the
header of the webpage in most of the design
layouts.

Header: It refers to the top portion of your web
page. Depending on the layout, it could
contain the company’s logo, tagline, flash
animation, image, sliders and a navigation
menu.

Body: The body of the website contains the
textual content and user sign-in module if any.
When you are converting the website design which
you have created using Photoshop, you need to
make sure that all of these components are placed
in the appropriate positions without losing the
design harmony of the page.

Slicing
In this step, the PSD file which you have created
and made of several layers should be sliced.
Slicing is the breaking up of a single large image to multiple small
images. One of the benefits of using a sliced version of PSD in
your HTML page is that it will help in faster loading of the pages.
If the entire PSD file is kept a single PSD file then it will take
plenty of time for the page to download. To slice your image, you
can use the slicing tool available in Photoshop. There are four
types of slicing options available in Photoshop for breaking your
web page into small pieces:
Normal
Fixed Aspect Ratio
Fixed Size
Slices from Guides
Once you have sliced the PSD file, make sure to save the sliced
version using the option “Save for the Web”. Save these images
in ‘images’ directory.

Create required directories
You need to create the required directories in your
computer to proceed in an organized way:
Main folder with website name
Subfolder named ‘Images’ under the main folder.
Here you will store all the images that you will be
using for your website
Subfolder named ‘Styles’ for the CSS file or for style
sheets under the main folder

Working with HTML page
After you have created the required folders, now it is
time to create your HTML page. You can use an HTML
page builder such Adobe Dreamweaver or open source
option like Amaya or Komposer. Create a new file in
Dreamweaver and name it as index.html and then save
it in your main folder.
Next step is to create styles file. You can do this in an
HTML editor and save the new file as styles.css in the
CSS folder. In the style sheet, we will give all the
information regarding the stylistic features of HTML web
page like font size, font type, background color, the
position of the images, margins and fieldset among
others. The CSS style sheet should be linked to the
HTML page.

Building a set of website designs
Now, we will take you through the entire process of
getting from Photoshop to completed HTML.
We will build a set of PSD files for a website which
will become a WordPress theme.

Step 1 – Ready the editor
First of all, open the code editor of choice like
Dreamweaver and set up a “Site”.

Step 2 – Quick layout
Now, we will construct a quick overall
layout in HTML with some CSS just to
make sure we have got a good
foundation. We can also check it in
major browsers like IE, Safari and
Chrome.
Browser compatibility issues should be
sorted out now only.

Ready the Mockup (pt. 1)
In the first mockup, we should find:
The design is centered, means we have to wrap it in a
container and then center that container.
The design is a series of horizontal blocks. Sometimes
the blocks have two columns. We can do it in series.
We have a footer which is in a different color. It means
the background needs to be that color, if the user
browser stretches. Hence, the footer will need to sit in a
different container to the main stuff.
Here is the HTML layout:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creatif</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="wrapper">
<div class="container">
<div id="header">
<img src=”images/logo.png”>
<ul>
<li><a href=”#”>menu1</a></li>
</ul>
</div>
<div id="main">
<div id="section1">
<h2>What is Lorem Ipsum?</h2>
<p>Section1 content</p>
</div>
<div id="section2">
<h2>Heading2</h2>
<p>Section2 content</p>

You can see that there are two
segments: the #main area and the
#footer area. Inside each, we have a
<div class=”container”> element which
will be fixed width and centered. The
main container includes a sequence of
<div>. Now we will add CSS code as
follows:
</div>
</div>
<div id="footer">
Copyright2017,All rights reserved.
</div>
</div>
</div>
</body>
</html>
body{
Background-color:#0c80ab;
}
.container{
Width:950px;
Margin:0 auto;
}
#header {
background: #86c0d5;
color: #000;
text-align: center;
font-size: 15px;
</div>
</div>
<div id="footer">
Copyright2017,All rights reserved.
</div>
</div>
</div>
</body>
</html>

Now we will add CSS code as follows:
We have set the body’s background
color as the light blue of the footer.
Then the #main area has the lighter
background. You can also see the
.container elements have a width of
950px and are centred using
margin:auto.
body{
Background-color:#0c80ab;
}
.container{
Width:950px;
Margin:0 auto;
}
#header {
background: #86c0d5;
color: #000;
text-align: center;
font-size: 15px;
}
/* ———————— MAIN CONTENT ————–*/
#header ul{
Float:right;
}
#header ul li{
Display:inline-block;
List-style:none;
}
#header ul li a{
Display:inline-block;
Color:#000;
Font-size:15px;
}
main {
Background-color:#6db3cd;
Margin-top:50px;
Padding:30px 0px;
}
#section1,#section2 {
float: left;
width: 100%;
background: #b6d9e6;
color: #000;
font-size: 15px;
text-align: left;
padding: 20px;
Margin-bottom:30px;
}
#section1 h2,#section2 h2{
Font-weight:bold;
color: #000;

Step 3 – Add some background images
So our layout is now in shape. With main elements positioned,
we can now style it up. First of all, we need some images. You
can make these yourself if you have layered PSDs. Now, use a
large background image. You can also create a background
image for the footer. So you can now update the CSS file and
add the new background images. The first thing to do is to create
a directory structure and get ready to build like an /images/
directory and a /scripts/ directory and save all CSS and HTML in
the root.
Each time you want to get your PSD files converted, you should
be careful of all the factors. Let quality be your watchword. If you
make your decisions on this factor, then they will be the right
ones.
font-size: 20px;
text-align: left;
padding: 0 20px;
}
#section1 p,#section2 p{
Font-size:16px;
Line-height:1.4;
Color:#000;
}
#footer{
Background:#86c0d5;
Color:#000;
Text-align:center;
Padding:60px;

PSD to HTML Conversion

Related slideshows

More Related Content

PSD to HTML Conversion