psd 2 drupal

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