How to Convert PSD to HTML: A Beginner’s Guide
Shahria Ahammad
Creative Director | Founder of Dalf Studio – Working Across Web Design & Social Content.
In this post, we will demonstrate to you how to convert PSD to HTML based on a simple Web 2.0 design example. To convert our design, I will apply modern solutions using CSS3, HTML5, and Flexbox Layout. Feel free to familiarize yourself with all the features of Flexbox?here.?
I will not be using any frameworks such as Bootstrap or Tailwind CSS. I will simply show you how to transform your PSD to HTML step by step.
PSD to HTML Conversion: Part 1 (the Header)
To get started, please download this?design file.
In this PSD to HTML tutorial, you will need a text editor that can highlight code (I prefer?Sublime) and a graphic editor where you will do most of the work. (I will be using Adobe Photoshop, which works best for opening files in a .psd format)?
First off, open the designs in Photoshop.
Create a new directory with a project name. Inside, create two more directories:?CSS?(for your CSS files) and?images?(for your images).
Now, let’s write this simple code in index.html. You will find it in most HTML slicing projects.
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insight</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
Sample text
</body>
</html>
Here I have added <!DOCTYPE html> that will notify the browser that this is HTML5. I have specified the site’s title inside the tag <title></title> and linked the file to style.css, which is in the?CSS?directory. Now I have the following tag with two attributes <link rel=”stylesheet” href=”css/style.css”>.
Type the words “Sample text” between the <body> and </body> tags.
Open the index.html in a browser (I prefer Google Chrome). You should see the following text in the browser: “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 you will see a block with a big image and some promo text. Let’s call it .hero.
In addition, there is a white area with the main content. I prefer calling it .main but you can choose any title you find suitable.
The last block will be labeled as .footer.
All the content is centered. The first two blocks and the footer are stretched across the whole width of the screen. The main content on the white background has the same width as the stretched areas do.?
Since the blocks with content and not 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">
</head>
<body>
<header class="header">
<div class="container">
header is here
</div>
</header>
<section class="hero">
<div class="container">
hero content is here
</div>
</section>
<main class="main">
<div class="container">
middle content is here
</div>
</main>
<footer class="footer">
<div class="container">
footer is here
</div>
</footer>
</body>
</html>>
First, let’s use Normalize.css?to reset all tag properties. To do that 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 the links since they are not underlined in the design.
a
text-decoration: none;
}{
For frequently used colors in the layout, we will use CSS custom properties or CSS variables. Let’s add them via the inline tag <style> at the end of the tag <head>.?
<head
<meta charset="UTF-8">
<title>Insight</title>
<link rel="stylesheet" href="css/style.css"> <style>
:root {
--body-bg: #fff;
--base-text-color: #55606e;
--btn-color: #fff;
--green: #83c129;
--dark-green: #518719;
--blue: #068fd5;
--dark-blue: #046b9f;
--light-text-color: #fff;
--nav-link-color: #fff;
--soc-link-color: #fff;
--gray-100: #d9dbdf;
--gray-200: #8e959c;
}
</style>
</head>
They are often added as we cut our layout but I selected this set by going through all the colors and then using them in the code.?What benefits do CSS variables bring us in contrast to standard color specification in CSS code? We can easily change and customize our colors without editing the CSS code itself.?
In fact, there are many more advantages to this approach but let’s just stick to the basics in this PSD to HTML conversion guide. This is an example of using variables in the CSS code:
/* specify the value of the variable */
:root { --example-color: #fff;
/* We use a variable in the code that can be applied to an unlimited number of selectors. The value changes in one place and is applied to all selectors that use this variable. */
.example-selector {
color: var(--example-color);
}
.example-selector-2 {
color: var(--example-color);
}}
In Photoshop, measure the width of the main content by selecting the “Rectangular Marquee Tool” or pressing M.
On the information panel or by the cursor point, you will 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 pressing 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 with the following combination: Ctrl + Alt + Shift + S. Choose preset – JPEG High and set the quality to 60% then click “Save”. In the pop-up, select the images folder. Name the image?bg-texture.jpg. Then enable the Eyedropper Tool 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: 1170px;
margin: 0 auto;
padding: 0 15px;
}
.header,
.footer {
background: #15181f url(../images/bg-texture.jpg) repeat;
color: var(--light-text-color);
}
.main {
background: var(--body-bg);
}{
If you refresh the browser, here’s what you will see:
The text in dark areas is white because I wrote the following property color: #fff.
Now save the image from the .hero block. Simply select the layer with the image and left-click on the eye icon while holding down Alt.
Select the missing layer with the image. Now 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 height in your CSS:
.hero
background: #333;
height: 465px;
}{
Let’s add our image to the HTML code and give it the .bg-image class. And also let’s add a property to our .hero?position: relative;
<section class="hero"
<img class="bg-image" src="images/bg-hero.jpg" alt="">
<div class="container">
hero content is here
</div>
</section>>
The CSS will look as follows:
.hero .bg-image
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}{
Here you have added the image and placed it in the middle of the block by absolute positioning and specifying 100% width and height. The property object-fit: cover; tells the browser to stretch the image to its maximum size by either width or height. You can learn more about this property?here.?
You may notice that our image overlaps the content. To fix this, we will raise the container above the image on the stack by adding the following properties:
.hero .container
position: relative;
z-index: 2;
}{
Here’s what you will 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><a href="#">How it works</a></li>
<li><a href="#">Sign up</a></li>
<li><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.
At this point, here is what you should be seeing in the browser:
Now it’s time to create styles for these elements. Measure the top and bottom margin between the logo and the top of the page in Photoshop. The CSS code will look like so:
.logo
margin: 19px 18px 14px 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”, size 16, italic lettering and white color with an opacity set to 35%.
.logo
margin: 19px 18px 14px 0;
}
.slogan {
font: italic 16px "Times New Roman", Times, Georgia, serif;
color: var(--gray-200);
}{
Let’s move to the site navigation styling now. Each element has its own navigation icon. For icons, I prefer using the icon font?icomoon. This resource allows us to use ready-made icon sets and at the same time add our own. Go to the icons section.
For this layout, icons from the Font Awesome set will suit us fine. To find an icon simply use the search feature. Let’s find the icons we are interested in by name and add them to our set with a simple selection. For this tutorial we will use social media icons for the footer.
Here’s what we should get:
Next, click the Generate font button on the bottom panel.
Then download
Save and unpack the archive. You will see the following set of files inside:
Copy the fonts folder with font files to our project folder. Then copy the code from the style.css file and paste it at the top of our style.css file. The only thing that remains for us to fix is the path to our font files. Add ../ at the beginning of the path for each file and you are done.
To Conclude
Hopefully, you have understood all the steps to convert PSD to responsive HTML. It is also true that most of you are already confused about some technical terms mentioned above. You can simply Google them out or ask in the comment section.?
We love to hear from you and are also waiting for your feedback. Thank you for your support and time.
NB: Feel free to DM
Author
Shahria Ahammad
Full-Stack Web Developer & WordPress Expert
Student at Saidpur Government College
1 年The Leader in High-Converting Websites and Landing Pages Boost your leads and sales with over 250 conversion-optimized templates? and a no-code Drag & Drop Builder.Try Leadpages free for 14 days.nerds. https://try.leadpages.com/l4y4scxon026
Creative Director | Founder of Dalf Studio – Working Across Web Design & Social Content.
2 年Are Looking for Pro Developer & Designer slicing Your PSD to HTML like a pro Or Convert your own PSD file into PSD to HTML, PSD to bootstrap? Contact me for more Query ?? also, get super fast service via Fiverr ?? ?? https://www.fiverr.com/sarkarshahed/convert-psd-to-html-figma-to-html-xd-to-html-responsive-bootstrap5