Tutorial on how to save PSDs as HTML

Hey folks,
I have seen a lot of posts of people asking for ways to convert PSD to HTML


Well, its very easy and I have compiled a step by step tutorial on how to do it.


Requirements:
Photoshop


STEP1:Open up the PSD file which you want to make HTML.
http://img3.imageshack.us/img3/4201/96266191.jpg



STEP2:Slice it up. Press K and drag boxes around different things you would want as buttons, sidebar, the header etc., LIKE THIS:
http://img228.imageshack.us/img228/4364/36777274.jpg

TIP:I would recommended making slices of large images even if you dont want then as the buttons etc.
That is because browsers take less time to load multiple small images rather then a sing large image, LIKE THIS:
http://img511.imageshack.us/img511/7606/11009467.jpg



STEP3:Assign the links alt etc to your images, LIKE THIS:
http://img191.imageshack.us/img191/2721/67932307.jpg
http://img687.imageshack.us/img687/320/96149401.jpg



STEP4:Leave space for text, LIKE THIS:
http://img41.imageshack.us/img41/9859/86429603.jpg
Then:
http://img692.imageshack.us/img692/9624/66588849.jpg
Now you will see a text box
Add text to this if you want to do it now
or do it later if you can edit HTML
http://img13.imageshack.us/img13/909/72821984.jpg


NOW THAT YOU HAVE COMPLETELY CUSTOMIZED YOUR PSD ITS TIME TO ACTUALLY MAKE IT AN HTML



STEP5:Go To File>Save for Web & Devices
http://img717.imageshack.us/img717/6139/41331337.jpg



STEP6:A box like this will appear
http://img705.imageshack.us/img705/1934/17896700.jpg
Just click Save



STEP7:Now choose the location of the HTML, its name and what you want to save(HTML+Images OR HTML OR images)
http://img208.imageshack.us/img208/9458/57999208.jpg
and just press SAVE

AND YOUR DONE

Just check your stuff and do save the PSD so that you can easily make changes when needed

I would be very happy if this thread was made sticky
because everyday there are people asking about this and this is a very comprehensive tutorial
leaving no room for questions

 

Thanks for your tutorial =) very interesting

 

Can you please direct me to an html document that has been created with CS3 or 4. I would like to examine the html code that it generates.

 

Thankyou very much, this is the best tut of its kind I've seen here. Very greatful!

 

Please keep in mind that the HTML that is generated by the program is table-based, thus bringing over all the problems associated with it, such as inflexibility, lack of accessibility and you'll have to edit every single page if you want to change something related to design.

So you better stick to doing it the proper way using external CSS stylesheet.

 

here you are james:

http://www.e-webtemplates.com/html/PRO-templates/1/1.htm

Code (markup):

if you want to download this template:

http://www.e-webtemplates.com/html/PRO-templates/1/1.rar

Code (markup):

 

well sunshine
if you actually think that this is an improper or wrong way of web development
then why is there a market full of people selling

even you work for people who BUY(or download) them

and i also said i my post to save PSDs

web editing in photoshop is object oriented and no coding of objects is required that means that you require no knowledge or experience of CSS or HTML etc
only a good imagination

 

You didn't get my point.

You'll suffer in the long run if you don't do it the proper way.

Once your site grows to 100+ pages, editing the design will be a pain in the ass since you'll have to edit every single page to do that.

 

Thanks asad. I think I will stick to converting PSDs to HTML(CSS) by hand.

 

ok..you choice..

 

I wish it was a choice. Using CS3 is much easier I am sure, but I build websites for businesses. The code generated by CS3 is not ideal for search engines. A business website with limited search ranking capabilities will limit the online marketing coverage, or even ruin it all together, making the website all but useless to the business. So, until I find something that generates cleaner code, I'm stuck hand-coding.

 

How do you convert PSD to css/html by hand? Is it merely by eye?

 

I see what you mean now after having tried it. I shall be doing it the good old fashioned hard-coding way in future.

 

Yes Josh, I converted My website from PSD to CSS/HTML by eye.