PSD 2 Drupal
Some 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