Converting PSD to HTML

[tech3]

Hi, here is a tutorial for you guys to convert PSD to HTML/CSS

In this tutorial, We will be discussing how to convert a PSD to HTML/CSS format. For the conversion, you would obviously require a PSD, already made in Photoshop, Photoshop to alter and handle the PSD, and a text-editor for HTML and CSS coding. The basic steps, for the conversion are stated below, followed by detailed steps and screenshots.

Step 1) This step is about thinking of the design and planning the product
Step 2) This step is about handling the PSD.
Step 3) This step is about integrating the PSD parts into HTML/CSS code for the final result.

Lets start with the first step

Planning and Design

This step is mainly about thinking about how you would like to use this PSD into your web document, and how will you go about doing the stuff. This is the planning phase which lets you decide what you would be doing with the PSD and integrate it with the web code. Basically, this step is about overall planning.

Handling the PSD

Open the PSD in Photoshop, ready for editing and making the changes as shown below.



Now, we will have to slice the entire scene into different parts. These parts will then be individually saved, and used in our final product.

For this, we use the Slice Tool, which can be selected by using the K key or by clicking in the interface as below.



A slice is created by clicking and dragging the desired area with the slice tool. After the slice is ready, we right click on it and give it a name.



After the slicing has been done, and your are ready with the individuals, we save this PSD and all its slices. Go to File>Save for Web , click Save, and confirm the settings as shown below and again click on Save



Now, we are done with the slices, and we will move forward to their usage in the HTML/CSS code.

The HTML/CSS code

After you have saved the PSD into a folder, create two files, namely abc.html and styling.css
You will get a folder like this..



Now, the file abc.html is programmed with the following code in the editor.



The below code is inserted in the styling.css file.



Using the codes above, we get a layout in the web document as below.



You can follow the regular coding techniques now, and the website will code on the layout that you have achieved with the PSD to web code conversion. The level of conversion depends upon the amount of slicing, and you can include icons too, by slicing them from PSD, and placing them individually into the webcode using CSS.

By iGuides' Tutorial Writer: Jitesh Banga

Source: iGuides.org Webmasters Talk

[sizzler_chetan]

Wow something really good to learn there..
A good tutorial, will go read it again slowly and try to make a html page from one of the psd's that i have.

[tech3]

Hey, thanks for ur response, i would be adding a part two of this tutorial, where i would detail the initial design steps, and would also include XHTML/CSS coding.. Coming soon!

[iGuides]

That's nice tutorial, we will be anxiously waiting for the next part(s) for the same, good work!

[adimoga]

nice tutorial, thanks for share it

[van_theman]

good tutorial i find it thanks

[urlstand]

This is a nice tutorial, I have posted in in Webmasters news and buzz / Published News / Tutorials and Tips

[bcdxer]

very useful tutorial

[linkingpro]

Thats good. Let me start with slicing them first. I have 3 psds with me for waste. I can atleast learn from them I guess.

[EXleader]

There is a part of Photoshop called Image Ready. Open the edited .psd in Image Ready and then save it into HTML (as a web page)

[iGuides]

There is a part of Photoshop called Image Ready. Open the edited .psd in Image Ready and then save it into HTML (as a web page)

If slicing a PSD was so easy and software generated, there were no web design services

The way you mentioned is to show the preview of web page in HTML format, it does not slice up every thing from PSD to HTML

[kakashoy]

is really useful for me, I am glad to read it here.

[Nikita]

I did not know about that, even i am not used to Photoshop and Image ready. I would like to try this.

[psdtohtmlcss]

Great Tutorials!

[seopiper]

this is a good tutorial... i never thought that there's a way of converting PSD to HTML. pretty cool! thanks for the share!