Today the demand of websites and blog are growing day by day ,so is the number of web developers to fulfil the need of website development. In web design there are hundreds of methods to develop and design, PSD to HTML conversion is one of hundred.
So here we present you the step by step guide , which you should know. So, Stick till the end to learn something new.
Before we start the tutorial , we should first clear the basic idea of the terms used in guide.
What is PSD: It stands for photoShop Document and is the extension of photoshop files.
What is HTML: it stands for hypertext markup language which is the web development language.
Introduction to PSD to HTML conversion
The first step is to create a design of webpage in Photoshop which is popular for editing pictures. Then, slice the image of design into small pieces for fast and easy conversion. After the slicing ,convert it into html format.
Converting PSD files to HTML files requires numbers of process, however one can use different approach to do the job, which are:
- Automated ( by software)
- By expert
Automated ( using software for PSD to HTML conversion)
In market there are hundreds of software available for conversion process ,which makes this really easy and fast. But it come with some drawbacks as you cannot get the desired and quality result of custom HTML/CSS code.
A automated system cannot deliver the pixel-perfect conversion which is achieved by hand coding.
It doesn’t mean that automated conversion is useless . it can be used to convert some of the ecommerce designs like shopify and many others.
In this tutorial we will see the process of conversion by self-mode. So to start working on we require some software which are:
- Text Editor
So ,lets the step by step tutorial to convert PSD to HTML.
We assume that you already have some ideas about using photoshop & html editor.
Step 1: before starting the process of conversion ,we first need to determine the layout of our web page.
Commonly there are 4 types of layouts to choose from, which are the followings
Responsive: Responsive is the ideal and most preferred choice of every web developer because it is compatible with all the devices and it adjust the layout size to fit the screen of every device. This layout can be the core of many designs.
Mobile: Many apps do not support web platform and do not need to use in web environment .they only meant to run on mobile phones.
Fixed: As the name defines it is designed with fixed ratios of height and breadth to fit only on desktop screens and are static web page.
Fluid : fluid means can adapt and sift in any container ,same as this. Fluid layout can be used in both desktop as well as mobile screens. It shift its size whenever the user makes the size of screen small or big.
Components of a website design
it is very necessary to have idea about the components of a website page. Following are the different components.
Logo : a log is always to be placed in header section, however you can place at different position also.
Header: it is the top section of a web page layout and it should contain the logo, header text, title ,images and menus according the layout design.
Body : this section is the main part of the website all the important things like context ,post ,sign in page ,all should be place in the body only.
After that all the design of webpage is completed in photoshop and check if all the components are placed in the right position which doesn’t alter the looks and feel of web page. Now move on to next step.
Step 2: convert PSD to HTML
After the designing process is completed ,then is time to convert that design into code. Follow each and every step to do it effectively.
1) slicing PSD: slice the PSD file into number pieces which is beneficial in the faster loading of web page because a single PSD image will take much time to load than the small ones. Slicing can be done in photoshop with the help of slice tool.
After the slicing process is over ,make sure to save the sliced version images in “save for web” menu. These images can be put in the image directory.
2) create directory: creating directory is a good practice in doing effective work and you can manage all your files easily with the help of directory. In this way all your files will be in organized place.
You can create different directories like main folder , in which all webpage files can be stored such as images ,logo and other is Style folder which will store the CSS sheet of website.
3) html: after all the slicing and directory work is done ,the crucial part comes in which is creating html file. You can use many software for creating html file such Adobe dreamweaver , komposer , Amaya. However adobe dreamweaver is the most preferred option. Now create the html file and save it as index.html and save it in the main folder which we have created earlier. ( we assume that you know how to code in html)
In today , HTML5 is in demand to code because it is easy to code in here than old html environment.
HTML5 includes section which is easier to code.
Header: it is the top part of any page which contains logo or title.
Hero: there is a big section on the top to emphasize a particular image or others.
Slideshow: it is present in the top section to display series of images which slide one after other.
Content: the main are of webpage where all the data is presented such as text ,images, signin button if have any.
Footer: this part is present in bottom part of page which includes contact info ,disclaimer and other important things.
4) style sheet: after the html file have created it is better to create style sheet which is CSS . it make the web-pages more attractive and interesting. You can create style sbeet in bootstrap also. Creating style sheet has scope in further presentation of webpage which you can create in html editor also and save it as .CSS file. And link it with html file.
After that you have created the html and css files , it is now time to put all together with the help dreamweaver to get a strong foundation of the quick layout of the page.
Here the tutorial is finished and I hoped you have got an idea on how to convert PSD file to HTML files.