Adobe Illustrator continues to receive praise from the press. Read our materials to discover the joys of using it on your own.  Home Vector Graphics Adobe Illustrator How to Make a Realistic Film Projector Icon

How to Make a Realistic Film Projector Icon

Browse Pages: 2  > >>

1. Grab references

image 1

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.

 

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.

image 2

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.

image 3

Now, draw the following shape:

image 4

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

image 5

image 6

image 7

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.

image 8

image 9

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

image 10

Next shape, grab your pen tool and trace it.

image 11

image 12

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

image 13

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.

image 14

image 15

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

image 16

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.

image 17

image 18

image 19

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.

image 20

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

image 21

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

image 22

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

image 23

image 24

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

image 25

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

image 26

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.

image 27

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

image 28

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

image 29

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

image 30

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

image 31

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

image 32

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

image 33

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

image 34

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

image 35

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

image 36

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

image 37

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

image 38

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

image 39

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.

image 40

Cover up this object by using an ellipse tool.

image 41

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

image 42

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.

image 43

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.

image 44

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.

image 45

Another ellipse, let's start by drawing it.

image 46

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

image 47

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.

image 48

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

image 49

Take the ellipse for tracing the following figure.

image 50

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

image 51

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

image 52

Now apply the second button of the first row.

image 53

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

image 54

Next shape, just trace it with the pen tool.

image 55

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.

image 56

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

image 57

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

image 58

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

image 59

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

image 60

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

image 61

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

image 62

image 63

And this is the line that you need to trace.

image 64

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

image 65

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

image 66

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

image 67

This object will be filled with a 75 % black.

image 68

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

image 69

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

image 70

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

image 71

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

image 72

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 %.

image 73

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

image 74

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

image 75

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

image 76

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

image 77

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

image 78

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

image 79

And continue drawing, this next shape goes like this:

image 80

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

image 81

Here comes the ellipse tool.

image 82

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

image 83

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.

image 84

image 85

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.

image 86

Then add an ellipse similar to the left element.

image 87

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

image 88

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

image 89

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

image 90

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

image 91

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

image 92

Take the pen tool for start tracing our next figure.

image 93

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

image 94

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

image 95

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

image 96

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

image 97

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

image 98

Another shape in front of this last one.

image 99

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

image 100

And the next shape goes like this:

image 101

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

image 102

Next object is very simple, it goes like this.

image 103

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

image 104

And now comes the next object.

image 105

Fill it with a 100 % black.

image 106

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

image 107

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

image 108

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

image 109

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

image 110

And now the next shape.

image 111

Fill with a 60 % black.

image 112

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

image 113

This shape is filled with a 50 % white.

image 114

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

image 115

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

image 116

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

image 117

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

image 118

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

image 119

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

image 120

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

image 121

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

image 122

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.

image 123

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

image 124

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

image 125

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.

image 126

image 127

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

image 128

image 129

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.

image 130

image 131

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.

image 132

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

image 133

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

image 134

Use the ellipse tool to generate the next object.

image 135

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

image 136

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

image 137

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).

image 138

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

image 139

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

image 140

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.

image 141

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.

image 142

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.

image 143

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.



Author's URL: tutorialshock
Browse Pages: 2  > >>
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Adobe Illustrator continues to receive praise from the press. Read our materials to discover the joys of using it on your own. More Adobe Illustrator Tutorials: Featured Materials | Fresh Materials | More Adobe Illustrator Tutorials at Vectorials.com

No comments yet...
Add comments to "How to Make a Realistic Film Projector Icon"

Captcha