Make Cool Funky Buttons (Or Badges) In Photoshop

With just a few layers you can create what looks like a cool button (we call them badges in Ireland) in Photoshop. We’ll set the layer structure up so that you can easily reuse the main part of the button and simply change the top image to create a new button. Let’s get started.

1. Create a new image 600 x 600 pixels with a dark gray background #333333.

2. Create a new layer and using the Elliptical Marquee tool (M), drag out a circular marquee. Hold down the Shift key while you drag to make sure you get a perfect circle.

1-EllipticalMarquee

3. Using the Paint Bucket Tool (G) fill the circle with any color you want, it doesn’t matter at this stage. I used a bright red. Deselect the selection using Ctrl + D / Cmd + D.

2-RedCircle

4. Now it’s time to start stylin’. Click on the Layer Effects icon at the bottom of the Layers Palette and choose Drop Shadow from the pop-up menu. Use the settings in the image below, but don’t click OK yet.

3-DropShadow

3a-DropShadow

5. Still in the Layer Effects Dialog box, click on the words Inner Shadow and add the following settings. Note that the Use Global Light checkbox is not ticked, so you can change the light angle. Don’t click OK yet.

4-InnerShadow

4aInnerShadow

6. Click on the words Inner Glow and change the following settings. Don’t click OK yet.

5-InnerGlow

5aInnerGlow

7. And now the final layer effect style. Click on the words Gradient Overlay and use the following settings.

7a-GradientOverlay

Now you can click OK and you should have something that looks a bit like this:

7-GradientOverlay

8. We’re going to draw a highlight at this point. Create a new layer, then with the Elliptical Marquee tool, draw an ellipse near the top of the button. Select the Gradient Tool and set the Foreground color to white, then in the Gradient Tool Options at the top of the screen, choose the Foreground to Transparent gradient. With the Gradient Tool, drag downwards through the selection to create something like this:

8-Highlight

9. Deselect the selection, the rotate the contents of the new highlight layer using the Free Transform Tool (Ctrl + T / Cmd + T). Position the highlight as below.

9-HighlightPositionChange

10. Duplicate the highlight layer by hitting Ctrl + J / Cmd + J and then turn off the original highlight’s visibility. Make sure you are working on the highlight copy layer. Select the Eraser tool and set the size to about 500 pixels and then click once to leave a small slither of white.

10-Eraser

After erasing you’ll have what looks like a small bright shine.

11-SmallShine

11. Set the Opacity of the highlight copy to about 50%, then turn on the visibility of the original highlight layer and set the opacity to 50% for that too.

12-HightlightsTogether

12. Select the Highlight copy layer (the small bright shine) and duplicate it. Once again use Ctrl + T / Cmd + T to free transform and rotate the duplicate shine and place it in the bottom left corner, like this:

13-HightlightsTogether

Press Enter to apply the transformation. If you think the shine at the bottom is too bright, reduce the opacity of the layer to about 20%.

14-ButtonTemplage

At this stage our button template is complete. All we need to do is turn down the FILL of the red circle layer to 0%, then you can put in any image you want.

15-FillOpacity

Any image that you want to appear on your button will sit on the layer underneath this one.

Let’s say you want to make a Bob Marley button. Put the Bob Marley image on the layer beneath your (now invisible) red circle.

16-bobMarley

Now hit Ctrl and click on the circle layer to select that sized circle, then press Shift+Ctrl+I to invert the selection, go to the Marley layer, and hit delete to get your final button. Voila!

17-finalbutton

The best thing about this is it is a reusable design template, so make sure you hang on to your PSD file.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.eirestudio.net babyboy808

    Nice one Jen, very useful!

    • http://www.laughingliondesign.net Jennifer Farley

      Thanks Keith.

  • http://www.assemblysys.com/dataServices/index.php mniessen

    Very nice tutorial, Jennifer.

    I’d like to suggest an improvement, though, regarding the red circle.

    1. Make that layer (called “Layer 1″, according to the screenshot) a Smart Object before even creating the circle selection.
    2. Edit the smart object and fill it with red (or any color)
    3. Make the circle selection with the marquee tool and make it a layer mask
    4. Create all the layer styles and highlights
    5. Edit the “Layer 1″ Smart Object and replace the red background with your picture of choice. FYI, a Smart Object is just like a PSD within the PSD, and thus can contain layers and everything that Photoshop supports. Close and save the changes.
    6. If you unlink the Layer 1 and its Layer Mask, you can use the Move tool to move the underlying picture in the exact place you want, while viewing only the end result, and thus not being distracted by the image outside of the button.

    I think this method makes it a lot easier to adjust the picture’s position while only viewing the end result at all times. It also makes it easier to change the picture: no need to just select a circle and erase the unnecessary parts of the image (your last step).

    Extra tip: You could also simply work with your picture from the start. As replacement of my n°1 and 2 steps, just put your image on one layer and make that one a Smart Object, then go on to n°3.

    Regards,

    Michaël

    • http://www.laughingliondesign.net Jennifer Farley

      Hi Michael

      Thanks for taking the time to write such a detailed and useful comment. Smart objects are definitely a good idea as are the Layer Masks. I was trying to keep things as simple as possible but probably added in some extra steps along the way.

      thanks again

      Jennifer

      • http://www.assemblysys.com/dataServices/index.php mniessen

        You’re welcome, Jennifer.

        Indeed, working with smart objects (and layer masks, too) seems a little difficult at first and are therefore easily overlooked. But when you get used to them and realize how powerful they are, they make your work that much easier and are real time savers, especially in cases such as this, when you might reuse your PSD at a later time.

        Even now, I sometimes wonder why I didn’t turn a layer into a smart object before applying those 2 or 3 (later turned into 8 or 10) filters, layer styles and transformations, that then need further adjustments… I hate that when it happens, and I can only blame myself! ;)

        Kind regards,

        Michaël

  • youmen

    Nice one Jen, very useful!

  • http://www.assemblysys.com/dataServices/index.php mniessen

    [Off topic]
    What’s the point of moderating the comments if the ones like dued’s are accepted?
    It has absolutely nothing to do with the topic. It’s just linking…

    • http://www.laughingliondesign.net Jennifer Farley

      Yip, that one just slipped under the radar. Gone now.