Design to WordPress Theme in Seconds

09/28/2009 | By Richard Darell

7,665

With the blogosphere growing and growing for each day there is an increasing demand for professional as well as free WordPress themes. Sometimes the best ones can be priced pretty high which sometimes works as a rejection for some to start a new blog. Even for seasoned designers the best themes can sometimes be a little bit too pricey to actually buy to be used for clients or your new reworked portfolio website.

Well, it turns out that there is a solution to this. I found a website that takes your Photoshop blog design and, in literally matter of second, turns it into a uploadable WordPress theme. Yup, that’s right. It’s such a great thing and I can’t believe I didn’t know about this one before. But, here it is and it’s called “psd2css Online“.

It’s features are growing for each day and it has become quite popular and this in a minor way affect the time it takes for the “engine” to convert your Photoshop design into a working WordPress theme. The end product is a simple Zip file containing everything that has been converted. You just have to unzip the file and ftp the content of it to your WordPress root directory as it has already the file structure set up. It’s that easy.

There are some guidelines you have to follow though in order for it to convert correctly but they are as simple as naming your Photoshop layers the right way. That should be it. I haven’t tried it out myself yet but I think the features of the “engine” isn’t super powerful which means that it doesn’t understand EVERYTHING you could do with CSS and WordPress design but should be great to create the overall theme design before you start adding those small details that takes a little bit more advanced coding.

Watch this short clip and then check out the website to familiarize yourself to the layout and the features. Once again, you can find the site right here: psd2css Online

Author: Richard Darell

Creatively inspired by everything design and music Richard Darell founded Bit Rebels in mid 2009. Focusing on design, geek and technology the site was to provide short and intense articles about knowledge building topics with a twist. Rapidly expanding Bit Rebels welcomed a slew of new writers to add their flavor to the site. In its first 4 months Bit Rebels will already have had over 1,000,000 views and growing. Richard shares his time between writing and producing songs for international artists as well as being a designer/developer and running BitRebels.com and Minervity.com. Richard hails from Stockholm, Sweden but also spends time in Los Angeles.

17 Comments

Design to bWordPress/b Theme in Seconds « Bit Rebels

September 28th, 2009

[...] from: Design to bWordPress/b Theme in Seconds « Bit Rebels SHARETHIS.addEntry({ title: "Design to bWordPress/b Theme in Seconds « Bit Rebels", url: [...]

Paul Thomas

WOWOWWOWOWOWOWOWOWWO!!!!!! Thanks so much this is an awesome site! I will show the results after I get done converting!

[Reply]

FAQPAL

Wow, this is to my knowledge, the first of it’s kind, great find.

Average Joe

September 29th, 2009

Hmmm, I find it hard to believe that it will create nice, clean, legit code…

Not to mention widgets, etc.

Has anyone tried it yet?

Chuck

Wow, this has me VERY intrigued. I’m not big on automated processes for this type of stuff (I still handcode inside DreamWeaver) but the shear coolness of this functionality is fascinating.

I have several blogs so I’m going to give this a shot and see if it does indeed work. I will check back with my results.

Photoshop design to WordPress theme in seconds – Bit Rebels

[...] is the original post: Photoshop design to WordPress theme in seconds – Bit Rebels Comments0 Leave a Reply Click here to cancel [...]

Shaun McIntyre

Thanks for the great write up, Richard!
Yep – widgets work, the code is CSS 2.1 and XHTML 1.0 Transitional valid, and you can even use the WordPress Admin -> Appearance -> Add New Themes -> Install Themes -> Upload dialog to install the zip file psd2css Online generates (no need to ftp and unzip). For WordPress, just name one layer in your Photoshop file content_wordpress and another sidebar_wordpress. Make sure you check out the _frame Layer Naming Convention too – it’s super useful for WordPress themes. Thanks again!
–
Shaun

Anthony Hortin

October 2nd, 2009

Thanks Richard. Will be interested to see what it does with a more complicated design. Definately gunna give it a go. Thanks.

diana

October 7th, 2009

could this work for blogspot?!

Hi @diana – We don’t have support any of those tags from blogger.com so you would have to add all that by hand. I think you would have to host any design images yourself someplace too. You could get a start with this tool, but there would still be a fair amount of work to get a blogger.com template finished.

WordPress, Joomla, Drupal or HTML though and you’re on fire

October 8th, 2009

Thanks Shaun for responding. I should have started a blog on Wordpress!

Nani

October 19th, 2009

Diana, WordPress has a feature to transition blogs from other platforms to WordPress. See “pick up where you left off” at http://en.wordpress.com/features/

Exploiting Designers | Social Geekette

November 6th, 2009

[...] I feel like more and more designers are being replaced with tools like, Design to Wordpress Theme and Drawter. They don’t work that well and don’t necessarily make work any easier or [...]