psd2css automatic conversion design => code!
I ran across this site, psd2css Online, that purports to automate generating valid xhtml/css from psd
haven't tried it, if it works, what a time saver!
[EDIT]
Unlimited subscription (with 8MB limit for psd file) is $19.95/mo
New subscribers have a two week free trial period
Megan posted this at 17:38 — 11th January 2009.
She has: 11,421 posts
Joined: Jun 1999
I'd really like to see the results of that. Can't imagine it could generate a properly coded layout automatically. Valid, sure, but that's not the same as being well made.
Megan
Connect with us on Facebook!
cmoyer posted this at 18:21 — 11th January 2009.
He has: 131 posts
Joined: Jun 2008
I did a very simple psd (only 2 layers) with one layer centered on the other.
You can't upload a psd over 4mb as a standard user, however if you become a member you can get up to 8mb upload.
It converted my simple image well, it adds javascripts to the zip file as well (I think to preload the images?)
The finished design is all images, no text at all. Other than that it is an interesting tool none the less, though I wouldn't suggest using it for production as the page will take forever to load. (my small page took about 40sec on dsl)
decibel.places posted this at 21:02 — 11th January 2009.
He has: 1,494 posts
Joined: Jun 2008
@cmoyer
can you post/attach some output code?
my Indian partner will be evaluating it tomorrow, I'll let you know the results.
This came up on a LinkedIn group discussion "What do CSS designers and designers need in order to design your drupal sites?"
cmoyer posted this at 22:38 — 11th January 2009.
He has: 131 posts
Joined: Jun 2008
Here is the code that my simple image came out to be, I added a few more layers to test the tool. I don't think you could do a fluid layout with this tool too easily though.
(url must use within 24hours of this post!)
Url to page is http://psd2cssonline.com/uploads/948748119/index.html
The original image (png because psd can't be uploaded) I reduced the size as well to about 50%
And the code is attached below, however there are a lot of files (images and such) so I have included the html and the css files only, if you want the js files or images ask and I will attach them later, to another post.
Megan posted this at 14:28 — 12th January 2009.
She has: 11,421 posts
Joined: Jun 1999
So, what they're doing is taking the layers, making them into separate images, and creating absolutely positioned divs with them. Not really a proper CSS layout in any way.
Somewhat interesting experiment but in no way a substitute for human-written code.
Megan
Connect with us on Facebook!
JeevesBond posted this at 16:21 — 12th January 2009.
He has: 3,956 posts
Joined: Jun 2002
I think the idea is a user will create their design using this service, then enter text afterwards. It can work in practice (see the psd2css site's code, for example), but will create something write-only. Write-only code being code which, when written once, can never be read again by anyone.
I agree with the general sentiment here: what that site chucks out is rubbish. It might be alright for amateurs, but I hope no professionals try using it.
a Padded Cell our articles site!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.