Design insights & tutorials.

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

Turquoise Flag-Tip

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

22

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.

strip

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

image

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.

2

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.

3

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.

4

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.

5

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.

6

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.

7

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.

8

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.

9

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.

10

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.

11

12

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.

13

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.

14

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.

15

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.

16

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.

17

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.

18

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.

19

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.

20

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.

21

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!

22

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

About the Author, Jeff Finley

I'm a partner at Go Media, a Cleveland web design and development firm. We also specialize in print design and branding. I started Weapons of Mass Creation Fest and wrote the book Thread's Not Dead, teaching artists and designers how to start a clothing company. In my spare time, I write songs and play drums in Campfire Conspiracy. I'm a happy husband and an aspiring b-boy and lucid dreamer.
Discover More by Jeff Finley

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site with Drupal - Introduction

  • http://www.progresstd.com Andrew Fleming

    This is going to be a killer tut! Thanks :-) I have no good tips or anything, as I’m still in the process of learning, but I am certainly looking forward to the slicing/coding for Drupal part!

  • http://www.progresstd.com Andrew Fleming

    This is going to be a killer tut! Thanks :-) I have no good tips or anything, as I’m still in the process of learning, but I am certainly looking forward to the slicing/coding for Drupal part!

  • CArlos

    So well designed and yet so simple. I just need to sit down, and mix up a few pictures. i am looking forward to the Drupal part of this. I design web sites but have NO clue on the open source part of it. Is it going to be generally easy to get the hang of if you already know CSS/XHTML and some HTML. I don’t know PHP or any backend stuff. My mind doesn’t work in that way but I am willing to learn. Hoping this might help.

  • CArlos

    So well designed and yet so simple. I just need to sit down, and mix up a few pictures. i am looking forward to the Drupal part of this. I design web sites but have NO clue on the open source part of it. Is it going to be generally easy to get the hang of if you already know CSS/XHTML and some HTML. I don’t know PHP or any backend stuff. My mind doesn’t work in that way but I am willing to learn. Hoping this might help.

  • Majic Concepts

    This series looks very promising. I do web development as well, and have been a strong supporter of the Joomla CMS. I’ve only recently begun hearing about Drupal, and know that there are pros and cons to both CMS’s. It’ll be interesting to see how the transition from design to code goes as this is one of the design aspects of using Joomla that I have never really enjoyed, particularly because Joomla has yet to become fully standards-compliant whereas I hear Drupal is.

  • Majic Concepts

    This series looks very promising. I do web development as well, and have been a strong supporter of the Joomla CMS. I’ve only recently begun hearing about Drupal, and know that there are pros and cons to both CMS’s. It’ll be interesting to see how the transition from design to code goes as this is one of the design aspects of using Joomla that I have never really enjoyed, particularly because Joomla has yet to become fully standards-compliant whereas I hear Drupal is.

  • Liz

    Looks really promising indeed… I will have to get drupal though, and somehow I can’t seem to download it, only a zip file with no installation stuff.
    Anyway, thanks for putting up this tutorial, it’s helpfull for me and tons of people probably.

  • Liz

    Looks really promising indeed… I will have to get drupal though, and somehow I can’t seem to download it, only a zip file with no installation stuff.
    Anyway, thanks for putting up this tutorial, it’s helpfull for me and tons of people probably.

  • http://www.avangelistdesign.com Avangelist

    hmmm. slow burner to start but fair play.

    I will be doing this in photoshop, bar the “smooth edges” on rounded boxes and shapes, that whole process in illustrator seems far too time consuming to me. But then again maybe it is being out of my comfort zone that makes me say that.

    Question:
    When you are doing your site proofs do you always do how just one screen will look? Or do you come up with several renditions with different types of content?

  • http://www.avangelistdesign.com Avangelist

    hmmm. slow burner to start but fair play.

    I will be doing this in photoshop, bar the “smooth edges” on rounded boxes and shapes, that whole process in illustrator seems far too time consuming to me. But then again maybe it is being out of my comfort zone that makes me say that.

    Question:
    When you are doing your site proofs do you always do how just one screen will look? Or do you come up with several renditions with different types of content?

  • http://www.giackop.com giackop

    very good.. but i’m looking forward for the other parts!! keep it coming!!

  • http://www.giackop.com giackop

    very good.. but i’m looking forward for the other parts!! keep it coming!!

  • MattLikeALion

    I have always done layout in InDesign and then completely recreated every element in Photoshop. I really like the ease of doing vector and pixel-specific work in Illistrator – for some reason I had never thought of going that route.

    @Avangelist – I think Jeff and the boys are going to be pretty big Illistrator proponents for a lot of types of jobs. I think using it instead of PS gives you easier control of gradients and much quicker to revise.

    I would suggest you try to give it a real shot and see if it improves your workflow. It’s sometimes hard not to shy away from what we are least comfortable with, but that’s how people get stuck not using the proper tools or growing their skillset/understanding.

  • MattLikeALion

    I have always done layout in InDesign and then completely recreated every element in Photoshop. I really like the ease of doing vector and pixel-specific work in Illistrator – for some reason I had never thought of going that route.

    @Avangelist – I think Jeff and the boys are going to be pretty big Illistrator proponents for a lot of types of jobs. I think using it instead of PS gives you easier control of gradients and much quicker to revise.

    I would suggest you try to give it a real shot and see if it improves your workflow. It’s sometimes hard not to shy away from what we are least comfortable with, but that’s how people get stuck not using the proper tools or growing their skillset/understanding.

  • Pingback: Weekly Design Source - January 17th 2008 | Firewalker

  • MattLikeALion

    @liz – the zip file contains .txt files with installation instructions. Basically you have to build a mysql database on your server, then upload the mydrupal-x.x folder to your site root folder. Then, in a browser go to http://www.mysite.com/mydrupal-x.x/install.php

    You don’t install components on your computer – it’s all web-based. That part was confusing to me when I was first reading through everything.

  • MattLikeALion

    @liz – the zip file contains .txt files with installation instructions. Basically you have to build a mysql database on your server, then upload the mydrupal-x.x folder to your site root folder. Then, in a browser go to http://www.mysite.com/mydrupal-x.x/install.php

    You don’t install components on your computer – it’s all web-based. That part was confusing to me when I was first reading through everything.

  • Firewalker

    I found this tutorial as the best!

    I just featured this tutorial as my weekly favorite. I hope you don’t mind letting me review your tutorials.

    Best regards,
    Firewalker

    This is the link (I lose the ‘t’ in ‘http’ so that it won’t link back to my site):
    htp://firewalker.kamusilmiah.com/weekly-design-source-january-17th-2008/

  • Carlos

    I don’t own a server. I go through another company to host my sites. Is it possible to install Drupal onto their servers or is it one of those things where they have to set it up. If that is the case anyone know where to pick up a good but decently priced server?

  • Carlos

    I don’t own a server. I go through another company to host my sites. Is it possible to install Drupal onto their servers or is it one of those things where they have to set it up. If that is the case anyone know where to pick up a good but decently priced server?

  • MattLikeALion

    @ Carlos

    You can put it on hosted servers. Media Temple has easy set-up of Drupal, but they are probably over-kill for a lot of uses. GoDaddy also advertises WordPress and Drupal support. For many hosting plans you should be able to set up a mysql database into which Drupal will install itself.

    I currently am hosted with 1and1, and they have better flexibility in their packages/more bang for the buck. However, I haven’t been able to set-up Drupal correctly on my hosted server and they have less than desirable tech-support.

    Buying a dedicated server would probably be sxpensive and not warranted.

  • MattLikeALion

    @ Carlos

    You can put it on hosted servers. Media Temple has easy set-up of Drupal, but they are probably over-kill for a lot of uses. GoDaddy also advertises WordPress and Drupal support. For many hosting plans you should be able to set up a mysql database into which Drupal will install itself.

    I currently am hosted with 1and1, and they have better flexibility in their packages/more bang for the buck. However, I haven’t been able to set-up Drupal correctly on my hosted server and they have less than desirable tech-support.

    Buying a dedicated server would probably be sxpensive and not warranted.

  • MattLikeALion

    Can anyone offer advice for turning off registered_globals on a 1and1 shared hosting plan? I’ve tried to figure out how to do php.ini files but Drupal kept giving me the ‘Incompatible Environment’ error.

  • MattLikeALion

    Can anyone offer advice for turning off registered_globals on a 1and1 shared hosting plan? I’ve tried to figure out how to do php.ini files but Drupal kept giving me the ‘Incompatible Environment’ error.

  • Carlos

    I have no backend experience to set up MySQL or anything like that. I am just hoping if I do set this thing up on a hosted server the company will have enough sense and patience to walk me through this stuff. Most of my experience is front end stuff. I know that if I learned the programming part I would be fine but so far I have not had the opportunity to learn or time to comprehend the backend stuff.

  • Carlos

    I have no backend experience to set up MySQL or anything like that. I am just hoping if I do set this thing up on a hosted server the company will have enough sense and patience to walk me through this stuff. Most of my experience is front end stuff. I know that if I learned the programming part I would be fine but so far I have not had the opportunity to learn or time to comprehend the backend stuff.

  • http://www.progresstd.com Andrew Fleming

    Normally, if you have a hosted server, you can easily set it up. I’ve set up Joomla on mine at IXWebhosting, and it was pretty easy, even with my extremely limited knowledge of the subject. With mine at least, it has a MySQL interface, and there was a page within that to where you can paste in some code, hit Run or whatnot, and it will run the code you put in there (which I got from a file within the Joomla install that sets up all of the tables required for the Joomla system to work). So if you followed the instructions with the Drupal install, and find where you can run some mySql code with your server, you shouldn’t have too terribly much trouble.

  • http://www.progresstd.com Andrew Fleming

    Normally, if you have a hosted server, you can easily set it up. I’ve set up Joomla on mine at IXWebhosting, and it was pretty easy, even with my extremely limited knowledge of the subject. With mine at least, it has a MySQL interface, and there was a page within that to where you can paste in some code, hit Run or whatnot, and it will run the code you put in there (which I got from a file within the Joomla install that sets up all of the tables required for the Joomla system to work). So if you followed the instructions with the Drupal install, and find where you can run some mySql code with your server, you shouldn’t have too terribly much trouble.

  • Carlos

    Thanks I will try it out. May be a bit before I can get a chance to install Drupal but I am definitely looking forward to the rest of these tutorials. As long as I can expand my knowledge base the happier I, my clients, and employer(s) can be. Mainly my own knowledge would be great. I have been looking for a tutorial like this that walks you through all the steps of designing through programming. Not many people are willing to do that for free or the sake of educating others. Especially with these tutorials online that make you pay hundreds of dollars to learn tips and tricks for the programs you already know.
    Anyways thanks for the advice and help. I truely appreciate it. Look forward to more.

  • Carlos

    Thanks I will try it out. May be a bit before I can get a chance to install Drupal but I am definitely looking forward to the rest of these tutorials. As long as I can expand my knowledge base the happier I, my clients, and employer(s) can be. Mainly my own knowledge would be great. I have been looking for a tutorial like this that walks you through all the steps of designing through programming. Not many people are willing to do that for free or the sake of educating others. Especially with these tutorials online that make you pay hundreds of dollars to learn tips and tricks for the programs you already know.
    Anyways thanks for the advice and help. I truely appreciate it. Look forward to more.

  • Psychoarts

    I was able to get Drupal up and running on a 1and1 server no problem. I had to go in and edit the HTTacess file after the install that was it. I’ll check what version of Drupal I installed and what hosting package I have when I get home from work.

    This is a great tut and the entire GoMedia site is amazing. My design skills have jumped a few notches thanks to you guys

    Laters
    Greg aka Psychoarts

  • MattLikeALion

    Greg,

    I’d appreciate if you could tell me the particulars of your setup. You could email me at matt at inlikealion dot com, or post back here for the benefit of others. But if you didn’t mind writing me with your email info, I would like to ask you q’s if i get stuck somewhere without clogging up the zine’s message board.

  • MattLikeALion

    Greg,

    I’d appreciate if you could tell me the particulars of your setup. You could email me at matt at inlikealion dot com, or post back here for the benefit of others. But if you didn’t mind writing me with your email info, I would like to ask you q’s if i get stuck somewhere without clogging up the zine’s message board.

  • Firewalker

    I found this tutorial as the best!

    I just featured this tutorial as my weekly favorite. I hope you don’t mind letting me review your tutorials.

    Best regards,
    Firewalker

    This is the link (I lose the ‘t’ in ‘http’ so that it won’t link back to my site):
    htp://firewalker.kamusilmiah.com/weekly-design-source-january-17th-2008/

  • Pingback: links for 2008-01-17 | Brewed Fresh Daily

  • http://benleivian.com Ben Leivian

    Great article! I really liked the illustrator approach. It never occurred to me to set up the grid in 1px increments & using the pixel preview.

  • http://www.flickr.com/photos/bleivian Ben Leivian

    Great article! I really liked the illustrator approach. It never occurred to me to set up the grid in 1px increments & using the pixel preview.

  • Psychoarts

    I was able to get Drupal up and running on a 1and1 server no problem. I had to go in and edit the HTTacess file after the install that was it. I’ll check what version of Drupal I installed and what hosting package I have when I get home from work.

    This is a great tut and the entire GoMedia site is amazing. My design skills have jumped a few notches thanks to you guys

    Laters
    Greg aka Psychoarts

  • MattLikeALion

    Just an update – Greg sent me some info that helped me out, and I now have Drupal 5.6 installed on my server. Thanks Greg!!!

    I’m just itching to get the next installment.

  • MattLikeALion

    Just an update – Greg sent me some info that helped me out, and I now have Drupal 5.6 installed on my server. Thanks Greg!!!

    I’m just itching to get the next installment.

  • CArlos

    I know this may be the wrong place to ask this or not. But does anyone know how to put another company’s e-commerce system into your site. I already got the go ahead but I need to know how to implement this stuff. Lets say I want to sell a companies products. Full line of stuff. I want to use their sort and search system and shopping cart. How do I put their sort and search screens into my site and wrap my site around that system. Please feel free to hit me back at carlos dot mosqueda at hotmail dot com.

    Thanks any help would be appreciated

  • CArlos

    I know this may be the wrong place to ask this or not. But does anyone know how to put another company’s e-commerce system into your site. I already got the go ahead but I need to know how to implement this stuff. Lets say I want to sell a companies products. Full line of stuff. I want to use their sort and search system and shopping cart. How do I put their sort and search screens into my site and wrap my site around that system. Please feel free to hit me back at carlos dot mosqueda at hotmail dot com.

    Thanks any help would be appreciated

  • http://aiburn.com Sean Hodge

    Hey All,

    I went on Vacation with my family last week. Aruba is beautiful. I’m back now though. So, I have some comments to catch up on. I’ll answer any questions that have come up last week. And thanks for all the support and excitement.

    @CArlos,
    I don’t know php either. I can recognize it because it resides in question marks. I studied it for a couple weeks so I guess I can write a simple if statement. But any complicated code would confuse me as well. What we’ll be doing in this tutorial is using existing code. So, you’ll get by fine with html/css. I’m a standards based designer as well. I’m not a programmer. So, if I can do this so can you. Sounds like we have a similar background.

    @Majic Concepts
    I used Joomla for a couple months. I jumped over to Drupal because of its standards compliant support. I found that Joomla had some table based structure in its core and many modules I used had lots of table based code and inline styles. After switching to Drupal I also found that the system Drupal has in place for modules is great. Drupal modules are built around functionality and not specifically its end result. What that means is you can hook them together to get some really amazing results.

    @Liz
    Try this video tutorial for installing Drupal http://www.lullabot.com/videocast/installing_drupal_5

    That’s the video tutorial I used to get up and running with Drupal when I got started a little over a year ago.

    @Avangelist
    Using Illustrator is actually uncommon in web design. I am personally quicker in Illustrator so I like using it. I also think there are not enough tutorials out there showing how you would use it for web design. I certainly recognize that Photoshop is the defacto program for web design and you can certainly use that and still follow along with this tutorial series.

    In regards to presenting mockups to clients my strategy always revolves around the client’s budget. I’ve been contracted to present multiple unique solutions for the homepage alone. I’ve also been contracted to create multiple pages in addition once a solution was chosen. And for clients on a budget I’ve created one homepage design and that’s it.

    Often I create a homepage design and an interior page design for an agency I do work for regularly. That way the homepage stands out as a little different for their clients, but its still a budget conscious project. The projects I work on rarely start with wireframes. Though they are a great tool and I have used them for larger clients. For the purposes of this tutorial I kept things simple with one page design.

    Good question.

    @MattLikeALion
    You made some good points about using Vector. I like the flexibility, ease of revision, and gradient control as well. I think Fireworks is also a good web design tool that I use a lot as well. I’m actually a little quicker in Fireworks than illustrator. Though I find Illustrator superior with designing elements with the pen tool.

    I also want to mention that for clients that need a .psd file as a deliverable at the end of the design phase. Its easy export an Illustrator document as a .psd file. As long as you didn’t use any live effects like drop shadows it will keep the file layered.

    @Firewalker
    That’s great that you mentioned the tutorial on your blog. Thanks.

    @Carlos
    I use bluehost, which is shared hosting. I’m running Drupal 5. Drupal 6 will require php 5. So, it would be a good idea to get with a host that is running php 5 if you think you might stick with Drupal long term. Try the video tutorials over at Lullabot to get rolling though. There are a few important steps to follow. If your host gives you access via ftp and phpMyAdmin for the database setup then you should be good to go. Check out this tutorial: http://www.lullabot.com/videocast/installing_drupal_5

    @MattLikeALion
    I would stay away from auto installers. Its more secure to learn how to manually install Drupal. Also, each version of Drupal that comes out the install process continues to get easier. Check out the video above though and let me know if it works out for you.

    @Andrew Fleming
    Good tips. I found installing Joomla and Drupal to be the same kind of process. The video above is great though because it walks you through each step of the install.

    @Psychoarts
    That’s great you got it running.

    @Ben Leivian
    Thanks. I had been using Fireworks a lot and one day I started thinking about how I could emulate that kind of setup in Illustrator. That’s how I came up with the idea. Turning Snap to Grid on can help as well.

    @MattLikeALion
    That’s great that you got it up and running.

    @CArlos
    I did this once with a custom php system and Zen Cart. I emulated the design of the site in Zen Cart. I added a button for Shopping to the main navigation. This made it seamless for the user of the site. They couldn’t tell which system they were in. It all looked the same.

    The downside of this approach was that you don’t have access to the persistent shopping cart on every page. You also don’t have the products on the front page. Lots of sites use this kind of approach though. They might do the same thing when adding a forum for example.

    Ideally using the same system for everything would be great. But practically the cost and time can outweigh redoing it in one system. That’s why the method above is used. Its a quick fix.

  • http://aiburn.com Sean Hodge

    Hey All,

    I went on Vacation with my family last week. Aruba is beautiful. I’m back now though. So, I have some comments to catch up on. I’ll answer any questions that have come up last week. And thanks for all the support and excitement.

    @CArlos,
    I don’t know php either. I can recognize it because it resides in question marks. I studied it for a couple weeks so I guess I can write a simple if statement. But any complicated code would confuse me as well. What we’ll be doing in this tutorial is using existing code. So, you’ll get by fine with html/css. I’m a standards based designer as well. I’m not a programmer. So, if I can do this so can you. Sounds like we have a similar background.

    @Majic Concepts
    I used Joomla for a couple months. I jumped over to Drupal because of its standards compliant support. I found that Joomla had some table based structure in its core and many modules I used had lots of table based code and inline styles. After switching to Drupal I also found that the system Drupal has in place for modules is great. Drupal modules are built around functionality and not specifically its end result. What that means is you can hook them together to get some really amazing results.

    @Liz
    Try this video tutorial for installing Drupal http://www.lullabot.com/videocast/installing_drupal_5

    That’s the video tutorial I used to get up and running with Drupal when I got started a little over a year ago.

    @Avangelist
    Using Illustrator is actually uncommon in web design. I am personally quicker in Illustrator so I like using it. I also think there are not enough tutorials out there showing how you would use it for web design. I certainly recognize that Photoshop is the defacto program for web design and you can certainly use that and still follow along with this tutorial series.

    In regards to presenting mockups to clients my strategy always revolves around the client’s budget. I’ve been contracted to present multiple unique solutions for the homepage alone. I’ve also been contracted to create multiple pages in addition once a solution was chosen. And for clients on a budget I’ve created one homepage design and that’s it.

    Often I create a homepage design and an interior page design for an agency I do work for regularly. That way the homepage stands out as a little different for their clients, but its still a budget conscious project. The projects I work on rarely start with wireframes. Though they are a great tool and I have used them for larger clients. For the purposes of this tutorial I kept things simple with one page design.

    Good question.

    @MattLikeALion
    You made some good points about using Vector. I like the flexibility, ease of revision, and gradient control as well. I think Fireworks is also a good web design tool that I use a lot as well. I’m actually a little quicker in Fireworks than illustrator. Though I find Illustrator superior with designing elements with the pen tool.

    I also want to mention that for clients that need a .psd file as a deliverable at the end of the design phase. Its easy export an Illustrator document as a .psd file. As long as you didn’t use any live effects like drop shadows it will keep the file layered.

    @Firewalker
    That’s great that you mentioned the tutorial on your blog. Thanks.

    @Carlos
    I use bluehost, which is shared hosting. I’m running Drupal 5. Drupal 6 will require php 5. So, it would be a good idea to get with a host that is running php 5 if you think you might stick with Drupal long term. Try the video tutorials over at Lullabot to get rolling though. There are a few important steps to follow. If your host gives you access via ftp and phpMyAdmin for the database setup then you should be good to go. Check out this tutorial: http://www.lullabot.com/videocast/installing_drupal_5

    @MattLikeALion
    I would stay away from auto installers. Its more secure to learn how to manually install Drupal. Also, each version of Drupal that comes out the install process continues to get easier. Check out the video above though and let me know if it works out for you.

    @Andrew Fleming
    Good tips. I found installing Joomla and Drupal to be the same kind of process. The video above is great though because it walks you through each step of the install.

    @Psychoarts
    That’s great you got it running.

    @Ben Leivian
    Thanks. I had been using Fireworks a lot and one day I started thinking about how I could emulate that kind of setup in Illustrator. That’s how I came up with the idea. Turning Snap to Grid on can help as well.

    @MattLikeALion
    That’s great that you got it up and running.

    @CArlos
    I did this once with a custom php system and Zen Cart. I emulated the design of the site in Zen Cart. I added a button for Shopping to the main navigation. This made it seamless for the user of the site. They couldn’t tell which system they were in. It all looked the same.

    The downside of this approach was that you don’t have access to the persistent shopping cart on every page. You also don’t have the products on the front page. Lots of sites use this kind of approach though. They might do the same thing when adding a forum for example.

    Ideally using the same system for everything would be great. But practically the cost and time can outweigh redoing it in one system. That’s why the method above is used. Its a quick fix.

  • MattLikeALion

    Welcome back Sean! We’re all anxious to learn some more.

  • MattLikeALion

    Welcome back Sean! We’re all anxious to learn some more.

  • dok

    Shhhhhhh been doing this for months.

  • dok

    Shhhhhhh been doing this for months.

  • MattLikeALion

    Sean, whenever I do command-7 with my wings and heading bar selected, (after having applied the multiply/gradient to the wings via eyedropper, and paste a copy of header in front) I lose the wings and gradient. All I’m left with is rectangle with the two texture fills inside.

    Any idea why this is?

  • MattLikeALion

    Sean, whenever I do command-7 with my wings and heading bar selected, (after having applied the multiply/gradient to the wings via eyedropper, and paste a copy of header in front) I lose the wings and gradient. All I’m left with is rectangle with the two texture fills inside.

    Any idea why this is?

  • Pingback: Skylog » Blog Archive » links for 2008-01-27

  • http://twisted-barfly.co.uk Carly

    I love this design!

    I would never of thought of using the girls and wings before, but they’re going to be perfect for my current project.

    Thanks!

  • http://twisted-barfly.co.uk Carly

    I love this design!

    I would never of thought of using the girls and wings before, but they’re going to be perfect for my current project.

    Thanks!

  • http://aiburn.com Sean Hodge

    @MattLikeALion,

    See if your Rounded Rectangle is on top of your other objects. The top most layer will make the clipping mask.

    If you have the rounded rectangle on top and your wings selected It should clip the wings. Also, make sure your the box you use to do the clipping is a copy because the gradient will no longer show up. An object used for clipping won’t show any of its colors.

    Let me know if any other questions come up. The next tut will be out shortly. Thanks.

  • http://aiburn.com Sean Hodge

    Here is a link to another Drupal multi-site setup for another big Record Company. Looks cool http://warnerbrosrecords.com

  • http://aiburn.com Sean Hodge

    @MattLikeALion,

    See if your Rounded Rectangle is on top of your other objects. The top most layer will make the clipping mask.

    If you have the rounded rectangle on top and your wings selected It should clip the wings. Also, make sure your the box you use to do the clipping is a copy because the gradient will no longer show up. An object used for clipping won’t show any of its colors.

    Let me know if any other questions come up. The next tut will be out shortly. Thanks.

  • http://aiburn.com Sean Hodge

    Here is a link to another Drupal multi-site setup for another big Record Company. Looks cool http://warnerbrosrecords.com

  • Tim

    When comes part 2?

  • Tim

    When comes part 2?

  • moeed

    why do this in illustrator? you can do this in photoshop with half the effort and time u spent using illustrator. you’re designing for the the web, not print.

  • moeed

    why do this in illustrator? you can do this in photoshop with half the effort and time u spent using illustrator. you’re designing for the the web, not print.

  • Brandon

    When is the next one coming out. I’ve been waiting for 2 weeks.

  • Brandon

    When is the next one coming out. I’ve been waiting for 2 weeks.

  • MattLikeALion

    Sean,

    I keep checking back – literally >5 times a day for updates. You’ve got several of us on the edge of our seats waiting for the good stuff.

    @moeed – the pros and cons have already been mentioned, see above. Ultimately it’s a matter of preference, but Sean was pointing out AI as an option which people might not normally think of,with certain pros sometimes overlooked.

  • MattLikeALion

    Sean,

    I keep checking back – literally >5 times a day for updates. You’ve got several of us on the edge of our seats waiting for the good stuff.

    @moeed – the pros and cons have already been mentioned, see above. Ultimately it’s a matter of preference, but Sean was pointing out AI as an option which people might not normally think of,with certain pros sometimes overlooked.

  • http://www.avangelistdesign.com The Avangelist

    Where’s part two eh? don’t tell me it has been aborted already?

  • http://www.avangelistdesign.com The Avangelist

    Where’s part two eh? don’t tell me it has been aborted already?

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 2 - Slicing in Illustrator

  • http://aiburn.com Sean Hodge

    Hey guys Part Two is up. Its great to see your eagerness and thanks for your patience.

  • http://aiburn.com Sean Hodge

    Hey guys Part Two is up. Its great to see your eagerness and thanks for your patience.

  • http://www.facjata.nazwa.pl Katalog Stron

    Thanks for great tutorial. I’m looking forward for second part bocouse I’m more interested in slicing and coding. Regards.

  • http://www.facjata.nazwa.pl Katalog Stron

    Thanks for great tutorial. I’m looking forward for second part bocouse I’m more interested in slicing and coding. Regards.

  • http://www.tutorial-effect.net Photoshop tutorials

    This is an awesome tutorial, I’ll definitely have a go with this one later this evening. Thanks!

  • http://www.tutorial-effect.net Photoshop tutorials

    This is an awesome tutorial, I’ll definitely have a go with this one later this evening. Thanks!

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 3 - XHTML

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 4 - Theming Drupal

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 6 - Additional Functionality and Resources

  • Billy

    Okay so I’m on the part where you insert the wings..and when you make a clipping mask to blend them in and take away the excess area..The wings go away all together not just the excess. Don’t know what to do.

  • Billy

    Okay so I’m on the part where you insert the wings..and when you make a clipping mask to blend them in and take away the excess area..The wings go away all together not just the excess. Don’t know what to do.

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 5 - Drupal Admin

  • Alejandro Garcia

    I’m in the same Billy’s problem when you insert the wings..and when you make a clipping mask to blend them in and take away the excess area.. The wings go away all together not just the excess. Don’t know what to do.

    Help me please!!

  • Alejandro Garcia

    I’m in the same Billy’s problem when you insert the wings..and when you make a clipping mask to blend them in and take away the excess area.. The wings go away all together not just the excess. Don’t know what to do.

    Help me please!!

  • Pingback: Graphic Design Blog » Web Design Mock Ups in Illustrator

  • http://SpyderDesignz.com Justin

    Im confused on this part—-
    First we are going to add some texture to the Primary Navigation Bar background. Grab the Destroy texture,

    Where’s the Destroy texture as it isnt in the free texture pack? It also not explain how your adding the texture to the shape.

    Any help would be greatly appreciated.

  • http://SpyderDesignz.com Justin

    Im confused on this part—-
    First we are going to add some texture to the Primary Navigation Bar background. Grab the Destroy texture,

    Where’s the Destroy texture as it isnt in the free texture pack? It also not explain how your adding the texture to the shape.

    Any help would be greatly appreciated.

  • Jake

    Where can I get the PSD file or the slices for this tutorial. I want to skip this part and jump to the second part.

    Thanks in advanced.

  • Jake

    Where can I get the PSD file or the slices for this tutorial. I want to skip this part and jump to the second part.

    Thanks in advanced.

  • professional logo design

    This does look like it would make for one great rocker website and I think this is a very good idea. I have been using more and more drupal CMS on my websites but I usually like to use the CMS Wordpress as this is the CMS that I have first started with. Besides HTML.

  • professional logo design

    This does look like it would make for one great rocker website and I think this is a very good idea. I have been using more and more drupal CMS on my websites but I usually like to use the CMS Wordpress as this is the CMS that I have first started with. Besides HTML.

  • http://chichere.com ChicHERE

    A great tutorial, tx!

  • http://chichere.com ChicHERE

    A great tutorial, tx!

  • http://www.prefabsite.net/ Shawn O’Cork

    Great walk through. I’ve been using Pre-Fab Site (http://www.prefabsite.net/) to get a start on my Drupal sites (I have several of them now). I’ve been using it to build the basic version of Drupal– all configured and good to go, then, modify the theme and info from there.

    - Shawn

  • http://www.prefabsite.net/ Shawn O’Cork

    Great walk through. I’ve been using Pre-Fab Site (http://www.prefabsite.net/) to get a start on my Drupal sites (I have several of them now). I’ve been using it to build the basic version of Drupal– all configured and good to go, then, modify the theme and info from there.

    - Shawn

  • Pingback: Create a Killer band site in Drupal - Part 1 - Design | Geek Central

  • http://www.davidpcrawford.com David P Crawford

    Why don’t you guys just use fireworks? Why would you use a print design app for web design?

  • http://www.davidpcrawford.com David P Crawford

    Why don’t you guys just use fireworks? Why would you use a print design app for web design?

  • http://www.prototypeonline.com Vince

    To everyone that’s having trouble with the header/wings clipping mask making teh wings go away… check your layers to make sure you have the copy of the header above the wings (at the top of all layers) and that you have that layer plus the two wings selected… then right click and Make Clipping Mask and it works :) Seems to be a prob with the layers whereas the copy of the header ends up beneath the wings or something.

    Cheers!

  • http://www.prototypeonline.com Vince

    To everyone that’s having trouble with the header/wings clipping mask making teh wings go away… check your layers to make sure you have the copy of the header above the wings (at the top of all layers) and that you have that layer plus the two wings selected… then right click and Make Clipping Mask and it works :) Seems to be a prob with the layers whereas the copy of the header ends up beneath the wings or something.

    Cheers!

  • http://www.crearedesign.co.uk Michael Thomas

    I use photoshop for all my web designs. I have seen a few sites recently that are designed in illustrator and they look fantastic, is it the whole PC Apple Mac argument? I suppose it depends on if you are doing a site with a lot of photographs or nice illustrator vectors. I read this to learn about Drupal as I personally have not used any CMS systems at the moment and want to find an easy one to use, so I am now on to read the other pages to this blog. Does anybody know if this is better than wordpress? Let me know! Mike.

  • http://www.crearedesign.co.uk Michael Thomas

    I use photoshop for all my web designs. I have seen a few sites recently that are designed in illustrator and they look fantastic, is it the whole PC Apple Mac argument? I suppose it depends on if you are doing a site with a lot of photographs or nice illustrator vectors. I read this to learn about Drupal as I personally have not used any CMS systems at the moment and want to find an easy one to use, so I am now on to read the other pages to this blog. Does anybody know if this is better than wordpress? Let me know! Mike.

  • http://www.online-pharmacy-adviser.com/5htp-hydroxytryptophan.html 5-HTP

    Very interesting article. It is interesting to me, and what will be somewhere in a year or two? What will the dear author tell?

  • guest

    I'm using photoshop and am really new to it. I've found my way through most of this (though I suspect I worked around a few things).

    One thing I'm finding a bit tricky is the rollover buttons. How can I produce a button that's rounded on one end, and square on the other?

  • guest

    I'm using photoshop and am really new to it. I've found my way through most of this (though I suspect I worked around a few things).

    One thing I'm finding a bit tricky is the rollover buttons. How can I produce a button that's rounded on one end, and square on the other?

  • http://www.mdith.com/ Meredith

    This reads like a great tutorial but all of the images are missing…any way to get them back?

  • http://www.mdith.com/ Meredith

    This reads like a great tutorial but all of the images are missing…any way to get them back?

  • http://www.nvdchina.com/ 云眼数字高清娱乐平台

    wow…a very useful experience

  • tard

    Illustrator blows for intuitiveness. Why didn't you use Photoshop?

  • http://www.meteliksizler.net film izle

    very good.. but i'm looking forward for the other parts!! keep it coming!

  • Matt

    Thanks for this nice work!
    dizi izle

  • http://www.btbcammozaik.com cam mozaik

    Thanks a lot! I am just learning Information.
    Php and this was very easy to follow and helped a lot.
    You really took time to explain every little bit.
    Thanks again…

  • http://www.btbcammozaik.com cam mozaik

    You really took time to explain every little bit.
    Thanks again…

  • cam mozaik

    You really took time to explain every little bit.
    Thanks.

  • http://cammozaik.org Cam mozaik

    Ehuehuehe :) :) Great theme and index. Thanks for sharing.

  • http://www.abhijit.biz Abhijit Chaore

    Great tutorial. Thanks for sharing.

  • Bilalimran134

    very informative info about toutorial …great work ……mamzing

  • http://www.klavisnurs.com Klavis

    I’m having difficulty using the wand tool to select only the ‘face’ of
    the letter in Photoshop. It always selects the whole of the letter –
    what am I doing wrong

  • http://www.domain2host.in Domain Registration

    We provide services of Domain  Registration India and Register Domain Name In Chennai.

  • http://www.replicon.com/time-clock Employee Time Clock

    I like the color combination of green and black. Gives a rich and darker effect. Especially I like Drupal and i love the modules in it, especially for online payment.