Created a website design in Photoshop...

Hi All

Quite new to web designing in respect of designing my own templates etc. So a bit unsure which way to go about it.

I have created a pretty professional looking template in Photoshop, how can I convert this so i can use it for example in Dreamweaver or in other web designing programs?

Thanks in advance for your help.

Jon

Are you gonna use the template for some sort of CMS?

As far as I know, I've never done it this way, but I'd imagine you have to cut the template up into several images, and then make a series of tables in dreamweaver, and then assign each table the correct background image, so it all makes sense.

Some people like to slice the image, but I like to use the ruler and crop and hand-code in Notepad or a syntax highlighting text editor.

Unfortunately, as cool as it would be, there's no button to simply convert the design into a fully functional HTML design. You can try the slicing in File -> Save for Web.

^^ I do the method that Jason mentions (the Slicing >> Save for Web) although it may sound easier, its a bit hard (because the fact is that the slice lines like to "snap" into place so getting a thin bar on a template is a little problem... I usually zoom in to do this.)

At the same time, once the template is saved for the web, it needs a bit of "cleaning up" --- to center the template, apply the background, coordinate the "spacer.gif" with the rest of the theme, etc. Its a bit of work at first but it gets easier along with time.

Either way, great method you use to Jason... might have to try it and see which way works faster for me.

Slice > too much tables

Try this slicing guide:

http://www.csslicingguide.com/

EDIT:: Posted in wrong thread lol.

Thanks for that Julian, will give it a go now. I had heard of slicing but that guide you linked me to shows me exactly how to do it.

Great!

I also realized that if you want, you can slice the images and save for web... when you save for web you can either save both a HTML file and the IMAGES or one or the other. Keep in mind that if you have a background... save a piece of that image, and that'll work for the entire page. Its complicated to explain but Julian's link should help a bit.

Slice and save as html and images.