2007
Creating a Realistic Peelable Sticker Effect in Fireworks
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.
Loading ...
November 26th, 2007 at 6:43 am
I use fireworks in web layouts too. That is a great technique man!
November 26th, 2007 at 4:42 pm
thanks a lot man
November 28th, 2007 at 2:53 pm
Great tuts! Keep it up!
November 28th, 2007 at 11:52 pm
Thank you, Matt. Enjoy!
December 2nd, 2007 at 6:58 pm
Wow! That’s a really solid end product, and with such a simple execution. Good Job!
December 3rd, 2007 at 3:44 pm
Thank you, Corey.
December 11th, 2007 at 7:14 am
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
January 17th, 2008 at 10:03 pm
Nice… you are good…
February 5th, 2008 at 1:23 am
Great work maan!!!…. great thinking…. Thanks a lot…
February 8th, 2008 at 2:48 pm
Excellent work. Love the look. I’ve been stumped for a while on getting the right effect. Thanks for helpin me out!
March 27th, 2008 at 6:51 am
It looks great!
March 27th, 2008 at 2:47 pm
Thanks a lot guys.
March 28th, 2008 at 5:00 pm
Great tutorial. i realy liked it. And Aarpm for your question : you can animate with Adobe Flash.
April 8th, 2008 at 9:27 pm
Really nice tut
April 22nd, 2008 at 6:19 am
[...] Creating a Realistic Peelable Sticker Effect in Fireworks [...]
April 23rd, 2008 at 12:56 pm
Nice tutorial!
I’ll try it immediately.
May 5th, 2008 at 6:44 am
That’s a great tute…
I really enjoyed in doing those steps with my favorite Fireworks.
It rocks.. Keep growing…
Thanks a lot man..
May 8th, 2008 at 3:33 am
[...] Enlace: Firetuts, Tutorial Creating a realistic peelable sticker effect with Fireworks [...]
May 8th, 2008 at 3:50 am
great tutorial and easy to understand. thanks
July 12th, 2008 at 12:28 pm
[...] Read More [...]
September 27th, 2008 at 2:01 am
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
October 14th, 2008 at 5:45 am
Great work!! Keep going..
November 2nd, 2008 at 2:19 am
とっても素晴しい。。 頑張ってよ！！！
November 5th, 2008 at 7:40 pm
@Micheal
click and drag to create anchor points, press and hold Ctrl and click a few times to remove one
March 19th, 2009 at 3:09 pm
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
March 31st, 2009 at 11:20 pm
[...] Download .PNG file is available [...]
April 1st, 2009 at 1:47 pm
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.
April 17th, 2009 at 10:45 am
Clever…
And the effect is stunning.
Not tried it yet but I will soon.
Thanks for showing us how.
Keith D
November 11th, 2009 at 6:35 pm
[...] Download .PNG file is available [...]
December 13th, 2009 at 1:39 pm
[...] ■チュートリアル元記事 Creating a Realistic Peelable Sticker Effect in Fireworks ↑ が実際につくってみたもの。 [...]
March 10th, 2010 at 11:39 am
marvelous details thanx
May 20th, 2010 at 9:43 am
[...] Creating a Realistic Peelable Sticker Effect in Fireworks [...]
June 22nd, 2010 at 10:45 am
I’m continuing the dialogue with a parallel blog post.