six (copy)writing secrets they didn't teach you in english ... file · web...

COM 1035: Graphic Tools

Assignment #5b: Camera Icon

Introduction:

Here we will use Fireworks to create a camera icon. 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. We will focus on the lens pretty much, but as you will see, to create a realistic effect it's all about playing with gradients.

The first thing to do is always find some references to recreate the Sigma DP2s camera.

Activity:

Follow the steps outlined for this tutorial.

Step 1

Open Fireworks and start a new document. I am using 1024x1024 pixels. Make sure you are using a soft rounded 1 pixel wide stroke with no fill colour.

Use the Ellipse Tool (U) to create a circle. Remember to hold the Shift key so you draw a true circle.

Jasper Place High School [email protected] Computer Technologies robpetrovic.wordpress.com

1

mailto:[email protected]

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


2


.

Step 4

Now we have all the circles necessary to create the lens. Again, 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 grip to change the corner so it contains a bevel (1).


3


Step 6

Now let's start making the lens looks more realistic. Select the bigger circle and apply a gradient. Instead of Linear which you have already used before select the Cone type with grey and black for the color. Use the image below for reference.

Step 7

Select the second circle from the layers palette and use the color #333 for the stroke.


4



5


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. 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. For the 6th circle, use #999 for the stroke.


6


Step 11

We need to add some highlights to the center part so with the last circle using a linear gradient.

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.


7


Step 13

Add 2 two ellipses: one bigger and another smaller. Use the Subselection tool and drag out the points to reshape then use the Scale tool to rotate and squash the objects as shown below.

Change the Fill color to #728EA6 and use a Linear Gradient. For the first color marker, set at 100% transparency and 0% for the second gradient. Make sure the total transparent part is towards the center of the lens so grab the gradient grips and rotate into position.

Step 14

Now we are going to create a cool effect called a mask. I applied a mask in the image below so look for reference. Select a larger circle and Copy. Next, select the larger reflection ellipse shape and go to the menu Edit>Paste as Mask.


8


Step 15

Now let’s add some effects on the body of the camera. We had the rounded rectangle. To add a little bit of 3D effect let’s 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. Play with the gradient settings to achieve the effect below.

Step 16

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.


9


Step 17

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

Step 18

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 get a very realistic effect.

Step 19

Add other details similar to the original picture and complete.


10


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. Play with the amount to 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.

Evaluation:

You will be marked on your ability to use the tools properly and recreate the camera icon above.


11


six (copy)writing secrets they didn't teach you in english ... file · web...

Documents