How to Create a Funky Vintage Badges

on Apr 20 in Design, Drawing, Effects by Paul

In this tutorial, I’ll show you how to create three different and exceptional vintage badges using Photoshop that may be used in web design, product design, print or in any other place that comes to your mind! Let’s get started!

Final Product

We’re going to create three different funky vintage badges in this tutorial. You may find this kind of effect useful in web design as well as in poster design or simply you may create a retro badge or a nice-looking wallpaper with this tutorial. Here’s the preview of what we’re going to create.

Step 1

First of all open up the Photoshop and create a new document with dimensions set to 1680×1050px. Fill the background layer with black using Paint Bucket Tool (G).

Step 2

You’ll need a plain fabric texture for the background. Take a look at mine background first and then head to the website like cgtexutres.com or any stock images website to get one. I downloaded a few different textures and finally used the one that matched well.

Step 3

Paste your texture to the document and go to Layers > New Adjustment Layer > Hue/Saturation… and use 24 for Hue, 40 for Saturation and -80 for Lightness. If you don’t get background like mine one then adjust your settings because you’re likely to have substantially different texture.

Step 4

Create a new layer by going to Layer > New > Layer… or by hitting Ctrl/CMD + Shift + N. Grab Gradient Tool and make sure that your colors are set to black and white (hit D in case they aren’t or set them so manually). Create two guidelines in the middle of the image both vertically and horizontally. You can create them by going to View > New Guide…. Use 50% as the value in the text field. Afterwards make sure that you’re using Foreground to Transparent gradient preset and that your foreground color is white. Also, make sure you’ve got Radial Gradient selected. Click in the middle of the image (there where your guidelines crosses) and drag it in any direction to create a gradient. Set this layer to Overlay.

Step 5

Create another layer, swap colors so that black is your foreground color now and select Reverse in gradient settings. Click in the middle of the image again and drag it to create another gradient. This one will make your borders darker. Set this layer to Overlay. At this point you may duplicate this layer or the layer from previous step if you’re getting insufficiently explicit and flat background.

Step 6

Use Custom Shape Tool (U) to create some shapes that are in shape of badges. One of my badges (star with 32 vertices) consist of two stars both of which has 16 vertices and the second one is rotated by 22.5 degrees against the first one.

Step 7

Grab your fabric texture again, duplicate it and scale it way down. Place it on top of the first badge shape. Ctrl/CMD + click on the thumbnail of this badge’s layer to select it. Then select the fabric texture back again and hit Add layer mask button which is at the bottom of the layers’ palette. This way your texture should remain only on the badge and it should disappear from around the badge. Do the same with other shapes unless you’re planning to make some badges different. Make sure you duplicate fabric texture each time. Group each badge somehow so that you could easily get to the right badges and modify them. Just keep it tidy.

Step 8

When you’re done duplicate your shape and place it above the fabric texture. Apply it the following style:

Step 9

Create another empty layer. Ctrl/CMD + click on a thumbnail of any badge shape. Make sure it has become selected. Go to Select > Modify > Contract. Type in something like five pixels there. Fill the new selection with any color you like. Just make sure you’ve got your empty layer selected. Go to layers styles of this layer and use the following settings to create a nice looking outline.

Step 10

Use Type Tool (T) to create a text for your badge. I used font called Harlow Solid Italic with 60 pt and white color. Little superscriptions were created with font called Freestyle Script.

Step 11

Duplicate fabric layer again (this one you used for the background of your badges) and place it above text layer. Ctrl/CMD + click on the thumbnail of text layer and use the selection that you’ve just created as a mask of the fabric texture. Do the same with each text layer.

Step 12

Make another selection of your main text layer. Go to Select > Modify > Expand and type in something like 3 px depending on the size of your text. Create next layer and fill it with any color. Use the following style for this layer and then use the fabric texture to make it look like a fabric outline. Your first badge is done. Group all its layers and hide the group for now.

Step 13

Copy all the text layers from the first badge (ForCG, Design Blog and Excellent Tutorials) and place them the same way on the second one. Use #004a80 color for Design Blog and Excellent Tutorials layers and apply them the following style:

Step 14

Use font called Script MT Bold for the ForCG.com layer and apply it the following style:

Step 15

Also, create an outline for this layer (follow ninth step again). Now, we’d like to use old paper texture instead of fabric texture. To do so you’ll need a paper texture. You can get one on any stock images website. I’d recommend to pick a few and then check what works for you. Place your texture on top of the badge. Scale it down if it’s too big. Make a selection of your badge’s shape (Ctrl/CMD + click on a thumbnail of badge’s shape layer) and mask your old paper texture. Mine texture is set to Hard Light bledning mode with 50% opacity.

Step 16

Now it’s time for the last badge. It basically starts the same as the second badge so you may follow steps 13-15 to create the background for the third badge but notice that this one is in shape of a circle.

Step 17

For the main text layer use font called Victorian LET. There’s also a red stripe beneath the text. Grab Pen Tool (P) and just draw it. Don’t worry if it’s not perfect. Once you have it delete its parts outside the circle (if there are any) and paste fabric texture again. Make a selection of your stripe and mask fabric texture. Then apply it the style that you used in eighth step. Also, mask your text so that it remains white. You should get something like this afterwards:

Conclusion

That is the end of my tutorial. You may add in some little details there if you’d like to or improve it somehow even more. I hope that you enjoyed it and you’ll find it useful. Thank you for reading!

retro-badges

13 Comments

Leave a Comment