You are viewing an old version of this site. Please head over to JanCavan.com to check out the new version.
Speakin' OutHere I share my thoughts, tutorials, freebies
&
inspiration to the design community.

Create a Realistic Grunge Peeling Sticker in Photoshop

[smartads]

Photoshop Tutorial

Since the popularity of the “Web 2.0ish” kind of look has risen, the glossy peeling sticker effect has become a trend in web design along with reflections, gradients, large typefaces, just to name a few. In this Photoshop tutorial, I will be showing you how to create the exact opposite of that – creating a grunge peeling sticker effect in Photoshop. In this tutorial, you will be learning some basic to intermediate techniques which you can make use of in your future designs!

Photoshop Tutorial

Materials Needed:
Ravixx’s 12 Carton Paper Textures from DeviantArt

1. Create a new 157 x 148 document in Photoshop

Photoshop Tutorial

2. Fill the first empty layer with white (#FFFFFF) background using the Paint Bucket Tool (G)

Photoshop Tutorial

Photoshop Tutorial

3. On top of the layer with the layer with the white background, create a new layer. On this new layer, using the Ellipse Tool (U), draw a circle. To create a perfect circle, remember to hold the ALT key pressed while drawing the circle. Make sure Shape Layers is also selected

Photoshop Tutorial

Photoshop Tutorial

Photoshop Tutorial

4. Open 7.jpg texture from the 12 Carton Paper Textures from DeviantArt we downloaded. Resize the texture to 500 x 429. Drag the texture onto our document. Let us just make use of the bottom area of the texture.

Photoshop Tutorial

5. Make sure the texture layer is active. Let us add a selection to the circle we just created by hitting on CTRL/Cmd + Click

Photoshop Tutorial

6. Click on the Mask icon

Photoshop Tutorial

We should now have something like this

Photoshop Tutorial

Upon hitting on the Mask icon, notice a little black square with a white circle appear next to our carton texture layer. This means that our carton texture is being masked. The black area is the concealed area while the area with the white circle is the unconcealed area. Hide the second layer with the circle

Photoshop Tutorial

7. Add a selection to our texture layer by hitting on CTRL/Cmd + Click on the mask. Go to Image > Adjustments > Levels and follow these settings

Photoshop Tutorial

8. Open 10.jpg texture from the 12 Carton Paper Textures we downloaded. Reduce the size of this image to 500 x 213. Drag this texture onto our document. Let us make use of the area on our texture with a lot of creases. Hide this new layer with our second carton texture. Add a rounded selection that’s a bit smaller than our first circle. Show the layer with our second carton texture. Click on the Mask icon. You should now have something like this

Photoshop Tutorial

9. Hit on CTRL/Cmd + Click on the new mask to make a selection

Photoshop Tutorial

Let us add color to this area. Go to Image > Adjustments > Hue/Saturation and apply these settings

Photoshop Tutorial

We should now have something like this

Photoshop Tutorial

10. Select all of the layers we created excluding the background. Right click on these layers and hit on Merge Layers. You should now have two layers – the sticker and the background

11. We will now be creating the fold/dog ears effect. Using the Polygon Lasso Tool (L), create a selection as shown on the image below

Photoshop Tutorial

12. Cut (CTRL/Cmd + X) the paste (CTRL/Cmd + V) it. The fold should now be on a layer separate from the our entire sticker

Photoshop Tutorial

13. Let us transform the position of the fold by hitting on CTRL/Cmd + T and put it in this position

Photoshop Tutorial

14. Let us add depth to our sticker. Go back to our sticker layer and go to Blending Options > Drop Shadow with these settings

Photoshop Tutorial

We should now have a slight drop shadow underneath our sticker just like this

Photoshop Tutorial

15. Now let us also add some depth to our fold. Go back to our fold later and add a selection around it by hitting on CTRL/Cmd + Click on the fold layer.

Photoshop Tutorial

16. Create a new layer below our fold and fill it with black (#000000) background by using the Gradient Tool (G). We are now creating the drop shadow. The reason why we are not using the Drop Shadow settings under the Blending Options Tool is because we will need to do some slight erasures to this drop shadow without affecting our fold. Go to Filter > Blur > Gaussian Blur and apply these settings

Photoshop Tutorial

17. Using an ordinary feathered brush with around 30px diameter, erase off the blue areas as shown on the image below

Photoshop Tutorial

18. Change the Opacity of this layer to 58%

Photoshop Tutorial

19. Let us go back to our fold layer and remove the red area. This is to make the fold area look like the back of the sticker. Add a selection to our fold layer by hitting on CTRL/Cmd + Click. Using the Clone Stamp Tool (S), cover up the red areas

Photoshop Tutorial

20. Once we are done covering up the red areas, we should now have something like this

Photoshop Tutorial

We now have a Realistic Grunge Peeling Sticker!

Photoshop Tutorial

You can add some text and finishing touches to make your sticker look prettier!

Photoshop Tutorial

No matter you want to achieve avaya certification or interested in a+ certification, our online training helps you to pass your ase certification in easy and fast way.

BTW: Excellent Online Sticker Printing Services at PsPrint.com

Comments

Dainis Graveris

really great and simple tutorial! loving it!

Prakeet

WOW Grrrrreeeaaattttt tutorial! It looks very realistic indeed!

Callum Chapman

That’s a great tutorial with an excellent outcome – newest blog in my feed reader!

iLovePurple

Nice step by step tutorial i will try this later

Ajay

Awesome tutorial , thanks for sharing.

Designer Store

Nice Post!!

Thanks for posting good informative posts.

Bendesign

Nice. Thank you.

Jan Cavan

Thanks guys, I’m glad you liked the tutorial. Looking forward to posting more tuts soon :)

Tuts King

Ah. Very Nice and Grungy!

Zashkaser

I bookmarked this link. Thank you for good job!

LenaShopogolik

Thanks for writing, I very much liked your newest post. I think you should post more frequently, you evidently have natural ability for blogging!

Jason

That’s awesome, great post.

Sdanektir

Hi, interest post. I’ll write you later about few questions!

Vivalkakira

Just wanted to say HI. I found your blog a few days ago on Technorati and have been reading it over the past few days.

Jan Cavan

Big thanks to everyone! If you have tutorial suggestions, feel free to post a comment :)

TheUglyVector

Wicked… quite informative

Arsento

Great tutorial! Great! great great!

VitalikGromovss

I love it! That is way cool man! The steps weren’t that complicated too, which is great.

luke

Luv it!

Dmitri Fitzgerald

Fabulous!

Rishita Nakum

Simply awesome !

Phaoloo

Always love simple tip. Keep it up :)

znak

Thanks for post

my name is Al

AWSOMENESS!!!!!

Roo

Thank for this tutorial

coop

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

Corey

Really good tut

optura

It is the coolest site, keep so

raincity

u r godsent dude.. THANKS

Jarod Taylor

Good quality tutorial, Jan. The outcome is nice, and you explained it well.

desert

Thanks a bunch for this!

Bill Bartmann

Excellent site, keep up the good work

Jan Cavan

Huge thanks again everyone! :)

creativekai

Nice tuts! thanks..

Bill Bartmann

This site rocks!

Bill Bartmann

Great site…keep up the good work.

Martin

This tutor really rocks!

Michael Thomas

That is a classic sticker effect, I am getting really board of the whole web 2.0 look, I think the grunge look is brilliant. I know you could not use this on many sites at the moment but I can see where it can be used!

semmy@ web 2.0 images

Nice post! Really Love it! thank you very much!

MaGiK

Dude…this is amazing :) thx very much

Toya

How do I create a glossy peel sticker?

Jan Cavan

Very happy you like this tut everyone! Thank you!

@Toya: The glossy peeling sticker effect is actually very common and I’ve come across a couple of sites offering this tutorial. One sample is this http://bit.ly/10U7IK. Hope this helps!

Toya

@Jan thanks so much.

Me

I’m stuck on step 5. When I CTRL + Click on the texture layer it brings up the circle but it switches to the layer with “Shape 1″ in it. Then I hit the mask button and it adds a mask layer to the same layer that “Shape 1″ is on. Please help!

Jan Cavan

@Me: Great to hear you are trying out the tutorial :) Anyway, just make sure the Texture layer is active. Then hit on CTRL + Click on the layer with the circle on it and once you see the selection, hit on the Mask icon. While doing these steps, make sure the Texture layer is the active one. Do not switch to another layer.

Hope this helps! Just post a reply if you have any more questions :)

Russell

Another brilliant tutorial, thank you!

Andy Feliciotti

Way better then the other peeling sticker tutorials, thanks!

sayan mukherjee

nice tutoria, great help!

Jonny

Thanks for your course, i am a photoshop newbie.

indika anuruddha

this is great tute.
thank you. i learnt new technologies from it.

Chris

neat tutorial

wondwosen

best

mahesh

nice tut

1mr3yn

Great Tutorial, i will use this in our website,, thanks man!

Laura Varon

This is my 7th StumbleUpon discovery! It was too awesome not to spread the word! Thank you for posting :)

MarkP

Nice tutorial. thanks

Lime Web Design

Awesome step by step. Really good work

Andrew

What is the font you used on the dawg house sticker?

jas

im stuck at step 5! the texture layer is active, but it keeps switching to the shape 1 layer every time i try to bring up the selection (CTRL + click)

Jan Cavan

@jas Make sure the texture layer is active or selected then CTRL/CMD + Click the circle which is on another layer.

Hope this helps! Let me know if you still have questions.

jas

thanks for replying! yes, the texture layer is active. and when i press CTRL + click, it brings up the selection, but then it goes back to the ‘shape 1′ layer. :(

Jan Cavan

@jas When you CTRL/CMD + Click the circle, make sure you click on the layer thumbnail. The layer thumbnail near the “eye” icon.