Recycling button

In this step-by-step tutorial I am going to show you techniques which will allow you to design a recycling icon/button. I am using the recycling logo as an example but this button is really a multi-purpose button and the same technique can be applied to create a coin for example.

We will make extensive use of gradients, Live effects and Blend modes. The most difficult part is to make the border/rim looks like 3D. This button is made of 7 elements (a border/rim, a background, 2 arcs, the recycling logo, 2 curvy vector objects )

This tutorial has been made with Fireworks CS3 but is valid for lower Fireworks versions.

To give you an idea of how things will look like by the end of this tutorial, here is the completed image :

Figure 1: The completed tutorial.

1. The rim or border

Create a rim with a good punch!

The rim is the up-raised part of the coin that completely encircles the diameter on both front and back. During production it is pushed upward and sharpened to form a sort of border around the coin's design. This is what we are going to recreate.

In order to get a 5 px wide rim, select the Ellipse Tool , draw first a 110 px diameter circle then a second smaller circle of 100 px. The 2 circles should be on top of each other with the smaller circle exactly at the center. Use the align panel Window > align (align horizontal center then align vertical center).



Figure 2:The 2 circles superposed for Punch.

Select both circles then Modify > Combine Paths > Punch and you get a perfect 5px wide rim. To give it a 3D effect we use the Inner Shadow Live Filter and a linear gradient.



Figure 3:The rim.

Once we obtain the rim, we apply a linear gradient : #FDD351 -> #EF8732



Figure 4:Rim with linear gradient.

2. The background

A circle will be our button's background. First we fill it with an orange color : #F8A231, then we apply 2 successive Inner Shadow effects.



Figure 5:Inner Shadow effects .



Figure 6:Inner Shadow settings.

3. The arcs

We have a precious tool in the Auto Shapes panel called the Crescent which will be used to design our 2 arcs. Go to Auto Shapes panel (Window > Auto Shapes) and drag a Crescent Auto Shape preview from the Assets panel to the canvas.



Figure 7:Crescent Auto Shape .

Tweak the Crescent to give 2 slim arcs, filled with an orange color : #F07434 and reduce opacity to 70% then adjust them on either side of the circle.

4. The recycling logo
You may find many types of recycling logo on the web but they are all made of 3 arrows.



Figure 8:The recycling logo

To get the logo right at the center, go to align panel Window > align (align horizontal center then align vertical center)

Now assemble all the different parts we have created so far : rim, background, arcs and recycling logo.



Figure 9:Semi-finished button .

5. The vector objects

The last step is without no doubt the most difficult and will require the use of the Pen Tool to draw 2 curvy vector objects which will cover the upper and the lower part of the button.

Draw half a circle 97 x 54 px , insert a point in the middle using the Pen tool, then drag the Pen tool upwards to obtain a curvy line.



Figure 10:Control handles.

Duplicate the object, click Flip Horizontal then Flip Vertical to get 2 identical vector objects on top of each other.



Figure 11:Vector objects.

To make the upper object glossy and shiny we will apply 3 effects :

1- A Drop Shadow (setting below)

2- A Blend mode (Hard Light)

3- A Radial gradient (see colours)



Figure 12:Upper Settings

To make the lower part just darker we will apply 1 effect. First, we fill it with a grey colour then we apply the Multiply Blend mode.



Figure 13:Lower Settings .

Now adjust the upper and lower vector objects on the button and you are done!



My site is 100% biodegradable and recyclable!

Where to go from here

To improve your Pen tool skills read Pen Tool and Curves