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.

PSD to WordPress Theme

46 views

Published on

As designers and developers, it’s not uncommon to build a website based on a static website design mockup such as a Photoshop PSD. So, how do we go from a static mockup to a fully functional WordPress theme? How do we deconstruct a static website design and convert it into something that lives and breathes on the web? In this session we’ll take a look at how to convert a static design into a WordPress theme and some of the things to consider when doing so.

Presented at WordCamp Lehigh Valley, July 2016.

Published in: Design
  • Be the first to comment

  • Be the first to like this

PSD to WordPress Theme

  1. 1. PSD to WordPress Theme Lauren Pittenger @laurenpittenger 1
  2. 2. 2
  3. 3. Why work this way? 3
  4. 4. Strategy 14
  5. 5. Efficiency 25
  6. 6. Intentionality 16
  7. 7. Design 7
  8. 8. Development 8
  9. 9. 9
  10. 10. Underscores 10
  11. 11. Starter theme 1,000-hour head start Well-commented Handy template tags HTML5 JavaScript mobile menu CSS or Sass Why Underscores? 11
  12. 12. Other Starter Themes Make your own! Bones Foundation Genesis 12
  13. 13. Download from Unzip file & place in wp-content/themes/my-theme Activate it at Appearance > Themes underscores.me Starting with Underscores 13
  14. 14. All Done! Yay! 14
  15. 15. Visit Site 15
  16. 16. Functionality 16
  17. 17. Logo Menu Slider Widgets Custom Fields Customizer Planning WordPress Integration 17
  18. 18. What is our goal? What does the client need? Who are our users? 18
  19. 19. Use a named layer group to organize elements PSD Layers Groups 19
  20. 20. Layout 20
  21. 21. Layout Tools Bootstrap Susy Bourbon Neat Worth having a chat about! 21
  22. 22. View > Show > Guides Use a Grid 22
  23. 23. PS Ruler Tool Measure all the things from column widths to padding widths and beyond 23
  24. 24. Measuring Layout 24
  25. 25. Measuring Layout 25
  26. 26. Header .site-header { max-width: 1170px; margin: 0 auto; } 26
  27. 27. 27
  28. 28. Automated Columns Margins Gutters GuideGuide PS Plugin guideguide.me 28
  29. 29. Images 29
  30. 30. Sizes Custom WP image sizes Images Considerations // in functions.php if ( function_exists( 'add_image_size' ) ) { add_image_size( 'portfolio-thumb', 375, 375, true ); } Codex: add_image_size() 30
  31. 31. Placing vs. Embedding Embedding an image into a PSD makes PSD more transportable Placing an image allows us to easily save it out from within Photoshop Images Considerations 31
  32. 32. Typography 32
  33. 33. Font Family Font Sizes Line Height Paragraph Styles Fonts Panel 33
  34. 34. Enqueue Google Fonts Add font styles Font Styles 34
  35. 35. 35
  36. 36. // in functions.php function psd_to_wp_theme_scripts() { // other code here - removed for brevity wp_enqueue_script( 'psd-to-wp-theme-roboto', '//fonts.googleapis.com/css?family=Roboto:400,700,300' ); } add_action( 'wp_enqueue_scripts', 'psd_to_wp_theme_scripts' ); Enqueue Roboto Google Font /* in style.css .main-navigation ul { font-family: "Roboto"; font-weight: 700; /* "Bold" in Photoshop */ font-size: 16px; } Use it in CSS! 36
  37. 37. 37
  38. 38. Colors 38
  39. 39. Finding the Color 39
  40. 40. Handy way to save color palette Easily copy them to SASS variables Beware using eyedropper tool on transparent colors Color Swatches 40
  41. 41. Other Cool Tools 41
  42. 42. Take any website and turn it into a layered PSD file Page Layers App www.pagelayers.com 42
  43. 43. Photoshop plugin which instantly turns layer styles to CSS3! CSS HAT madebysource.com 43
  44. 44. Finishing Touches 44
  45. 45. themes/mytheme/screenshot.png​ 1200x900px Theme Screenshot 45
  46. 46. Resources Design Adobe Photoshop Page Layers Aspect Ratio Calculator Development WordPress Codex CSS Hat Underscores Bones Foundation Genesis SASS Susy Bourbon Neat Bootstrap Theme + PSD github.com/lepittenger/ psd-to-wp-theme​ 46
  47. 47. Thank you! Questions? Lauren Pittenger laurenpittenger.com @laurenpittenger 47

×