The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

[Tutorial] FWCS3 - Rolled Edge Sticker

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 CS3This 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:

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 shadowKeeping 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 UpHere, 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!