July 23, 2017

Create Your Own Social Icon Stickers

In this tutorial I will run you through some simple steps to create some social networking icon stickers you can use on a website or any other project you want to use them for.

First download this crinkle paper texture

Now open a new document 300X300px in photoshop

Create a new layer and choose your ellipse shape tool.

Now create a circle in the middle of the canvas any color you want.

Now I am going to make it a bluish color, similar to the twitter color blue. To do this go to your blending options on the layer

Go to color overlay and type in the color #33ccff

Once you made that blue open your crinkle paper image.

Now drag it into your canvas above your circle.

Once you drag that in, turn the opacity of the crinkle paper down to about 65% so you can see the blue circle behind it. I am doing this so I can move the crinkle paper around to see which part I want to go on the sticker.

After you figure out what part you want on your sticker turn the opacity back down. Now I am going to hold down ctrl on my keyboard and click the preview icon beside the circle layer so it will create a selection in the shape of the circle.

If you do that correctly you will see a selection made in the shape of your circle layer.

Now just hit ctrl+x and ctrl+v to cut the part out of the crinkle paper and paste it back on the canvas. You can delete the excess layer after that.

After that set the layer to overlay

Once that is complete we can start creating the peeled aprt of the sticker.

I always like to have back-ups of whatever I am doing so I am going to duplicate the two layers I have and hide the other 2.

Now the two layers that are still highlighted, merge them together by right clicking on the two layers in your layer palette and choosing, “merge layers”.

Before we move on to the peeled part of the sticker I am going to add a little touch to make the sticker stand out a bit more. I am just going to create 2 different colored lines around the circle.

First I will create a red circle the same way I created the circle in the
first step.

Once I have done that, I want to cut out the middle so there is just a line around the circle. There is a cool little trick in photoshop to help out in this situation.

Use the ctrl+click technique on the preview icon like we did earlier to create a selection around the red circle.

Now go to select>>modify>>contract

And contract it by 5 pixels

Now just hit delete on your keyboard and you have a nice little line.

Now in a new layer above that create a black circle and contract it by 8.

Now set both of those layers to soft light for a nice touch.

You can even duplicate the two layers for more of the effect.

Now make a backup of those two layers if you like and merge the others with your crinkled circle so it is all one layer.

Now its time to create the peeled part of the sticker.

First duplicate your current sticker so you have a backup.

Now grab your polygon lasso tool

Make a selection around the bottom right side of the sticker similar to this:

Now cut it and paste it back in the document

Now with that cut off layer chosen hit ctrl+t on your keyboard to transform the object then right click on the canvas. Choose rotate 180 degrees

Now move that up on the sticker

Use the ctrl+click technique on the preview image to create a selection in the shape of the cut out you just made. Then create a new layer above that and fill it with white.

Now grab your burn tool. This will be how we give the peeled back part some life.

Set its Range to Highlights and its Exposure to around 78%.

Now burn in these areas I will show you in the next image. I am going to use a 65px soft brush.

And now mine looks like this

Keep the selection there if it went away just ctrl+click again to get it to come back. Now unhide the crinkle paper layer, click on it and copy and paste the selection from it and drag it up to the top layer.

Once you do that set the layer to overlay and hit ctrl+shift+u to make it black and white.

This just gives a little dirty effect on the back of the sticker.

Now time to add a few shadows. Click back on your main sticker and add this outer glow


That will just add a subtle shadow

To add a shadow under the sticker peel, use the ctrl+click technique again to make a selection in the shape and underneath fill it with black.

Then add a gaussian blur to it by going to filter>>blur>>gaussian blur.

I did about a 4.5 gaussian blur level and then dropped the opacity on the shadow
to 45%.

Now I will add the twitter “T” with my text tool. I downloaded twitter font called PicoBlackAI just search for it on the web and you can find it in various places.

Here are the settings I added to the font to make it look like the twitter
logo colors.

Color Overlay


Here is my font

The last touch I want to make is actually make the text look like it is part of the sticker, so you can see the crinkled look on the letter too.

Use the same method we did before except ctrl+click the text preview icon and copy and paste part of the crinkle paper over it, setting its blending mode to multiply and the opacity to around 45%.

Here is my final twitter icon

And here are other icons I made with this same method

Thanks for reading!

John Overbee
About John Overbee 40 Articles
John Overbee is a graphic designer for the iEntry Network.