Floating City

Trendy Sticker Tutorial

Jan 28 2009 Tutorials

A sticker can easily generate focus on specific content for websites and graphic design projects. This tutorial will equip you with the ability to quickly create a fancy sticker with interchangeable colors for multiple uses.

Throughout this tutorial I'm going to show you several basic and advanced Photoshop techniques. These are extremely applicable for a variety of designs you might create in the future.

Note: All terms in bold with a key listed at the end are a shortcut key. To use the shortcut simply push the key at the end (it will save you a ton of time). For example New Document (Ctrl+N) indicated that pushing ctrl+n on your keyboard will immediately activate that function.

Tutorial Files:

• Finished Photoshop File
• Finished sticker in PNG format (no text)

Step 1

Start out by creating a New Document (Ctrl+N) in Photoshop by going to File>New. For the width and height many people set the sticker size slightly larger than what they'll be using. Problem is our sticker will become grainy if we have to increase the size later. A good rule of thumb is to always set the size for reusable images much larger then needed. Set the Width and Height to 500px.

Step 2

Set the color to #2a2a2a. Select the Ellipse Tool (U) and draw a circle in the middle while holding down Shift. Don't worry about centering it perfectly; it can be off a little.

Before we forget, rename the circle layer as base by going to Layer>Layer Properties or double click on the layer's name. Get into the habit of renaming layers, it might seem insignificant doing this now, but if you're not in the habit, you'll accidentally find yourself wading through a 100+ layers and have no idea what is what (trust me, I've done it before).

Step 3

To add style to our new layer, select the base layer and choose Layer>Layer Style>Blending Options or simply double click the layer in the Layers window. For Inner Glow set the opacity to 100%, color #494949, choke 29%, and size 70px.

Seems a bit bland, but I think a border will help (a contrasting border can add more emphasis). For the Stroke style set the size to 17px, position inside, and color #b8b8b8.

Step 4

We're going to duplicate the base layer and save it for latter. Choose the base layer and Layer>Duplicate Layer or right click the layer and choose duplicate layer. Make sure that you hide the original base layer and background layer for the next step. With our new layer base copy selected, go to Layer>Rasterize>Layer. This will change our layer from a vector based image to a flattened image. Then create a new layer by selecting Layer>New>Layer (Ctrl+Shift+N). Don't worry about naming our new blank layer because it won't be around more then a few seconds.

Now we need to group our visible images and flatten their styles by going to Layer>Merge Visible (Ctrl+Shift+E). This will cement the styles added earlier and allow us to manipulate the image without the current styles giving us problems. Rename the new layer sticker base and turn the visibility of the background layer back on.

Step 5

Now we can do some damage to our sticker with the Polygonal Lasso Tool (L) with these settings... new selection, feather 0px, and anti-alias checked.

With the sticker base layer selected, draw a line through and around one corner (red added for emphasis).

Then use Edit>Cut (Ctrl+X), followed by Edit>Paste (Ctrl+V) to drop the new layer. Name the new layer corner.

Step 6

If your version of Photoshop has the snap feature, go to View>Snap to turn it on. Line up your corner layer where it was originally cut from, then choose Edit>Transform>Rotate 180 to flip the corner. Make sure your corner is lined up as best as possible; otherwise the next step won't work. You might have to use Zoom (Z) and position this manually if you don't have the snap feature.

Step 7

Drop some Text (T) on your sticker and use the Move (M) tool to give it an angle for more interest. These are the settings I used for my text in the Character and Paragraph window, font Verdana, size 75pt, leading 90pt, tracking 50, color #f2f2f2, and center text in the paragraph window (these setting may vary depending on specific sticker size).

Now is a good time to use the move tool to realign the corner and sticker base. To do so, select both and use the move tool to rotate them. You'll want to position the sticker in a way that it doesn't get in the way of your text too much.

Step 8

Now we're going to style that sticker! Double click on the corner layer and adjust the Drop Shadow to color #464646, no global lighting, -45 degrees, opacity 87%, distance 5px, spread 3%, and size 18px.

Select the sticker text and set the Outer Glow to blend mode normal, opacity 50%, color #f2f2f2, and size 46px. Select the corner, sticker text, and sticker base layers, then right click one of the layers and choose Convert to Smart Object. Rename the new layer sticker.

Should look something like this now.

Step 9

Select your new sticker layer and go to Edit>Transform>Warp and bend the bottom right corner slightly to make the sticker look more realistic. Make sure you bend from the actual sticker's corner and not where the grid appears.

To add a final touch, double click the sticker layer and add a Drop Shadow with these settings, color #464646, no global lighting, angle 98, distance 17px, spread 0, and size 7px. You may have to tweak the angle, distance, and size here depending on what your shadow looks like. Also the bigger the shadow the more the sticker looks like its peeling.

Great looking sticker! You can now save it as a .png or drag and drop the sticker layer onto any project now. If you want to create another sticker with different coloring, simply start from the base copy that we saved and adjust the colors. You'll need to start from step 4 then to create another. Feel free to experiment with creating your own designs.

Author: Charles Brindle