How to Create a Vintage Photo Camera icon for App Store in Adobe Illustrator

Step 16

In this step, we begin to create camera’s exposure meter. Create a rectangle, similar to what we did in the beginning of the last step, with size 98×62 px and round the corners with a radius of 8 px, but place it in the opposite side of the metal panel.

Now, anywhere in the work area create one over the other two hexagons, first with the size of 16×14 px, and solid fill, second with the size of 15×13 px, and radial gradient fill.

Now, above the last hexagon create a circle the size of 12×12 px, filled with a linear gradient from white to dark gray and blending mode Screen. After that, add to a group all three shapes.

Step 17

Leaving selected group, that was created at the end of the last step, go to the menu Effect> Distort & Transform> Transform, and in the dialog box, set the parameters as in the screenshot, and click OK

Online HTML Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Try now for free!

Learn MoreOther Products

Now go back to the same menu Effect> Distort & Transform> Transform, and in the Transform Effect set other options, click OK. If Adobe Illustrator will give a dialog box asking about whether to apply to the object of a new effect, or edit an existing one, just check the checkbox Don’t Show Again and click Apply New Effect.

Once again, applied Transform Effect to the group, is the third, and again with another arguments.

Thus, with the Transform Effects, we have created an array of objects from only one instance.

Step 18

But back to the rectangle, which we did in the beginning of the step 16. Create a new rectangle on top of it with the size 94×58 px, with round of corners radius 6 px, and place it as shown in the screenshot below.

Color in this case it does not matter, because this rectangle will serve as clipping mask for an array of hexagons from last step. Place the hexagons as shown in Figure.

Select the gray rectangle and array of hexagons and press Ctrl + 7, or go to Object > Clipping Mask > Make.

Now leave selected only clipping path, copy it to the clipboard Ctrl + C and Paste in Back Ctrl + B. Set the black stroke with weight 2 pt and opacity 60%.

Add highlight, similar to the highlight on the viewfinder, linear gradient from white to black, Screen Blending mode.

Step 19

In the next few steps, we will create a mount for external flash “hot shoe”, which when finished will look like this.

So, let’s start. In the Layers panel turn off the visibility of all objects that we have created to this time, to prevent interference with. Place a vertical guide and use it to create two symmetrical forms.

Combine them into a single compound path Ctrl + 8, and fill it with a linear gradient.

Create two more forms are arranged symmetrically with respect to the guide, and fill their linear gradients in gray tones. The angle of the gradient in the first form is -3°, while the second +3°.

Duplicate these two forms Ctrl + C, Ctrl + F, combine them into a single compound path Ctrl + 8, change the gradient and blending mode to Multiply

Step 20

Add shape – fill with a linear gradient, blending mode Normal.

Next, create another form, as shown in the figure below, fill it with a linear gradient and change the blending mode to Screen.

Now fill in the void, which was formed in the “hot shoe”. Create two symmetrical object, as shown in screenshot. The angle of the gradient fill of the first object is -2 °, and the second +2 °.

Duplicate both objects Ctrl + C, Ctrl + F, then combine them into a compound path Ctrl + 8, and fill it with a linear gradient from white to dark gray with the Multiply blending mode.

Add a small bevel on the shapes edges – five simple forms of light-colored.

Step 21

In this step we will create the inside of the “hot shoe”. Create a compound path of two parts with a linear gradient fill.

Now in the middle of mounting draw sync contact.

Add shape with black fill.

Copy to Clipboard and Paste in Front this shape Ctrl + C, Ctrl + F, then reduce width and fill it gray.

On this mount for external flash is ready. Vertical guide can be removed and all objects grouped together. In the next step, we correctly position “hot shoe” on the camera body, and begin to create other items.

Step 22

At the beginning of the lesson, we created the guide in the form of 512×512 px rectangle with rounded corners, and in the Layers panel hidden its visibility. The size of this guide is properly sized for icons for App Store, this means that no element of this camera should not go beyond the boundaries of the guide.

We use this guide for the exact positioning of the “hot shoe”, and other elements that we will create later.

While holding the Shift key select the guide and mount flash, another click on the guide will assign it a key object, and press on the Align panel consecutively two buttons Horizontal Align Center and Vertical Align Top.

You can now turn on the visibility of all other objects, and make sure that everything is in place.

Another small touch – between the camera body and the “hot shoe” put a small black rectangle with rounded corners and opacity of 20%.

Step 23

In this step we will create the shutter. In a free place in the working area will create an ellipse size 40×20 px, and fill it with a radial gradient, as in the screenshot below.

Add form below with a linear gradient in gray tones, then copy it to the clipboard Ctrl + C and paste the following Ctrl + B. Fill this object black color and move it to 1 px down.

Group these objects, then create under them the ellipse with the size 82×40 px and filled with a radial gradient from black to dark-gray.

Even lower is another ellipse with a solid dark gray shading and size 88×44 px.

Next object, it will have an elliptical shape and is below all of the previous, with dimensions 114×62 px and radial gradient as the fill.

Moving on. Another ellipse with size 127×75 px, gradient look at the screenshot below.

And now came the moment when the ellipses is over, at least for a while J. In the next step we will finish work at shutter release, and place it on the camera body.

Step 24

Let’s create a shape as shown in the screenshot below, filled with a radial gradient from light gray to dark gray.

Duplicate it, change the gradient to the linear and the blending mode from Normal to Multiply.

And add one more object at the bottom filled with black or dark-gray solid color.

It’s time to work a little Pen Tool (P). So, take this tool and build shape, as shown in the screenshot, then fill it with a radial gradient in gray tones.

We continue to work Pen Tool, at this time fill shape with a linear gradient.

Make a bevel using Pen Tool (P), Width Tool (Shift + W) and the Gradient Tool (G).

Now all the objects combine in a group, and place on top of the camera, with a focus on, so as not to go beyond the guide.

Step 25

Well, we missed the ellipses with a radial gradient fills? ;-) Personally, I’m not! But nothing can be done, we will have to make another one part of the camera, located on the opposite side of the top panel.

I will not comment in detail on each following screenshot, all these actions we did in the previous steps. I think that looking at the screenshots all will be clear.

Step 26

A few more screenshots with no comments.

Step 27

We’ve just created a closed shape of gray color, although in this case, the color doesn’t matter, it can be any. Make sure that Smart Guides enabled, it can be done in the View menu.

Take the Line Segment Tool (\) and draw two lines, as in figure below.

Create a blend from these two segments with number of steps 42.

With the Pen Tool (P) create a curve, which runs through the middle of the gray shape, then select this curve and blend, and go to Object > Blend > Replace Spine. This action will place the blend steps along the curve.

Step 28

Now we expand the blend on the components, for this go to Object > Blend > Expand, still selected, hold down the Shift key and select the path with the gray fill (end of step number 26), now in the Pathfinder panel press the Divide.

This will lead to the creation of a closed objects group, which repeats the original contour.

Now, each of these objects fill with a linear gradient of black – white – black. The angle of the gradient will range from -4° to +4°.

Add another shape with a linear gradient and Multiply blending mode.

And one small addition.

Now, place this item on the metal panel of the camera body, do not go beyond the guide.

That came to an end the first part of the tutorial on creating a vintage camera icon. In the second part we will make an integral part of any camera – lens. But now propose to look at the works of our creativity.

1 2 3
Sergii Korolko

I'm a graphic designer and microstocker from Ukraine. Usually I create illustrations for microstocks, but sometimes I find the time, and share my knowledge and experience in the tutorials. You can find my portfolio in Shutterstock.

Posts by Sergii Korolko

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree