Many use Photoshop to create their WordPress wireframe as part of designing their WordPress site. Converting the Photoshop graphic to a WordPress Theme is fairly easy if you have some basic HTML, CSS, and web design familiarity.
Simply described, each core design element such as the header, background, and design details are segmented into graphics and then used as background images or direct images where appropriate on a WordPress frameworks, a WordPress Theme with the core design elements you need to flesh the site out with a strong stylesheet.
A Photoshop (PSD) Plugin, Divine, is very popular and available for a thirty day trial. Add it to Photoshop and it will automatically help you export the graphic elements for a WordPress site. Familiarity with WordPress functions, features, and Theme structures and styles are required to complete the process, but it does help with the export of the graphics for the Theme. It works with Windows XP, Vista, and 7. Currently, there are no free programs for the Mac, but some alternatives are available with free, limited trials. [NOTE: Since 2009, all marketing about the Divine Photoshop Plugin explicitly says it is “absolutely free.” I just learned it has a thirty day trial and then it is expensive to purchase. While it might seem to be the ideal thing to try, unless you are making a living as a web designer, it’s not worth the cost.]
In general, while the Divine Photoshop Plugin is helpful, you can generate the graphics yourself. For more information on how to take a wireframe Photoshop image and convert it to a WordPress Theme, try these resources.
- From PSD to HTML: Building a Set of Website Designs Step by Step – Nettuts+
- WordPress Theme from Scratch – Day 3: HTML to WordPress – AEXT.NET MAGAZINE
- How to Convert a PSD Web Design to HTML and CSS – Nettuts+
- Photoshop to WordPress: A Basic Guide – Randa Clay Design
- 30+ Best PSD to HTML/CSS Conversion Tutorials
- Divine Elemente (plugin for photoshop). PSD to WordPress theme converter.
- From Photoshop to WordPress – Part I – Design – The Web Squeeze
- Design Web Layout with Photoshop and Convert to WordPress Theme (Video Tutorial) – WebStockBox
Pingback: How to Convert a Photoshop Wireframe to a #WordPress Theme #ux #design #ui #usability | UXWeb.info
Pingback: WordPress School: HTML and CSS References and Resources « Lorelle on WordPress