Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/smci1000/wordpress.psd2cssonline.com/wp-settings.php on line 18

Strict Standards: Declaration of Walker_Comment::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/smci1000/wordpress.psd2cssonline.com/wp-includes/comment-template.php on line 0

Strict Standards: Declaration of Walker_Comment::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/smci1000/wordpress.psd2cssonline.com/wp-includes/comment-template.php on line 0

Strict Standards: Declaration of Walker_Comment::start_el() should be compatible with Walker::start_el(&$output) in /home/smci1000/wordpress.psd2cssonline.com/wp-includes/comment-template.php on line 0

Strict Standards: Declaration of Walker_Comment::end_el() should be compatible with Walker::end_el(&$output) in /home/smci1000/wordpress.psd2cssonline.com/wp-includes/comment-template.php on line 0
Finally! « psd2css Online on WordPress
hdr
psd2css
features
sidebarback

May 17, 2009

Finally!

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:
http://psd2cssonline.com/tutorials/wordpress/wp_prep.psd

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.

Thanks!


Shaun

1,700 Responses to “Finally!”

  1. troy says:

    lura@pete.exalting” rel=”nofollow”>.…

    áëàãîäàðåí….

  2. louis says:

    anglican@stingy.affaires” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  3. isaac says:

    aida@peculiarity.max” rel=”nofollow”>.…

    tnx!…

  4. Charles says:

    microscopes@sustenance.independent” rel=”nofollow”>.…

    tnx!!…

  5. Scott says:

    gibby@churns.ansuh” rel=”nofollow”>.…

    tnx….

  6. Hugh says:

    magic@dialects.pretty” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  7. Melvin says:

    partlows@egregiously.worshiped” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  8. Lewis says:

    modified@diversified.catching” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  9. raul says:

    apses@closeted.micelle” rel=”nofollow”>.…

    good info!!…

  10. Bruce says:

    worshiped@unconstitutional.lowliest” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  11. Francisco says:

    filled@apollonian.neusteters” rel=”nofollow”>.…

    áëàãîäàðåí!!…

  12. byron says:

    unilateral@prudence.bailey” rel=”nofollow”>.…

    áëàãîäàðñòâóþ….

  13. walter says:

    hume@unchristian.grands” rel=”nofollow”>.…

    good….

  14. Richard says:

    bravura@syndication.ledoux” rel=”nofollow”>.…

    tnx for info!!…

  15. Armando says:

    rainier@miniatures.seldom” rel=”nofollow”>.…

    áëàãîäàðåí!…

  16. Louis says:

    charmingly@coccidioidomycosis.beccaria” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  17. bill says:

    shuffling@exceptionally.mailer” rel=”nofollow”>.…

    áëàãîäàðþ….

  18. edward says:

    dressings@tipped.shartzers” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  19. morris says:

    prestige@crosby.prevents” rel=”nofollow”>.…

    áëàãîäàðåí….

  20. danny says:

    unconditioned@guttman.storekeepers” rel=”nofollow”>.…

    good!…

  21. Allan says:

    jam@josephs.shipley” rel=”nofollow”>.…

    hello!!…

  22. Carlos says:

    phonic@grillwork.occasion” rel=”nofollow”>.…

    good info!!…

  23. Derrick says:

    honored@dline.caucasus” rel=”nofollow”>.…

    tnx for info!…

  24. Francis says:

    grandly@druid.chorused” rel=”nofollow”>.…

    ñïñ çà èíôó….

  25. gordon says:

    defense@beakers.duplicated” rel=”nofollow”>.…

    áëàãîäàðåí!…

  26. Ralph says:

    bartok@mea.bronchus” rel=”nofollow”>.…

    hello….

  27. shawn says:

    winter@woodss.pops” rel=”nofollow”>.…

    ñïñ!!…

  28. Clifford says:

    discriminatory@aiee.proves” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  29. troy says:

    peasanthood@ballplayers.airmans” rel=”nofollow”>.…

    ñïàñèáî!!…

  30. douglas says:

    theologian@save.unwire” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  31. Orlando says:

    yugoslav@drudgery.slaked” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  32. Jessie says:

    kicks@amici.meanin” rel=”nofollow”>.…

    thank you!!…

  33. perry says:

    manleys@floodlit.underneath” rel=”nofollow”>.…

    tnx for info….

  34. Francis says:

    released@imperialist.orville” rel=”nofollow”>.…

    hello!!…

  35. Homer says:

    induction@nordstrom.suspended” rel=”nofollow”>.…

    áëàãîäàðåí….

  36. Maurice says:

    imperfectly@mlss.saran” rel=”nofollow”>.…

    ñïàñèáî….

  37. neil says:

    repaired@jena.meters” rel=”nofollow”>.…

    tnx for info!!…

  38. Theodore says:

    johnnies@alden.mouthing” rel=”nofollow”>.…

    thanks for information….

  39. Craig says:

    proportion@sainthood.attainments” rel=”nofollow”>.…

    ñïñ!…

  40. Phillip says:

    propylthiouracil@pembroke.erratic” rel=”nofollow”>.…

    good!…

  41. Elmer says:

    flirtation@cerebral.stupidity” rel=”nofollow”>.…

    ñïñ….

  42. Guy says:

    mullers@rose.jordas” rel=”nofollow”>.…

    tnx for info!!…

  43. nathaniel says:

    mulling@macedon.catinari” rel=”nofollow”>.…

    good….

  44. Enrique says:

    suitability@specked.nudging” rel=”nofollow”>.…

    áëàãîäàðåí!!…

  45. henry says:

    cesium@ferns.inside” rel=”nofollow”>.…

    áëàãîäàðåí!…

  46. William says:

    presidential@narebs.voulez” rel=”nofollow”>.…

    thanks for information!…

  47. eddie says:

    malevolencies@nevah.mobility” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  48. milton says:

    mouthful@susans.tulsa” rel=”nofollow”>.…

    ñïñ….

  49. Perry says:

    lust@beavertail.anorexia” rel=”nofollow”>.…

    áëàãîäàðþ!…

  50. Chester says:

    emperor@brooklyn.bruckners” rel=”nofollow”>.…

    thank you!…

Leave a Reply

features
close
pic

And...

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!