How to Create a Vintage Photo Camera icon for App Store in Adobe Illustrator
Estimated completion time: 4 hours
Hello everybody! Today I will tell you how to create a Vintage Photo Camera icon for App Store in Adobe Illustrator.
What we need:
- Adobe Illustrator CS5 or CS6;
- Black leather texture (you can download it from here);
- Free plug-in for working with gradient mesh – Mesh Tormentor;
- And 3 or 4 hours of free time;
So, let’s beginning
Step 1 – Create Camera Body
Open Adobe Illustrator and create a new document of 600×600 px size, RGB color mode
As you can see on this page, icon for App Store must have size 512×512 px and corner radius 90 px. Take Rectangle Tool (M) and create in center of document rectangle with size 512×512 px with red color of stroke and without fill.
Then go to Effect > Stylize > Round Corners and in the dialog box, put a value of 90 px.
Now, go to Object > Expand Appearance. Copy the created object and paste it in front (Ctrl + C, Ctrl + F), then select he underlying and press the hotkey Ctrl + 5. This will create the guide from the path.
Lock and turn off the visibility of the guide in the Layers panel, and go to the next step.
In this step, I’ll show to you a technique, that will be used for constructing different parts of the camera, so, duplicate this shape again, and move it to 20px up, then increase its width to 540px.
Select both objects, then take the Shape Builder Tool (Shift + M), hold down the Alt key, and delete the unwanted part of the top shape, as shown in the screenshot below.
Now we need create the closed path at the bottom of the camera body, therefore, keep all paths selected, click the same tool within it.
As the result, we’ve got two objects ideally adjacent to each other.
Thus, from the primitive shapes, we can easily model any shape, that we need.
There is no sense to describe everything the steps to create the camera body, as in the previous step, we use of simple shapes and Shape Builder Tool (Shift + M).
Gradually add new elements to our illustration. On the figure below have been added some elements on the front of the camera.
Next, create the top panel, which will have a “hot shoe”, shutter button and control ring; and the front panel, to be placed on her viewfinder, exposure meter and logo.
At the end of this step, our illustration must be look like the screenshot below
At this stage, we are ready to paint the camera body, select the bottom shape, remove the stroke and fill it with a linear gradient of gray colors
Now duplicate it, change the gradient fill, and change Blending mode from Normal to Multiply.
Next, while holding the Shift key, select shapes, as shown in figure below.
Combine them into a single composite path shortcut Ctrl + 8, or from the menu Object> Compound Path> Make
Keep the path, which was created in the previous step selected, remove from it a stroke and fill it linear gradient in dark-blue colors.
Go to menu Object > Path > Offset Path and set the following parameters, then click OK.
Change Gradient Fill and Blending mode to Overlay.
Now select the path, which was created in beginning previous step, duplicate it twice, and move it to 2px up.
Hold Shift, select the underlying object, and on the Pathfinder panel click on Minus Front.
Ungroup the resulting group Ctrl + Shift + G, and add remaining selected paths in the compound path Ctrl + 8, after then change the gradient fill to more dark.
Repeat all the steps from the beginning of this step, but second duplicated object move to 2px down. Change the gradient to a lighter for resulting compound path.
In this step we apply a texture to middle of the camera body. So, go to menu File > Place… and add file black_leather_texture.jpg to artboard. This texture have a very large size, so we need reduced width up to 512px.
With help of the Layers panel move the texture below the path shown in the screenshot and center the relative thereto.
Keep texture and path selected, create a clipping mask Ctrl + 7, or in menu Object > Clipping Mask > Make.
Copy the Clipping Path and paste it in front (Ctrl + C then Ctrl + F).
Fill it with a linear gradient in grey tones, as in the screenshot below, and change blending mode to Multiply.
We will now proceed to the creation of two very important parts of the camera, the top and front metallic panels. And using one Gradient Mesh. More recently, the creation of the gradient mesh would require honest effort even by professional illustrators, not to mention the novice users.
But fortunately, we now available free plugin Mesh Tormentor, which makes working with Gradient Mesh easy and enjoyable. Description of the working with this plugin is beyond the scope of this tutorial, but you can find a comprehensive guide to the plugin on the Iaroslav Lazunov website.
Using the Layers panel turn off the visibility of all the objects that we have created so far, apart from these two.
Now, using the technique from the first three steps of the lesson, create a grid with stroke but without filling.
Pay attention to the Layers panel, all objects are open contour. Now select all Ctrl + A, open Pathfinder panel and click Divide.
As result we have group from 112 closed paths, of which in the next step we construct the Gradient Mesh using the plugin Mesh Tormentor.
Keep the group of contours, obtained at the end of the last step selected, open the Mesh Tormentor plugin, and press the Create One Cell Mesh.
All closed paths are converted to one-cell mesh. If any of the paths to mesh does not convert, then he has only three points, and the minimum required for one-cell mesh – four, in that case, just take the Add Anchor Point Tool (+) and add to this path one more point, and then repeat the path transformation into a mesh. Then select all created meshes, and click the Sew Together.
Thus from the group of one-cell meshes, we have created one multicell.
Ungroup this mesh, take the Mesh Tool (U), and add two column of points, as shown in the screenshot darker.
Now, the creation of gradient mesh finished. Using the Direct Selection Tool (A) and Shift, or the Lasso Tool (Q), paint the mesh, as shown in the screenshot below. This screenshot also shows all of our work at this time.
Before we go any further, let’s give a complete view of the metal parts of the camera body. Select Gradient Mesh from previous step and go to Object > Path > Offset Path, set the offset 0 px and click OK.
The resulting path in the Layers panel placed above the Gradient Mesh, remove the stroke and assign white color to fill. Keep the path selected and go to Effect > Sketch > Note Paper, set the value as in the screenshot below, and click OK.
Change blending mode to Multiply, with Opacity 100%.
So, we added the texture effect on the metal panel. At the bottom of the camera body, we shall do the same.
Starting to work on the details of the camera. Take the Ellipse Tool (L) and create ellipse with size 43×43 px, with linear gradient fill in the light-gray tones, and without stroke.
Duplicate it, reduce size up to 40×40 px, then move it down to 1,5 px, and change the gradient angle.
Now create an open path, as shown in the screenshot below, with the weight of the stroke 2px, than take the Width Tool (Shift + W) and reduce to naught the start and end of path.
Go to Object > Path > Outline Stroke, then fill this path with a linear gradient from black to white.
We continue to work on the details, create a shape with a gradient as in the screenshot.
Above previous shape, create ellipse with a radial gradient from black to dark gray.
Add one more ellipse with a linear gradient from dark gray to light gray.
And two more shapes with linear gradients.
At the completion of work on the button, we must add a shadow under it. It is a form of black color with opacity of 20%.
In this step, we will create another mechanical element on the camera body. It makes no sense to describe literally every step, just see the screenshots.
As you can see, nothing complicated. All this we have already done before, now only changed the form of the object.
Now let’s create the inscription CAMERA (or any other) as a logo. For this purpose, I used the font Stony Island NF, which was previously downloaded and installed in the operating system. So, after the creation of the inscription we convert text to outlines with the keyboard shortcut Ctrl + Shift + O, or via the menu item Type > Create Outlines, ungroup the resulting group, and combine in a compound path Ctrl +8, then apply a linear gradient to the fill.
Keep this path selected go to menu Object > Path > Offset Path and in the dialog box, set a value of 2 px.
Click OK, the resulting compound path move down to 1 px, and change the gradient.
Add highlights to the logo. Select the first path with light gray gradient, go to Object > Path > Offset Path and in the dialog box, put a value of -1 px, then change gradient as in a picture below and Blending mode to a Screen.
Add a viewfinder for the camera. For this take Rectangle Tool (M), create a black rectangle with size 98×62 px and round the corners with a radius of 8 px.
Now create another rectangle of dark gray color with size 94×58 px, and rounded corners with a radius of 6 px, and place it as shown in the screenshot below.
Ok, now add on top 24×24 px ellipse with a simple linear gradient.
And the finishing touch – a highlight on the glass viewfinder. Select a dark gray rectangle, go to the menu Object> Path> Offset Path, set values -2 px, and click OK.
Then in the Layers panel move it above the ellipse, change Blending mode to Screen, and gradient from white to black.