Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

PSD to Theme Introduction

Video loading...

  • 0:01
    SYNTHESIZED VOICE: Drupalize Me.
  • 0:05
    PSD to Theme Introduction to the PSD to Theme
  • 0:07
    Series with Emma Jane Westby.
  • 0:09
    [MUSIC PLAYING]
  • 0:19
    EMMA JANE WESTBY: In This series, you'll
  • 0:21
    be learning how to transform a static design
  • 0:23
    file into a whole Drupal theme.
  • 0:26
    To go from design to theme, we'll work through three major steps.
  • 0:31
    First of all, developing a style guide based on the design patterns
  • 0:35
    that we see in our design files.
  • 0:37
    Second, we'll build out Drupal so that it
  • 0:39
    has all of the elements in place.
  • 0:41
    And finally, we'll actually work with those theming files
  • 0:44
    to decorate Drupal.
  • 0:46
    In the first step, create a style guide,
  • 0:49
    we'll need to identify all of the patterns
  • 0:50
    that we can find in our design files.
  • 0:54
    The next step will be to organize those patterns according
  • 0:57
    to Object Oriented CSS best practices.
  • 1:01
    We'll then extract the design assets that we need from our design files
  • 1:05
    and create a checklist of all of the things
  • 1:07
    that we'll need to build out in Drupal
  • 1:08
    in order to apply our theme correctly.
  • 1:11
    The next step is to configure Drupal.
  • 1:14
    We'll be installing Drupal, creating some dummy content with the Devel
  • 1:18
    Generate module, creating custom blocks, and creating custom menus.
  • 1:23
    In the third step, theming by component,
  • 1:26
    we will create our base theme that has the infrastructure that we need
  • 1:29
    for all of the different types of files we'll be working with.
  • 1:32
    We'll be applying our style guide to the theme.
  • 1:35
    We'll be uploading our theme and enabling it from within Drupal.
  • 1:39
    And then we'll get down to the kind of the hard part of the job which
  • 1:43
    is actually doing all of the debugging work of figuring out why
  • 1:46
    a style may not be correctly applied.
  • 1:48
    We'll be using a lot of Inspect Element for this particular stage.
  • 1:53
    Before wrapping up the learning series,
  • 1:55
    we'll take a look at all of the topics
  • 1:56
    that you may want to explore after you've
  • 1:58
    learned how to go from design to theme.
  • 2:01
    Hopefully you're as excited as I am about
  • 2:03
    this topic and ready to dive in.
  • 2:05
    Let's get going and go from design to theme.

PSD to Drupal Theme

Loading ...

PSD to Theme Introduction

Loading...
2 minutes 13 seconds // Drupal 7 // HDCC //

Emma Jane Westby introduces the series. In this series, you'll learn how to transform a static design file into a whole Drupal theme. We'll work through three major steps.

  1. Develop a style guide based on the design patterns we see in our design files.
  2. Build out Drupal so that it has all of the elements we need in place.
  3. Work with theming files to decorate Drupal.

Additional Resources

In addition to the lessons in this series, Emma has assembled an extensive FAQ on Drupal theming.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.

Share