Sei sulla pagina 1di 26

Create a Killer band site in Drupal – Part 1 – Design

Create a Killer band site in Drupal – Part 1 – Design • Jeff Finley •

Jan 16, 2008

Design • Jeff Finley • Jan 16, 2008 • 119 Comments This tutorial is another special

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!

Design You can design the site however you want, but for the sake of this

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.

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

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

page composition should look like as we are getting started. Set Up Our Basic Website Layout

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.

this will need to be tested when we get to the coding stage. That’s it for

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.

have some space at the bottom to put our footer information. Adding Some Arsenal Branding for

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.

copy. Your results so far should look something like below. Now select both halves of the

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.

to a lighter brown. See screenshot below for an example. Now from the Go Media Vector

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

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.

the header a little darker. Below are our results so far. Now we are going to

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

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.

our header space to add more depth. See the results below. Next use a font of

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

on. I like that flexibility. Then give it a matching green gradient. I set the gradient at a 90 degree angle.

This combines the figures into to one live shape. It can be undone though if you need to later

one live shape. It can be undone though if you need to later Now to finish

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
Designing the Primary Navigation Area First we are going to add some texture to the

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.

is a close up of some of the texture after being applied. Below you will see

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

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.

gradient to put the highlight in the upper left hand corner. Now take these pieces and

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.

Navigation Bar design complete. Lets move on to the body. Designing Our Main Content Area and

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.

drummer photo. Its dimensions are 178px wide by 265px high. Now we are going to layout

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

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

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

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.

indicate that there is space available for additional links. Now lets draw a box that fills

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!

This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection

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!

Set Up Our Prep File In our last tutorial we created our layout as a

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

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.

close up of the divider once we get to slicing that section. Before we move on

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

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

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.

of our document down a little past the bottom of the header. Utilize the settings at

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

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.

also manipulate corners similar to any box in Illustrator. Slicing Our Primary Navigation First we slice

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

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.

be touching on this topic again in our next tutorial though. Let’s not forget about slicing

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.

be using this image multiple times next to our buttons. Slicing Our Content Area Columns We

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.

of the drummer on the right is 178px wide by 265px high. Let’s finish the two

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

up our sexy winged chick icon, as we’ll be needing that. The final slices of our

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.

shows how all our final slices look for the entire document. Naming Our Images I wanted

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.

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

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.

and decrease the amount of data consumed on each page load. Now Lets hit Save. We

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

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

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.