The Simple Example

It's easier to learn by 'doing' than by reading some manual. Here's an example of the simplest use of psd2css online. Follow along and see how easy it really is.

Here is the generated page and source PSD file so you can follow along if you would like:
http://psd2cssonline.com/tutorials/template/index.html
http://psd2cssonline.com/tutorials/template/Template01.psd

Step 1: Create your Layout

You might have already done this. At least you know what you want your page to look like in your head. psd2css online is all about the layers! Use your favorite program to create your layout and save it as a .psd file. The big trick is to keep the parts of your page that you want separate in different layers of your .psd file.

The 2 best programs for creating your layout are Photoshop and The Gimp. Photoshop is the defacto standard, but is can be a little pricey for the beginning webmaster (there's a huge discount if you're a student!). The Gimp is nearly as powerful and completely free.

If you want to read a little more about layers in these programs, here are some good resources:
http://www.photoshoproadmap.com/Photoshop-tutorials/Layers-and-channels/...
http://carol.gimp.org/gimp/tutorials/basics/layers.html
or just google 'photoshop layers' or 'gimp layers'

I'm going to use Photoshop CS3 for this tutorial.

Here is my layout in Photoshop:

Step 2: Upload and convert

Ok, that sounds like 2 steps. But really it's just one thing to do. Visit the front page of this site and use the form there to upload your .psd file. Click on 'upload file' and your done.

Step 3: View and download your CSS page

After psd2css online converts your web design into a usable web page, you can view it by clicking on the 'View your converted CSS webpage!' link to see the page created.

Download the psd2css.zip file that contains your code for the page and all the required images. You can customize the generated code (I added the text to this example), or you can use the generated pages just the way they come.