header_bg_jpg
Layer 9
Logo_link
scroll fg edge right
scroll fg edge left

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.

adsense area

left top_jpg_relative

User login

Need help or have a question?
support@psd2cssonline.com

| Privacy | Terms of Use |

copyright (c) 2008 Newfind.net, Inc.
Patent Pending

Syndicate

Syndicate content
left bottom_relative
menu filler_jpg
tuts_jpg_link
tuts_jpg_linkover
forums_menu
Support
Tips and Tricks
Gallery
Resources
forum_close
forums_jpg_link
forums_jpg_linkover
docs_jpg_link
docs_linkover
home_jpg_link
home_linkover
gallery6_jpg_link
gallery5_jpg_link
gallery4_jpg_link
gallery3_jpg_link
gallery2_jpg_link
gallery1_jpg_link
Layer 8