Step By Step Tutorial on PSD to Bootstrap Conversion
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)
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.
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.
1. Write a html code including bootstrap CSS and Bootstrap Js into the HTML file.
<!-- Required meta tags -->
<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">
<!-- 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>
- Separate Header, Content Area, Sidebar and Footer Section inside body (<header>,<section>,<aside>,<footer>)
- Now fill the header with logo, menu & call to action button (as per psd design)
- Separate each section in content area with <section> tag.
- 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 :
Still Searching ?
We are the Best in the Business.