Hey folks, I'm looking to purchase a template soon, I downloaded a free sample template to see how its gonna work, and I need to know how to convert PSD (photoshop) images into HTML images? Thanks, and sorry for the n00b question.

I'm not sure what you mean by converting PSD to HTML images, but you can always optimize your images for the web by selecting layer (image) > File > Save for Web > (make sure GIF is selected) and click OK.

You first try to learn Adobe photoshop. There are plenty of tutorials available online. Converting PSD to HTML is very simple, you will come to know.

Ok, this is going to be complicated to explain but I will try to do so.

- Open the PSD File you Wish to HTML in Image Ready
- Find and Select The Slice Tool
- Use the slice tool to divide your PSD into sections. NOTE - ALL BUTTONS, and different parts should be cut as separte peices. I suggest you download a template from a website and highlight all the graphics to see how it is htmled.
- Next you will need to export slices. This should be under the file menu. It will be called something different on each version of PS.

Thats it I guess. If I've left anything out please post it.

Yes its a simple process, but mastering the art is a fine tune! :)

yes, it takes awhile to get it perfect. Again nothing is ever perfect.

This is something I have always wanted to know ... Could someone enligten me or point me to a URL explaining it?

What is a sliced PSD and why do you want it over a regular HTML page?

Originally posted by pgrote
What is a sliced PSD and why do you want it over a regular HTML page? Well, really you don't, and that might be a sign of a misunderstanding. You don't use a psd instead of an html page, you use it as a starting point in creating your pages.

Often a design will be "prototyped" in Photoshop or another graphics program. Basically you make an image of what the final page (or just a section of the page, like header graphic with navigation elements, for example) will look like. It's a good way to polish up the graphics and layout, etc., and also to show to a client during the development process. But then you convert that file, creating a "normal" html document with associated .gif or .jpg images created from the appropriate elements in your original .psd file.

"Slicing" is used in a lot of different ways, from simply dividing a large graphic into smaller parts (that are then held into place on the final html page by placing them into table cells) to creating "hotspots" that will be used in rollovers and the like (also generally held in place through the use of table). Same thing applies really: you create the images to be used in those effects in your graphics program, but the final product is an html document.

These days programs like Photoshop and Fireworks will create the javascript and html tables and such that you can use to pull all of this together. It used to be that you had to code all of that yourself, and indeed a good coder can still usually do it better without using that "feature."

But in context here, sometimes what's sold as a "template" is nothing more than a .psd file; essentially an image of what the page will look like. You then have to create the html from that, and so can choose how much of that task you want to do in Photoshop (or a similar program) and how much you'll do by hand or with other tools. But the point is that the final product is an html file -- with related image files.

What is a sliced PSD and why do you want it over a regular HTML page?

There is an option in Photoshop to make slices in PSD files. It then generates HTML page. It is normal HTML with all images converted to gifs or jpgs and in proper tables.

Thanks for the great explanation folks!

Originally posted by floppy
There is an option in Photoshop to make slices in PSD files. It then generates HTML page. It is normal HTML with all images converted to gifs or jpgs and in proper tables.

Which is good and fine if you want to do the exact opposite of what the w3c recomends (http://www.w3.org/TR/html4/struct/tables.html).

http://arstechnica.infopop.net/OpenTopic/page?a=tpc&s=50009562&f=6330927813&m=1190911035&r=4780941035#4780941035

http://www.alistapart.com/stories/practicalcss/