The document discusses various tools and techniques for creating Drupal themes from Photoshop designs, including Firefox extensions like Firebug and YSlow for debugging and performance analysis, overlay tools like MeasureIt and GridFox, and desktop apps like Skitch and OmniGraffle. It also covers useful Drupal modules like Theme Developer and Skinr, as well as CSS techniques like sprites and image replacement.

1. PSD 2 Drupal
Some techniques and tools for making high quality
Drupal themes from Photoshop designs

2. TOOLS

3. Firefox Extensions

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. 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. • Allows you to overlay
your designs on top of
websites
• Multiple layers

7. • Reference material
• Additional information
on HTML elements and
CSS properties

8. Drupal For Firebug
• Drupal debugging
• SQL query information

9. ColorZilla
• Eyedropper
• Color picker
• Zoom, palette editor,
and other somewhat
useful features

10. MeasureIt
• Allows you to measure
elements on your
browsers
• You can have multiple
measurement windows

11. GridFox
• Overlay grids on top of
websites
• Grid options are highly
customizable

12. GridFox
• Overlay grids on top of
websites
• Grid options are highly
customizable

13. Desktop Software

14. xScope
• On-screen ruler
• Easily measure on-
screen dimensions
• Overlay screen sizes
• Guides and crosshair

15. Skitch
• Easily take and upload
screenshots to the web
• Add text, shapes, pencil,
etc.
• Great for bug reports

16. OmniGraffle
• Great for wireframing
• Great for diagrams
• Great for UX planning

17. Drupal Modules

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

20. Skinr
• Allows end users to
select predefined styles
• Works with blocks,
panels, and views

21. Skinr
• Allows end users to
select predefined styles
• Works with blocks,
panels, and views

22. Skinr
• Allows end users to
select predefined styles
• Works with blocks,
panels, and views

23. TECHNIQUES

24. CSS Sprites
• 80+% loading time
comes from front-end
• Reduce number of
HTTP requests
• Clean markup

25. CSS Sprites
Credit: http://css-tricks.com/css-sprites/

26. CSS Sprites

27. CSS Sprites
Vertical
sprite
Horizontal
sprite

28. CSS Sprites
• 16 kb for whole
interface
• Allows background
patterns
• Apply PNG fix to only
one CSS statement

29. Image Replacement
• Clean markup
• SEO friendly
• Accessible?

30. sIFR
• Requires JavaScript and
Flash
• Text is selectable!
• Hard to tame

31. cufón
• Only requires JS
• Uses canvas (sexy!)
• All the styling is taken
directly from the CSS