Tutorial Magazine Blog

Well, hi there, and welcome to my first exclusive tutorial here at TutorialMagazine.com

Battlestar Galactica was a great television show, and while we wait for the upcoming movie, why not make our own Battlestar Badge?

This is what we’ll be making:

Step 1.

Download this .zip file containing the textures you’ll need, as well as a template to work from.

Open up start.psd, and check that it looks like the image below.

Step 2.

Let’s start building the components of our badge, using the template layer as a reference.

We want to draw a circle that will form the basis for our badge.  To make a circle that matches the size of the template, first place two guide lines as shown in the image below.

You can make guides by clicking and dragging from the horizontal and vertical rulers. If the rulers aren’t visible, select ‘View’ -> Rulers‘ or press Ctrl-R.

Step 3.

Create a new layer and name it ‘base’ (by double clicking on the layer name). We’ll have lots of layers by the end, so we might as well keep them named and organized.

This new layer should be placed above the template layer.

Set the foreground color to white. On this new layer, draw a circle using the Ellipse Tool. Hold the shift key, then start drawing the circle from the point where the guidelines intersect (upper left corner) and let go when the size matches the badge template.

Remember this technique, we’ll be using it again later.

Tip: You can remove the unused guides if you want, by dragging them back out to the rulers using the Move Tool.

Step 4.

Set the opacity of the base layer to 40%, This will help us see the template below.

Duplicate the base layer, name the duplicate ‘outer ring’. Add two new guides, as shown below:

Step 5.

Select the ‘outer ring’ layer. We want to remove the central section.  Using the Elliptical Marquee Tool, select a circular area by dragging from the point where the guidelines intersect.

Delete this selection from the ‘outer ring’ layer by pressing the delete key on your keyboard. You should get this:

Step 6.

Now we need to remove the lines in the outer ring. Use the Rectangular Marquee and Polygonal Lasso Tools to select the areas we need to remove, and press delete.

When you’re done, you should have the following:

Step 7.

Select the ‘base’ layer, add 2 more guides as shown, and delete the area using the Elliptical Marquee Tool, like you’ve done earlier.

Your badge should now look like this:

Step 8.

Reposition the guides as shown. Create a new layer called ‘inner ring’. Draw another circle from where the guides intersect.

Step 9.

Control-click (hold the “Ctrl” key on your keyboard while clicking) on the thumbnail next to the layer named ‘inner ring’. This should select the whole circle.

In the Photoshop menu, find ‘Select’ -> ‘Modify’ -> ‘Contract’, and contract the selection by 3 pixels. Hit the delete key.

Tip: Clear your selections by pressing Ctrl+D.

Step 10.

Let’s make the Battlestar Galactica text! First, download the font here. When you’ve installed it, reposition the guides as shown.

Since the text is curved, we’re have to add the text to a path. From the guides’ intersection, draw an ellipse using the Ellipse Tool, but remember to set it to the middle setting (as shown in the image below) to make a path.

Step 11.

With the Type Tool selected, add the text by clicking on the path right beside the B in Battlestar. You’ll notice that the mouse cursor changes when its above the path.

Type in the text “Battlestar Galactica” in capitalized letters. Set the font size to one that matches the text on the template. I used 17,2 pt with a letter spacing of 20. You should now have something that looks like this:

Step 12.

Add the bottom text “BSG 75″ to the existing path. You might have to select the correct path in the ‘paths’ palette. You will have to flip, rotate and move the text to make it fit.

Don’t worry if your design so far isn’t perfect. You should now have something like this:

Step 13.

Now we’re going to make the two curved lines between “Battlestar Galactica” and “BSG 75″. You know the drill now, so make a new layer, call it “curved lines”, reposition the guides and make a circle using the Ellipse Tool. (remember to hold shift!)

Step 14.

Once you’ve drawn the circle, select it by ctrl-clicking on the layer thumbnail. Contract the selection by 10 pixels, and press delete.

Delete the top half of this layer, using the Rectangular Marquee Tool.

You should get something a little like this:

Step 15.

Use the Polygonal Lasso Tool to select and delete the section covering the “BSG 75″ text. You should now have curvy lines

Tip: Try hiding the template layer now, to see what we’ve made so far, looks good doesn’t it?

Step 16.

It’s time to start making the central elements. Make a new layer called ‘wings’. Start tracing the wing-like objects using the Pen Tool. We’ll trace the left side first. Notice how I’ve done it in the image below.

Tip: If you need help using the Pen Tool, I’ve gathered some great tutorials on it at TutorialMagazine.com (go there and do a search for “pen tool”).

Step 17.

Now we want to fill the path we’ve made. Make sure that you are on the ‘wings’ layer, click on paths and select the work path.

Right click on the work path and select ‘Fill Path’. Fill the path with white. This will give us one half of a wing.

Step 18.

Duplicate the wings layer (right click on the layer name, choose ‘Duplicate Layer’). This will be our other wing half.

In the menu, select ‘Edit’ -> ‘Transform’ ->’Flip Horizontal’. Move the flipped layer over to the right using the Move tool.

Tip: Hold Shift while dragging to constrain the movement to the X axis.

Step 19.

Don’t worry if there is a slight gap between the two layers, like in my image. Now, we need to merge the two wing layers.

While holding Ctrl, click on ‘wings’ and ‘wings copy’ in the layer panel.

Right click on one of the two and select ‘Merge Layers’. You should be left with one wing layer, perhaps named ‘wings copy’ - so rename it back to ‘wings’.

Step 20.

Drop the opacity of the ‘wings’ layer to 40%, so we can easier see what we’ll be making next. We’ll repeat steps 16-19 to make the central layer that goes on top of the wings.

Make a new layer called ‘bird’ (you can call it whatever you want, but I think it looks like a bird).

On this layer, draw the outline of the central piece using the Pen Tool, fill the path, duplicate, flip and merge the layer. I’ve not followed the template exactly, so draw what you think looks good.

Here’s my path:

..and here’s what I ended up with:

Step 20.

Zoom to 100% and get an overview of what we’ve made so far. It looks great!

Now, let’s add some color and texture!

We’ll start with the ‘base’ layer. Apply the layer styles seen below. Remember to reset the opacity to 100% for all layers you’re adding effects to.

The result should be this:

Step 21.

Give the text layers and the ‘curved lines’ layer a color overlay of #1f141e.

Step 22.

Give the ‘inner ring’ layer a color overlay of #e5df9e.

Step 23.

Give the ‘outer ring’ layer these styles:

Step 24.

Add these styles to the ‘wings’ layer:

You should now have this:

Step 25.

Add these styles to the ‘bird’ layer:

The bird should look like this:

Step 26.

Before we get any further, let’s improve our background.

Create a new layer called ‘gradient’, and place it above the background layer. On this layer, draw a radial gradient using the Gradient Tool.

The gradient should be from #2839b7 to #05232a. Draw the gradient out from the center of the badge, stopping before you reach the edge of the document.

You might have to check ’Reverse’ in the Gradient Tool options to make it look right.

Set the layer’s opacity to around 50%.

Step 27.

Import the file background.jpg into Photoshop and position it so that it covers the area behind the badge.

Set the layer’s opacity to 80% and it’s Blending Mode to ‘Soft Light’.

Notice that the background is showing through behind the bird and wings. We’ll fix that in the next step.

Step 28.

Import the file center_texture.png and position it below the base layer. It should cover the hole in the base layer and cover up the blue background.

It should look like this:

Step 29.

Now to jazz up this badge we need to get creative. Import the file gold.jpg, and place it above the ‘bird’ layer. Call this layer ‘gold’.

While the gold layer is selected, Ctrl-click on the ‘bird’ layer thumbnail to select the bird, and click ‘Select’->’Invert’. This will select the part of the texture we won’t need. Press the delete key.

Set the ‘gold’ layer’s opacity to 80% and the Blending Mode to ‘Overlay’.

Step 30.

Repeat this process to add a gold sheen to the ‘wings’ layer.

Step 31.

Let’s make some highligts on the gold layers. This adds some depth and makes everything look more real.

Create a new layer above the wing’s gold layer. Call this ‘wing highlights’.

Using the Brush Tool, draw white brush strokes on the edges of some of the ‘wing tips’, like I’ve done here:

Step 32.

Ctrl-click on the ‘wings’ layer to select the wings. Inverse this selection and press delete.

Set the highlight layer’s opacity to 25% and the Blending Mode to ‘Hard Light’. Once you’ve done one side, duplicate and flip the new layer and move it over to the right.

Repeat these steps to add highlights to the ‘bird’ as well.

Step 33.

If you’ve followed the TV series, you know that nothing stays shiny on the Galactica, so let’s rough things up a bit by adding some scratches.

Download and import these brushes into Photoshop.

Create a new layer below the wings layer, and name it ’scratches’.

Brush using your new brush presets with a dark color to add scratches and lines to the base.

The more time you spend on this, the better it will look. Be creative!

Below, I made dark red scratches, but later changed my mind and made them black instead.

Once you’ve added lots of scratches, Ctrl-click on the ‘base’ layer thumbnail to select it, then invert the selection and delete.

This will remove the scratches that are not on the base.

Set the ’scratches’ layer’s opacity to 35% and its Blending Mode to ‘Hard Light’.

Step 34.

Repeat this process to add scratches to the ‘wing’ and ‘bird’ layers too. Experiment with different blending modes and opacities.

Step 35. - Final result

Here’s what I ended up with.

I hope you have enjoyed this tutorial, please leave your questions or comments below.

Do check out TutorialMagazine.com to find hundreds of other hand-picked tutorials you can do.

Jørgen, editor of TutorialMagazine