Easy Camera Icon in Fireworks

A few weeks ago I decided to create a camera icon. Usually I would do that in Illustrator or Photoshop, however as I use Fireworks pretty much most of my time I chose to create the icon using it. The cool thing about Fireworks is that you have the vector features found in Illustrator with bitmaps features found in Photoshop, especially layer style filters.

So in this tutorial I will show you how to create a camera icon in Fireworks. I will focus on the lens pretty much, but as you will see, to create a realistic effect it's all about playing with gradients.

Reference

The first thing to do is always find some references so we can learn about lighting, shadows and texture. For my icon I wanted to recreate the Sigma DP2s.

Step 1

Open Fireworks and start a new document. I am using 1024x1024 pixels. You can do the same using Illustrator or Photoshop. After that with the Ellipse Tool (U) create a circle.

Step 2

Start creating more circles following the photo as references.

Step 3

Now it's time to create the small circles that will be the lens. When you see those lens they look quite complex but if you analyze it's quite simple to recreate that, it's all about circles.

Step 4

Now we have all the circles necessary to create the lens. As you can see we are just playing with black outlines and no color.

Step 5

With the Rounded Rectangle tool create the body of the camera. After that click on the yellow controller to change the type of the corner.

Step 6

Now let's start making the lens looks more realistic. Select the bigger circle and apply a gradient. Use the Cone type with grey and black for the color. Use the image below for reference.

Step 7

Now for the second circle just use black for the color with #333 for the stroke.

Step 8

For the third circle use #1B1C1C for the color and #333 for the stroke.

Step 9

Use black color for the next with the same stroke color. The for the other one use the same as the third to alternate the colors.

Step 10

For the next 4 circles use #1B1C1C for the color with #333 for the stroke. The 5th you use black for the color. After that use #999 for the stroke of the 6th. We need some highlight to the center part. The add other 3 circles like the image below, with the last one using a linear gradient.

Step 11

For the circle in the very center fill it with black. As you can see in the image below, until now we haven't done anything much fancy or difficult, it was just repetition.

Step 12

Now add 4 new circles in the center of the document. The big one in purple (1), then another one in dark/green yellow (2), one in the very center smaller in light yellow (3) and another one in green (4). Use the image below for reference. Also change the Edge Type to Feather with 3pt.

Step 13

Add 2 new circles one bigger and another smaller. The go to Modify>Ungroup. Then with the Subselection Tool (A) edit the circles to make them look more like an ellipse. Change the Fill color to Linear Gradient and use #728EA6 for the color but with 100% transparency in the beginning and 0% at the end. Make sure the total transparent part is towards the center of the lens.

Step 14

Add an ellipse to use as a mask. That's important to create the refleciton in the lens.

Step 15

Cut the ellipse and start selecting the colored circles. Celect the dark yellow one and go to Edit>Past as Mask.

Step 16

Repeat the same thing for the other circles. Now for the big reflection select the circle like I did in the image below and copy. Select the big gradient ellipse and go to Edit>Paste as Mask. Do the same for the other small gradient ellipse.

Step 17

Now lets add some effects on the body of the camera. We had the rounded retangle. To add a little bit of 3D effect just add two rectangles one at the bottom and one at the top. Apply a gradient on them so the left and right edges are transparent.

Step 18

Add 2 new rectangles on the right and left edges of the camera. Then apply a gradient using white for the color but with 100% transparent at the beginning and end and 0% transparency in the middle. That will add a nice round 3D effect.

Step 19

Move the lens on top of the body. You can add more effects like shadows and elements.

Step 20

Here are other parts of the camera I created. They are basic rectangles with gradients and different sizes. They look very basic but when you put them to together you ger a very realistic effect.

Conclusion

Select all layers but the ones in the center of the lens. The go to the Add Filters button on the Properties panel. Click and select Noise>Add Noise. Use 2 Amount, that will give a nice texture to the camera.

As you could see in this sort of walkthrough/tutorial, create the camera and the lens was quite simple, however you have to go all the way till the end in order to get the result you want, otherwise you want be able to see how simple colors and gradients when together can create a nice effect.

Step by Step

Download Fireworks File

Click here to download the Fireworks file used for this tutorial