Home

Design News:

Psd2CSS Online

A free service that supposedly automatically converts your psd file into valid CSS templates. Not sure of the quality, as I don't have a psd file laying around.

Comments (11)

If you don’t have any PSD files laying around, there are tons of example PSD files on the site you can download and try.

#1: Shaun on 02/16 at 06:36 PM

A free service that supposedly automatically converts your psd file into valid CSS templates. Not sure of the quality, as I don’t have a psd file laying around.

If you don’t have any PSD files laying around, there are tons of example PSD files on the site you can download and try.

lol, seems like BOTH of you arent quite ready yet! :) Hey shaun, how ‘bout you round up a couple of those easy to find PSD file you spoke about? ( I tried, but all I got was some inapropriate images.. it may have been my fault, since that usually happens when you type ‘hot japanese babes” into Google) anyway, you upload a couple of those PSD files, create a Link called “SAMPLES AND EXAMPLES” and list them there?

Then maybe we can see what the big deal is ? (Or might be?)

#2: Mark on 02/17 at 01:08 AM

Hey… I stand (partly) corrected… there ARE examples and samples there!

It just seems they are hidden behind some of the links on the front page, but, as I play around the site a little bit, I gotta say, the whole thing seems very poorly designed. :(
1. Aesthetics. I list this first because a screen design site SHOULD look good, or at least better than a utilitarian file/image upload hosting site.
2. Layout - even if you go with a plain text only site (and you shouldnt) You need to have areas of the screen better layed out

#3: Mark on 02/17 at 04:26 AM

Sure!  Here are a couple:

This page:
http://psd2cssonline.com/tutorials/menu3/index.html
was made with this PSD file:
http://psd2cssonline.com/tutorials/menu3/menu3.psd

This page:
http://psd2cssonline.com/tutorials/lightbox/index.html
was made with this PSD file:
http://psd2cssonline.com/tutorials/lightbox/lightbox.psd

Here is a Drupal site:
http://newfind.net/DrupalTheme/
where the Theme was generated directly from this PSD file:
http://psd2cssonline.com/tutorials/drupal/DrupalTheme.psd

There really are lots more - check the Tutorials section to find most of them.

I do appreciate the comments on my own site design.  I guess it’s pretty obvious I’m a programmer and not a designer :)  To date there have been over 55,000 PSD files uploaded and converted.  I’m thinking of holding a ‘redesign psd2css Online’ contest - I know a LOT of those people already using the site are very very good designers.

#4: Shaun on 02/17 at 05:02 AM

Redesign Psd2CSS…. thats EXACTLY what I was saying! (or rather, would have said if this damn text box hadnt truncated my post!)

Anyway (again) it would be great to take this site as a CASE STUDY and basically pick it apart in the forum, then redevelop it bit by bit, into where it should be!
Right now, your biggest need is for a technical writer and a crap load of screen shots AND diagrams! this layout stuff is understandably so complex - AND you are asking users to basically learn a new programming/markup language, how to embed the right meta data in a PSD file so that you can render it.

Architecturally, you may need to have this as a SOAP service AND you should also accept .zip files (and return a zip file as output)

Examples: You need a LOT of examples, in various increasing levels of complexity, and also a few that just dont work (to show an example of what NOT to do).
These examples would also be PRE-GENERATED so you dont waste CPU cycles spinning on them, and you can use Amazon CDN to serve the (admittedly small) files

The color scheme needs to be a bit more readable ,lol, unless you REALLY wanna be old school, in which case, just turn the text bright green to go with the black.

UPLOAD GALLERY and USER SITE LINK -
The showcase performs several functions which you already know, but for the others reading , it makes the site ‘sticky’ like honey :) It retains the users you have (as opposed to drive by uploaders) and it attracts those user’s friends. Who presumably has 1 more friend (it’s a bit of a stretch to assume that computer nerds have more than one friend, but its been known to happen :)

A lot of work remains in the site,but its mostly fun work as far as I can see, and splitting the remain stuff to a ‘team of experts’ should make the site a pleasure to use (and pay for if, God forbid, it should come to that!)

#5: Mark on 02/17 at 05:49 AM

Mark -

Fantastic advice.  All of it.  Thank you very much.  As time and resources permit I’ll be working towards these and the other existing action items I have for the site.  It’s a work in progress and getting better all the time.  Thanks again.


Shaun

#6: Shaun on 02/17 at 07:54 PM

I tried with one of my PSD template, but it only showed a blank page.. nothing what so ever. So i think, i’m not going to use this site. sorry, not for me.

#7: Rahul on 02/18 at 05:32 AM

I know exactly what you mean Rahul! :(
( going up to Rahul and shaking his hand vigorously and firmly)
..
Similar situation happened to me.
One day, when I went to the bathroom, THERE WAS NO TOILET PAPER! luckily, I was able to ‘handle’ the situation on my own and I never used toilet paper again!

#8: Mark on 02/18 at 07:00 AM

A lot of work remains in the site,but its mostly fun work as far as I can see, and splitting the remain stuff to a ‘team of experts’ should make the site a pleasure to use (and pay for if, God forbid, it should come to that!)
http://ebs-software.net

#9: Visitor on 03/03 at 05:45 PM

Your perception on the topic looks good.I should appreciate the effort put on for bringing the article with great stuff.It is awesome man.
http://www.yuvanmedspa.com/

#10: George on 03/12 at 01:14 PM
Commenting is not available in this weblog entry.

News Tools &
Other Resources

CSS Compressor

Use this tool to compress your CSS code, with three levels of compression to choose from!

CSS AutoPrefixer

Intelligently add CSS vendor prefixes to your CSS code. Just paste and copy!

Image to Color Palette Generator

Get the primary colors of any image in hex format with this online tool!

Image Optimizer

Use this tool to easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible.

Button Maker

Use this tool to easily create those popular 80x15 micro buttons you see on web sites everywhere.

FavIcon Generator

Generate a favicon using any regular image with this tool. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is viewed.

Ribbon Rules Generator

Create alternating colored horizontal rules quickly with this new Web 2.0 tool.

.htaccess Banning Generator

Generate the necessary .htaccess code to ban visitors based on their IP address, referrals, or disable hotlinking on the desired file types on your server, such as images.

.htaccess Password Generator

Generate all the necessary codes needed to password protect a directory or selects files within it on your site using .htaccess.



Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site