create a zee vintage label on illustrator

7/27/2019 Create a Zee Vintage Label on Illustrator

1/71

Create a Zee Vintage Label on Illustrator

Tags

illustration illustrator label photoshop retro tutorial type Typography vintage whisky zee

It seems that the past 3 years had a boom of retro design, starting with

the "cosmic neon lightning" 80's aesthetic that I think most of you arealready bored about. Not just because it became a trend, but also because

everyone with a photoshop could emulate one. So here's the thing, this

new retro wave more focused on 50's and 60's design and illustration

seems to be really different, why? Because most of it is hand drawn, and

when it to comes to drawing, you wouldn't believe how many designers

can't do it.

Let's assume, the last 20 years were pretty revolutionary to design since the computer

took a big role on productivity and creation. But he also created patterns and made

things more similar, some designers can't even work "old school", since they rely toomuch on the computer and that's not good. Drawing is a really personal rechnique, you
http://abduzeedo.com/tags/illustrationhttp://abduzeedo.com/tags/illustrationhttp://abduzeedo.com/tags/illustratorhttp://abduzeedo.com/tags/illustratorhttp://abduzeedo.com/tags/labelhttp://abduzeedo.com/tags/labelhttp://abduzeedo.com/tags/photoshophttp://abduzeedo.com/tags/photoshophttp://abduzeedo.com/tags/retrohttp://abduzeedo.com/tags/retrohttp://abduzeedo.com/tutorialshttp://abduzeedo.com/tutorialshttp://abduzeedo.com/tags/typehttp://abduzeedo.com/tags/typehttp://abduzeedo.com/tags/typographyhttp://abduzeedo.com/tags/typographyhttp://abduzeedo.com/tags/vintagehttp://abduzeedo.com/tags/vintagehttp://abduzeedo.com/tags/whiskyhttp://abduzeedo.com/tags/whiskyhttp://abduzeedo.com/tags/zeehttp://abduzeedo.com/tags/zeehttp://abduzeedo.com/tags/zeehttp://abduzeedo.com/tags/whiskyhttp://abduzeedo.com/tags/vintagehttp://abduzeedo.com/tags/typographyhttp://abduzeedo.com/tags/typehttp://abduzeedo.com/tutorialshttp://abduzeedo.com/tags/retrohttp://abduzeedo.com/tags/photoshophttp://abduzeedo.com/tags/labelhttp://abduzeedo.com/tags/illustratorhttp://abduzeedo.com/tags/illustration


2/71

will ever found two persons who will drawn a flower the same way, even with they

pratice it. I think that's a thing this trend is rescuing. But, before someone asks, today's

tutorial it's not about drawing, it's more about emulating, but sure you should thing

about this subject.

Step 1

First of all, let's open Adobe Illustrator and create a new canvas with 21 x 21 cm (8,27 x

8,27 inches).

You probably already know I'm addicted to guides, they're quite useful to get layout

orientation, but not exactly a need to. But If you want to use some, just unhide them

(command + R/ ctrl +R) and pull from each axys to the position desired.


3/71

You should divide your layer like these, use command + L / ctrl + L to create new

layers.

Using the rectangle tool (M) make this big square that fits over the canvas.


4/71

Make a rectangle inside, using the previous tool.


5/71

And another black one inside the white one. You can use the pathfinder option called

Minusfront here, but it's not really necessary.


6/71

Step 2

Make this thin rectangles around the borders, use the align tool to help you out.


7/71

Then go to the pathfinder panel and choose the option called Minus Front.

Uisng the ellipse tool (L) make a circle with the center exactly on the edge of the black

square. If you're using guides this will be way easier to posicionate.


8/71

Again, using the Minus Front option, get ride of this part on the square.


9/71

Repeat the same procedure on the other corners.


10/71

Using the ellips tool (L)let's make this circles filling the space the orther one took.Select the cirlce and the frame, then go to the pathfinder panel and choose the option

called DIvide.


11/71

You're going to get this:


12/71

Just repeat the same proceure on the other corners.


13/71

Step 3

You probably already kno the hard gradient trick (aka. hachures), he can be really handy

when trying to create a stylish frame. Using the polygon tool create a triangle. Then

resize it using the selection tool (V) to make it thiner.


14/71


15/71

Tunr it black and make a group of at least three triangles that fit the white rectangles

space on the frame.

Copy and paste on the other spaces.


16/71

This is a new trick a learn recently: create a square using the rectangle tool (M), thenuse the pucker tool on it, just set all the options to be lesse heavier.


17/71


18/71

You should get these flower shape:


19/71

Place it on the corner, then create another one inside of it with a white fill. Also add acircle inside of the last one.


20/71


21/71


22/71

Let's make a circle using the ellipse tool (L), then another one but in the corner.


23/71


24/71

Also make some leaf shapes using the pen tool (P). Copy and paste all this shapes onthe other corners.


25/71


26/71

Step 4

Let's make the type, you can get this fonthere. First make a circle using the ellipse tool

(L), then use the type on path tool, you can find it on the text type menu, it' pretty easy

to use. I just wrote "Design and Web Development", then press command + O / ctrl +

O to turn the type into curves.
http://www.fontsquirrel.com/fonts/SeasideResortNFhttp://www.fontsquirrel.com/fonts/SeasideResortNFhttp://www.fontsquirrel.com/fonts/SeasideResortNFhttp://www.fontsquirrel.com/fonts/SeasideResortNF


27/71


28/71

I just copied the previous flower ornament and changed the colors to give contrast.Paste one on each extremity of the type.


29/71

Let make a circle using a white fill and a black stroke on it.


30/71

Access the stroke panel and choose to use a stroke inside the path, also add 7,53ptdashed line on it.

Using a black fill, I wrote "by" using the same type.


31/71

I dig a lot those old icons used on books and ad's with a more simplified shapes. So, as away to symbolize the Design and Web development, I decided to use a brush and a eye.

Let's start by the eye, make two circles, one with a fill other with just a stroke.


32/71

More two circles inside of the white one.


33/71

Make this dashes around the iris using the pen tool (P).


34/71


35/71


36/71

Let's make a brush, first draw this pieces using the pen tool (P).


37/71


38/71


39/71


40/71

Using the previous tool, let's add this reflexes.


41/71


42/71


43/71

Now duplicate all the shapes and just right-click on it, go to Transform > Reflect, turnthe Vertical Axis.


44/71


45/71


46/71

Step 5

You can grab Snake Oil Font atLegacy of Defeat, I must say I'm addicted to this font.

First you should write "ZEE", then curve it before anything command + O / ctrl + O.
http://www.legacyofdefeat.com/http://www.legacyofdefeat.com/http://www.legacyofdefeat.com/http://www.legacyofdefeat.com/


47/71

Make a lot of thin rectangles using the rectangle tool (M), then use the align tools tokeep an order on them. Doube-click on the letter of the type (not the shadow areas) and

duplicate it.


48/71

Make a clipping mask all over the rectangles using the letter shape (command + 7 / ctrl+ 7), repeat this procedure on other letters.


49/71


50/71

Also added a simple detail using the pen tool (P).


51/71


52/71

Step 6

Let's a make a trapezium using the rectangle tool (M), then adjust it using the direct

selection tool (A). Duplicate it and sue the option called Unite.


53/71


54/71

I made tis folds on the ribbon by simply using the pen tool (P) and space between theshapes.


55/71


56/71


57/71

Add some of the hacures used previously. Just don't forget to add a clipping mask onthem and using the direct selection tool (A) leave a space between it and the original

shape.


58/71


59/71


60/71

You probably already familiar with the blend tool. In order to get a hard gradient usingit, you just need to make two rectangles, one large and one thin. Then click on the tool

icon and a panel will pop up, set spacing as Specified Steps and use just 5.


61/71


62/71

Grab the result and place it on the ribbon letting, duplicate it and reflect it. Then finallyadd a clipping mask over it.


63/71


64/71


65/71

OLd trick: Write Est. 2004 using thisfont. Then write agian over using a black fill, justto make a hard shadow.
http://www.dafont.com/headline-hplhs.fonthttp://www.dafont.com/headline-hplhs.fonthttp://www.dafont.com/headline-hplhs.fonthttp://www.dafont.com/headline-hplhs.font


66/71


67/71


68/71

Step 7

We need to add some grain in order to give that used look. We will need a little help

from Photoshop so. Open it and make a squared canvas, place the whole art as a Smart

Object.
http://www.flickr.com/photos/marcostorres/6125565267/in/photostreamhttp://www.flickr.com/photos/marcostorres/6125565267/in/photostream


69/71


70/71

Conclusion

Trying to simulate vintage design is more about rethinking how people would create

such graphics in a era without computers and, of course, lots of references. Most of the

things done on the 50's and 60's were hand made, even If they look really sharp and

clean, the methods and techniques were pretty basic. So part of trying to reach this


71/71

aesthetic is to going back to what i call fundamental: drawing technique. If you don't

know how to draw what you do on the computer, you should definitely worry about,

because a good designer can't rely only on a tool. That's it. thanks for you time, hope

you enjoyed it.
http://www.flickr.com/photos/marcostorres/6126110352/in/photostream/

create a zee vintage label on illustrator

Documents