Peeling stickers and page curls are a very popular Web 2.0 style that make your images look like their coming off of the screen!

Creating Peeling Stickers and Page Curls

Using Adobe Fireworks we’re going to show you have easy it is to make peeling stickers and this technique can be used in the exact same way for making page curls too! In this tutorial we’ll cover linear fill options, the subselection tool and the slice tool - it’s that easy!

1. Begin by holding down your mouse over the rectangle tool and selecting ‘elipse tool’ . Then draw a circle shape onto your canvas. For a perfect circle hold down Shift on your keyboard whilst dragging the circle shape to keep it in ratio. We’ve made ours 150px x 150px.

2. Now select the subselection tool and click on your newly created circle. You should now see 4 vector points with the outline of the circle joining those points together. This outline or ‘vector path’ is what determines the shape of our circle which we’re now going to cut using the knife tool to make our peel shape. Select the knife tool . To use the knife tool we left click and hold down the mouse to begin cutting, we then drag to the point at where we want to stop cutting and let go of the left mouse button. As you can see in the above image, we’ve cut the top right of the circle, this cut is the point at where our sticker will begin peeling. Once the cut is complete we will have two vector shapes, the circle and the peel.

3. Using the pointer tool we can select our peel shape and move it away from the circle to see the two vectors seperately. We can then flip the peel shape to make it look as though it’s peeling over the top of the sticker. Do this by right clicking on the peel shape and select Transform > Flip Horizontal, then right click again and select Transform > Flip Vertical. If we move the peel over the circle now we won’t be able to see it as they are both the same colour, so let’s change that…

4. Using the pointer tool select the circle. Now open the Properties panel by clicking Window > Properties. Click the fill category list and click Gradient > Linear. Your circle will that have a line over the top of it with a small circle at one end and a square at the other - this is the source (circle) and end (square) of the linear effect. In the Properties panel click the colour box  next to the paint bucket .

Changing our linear colours

Once you’ve clicked the paint button you’ll be presented with the above. This is the panel that will allow us to control the linear colour of our sticker.

A little about this panel (skip this paragraph if you know how to use it): Firstly, the two sliders at the top most of this image control transparency. The purple box undernearth is a preview of our linear colour - the left of this box is our source (circle) and the right the end of the linear colour (square). Then we have the colour sliders which we can click to change the colour of the slider. Both the transparency and colour sliders move to the side to make that colour/transparency value move further into the linear effect. We can also click in an empty area by the sliders to make another slider so the linear effect can contain many different colours. Fireworks also gives you the option of present effects that you can experiment with. The bottom box gives you a bigger preview of the effect you’re creating. We recommend if this is your first time using the linear effect then you should play around with it. It will all make sense once you’ve spent a few minutes experimenting.

For our main sticker we’re going to have the source a dark purple and the linear will gradually get lighter toward the end. So pick a dark purple for the slider on the left then a light purple for the slider on the right if you want to have a sticker the same as ours.

Once you’re happy with your colour selections, simply click away from the linear panel and the effect will be applied on the canvas.

5. Now you’ve chosen the right colours for your sticker, we can move the linear effect. clicking and dragging the source (circle) will move the entire linear effect on the canvas. Clicking and dragging the end (square) will move the end of the linear effect around the source. We’ve put the source toward the bottom of the sticker and the end at the top so the whole effect goes across the sticker diagonally. This is a good way of achieving a realistic light effect on the surface of our sticker.

Step 6 - Giving the peel shape a linear colour

6. We’re now going to repeat steps 4 and 5 to give our peel shape a linear effect. This time though, we’ll use more than two colours in the effect to make it appear as though the peel is standing up and the light is hitting it in a different way to the flat sticker. Above you’ll see the colours we’ve chosen along with two new sliders placed in the middle of the linear effect. Also note, we’ve positioned our linear effect in a similar way to the sticker.

Tips: The source of the linear effect in our example above is the lowest point of the peel that is hidden from the light the most, so this should be dark. The two middle colours are at the highest point so these will be hit by light the most and as such, should be light. Then our final colour is lower down but it’s on the side the light is coming from so this should be the original purple colour of the sticker.

7. Simply drag your peel effect over the sticker so the straight edge of the peel meets the straight edge of the sticker. In our example we’ve given both the peel and sticker a drop shadow. To do this click the Filter + button in the properties panel then select Shadow and Glow > Drop Shadow. We’ve given our shadow the following properties:

• Distance: 1
• Transparency: 65%
• Softness: 4
• Angle: 240

Once you’ve completed this tutorial you’ll have two layers, your sticker layer and the peel layer. If you want your sticker to appear to have a graphic on it like our ITM Design stickers at the top of this post, simply place your graphic inbetween your sticker and peel layers.

discuss this topic to forum