Blog

PostBlog Posts

Step By Step Tutorial on PSD to Bootstrap Conversion

Step By Step Tutorial on PSD to Bootstrap Conversion
August 13 2017

In this tutorial, I will enlighten you with basic concept step by step on how to convert PSD (Photoshop Design) to a fully functional bootstrap website.  You will have a superficial knowledge on what PSD to Bootstrap conversion is. 

Some Terminologies You Should know 

PSD (Photoshop Design)

PSD is file format which can be executed by a software used by web-designer to create layered web templates/layouts called Adobe Photoshop.

HTML & CSS

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications

(Reference : https://www.w3.org/standards/webdesign/htmlcss)

Bootstrap

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

(Reference : https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) )

STEP 1 

Assuming you already have a PSD file, you’ll now have to slice the layered PSD into HTML. In order to slice the PSD you have to separate each Individual images into a separate JPG/PNG file. Do not use text as image. You should always use text whenever possible. As text light weight compared to image and is readable by google. It not only helps load your website faster but will contribute in SEO as well.

STEP 2

But remember to separate images in such way that HTTP request won’t be overloaded. To fix too many HTTP request you’ll have to create CSS sprite. 

CSS Sprite groups images into one and controls display of required image via CSS.

STEP 3

Once you are ready with all your images in hand. We will code HTML (https://www.w3schools.com/html/) & CSS (https://www.w3schools.com/css/) with bootstrap (https://www.w3schools.com/bootstrap/).

 

 1. Write a html code including bootstrap CSS and Bootstrap Js into the HTML file. 

<!DOCTYPE html>

<html lang="en">  

<head>    

<!-- Required meta tags -->    

<meta charset="utf-8">    

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    

<!-- Bootstrap CSS -->    

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">  

</head>  

<body>    

<h1>Hello, world!</h1>      

<!-- Optional JavaScript -->    

<!-- jQuery first, then Popper.js, then Bootstrap JS -->     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>    

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>    

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>  

</body>

</html>  

  1. Separate Header, Content Area, Sidebar and Footer Section inside body (<header>,<section>,<aside>,<footer>)
  2. Now fill the header with logo, menu & call to action button (as per psd design)
  3. Separate each section in content area with <section> tag.
  4. Define CSS for each tag wherever required but do not repeat the same code. Try to generalize/modularize the CSS classes as much as possible for reusability.

 

Useful Link : 

  1. https://www.w3schools.com/html/
  2. https://www.w3schools.com/css/
  3. https://getbootstrap.com/docs/4.0/getting-started/introduction/
  4. https://1stwebdesigner.com/psd-to-html/

Our Related Service : Build Website with PSD to Bootstrap Converter

 

Still Searching ?

We are the Best in the Business.

;