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 familar 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 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming in Drupal
Read Part 5 -Drupal Admin

Design

You can design the site however you want, but for the sake of this tutorial, we’re going to use Adobe Illustrator and download a few resources from the Go Media Arsenal freebie page.

Let’s get started by downloading the Go Media Vector Pack Sample and the Go Media Texture Pack Sample. We also used a couple photos from Istockphoto.com. Feel free to insert your own favorite band pics though.

Set Up Our Document

Open up a new Illustrator document at 1160px width by 950px height. For Units choose Pixels. Under the Advanced dropdown choose Color Mode: RGB, Raster Effects: Sceen (72pi), and Preview Mode: Pixel. Now lets get our workspace setup for working on the web. Turn on your grid by going to View > Show Grid or (Command/Ctrl + Quote Mark). Now set up the size of your grid. Go to Illustrator > Preferences > Guides & Grid. In the Dialogue Box set up the Gridline Every: 1px and Subdivisions: 1. This will create a 1px grid. Now go to View > Snap to Grid (Command/Ctrl + Shift + Quote Mark). This means when you draw your elements they will snap to exact pixel measurements on the grid.

Design Our Background

Now lets start creating our background. Draw a box the same size as our document 1160px width by 950px high and fill it with a dark brown gradient. Next create another box starting at the upper left hand corner of the document and make it stretch the entire width of the document 1160px and down about 110px in height. Now fill it with your choice of color. I chose a bright lime green gradient. Now create our highlight where the two documents meet. Draw two 1160px wide by 1px tall boxes. The top one make a dark brown and the bottom one make a light brown.

The image below shows what your highlight should look like at 100% magnification.

The image below shows what your overall page composition should look like as we are getting started.

Set Up Our Basic Website Layout

Draw some Vertical Guides to set up our main content area. Turn on your Rulers (Command/Ctrl + R) and pull your guides from the left. Place a Guide at 100px and a guide at 1060px. This gives us a layout space of 960px. Now draw our Header Box in between these guides with a Rounded Rectangle 960px wide and 160px high. Fill it with a dark brown gradient of your choice. Place it 40px from the top of the document. Now draw our Primary Navigation Box with the rounded rectangle tool. Fill it with the same dark brown gradient. Make it 960px wide by 30px high and about 15px below the header.

No lets drop a couple more guides in for our content area. Drop a verticle guide at 740px and another at 760px Next we’ll draw our Main Content area on the left. Draw a rounded rectangle in between the guides with a slightly lighter brown gradient. Make it 640px wide by 610px high. That leave 20px of space. Now lets create our Sidebar Content. Draw another rounded rectangle in between the right guides. Make it 300px wide by 610px high. I made this box the same gradient green as the top background of our doc.

Here is a trick for using gradients within flexible content areas. Try to figure out what the smallest possible amount of content there will be on the site for either column. Then make sure your gradient breaks to a solid color before that point. This will avoid some ugly color change when used in really small content. This is because we are going to be making flexible boxes for our content and we will cut our boxes up and put them back together. Basically we will be cutting off the tops and bottoms of our boxes and then putting them back together. The middle area will be a solid color. You can see here that I’m guessing that locating the left dark brown color in the gradient at a Location of 90% will work well when we go to code, but ultimately this will need to be tested when we get to the coding stage.

That’s it for our basic setup. You can see a shot of the results below. We have some space at the bottom to put our footer information.

Adding Some Arsenal Branding for the “GoBand” Header

From the Texture Pack Sample we’ll be starting with the file named oddshot15.jpg. Go ahead and place the photo into our doc. Now select the Header with our Direct Select Tool (V). With the Header selected place a guide in the center. Then select our photo and move it over to the right over our header. Make sure the left edge lines up with the center guide. Hold down the Shift Key and drag the size of the photo down until the right side is a little larger than the right guide. Now keep the photo selected and go to Object > Transform > Reflect. Select Axis > Vertical and hit Copy. Now line up the flipped photo copy on the left making sure the right side is on the center guide and that it matches the positioning of the right copy. Your results so far should look something like below.

Now select both halves of the photo and cut it by going to Edit > Cut or (Command/Ctrl + X). Select the Header and paste the photos in place behind the header by going to Edit > Paste in Back or (Command/Ctrl + B). Now Select the Header again and copy it Edit > Copy or (Command/Ctrl + C) as we will need this in our clipboard for just a moment. Keep the header selected, hold down the shift key and select each of the photos as well. Go to Object > Clipping Mask > Make or (Command/Ctrl + 7). We still have our Header shape in our clipboard so lets go to Edit > Paste in Front or (Command/Ctrl + F). Keep this header shape selected and in the Transparency Palette set the drop down to Multiply and change the brown at the top of the gradient to a lighter brown. See screenshot below for an example.

Now from the Go Media Vector Pack Sample open up vectorsample.eps in Illustrator. Select the right half of the wings shown in the file below.

Place it in the upper left hand corner of your Header. Flip a copy of it and place it in the upper right hand corner of the Header. With both of the wings selected grab the Eyedropper Tool (I) and take a sample from the Header shape we just manipulated. This will apply the Gradient of that shape to the wings and it will apply the Multiply as well. Now select the Header shape again. Copy and Paste In Front. Keep it selected hold down Shift and select each of the wings. Create a Clipping Mask. This will only show the portion of the wings that is within the header and hide the excess. You still have the Header shape in your clipboard so Paste in Front again just to make the header a little darker. Below are our results so far.

Now we are going to focus on the center area of the Header where we will be placing our main branding image of the GoBand. The elements below from the vectorsample.eps file and the wings we already used are all the elements we will need for this tutorial. Go ahead and paste a copy of them to the side of your working space.

Now we are going to use the Architecture above to add more interest to the center area of the header. I placed one large copy in the center and two smaller copies on each side and gave them a solid dark brown color. The large copy escapes a little from our header space to add more depth. See the results below.

Next use a font of your choice and create the band name GoBand. I used TImes New Roman Bold. I set the font at 38px. Next create our center angle by placing the wings behind the right most Sexy figure (Copy and Paste a Copy outside the work space for later). Do the same thing for the other Sexy figure (though we don’t need a copy of this one). Make the second sexy figure small and flip it placing it evenly above the text. Work with it until you get something similar to the image below. Then select all the Sexy Figures, Text, and Wings then in the Pathfinder Palette click Add to Shape Area, see image below.. This combines the figures into to one live shape. It can be undone though if you need to later on. I like that flexibility. Then give it a matching green gradient. I set the gradient at a 90 degree angle.

Now to finish off our header add some texture. Grab a copy of the Destroy grunge texture and color it the same brown as the Architecture we used earlier. I rotated, changed the size, moved around multiple copies, and even lowered the transparency of some of the Destroy textures until I got a look that felt right. You should go through a similar process. Just manipulate multiple copies of the Destroy grunge texture until it has a worn look your happy with. See our headers final results below. There is a wide shot of the whole header and and a to scale shot of the center. Of course your results may differ some based on your experimentations.

Designing the Primary Navigation Area

First we are going to add some texture to the Primary Navigation Bar background. Grab the Destroy texture and manipulate the height so it is about 28px high. I left the color black, but gave it a transparency of 60 percent. Then make multiple copies of it and place it across the navigation bar. Below is a close up of some of the texture after being applied.

Below you will see the pieces that need to be created next. This is zoomed in almost 400 percent. First is our home button, which I’ll show you how to make quickly in just a moment. The bars in the middle are actually 1px wide each. This is how you achieve the effect of a highlight and a shadow between each button. There is first a 1px wide gradient with a light gray at the bottom. This gives us our hightlight. the next 1px wide bar is our dark brown shadow. The rest of the button backgrounds are a simple box with a dark brown to a light brown gradient.

Take a copy of the Primary Navigation Background and drag it off to the side of your working document. To make the Active Background for the Home button I used the Knife Tool, pictured below in the floating tools palette. Its an underused tool. Probably because its finicky. It might take a couple passes to get a straight line. Unfortunately, holding down the shift button doesn’t keep it in a straight line. You have to make sure the you have the object your about to cut selected for it to work. When you have the Knife Tool selected you can hold down (Command/Ctrl) to get the Active Select Tool. After cutting out your Active Home Button give it a bright green to dark brown gradient. I used a -60 angle on the gradient to put the highlight in the upper left hand corner.

Now take these pieces and assemble them to match the image below. When inserting the text I used a slightly brighter green for the active button. I also copied the entire Primary Navigation Bar background and pasted it in front. Gave it a fill of none and a 1px wide black stroke. Now we have our Primary Navigation Bar design complete. Lets move on to the body.

Designing Our Main Content Area and Sidebar

We’ll start by placing some guides. In our Main Content area and in our Sidebar Content area we will have 20px of padding. So place verticle guides at 120px mark, 720px mark, 780px mark, and 1040px mark. Now we are going to place our main photos. We used these photos ( http://www.istockphoto.com/file_closeup.php?id=3895327 and http://www.istockphoto.com/file_closeup.php?id=788034 ) from istockphoto.com, but feel free to use any band photos you like.

Draw a Rectangle 408px wide by 265px high. Line it up to our 120px mark guide and give a bit of room for a header above it. Copy it into the clip board. Then use the rectangle as a Clipping Mask for your photo. Then paste the rectangle in front of the image and give it a fill of none and a stroke of 1px with a bright green border. As seen in the image below Align Stroke to Inside. Now repeat this process for your smaller drummer photo. Its dimensions are 178px wide by 265px high.

Now we are going to layout the text. I used a significant amount of Lorem Ipsum. The site http://www.lipsum.com is the one I use to get the dummy text from. For the body text use a Sans-Serif Font and for the Headings use a Serif Font. I also added a 600px wide horizontal line below the photos.

Now we are going to focus on the sidebar. This will be real quick because its mostly text and some horizontal lines. The only other element is to scale down a copy of the main image of the logo until it is about 12px wide. We are going to use this for our list bullets in the sidebar. Turn it dark brown. Use a Serif Font for the Headings and a San-Serif Font for the body and the lists.

Those Last Few Details and Then the Files Out The Door to the Client

We are going to add some details to give the file just a little more authenticity. Lets add our copyright to the footer. To insert the copyright symbol you use the Glyphs palette. Go to Type > Glphs. Make sure you place your cursor where you want the copyright symbol to go. Once you’ve found the copyright symbol in the Glyphs Palette double click it and it will place it in your footer.

All web designers build up a collection of widgets and icons they use in their design work. Feel free to use your own search icon and stylize your text input box. We’re adding these elements above the header. We also want to indicate that there is space available for additional links.

Now lets draw a box that fills our entire document workspace of 1160px wide by 950px high. Now with that box selected go to Object > Crop Area > Make. Let’s get that file off to the customer for approval now. Go to File > Save For Web & Devices. On the right choose JPEG with a setting of Very HIgh, which gives us a conservative 80 percent quality and hit Save. Now Send the file via email to your client. View the final results below. In the next tutorial we will review slicing this design to get it ready for coding.

Which will be the next tutorial!

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