|Commands||Styles||Textures||Libraries||Patterns||Auto-Shapes||Rich Symbols||Swatches||Plugins||All Extensions|
DescriptionA sophisticated Recycling/conservation icon/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 :
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).
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.
Once we obtain the rim, we apply a linear gradient : #FDD351 -> #EF8732
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.
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.
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.
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.
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.
Duplicate the object, click Flip Horizontal then Flip Vertical to get 2 identical vector objects on top of each other.
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)
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.
Now adjust the upper and lower vector objects on the button and you are done!
Where to go from here
To improve your Pen tool skills read Pen Tool and Curves
Become an author
Sponsored LinksAddiction Recovery
Copyright © 2013 Fireworks Zone
Fireworks is a registered trademark of Adobe