57
To prepare for this seminar you should download a copy of the following themes: http://drupal.org/project/ninesixty http://drupal.org/project/domicile If 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 User's Guide or workbooks at Designtotheme.com. Slides are available from: slideshare.net/emmajane

From PSD to Drupal Theme

  • Upload
    acquia

  • View
    31.585

  • Download
    1

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: From PSD to Drupal Theme

����������

To prepare for this seminar you should download a copy of the

following themes:

� http://drupal.org/project/ninesixty

� http://drupal.org/project/domicile

If 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 User's Guide or workbooks at Designtotheme.com.

� Slides are available from: slideshare.net/emmajane

Page 2: From PSD to Drupal Theme

�� ����������

www.sitebuildingextravaganza.com

Page 3: From PSD to Drupal Theme

���������������

www.designtotheme.com

Discount code available at the end of the webinar.

Page 4: From PSD to Drupal Theme

���������������

Page 5: From PSD to Drupal Theme

������

Theme Building� Theming philosophy

� Process

� Case study: Domicile

35 minutes

Summary� Questions/Answers

� Discount Coupons

20 minutes

Page 6: From PSD to Drupal Theme

��������������� ��

Page 7: From PSD to Drupal Theme

�!��"�����#����$��� ��

Page 8: From PSD to Drupal Theme

�������������%����������&���'����(����

Page 9: From PSD to Drupal Theme

node.tpl.php

page.tpl.php

field.tpl.php

jplayer.tpl.php

������������ � � �"����

�������)��������

Page 10: From PSD to Drupal Theme

Minimum Viable Theme

UX

UX

UX

UX

�����%������&�����*� ��$��%����"��� �����

������%���������)���+������

Page 11: From PSD to Drupal Theme

������,� �� ���������������

� 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 you'd like to have.

� Pixel perfect design is for print. Get over it.

Page 12: From PSD to Drupal Theme

�&&�����������������

“Accessible web design refers to the philosophy and

practice of designing web pages so that they can be

navigated 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

Page 13: From PSD to Drupal Theme

��� ����$�����������

“Any approach that delivers elegant visual

experiences regardless of the size of the user’s

display and the limitations or capabilities of the

device” 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.)

Page 14: From PSD to Drupal Theme

�������������

� Budget-appropriate.

� Accessible.

� Responsive.

Page 15: From PSD to Drupal Theme

���&���

Page 16: From PSD to Drupal Theme

-�� �����'�������������

1.Communicate with your whole team.

2.Plan your data structure.

3.Use wire frames to prove what you're 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.

Page 17: From PSD to Drupal Theme

����'����

http://www.flickr.com/photos/alan-dean/3513723498

Page 18: From PSD to Drupal Theme

�����"�����

Page 19: From PSD to Drupal Theme
Page 20: From PSD to Drupal Theme
Page 21: From PSD to Drupal Theme

������-������������

(This may affect site design decisions based on the

theming goals of budget-appropriate, accessible and

responsive.)

Page 22: From PSD to Drupal Theme

�����"����.���

http://960.gs/

Page 23: From PSD to Drupal Theme

�--��������"����.���

Page 24: From PSD to Drupal Theme

����������

� drupal.org/project/ninesixty

� drupal.org/project/fusion

� drupal.org/project/zen

Page 25: From PSD to Drupal Theme

�����������-�&&���/��������

You 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.

Page 26: From PSD to Drupal Theme

�����-��������������������0

Page 27: From PSD to Drupal Theme

-�� �����'1�

1.Prepare design.

2.Create theme shell (text files for Drupal).

3.Create regions.

4.Extract and embed images.

5.Launch MVT.

Page 28: From PSD to Drupal Theme

���&���

� Designed by Betty

Biesenthal.

� Themed by Emma

Jane Hogbin (and the

base theme

NineSixty).

� Code available from

http://drupal.org/project/domicile

Page 29: From PSD to Drupal Theme

���&���������

Page 30: From PSD to Drupal Theme

�����%$�����

Page 31: From PSD to Drupal Theme

�����"�����/���+���-�2���-��,�����

Page 32: From PSD to Drupal Theme

���������������-����

sites/example.com/themes/theme_name theme_name.info page.tpl.php

Also: sites/all/themes/base_theme

Page 33: From PSD to Drupal Theme

������� ���

1.Download the theme:

http://drupal.org/project/domicile

2.Unzip the package.

3.Look at the files inside.

Page 34: From PSD to Drupal Theme

����&�����/�

name = D7SBE - Domicile

description = A three-column design by Design House (www.design-

house.ca) and themed by Design to Theme.

screenshot = screenshot.png

core = 7.x

engine = phptemplate

base theme = ninesixty

; Stylesheets.

; Regions

; Features

Page 35: From PSD to Drupal Theme

������ ���� � � �/����+���-�2��

Page 36: From PSD to Drupal Theme

3�����/��������-�� ���������&���

Page 37: From PSD to Drupal Theme

�/�������������������&��

Page 38: From PSD to Drupal Theme

#2���&��3������/���������-

Page 39: From PSD to Drupal Theme
Page 40: From PSD to Drupal Theme
Page 41: From PSD to Drupal Theme

(���������"�2���3�����

Page 42: From PSD to Drupal Theme

'�������1�����������

Page 43: From PSD to Drupal Theme

-�� �����'1��-������

1.Prepare design.

2.Create theme shell (text files for Drupal).

3.Create regions.

4.Extract and embed images.

5.Launch MVT.

Page 44: From PSD to Drupal Theme

����4�������5

Pink sherbert photography http://www.flickr.com/photos/pinksherbet/3372060864/

Page 45: From PSD to Drupal Theme

���������67

Locate “problem” areas and fix with:

� The administrative interface.

� CSS enhancements.

And if you need more control add:

� Helper modules.

� Theme template files.

� Theme functions.

Page 46: From PSD to Drupal Theme

������������$��3����/�&�

Page 47: From PSD to Drupal Theme

�--�#����&������

Relevant HTML

source

Page element CSS styles

Page 48: From PSD to Drupal Theme

� ���������&�-�����

Page 49: From PSD to Drupal Theme

� ��������,- �&�/�&�-�����

Page 50: From PSD to Drupal Theme

-������������8��������(�� ���

Themer Tools� Devel

� Theme Developer

� Firebug for Drupal

Layout� Panels

� Context

� Display Suite

Site Building� Views

� Nodes in Block

� Menu Block

� Entity View Mode

� Media

� jPlayer

� etc

Page 51: From PSD to Drupal Theme

� � �

� page.tpl.php

� node.tpl.php

� page-front.tpl.php

� block.tpl.php

� Error pages: 403, 404, 500

Page 52: From PSD to Drupal Theme

������"��&�����

Finally...and only if you really must:� Preprocess functions.

� Form altering functions.

� Functionality-based PHP snippets.

� (etc)

Page 53: From PSD to Drupal Theme

���&���9����������

Page 54: From PSD to Drupal Theme

���������������-������

Minimum Viable Theme1.Prepare design.

2.Create required theme files.

3.Create regions in page.tpl.php.

4.Extract and embed images.

5.Launch MVT.

Theme by UX6.Administrative interface

7.CSS enhancements

8.Module helpers

9.tpl.php files

10.Theme functions

Page 55: From PSD to Drupal Theme

�-����������-������

� 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.

Page 56: From PSD to Drupal Theme

www.informit.com

SAVE 35% on Drupal User's Guide.

Discount Code: DRUPALUSER

www.designtotheme.com

Save 35% on all titles.

Discount Code: ACQUIA-P2T

1. PSD to Drupal Theme2. SBE Guide: Micro Site

www.drupalwatchdog.com/read

Issue 1: Free PSD to Theme article.

��&������������&��&����� ���������

Page 57: From PSD to Drupal Theme

-����������&�

� @emmajanedotnet

[email protected]

� www.designtotheme.com