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.
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
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.
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