When we design a website that involves many steps, and one of the most important steps in the web design process is the conversion of your PSD files into HTML format. Here, we will be discussing how to do the conversion process easily and efficiently.
Before you start the process of PSD to HTML conversion, you should first need to know some of the basics.
What is PSD?
PSD means a Photoshop document. Photoshop is a popular software 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 and then convert them into HTML format. Generally, the conversion job is handled by the coding experts — not any 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 into HTML
It is important to know what are the options 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
Beginning with your PSD to HTML conversion
We are here discussing the last approach. We assume that you already have your design in the PSD format. Finalise the design before you start the conversion process as it may involve a lot of your time.
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 consumes time hence 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 look and feel appeal and 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, namely:
- Normal
- Fixed Aspect Ratio
- Fixed Size
- Slices from Guides
Once you have sliced the PSD file, make sure to save the sliced version. Save it using the option “Save for the Web”. Save these images in the ‘images’ directory.
Create required directories
You need to create the required directories in your computer to proceed in an organised way. You should create the following directories:
Main folder with website name
A folder named ‘Images’ under the main folder. Here you will store all the images that you will be using for your website
A folder 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 of a website which will become WordPress theme later.
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, think we will do is 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.
In the first mockup, we should find:
The design is centred, means we have to wrap it in a container and then centre that container.
The design is a series of horizontal blocks. Sometimes the blocks have two columns. We can do it as a series of.
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>
<li><a href=”#”>menu2</a></li>
<li><a href=”#”>menu3</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>
</div>
</div>
<div id="footer">
Copyright2017,All rights reserved.
</div>
</div>
</div>
</body>
</html>
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 centred. The main container includes a sequence of <div>. Now we will add CSS code as follows:
/* —————— HEADER HERE ——————-*/
body{
Background-color:#0c80ab;
}
.container{
Width:950px;
Margin:0 auto;
}
#header {
background: #86c0d5;
color: #000;
text-align: center;
font-size: 15px;
}
#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 CONTENT HERE ————–*/
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;
font-size: 20px;
text-align: left;
padding: 0 20px;
}
#section1 p,#section2 p{
Font-size:16px;
Line-height:1.4;
Color:#000;
}
/* —————— FOOTER HERE ————————–*/
#footer{
Background:#86c0d5;
Color:#000;
Text-align:center;
Padding:60px;
}
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.
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 /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. Quality should be your top priority. If you take your decisions on this single factor, then you are likely to make right decisions.
