Icon Tutorial: Video Projector | Bypeople

Icon Tutorial: Video Projector

When you’re starting to learn how to create realistic objects in Illustrator you usually take a real life picture for inspiration and begin drawing it. On this tutorial we will offer a better solution for you to practice your skills in Illustrator. Throughout the whole post we will learn how to make a real object with Adobe Illustrator, in this case, we have selected an old film projector, such as the early 20th century. Get ready because it’s time to start, open your Illustrator and let’s go.

1. Grab references

We are making an antique object, so it’s probably that you’re not completely sure of how it suppose to be, fortunately we have the internet, so navigate for a while and check some examples for inspiration.

filmprojector01

2. Setup your canvas

OK, now that you know exactly how a film projector looks like you’re ready for start tracing vectors. First go to File>New and setup a canvas with the following properties: 256 px X 256 px, RGB color mode and 72 ppi.

filmprojector02

3. Start vectorizing

This is going to be a long tutorial, we suggest you to sit comfortable, grab some food, maybe a cup of coffee and then we can begin. OK the first shape we are going to make uses an Illustrator plugin called Rounded Corners. First select the pen tool in order to start drawing.

filmprojector03

Now, draw the following shape:

filmprojector04

And now the plugin, go to Effect>Stylize>Round Corners and adjust the different values until you get something closer to this.

filmprojector06

filmprojector05

filmprojector07

Because we’re making a realistic element, there’s going to be a lot of shadows and highlights, like the one we are doing at next.

filmprojector03

filmprojector08

And now for filling our object let’s use a two color gradient, linear type and –108 angle.

filmprojector09

Next shape, grab your pen tool and trace it.

filmprojector03

filmprojector10

For the filling use a two color gradient, linear type and 113 angle.

filmprojector11

We can generate the next figure with the round corners plugin, but because we want it to be very detailed, we better trace it with the pen tool directly.

filmprojector03

filmprojector12

For the fill we used a solid color ( 75 % black ), no more adjustments for this one.

filmprojector13

4. Stepping up

OK from this point we are going to skip the screenshot of the unfilled objects and move right away to the filling, that way we can improve our results and make your job easier. Grab your pen tool and trace the next shape.

filmprojector03

filmprojector14

filmprojector15

Select the shape that we just did and copy paste it over the original (Ctrl + C, Ctrl + F), then switch the filling properties to linear type and 1,76 angle.

filmprojector16

Another shape, select your pen tool and start drawing it.

filmprojector03

Fill the shape with a two color gradient, linear type and –120 angle.

filmprojector17

The next shape has a solid color fill, 75 % black, no further changes.

filmprojector03

filmprojector18

Now we change from the pen tool to the ellipse tool in order to make the next shape.

filmprojector19

Fill it with a three color gradient, linear type and –68 angle. Procure to check with G the gradient position every time.

filmprojector20

There are two ways of doing the next step, you can either copy paste the last ellipse we did and reduce its size or simply make a new one, it’s up to you.

filmprojector19

Fill the ellipse with a solid color, 86 % black.

filmprojector21

Go back to the pen tool and make a new shape inside the dark ellipse we just did.

filmprojector03

The fill it’s going to be a two color gradient, linear type and –3,84 angle.

filmprojector22

Maybe an additional shape can be a good complement, so grab your pen tool.

filmprojector03

Fill this shape with a two color gradient, linear type and 141 angle.

filmprojector23

You now what’s next, take the pen tool and start drawing.

filmprojector03

Fill with a two color gradient, linear type and –167 angle.

filmprojector24

The essence relies on the details, we need to trace a lot of shapes to generate realistic volumes.

filmprojector03

Use a two color gradient for this fill, linear type and –167 angle.

filmprojector25

Using the ellipse we are going to create a new figure of our icon.

filmprojector19

Fill the ellipse with a 2 color gradient, linear type and 47 angle.

filmprojector26

Next shape, you know what to do, select the pen tool.

filmprojector03

For this object we will be using a 3 color gradient, black on the head an tail and gray (73 %) in the middle, the other values are linear type and –73 angle.

filmprojector27

Cover up this object by using an ellipse tool.

filmprojector19

This ellipse will be filled with a 2 color gradient, linear type and –107 angle.

filmprojector28

Copy paste the ellipse (Ctrl + C, Ctrl + F), then copy paste it one more time and reduce its size, that way you’ll have two concentrically made ellipses.

filmprojector29

And now we are using the pathfinder tool, you can look for it at Window>pathfinder. When you find it, select the two ellipses (previous screenshot), and click on the second button of the first row, there will be apparently no changes but that’s because we haven’t added a fill.

filmprojector30

Select a 2 color gradient with linear type and –99 angle. You will notice that the pathfinder create it an empty space by intersecting the two ellipses, this is a very useful tool.

filmprojector31

Another ellipse, let’s start by drawing it.

filmprojector19

The fill for this ellipse will not present major changes, just a 2 color gradient, linear type and 48 angle.

filmprojector32

The following shape is similar to another that we already did, so it will be easy to do, just take the pen tool and trace it.

filmprojector03

Fill this shape with a 3 color gradient (black on both extremes), linear type and –71 angle.

filmprojector33

Take the ellipse for tracing the following figure.

filmprojector19

This one is filled with a 2 color gradient, linear type and –106 angle.

filmprojector34

Now an identical process than before, two ellipses, the pathfinder tool and a gradient.

filmprojector29

Now apply the second button of the first row.

filmprojector30

And now the fill, 2 color gradient, linear type and –98 angle.

filmprojector35

Next shape, just trace it with the pen tool.

filmprojector03

This object has a new adjustment on its fill properties, the parameters are the following: Linear type, 39,7 angle and the new property, adjust the blending mode to multiply.

filmprojector36

Move to another part of our film projector and use the pen tool to create the next shape.

filmprojector03

This gradient has neither white or black on its color markers, only gray tones in a linear type and 113 angle.

filmprojector37

This next shape works as a shadow, first draw the initial shape with the pen tool.

filmprojector03

Fill the shadow with a new color gradient (2 tones), linear type and 167 angle.

filmprojector38

Be careful because the next shape is not a fill but a stroke line, you need to change that on the tool bar.

filmprojector39

And now using the pen tool draw a long line of 0.29 stroke and white color.

filmprojector40

filmprojector03

And this is the line that you need to trace.

filmprojector41

We are done with this part, now comes another large shape, for start we use the pen tool.

filmprojector03

Fill the shape with a 60 % black, non extra adjustments.

filmprojector42

Keep it up, we have still a long way to go but it’s looking great so far.

filmprojector03

This object will be filled with a 75 % black.

filmprojector43

And then comes the frontal side of this area, simple task for your pen tool.

filmprojector03

Fill with a 2 color gradient, multiply blending mode, linear type and 167 angle.

filmprojector44

Now some thin lines to give some realism to our icon, start by drawing them with the pen tool.

filmprojector03

Fill the element with pure white and then reduce its opacity to 45 %.

filmprojector45

Copy paste the shape and move it a little bit to the right, then change the fill to black, make sure it keeps the opacity at 45 %.

filmprojector46

Select the two lines and duplicate them at the left side of this block (Ctrl + C, Ctrl + F).

filmprojector47

Create a large shape using the pen tool, it’s going to be a shadow.

filmprojector03

This object has the following fill properties: Multiply blending mode, linear type and 61 angle.

filmprojector48

Some tiny shapes come at next, do this one with the pen tool.

filmprojector03

Fill with a black and white gradient, linear type, 97,2 angle and multiply blending mode.

filmprojector49

Copy paste (Ctrl + C, Ctrl + F) this shape and place it towards the right side of the original.

filmprojector50

And continue drawing, this next shape goes like this:

filmprojector03

3 color gradient (gray in the middle), linear type and –67 angle.

filmprojector51

Here comes the ellipse tool.

filmprojector19

Fill with a simple gradient, linear type, and –101 angle, no more changes.

filmprojector52

Add another ellipse inside this last one that we did. The fill properties are quite special on this one, so pay attention: Radial type (click G and place the gradient center outside the shape), 3,48 angle, 100 % aspect radio, screen blending mode and finally 50 % opacity.

filmprojector19

filmprojector53

Copy this entire element except the last shape (smaller ellipse) and place it to right side. Switch the fill values of the frontal ellipse to linear type and 26,6 angle.

filmprojector54

Then add an ellipse similar to the left element.

filmprojector19

The fill values are going to be linear type and 19,9 angle.

filmprojector55

A large shape is the next one on our way, let’s draw it immediately.

filmprojector03

The filling properties are: Linear type, 70,8 angle and multiply blending mode.

filmprojector56

Notice the particular object that comes next, the shape is a simple ellipse but.

filmprojector19

The trick is in the fill, you need to use a 92 % black and 35 % opacity.

filmprojector57

Take the pen tool for start tracing our next figure.

filmprojector03

The fill has a radial type, 0 angle, 100 % aspect radio, screen blending mode and 40 % opacity.

filmprojector58

Another object made with the pen tool, simple as that.

filmprojector03

Fill it with a linear type, 89,4 angle and multiply blending mode.

filmprojector59

Next object, same thing as always, grab your pen tool for start.

filmprojector03

Fill with a 2 color gradient, linear type, 142 angle and multiply blending mode.

filmprojector60

Another shape in front of this last one.

filmprojector03

Fill values are linear type, –19 angle and multiply blending mode.

filmprojector61

And the next shape goes like this:

filmprojector03

Fill with a 72,5 % black, no further changes.

filmprojector62

Next object is very simple, it goes like this.

filmprojector03

The filling goes in a 60 % black, nothing else.

filmprojector63

And now comes the next object.

filmprojector03

Fill it with a 100 % black.

filmprojector64

Hurry up and let’s finish this element, grab one more time the pen tool.

filmprojector03

Fill the object with a 2 color gradient, linear type and –62 angle.

filmprojector65

Keep it up with this next shape, proceed tracing it with the pen tool.

filmprojector03

This shape will be filled with a 72,55 % black.

filmprojector66

And now the next shape.

filmprojector03

Fill with a 60 % black.

filmprojector67

Next object is a highlight, first draw it with the pen tool.

filmprojector03

This shape is filled with a 50 % white.

filmprojector69

With this next shape we will add a highlight for an extra detail.

filmprojector03

The fill properties for this shape are the following: Radial type, –21.6 angle and screen blending mode.

filmprojector70

Another highlight, is on this little details that we will reach the realistic quality.

filmprojector03

The fill goes like this: Radial type, –15 angle, aspect radio 96.99 and screen blending mode.

filmprojector71

Let’s keep making highlights, so grab your pen tool.

filmprojector03

For the fill we will be using a two color gradient, radial type, –27 angle, 122 aspect radio and screen blending mode.

filmprojector72

You are noticing that this subtle highlights provide a nice texture to our icon, as the one we’re doing next.

filmprojector03

For the fill we use a two color gradient, radial type and screen blending mode.

filmprojector73

The basic box of our icon is practically done, from now on we are going to focus on the details and additional elements, select your pen tool and start drawing.

filmprojector03

Use a two color gradient for the fill, linear type and –108 angle.

filmprojector74

Copy paste this shape (Ctrl + C, Ctrl + F) and switch the fill to a solid color (75 % black).

filmprojector75

5. The Reel

OK, now we are going to make the reel, which is probably the most emblematic part of a film projector, it will take a lot of steps to be done but in the end the result will look great. First we need to use the ellipse tool.

filmprojector19

filmprojector77

And then draw a series of shapes inside the ellipse using the pen tool.

filmprojector03

filmprojector76

And now we need to use the pathfinder, select everything (ellipse and shapes) and click on the second button of the first row at the pathfinder menu. Then adjust the fill to a 60 % black.

filmprojector78

filmprojector79

Pretty cool isn’t it?, now copy paste this object and move it a little bit to the left, then change its fill to a darker black.

filmprojector80

Now the tail of the tape, it’s a very simple shape.

filmprojector03

Fill the object with a two color gradient, linear type and 112 angle.

filmprojector81

Use the ellipse tool to generate the next object.

filmprojector19

Fill the ellipse with the basic two color gradient, linear type and 4.59 angle.

filmprojector82

Copy paste the ellipse and switch its fill values to linear type and –121 angle.

filmprojector83

Copy paste (Ctrl + C, Ctrl + F) this ellipse and reduce its size, then clear the fill and instead assign to it a random color (we are going to change it later).

filmprojector84

Copy paste this ellipse and reduce it size, we are generating a concentric pattern.

filmprojector85

And again, copy paste and reduce its size, this is the final copy we need to make.

filmprojector86

With the next trick we’re going to turn this strokes into fills. Select the three ellipses that need to be changed, then go to Object>Expand and check the Stroke option, after that click OK.

filmprojector87

And now you have the exactly same ellipses but instead of being strokes they’re now fills, which allow us to make some great things.

filmprojector88

Select the ellipses and proceed to change the fill properties to a two color gradient, screen blending mode, radial type, 0 angle and 103.5 aspect radio.

filmprojector89

OK, we need you to select the two initial parts of the reel (the ones we did using the pathfinder) and copy paste them, make sure that they’re placed on top of the rest.

filmprojector90

Select the front object (the darker one) and change its fill towards a two color gradient (purple to black), linear type and –78 angle.

filmprojector91

Copy this shape and paste it on front (Ctrl + C, Ctrl + F), now we need to use the knife tool, pass it through the middle part of the object so you can get two separate objects.

filmprojector92

filmprojector93

Delete the superior part of the element that we just cut.

filmprojector94

And now we need to fill this object, use a two color gradient, linear type, –114 angle, screen blending mode and 20 % opacity.

filmprojector95

We need to fix our reel because until this moment there’s nothing holding it, draw an ellipse for that purpose.

filmprojector19

Use the basic 2 color gradient for the fill, linear type and 84.2 angle.

filmprojector96

Copy paste (Ctrl + C, Ctrl + F) that ellipse and switch the fill to 77.7 angle.

filmprojector97

Copy paste this ellipse (Ctrl + C, Ctrl + F) and move it to the left, then give it a black stroke of 0,26 pt and a basic color gradient, linear type and 85.9 angle.

filmprojector98

Maybe we should put some tiny detail to the tape’s tail.

filmprojector03

And fill it with a solid color, perhaps black is a good choice.

filmprojector99

And for an extra volume we draw a small shape on top of this last one.

filmprojector03

Fill it with a lighter tone.

filmprojector100

7. Other details and buttons

This following shape is a large one, start by tracing it with the pen tool.

filmprojector03

Fill with a solid color (75 % black).

filmprojector101

Draw a new shape to generate the actual volume.

filmprojector03

Fill with a 60 % black.

filmprojector102

And close this volume by making the frontal side.

filmprojector03

Use the 2 color gradient for the filling, linear type, 151 angle and multiply blending mode.

filmprojector103

One detailed object comes next, although it’s easy to do.

filmprojector03

Fill with 72.55 % black.

filmprojector104

And the next shape goes like this.

filmprojector03

Just fill it with a 60 % black.

filmprojector105

And now we need to make two initial elements, let’s start with this one.

filmprojector03

Use a 100 % black for the filling.

filmprojector106

Then comes the shadow.

filmprojector03

Use a 72.55 % black for the filling.

filmprojector107

And now select the whole element and copy it, then paste a total of 4 duplicates.

filmprojector108

A new ellipse is needed, it’s time to make the projector’s lens.

filmprojector19

Linear type, 90 angle and multiply blending mode are the values to be assigned to to this shape.

filmprojector109

We need a 3 color gradient for the next shape, first of all let’s draw it.

filmprojector03

And now, the two color extremes must be black and the center an average gray.

filmprojector110

Now comes an ellipse.

filmprojector19

And the fill parameters should be linear type and –104  angle.

filmprojector111

Copy paste the ellipse (Ctrl + C, Ctrl + F) and reduce its size a little bit, then change the fill parameters to –118 angle.

filmprojector112

We need a few more details in order to complete the lens, first grab the pen tool.

filmprojector03

And use the basic gradient to fill the object, linear type and 81.8 angle.

filmprojector113

Now a glow shape, easy task.

filmprojector03

Fill it with pure white and reduce the opacity to 20 %.

filmprojector114

Next shape goes above the last highlight we did.

filmprojector03

Fill with a radial type gradient, screen blending mode, 50 % opacity and 0 angle, remember that you can move the gradient’s center by clicking G and sliding the gradient handler.

filmprojector115

Let’s speed things up, we still have a lot to do, draw the next element.

filmprojector03

The parameters for this fill are multiply blending mode, linear type and 148 angle.

filmprojector116

And the next one.

filmprojector03

Fill this object with a 84 % black.

filmprojector117

These two were the main shadows, now we need the large object.

filmprojector03

Filling must be composed of a 2 color gradient, linear type and –104 angle.

filmprojector118

After making the large object we proceed making the frontal part.

filmprojector03

The filling parameters are linear type and 126 angle.

filmprojector119

Perhaps we need to give some extra volume by making a new shape in the top part of this button.

filmprojector03

Fill the element using a 2 color gradient, linear type and –70 angle.

filmprojector120

It’s looking kind of plane, let’s add an additional shadow.

filmprojector03

Use a solid color for the filling (84 % black) and reduce the opacity to 50 %.

filmprojector121

The next button goes above the lens.

filmprojector03

The color standards are linear type and 51.4 angle.

filmprojector122

To generate the volume we simply need to add a couple of things.

filmprojector03

Set the fill values to linear type and 54,4 angle.

filmprojector123

Using the ellipse tool, we add the final touch to this button.

filmprojector19

The values are going to be linear type, 164 angle and multiply blending mode.

filmprojector124

And the last button of this section goes between the two that we’ve already done.

filmprojector03

Use a 75 % black for the fill.

filmprojector125

Then comes the shadow, because we are making a realistic icon it’s imperative to pay attention to the light / shadows properties.

filmprojector03

Just use a 84 % black, that will handle it.

filmprojector126

And the highlight.

filmprojector03

This object has a gradient on its fill, linear type, –51 angle, screen blending mode and 50 % opacity.

filmprojector127

We need a highlight on the side of our film projector, easy thing to do.

filmprojector03

And for the fill properties we have: Linear type, –115 angle, screen blending mode and 10 % opacity.

filmprojector128

A few more buttons to improve our icon’s details, use the ellipse tool for start.

filmprojector19

Filling with a solid color (92 % black) and 35 % opacity.

filmprojector129

Copy the ellipse and place it left to the original.

filmprojector130

Copy paste (Ctrl + C, Ctrl + F) the right side ellipse and reduce its size a little bit, then change the fill properties to a 2 color gradient, linear type and –98 angle.

filmprojector131

Again, copy paste the ellipse and reduce its size, then adjust the fill properties to linear type and 79.2 angle.

filmprojector132

And repeat the process, copy paste this ellipse, reduce its size and modify the fill values to multiply blending mode, linear type and 42.6 angle.

filmprojector133

Don’t worry, we are getting closer to the end, one more figure using the pen tool.

filmprojector03

Linear type and –67 angle are the fill values for this shape.

filmprojector134

Once again grab the ellipse tool.

filmprojector19

And the fill values are the following: Linear type and 37.9 angle.

filmprojector135

Copy the ellipse but this time paste it behind the original, you can simply right click>arrange and select send backward, then increase its size a little bit and change the filling values to linear type and –102 angle.

filmprojector137

filmprojector136

One last shadow to the button and we are done with it.

filmprojector03

Fill this shadow with the two color gradient we’ve been using, linear type, 114 angle and multiply blending mode.

filmprojector138

The button to the left is practically identical, it only changes in terms of scale and perspective. The ellipse steps are the same, you can check the fill values above, so you know how to get up to this part.

filmprojector139

And now things change as we told you, so grab your pen tool.

filmprojector03

No further changes to the fill, just linear type and –67 angle.

filmprojector140

Now comes an ellipse, you know what to do.

filmprojector19

The filling values are linear type and 44.5 angle.

filmprojector141

Copy paste the ellipse, move it backwards, increase its size and adjust the fill values to linear and –95 angle.

filmprojector137

filmprojector142

Now the button’s shadow, take the pen tool and trace it.

filmprojector03

And adjust the fill parameters to linear type, 60 angle and multiply blending mode.

filmprojector143

8. The second Reel

Both reels are almost identical, you only need to make a few changes. Copy paste the one that we already have, increase its size and finally, clear the tape’s tail.

filmprojector144

After clearing this element, select the front element that we made using the knife tool and change it a little bit so it won’t look exactly like the original. Now your reel’s copy must be looking like this.

filmprojector145

Now we need to connect the tape from one reel to the other, that takes just a couple of shapes, so grab your pen tool.

filmprojector03

Fill the element with a solid color (92 % black).

filmprojector146

And the highlight of course.

filmprojector03

The fill values for this one are linear type and 37 angle.

filmprojector147

9. Final steps, adding highlights

OK guys, we are practically done with our film projector, the remaining elements are just highlights and details, so hurry up and let’s finish it, grab your pen tool and trace the following shape.

filmprojector03

Fill using a 2 color gradient, radial type and screen blending mode.

filmprojector148

Next highlight goes like this.

filmprojector03

The fill must be in screen blending mode, 20 % opacity and radial type.

filmprojector149

OK the next highlight goes over the right reel (the duplicate).

filmprojector03

The fill goes in radial type and screen blending mode.

filmprojector150

The next highlight goes at the right side of the last one.

filmprojector03

The filling properties are screen blending mode, radial type and –2 angle.

filmprojector151

Now we move to the left reel and draw the first highlight.

filmprojector03

And fill it using the 2 color gradient, screen blending mode and radial type.

filmprojector152

And then comes another highlight at the right side of this one.

filmprojector03

The fill goes in screen blending mode, radial type and –5.11 angle.

filmprojector153

Next highlight, we are almost done my friends.

filmprojector03

Radial type, –20 angle, 92 aspect radio, screen blending mode and 30 % opacity.

filmprojector154

Next goes over the lens.

filmprojector03

Adjust the fill properties to screen blending mode and radial type.

filmprojector155

And beneath this shape goes another one.

filmprojector03

Fill this highlight with the 2 color gradient, screen blending mode and radial type.

filmprojector156

Now go back to the right reel and draw a small ellipse.

filmprojector19

Fill it with white and reduce its opacity to 70 %. Now we need to use a blur effect, go Effect>blur>Gaussian blur and play with the values until you get something you like.

filmprojector157

After playing with the Gaussian Blur we left our ellipse looking like this.

filmprojector158

And now another ellipse above this last one.

filmprojector19

Fill it also with white and reduce the opacity to 70 %.

filmprojector159

Copy paste (Ctrl + C, Ctrl + F) both ellipses and place it in top of the left reel, perhaps you need to perform some scale adjustment.

filmprojector160

Keep copy pasting, place the next one close to the lens. If you see different, try to adjust it.

filmprojector161

The next copy goes at the bottom of the icon.

filmprojector162

And the next copy goes towards the left side.

filmprojector163

And the next couple of copies goes over the buttons.

filmprojector164

And place the next highlight over the lens.

filmprojector165

And the final highlight is not a copy, you need to use the pen tool.

filmprojector03

Use a white tone for the filling.

filmprojector166

The final thing to do is the light, grab your pen tool and draw the shape.

filmprojector03

Fill the object with a yellow tone at 50 % of opacity.

filmprojector167

And now we need an opacity mask. Draw the following shape using the pen tool.

filmprojector03

Fill it with a 2 color gradient, linear type and –26 angle.

filmprojector168

Now click on the right button of the transparency window (having both shapes selected to keep the yellow tone) and select make Opacity Mask.

filmprojector169

And you will notice something pretty cool that will conclude the light element.

filmprojector170

Voilá, our icon has been completed. It’s been a long journey across gradients, stroke shapes and more, we covered every step with careful detail so you don’t have any doubts while making it, let us know your opinion about this and other tutorials. We will keep providing you with the best.

filmprojector171



Related Deals


Related Posts