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