Powered By Symoon

Free XML Skins for Blogger

Powered by Blogger

Monday, December 7, 2009

Designing a Clan Template Part 1

Part one of the Designing a Clan Template tutorial will teach you how to make a wicked, general-themed game header/banner for the template.

header result


1. Document/Canvas

Firstly, you should create a new document for your clan template design, this really depends on if you want the desing suitable for 800×600 resolution users or not, I just used a document size of 880×1000. (not quite suitable for 800×600 resolution users)
Now fill your background with a suitable color, I used a very dark grey – #262626.

dark background

2. Creating the Header

Now, you’ll need some game renders/wallpapers, again this depends on your preference, it depends on what game your clan is for! I got my wallpapers from GameWallpapers, but you need a paid subscription to download nearly all wallpapers. You can get some nice, free game cutout renders from ClanTemplates.
I first First added in a wallpaper of Battlefield 2142, then made a few simple touchups to the banner.
(touching up as in: Blurring background, brightening, adding contrast, sharpening.)

Battlefield 2142 wallpaper

Next I added in a wallpaper of a game called Kane & Lynch: Dead Men. I re-sized it down to fit nicer and erased a fair bit of the corners using a large, soft brush.

Kane & Lynch: Dead Men added

Lastly for the images I added in a wallpaper of Crysis in the top right, I erased the left corners of this image to blend with the other wallpaper.

Crysis image

Looks pretty good with those game pictures in it, doesn’t it? ;) View my header so far.

3. Creating your Logo


Now it’s time to create a logo-type container that you can put your clan name inside of. First, start by making a rounded rectangle. You can do this by using the Rounded Rectangle Tool with a radius of about 10 px.

rounded rectangle tool

Use settings similar to the following:

rounded rectangle tool settings

So, create a new layer and make your rounded rectangle. You can use any color for this, after you apply the layer styles it won’t really matter.

rounded rectangle

To add layer styles to this box, right-click the layer in the layer’s palette and go into the Blending Options, now click and apply the following layer styles:
  1. Inner Shadow
  2. Gradient Overlay
You should now have something like this:

after applying layer styles

Not looking the best so far.. but we’re getting to it. Create another new layer then merge your previous layer with the new one, this is to merge the layer styles with the layer. Now you can add some more layer styles!
  1. Inner Shadow
  2. Outer Glow
  3. Inner Glow
  4. Gradient Overlay
  5. Pattern Overlay (download pattern from here: Warning Tape)
You should be left with the following result:

after applying layer styles

(Note: to turn an image into a pattern, open it into Photoshop, select all, go to Edit > Define Pattern.)
Lastly for this text container I added a 1 px line near the bottom of the rectangle, the color which I used was red (#ff0000) and I also applied this Outer Glow to it.

after outer glow line

4. Clan Name Text

Now it’s time to add your clan name to the container. First, find and get out the Horizontal Type Tool (the normal type tool) then write out your text inside of the box.

text

I used pure white (#ffffff) as my text color, I then applied the following layer styles to the text layer:
  1. Drop Shadow
  2. Outer Glow
  3. Color Overlay
  4. Gradient Overlay
text layer styles

Lastly for the text I added a bright ‘highlight/shine’ effect halfway through the text.

text shine

All you have to do to get that effect is create a new layer, select the text pixels (Hold ctrl and click the layer thumbnail), fill the selection with white, delete the lower half of your white layer then lower the opacity. Well, this part of the tutorial is complete, you can view my the result below.

header result

No comments:

Post a Comment