May 17, 2009


Filed under: Articles — Tags: , , , , , , , , — Shaun @ 1:52 pm

That’s right, it’s finally here - the WordPress feature for psd2css Online!  Now you can make a WordPress theme in seconds directly from your Photoshop design.

This features has been live for a while now but I need you to tell me what you like about it, what you don’t, what it should do that it doesn’t, etc.  Please send all feedback to me at shaun@psd2cssonline.com - thanks.

If you’re brand new to using psd2css Online to turn Photoshop Designs into dynamic websites and CMS themes, you might want to take a quick look around the psd2css Online website.  It’s really very easy to use, but a quick glance at the guidelines and the documentation can save you a lot of time later.  Also, the WordPress feature is part of the Unlimited feature set at psd2css Online so if you haven’t started an account already, just make a new login there to get your first 2 weeks free.

We only support 2 special wordpress regions so far:  content_wordpress and sidebar_wordpress.  You define regions in your Photoshop design - placement and size for the WordPress content - by drawing special layers in your photoshop design.  Make the special layers exactly where you want the content to show up - the WordPress content will replace these layers.  Just name the 2 layers content_wordpress and sidebar_wordpress - that’s it!  Save the Photoshop file and upload it to psd2css Online.  Seconds later you’ll be presented with a link to a zip file that contains all the generated php, css and images.  To install your new theme, just upload it using your WordPress Admin Theme management.  Then activate your new psd2css Online theme.

In fact the Photoshop PSD file used to make the theme for this website is right here:

Not only are WordPress Widgets supported in your new theme, but all the normal psd2css Online Unlimited features work too.  You can add dynamic menus, image galleries, social networking feeds and all the rest by just drawing them into your design and naming the layers in Photoshop right.

Don’t forget to stylize your text and list elements and such.  My favorite tool to get that done quick and easy is Firebug.  I made a video tutorial here about it.

Don’t forget about the guidelines for preparing your Photoshop file!  You can send any photoshop file, but psd2css Online is going to make a new CSS layer for every layer in the PSD file - so merge merge merge!  Prepare your PSD file by merging as many of your layers together as you can (and still get the functionality you want).  Also, make sure you rasterize any layers that still have Blending Options enabled.  All the guidelines are available here.

So there you go - enjoy it, have fun, and let me know what you think!  Video tutorials, and proper documentation to come.



Hello world!

Filed under: Uncategorized — Shaun @ 12:11 pm

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!



all the great psd2css Online features work too: menus, hmenus (like this one), image galleries (hover and click on that thumbnail to the right), form generation - everything! And all without having to write a single line of code.

And it's all still 100% XHTML valid too!