GCv4: Part 2

20 January 2006

In Part 1 of this series I shared how the new Generation Church website was launched. This time I’d like to tell how the design came to be and how I created the elements. The goal here is inspire and educate other graphic designers. Hopefully this helps you.


It’s not hard to tell where I got the inspiration for the GC site from. That “Wicked Worn” look, although seemingly trendy (and possibly even passé), has always been a favorite style of mine. Not only is it unique, but it also communicates a level of attention to detail (ATD) that isn’t found in a lot of other styles. Some examples of inspiration (but not necessarily recommendation):

See? I told you it ain’t hard to see where I got it from (honorable mention goes to Sean Johnson for the super-fly background graphic idea).


In addition to external inspiration, I also took a lot from GC’s own branding graphics, which were already in affect. Every week GC meets in the main auditorium of The City Church and use the three main screens to display graphics and worship lyrics. The main graphic currently being used is where I got the masthead for the website:


It’s true that much of the “feel” of the site has to do with the color palette and font choice, but it’s the finer things (shadows, textures, etc.) that are my favorite. I applied some of the methods discussed in Cameron’s series, but mainly stuck to the brush tool and used many of the thousands of free, high quality brushes available on the web.

To create the Wicked Worn look using brushes (which is, arguably the quickest, dirtiest – no pun intended – way) you simply “hand-draw” the worn effects you want. In order to maintain the ability to edit and to have the most flexibility (for scaling, morphing, etc.) I usually always use the brush tool in conjunction with layer masks.

The first thing I do is create a new type layer. Font choice is always important; as is color, tracking, and style (or weight). Once I’m satisfied with the type, I add a new mask to the layer, select the brush tool and pick my brush. I have a library of hundreds of brush sets I’ve collected over the years. I keep them on an external hard drive and load one at a time when I need them:

  1. Select the brush tool
  2. Show the brushes pallette
  3. Open the palette menu – the circle icon (with the stemless arrow)
  4. Select “Replace Brushes…”
  5. Navigate to the desired brush set

I’m sure there’s a majority of Photoshop users who’ve never actually used the brush palette or tool in this way – so consider yourself enlightened. Consider that free, no charge.

Anyway, I like to see an outlined preview of the brush while I’m drawing (or, more accurately, clicking), so I always ensure the CAPS-LOCK is off. This will give you a preview of the brush (so long as there are defined edges), looking something like this:

Here’s where finesse comes in handy. There’s a rule I go by whenever I create something: Just because you can, doesn’t mean you should. In other words, the key to the brush tool is finding a healthy balance of detail. Once I’ve found that balance, I stop and do what I should have done at every step:


Now all that’s left is a little bit of layer effects. I usually add an inner shadow and/or drop shadow.

To be continued.