0
Get Ready ...To prepare for this seminar you should download a copy of thefollowing themes:●   http://drupal.org/project/n...
Drupal Trainer www.sitebuildingextravaganza.com
Workbook Author            www.designtotheme.comDiscount code available at the end of the webinar.
Book (Co)Author
AgendaTheme Building                Summary●   Theming philosophy        ●   Questions/Answers●   Process                 ...
Theming Philosophy
Lazy Front End Developer
Working With OthersProduces More Honey
Theming by tpl.php Files                  Wastes Your Timenode.tpl.php                                              field....
Take Only Pictures, Leave Only FootprintsTheme Only What You Need To   UX                                       UX        ...
Budget-Appropriate Web Design●    Know your Drupal toolkit. Know your budget.●    Focus on the biggest elements first.●   ...
Accessible Web Design“Accessible web design refers to the philosophy andpractice of designing web pages so that they can b...
Responsive Web Design“Any approach that delivers elegant visualexperiences regardless of the size of the user’sdisplay and...
Theming Goals●    Budget-appropriate.●   Accessible.●   Responsive.
Process
Steps to Making a Theme1. Communicate with your whole team.2. Plan your data structure.3. Use wire frames to prove what yo...
Data Model    http://www.flickr.com/photos/alan-dean/3513723498
Wire Frames
Begin Site Building(This may affect site design decisions based on thetheming goals of budget-appropriate, accessible andr...
Grid Frameworkhttp://960.gs/
CSS (Grid) Framework
Base Theme●   drupal.org/project/ninesixty●   drupal.org/project/fusion●   drupal.org/project/zen
To Build a Successful ThemeYou must:●   Know your data model.●   Create wire frames describing page elements.●   Identify ...
Case StudyBuild me a theme!
Steps to MVT1. Prepare design.2. Create theme shell (text files for Drupal).3. Create regions.4.Extract and embed images.5...
Domicile●    Designed by Betty    Biesenthal.●   Themed by Emma    Jane Hogbin (and the    base theme    NineSixty).●   Co...
Domicile Theme
Grid Overlay
Wire Frame for NineSixty Sub-Theme
Create a Theme Shellsites/example.com/themes/theme_name   theme_name.info   page.tpl.phpAlso: sites/all/themes/base_theme
Take a peek1. Download the theme:   http://drupal.org/project/domicile2. Unzip the package.3. Look at the files inside.
domicile.infoname = D7SBE - Domiciledescription = A three-column design by Design House (www.design-house.ca) and themed b...
Build page.tpl.php from NineSixty
Identify These  Shapes in   Domicile
Define Regions and Blocks
Extract Images from the PSD
Hard Code Fixed Images
Minimum Viable Theme
Steps to MVT Summary1. Prepare design.2. Create theme shell (text files for Drupal).3. Create regions.4.Extract and embed ...
Whats Wrong?Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
Theme by UXLocate “problem” areas and fix with:●   The administrative interface.●   CSS enhancements.And if you need more ...
Administrative Interface
CSS EnhancementsRelevant HTML      Page element    CSS stylessource
Apply Generic Styles
Apply Build-Specific Styles
Site Building/Theming HelpersThemer Tools             Site Building●   Devel                ●   Views●   Theme Developer  ...
tpl.php●    page.tpl.php●   node.tpl.php●   page-front.tpl.php●   block.tpl.php●   Error pages: 403, 404, 500
Theme FunctionsFinally...and only if you really must:●   Preprocess functions.●   Form altering functions.●   Functionalit...
Domicile: the theme
Theme Building SummaryMinimum Viable Theme                 Theme by UX1. Prepare design.                   6. Administrati...
PSD to Theme Summary●   Plan your theme from the data model out, not the template files in.●   Use relevant Drupal modules...
Discounts on Practical Drupal Guides                                     www.designtotheme.com                            ...
Stay in Touch●    @emmajanedotnet●   emma@designtotheme.com●   www.designtotheme.com
PSD to Theme - Acquia Webinar
PSD to Theme - Acquia Webinar
PSD to Theme - Acquia Webinar
PSD to Theme - Acquia Webinar
Upcoming SlideShare
Loading in...5
×

PSD to Theme - Acquia Webinar

7,034

Published on

You've just been handed a gorgeous, static Photoshop file. By tomorrow it needs to be a flexible, extensible, and compatible Drupal theme for some Web site you've never seen. Oh and they said something about it needing to be responsive to 508 or something like that? *gulp* No worries! In this one-hour webinar, Drupal rock star Emma Jane Hogbin, will give you a sneak peek inside her brand new book Drupal: A User's Guide and show you how to transform a Photoshop file into a real live theme. As part of this webinar you will receive all of the code for the theme we build so you can watching, listening and learning how to quickly build themes for Drupal 7.

We'll cover:

Rapid prototyping with Minimum Viable Themes
Choosing the best base theme for your current project--no, one size doesn't fit all--especially if the design was meant to be responsive
How to save time with image extraction techniques
Smoothing out the transition from design to theme with powerful helper modules

Published in: Technology, Design
3 Comments
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,034
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
272
Comments
3
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "PSD to Theme - Acquia Webinar"

  1. 1. Get Ready ...To prepare for this seminar you should download a copy of thefollowing themes:● http://drupal.org/project/ninesixty● http://drupal.org/project/domicileIf you need to leave:● This session is recorded. If the recording fails, this is a similar presentation to the one I gave at DrupalCon London.● The information is available in: Drupal Users Guide or workbooks at Designtotheme.com.● Slides are available from: slideshare.net/emmajane
  2. 2. Drupal Trainer www.sitebuildingextravaganza.com
  3. 3. Workbook Author www.designtotheme.comDiscount code available at the end of the webinar.
  4. 4. Book (Co)Author
  5. 5. AgendaTheme Building Summary● Theming philosophy ● Questions/Answers● Process ● Discount Coupons● Case study: Domicile 20 minutes35 minutes
  6. 6. Theming Philosophy
  7. 7. Lazy Front End Developer
  8. 8. Working With OthersProduces More Honey
  9. 9. Theming by tpl.php Files Wastes Your Timenode.tpl.php field.tpl.phpjplayer.tpl.php page.tpl.php
  10. 10. Take Only Pictures, Leave Only FootprintsTheme Only What You Need To UX UX Minimum Viable Theme UX UX
  11. 11. Budget-Appropriate Web Design● Know your Drupal toolkit. Know your budget.● Focus on the biggest elements first.● Work closely with your designer and your client to make sure you get the important things right.● Theme with the markup you have, not the markup youd like to have.● Pixel perfect design is for print. Get over it.
  12. 12. Accessible Web Design“Accessible web design refers to the philosophy andpractice of designing web pages so that they can benavigated and read by everyone, regardless of location,experience, or the type of computer technology used.”Australian Human Rights Commission ● Know your guidelines (508 or WAI). ● Use a checklist. ● Use an automated testing suite. ● Test with users.http://www.designtotheme.com/tutorials/automated-accessibility-testing
  13. 13. Responsive Web Design“Any approach that delivers elegant visualexperiences regardless of the size of the user’sdisplay and the limitations or capabilities of thedevice” zeldman.● Read: http://tinyurl.com/responsive-article● Buy (and read): http://tinyurl.com/responsive-book● Watch: http://tinyurl.com/pathtomobile● Use: http://drupal.org/project/omega(Eventually “all” base themes will be responsive.)
  14. 14. Theming Goals● Budget-appropriate.● Accessible.● Responsive.
  15. 15. Process
  16. 16. Steps to Making a Theme1. Communicate with your whole team.2. Plan your data structure.3. Use wire frames to prove what youre saying about how the site ought to be built.4.Build the site (ignore the theme).5. Convert your wire frame to its grid layout.6.Build out the HTML fragments in the relevant tpl.php files. Substitute CSS effects for PSD effects where possible.7. Apply your theme to the site.8.Refine as necessary based on the UX.
  17. 17. Data Model http://www.flickr.com/photos/alan-dean/3513723498
  18. 18. Wire Frames
  19. 19. Begin Site Building(This may affect site design decisions based on thetheming goals of budget-appropriate, accessible andresponsive.)
  20. 20. Grid Frameworkhttp://960.gs/
  21. 21. CSS (Grid) Framework
  22. 22. Base Theme● drupal.org/project/ninesixty● drupal.org/project/fusion● drupal.org/project/zen
  23. 23. To Build a Successful ThemeYou must:● Know your data model.● Create wire frames describing page elements.● Identify the modules, templates and configuration responsible for every element described in your wire frames.● Use a grid framework in both your design files and Drupal templates.● Use a base theme that meets your web design goals.
  24. 24. Case StudyBuild me a theme!
  25. 25. Steps to MVT1. Prepare design.2. Create theme shell (text files for Drupal).3. Create regions.4.Extract and embed images.5. Launch MVT.
  26. 26. Domicile● Designed by Betty Biesenthal.● Themed by Emma Jane Hogbin (and the base theme NineSixty).● Code available from http://drupal.org/project/domicile
  27. 27. Domicile Theme
  28. 28. Grid Overlay
  29. 29. Wire Frame for NineSixty Sub-Theme
  30. 30. Create a Theme Shellsites/example.com/themes/theme_name   theme_name.info   page.tpl.phpAlso: sites/all/themes/base_theme
  31. 31. Take a peek1. Download the theme: http://drupal.org/project/domicile2. Unzip the package.3. Look at the files inside.
  32. 32. domicile.infoname = D7SBE - Domiciledescription = A three-column design by Design House (www.design-house.ca) and themed by Design to Theme.screenshot = screenshot.pngcore = 7.xengine = phptemplatebase theme = ninesixty; Stylesheets.; Regions; Features
  33. 33. Build page.tpl.php from NineSixty
  34. 34. Identify These Shapes in Domicile
  35. 35. Define Regions and Blocks
  36. 36. Extract Images from the PSD
  37. 37. Hard Code Fixed Images
  38. 38. Minimum Viable Theme
  39. 39. Steps to MVT Summary1. Prepare design.2. Create theme shell (text files for Drupal).3. Create regions.4.Extract and embed images.5. Launch MVT.
  40. 40. Whats Wrong?Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/
  41. 41. Theme by UXLocate “problem” areas and fix with:● The administrative interface.● CSS enhancements.And if you need more control add:● Helper modules.● Theme template files.● Theme functions.
  42. 42. Administrative Interface
  43. 43. CSS EnhancementsRelevant HTML Page element CSS stylessource
  44. 44. Apply Generic Styles
  45. 45. Apply Build-Specific Styles
  46. 46. Site Building/Theming HelpersThemer Tools Site Building● Devel ● Views● Theme Developer ● Nodes in Block● Firebug for Drupal ● Menu BlockLayout ● Entity View Mode● Panels ● Media● Context ● jPlayer● Display Suite ● etc
  47. 47. tpl.php● page.tpl.php● node.tpl.php● page-front.tpl.php● block.tpl.php● Error pages: 403, 404, 500
  48. 48. Theme FunctionsFinally...and only if you really must:● Preprocess functions.● Form altering functions.● Functionality-based PHP snippets.● (etc)
  49. 49. Domicile: the theme
  50. 50. Theme Building SummaryMinimum Viable Theme Theme by UX1. Prepare design. 6. Administrative interface2. Create required theme files. 7. CSS enhancements3. Create regions in page.tpl.php. 8. Module helpers4. Extract and embed images. 9. tpl.php files5. Launch MVT. 10.Theme functions
  51. 51. PSD to Theme Summary● Plan your theme from the data model out, not the template files in.● Use relevant Drupal modules to break up content and display it in relevant locations.● Extract only the images and colours you need from your PSD file.● Using your grid, rebuild your design as a minimum viable theme in the fewest possible tpl.php files.● Fix any outstanding problems according to the expected user experience with the site.● Test your site using automated testing suites for cross-browser and accessibility issues. Then test again using as much real content and as many real people as you can afford.● Cross your fingers and launch.
  52. 52. Discounts on Practical Drupal Guides www.designtotheme.com Save 35% on all titles. Discount Code: ACQUIA-P2T 1. PSD to Drupal Theme 2. SBE Guide: Micro Site www.informit.comSAVE 35% on Drupal Users Guide. www.drupalwatchdog.com/readDiscount Code: DRUPALUSER Issue 1: Free PSD to Theme article.
  53. 53. Stay in Touch● @emmajanedotnet● emma@designtotheme.com● www.designtotheme.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×