This tutorial is another special series written guest author Sean Hodge from aiburn.com 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

Introduction

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 goband_layout_prep.ai. 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 slicing the column backgrounds. The main column and sidebar column are shortened to 458px high. A 960px wide by 150px high rounded rectangle is added at the bottom. No, this is not for a footer (though you could use it for that also). It is for theming a one column view in Drupal. There are some login and password screens for example that are one column. It also gives our client a one column option for some of their content.

For slicing purposes I created three primary navigation bars. The are all the same size but have different pieces that will fit together to make our coded navigation bar. The top one is the full background. The middle one is for our normal non-active button states. And the bottom one is for our rollover and active button states. All four of the button images are 30px tall by 300px wide. Notice in the image below that there are two different button shapes. This is because our home button has a unique rounded left side. We need to account for that in our slicing preparation. The image below is at one hundred percent. The 2px wide by 30px tall divider area is not shown below. We will see a close up of the divider once we get to slicing that section.

Before we move on I want to make sure you have all your strokes set up correctly for accurate slicing. In the image below I have the upper primary navigation bar selected. In the Strokes Palette I clicked on Align Stroke to Inside. Its the middle button next to Align Stroke. The top navigation in the image below has this set. The bottom one is still set to the default, which is Align Stroke to Center. There are guides placed to make this clearer. The bottom stroke on the bar is shown as still overlapping the guides. This needs to be fixed for our slices to look right. We want all the boxes to look like the top one. Go ahead and apply this technique to all the boxes that have strokes set in your layout.

Slicing the Top of Our Layout

We are going to slice this layout working from top to bottom and left to right. The Slice Tool is pictured in the image below. Create a slice that starts at the top left of our document that is 50px wide by 104px high. This will be our background image.

We’ll slice our header next. If you place guides at 100px and 1060px it will make it easier to draw the slice. I drew the slice from the top of our document down a little past the bottom of the header.

Utilize the settings at the top of Illustrator (see image below). Make sure you got your width at exactly 960px. Also, zoom in and make sure your right on the guides.

Now we draw another slice around our search button. Pictured below the Slice Select Tool is highlighted. This is used to move around slices that you’ve drawn. You can also manipulate corners similar to any box in Illustrator.

Slicing Our Primary Navigation

First we slice the top primary navigation bar to get our background. We create a slice 960px wide by 30px high.

Then we create two slices over our middle and bottom primary navigation buttons. The normal and active states will make up one image. Below is a close up image of the two slices that will make up our primary navigation buttons. There is one slice for the unique home button on the left and one slice for the rest of the buttons on the right. The dimensions are 300px wide by 60px high.

We will be using the sliding doors technique for our buttons. So, there are no image flickers on the buttons. There are a lot of posts on this technique, but get started with the original article at A List Apart. And then research further on the web from there if you would like to learn more. We will be touching on this topic again in our next tutorial though.

Let’s not forget about slicing our primary navigation button divider. Below is a close up of the slice at 2px wide by 30px high. We only need one slice, but we’ll be using this image multiple times next to our buttons.

Slicing Our Content Area Columns

We are going to cut our columns into three pieces horizontal pieces. We will be coding these boxes to accommodate infinite length, irregardless of how much content we fill them with.

Next measure where your gradient becomes a solid color. Also, make sure the break of your gradient is the same for your main content area and your sidebar. I use a tool called xScope for the Mac to measure where the gradient breaks onscreen. I find this tool helps a lot for measuring colors and sizes no matter what program or browser I have open. Place a guide where the solid color begins. Slicing it this way means that you can have a gradient at the top, but it will blend into a solid color well. Consider using guides for your column cuts. As, this will give you more accurate results.

Now create your top content column slice. My top slice is 960px wide by 68px high. This slices across both our columns. You could choose to slice them separately. Its a stylistic design decision to make here. Slicing across both columns together means that we can code it so that our columns will always be the same length, irregardless of which one has more content.

Then I create a solid center piece that is 960px by 50px high. I usually stick with a length of 50px for solid repeatable areas. This may be more conservative than necessary, but I’ve had good results with this. The last slice of the two column boxes is the bottom part. It is much shorter than the top because there is no gradient to be concerned about here. The bottom is 640px wide by 15px high.

We also want to create slices of our photos. The size of the slice for the large photo on the left is 408px wide by 265px high. The size of the photo of the drummer on the right is 178px wide by 265px high.

Let’s finish the two column content area by slicing up our sexy winged chick icon, as we’ll be needing that.

The final slices of our document are for our one column content box. We will carve this up at the same dimensions as we did in our two column slices above. Start by drawing a slice from the top left 960px wide and 69px high. Then we will slice our middle part. Draw another slice 960px wide by 50px high. Our last slice will be 960px wide by 15px high to make up our one column content box bottom image. The image below shows how all our final slices look for the entire document.

Naming Our Images

I wanted to make this a separate section for the purposes of this tutorial. But you may find it a better workflow to name your images as you slice them. Also note, if you don’t name your slices you can still save them. The default names will be the document title, followed by the underscore, followed by the unique slice number, followed by the extension. It will save you time though to name all your images in Illustrator. If you name your slices in Illustrator they will be ready to use, as is, after exporting. Also, if you go back in and make edits you want the simplest process possible for saving those updates. Having the images your changing already named makes it that much quicker and easier.

I’ve found a couple of peculiarities in naming images in Illustrator when comparing it to doing the same thing in Photoshop. In Photoshop all you have to do is grab the Slice Select Tool, double click on a slice, and you’ll get a window that allows you to name the slice.

In Illustrator you select the slice with the Slice Select Tool then go to Object > Slice > Slice Options and Name the Slice in the Window. Then hit OK. I leave all the other fields blank. Ultimately we will only be exporting images and not any code. We’ll be writing the code ourselves. Below is an image of the page background image being named.

We will need to repeat this process for all the images that we are slicing. My naming strategy involves deciding what the image will be used as. Then I assign a uniform set of initial letters to images followed by the underscore followed by its unique name. So for all images that make up backgrounds I use a a format similar to the above screenshot. “bg” is the use followed by the “underscore” and its unique name of “page”. It will make up the page designs background.

Its good to bring a universal system to all approaches you do in web design. The overhead of one small project is minimal, but multiply that by all the projects you work on and you’ll find that doing things the same way on each project will save you lots of time. I’ll show a screenshot of the images after export that will give you some more ideas for naming your images.

Optimizing and Exporting Our Images

Once you have all your slices named go to File > Save for Web & Devices and you’ll get a Dialogue Window shown below. A note on Slicing: In regards to naming your slices it is possible to name your slices in this window. You can grab the Select Slice Tool and double click on sliced images and then name them. Though, unlike in Photoshop, it does not have the advantage of saving those names in the Illustrator file once you leave this dialogue window. Because of this, the technique outlined in the section above is the best one to use for naming slices in Illustrator. Hopefully, Adobe fixes this in the future, as this is a convenient window to use for naming.

Now we will choose our image settings. First grab the Select Slice Tool in the Save Dialogue Window and drag it across all the slices or hit (Command/Ctrl + A). Then choose JPEG High (which is a Quality of 60 Percent and is Optimized). For most projects I keep it simple and save all images at this setting. Though if you notice low quality output for any images at this setting then go back and bump it up. Likely we will need to do this for a few images.

For clients that have the budget and desire to have you optimize the images carefully, you can go back and tweak each image separately. Bump the quality down and test results. Continue doing this bump quality down, export, retest in browsers until you find the lowest image size that still gives quality results. Its a tedious and time consuming process that you have to account for in the budget of a web design project. It allows you to optimize web images to their fullest. This process is often used for high traffic websites to speed up the loading of the site and decrease the amount of data consumed on each page load.

Now Lets hit Save. We get another window. In this Save Optimized As Window Choose Format Images Only (as we are not exporting any code), Settings: Default Settings, and Slices: All User Slices. Then Hit Save. Using All User Slices means that it will only export the slices we created. It will not export the auto generated slices Illustrator creates that surround the User Slices if you choose this setting.

Illustrator will automatically create an Image folder in the directory you choose. See screenshot below for a list of our final exported images.

Conclusion

Some of the time saving techniques given in this tutorial will really show when your working on large projects that have multiple edits. In our next tutorial we will move on to coding this website in xhtml and cascading style sheets. Once we have that built, tested, and working then in the following tutorial we’ll bring it into Drupal and code our theme. Let me know if there are any questions so far in this series.

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