In this tutorial we will see how to convert a template made in Photoshop to a web site; xhtml with CSS directly from Photoshop.

This method is recommended for designers who do not know a lot of code. It is a simple way to start and play with the code to learn how to modify it.

We start with a basic template for website. I recommend you see the article: Part of a blog to get an idea of how your design should be and which parts should contain.

The first thing we need to do is identify the various parts of our site as a banner, buttons, sidebar, etc. We mark these parts with the guides.

Select the slice tool

With this tool, select the parts marked with the guidelines.

Once we have made every slice, select the slice select tool

With the right button or ctrl. Click select one of the slices.

In the slice menu options proceed to put a particular name, such as banner.

Do it with each of the cuts.

Once you have all the names go to menu file / save for web and devices

Click on save

In the menu select images in HTML format, and settings / other

Then a menu will appear where you specify the options to save as a web page.

On the first window select xhtml

Now select generate CSS and By ID

In the next window you can choose the background color or image

Finally we give ok and save.

The result will be an HTML file with a folder with images.

If we open the HTML file in the upper section we have the CSS code

At the bottom HTML

With small changes in the code can add text to the sections we determined for this. First add the text in the corresponding division

Then modify the CSS rule to determine the font, color, background color, etc..

Now we have a very basic site made with Photoshop. This method is great to create quick templates that you can modify latter.