Create a Killer Band Site in Drupal – Part 2 – Slicing in Illustrator

This tutorial is another special series written guest author Sean Hodge from and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin



We started this Series in Adobe Illustrator. Its a great tool for web design. Certainly Photoshop is more common, but Illustrator has some flexible advantages. Everything is kept vector and therefore if a client makes some changes its quick to fix. So, I’m going to cover slicing in Illustrator in this tutorial. If you built the last design in Photoshop or if you would like to open up this document in Photoshop then the process for slicing there is virtually the same. There are only subtle differences.

Set Up Our Prep File

In our last tutorial we created our layout as a mockup that is fit for client presentation. Open up that file and save it as In this tutorial we will remove any parts of the layout that don’t need to be sliced for the coding of the website. See the image below for what our file will look like for slicing.

Most of the text is removed. And I repositioned elements for optimal setup for slicing. The search icon is moved over to the right. The photos and single icon in the sidebar are moved down to make room for