Nice ‘n’ Simple Subscribe Badges

Advertisement

There have already been quite a few tutorials around documenting the making of these sleek, supermarket-style badges, but none of them have made them into subscribe badges! Well I actually have no proof of that assumption, but anyway.

In this Photoshop tutorial we’ll be making those cool supermarket-style badges, then we’ll be turning them into subscribe buttons for your website, a must-have for any blog!

Nice and Simple Subscribe Badges for your Blog

1. Background

Well, the background obviously isn’t very important, but we’ll make something nice and simple for our badges anyway. Otherwise you could open up a blog template you have been working on, so you can implement the badge there.

I’ll be using a document size of 800 x 600 pixels for this, pretty small easy to work with size. After you’ve made a new document, fill the background with a dark color. In this case I used a dark brown (#2e1f13).

OK, after you’ve got the background color set, you might be happy with that, or you can find a nice wood texture and put it on the background as well.

Wood Texture Background

OK, so if you want some nice wooden board textures, you should check out CG Textures. Now, if you’ve got a texture, copy it onto the canvas and resize it. After this, lower the opacity and mess with the layer modes to blend it in with the color a little more.

You may need to repeat this step a few times using different layer modes and opacities.

Wood Texture Layers and Settings

2. Badge Base

Let’s create the base of our badge now. Firstly, find and get out the elliptical marquee tool, then make a selection in the middle-area of your canvas. Create a new layer, then fill your selection with an appropriate color.

Badge Shape Created

Alright, now you have the shape, we need to cut away a small corner and rotate it. To do this, first get out the polygonal lasso tool, then select a corner of your shape like so:

Polygonal Lasso Tool Selection

Right-click your selection and go to layer via cut, this will cut the selected pixels and place them in a new layer. Rotate your peel effect layer (edit > transform > rotate 180) then you may need to move it slightly so it’s exactly on the corner.

Lastly, fill your little shape with white or another very light color, so it contrasts well against the base layer.

Shape Adjusted and Filled with White

Now we’ve got a cool peeling effect. I’m hoping I’ve been explaining thoroughly enough so far! ;)

3. Effects (Layer Styles)

Now, how about we give the badge a little more depth? What we want to do is apply a Gradient Overlay layer style for each of our layers, so right-click your layer and go into the Blending Options.

Note: You may have to move the gradient around a little bit, do this by dragging your mouse around below the blending options box.

Gradient Layer Styles Added

Much nicer.

4. Add Text

Now let’s add some text. Get out the horizontal type tool (just the regular one) and write out something like ‘Subscribe Today!’ on two lines.

Delicious Font/Text Added

Note: The font used above is called Delicious, and it’s a free font that you can download from here.

Alright, now you’ve got some nice text done, you’ll want to rotate and situate it on top of your badge. While rotating (ctrl+t) you may want to size it down so it’s more of a snug fit.

Text Rotated and Resized

Alright, looking nice! Lastly to make the text stand out a little more, you should add a slight Drop Shadow layer style.

Additional

To finish off, you should merge all of your badge layers together then size the whole thing down to about 25% of it’s original size (depending on what size you made the original).

You should also try different things with the badges, such as adding a grungy layer mask, or going with the traditional style of the RSS icon.

Nice and Simple Subscribe Badges for your Blog

Thanks for reading everyone, if you have a question, a suggestion or a comment, please leave a comment below using the form, or send me an email.

Subscribe

If you enjoyed this tutorial, then you may be interested in subscribing to PhotoshopStar to get updates via email or feed reader! :)

Advertisement


17 Responses

  1. DASO says:

    this is a really simple and helpful tutorials, and the idea of making subscribing buttons is so cool. thanks for your effort.
    waiting for more :)

  2. Hayden says:

    hey, u may have notices this on Feed Icons.com, but it said not to use it in something with the background changed, like in a circle. You may want to check that out its toward the bottom. Probably worth the time. Looks like they take that “it’s mine” stuff pretty seriously. Awesome tutorial though! Your tutorials are very accurate and easy enough for a kid (believe me, I know.)!

  3. Eli says:

    Hayden: I just read the erm, ‘terms’, and I think I’m in the clear with this one. Thanks :)

  4. laurent says:

    i like it ,thank you for your tutorial^^

  5. subcorpus says:

    this seems like something i can try …
    thanks for the tutorial …
    appreciated …

  6. Antilogic says:

    Damn,very nice! I like the grunge on that blue!
    Great stuff, keep it up…

  7. Tobbi says:

    Thx for the tutorial, i like the badges :)

  8. Kevin says:

    Wow… cool information… Generally all such stuffs can be easily done with photo shop…

  9. Eli says:

    Thanks for the comments.

  10. DoubleStrength says:

    I really like the result. Was wondering if you’d share the exact name (or page # @ CG) for the wood texture you’re using. Would like to use it for a project of my own, but am running low on ‘surfing MB’ at CG Textures…thx

  11. John_Pox says:

    Very cool tutorial ! I like you designed. (Cool sticker)

  12. Tutes says:

    Nice tutorial, simple and easy to follow which is great for a PS newbie like me!

    I do have one question though and that is how come I’m getting a thin white line all around the edge of my image when i remove the background to make it transparent and use it on a web page that doesn’t have a white background?

    I’ve followed the instructions to the letter and I can’t see anything that could be causing this unless I should have created the image on a transparent background to start with?

    Any help with this would be gratefully received, hopefully I’m just being a biffa!!

    Cheers for the tutorial though, top drawer!

  13. Awesome Set Thanks For The Share..

  14. actuvirus says:

    Nice tuto :) Never test this before. I will try this tonight and try to do same for my next project. Thank’s again and happy Christmas !

  15. robert says:

    I think I did something wrong. Is this tutorial works on CS5?

  16. belkisM says:

    EXCELLENT TUTORIAL. First timeI dont struggle with a particuluar step.. well done..:D

  17. manish says:

    when i select the corner and right click then layer via cut option is disable so how can i cut the corner of selection