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.














