Danté Taylor provides a beginner's guide to designing Drupal themes. He discusses common tools used to turn design files into themes such as Photoshop, Firebug, and MAMP. Taylor explains how to analyze a design from the Drupal perspective by breaking it into pieces and considering repeating elements. He also covers Drupal theme anatomy, techniques for naming image files, and best practices for writing clean HTML, CSS, and PHP code for themes.

1. Design To Theme:A Beginners GuideBy Danté R. TaylorMediacurrent Senior Drupal DesignerDrupal Camp AtlantaOctober 2, 2010

2. About MeBachelor of Fine Arts (BFA) from Savannah College of Art and DesignWorked as a Designer for the past 10 yearsHave worked with Drupal since version 4.7 releaseBiggest project in Drupal is savannahnow.comFavorite project in Drupal is ymib.com

3. Who this presentation is forIf you are new to Drupal and need a basic idea of where to beginIf you want to understand the process of turning a design into a Drupal theme If you want to make improvements to an existing theme or design`

4. What we will coverCommon tools to use to turn your design files into a Drupal themeHow to look at a design the Drupal wayCommon theme techniques and practices

5. Presentation FormatTopic 1: Use The Right ToolsTopic 2: Design-to-Theme ConceptsTopic 3: Common Theme Techniques

6. Topic 1:Use The Right Tools`

7. The right toolsPhotoshop

8. Illustrator

9. Fireworks

10. Gimp

11. Firefox

12. Chrome

13. Safari

14. Internet Explorer

15. MAMP

16. Staging Site

17. Colorzilla(Firefox Plug-in)

18. DigitalColorMeter

19. FireBug(Firefox Plug-in)

20. Web Developer (Firefox Plug-in)

21. Text Editor (Dreamweaver, BBEdit, gEdit, notepad, etc)

22. Theme Developer Module`

23. PhotoshopAdvanced Image/photo manipulation toolCan be used for web design layoutUsed to create bitmap and vector artworkBasic image slicing functionality Most designers will deliver finial creative files in a Photoshop formatIndustry standard software

24. FireworksAdvanced Image/photo manipulation tool for web designBuilt-in features for web design professionalsAdvanced image slicing functionality Firework is not as commonly used tool for non-web designers & publishersIndustry standard software for web designersFireworks works well with Photoshop

25. The GIMPIts Open Source and powerful!Advanced Image/photo manipulation toolBasic image slicing functionality Most designers will not deliver final creative files in a GIMP formatNot an industry standard softwareSome Photoshop transparencies and filters will cause issues when working between toolsMajor differences in UI compared to Photoshop and Fireworks

26. IllustratorUsed primary to create vector based artwork

27. Basic image slicing features

28. Good for logo and line artwork

29. Use this tool for typography work

30. Most designers will not deliver final artwork in an illustrator format.

31. This tool is ideally used for custom icon work and site background artworkFirebugPowerful tool and a must have for anyone building web sites

32. Inspect HTMLstructure

33. Dynamically alter site CSS & HTML inside web browser

34. DebugJavascript code

35. Easy determine layout (padding, margin, border and positioning)

36. Determine DOM hierarchy

37. Web DeveloperThis is a Firefox plug-in that is a very powerful way to debug your themes

38. This tool has validation tool that will warn you when your code does not validate

39. Can set tool to resize browser based on common browser resolutions Popular BrowsersFirefox, Safari, Internet Explorer, and Chrome are the top four major browser operating on the Internet

40. Learn the quarks and bugs associated with all major browsers

41. All four browsers have some from of web development toolkit packaged with browser

42. Know your audience and their common browser of choiceColor PickersColorZilla is a Firefox plug-in that will allow you to pick colors right from a website

43. DigitalColor Meter will allow you to pick colors from anywhere on your OS (This is a Mac app)

44. These tools come in handy when you need to quickly grab colors from a web site design and don’t have time to open Photoshop or search through a style sheet`

45. Theme Developer ModuleThis is contributed module that is used with Drupal to help developers and themers identify Drupal core code variables, functions, and templates