Creating a Web Sticker Photoshop Tutorial

Hey

This is just going to be a quick tutorial to show you how to create a sticker with text. For this tutorial you will need Photoshop and a couple of minutes spare. With any of the images you can click them to see the full sizes.

The first step is to set the size of you canvas. I'm going to pick a 500 x 500 pixel canvas which will give me plenty of room.

Creating a Web Sticker Photoshop Tutorial
You are going to need a colour for the circle that you are going to draw in a minute. I suggest you pick a pastel blue, although you can pick any colour you want.

Creating a Web Sticker Photoshop Tutorial
Draw your circle on you page. You are going to need to leave a little space in one of the corners for the over lap that you are going to create.

Creating a Web Sticker Photoshop Tutorial
You now need to use the polygon lasso tool. This is used to create a straight line cutting across on parts of the circle.

Creating a Web Sticker Photoshop Tutorial
As you can see in the image below use the lasso tool to cut across the circle. Finish the selection in the white space.

Creating a Web Sticker Photoshop Tutorial
One thing that you will need to make sure that you do is to change the background layer into a normal layer.

Creating a Web Sticker Photoshop Tutorial
Creating a Web Sticker Photoshop Tutorial
When I was doing this I did it in a wrong sort of order. What you need to do is remove the white on the page with the magic wand tool. The move the small cut away from the main circle.

Creating a Web Sticker Photoshop Tutorial
You now have to parts. The smaller part of the circle is going to be coloured in a grey shade of blue.

Creating a Web Sticker Photoshop Tutorial
For colouring the back of the sticker you need to pick a grey colour and then just move the pointer in to the blue area just a little bit. This is to simulate the blue going through the sticker.

Creating a Web Sticker Photoshop Tutorial
Colour the small cut off bit in the colour you want.

Creating a Web Sticker Photoshop Tutorial
You need to take you time in this part of the tutorial. You need to rotate, flip and what not so the two edges line up perfectly. The better you line it up the better the final sticker will be.

Creating a Web Sticker Photoshop Tutorial
Here you just need to add a small drop shadow underneath the cut off and add a small gradient overlay to the sticker front. For the sticker front use the gradient over lay style, pick the base colour and a slightly dark colour in the gradient. Rotate the overlay using the small circle thing to line up the shadow. Fiddle about with the other sliders to get the perfect effect.

Creating a Web Sticker Photoshop Tutorial
Just for effect no sticker would be finished without some text. I've use Trebuchet MS and added the bold effect to the number 3. You need to put the text layer underneath the folded over layer.

Creating a Web Sticker Photoshop Tutorial
Crop your canvas as needed.

Creating a Web Sticker Photoshop Tutorial
Add you background colour or save it out as a .png and you are done.

Creating a Web Sticker Photoshop Tutorial
For a sticker that you can use on any website or application the effect doesn't look half bad and it doesn't take that long.


1 comments:

Anonymous said...

it's seems easy , i'll try it with other color :) thnks