[Tutorial] FWCS3 - Rolled Edge Sticker

[Nadia P]

The tutorial by jahangir was written for Photoshop users, however, I am an Adobe Fireworks user from way back, so thought a similar tutorial using Fireworks may be appreciated, as the majority of users here appear to use PS :-) There are no complex commands or extensions used to work through this tutorial , so any version of Fireworks would allow you to work through this tutorial.


ROLLED EDGE STICKER IN FIREWORKS CS3
This is what we are going to create.



---------------------------------------
Step 1:

Create a new document – I used a 150px x 150px canvas.
Draw a Circle of any size. I used a 135px x 124px circle



---------------------------------------------------------------
Step 2:

Select the circle. Using the Knife Tool slice through a section at the top - at an angle as shown below.



-----------------------------------------------------------
Step 3:

Make sure that the sliced section is the upper most layer in the layers panel as shown below:


----------------------------------------------------------------------------------
Step 4:

Select the sliced top portion of the circle. Using the flip tools on the menu bar:


Flip the selection Horizontally and then Flip Vertically. (Or Modify>Transform>Flip Horizontal and then again Modify>Transform>Flip Vertical)

Your image should now look similar to view ImgA.



To make it easier to work with this small element, you can move it away from the bottom section until we have finished styling. Use the keyboard arrow keys to move it out of position for the time being .... see ImgB above.
---------------------------------------------------------
Step 5:

Adding shading and a shadow
Keeping the top section selected, we’ll now apply a gradient. I’ve used the following colours to match the original colour of the circle. (left to right)
#97004B #F20079 #75003A #F20079



Time to add a drop shadow: The settings shown, worked well for me, you can play around with the settings to see what works well for you.

You can play around with the gradient fill also, until you have a nice rollover lighting effect. The image now looks like this:


------------------------------------------
Step 6:

Moving into position:
Using the arrow keys to move the top slice down and over to align it with the bottom half of the circle.


NEARLY DONE !!
---------------------------------------------
Step 7:

Finishing Up
Here, I changed the canvas colour to white, added a touch of a drop shadow to the bottom of the circle, added some text and the final image now looks like this:



Hope you enjoyed this, my first Fireworks CS3 tutorial

I've included the final png file here for your convenience. [to save to your pc - right click>save as]
Here's a pdf document explaining all the steps above if you'd prefer to print off the instructions.

I'd love to hear if you tried the tutorial and please feel free to post up any samples you may come up with!