PS Tips #2: Using Torn Edge Sticker Rocks

April 1, 2012 · 1 comment

by Lars


I’m not sure if you have noticed it? There are quite a lot of designs recently that involve sticker style one way or the other. To be honest I like it a lot and especially torn edge sticker rock I think. This design element may not fit in everywhere but even non-grunge designs may benefit from highlighting key elements with torn edge sticker design. The idea is to give the element a style that looks like it was quickly pulled or cut out of a paper. In this PS Tip I will show you a few examples of Torn Edge Sticker designs and then give you detailed instructions for creating them yourself.



Let me start out by showing you just a few cool examples I have stumbled upon recently.

PayLane Facebook Timeline


Shoot Many Robots – (2nd intro video)


How you can create Torn Edge Sticker border yourself

Materials used:

I picked up an image at as you can find skock images for free here. The original can be found here. Keep in mind that a Torn Egde Sticker border can be used on text, vectors and icons easily and with great results. It does not have to be a photo as used below.


The new background is also a file I found on Get it here.


Removing the background

Lets start with removing the background from the photo and make it transparent. This is needed to apply a sticker to the girl only. This image is pretty simple to process but the long hair is a bit tricky. Before you master this technique completely you are recommended to choose images with simple backgrounds (just as I did here).

Start using the Quick selection tool either on the element you want to use or on the background. In this case I would do it on the bacground and invert the selection afterwards.


Once this is done you may have a few selection areas that are not perfect. E.g. the hair is a bit selected and we would loose this if not corrected.


Next we will use the Refine Edge function but first invert the selection (Select->Invert) to make sure it is the girl you have in your selection.


When turning on Refine edges this is what you should see.


Enable Smart Radius and set it to e.g. 7,5 px.


Now you simply draw over the colors you want to cut out. You may under view choose, varius ways to show the mask – here you see overlay.


Once you are happy with the result choose output to “New Layer With Layer Mask”. While not perfect you can see the hair is a lot better preserved now. If you want to make this even more perfect I recommend this video tutorial from Adobe. If you master this process you can cut out more or less anything in matter of minutes.


The resulting layer look like this.


Adding the Torn Sticker Edge

Before starting making any changed you should make a duplicate of the layer you applied the Layer mask to (Layer->Duplicate Layer…”). Call this new layer Torn Edge Sticker.


Then on this layer first convert to Smart Object (Layer->Smart Objects->Convert to Smart Object). Then Rasterize the Layer (Layer->Rasterize–>Smart Object).

Now we want to select the girl. You should be able to use Selection->Load Selection and choose the transparent channel.


Then lets expand the selection using Select->Modify->Expand. You can vary the expand value to get different results, but lets start with 9 pixels. The larger you make this the more sticker you will get around the object.

Then fill the selection with white (Edit->Fill) – make sure white is selected as background color and then fill with background.


Now set the quick mask to the current selection.


You now have sticker area selected as a mask and next you will apply the following effects from the filter Filter Gallery (Filter->Filter Gallery).


Keep in mind that the order is very important here!

Cut out

  • Number of levels: 2
  • Edge simplicity: 4
  • Edge Fidility: 1

Palette Knife

  • Stroke Size: 18
  • Stroke detail: 3
  • Softness: 0

Stained Glass

  • Cell Size: 9
  • Broder Thinkness: 4
  • Light Intensity: 0

Paint Daubs

  • Brush size to 50
  • Sharpness to 8
  • Brush Type: Simple

Once applied you have a new selection with a torn edge look. Fill the selection with white. If you add the background you can now see the effect. If you like you can add some drop shadow the the layer with the torn edge, but this is best on a lighter background.


This is it. Hope you liked this PS Tip and that you will leave a comment and share it with people you know.

Too lazy for this? Use pre-made actions

I found an action set on that pretty much does all of this in one simple step. It have 6 actions with different types of torn edge borders. Check it out here. It is $4 only so worh giving a try if you need some stickers designed fast. I have tested it myself and it works as expected. Only problem with not learning it yourself is the situation where you would like to have the sticker broader, more torn etc…


Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

{ 1 comment… read it below or add one }

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous post:

Next post:

Web Analytics