Layer 4 copy
doc
tut
blog
forum
doc
tut
blog
forum
home

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.

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.

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.
http://psd2cssonline.com/node/9

--
Shaun

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

'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?

Thanks

Really great work
thanks

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?

Sorry.

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.

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.

Thanks.

--
Shaun

copyright (c) 2009 psd2css Online, Inc.

 

 

User login

Become a Fan of our Facebook Page

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

| Privacy | Terms of Use |

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

Syndicate content