This presentation, given at Boston's Design for Drupal Camp in July 2012, provides a framework and rationale for creating customized Fireworks templates for Drupal projects.

1. CREATING FIREWORKS
TEMPLATES FOR DRUPAL
Dani Nordin :: @danigrrl :: tzk-design.com

2. Dani Nordin
founder, the zen kitchen
• UX Designer and
Strategist
• Specialize in design
strategy, UX and
prototyping for
Drupal projects
• Author, Drupal for
Designers (O’Reilly,
2011/2012)
Contact
@danigrrl
dani@tzk-design.com
tzk-design.com

3. Layout for Drupal: Photoshop
• Working with shapes/path can be awkward, particularly
when making changes
• Text renders awkwardly
• Have to slice images, or create new files, to get images for
theming
• Have to create a new file for every page you’re laying out (or
hide and show layers and re-export)
• Makes iteration annoying

4. Layout for Drupal: Illustrator
• Better handling of shapes and rendering of text
• Better control of color, particularly when using PMS values
• Still have to slice images, or create new files, to get images
for theming
• Still have to create a new file for every page you’re laying out
(or hide and show layers and re-export)
• Makes iteration annoying

5. Why Use Fireworks?
• Handle shapes like Illustrator: can easily adjust points,
curves, etc.
• Still renders in pixels
• Keep multiple pages in one document
• Share layers among pages: particularly useful
for common elements
• Support for text/image styles
• Export entire layers as a web-ready image
• Easily and efficiently iterate stylistic conventions
without needing multiple files

6. CREATING
FIREWORKS LAYOUTS
What you need to remember

7. Pages to Consider
• Node without sidebar
• Node with one and two sidebars
• Specialty nodes (specific content types)
• Views listings for text content
• Views listings for image content
• Home Page
• 404 and 403 Pages
• User Login/Account screen (Drupal admin defaults)

8. Global/Shared Layers
• Page Grid (Square Grid, 960.gs)
• Logo
• Navigation Styles
• Footer Elements

9. Global/Shared Styles
• h1, h2, h3, h4
• p, ul, ol
• blockquote
• code snippets
• Buttons
• Admin Tabs

10. Resources
• Chapter Three’s blog post: Template Approach (includes
template download)
• http://www.chapterthree.com/blog/nica_lorber/design_drupal_temp
late_approach
• Chapter Three’s blog post: Greyboxing (includes template
download)
• http://www.chapterthree.com/greyboxing
• Square Grid Template for Fireworks
• http://www.idux.com/2010/10/04/square-grid-template-for-
fireworks/
• 960.gs templates for Fireworks
• http://www.robbiemanson.com/resources/960px-grid-templates/

11. QUESTIONS?
@danigrrl on Twitter
dani@tzk-design.com