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.

Guidelines

Upgraded to Unlimited yet?

Unlimited users get All the new features including animated drop down and fly out menus, automatically generated forms, tool tips, can convert PSD files that are up to 8MB and more! Regular users don't get the special features and have a 4MB cap on PSD file size. Upgrade to Unlimited now!

Here are a couple simple guidelines about your .psd files that will make working with psd2css Online and other sites powered by psd2css Online easier and more productive:

Note! These are guidelines to make it work - not the documentation about all the cool features.
You can find the documentation here.

  • Opacity and Blending Options - Layers with Opacity at anything other than 100% or Blending Options set need to be rasterized. In Photoshop you can right click on the layer and choose 'Rasterize Type' or 'Rasterize Layer', or just merge the layer with any other raster layer (even a blank one). In The Gimp you can make an empty layer just below the one you want to rasterize, then right click on your layer and choose 'Merge Down'. That will rasterize the layer and merge it with the empty layer too.
  • Don't make too many layers - if you are an advanced artist, you probably made your work using lots of layers that all combine together to make individual parts of your art. For example, your logo might be made up of 5 or 6 layers - but the logo will always stay one single element, always together. Don't upload your psd file with that logo still all separated out into the 5 or 6 layers - merge them down to one 'logo' layer.
  • Use 8 bit RGB images - 16 bit, indexed image depths, and other color spaces won't work - use 8 bit RGB images
  • The Final Crop - Just before you send your PSD to be converted, it's a good idea to crop the image to exactly the size it is already. I know that doesn't sound like it makes any sense, but it's possible to have layers defined that are much larger than the visible area in the photoshop file (those layers will 'stick out' of the visible area). Not only can very large areas cause problems for the tool, but after conversion you'll have very large images that are absolute positioned via CSS to only show the part you want - looks good, but very inefficient. Please do the Final Crop before sending your PSD file for conversion. Here is a video explaination of The Final Crop: http://psd2cssonline.com/node/204
  • Visible/Invisible Layers - psd2css Online will convert and generate images for your invisible layers. If you don't want those layers to show up in your web page, then please make a 'working' copy of your PSD file and delete the invisible layers for conversion by psd2css Online
  • Layer Comps (Photoshop CS) - Layer Comps in Photoshop CS are an awesome tool that can help your work flow while building multiple page web sites to be converted with psd2css Online. However, the ability for Layer Comps to remember positions is lost in psd2css Online. If you have a position for a layer in one Layer Comp and move that layer for another layer comp, that layer will only generate one CSS layer and it will be in the position within the lastmost Layer Comp. Layer Blending Effects are already mentioned above, as well as visibility. So you can use Layer Comps to be a productive web designer, but don't utilize the 'position' Layer Comp Option in Photoshop.
  • The Gimp Layer Sizes - The Gimp likes to make layers as big as the entire image. This makes for a really inefficient web page - lots of big image files. For any layer in The Gimp where the actual art is smaller than the whole page (probably all your layers), choose the layer to edit, then in the layer menu choose 'Autocrop Layer'. Tutorial 3 shows this little work around in action.
  • 4MB/8MB psd File Size Limits for regular/Unlimited Users - You must be an Unlimited user in to get the 8MB file size limit. We are currently investigating larger file sizes. Bandwidth issues are the focus.
  • Help out the guy writing psd2cssonline - ok, not really a guideline I suppose, but if you upload a psd file and it doesn't do what you think it should, send it to me at support@psd2cssonline.com. I'll make it work (as time permits). Thanks

I cannot find the document in

I cannot find the document in the link you gave. Can you fix it asap? Or am I the only experiencing this?
______________________________________________________
Daphne R. Perrin
Tampa DUI lawyer
www.thetampaduiattorneys.com/protect_your_license.html

wordpress cannot see CSS

I converted my PSD (using the site's template just to practise and see how it all works) to a wordpress theme and uploaded the folder to my wordpress server.
Wordpress sees the theme but says that it is broken as the stylesheet is missing.
The stylesheet is in the folder though, any idea what I can do ?
Thanks a lot for this site

CSS missing

I'm experiencing the same thing.
CSS is missing... then when I rename the file, it says it can't find the Header tag... I suspect that the new wordpress update may have broken psd2css script... Bummer too. Because the forum appears to have been abandoned with all that spam on there... I would have deleted all that crap...

File Conversion error

I tried converting my PSD file to html on your Website but got an error message :
--- WARNING!! - Your image contains layers that are greater than 1800 pixels wide or 3000 pixels tall. Are you sure this is what you want? If so, please email us:
support@psd2cssonline.com
Thank you. -----

I have sent you an email but have not gotten a response yet.
Please i need this as fast as possible

can`t convert my file tried for more than a month but no help

Can`t convert my PSD file tried for more than a month but no help, please I need you help to convert the file have already send email to you guys but no reply at all.

please need you help :(

kindest regards

Thanks

Its really nice to have such a helpful website to save much time of the users. Thanks for creating this one.

thanks

thank you for build this awesome website!
many thanks for U!
Agus - Indonesia

nice post i liked this post

nice post i liked this post like <a href="http://designerclothe-s.com">Designer Clothes</a>

nice

ohh man this is awesome post. http://www.bestoffersbingo.co.uk/ man..! huurrah i find the useful post.
you know this is great working by the writer.The writer has done a great job in speniding his time in
research about this article. can i subscribe all his posts ?
I am really happy to read this. i was searching this from last two months and atlast i got it. hurrah..!!

MouseOvers Not Working?

Hey, I first wanna say thank you for creating this feature. I'ma coder and even for me it is difficult to skin a flash player, especially to the extent of which your online tool allows me to do. I have a small issue... I believe that I did everything right and everything works fine except for the mouseovers for the controls (???)

Fixed It

Sorry, I found that the mouseovers work if I'm logged in when I upload the psd file. Thanx again PSD2CSS for creating such a great tool.

Drupal 7

Hey! Great program, but....
Is there a version compatible with Drupal 7 to be released soon?

wow these are amazing

wow these are amazing guidelines shaun i like the way you thoroughly described it
http://www.todaytricks.com/

help please

dear shaun
how long does it usually take to get a reply from the support, cause i sent an email and really need as much help as possible, you have a great service going here i just need ah little help getting my site done any assisstance i can get would be greatly appreciated

I dont understand the procedure involved

I tried choosing the file and have uploaded several times.... But it doesn't work for me

I dont understand the procedure involved

There are a number of possibilities why its not working for you. Could be the file is too large (4mb limit or 8mb limit). Could be the file is still open (in Photoshop for instance). Could be the site is extremely busy with others uploading files - as it runs much faster at 2am. Good luck...

V Gud

gud job bro..

3d+css

hi Shaun,

Thank you very much for your program! We are working on 3d for the web and your program is
a surefire way of presenting it in any browser without any compatibility issue.

Thank you!

deepspeed

Hey deepspeed - Sweet! I

Hey deepspeed -

Sweet! I have a long history with real time 3D - I was a lead graphics programmer for a couple of console video game studios for years.

I'd like to learn more about what you're doing. Please feel free to email me or post more info about your effort here. Thanks!

--
Shaun

Messed up

Hello.. I really like the concept but once concern though.. After following the video and the guidelines.. all i get is a messed up page.

I tried using your psd and converting it (w/o even doing anything in the psd file) and still getting the same result.

Check out www.cathysite.co.cc - its my test page. I used same psd as you have here..

Hi slymoverph - 2 things: 1)

Hi slymoverph -

2 things:

1) The example you were following requires some modification by hand of the CSS after the conversion. It's in the tutorial. If you do that, then the page will look right.

however....

2) I made a new feature the other day that makes the technique you tried unecessary. Look at the _frame Layer Naming Convention. It is SO much easier :)

Find the tutorial for it here:
http://psd2cssonline.com/node/1164

Thanks.

--
Shaun

Thank you for this wonderful

Thank you for this wonderful tool. I like it very much. Easy to use, quick. Like a dream...

Janos

The quality of the video IS

The quality of the video IS fairly bad but, if you download his PSD file and refer to the page he built; You should be able to duplicate everything properly.

I've created a page without using the video. Also, if you're using Gimp don't frustrate yourself by forgetting to crop your layers.

Regards,
James - <a href="http://www.wineclubdirectory.net/">wine</a>

Are the fly out menus done

Are the fly out menus done in css of are they a JavaScript pre-set, meaning, if someone turns off JavaScript in their browser will the menu still work? <a href="http://www.datingsitesandservices.com/">Dating Sites</a>.
Regards,

Hi gussi - Excellent

Hi gussi -

Excellent question. Nope - the fly-out menus will not work with javascript disabled - they rely on the jQuesry javascript library and are completely javascript based.

The newer CSS menus aren't as cool, but don't use javascript. You can see a video here: http://psd2cssonline.com/node/627

Thanks.

--
Shaun

thank you

was just begging that somebody invented what you just created. I love you man! I think you should register this idea as soon as possible. You'll see, it won' take long for Google to be interested in your idea and buy it!<a href="http://www.idealsohbet.com" title="sohbet" target="_blank">Sohbet</a>
<a href="http://www.Sohbetodalari.Name" title="Sohbet Odalar?" target="_blank">Sohbet Odalar?</a> won' take long for Google to be interested in your idea and buy it! You're going to be rich!

One more thank you can't hurt

Thank you, thank you, thank you...

I cannot wait to really try everything out..

I'm really impressed with how user friendly you have kept this for those that really only know Photoshop/Gimp... Almost every other service of this nature, including CMS's quickly become too complicated for non-developers to understand. Thanks a zillion...

I'll second that. Thanks for

I'll second that. Thanks for making this so easy to use. I too get confused with technical stuff so thanks a bunch.

Tim
- <a href="http://www.customfireplacedesigns.com/">fireplace designs</a>

custom logo designs

hey gre8 work well thanks for the gr8 tool. em a logo designer. i do freelance for my client. here is
<a href="http://www.logobench.com">custom logo designs</a> | <a href="http://www.logobench.com">corporate logo design</a>

feedback

I have very happy to work with it ... Thanks

I was having some problems

I was having some problems at first, but now I love it. This thing is great
--
<a href="http://www.freemovingquote.com/">moving quote</a>

Tools are really useful

Tools are really useful.. I enjoyed this post and give a comment.
Thanks
<a href="http://www.pencilthin.com/?p=311“>Narconon Vistabay</a>

this very nice, thank

this very nice, thank you.

awesome!

Cheers guys, your tool is completely awesome!

alexei@<a href="http://www.day2design.com">Day2Design</a>

Butterfly Obrigada

Butterfly

Obrigada !!!
Consegui converter ...
Bjos

congratulations

Bravo!! congratulations from France!
You have changed my life !

Great job, thank you -

Great job, thank you - sometimes it's lifesaving tool.

TIMESAVERS

Hi to all.

As a designer, I get tired of slicing up my webpages. It takes a good amount of time to get everything right. Then when you export it and the CSS via photoshop, the code is limitless as well as for the CSS.

You have done a great job guys. You are brilliant.

OH-MY-GOD!!!

Man! You, like, just rediscovered the fire, the electric energy, the wheel...

I was just begging that somebody invented what you just created. I love you man! I think you should register this idea as soon as possible. You'll see, it won' take long for Google to be interested in your idea and buy it! You're going to be rich!

I'm using psd2ccs forever now! As soon as one of my sites is online, I'll let you know!

Best Regards!

Oliver Hautsch - Letranemia.com

Thank you very much for this

Thank you very much for this useful article and the comments. I love this site as it contains good materials.

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, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content

Warning: Duplicate entry '0' for key 'PRIMARY' query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:12:\"user warning\";s:8:\"%message\";s:291:\"Duplicate entry &#039;0&#039; for key &#039;PRIMARY&#039;\nquery: INSERT INTO accesslog (title, path, url, hostname, uid, sid, timer, timestamp) values(&#039;Guidelines&#039;, &#039;node/9&#039;, &#039;&#039;, &#039;54.161.228.29&#039;, 0, &#039;ZuE-xu3lxaGwtu2MdXlSD2&#039;, 748, 1414263448)\";s:5:\"%file\";s:68:\"/home/smci1000/psd2cssonline-d6/modules/statistics/statistics.module\";s:5:\"%line\";i:64;}', 3, '', 'http://psd2cssonline.com/node/9', '', '54.161.228.29', 1414263448) in /home/smci1000/psd2cssonline-d6/includes/database.mysql.inc on line 128