Calvin’s Hub

The sticker peel-off is a commonly effect used in badges that you’ve probably seen already in some web 2.0 sites. You can use this effect on Twitter or RSS badges, version number of a site or a product… here are some samples to further illustrate.

I’m going to show you how to create this simple yet cool effect using Fireworks. I will be using Adobe Fireworks CS3 but other versions will work. Here we go:

1. For my example, I’m going to use a rounded rectangle vector which is a special vector.

2. Since this one’s a special vector, we need to convert it to a simple one. Select your object and go to Modify > Combine Paths > Join (Ctrl+Shift+J).

For simple shapes such as rectangle, ellipse and polygon, you can skip this step.

3. Select your Knife tool (Y) and slice a piece of your shape from one corner. Any corner will do but I’m going to slice on the lower right.

4. Change the color of the cut part to see it properly. I’m going to change it to white.

5.  Now what you want to do is flip the cut portion and position it properly. This procedure varies with different shapes but for this rectangle, all I need to do is select the cut part and  flip it horizontally then vertically. Modify > Transform > Flip Horizontal then Flip Vertical.

That’s basically it. But it looks dull right? You can style it in many different ways but here’s one way.

Styling

6. Let’s add a drop shadow first. Add Filters > select Drop Shadow. Change the distance to 3 and the angle to 200. The angle will differ depending on what corner you’re peeling it from.

Adding this drop shadow will highlight the cut portion of your object.

7. Next thing you could do is add a linear gradient on the cut portion. You would want a white to gray gradient with the darkest color on the outer part of your cut portion.

8. Just like stickers, you may also want to put a white outline on your object. Select the blue area and convert it into a simple shape same as in Step 2(Ctrl-Shift-J).

9. Then add your outline. I’m going to put a white 4 pt stroke.

10. It is important that the stroke should be set inside the path.

11. You can also add a Drop Shadow on your object. It should have the same settings as that of your cut portion (Step 6).

12. Bring the blue area back behind the cut portion and you’re all set! Modify > Arrange > Send Backward (Ctrl+Down).

That’s it. The rest is up to you. I’m going to put some gradient and text to complete my sticker. Now go ahead and try it with other shapes!

Hope you enjoyed this simple tutorial. Let me know if something’s not clear. Click here for my other tutorials using Fireworks.

You might also be interested in:

• How to Create Sunbursts Using Fireworks
• Creating a Web 2.0 Glossy Text Effect in Fireworks
• How to create flowchart arrows in Fireworks
• Creating the “reflection” effect in Fireworks

Filed under: Fireworks Tutorials