Create a Killer Band Site in Drupal – Part 4 – Theming Drupal

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 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 5 -Drupal Admin

Introduction

In our last tutorial we coded our XHTML and Cascading Style Sheets. Now we are going to turn that code into a Druapl Theme.

Setup Drupal

First download a copy of the final Goband Theme files. That way you’ll have it to refer to as you work through this tutorial.

Next you want to download the most recent version of Drupal 5. Go to Drupal.org and look for the link on the right of the screen. Then make sure you get Drupal installed. Lullabot has a good video on Installing Drupal 5. You will need either a local test environment setup or a host that is Drupal compatible. I’m on a Mac and I use MAMP for local testing. Lullabot has a good video for setting up a Local Mamp Test Server on your Mac. You could certainly develop with Drupal and have a different setup. Lullabot has more resources for setting up a local test site on other computer types. Check out their Videos section. I keep mentioning Lullabot. They are well known in the Drupal community for producing really good websites for big companies, offering seminars, and running a Drupal podcast. They have some great Drupal resources.

Once you have Drupal installed rename your Drupal install folder to your project name. In this case its named goband. The image below has invisible files shown, as there are important files like the .htaccess file to be aware of. For the rest of this tutorial I’ll have invisible files turned off though.

File Structure

Create Your Theme Directory

There are a multitude of template languages that Drupal can work with. The most common is PHPTemplate that uses Drupal’s own theme engine. There are two places to put your Drupal theme. The most obvious is in

Meet The Staff: Bill Beachy

For those of you that ask: “How did Go Media get started?” Well, here is the story. You’ll laugh, you’ll cry, you’ll think I’m crazy! You’ll also see some cool artwork and learn a little too I hope.
William A. Beachy

I spent my entire childhood drawing. I had a huge box of crayons. Actually it was an entire drawer from a small dresser. I would pull it out, set it on the ground next to my paper, lay down and draw for hours. I did this just about every day. For some reason I had it in my mind that all children all around the world were doing the exact same thing. What else was there? I didn’t realize that I had artistic parents that went out of their way to encourage my involvement in art. I guess

Land Bigger Jobs: Appear “bigger” than you actually are

designer-growing150.jpgOne thing that Go Media has done ever since we we put our first site online back in 2003, is tried to appear bigger than we were. This can have its pros and cons, but to the designer just starting out, it has more pros. Let me explain. The idea of looking bigger simply means that by portraying an attitude of success and professionalism, you will earn those high paying jobs with bigger clients.

Lofty Goals

Most designers just starting out have lofty goals in mind. They want to be doing the “big” projects and get the “big” clients. They want their name to be synonymous with the term “design.” Go Media started out just the same way. There are always the designers that start small and want to stay small and have no desire to attract bigger clients or higher paying work. But for this post, I’ll focus on the majority that want to get bigger and more successful. I’ll offer a quick rundown of the pros and cons of looking bigger than you actually are.

Pros of Looking Bigger

1. You get bigger clients and bigger jobs
2. You get treated with more respect
3. You become the envy of all your peers
4. You attract other successful people

Cons of Looking Bigger

1. You may get more work than you can handle
2. You risk disappointing your client if you cannot live up to your expectations
3. You risk appearing dishonest if you aren’t truthful in how you describe yourself
4. You may be perceived as “too big” and scare off some nice projects

So How do I “appear bigger?”

There are a few things you can do. I’ll speak from my personal experience. I discovered Go Media in 2004 after I saw their site. I looked on their contact page and they had a map of the USA with markers in a few major cities and multiple phone numbers. I thought to myself, man these guys

Some colored concepts for Go Media HQ

Pete Maric, our interior designer for the new Go Media Headquarters, sent over some color concepts. Let’s have a look:

metaltrimming-sm.jpg

Click on the image to view the full size.

We’re not officially set on the colors yet, so we’re going to work back and forth some more until we get what we like. But things are moving along and we’re stoked on what we see so far!

Create a Killer Band Site in Drupal – Part 3 – XHTML

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

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

Introduction

In our last tutorial we sliced up our graphics. Now we are going to take those graphics and move on to coding the XHTML and Cascading Style Sheets.

File Setup

I’m on a Mac. The programs I use for coding are firstly Coda. Its a great program that you can use for coding and ftp. You can see a screenshot below. When I need a more specific tool to a need at hand I use CSSEdit, TextMate, or Transmit.

First off, below is a screenshot of the file directory. You’ll want yours to match this structure for this tutorial. You’ll need the exported photos from the last tutorial as shown below as well.

Files

Standards Based XHTML

Standards based design is a common part of web design today. Here are a few links if you need to beef up your skills in this area: A List Apart, 465 Berea Street, and SimpleBits. Standards based design is a movement away from table structured layout. There is also a focus on semantics, which basically means naming your classes and id’s on what they do and not what they look like. Overall, you want to create html code that is

Go Media’s Vector Packs in Super Bowl XLII

Haha, this is pretty damn awesome. We knew our Vector Packs are popular, but it’s still makes us feel good when we see them on a national scale. I don’t know who animated this (it was NOT us, although I wish it could have been!). But there are a LOT of Go Media Vector Packs being animated. Wings, Grimey Brush Strokes, Splatters, Hooladanders, etc. There are a bunch that aren’t ours either, the animator used lots of different vectors.

Badass Bling Effect in Photoshop

Written by guest author Barton Damer.

Bad Ass Bling Effect

Introduction:

This tutorial will show you step by step on how to create a “Badass Bling Effect” using layer styles in Photoshop. Once you create the layer style, you can easily “blingify” any layer. There is also a video tutorial as well.

Video Tutorial

STEP 1

Choose an image you want to sprinkle with golden Photoshop magic. In this case i chose a full color image of a boombox and I’m going to make it look like it is solid gold. Make the image into a grayscale image by “Desaturating” the layer in the Image/Adjustments/Desaturate menu.

image

STEP 2

Apply a color overlay Layer Style by

New Font – Celest

celest.jpg

We have released a new font called “Celest” and it was designed by one of Go Media’s newest designers Katie Major. She’s actually been working for us for about a month now and doing very well!

She describes this font as “a new concept in human communication conceived through this typeface. It is a speculation as to how we will need to interact with each other as our reach stretches further into the galaxy. For centuries we have looked to the stars for answers. Inspired from ancient constellations, Celest is the manifestation of evolved communication.”

Buy the font for only $9.99 at Go Media’s Arsenal

Go Media HQ Floorplan 3D Flyaround

drawing-lo.jpg

The wonderful Pete Maric sent us his latest drawings and a 3D “sketch” of our new office floorplan. Again, our new building has 3 floors and this is just the 3rd floor which will be our office. The other 2 do not have any sketches yet. We’ll tackle those floors when the time comes.

But we’re stoked, you can start to see how it will look: