PSD 2 DrupalSome techniques and tools for making high quality
Drupal themes from Photoshop designs
TOOLS
Firefox Extensions
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
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
• Allows you to overlay your designs on top of websites
• Multiple layers
• Reference material
• Additional information on HTML elements and CSS properties
Drupal For Firebug
• Drupal debugging
• SQL query information
ColorZilla
• Eyedropper
• Color picker
• Zoom, palette editor, and other somewhat useful features
MeasureIt
• Allows you to measure elements on your browsers
• You can have multiple measurement windows
GridFox
• Overlay grids on top of websites
• Grid options are highly customizable
GridFox
• Overlay grids on top of websites
• Grid options are highly customizable
Desktop Software
xScope
• On-screen ruler
• Easily measure on-screen dimensions
• Overlay screen sizes
• Guides and crosshair
Skitch
• Easily take and upload screenshots to the web
• Add text, shapes, pencil, etc.
• Great for bug reports
OmniGraffle
• Great for wireframing
• Great for diagrams
• Great for UX planning
Drupal Modules
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
Skinr
• Allows end users to select predefined styles
• Works with blocks, panels, and views
Skinr
• Allows end users to select predefined styles
• Works with blocks, panels, and views
Skinr
• Allows end users to select predefined styles
• Works with blocks, panels, and views
TECHNIQUES
CSS Sprites
• 80+% loading time comes from front-end
• Reduce number of HTTP requests
• Clean markup
CSS Sprites
Credit: http://css-tricks.com/css-sprites/
CSS Sprites
CSS Sprites
Vertical sprite
Horizontal sprite
CSS Sprites
• 16 kb for whole interface
• Allows background patterns
• Apply PNG fix to only one CSS statement
Image Replacement
• Clean markup
• SEO friendly
• Accessible?
sIFR
• Requires JavaScript and Flash
• Text is selectable!
• Hard to tame
cufón
• Only requires JS
• Uses canvas (sexy!)
• All the styling is taken directly from the CSS