[sgmb id=”1″]
In the previous post, we have discussed what is PSD to HTML? Now we see how to convert PSD to HTML, a beginner guide. Let me assume that you all get basic idea about PSD and HTML conversion. For a little recall, PSD is a Photoshop document which contain graphical design whereas HTML is standardized language for web development contain text files written inside tags.
How to convert PSD to HTML
The next step you need to know is how to convert a PSD file to HTML text files for this you need to learn the following
- How to create a PSD file?
- How to create an HTML file?
How to create a PSD file
To create a PSD file, as it is a Photoshop document you must have relevant software. Install latest version of Adobe Photoshop(link) in your system. If you don’t find any, simply go to the site and buy it.
Once installation is done, open Photoshop and create a new file as shown in the image bellow
Well, designing is easy as it need creativity and ideas. But before getting into road you must follow the basics.
While creating a new file a pop up will open which ask for new PSD file specifications. Fill it carefully according to the design need.
Follow the given image to see what these specifications are about and why they are important.
- Mention your project name in “name” field.
- In preset select the file type e.g. you are creating PSD for website than select web.
- In third step you need to adjust width and height according to the size of your file. You can also change measurement e.g. in pixel, inches etc.
- Select color mode as per your design. By default, it is selected as RBG color, 8-bit mode.
- You can also select your background type; it could be colored or transparent.
Once you are done with all settings and measurements, click on “OK button” and a new file will be created. In this file create your desired design. You can also get help from different sites and tutorials to know how to create a PSD.
The very next step after PSD creation is to slice your PSD. Every PSD is different and contain images which aren’t available on google. So we need to slice images and banners from PSD.
PSD Slicing
- To slice an image, select slice tool from tool bar as shown and draw boundary around the particular shape or image.
- Once you select all images press shift+alt+ctrl+s and save them as png.
How to create HTML file
For HTML code we first need an IDE like I am using Dreamweaver for code and Firebug as compiler. It’s really important to test your code at every stage and on every browser to get best results.
Create proper folder:
How to create a PSD file
You need to create a directory folder, inside which you’ve sub folders like
- Images
- CSS
- JS
And your text file with the name “index.html” where html is extension.
Basic HTML code structure
HTML code totally depends on the PSD you are following. But there is always a basic code which has to implement every time while creating an HTML file. The structure is mainly divided into three portions.
- Header: it contains logo, header area and menu bar.
- Main: main is further divided into different sections that shows content of the page.
- Footer: footer is the end area of any web page, which mostly contain the footer section.
So the code looks like as,
What next to HTML
HTML is a simple way to show page data e.g. content, images, tables and paragraph on web. It further needs to be style through CSS.
What is CSS
CSS is a Cascading Style Sheet, that give style to HTML elements. It’s a very simple language to understand. In CSS we create classes/id’s and call them into HTML tags. This file is save with “.css” extension.
There are also some functional elements in web site which can neither handle by HTML nor by CSS, js is used for this purpose.
What is JS
JavaScript is an object oriented programming language use to create interactive effects for websites.Using JavaScript libraries, we can crate sliders, popup menus and much more.
That’s all about PSD to HTML conversion. Many people find it difficult. But only professionals can make it good to go. It is also in news that PSD to HTML conversion is dead. Well, experts have join their heads to take deep review either these rumors will create any impact on “PSD to HTML conversion” in near future or still it be the best method for web developers.
