Log in

View Full Version : PSD to HTML



eds
11-04-2011, 11:20 PM
Hello
I am trying to convert a psd file to html. I downloaded a free psd template and after I modified I am ready to convert it in html. I have looked over the web for tutorials another stuff but I got lost. Most of them required to write a code and I got not clue on codes. In the meanwhile when I open the psd with fireworks cs5 I can view the sliced parts layers from the original psd so I guess i do not need to do that job. But I do not know how to convert it in html so I can continue with dreamweaver the creation of my site.I tried to export is as html but I still get all pictures and i cannot thereforE insert a text in DW cs5. Also I tried under the slice web toll to export all part as as images and only the main body where I plan to put the text as html but I still have failed.I also
opened the psd in Photoshop using the slices, then Save for Web & Devices..., Save..., Format > HTML & Images, but what I get is an image html which is not good in terms of SEO
Secondly when I opened the html file with DW cs I got the design let me call or a layout. Should I start filling it with the images obtained from the psd?But how will I be able edit the text in DW since it will be a set of images?Could you please suggest me how to do that?Also I plane to insert a flash menu on some images. Do i have to do that before exporting it in html or it is still possible to do that later. Thank you!

auntnini
11-05-2011, 12:33 AM
You are on the right track in Photoshop FILE>Save for Web & Devices then SAVE>Format>HTML and Images to get a basic HTML page with your image slices in a <TABLE>. But, no matter how you slice it, an image -- such as a Photoshop .psd file -- is not HTML (Hypertext Markup Language) nor a CSS (Cascading Style Sheet) file.

There are many sources available about creating and HTML page -- such as http://www.htmldog.com/guides. Dreamweaver is a great editing tool, but it cannot do the whole job for you. In Dreamweaver, you might want to click on More... at the bottom of the opening Welcome screen, and then choose a template. This will give you some HTML and CSS code to begin with. You can then use the Insert menu to put images into your HTML page.

See the screen shots.

P.S. --

But how will I be able edit the text in DW since it will be a set of images?Could you please suggest me how to do that?Also I plane to insert a flash menu on some images. Do i have to do that before exporting it in html ...

Don't use images for your HTML text. The templates should help you with formatting and positioning text. A "FLASH MENU"? You embed a Flash .SWF into an HTML page.