WordPress Tutor
Step-By-Step Help for Wordpress Newbies
Sep 04 2009
WordPress Theme from your Photoshop Design in Seconds
psd2cssonline.com – now you can take your WordPress Theme Design in photoshop and convert it directly to all the code and images needed to be a real working WordPress theme. Just name some of the layers in your Photoshop PSD file right, upload to psd2css Online, and seconds later you’ll download a zip file with all of the code, files and images. Then just unzip it into your WordPress installation and it works!
Posted by in Themes
May 27th, 2009 at 8:38 pm
1st comment
..
Awesome feature man. Will help me ton!
Thanks and keep it up!
June 10th, 2009 at 3:58 am
Gawdang, cool.
June 10th, 2009 at 7:47 pm
How TO you get the HOver JS Thingy,
T
June 11th, 2009 at 2:07 pm
Make 2 layers in your Photoshop file – one called something_link, the other called something_hmenu. Use psd2css Online to convert it and it will just work.
June 11th, 2009 at 5:22 pm
K Thanks, and can it support Search bar?
and categories and moving / hover buttons
June 15th, 2009 at 2:50 pm
At the moment you can copy and paste the search bar code in the generated index.php to another DIV. That will work. But I’ll be adding the ability to just draw it where you want soon.
June 26th, 2009 at 4:41 pm
Hi, can I know what are all the name of layers that your program detect and code it? In this video it shows only 2 layers. Can I know the rest? The search button ability added?
Love this website of yours. Great help for me.
June 27th, 2009 at 6:19 pm
Hi – Check the documentation on the site. youtube won’t let me post a link in the reply here, but check the psd2css online site. All the various supported layer names are listed in the documentation. Thanks!
July 2nd, 2009 at 12:01 am
this is beautiful; if i knew you i would kiss you………..on second thought; a hug will suffice. anyway is this free? and if not; its still worth it
July 17th, 2009 at 12:02 am
I Just have to say this is outstanding, I have been a web designer for a couple of years and have only just discovered how versatile and easy wordpress is to mod, now I can add my own designs to it it’s even better! I couldn’t imagine how much work you have put in to make this work the way it does, so major respect to you, and good luck in adding those extra features.
July 17th, 2009 at 12:07 am
Just a quick question before I try this myself, are the templates that are outputted able to stretch horizontally? or does the content layer stay the same height as you design it in photoshop?
July 17th, 2009 at 12:34 pm
Stretching horizontally isn’t supported directly. You’ll have to modify the generated code by hand to get that to work. Vertical stretching is a little simpler but still requires some modification by hand. We have a number of video tutorials on how to to the vertical stretch.
July 17th, 2009 at 12:45 pm
OK Cool, I did actually mean Vertical stretching btu think I got myself a little confused, was half asleep when I wrote that comment.
July 17th, 2009 at 4:07 pm
Another question, Does it split the design into header.php, footer.php, post.php etc for the WordPress themes?
July 17th, 2009 at 7:06 pm
Nope. I don’t believe that’s a requirement for a WP theme, it’s just a coding style suggestion.
August 22nd, 2009 at 6:32 pm
Amazing! I have a wordpress theme that automatically adds links to pages to the horizontal menu at the top of the page as I make them. Is there a way to set that up with PSDtoCSS Online (rather than pre-define the menu buttons) ?
August 23rd, 2009 at 11:08 pm
You can draw the menu in Photoshop, use some of the psd2css Online features like _link, _linkover, _menu and _hmenu. Then edit the index.php file that is generated by hand and make the href tags in the _links point to the pages you need.
August 31st, 2009 at 9:21 am
eg. on starting your mouce move after 1 minute after 1 minute you waste much more time on show wp psd and others..
sorry, for this suggestion but your video tutorial is valuable and your site is awesome.
thanks