Fireworks is a great piece of software for creating fast web graphics, you will see that working with Fireworks can produce fast graphics with a photoshop quality. In today's tutorial we're going to create a high tech button.
STEP 1.Make a canvas of 600x600px, white background. Push "U" on your keyboard for the Ellipse tool. While holding down "Shift" draw a perfect circle 270x270px.
STEP 2.Push "U" on your keyboard for the Ellipse tool. This time don't hold down the "Shift" button and draw an uneven circle. Move it into place as seen in image. Now hold "CTRL" and push "T" for the transform tool. Rotate it clockwise as seen in image.
STEP 3.A: Now select all layers and Push CTRL+ALT+U to Union the two layers. As you can see in example A the paths will join around the edge of the whole image. Now we can put some effects on them.
B:1. In properties: select "Radial" Select the colours #CCCCCC left and #333333 right.
2. Adjust gradient as seen in image.
3. Filter: Inner Shadow: Distance:4; Opacity:50%; Softness:10; Angle:90
4. Photoshop Live Effects: Drop Shadow: Distance:10; Opacity:75%; Size:10; Angle:120
STEP 4.A: Push "U" on your keyboard for the Ellipse tool. While holding down "Shift" draw a perfect circle 220x220px and center it.
1. In properties: select "Linear" Select the colours #333333 left and #818181 right.
2. Adjust gradient as seen in image.
3. Filter: Inner Bevel: Distance:20; Opacity:75%; Softness:10; Angle:116
4. Photoshop Live Effects: Drop Shadow: Distance:10; Opacity:75%; Size:10; Angle:120 | Stroke: Size:2; Position:Outside; Opacity:100%; Colour #333333.
B: Push "U" on your keyboard for the Ellipse tool. While holding down "Shift" draw a perfect circle 200x200px and center it.
1. In properties: select "Linear" Select the colours #FFFFFF left and #333333 right.
2. Adjust gradient as seen in image.
3. Photoshop Live Effects: Drop Shadow: Distance:10; Opacity:100%; Size:10; Angle:120 | Stroke: Size:1; Position:Outside; Opacity:100%; Colour #333333.
STEP 5.A: Push "U" on your keyboard for the Ellipse tool. While holding down "Shift" draw a perfect circle 190x190px and center it.
1. In properties: select "Radial" Select the colours #00CCFF left and #006699 right.
2. Adjust gradient as seen in image.
3. Photoshop Live Effects: Drop Shadow: Distance:10; Opacity:80%; Size:10; Angle:120 | Stroke: Size:2; Position:Outside; Opacity:100%; Colour #333333.
4. Filter: Inner Shadow: Distance:20; Opacity:100%; Softness:25; Angle:270.
5. Filter: Inner Shadow: Distance:8; Opacity:100%; Softness:5; Angle:125.
B: Push "U" on your keyboard for the Ellipse tool. Make an ellipse 108x85
1. In properties: Add the colour #FFFFFF to the ellipse.
2. Go to Commands > Creative > Auto Vector Mask. Choose the appropriate mask that fades from the bottom.
3. Adjust gradient as seen in image.
4. Drag to the bottom and center it as seen in image.
Push "U" on your keyboard for the Ellipse tool. Make an ellipse 132x67
1. In properties: Add the colour #FFFFFF to the ellipse.
2. Go to Commands > Creative > Auto Vector Mask. Choose the appropriate mask that fades from the top.
3. Adjust gradient as seen in image.
4. Drag to the bottom and center it as seen in image.
STEP 6.A: Push "U" on your keyboard for the Ellipse tool. and draw 3 small circles inside the blue orb on the right side as shown.
1. Select the 3 circles. In properties: Add the colour #00CCFF to the circles.
2. Filter: Gaussian Blur: Blur radius:7.
3. Adjust gradient as seen in image.
B: Select the blue circle.
1. In properties: Add the texture "Swish" 20%.
2. Filter: Brightness/Contrast: Contrast:10.
Select the first circle we made a union at the very start.
3. In properties: Add the texture "Vein" 2%.
4. Filter: Brightness/Contrast: Contrast:10.
Final Product, add a nice background and and object to the inside of the blue orb if you like.
