Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Realistic vintage vector tutorial

Comments and suggestions in here

Hello friends, did you guys enjoyed our programming tutorial on how to make a nice typewriter contact form?, well if you nailed that one now you’re probably wondering about the design itself, because it’s useless to have the code if you can’t apply it to a truly brilliant design. Don’t panic because now the second part of the tutorial has arrived and we’re about to show you how to make a great realistic typewriter with Adobe Illustrator, so fasten your seat belts and let’s go.


Download Source

Gather references

Before we start to count step after step, there are certain phases that are very important inside any design process that should be always considered. One of this phases is the reference grabbing, which is the period where the designers stare at some similar designs and begin solving his own design.

typewriterAI01

Step 1: Make the document

Once you have decided the look that your typewriter will have, open your Illustrator and create a new document with the following properties:

typewriterAI02

Step 2: Place the typewriter’s shadow

We’re going to start with the shadow in order to define the area that our illustration will occupy in terms of width. To make this shadow you only have to make a white shape, then duplicate it and while reducing its size a little bit you also have to switch its tone to gray. Finally, using the Blend Tool (W), combine these two in order to obtain something like this:

typewriterAI03

Step 3: Make the release lever

We will try to classify each step according to the different parts of our typewriter; we will begin with the release lever. As if we were making an actual typewriter, we’ll have to make each part at a time, so this one is the first object that you must construct:

typewriterAI04

After this, make the next object that will later be part of our typewriter’s lever.

typewriterAI05

Now the next object, this one is filled with a more complex gradient that the one used on the previous two objects.

typewriterAI06

And now we place a subtle highlight object.

typewriterAI07

After doing this, we proceed with the next piece of our typewriter, so grab your pen tool.

typewriterAI08

We won’t make you waste time reading this short lines, so instead of that, just pay attention to each one of the following screenshots and you will be able to make this next part of our machine with ease.

typewriterAI09

Duplicate this object and then adjust its fill parameters for the following:

typewriterAI10

typewriterAI11

typewriterAI12

Finally, add another duplicate of the object we did a couple of steps ago and adjust its fill values.

typewriterAI13

And with that, our lever is ready, check it out.

typewriterAI14

Now we move to the other side of our typewriter to create the next component.

typewriterAI15

And now just pay attention to the following screenshots so you can understand how these parts were actually done.

typewriterAI16

As we did previously, duplicate this element and switch its fill properties.

typewriterAI17

typewriterAI18

typewriterAI19

Finally, add another duplicate of the top element and change its fill parameters.

typewriterAI20

So far this second component is going well, let’s take a look to it.

typewriterAI21

Now we need to add a couple of shapes next to it.

typewriterAI22

typewriterAI23

typewriterAI24

typewriterAI25

And now the second component of our typewriter is ready, let’s see how it looks.

typewriterAI26

Step 4: First part of the housing

To continue with our tutorial, we’re going to make the first part of our typewriter’s housing. We will make a 3D-like object with a fancy texture on top of it, so pay attention to the upcoming screenshots:

typewriterAI27

We duplicate this object and then switch its fill properties.

typewriterAI28

typewriterAI29

And now we duplicate this object and change its fill properties and also its blending mode.

typewriterAI30

Finally the texture, it’s made out of several random objects filled with black and a blend mode set to overlay and opacity reduced to 55 %. You can get creative on this part and make your own texture.

typewriterAI31

Another way of making this texture is adding it directly from Illustrator’s pattern swatches, though if you don’t have one that you like you have to make it manually.

So this is what we have accomplished until this point of our tutorial:

typewriterAI32

Now we proceed with the insertion of a black element.

typewriterAI33

And then another black object behind this last one.

typewriterAI34

Between these two objects, we’re going to insert a tiny gradient object.

typewriterAI35

Step 5: The paper

So now that we have the top of our typewriter ready, we can continue with the design of the paper. You can choose many different papers, including regular paper, parchment, photo paper and more; on this opportunity we’re going to work with and old parchment piece of paper, ideal to use with the whole vintage look that we’re looking for. Let’s start by adding a couple of shadows at both sides of our machine.

typewriterAI36

And now we can start with the actual paper design, so pay attention to these following screenshots, we will place little notes when necessary.

typewriterAI37

typewriterAI38

typewriterAI39

typewriterAI40

typewriterAI41

typewriterAI42

typewriterAI43

typewriterAI44

typewriterAI45

typewriterAI46

typewriterAI47

This is how our typewriter is looking after we completed the paper, pretty cool isn’t it?.

typewriterAI48

Step 6: More details

During this step we will add some elements that we forgot to illustrate previously as well as some new components to continue with the design of our vintage typewriter. Scroll across the next few screenshots to see what you have to do right now.

typewriterAI49

typewriterAI50

typewriterAI51

typewriterAI52

typewriterAI53

typewriterAI54

typewriterAI55

typewriterAI56

typewriterAI57

typewriterAI58

typewriterAI59

typewriterAI60

Step 7: Platen knobs and some other parts

Our advance until this point has been successful and the results speak from themselves. Now we’re going to make the platen knobs of our typewriter along with some other parts that we forgot to illustrate once again, pay attention to these next screenshots so you can easily continue the tutorial.

typewriterAI61

typewriterAI62

typewriterAI63

typewriterAI64

typewriterAI65

typewriterAI66

typewriterAI67

typewriterAI68

typewriterAI69

typewriterAI70

typewriterAI71

typewriterAI72

There’s no need to make the other platen knob, just duplicate it and flip it horizontally :).

typewriterAI73

Now we proceed adding a few more extra elements, take a look to these next screenshots.

typewriterAI74

typewriterAI75

typewriterAI76

typewriterAI77

typewriterAI78

typewriterAI79

typewriterAI80

Duplicate the object that we created a couple of steps ago, then flip it horizontally and place it where it belongs.

typewriterAI81

Step 8: Creating the typebars

What’s up guys?, so far we have been doing a terrific job, now we’re going to proceed with the design of our typewriter’s typebars, which are basically those little metal bars that have the characters printed in and move every time we press a key. So sit tight and let’s continue with this next part of our tutorial.

typewriterAI82

typewriterAI83

typewriterAI84

typewriterAI85

typewriterAI86

typewriterAI87

After doing this, it’s time to make the actual typebars. It will be a waste of time if we explain each one of them because they were all made with exactly the same method, so what we’re going to do is show you how we did one typebar and then you will only have to repeat the process.

typewriterAI88

typewriterAI89

Easy isn’t it?. just two different shapes and you will complete all the typebars of our machine.

typewriterAI90

Using the pathfinder tool (choose Minus Front) and two different ellipses, you need to construct the next object:

typewriterAI91

On top of this element goes and identical replica with a different fill (from solid color to gradient).

typewriterAI92

Step 9: Type guide and ribbon vibrator

This little component of the typewriter is essential because is the one with the mission of align the types and raise / lower the ribbon. Despite of its essential function, designing it on Illustrator requires a little effort from you, so let’s clean this one quickly.

typewriterAI93

typewriterAI94

typewriterAI95

typewriterAI96

typewriterAI97

typewriterAI98

This is going great, let’s take a look to another preview:

typewriterAI99

Step 10: The main housing

OK fellas, we are reaching the final part of our tutorial, we’re now about to start with the design of our typewriter’s housing and later the keys. The most detailed elements are already done, remember that everything is little on the inside but rustic on the outside, which means that this should take us a little amount of time, so come on, let’s get it started.

typewriterAI100

typewriterAI101

typewriterAI102

typewriterAI103

typewriterAI104

typewriterAI105

typewriterAI106

The next object is an exact replica of this last object.

typewriterAI107

The texture is exactly like the one we did before, a series of random objects filled with black and the blending mode set to overlay with an opacity value of 31 %.

typewriterAI108

typewriterAI109

typewriterAI110

typewriterAI111

typewriterAI112

typewriterAI113

typewriterAI114

typewriterAI115

typewriterAI116

typewriterAI117

typewriterAI118

typewriterAI119

Remember that you can press the G key to see the gradient’s axis and edit it.

typewriterAI120

The next object is a 4 point mesh (Mesh Tool) with a reduced opacity value of 39 % and screen blending mode.

typewriterAI121

So far is doing really great, let’s see a preview before we move on to the next step.

typewriterAI122

Step 11: Doing the grid and more inner elements

Our typewriter is almost ready, we only need to add a few more elements including the keys and we will be all set. Don’t forget that if at any part of this tutorial you get stranded, you can leave us a comment with your query and we will solve it as soon as we receive it. Now pay attention to these next pictures to see what you need to do, on this case the first part is a big mesh that you can make by combining several elements and a clipping mask.

typewriterAI123

typewriterAI124

This part may seem a little therapeutic for you but the results worth it, you are going to make a custom shape for every space of the grid and then fill it with the same gradient.

typewriterAI125

Now we continue with this little element:

typewriterAI126

typewriterAI127

typewriterAI128

Now cover this part with our texture, you know what to do :).

typewriterAI129

typewriterAI130

The next thing to do is make another grid just like the one we did before combining several vector objects and a clipping mask.

typewriterAI131

And then we repeat the same therapeutic process, one by one you have to insert the figures between each area of the grid.

typewriterAI132

OK, let’s continue with this next inner shape:

typewriterAI133

typewriterAI134

typewriterAI135

And now we’re going to add a couple of subtle elements that despite their size will add a nice detail to our vintage typewriter.

typewriterAI136

typewriterAI137

Now simply duplicate these two objects and flip them horizontally in order to place them at the other side of the typewriter.

typewriterAI138

The next two objects are going to add volume to the housing, let’s see how they go.

typewriterAI139

typewriterAI140

And now a subtle highlight at the bottom with a radial fill, remember that the G key lets you see and adjust the gradient’s axis.

typewriterAI141

Now a couple of white meshes with screen blending mode, the great thing about the Mesh Tool (U) is that it help us to insert realistic volumes and light effects.

typewriterAI142

And on the other side we place the same white mesh with screen blending mode.

typewriterAI143

To finish this part of highlights and shadows, we are going to insert the bottom shadows that will later will be under the fancy vintage keys of our typewriter.

typewriterAI144

Duplicate this element as many times as keys the typewriter has and you will be done with this part.

typewriterAI145

Step 12: Type levers, ruler details and lights

OK, we’re getting closer to the end with every new element that we create, now it’s time for the type levers, which are easy to do and will contribute  to the realism of our typewriter. The levers are nothing more than basic vector shapes filled with a gradient, let’s see how they are made.

typewriterAI146

The only thing that changes between one and other lever is the size, because the fill parameters are always the same.

typewriterAI147

For the rules we suggest you to utilize a Sans Serif font (Arial, Gill Sans, Helvetica) because it’s easier to read and design with.

typewriterAI148

Now we must insert a subtle shadow on the keys’ region.

typewriterAI149

And now the paper fingers, these ones though they are small are necessary if we truly want to make a realistic vintage typewriter.

typewriterAI150

typewriterAI151

Then duplicate this element and place it on the other side of the ruler.

typewriterAI152

From this point until we begin with the keys, we will be focusing only on lights and little details that will prettify our typewriter’s design, so let’s continue.

typewriterAI153

typewriterAI154

Grab these two objects and duplicate them, then flip them horizontally and place them on their corresponding position.

typewriterAI155

And now we continue with the implementation of a subtle radial shadow on top of our typewriter’s housing.

typewriterAI156

Now another shadow to continue with the beautifying process of our machine.

typewriterAI157

And more shadows to come, let’s dispatch them quickly.

typewriterAI158

typewriterAI159

typewriterAI160

typewriterAI161

typewriterAI162

Awesome, we’re officially done with everything besides the keys, so let’s see how our design is looking until this point.

typewriterAI163

Final step: Designing the keys

Congratulations team, now we’re officially in the final step of this design tutorial, it’s been a fun road where we showed you guys all the things that our design team did in order to create this beautiful vintage typewriter. Now the only thing that remains is designing the keys, we will show you how to do the space key and another one, the rest can be done following exactly the same process, so we’re absolutely sure that you will be able to nail it easily.

typewriterAI164

typewriterAI165

typewriterAI166

typewriterAI167

typewriterAI168

The rest of the keys are made exactly like this, the only thing that changes is the size and perspective of some of them, besides that it’s a piece of cake.

typewriterAI169

Let’s focus on the Space key for a while, the next series of pictures will show you what you need to do next, so pay attention.

typewriterAI170

typewriterAI171

typewriterAI172

Let’s leave the Space key like that for the moment and switch to the rest of the keys because now we need to add a subtle shadow to each one of them. The easy way to do this is duplicate the entire layer where you leave the standard keys and then adjust the fill properties.

typewriterAI173

This is something that though is quite subtle, at the same time adds a lovely touch to the keys. You can play with the gradient’s values from one key to the other so they don’t look excessively plain.

typewriterAI174

Maybe some extra highlight will look good on top of our keys. As we said before, play a little bit with opacity and gradient values to make the keys look more natural.

typewriterAI175

Now we can go back to the Space key and add a few highlights to it.

typewriterAI176

typewriterAI177

typewriterAI178

We’re about to use something new, textures. Make the following shape and fill it with the next pattern, if you don’t see it on your screen then use any other pattern that you like :).

Remember that if you don’t have that specific texture on your Illustrator’s version you can always make it manually.

typewriterAI179

And now we are going to start adding characters, they were all added using the same Sans Serif font (you can choose whatever font you want) and filled with white at 45 % of opacity.

typewriterAI180

Duplicate the layer and switch the fill from white to black, remember to play with opacity values to always give a more natural appearance to the keys.

typewriterAI181

Add some little shadows to a few keys to give them a pressed-like appearance.

typewriterAI182

typewriterAI183

The texture that we used on the Space key, we should use it on all the other keys, let’s go with that.

typewriterAI184

Finally, add some extra shadows to the keys in order to increase the realism of them.

typewriterAI185

Go as far as you want with the shadows, you can place more or less than the amount of shadows that we decided to insert in our design.

typewriterAI186

And for the final touch we added a beautiful logo as our typewriter’s trademark using a retro font inspired in one of our previous tutorials where we showed you how to make a fancy stylish text effect.

typewriterAI187

Ladies and gentlemen, boys and girls, we’re pleased to inform you that our vintage typewriter has been officially completed. It’s been a tough job that at the end has delivered some astounding results that you will definitely enjoy, you can make your own vintage designs, what about an old school telephone or a TV?, the sky is the limit when we talk about design. Leave us a comment so we can read your opinions about this and all our tutorials, we hope that you have enjoyed this tutorial, we put all our best effort in writing this tutorial, we wish you a good rest of the day and well, see you next time.

typewriterAI188


Download Source


58 Responses to “Realistic vintage vector tutorial”

  1. wow! it’s so cool… but so many steps..
    good work, guys!

    • TS Editorial
      April 15th

      You’re welcome :) , we know that this is one of our biggest tutorials but only because we carefully explained everything to show you how to make this beautiful vintage typewriter…

  2. Felipe Silva
    April 18th

    I saw this typewriter in Dribbble and then I landed here, really great job breaking down this AI, GRACIAS!

  3. Wow!  Thats one hell of a tutorial! I don’t know if I am going to tackle this one, but thanks for all that you guys do.

    • TS Editorial
      April 19th

      Thanks Chad, you may want to check our latest shot a Dribbble, another great freebie ready for download http://drbl.in/bdNE

  4. Laurie
    May 3rd

    Totally dig it!

    • TS Editorial
      May 4th

      Thanks Laurie!…

  5. wow thats a fantastic work! well done

    • TS Editorial
      May 9th

      Thanks, what other tutorials would you like to see in our site?…

  6. pitinnnnnn
    June 10th

    wow !!!!!!!!!!!!!!!, veeeeeeeeeeeeeeery C O O L!, job job dude :D

    • TS Editorial
      June 10th

      Gracias amigo!!!, we’re so glad you liked it :)…

  7. SampeiMihira
    June 13th

    Never seen something similar!
    This is a nightmare design… well done !

    • TS Editorial
      June 13th

      Thanks!, how did you go with the tutorial?…

  8. Thank u for posting.

  9. Excellent tutorial,I love this! thanks for sharing.

  10. Mahabub alam
    February 3rd

    I don’t bellieve everyman can do the same as you havedone here, it surely need extremelevel of visualization and definitely hatd work. Its simply tremendous!

  11. valdur
    March 5th

    Excelent !!!

  12. marisa08
    September 12th

    Is there any way to make the squares of the typewriter, at one time? Or you have to make them one by one? Thank you!
    By the way, great tutorial!

    • Designer
      September 17th

      There may be but in the end we think it is better to make them one by one. Thanks for your comment.

  13. Imran
    October 28th

    hi, really great work. Do you know video tutorials of making designs in Illustrator CS6 and Photoshop CS6 Extended version? It will be a great help for me if you kindly let me know.

    Thanks

    Imran

    • Designer
      November 12th

      We will keep that in mind. Thanks a lot for your feedback

  14. I loved doing this one, worth the time and trouble. Quick question…was putting the @ over the number 2 a little fun error? try to trip us up?

  15. [...] sources in AI. Feel free to use this icon in your next project, if u want to know how it was made. pls check the tutorial here at tutorialshock Remember to share us in twitter and say thanks in the comments ! blog comments powered by [...]

  16. [...] How to make a realistic vintage typewriter in Illustrator « Design … Step 6: More details During this step we will add some elements that we forgot to illustrate previously as well as some new components to continue with the design of our vintage typewriter. Scroll across the next few screenshots to see what . There's no need to make the other platen knob just duplicate it and flip it horizontally :) . typewriterAI73. Now we proceed adding a few more extra elements, take a look to these next screenshots. typewriterAI74. typewriterAI75 . [...]

  17. [...] How to make a realistic vintage typewriter in Illustrator [...]

  18. [...] This vintage typewriter was entirely made in Adobe Illustrator and implemented as an astounding jQuery contact form. If you want to know how the vector illustration was made you can visit the original article from TutorialShock titled How to make a realistic vintage typewriter in Illustrator. [...]

  19. [...] – How to make a realistic vintage typewriter in Illustrator [...]

  20. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  21. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  22. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  23. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  24. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  25. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  26. [...] How to make a realistic vintage typewriter in Illustrator In this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  27. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  28. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  29. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  30. [...] Créer une machine à écrire Retro Sans doute le tutoriel le plus complexe, mais aussi le plus complet de cette liste. Apprenez à [...]

  31. [...] 9. How to make a realistic vintage typewriter in Illustrator [...]

  32. [...] 9. How to make a realistic vintage typewriter in Illustrator [...]

  33. [...] How to make a realistic vintage typewriter in IllustratorIn this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator. [...]

  34. [...] How to make a realistic vintage typewriter in Illustrator — [...]

  35. [...] 65.Vintage typewriter in Illustrator [...]

  36. [...] characteristics of her is her lovely red and white coat and these two colors gave me an idea.12. How to make a realistic vintage typewriter in Illustrator Hello friends, did you guys enjoyed our programming tutorial on how to make a nice typewriter [...]

  37. [...] 12. How to make a realistic vintage typewriter in Illustrator [...]

  38. Realistic vintage vector tutorial http://t.co/jjCM0qDy lewat @webdesignshock

  39. “@WebDesignShock: Realistic vintage vector tutorial http://t.co/S4uZSq5a #design #useful”

  40. RT @WebDesignShock: Realistic vintage vector tutorial http://t.co/Z1H9K0Xl #design #useful

Leave a Reply

Comments

*