SHARE
Example .psd to html conversion in photoshop
Example .psd to html conversion in photoshop

Convert .psd to html is very useful,when you are going to create a website theme. To convert .psd to html file follow these four steps.In the following i convert simple theme .psd file into html file.

Divide.psd file in sections with slice tool

Each website has main four sections.Header,content,sidebar and footer section.To create these sections in .psd file use slice tool in adobe photoshop.First of all open .psd theme file in the adobe photoshop.Pick slice tool from tool bar.Create the first slice of header section by select upper area of .psd file.Right click on header section and file name of slice “header”.

Make slices with slice tool
Make slices with slice tool

Create second slice to create content section of website by select with slice tool.As it is create sidebar and footer section of website by making slices.

Save work as Html And Images Only
Save work as Html And Images Only

Save For Web And Devices: Go to file menu.Click on save for web and devices.Click on save.Write any file name and select format as HTML and Images only.Know .psd file converted into html.You get one folder name images and one capture.html file on desktop.

Read Before Convert .Psd to Html: Photoshop can convert .psd file to html even if you are not create slices. Photoshop create slices automatically.In that case slice are not properly coding friendy.So create clean and accurate slices to get accurate webpage coding

video help guide to See the video for complete details