PSD2CSS : Convert PSD Files (Photoshop Docs) to CSS
Are you a Photoshop pro? Can you create amazing website designs using your Photoshop skills? If so here is something for you to check out. If you ever want to create a new look for your website in Photoshop, you might be interested in a new service PSD2CSS. It’s a free web-based service that can convert your Photoshop designs into a ready-to-use XHTML compliant CSS website. There are a number of other similar websites that offer similar service, but PSD2CC is the only one that does this for free.
Here is how it works:
(1) Create the new look in GIMP or PhotoShop. Make sure to check these guidelines before you get started.
(2) Once the design is ready, upload the .psd file and wait until PSD2CSS is finished processing it. Download the files.
Here are a couple of simple tutorials to get you started
Check out PSD2CSS @ www.psd2cssonline.com
An offline version, with more control will be soon here:
http://www.raist.cz/psd2css/
Right now it can be used just for easy extracting the CSS text properties.
I just want to let everyone know that PSD2CSS and the above advertised offline version are from different people.
Thanks for the great review!
I just wanted to let you know that we’re adding new features all the time so check in often. And as a free online service, you always get all the latest and greatest features every time you use psd2css Online.
Today we added the ability to generate working forms just by naming your layers in photoshop! Check out the tutorial:
http://psd2cssonline.com/node/37
Thanks!
–
Shaun
http://psd2cssonline.com
I really like this service, but what I am trying to understand is the difference between hand coded and generated code? I mean, I tried guys from http://www.PSDtemple.com and the code was really optimized and minimal. I still find the value in hand coded CSS for now.
Hi Mark -
That’s a great question. There are two answers I think depending on who you are.
If you are just making one website for yourself, the generated code has advantages in that it’s fast and inexpensive. Hiring someone to convert your PSD will take days usually and $100 or more. The code generator will return all your CSS, HTML, javascript, and images in seconds, and will be free or $20 max if you need more than 2 weeks. Plus if you change your mind about how something looks, you can reuse the generator over and over until it’s perfect with no additional cost or time interacting with your hand coder.
Now if you do hand coding for income, the code generator is MUCH more valuable to you. You can use it to do all the up front grunt work of creating all your sites. The code generated is clean and commented so it’s a perfect place to continue the effort for all the extra magic you add for your customers by hand. If you used to be able to bill for 3 web pages a day and spent 6 hours of that time building the initial CSS, HTML, javascript and individual images, now you’ll be able to bill for 5 or 6 web pages a day. That’s a LOT more income for you.
Thanks!
–
Shaun
Now Drupal Templates from your PSD file in seconds!
http://psd2cssonline.com
Thanks for this free service. I have tried looking for a way to convert my psd templates into css but unfortunately this result i got, is not what I expected. Firstly I lost all the efects on my images like bevel, drop shadows, inner glow… or maybe the psd file should be flatten. Secondly it’s just generated an image file just like saving a normal psd file for web (image is compressed with text) maybe i am doing something wrong here.