Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Converting a Layout to a WordPress theme


Published on

Slides from my presentation at WordCamp Philly 2011.

Published in: Design, Technology, Business
  • Be the first to comment

Converting a Layout to a WordPress theme

  1. 1. Converting a layout to WP theme by Jayvie Canono for WordCamp Philly 2011Monday, November 7, 2011
  2. 2. Why are we here? Explore the design workflow Make things easier for designers Make things easier for designersMonday, November 7, 2011
  3. 3. Who are we? Different skillsets: Print background PSD only PSD, CSS & HTML and/or WordPress theme Can, but won’t (specialization/agency structure) Can and does. (Congratulations!)Monday, November 7, 2011
  4. 4. Different workflows General processes: sales talk - proposal - signed contract - wireframe (optional) - PSD mockup - revisions - HTML/CSS - WordPress theme sales talk - proposal - signed contract - WordPress theme - add on graphics - screenshots - revisions - payment - delivery Large agencies have multiple layers of approval Freelancers can play fast and loose with steps Collaborative work develops workflows based on playersMonday, November 7, 2011
  5. 5. From mockup to WordPress theme Your responsibilities as a designer: make it easy for your developer to code your layout. If you understand how markup and theme files relate, you can layer your PSDs accordingly Understanding CSS helps you coordinate with the dev for repeating elements (classes) Use proper measurements for mockupMonday, November 7, 2011
  6. 6. What are we slicing today?Monday, November 7, 2011
  7. 7. Translated into HTMLMonday, November 7, 2011
  8. 8. Translated into theme filesMonday, November 7, 2011
  9. 9. How it’s layered in PhotoshopMonday, November 7, 2011
  10. 10. Theme DirectoryMonday, November 7, 2011