Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Getting Started

Getting Started

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:

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:
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 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.

When pressig the home button

I want to change images on the website.
How do I handle this?

Thanks for this great site, keep up the great work!!!!

Missing stylesheet

I'm getting this error message after uploading to WordPress...

"The following themes are installed but incomplete. Themes must have a stylesheet and a template."

missing style CSS

I got the same thing. First time trying this. I don't know what to do. Gonna play around with it and see if I can solve it.

Blank page

after I uploaded my PSD file, it doesn't show me anything

no result

after uploading it shows me nothing

AWESOME website man!!...your

AWESOME website man!!...your a life saver!!



Navigation Bar Include

Hey Shaun. Your web site is truly amazing. I have no experience with CSS and you just made my life so much easier. Anywho, I just uploaded a psd file and converted it; however, what I wanted to ask you is how would I include the navigation bar for all the html pages that I will be making?

I want to make these html files:
and so on...

But I want to include the navigation bar at the top of each page. I have very little knowledge of DreamWeaver, but I can manage. How can I include the navigation bar without having to manually inserting it on every page?

Thanks in advance for your help!!

Menu And Hover Menu

I believe you need to check out the documentation on Menu and Hover Menu


I already made the Menu Bar

Hey Brandon,

I already made the navigation bar. I just wanted to know how to include it at the top of all my html pages without having to manually insert it.

Every one of my pages will have the Navigation bar at the top but I didn't want to go through the troubles of making it for each page. I'm not sure if I am clear with my description. Sorry I am an uber noob. =)

Thank you for infos. It

Thank you for infos. It really helped me out with my problem of

Similar troubles

Would really appreciate help with this:

When i come to install the zip file in joomla i get this:

"Error! Could not find an XML setup file in the package."

I got this even when using the tutorial template! Does someone have an idea about what's happening?

JInstaller: :Install: Cannot find XML setup file

same problem here, cant seem to find a solution

My sites

layers pictures

would it be possible next to each tutorial to have a picture of the layers in psd as everything is related to the way you title your layers.
another question how is created the index and how the layers link to it are titled.

what size to make the psd document

in order to upload it onto wordpress what size should it be?

no images

all my images other than 2 are either not showing in zip folder or seem to be heavily distorted and jacked up pixels everywhere? Am i doing something wrong is there certain things it wont allow?

I'm going to guess you

I'm going to guess you haven't rasterized those layers. Take a quick look at the guidelines and see if one or two suggestions there don't clear things up. Thanks.


how to use this ?

if your using joomla simply go to your joomla admin go to extensions install/uninstall browse to the zip file and upload it then go to template manager also in extensions and pick your newly uploaded template CSS theme..

JInstaller: :Install: Cannot

JInstaller: :Install: Cannot find XML setup file error after trying the above...didnt work

'Could not find an XML setup file in the package'

I've followed the instructions to a T, and when i go into joomla extensions, install/uninstall and try to upload the zip file as instructed, i get the message 'Could not find an XML setup file in the package'.

Am i doing something wrong?


Really great work

I must be a real noob

I uploaded the PSD and it gave me the files but where do I put those files? Do I put them directly into my public html folder or do I put the images in my image folder and place everything else somewhere else?


Nevermind, I figured it out.

can you tell me

Can you share on how you figured it out cause that is where I am stuck at...thanx

Did you

get an answer on this? It's been my question too.

Same questions..

I'm having similar trouble..I've uploaded my PSD file and got back a zip file, which is refusing to install when I go to extension manager > install or even when I extract it or paste it inside the templates directory. Can someone have a go at explaining what's going on?

File Locations

Hi PhotoshopUser -

For all conversions at psd2css Online, the files come in the zip file in the correct folders relative to one another - you don't have to move some files into some new folder or anything like that. The standard conversions put all the files in the same folder. So you would move all files just as they come out of the zip file into a folder in your account at your service provider.

Let me know if that doesn't answer the question for you.




what service provider should I use?


copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content