Nice ‘n’ Simple Subscribe Badges

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!

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.

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.

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.

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:

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.

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.

• Gradient Overlay (base badge)
• Gradient Overlay (white peeling)

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

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.

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.

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.

Free Psd Files

Here you have another PSD file I made long time ago when I first started with Photoshop. I was practicing applying layer styles to make buttons. Enjoy

FRESH By Psdbox (6.6 MiB, 769 downloads)

Peeled Back Sticker Effect II

Step 1

Lets jump right in and open a new document by selecting File>New from the main menu or by pressing the keyboard shortcut Command-N (PC: Ctrl-N). The size of my working document for this lesson is 540×300 at 72ppi.
Create a new layer by choosing Layer>New Layer from the main menu or by using the keyboard shortcut Shift-Command-N (PC: Shift-Ctrl-N) and call the layer Sticker. Click on the foreground swatch in the Tools palette and set the color to #e0dac7. Now lets grab the Elliptical Marquee tool (which is in the Rectangular Marquee tool fly out menu) and while holding down the Shift key to constrain, click and drag a circular selection onto the stage. If you’re following along at home and want yours to be exactly like mine, my selection is 95x95px.
(*note: To create a new layer without the Layer Properties pop-up message use the keyboard shortcut Shift-Option-Command-N (PC: Shift-Alt-Command-N))

Step 2

Fill the selection with your newly set foreground color by pressing Option-Delete (PC: Alt-Backspace), then deselect by pressing Command-D (PC: Ctrl-D)

Step 3

Now lets go back to that Rectangular Marquee tool fly-out menu and re-select the Rectangular Marquee, or do it the easy way and use the keyboard Shift-M to switch back and forth between the two.
Drag a nice sized square selection onto the stage (don’t forget to hold Shift to constrain the proportions). Next lets rotate the selection by choosing Select>Transform Selection from the main menu. This will give you the Free Transform controls that you’re used to, but the transformation will only be applied to the selection (not the stuff on the layer). Using the Options bar at the top of Photoshop enter 48° into the rotation field and hit Enter to commit the transformation.

Step 4

With the Marquee tool still selected, click and drag inside the selection to position it over the corner of the sticker that you want to be folded back.

Step 5

Now lets use a tricky keyboard shortcut to cut the selected area out of the current layer and place it on it’s own layer above. Press Shift-Command-J (PC: Shift-Ctrl-J) and watch the magic happen. Rename this new layer Residue by double clicking directly on the layer’s name in the Layers palette. Now duplicate the Residue layer by making sure it’s selected as the active layer in the Layers palette and then pressing Command-J (PC: Ctrl-J). Name this new layer Peel. Note that at this point nothing on the stage looks any different.
For the moment, lets turn off the Residue layer by clicking on the little eye icon at the left of it’s thumbnail in the Layers palette.

Step 6

Lets lighten the corner of our circle that lives on the Peel layer. With the Peel layer selected, click on the Lock Transparent Pixels checkbox. Change your foreground color to a lighter shade of the same color, something like #efe4d0 should due nicely. Since the pixels are locked, all we have to do is fill the layer with color by pressing Option-Delete (PC: Alt-Backspace).
While we’re at it, lets go ahead and rotate the Peel layer so things are oriented correctly before we continue. We can do this easily by choosing Edit>Free Transform>Rotate 180° from the main menu (if for some reason this places the Peel somewhere other than where it ought to, simply press V to switch to the Move tool and move the little sucker into place.)

Step 7

Before we get onto the body of the sticker, lets add a few layer styles to the Peel layer to complete it’s effect. Control-Click (PC: Right-Click) on the Peel layer in the Layers palette and choose Blending Options from the menu to bring up the Layer Style dialog box. We’ll be adding a Drop Shadow followed by a Gradient Overlay as shown below. Be sure to check each setting to make sure you’ve made all the necessary adjustments for the effect.
Notice in the Gradient Overlay dialog that we can get the Linear Gradient to lay perfectly onto the Peel because we know the exact angle we rotated it.

Step 8

If you go it right, your Peel should now look like mine… if not, do not pass go, do not collect $200, just get yourself back to Step 7 and figure out where you went wrong!

Step 9

Now that we’ve got the Peel layer out of the way, lets click back down to the Residue layer, turn it back on by clicking the empty box at the left of the layer (which brings back the little eye icon) and then lower the layer’s Fill to 40%.

Step 10

Click on the Sticker layer in the Layers palette and add the following Layer Styles (just like we did in Step 7), remember to pay close attention to each setting.

Step 11

And if you did it right, things should be lookin’ like this.

Step 12

With the Sticker layer still selected, add a new layer above it called Orange (unless you want to use some other color, then name it that. Anything but purple is ok… you know how I feel about purple). Set the foreground to a nice orange color like #eb8206 then press the M key to switch back to the Marquee tool (if you’re not still there). Make sure that you’ve got the Elliptical Marquee tool selected and drag a nice round selection into the middle of the sticker… and don’t make me remind you about the Shift key again.
If at any point while you’re dragging out your selection you feel like you need to move it, just reach over and press down the Shift key with your thumb. It’ll allow you to move the selection before you actually let go of the mouse and commit it. Now just press Option-Delete (PC: Alt-Backspace) to fill the selection with color followed by Command-D (PC: Ctrl-D) to deselect.

Step 13

Now obviously we don’t want the orange sticking out past the edge we peeled back, so lets clip the Orange layer to the Sticker layer. To do this, hold down the Option (PC: Alt) key and place your mouse exactly between the two layers in the Layers palette. The cursor will change to what looks like two circles overlapping, when that happens, simply click your mouse to set the clipping mask. You’ll know the layer has been clipped because it will now be indented with a little arrow pointing down to the layer it’s clipped to.
(*note: You can also create a clipping mask by Command-Clicking (PC: Right-Clicking) on the Orange layer and choosing Create Clipping Mask from the menu.)

Step 14

Now lets add some dimension to the Orange layer by adding a few simple Layer Styles. We’ll be adding an Inner Glow (which we’ll actually use to shadow the edges of the object), a Gradient Overlay to add some color variation and a Stroke to lightly define it’s edge. Follow along carefully.

Step 15

If your sticker doesn’t look like mine I’m going to have to send you to detention.

Step 16

The OnWired sticker has been antiqued a little, so why don’t we go ahead and beat ours up a little as well.
Start by adding a Layer Mask to the Orange layer (which should still be selected in the Layers palette) by clicking on the little icon at the bottom of the Layers palette that looks like a white circle in a gray box. You’ll notice in the Layers palette that a new thumbnail has been added next to the original one. This is the layer mask. By default when you add a Layer Mask, Photoshop selects the mask and you can tell it’s selected because it’s got little black brackets around it.
Using a layer mask will allow us to mess with the layer without actually damaging any of it’s pixels. It’s a great alternative to using the Eraser tool because you can always alter it later.

Step 17

Reset the foreground color to black by pressing the D key, then press the B key to switch to the Brush tool. I’m going to use a grunge brush that looks like splatters to help me distress the layer. I’ve bundled every grunge brush in my collection into a single brush set which is included in the lesson download at the end of the tutorial. This brush is called Sampled Brush 4 and I’m using it at it’s default 551 pixel size.
With the brush selected and my foreground color set to black, I’m going to place the brush over my orange circle and click once or twice until I get the effect I want. By painting with black on the Layer Mask I am telling Photoshop to ignore any part of this layer that is masked by black on the Layer Mask.

Step 18

Now lets decorate the sticker a little. Create a new layer above the Orange layer called Circle and clip it to the layers below (just like we did in Step 13) by holding down the Option (PC: Alt) key and clicking the line between the Circle and Orange layers in the Layers palette.
With the Elliptical Marquee tool create a selection just slightly smaller than the orange circle, press Command-Delete (PC: Ctrl-Backspace) to fill the circle with the background color (which should still be set to white). From the main menu choose Select>Modify>Contract, set the size to 3 and click OK. Press Delete (PC: Backspace) to remove the color within the contracted circle and then press Command-D (PC: Ctrl-D) to deselect.
Lower the Circle layer’s Fill opacity to 80%.

Step 19

You’ll notice that although we’ve clipped the Circle layer to the Orange layer at the bottom of the clipping stack, the entire circle is still visible even where the Orange layer has been masked by it’s Layer mask. Obviously we can’t have that, so let me show you a little trick. Hold down the Option (PC: Alt) key and click and drag the Layer Mask that’s on the Orange layer onto the Circle layer in the Layers palette. This will copy the layer mask we’ve already created onto the other layer.

Step 20

How ’bout we add some text to our sticker now? Press the T key to switch to the Text tool, press the X key to switch the white color swatch to the foreground color and type in your text. I’m using a font called Chicago House which will also be included in the lesson download. Click onto the stage to set your text field and type your message… mine’s LOVE, because, as you know… I love you.
Clip this text layer to the layers below just like we did in Step 18, then copy the layer mask from the Circle layer onto the text layer as well.

Step 21

Lets use an Outer Glow Layer Style to make our text pop a little more. You know the drill…

Step 22

Your sticker is now complete! Add some background elements, some more text… go nuts!
And yes, for those of you who are wondering how I did the background, it’s all in the .PSD file download at the end of the lesson. Enjoy!

Adobe Photoshop CS3 Style Icons

Step 1

When I want to create an effect that already exists I always like to have a piece of reference material to work with. In this case I’ve taken a screen shot of the Photoshop CS3 icon and placed it in the file to look at while I work.

Step 2

Create a new layer by clicking the New Layer icon at the bottom of the layers palette and name it "Background Square" then select the Rectangular Marquee tool by pressing the M key and drag out a nice square for the icon’s background. (*note: By holding the Shift key while you drag you can constrain your selection to a perfect square.) My square is 210×210 pixels.

Step 3

Press the D key to reset the foreground and background colors to black and white, then fill the selection with black by pressing Option-Delete (PC: Alt-Backspace).
Deselect by pressing Command-D (PC: Ctrl-D) and lock the layers transparency by clicking the Lock Layer Transparency button at the top of the layers palette.

Step 4

Lets go ahead and setup for the blue background gradient by changing the foreground color to #0b88cb and the background color to #004068.
Press the G key to choose the Gradient tool, then from the options bar across the top choose Foreground to Background from the color picker and Radial Gradient for the gradient type. Now simply click a spot in the upper left hand corner of the box and drag at a 45 degree angle toward the bottom left corner to create a gradient that looks similar to the example.

Step 5

Now we’ll add a drop shadow to the layer by Right-Clicking (Mac: Control-Click) on the layer and choose Blending Options. Click on the Drop Shadow link in the left column and add the following settings then click OK.

Step 6

Your file should now look something like the one below.

Step 7

Press the T key to call up the Text tool and lets go ahead and add our text with the following settings.

Step 8

The text also has a slight gradient but instead of using the gradient tool directly we are going to use the layer style called Gradient Overlay as shown below.
Before I called up the Layer Styles dialog box though, I changed my foreground color to #d6dfe5 so that it would already be there for the layer style application.

Step 9

Technically now we are finished as far as a correctly built PS3 icon. I thought for my icon I’d add a Web2.0 style gradient and rounded corners to add a nice little touch which you will find in the .PSD file available for download at the bottom of the lesson.

Step 10

Try all the variations or make up your own and enjoy!

Create a Button iN Photoshop

Step 1

Create a new document size 750px * 400px (size doesn’t really matter here) and fill this background layer with White. Create a new layer on top of the background layer called “gradient”, grab the Gradient Tool from the toolbox and fill it as shown below:

I decide to use this light gradient because it’s easier to demonstrate several important points in the next few steps. You can of course try out darker ones.

Step 2

Let’s type some text on the canvas. I used this font because I personally feel it’s a very clean and bold font, which you can use for a wide range of headings, or descriptive text.
So type some sample text on the canvas as shown below: (use a slightly darker colour for font colour)

Appy the following layer blending option to the text layer:
Inner Shadow

Stroke

And you will have the following effect to the text layer:

See, that’s our embossing text effect done. Very simple, yet effective.

Step 3

Ok let’s get on with creating the call-to-action button. Use the Rounded Rectangular Tool with a 7px radius, draw a button on the canvas as shown below: (Make shape you select “shape layers” on top option bar)


Apply the following layer blending effect to this button:
Bevel and Emboss

Gradient Overlay

With the Gradient Colour, apply the following settings:
Location 0% – Color: #0083be
Location 99% – Color: #31c8fa
Location 100% – Color: #FFFFFF

Stroke

And you will have the following effect:

Step 4

Now we have a button background, let’s add some symbol onto it so it provides some kinds of graphical meaning. In this case, I decided to make this button a download button. So naturally I thought of a down arrow would mean something to the user.
So grab the Custom shape tool from the toolbox:

and choose the bold arrow from the library as shown below:

Draw an arrow on the position as shown below, rotate it clockwise 90 degree when you done the drawing:

Apply the following layer blending options to the arrow layer:
Drop Shadow

Gradient Overlay

Location 0% – Color: #09c228
Location 100% – Color: #b4ff97

Stroke

You will have the following effect so far:

Step 5

Now we can type some text onto the button:

Apply the following layer blending options to the text layer:
Inner Glow

Gradient Overlay

Stroke

and you will have the following effect:

Step 6

Ok we’re almost done. To spice up the final effect, we can add some light and shadow to the button and text to increase their depth. To do this, create a new layer underneath the button background layer, grab a big soft brush with a dark colour, do a single click on the centre of the canvas:

Use free transform tool to resize it and position it as shown below:

To create a light divider between the text and the button, simply create a new layer on top of the shadow layer, use a big soft brush with white colour, do a single click to the position as shown below:

Again we resize it and fit it to the postion under the text:

and here is the final effect for this tutorial:

Final Thoughts

There are several things I think we need to pay attention to when it comes to making call-to-action buttons:

1. Always try to use fresh, vibrant colour as button background, and make sure the color differs significantly from the rest.
2. Apply gradient to the background creating more depth and make the button stand out
3. Use graphic element and symbol on the button to make it more meaningful to visitors
4. Use Light and shadows to draw user attentions.