Psd 2 Drupal

2,595 views

Published on

Tools and techniques for turning design into Drupal themes.

Published in: Design, Technology, Art & Photos

Psd 2 Drupal

  1. 1. PSD 2 Drupal Some techniques and tools for making high quality Drupal themes from Photoshop designs
  2. 2. TOOLS
  3. 3. Firefox Extensions
  4. 4. Firebug • Easily view HTML, CSS and JS • Edit HTML, CSS and JS live • View objects padding and margin Firebug is the best thing since sliced bread
  5. 5. YSlow • Analyzes site and gives a performance analysis and score • Gives suggestions on how to improve performance score http://wimleers.com/article/improving-drupals-page-loading-performance
  6. 6. • Allows you to overlay your designs on top of websites • Multiple layers
  7. 7. • Reference material • Additional information on HTML elements and CSS properties
  8. 8. Drupal For Firebug • Drupal debugging • SQL query information
  9. 9. ColorZilla • Eyedropper • Color picker • Zoom, palette editor, and other somewhat useful features
  10. 10. MeasureIt • Allows you to measure elements on your browsers • You can have multiple measurement windows
  11. 11. GridFox • Overlay grids on top of websites • Grid options are highly customizable
  12. 12. GridFox • Overlay grids on top of websites • Grid options are highly customizable
  13. 13. Desktop Software
  14. 14. xScope • On-screen ruler • Easily measure on- screen dimensions • Overlay screen sizes • Guides and crosshair
  15. 15. Skitch • Easily take and upload screenshots to the web • Add text, shapes, pencil, etc. • Great for bug reports
  16. 16. OmniGraffle • Great for wireframing • Great for diagrams • Great for UX planning
  17. 17. Drupal Modules
  18. 18. Theme Developer • Part of devel • Clicking on any element gives you the theme/ function that outputted the HTML • Make is easy to know what to override
  19. 19. Skinr • Allows end users to select predefined styles • Works with blocks, panels, and views
  20. 20. Skinr • Allows end users to select predefined styles • Works with blocks, panels, and views
  21. 21. Skinr • Allows end users to select predefined styles • Works with blocks, panels, and views
  22. 22. TECHNIQUES
  23. 23. CSS Sprites • 80+% loading time comes from front-end • Reduce number of HTTP requests • Clean markup
  24. 24. CSS Sprites Credit: http://css-tricks.com/css-sprites/
  25. 25. CSS Sprites
  26. 26. CSS Sprites Vertical sprite Horizontal sprite
  27. 27. CSS Sprites • 16 kb for whole interface • Allows background patterns • Apply PNG fix to only one CSS statement
  28. 28. Image Replacement • Clean markup • SEO friendly • Accessible?
  29. 29. sIFR • Requires JavaScript and Flash • Text is selectable! • Hard to tame
  30. 30. cufón • Only requires JS • Uses canvas (sexy!) • All the styling is taken directly from the CSS

×