23Nov
2007

Creating a Realistic Peelable Sticker Effect in Fireworks

Posted in Effects by Lucian

A tutorial which will give you step-by-step instructions to create a peeling effect. Great for placing in a corner of a website to reveal news or offers.


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.

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.

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.

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.

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:

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.

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.

Share this:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Technorati
  • blogmarks
  • SphereIt
  • Reddit
  • Furl
  • StumbleUpon
  • NewsVine
  • TailRank
  • Fark
  • Spurl
  • MisterWong
  • Slashdot
  • Ma.gnolia

33 comments

  1. Gravatar Dino says:

    I use fireworks in web layouts too. That is a great technique man!

  2. Gravatar Lucian says:

    thanks a lot man :D

  3. Gravatar Matt Radel says:

    Great tuts! Keep it up!

  4. Gravatar Justin says:

    Thank you, Matt. Enjoy!

  5. Gravatar Corey Dutson says:

    Wow! That’s a really solid end product, and with such a simple execution. Good Job!

  6. Gravatar Lucian says:

    Thank you, Corey.

  7. Gravatar Aarpm says:

    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

  8. Gravatar Hammad says:

    Nice… you are good…

  9. Gravatar Abdul Aziz says:

    Great work maan!!!…. great thinking…. Thanks a lot…

  10. Gravatar Grebzta says:

    Excellent work. Love the look. I’ve been stumped for a while on getting the right effect. Thanks for helpin me out!

  11. Gravatar Salva says:

    It looks great!

  12. Gravatar Lucian says:

    Thanks a lot guys.

  13. Gravatar minikperi says:

    Great tutorial. i realy liked it. And Aarpm for your question : you can animate with Adobe Flash.

  14. Gravatar Joefrey Mahusay says:

    Really nice tut

  15. Gravatar Fireworksのチュートリアルいろいろ - DesignWalker says:

    [...] Creating a Realistic Peelable Sticker Effect in Fireworks [...]

  16. Gravatar cool8jay says:

    Nice tutorial!
    I’ll try it immediately.

  17. Gravatar Zeezat says:

    That’s a great tute…

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

    It rocks.. Keep growing…

    Thanks a lot man..

  18. Gravatar Tutorial para crear stickers con Fireworks | frogx.three says:

    [...] Enlace: Firetuts, Tutorial Creating a realistic peelable sticker effect with Fireworks [...]

  19. Gravatar Antonio says:

    great tutorial and easy to understand. thanks

  20. Gravatar Real Tutorials Collected! » Blog Archive » Creating a Realistic Peelable Sticker Effect in Fireworks says:

    [...] Read More [...]

  21. Gravatar Micheal says:

    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

  22. Gravatar Vijayendra says:

    Great work!! Keep going.. :)

  23. Gravatar Tokuzoh says:

    とっても素晴しい。。 頑張ってよ!!!

  24. Gravatar Daniel says:

    @Micheal
    click and drag to create anchor points, press and hold Ctrl and click a few times to remove one

  25. Gravatar Stephane says:

    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

  26. Gravatar Designfeed.me » 40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files says:

    [...] Download .PNG file is available [...]

  27. Gravatar Vlood says:

    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.

  28. Gravatar Keith D says:

    Clever…

    And the effect is stunning.

    Not tried it yet but I will soon.

    Thanks for showing us how.

    Keith D

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

    [...] Download .PNG file is available [...]

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

    [...] ■チュートリアル元記事 Creating a Realistic Peelable Sticker Effect in Fireworks ↑ が実際につくってみたもの。 [...]

  31. Gravatar Logan Rincan says:

    marvelous details thanx

  32. Gravatar 70+ Adobe Fireworks Resources – Is there a future for Fireworks? - Speckyboy Design Magazine says:

    [...] Creating a Realistic Peelable Sticker Effect in Fireworks [...]

  33. Gravatar education info says:

    I’m continuing the dialogue with a parallel blog post.

Leave a Reply