Release Day: Going from Design to Finished Theme

We're super excited to release a new series this week, which has been a highly requested one on our suggestion list: PSD to Drupal Theme. This series walks you through the process of converting a static design into a Drupal theme. We'll be covering strategies for breaking down your design into Drupal pieces, extracting your design assets, and working with those components in your CSS. Along the way you're going to also be introduced to grid frameworks, Sass, and other very helpful general web development tools. At the end you will have a theme that you can install and enable on your Drupal site. Having a little bit of Drupal site building experience, and a little bit of Web experience (HTML and CSS) will be helpful but it's not required, so if you find the world of Drupal themes mysterious, this is a great series to clear the fog.
 

This week we're starting the series off by looking at our project, talking about how to theme using components and getting a style guide set up, and we'll finish up by extracting the design assets we'll need from our PSD file so we can get into the theme itself.

Next week we'll keep things moving along by stubbing out our CSS and lining up Drupal concepts with our design.

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <code class> <ul type> <ol start type> <li> <dl> <dt> <dd><h3 id> <p>
  • Lines and paragraphs break automatically.

About us

Drupalize.Me is the best resource for learning Drupal online. We have an extensive library covering multiple versions of Drupal and we are the most accurate and up-to-date Drupal resource. Learn more