0
Drupal theming from design to development Alex J. Ventpap & Tom James
Starting on Photoshop <ul><ul><ul><li>The scary white canvas on photoshop, get logic. Collect data first  </li></ul></ul><...
Gathering information - Wireframe is the boss Petro Value project
Background & Guidelines Petro Value project
Following the wireframe Petro Value project
Layout and structure Petro Value project
Vector elements in photoshop -  stretching ability Petro Value project
Fonts - websafe <ul><ul><ul><li>http://www.typetester.org </li></ul></ul></ul>
Colors - Adobe kuler <ul><ul><ul><li>http://kuler.adobe.com/#links </li></ul></ul></ul>
Fills, layer styles & keyboard shortcuts Layer Styles - Gradient Overlay + Stroke
  Keyboard shortcuts MAIN MENU > Edit > Keyboard Shortcuts
Finishing/revisions - Color changes/end of design stage Petro Value Project
Useful links <ul><li>More photoshop tricks </li></ul><ul><ul><li>  http://all-x.ca/blog/?p=176  </li></ul></ul><ul><li>  <...
The theming bit
Intro <ul><ul><li>Who’s a developer/themer? </li></ul></ul><ul><ul><li>What is a Drupal theme?  </li></ul></ul><ul><ul><li...
Planning the theme <ul><ul><li>Shouldn’t be any major surprises in the design by this stage </li></ul></ul><ul><ul><li>Dev...
Review the design <ul><ul><li>Ideally you review the final design before it’s sent to the client for review </li></ul></ul...
Getting Started <ul><ul><li>SVN set up </li></ul></ul><ul><ul><li>SVN benefits? (rollbacks, easy deployment) </li></ul></u...
Building out <ul><ul><li>Start with the basic common structure  ie. Header, content, columns and footer </li></ul></ul><ul...
Principles to consider <ul><ul><li>Refer back to your brief & mocks to make sure you don’t miss anything, remember we hate...
Finalizing <ul><ul><li>Review the mock ups again, yes again. Attention to detail is important </li></ul></ul><ul><ul><li>B...
This is the end We were: Alex J Ventpap (The Designer) http://all-x.ca Tom James (The other one) http://tomswebstuff.com h...
Upcoming SlideShare
Loading in...5
×

Drupal Camp Victoria

930

Published on

A presentation about drupal theming. From design to development stage

Published in: Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
930
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Drupal Camp Victoria"

  1. 1. Drupal theming from design to development Alex J. Ventpap & Tom James
  2. 2. Starting on Photoshop <ul><ul><ul><li>The scary white canvas on photoshop, get logic. Collect data first </li></ul></ul></ul><ul><ul><ul><li>Set the size of the website, guidelines are important </li></ul></ul></ul><ul><ul><ul><li>Backgrounds, keep in mind developers work </li></ul></ul></ul>
  3. 3. Gathering information - Wireframe is the boss Petro Value project
  4. 4. Background & Guidelines Petro Value project
  5. 5. Following the wireframe Petro Value project
  6. 6. Layout and structure Petro Value project
  7. 7. Vector elements in photoshop - stretching ability Petro Value project
  8. 8. Fonts - websafe <ul><ul><ul><li>http://www.typetester.org </li></ul></ul></ul>
  9. 9. Colors - Adobe kuler <ul><ul><ul><li>http://kuler.adobe.com/#links </li></ul></ul></ul>
  10. 10. Fills, layer styles & keyboard shortcuts Layer Styles - Gradient Overlay + Stroke
  11. 11.   Keyboard shortcuts MAIN MENU > Edit > Keyboard Shortcuts
  12. 12. Finishing/revisions - Color changes/end of design stage Petro Value Project
  13. 13. Useful links <ul><li>More photoshop tricks </li></ul><ul><ul><li>  http://all-x.ca/blog/?p=176 </li></ul></ul><ul><li>  </li></ul><ul><li>More about photoshop + drupal </li></ul><ul><ul><li>  http://imagexmedia.com/blog </li></ul></ul><ul><li>Designing for Drupal: Photoshop Best Practices </li></ul><ul><li>  </li></ul>
  14. 14. The theming bit
  15. 15. Intro <ul><ul><li>Who’s a developer/themer? </li></ul></ul><ul><ul><li>What is a Drupal theme? </li></ul></ul><ul><ul><li>Theming isn’t rocket science Relies on strong CSS/HTML skills rather than PHP </li></ul></ul><ul><ul><li>Theming is powerful & flexible - Module theme overriding (functions & templates) - No need to alter module code </li></ul></ul><ul><ul><li>Every developer has a different approach - Find methods that work for you </li></ul></ul>
  16. 16. Planning the theme <ul><ul><li>Shouldn’t be any major surprises in the design by this stage </li></ul></ul><ul><ul><li>Developers with a tight budget hate surprises </li></ul></ul><ul><ul><li>Highlights need for design & development overlap </li></ul></ul><ul><ul><li>Designers & Developers can & should get along </li></ul></ul>
  17. 17. Review the design <ul><ul><li>Ideally you review the final design before it’s sent to the client for review </li></ul></ul><ul><ul><li>Layout sizing & structure </li></ul></ul><ul><ul><li>Review potential block regions needed   </li></ul></ul><ul><ul><li>Look for possible frontpage variations   </li></ul></ul><ul><ul><li>Any possible module overrides ie. search form, login block, node type styles </li></ul></ul>
  18. 18. Getting Started <ul><ul><li>SVN set up </li></ul></ul><ul><ul><li>SVN benefits? (rollbacks, easy deployment) </li></ul></ul><ul><ul><li>Drupal & Localhost set up to begin with (quicker)(Acquia or Aegir) </li></ul></ul><ul><ul><li>Create the basic theme structure - Copy a theme from Drupal.org - Make you own template/skeleton theme - Start out with a CSS/HTML layout if needs be </li></ul></ul>
  19. 19. Building out <ul><ul><li>Start with the basic common structure ie. Header, content, columns and footer </li></ul></ul><ul><ul><li>Then build out any frontpage variations - drupal_is_front_page function (page.tpl.php) - custom body_class function (PHP & CSS) - Only use 1 page.tpl.php file for easier upgrading </li></ul></ul><ul><ul><li>Next focus on key features & details to theme out ie. Menu style, block styles, search block styling </li></ul></ul><ul><ul><li>Consider the theming of individual node types & Views lists </li></ul></ul>
  20. 20. Principles to consider <ul><ul><li>Refer back to your brief & mocks to make sure you don’t miss anything, remember we hate surprises. </li></ul></ul><ul><ul><li>Avoid hard coding anything into your theme ie. Menus should the menu system, column content should be in blocks or modules if complex </li></ul></ul><ul><ul><li>Try not to fill your template.php file with custom code, use a module instead or include files </li></ul></ul><ul><ul><li>Use as fewer .tpl files as possible & keep them free of big chunks of code (use functions). </li></ul></ul><ul><ul><li>Browser check your work on a regular basic Mac & PC, IE6-8, Firefox, Safari </li></ul></ul><ul><ul><li>Make your theme flexible, look ahead but not too far ahead, </li></ul></ul>
  21. 21. Finalizing <ul><ul><li>Review the mock ups again, yes again. Attention to detail is important </li></ul></ul><ul><ul><li>Browser check again </li></ul></ul><ul><ul><li>Check all theme functionality like menu drop downs & any Javascript is working, check the error log and Firefox console </li></ul></ul><ul><ul><li>Get QA (Quality Assurance) done by someone else </li></ul></ul><ul><ul><li>Send to client for review :) </li></ul></ul>
  22. 22. This is the end We were: Alex J Ventpap (The Designer) http://all-x.ca Tom James (The other one) http://tomswebstuff.com http://drupalsn.com We are both proud to be part of ImageX Media http://imagexmedia.com
  1. A particular slide catching your eye?

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

×