Creating a Realistic Peelable Sticker Effect in Fireworks

Posted in Resources > Illustration by Lucian

The tutorial will give you a step-by-step instructions on how to create a peelable sticker effect, great for placing in a corner of a website to reveal news or offers.

Getting started with our peelable sticker effect

1. Create a rounded rectangle having the same color as the background. Apply to it an outline of any other color. This will be our sticker.

peelable sticker effect

2. Duplicate the sticker and change the color of the copy to anything you want. This will be the surface underneath the stiker, in other words, place its layer below the sticker’s layer.

peelable sticker effect

3. Duplicate the sticker one more time. We will change its color later on. This will be the back of the sticker. Place its layer between the Sticker and Surface layer.

NOTE: No change of position should be done during this tutorial.

4. Now that we have what we need, it’s time to modify the paths. Select the sticker and ungroup it to make it a changable path, taking away it’s custom shape properties (yellow adjustbale dots). Good! Now using the Subselection tool (White arrow) sub-select the sticker so it has a blue outline and white dots at intersections. With the sticker sub-selected, switch to the pen tool. Add two extra points as shown bellow (.a). Change the position of the dots and anchors to create something similar to the illustration below.

peelable sticker effect

5. Now let’s modify the back of the sticker. For an easier approach, make the Sticker layer invisible by clicking on the eye next to it. As done in the previous step, ungroup the rectangle representing the back of the sticker and select it using the Subselection tool. Add two more points at the same location as those added to the Sticker (.a). Delete the the two points that create the rounded corner and insert one instead as shown below.

peelable sticker effect

6. We are now done with modifying paths. Let’s add color. Select the sticker and change it’s fill type from Solid to Gradient. One of the sides of the gradient should be the color of the background, while the other should be a darker shade to simulate shadow. This is shown below:

peelable sticker effect

7. Change the color of the back of the sticker to white. Add a Inner Shadow effect with the following values: distance-4, opacity-30%, softness-30, angle-315 degrees.

peelable sticker effect

8. Select the rectangle representing the Surface and add an Inner Shadow with the following values: distance-1, opacity-30%, softness-2, angle-315 degrees.

9. Change colors and add text however your heart wants.

peelable sticker effect

Author: Firetuts.com

Website: firetuts.com

Get Source
There're 34 comments for this post.
  1. Hey, Great Tutorial, but one thing how do you get the effect so when you press “Peel Here” it actually looks like it is peeling.

    Thanks

    Aaron

  2. Pingback: Fireworksのチュートリアルいろいろ - DesignWalker

  3. That’s a great tute…

    I really enjoyed in doing those steps with my favorite Fireworks.

    It rocks.. Keep growing…

    Thanks a lot man..

  4. Pingback: Tutorial para crear stickers con Fireworks | frogx.three

  5. Pingback: Real Tutorials Collected! » Blog Archive » Creating a Realistic Peelable Sticker Effect in Fireworks

  6. This is a great tutorial! I just have one thing I need help with. When you put the points in with the pen tool, how do you get the anchor points. When I put the dot in, It doesn’t have anchor points.

    Thanks, Micheal

  7. Stephane on said:

    Hi there excellent tutorial. can you explain how you get the anchor points? When I add points I do not get the handles as you do. Regards

  8. Pingback: Designfeed.me » 40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files

  9. Vlood on said:

    Hello!

    I got stuck here: >>Now using the Subselection tool (White arrow) sub-select the sticker so it has a blue outline and white dots at intersections. With the sticker sub-selected, switch to the pen tool. Add two extra points as shown bellow (.a). Change the position of the dots and anchors to create something similar to the illustration below

    It doesn’t look like you described, after Sub-selection tool. And i couldn’t bend that upper left corner so elegantly like i looks here.

  10. Pingback: 34 High Quality Adobe Fireworks Tutorials and PNGs « 68Design – (68ds.com) Creative Design Transmitor

  11. Pingback: 【005】Fireworksのチュートリアルをしてみる | 新米WEB家ブログ|Muracchi.com

  12. Pingback: 70+ Adobe Fireworks Resources – Is there a future for Fireworks? - Speckyboy Design Magazine