Create a Detailed Camera with Photo Icon

Jun 25th in Designing by Jonathan

This tutorial will show the intermediate Adobe Illustrator artist how to make a sleek web 2.0 style icon. You should have a basic understanding of Adobe Illustrator tools before you begin this tutorial, as the tutorial moves at a rapid pace.

Author: Jonathan

I'm a print and web designer with experience in a range of software and technologies. If you like my tutorials or have constructive feedback please make sure to comment and follow me on Twitter.

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Below is the completed illustration to see what you're working toward.

Step 1

Start by drawing a rounded corner rectangle.

Step 2

Draw the basic shapes such as the circles, lens, viewfinder and flash.

Step 3

Go to Object > Transform > Shear and enter the variables as shown.

Step 4

Duplicate the body of the camera by clicking and dragging while holding Shift+Alt (this ensures that the angle of the duplication is precise).

Step 5

Make a new layer called "lens" and move the highlighted items to that layer. Then lock the "camera" layer.

Step 6

I've used red so that you can easily follow along with the tutorial. You can make your colors whatever you prefer though. We will change the colors in a later step.

Duplicate the three lens shapes in the same manner as in Step 4. You will have to do them one at a time. You will also need to send them behind their respective shapes to get a stacked effect. Once you are done you can Unlock the "camera" layer. Then Merge both layers into one again.

Power Tip: You can send items behind other items one increment at a time by pressing Command and the Bracket keys. The Left Bracket Key sends items behind. The Right Bracket Key move items to the front.

Step 7

Achieve a beveled look by using the Pathfinder Palette. You first stagger the shapes (two of the same shapes on top of each other). Then select the highlighted option below.

Step 8

Use the Pen Tool and draw over the edge of the camera to fill in the side.

Step 9

Follow the shape closely so that it looks clean and smooth.

Step 10

Draw the top portion of the camera.

Step 11

Draw a rectangle over the edge of the camera. Then use the Pathfinder Palette to create the black edge of the camera, as we did in Step 7.

Step 12

Manually draw the top black edge using the Pen Tool.

Step 13

Again, draw the final edge of the camera with the Pen Tool.

Step 14

Use the Pen Tool and select a Stroke color of white. Then draw a line down the center of the camera to give the appearance of two halves being placed together.

Step 15

Draw the shutter release button using an Ellipse shape.

Step 16

Draw another oval shape on top of the last. Use the Pen Tool to draw an outline around the shutter release, which will allow us to add dimension to the button. You will again use the Pathfinder Tool to make the shapes overlap perfectly.

Step 17

Adjust the colors to your liking. Then duplicate the button over the top to give the effect of even more depth.

Step 18

Using the Ellipse shape again, draw where a reflection should fall. You will have to Rotate the oval to achieve this angle.

Step 19

Use Divide in the Pathfinder Palette to break-up the shape. Delete the unnecessary leftover shapes.

Step 20

Add Gradients to give the lens depth. Repeat the for each lens areas.

Step 21

Once you have all three lens areas complete, your camera should look something like this.

Step 22

Add small details like highlights.

Step 23

Copy and Paste the highlight you just made and use it again, as shown below.

Step 24

Draw an Ellipse shape, which is where the reflection on the body of the camera will fall. You will need to Rotate the Ellipse to achieve the look below.

Step 25

Use Divide in the Pathfinder Palette on the black edge, as well as the camera's body. Make sure you select both of these shapes in addition to the oval you just drew. This ensures that the reflection will look realistic because it will move smoothly across the whole camera. Delete the unused outside shapes once you complete the pathfinder task.

Step 26

Add gradients of your choice. Depending on the look you're going for, it may appear more realistic if the darker color is on the top of the gradient for the section we're currently coloring.

Step 27

Notice how the very top of the camera is a lighter red. This is a small detail that helps give the camera a 3D look.

Step 28

Duplicate the entire camera.

Step 29

Use the Add To Shape Area option in the Pathfinder palette to combine all the shapes. Once you select the area highlighted in red, you have to click Expand in order for it to work.

Step 30

Put the shape behind the camera. Then add a subtle Gradient to achieve a nice reflection.

Step 31

Using the Pen Tool, draw a rectangle around the camera as shown.

Step 32

Using the Gradient Mesh Tool, add four darker points to the shape. As you can see, when you add points to an irregular object, the gradient mesh will give unforeseeable results. This is OK since we're not adding any more points.

Step 33

In your Transparency Palette, set the Blending Mode to Multiply. This makes the rectangle with gradient mesh that you just drew seem like a real shadow!

Step 34

Notice how you can see through the shadow to the reflection.

Step 35

Draw a Rounded Rectangle to start the photo.

Step 36

Draw a standard rectangle inside that.

Step 37

Make an Ellipse as we did in Step 25. This will become the reflection on the photo.

Step 38

Add gradients to give it a realistic look.

Step 39

Duplicate the entire photo. Then select the option highlighted below. Make sure to click Expand or else your shape won't combine.

Step 40

Reposition your photos so they're behind the camera and reflection. Select the reflection and set the Blending Mode to Multiply, so that you can see through to the photos.

Conclusion

The complete digital camera and photo icons are shown below.