New Year Creating a New Typeface in IllustratorListThumbs

New Year Creating a New Typeface in Illustrator

December 29, 2008

When I created the very first version of Abduzeedo I did a simple logo because I didn't have much time back in 2006, I wanted the blog up and running as faster as possible. However after a few months I decided that it would be cool to have a nice and unique logo, but without using any symbol. That's why I chose to create a font instead of using an existing one and with Adobe Illustrator new anchor point features this task is much easier.

Now that we celebrate the 2nd anniversary of Abduzeedo, and the new year that's about to begin we want to share with you how the new Abduzeedo logo will look like.

In this tutorial I will show you how to create a nice typeface using Illustrator CS4 and its new, and very useful, features for editing anchor points.

Step 1

Open Illustrator and create a new document. Select the Rectangle Tool (M) and create a square. To do that just hold SHIFT while using the Rectangle Tool.

Step 2

Select the square you have just created and go to Effect>Stylize>Round Corners. Use 8pt for the Radius, but if you want to make your typeface more rounded just use a higher value.

New Year New Typeface New Logo

Step 3

Duplicate the rounded square. You can do that by moving the object holding ALT. Also hold SHIFT to keep the same vertical alignment. Make sure you have the Smart Guides enable too, this way you can see the X and Y values and the alignment guides as well.

Step 4

Now select the the 2 objects and go to Object>Expand Appearance. That will transform the object allowing you to edit the points with the Direct Selection Tool (A).

Step 5

Now the best part will begin, editing the points and create the characters. Let's start with the numbers to create the 2009. As you have already created the number 8, to create the 9 is easy. With the Direct Selection Tool (A) delete one of the round corners (1), in this case the one going up. After that still with the Direct Selection Tool, select the point (2) and move it down to close the object.

New Year New Typeface New Logo

Step 6

One of the very useful new features in Illustrator CS4 is the Anchor Point Tool Bar. You can Join points, convert the anchor points to corner or smooth, and one of the great additions, align the points. Then witht the Direct Selection Tool (A) just create the other numbers by deleting or duplicating corners.

Step 7

With the number 0, create a line that crosses the number. Use the Line Segment Tool (\) to do that.

Step 8

To create the number 2, just duplicate the 9 and then go to the Transform box. At the very top left corner click on the icon to open more options. Then choose Flip Horizontal. Again with the Direct Selection Tool (A) just delete the marked segment and you will have the number 2.

Step 9

As the numbers are all lines, you can make them thicker by just increasing the value of the Stroke.

New Year New Typeface New Logo

Step 10

To create the other characters, in this case I will do the Abduzeedo word, you will only need to duplicate a number and with the Direct Selection Tool, delete some segments. Here to create the B and D I used the number nine, flipped it vertically and horizontaly, and then delete some rounded corners.

Step 11

The A was a bit tricky but it's the same process, deleting corners. Use the Smart Guides to keep the alignement and also the Anchor Point Tool Bar to join points.

New Year New Typeface New Logo

Step 12

For the other characters repeat the previous steps, you can try different shapes for some characters, like the E, you could just flip the A vertically and horizontally to create the E, but I thought it would be better make it a bit different, then I used the Z for reference.

Step 13

If you want to transfor your characters from just lines to shapes, select all characters and go to Object>Expand. Make sure that Fill and Stroke are selected and press OK. That way what was line become shape.

Step 14

With the shapes you can apply gradients to them, and the new gradient tool in the CS4 version of Illustrator has improved a lot. Now you can change opacities of colors, like we could do in Flash.

New Year New Typeface New Logo

Step 15

The whole process is really fun, you can try lots of different variations for each character and see which one is the best for you. The only problem is that you might get some doubts when choosing the final version, like happened to me. That's why I'd like to ask you which one of these 3 version you think it's the best for the new Abduzeedo logo.

New Year New Typeface New Logo

Conclusion

The new version of Illustrator, the CS4 has improved a lot when editing anchor points, now you can align them, make the smooth or corner much easier. The whole idea behind this tutorial was playing with basic shapes to create a nice typeface, and as I've received lots of emails asking me what's the name of the font I used for the Abduzeedo logo, it was a custom font I did using the same process.

Also, I wish you all a great New Year, and that in 2009 we can improve our design skills even more by sharing our knowledge.

New Year New Typeface New Logo

Video Tutorial

New Year New Typeface New Logo from fabio sasso on Vimeo.

Download the Illustrator File

Click here to download the AI file used for this tutorial

About the author

User picture

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

28 Comments

starlight8612/29/2008

i like no 2..

gummisig12/29/2008

You are a true virtuoso Fabio, you are really helping the graphics design community with this site. It has at least for my part become my favorite stop for inspiration on the internet.

brandi12/29/2008

tossup between 1 or 2

simuse12/29/2008

Happy new year ! Thank you for sharing so many interesting stuff, I learned a lot thanks to you.
Your blog is the best on the web, really.

simuse12/29/2008

By the way I prefer the first one, and I you do too, as you intuitively used it for the tutorial.

fabiano12/29/2008

I like the number 2!

Leo Ferreira12/29/2008

#2 it's great!

Marcel Muller12/29/2008

I agree with Gummisig, you're a virtuoso!

Thanks for sharing!

ezoryak12/29/2008

very nice... happy new years all abduzeedo users.

wozkol12/29/2008

Nice tutorial Fabio, and thanks for the video too. I'd prefer the #2 style.

Drica Sampaio12/29/2008

Opção 2, por favor! Se quiser, faço até defesa! rs!

Awesome site but I'm waitting for the "voice comented" version, anh?! That would help a lot.

Beijos e ótima passagem de ano.

gideon12/29/2008

Number 3 for me....a bit out of the ordinary!

g

Don12/29/2008

Number 2 has my vote.

Daniel12/29/2008

I like 2. Then # 1 and the third spot for # 3.

:)

My Graphic Life

jameshunter7712/29/2008

hey great tut-really appreciate u sharing ure processes-no.2 for me.

Thelis12/29/2008

I prefer no. 1, followed by no.2 and no. 3

1: most consequent typeface (a, u, z, e)
2: I think the you should change the 'u' if you select no.2 (make the hook on the left side of the 'u' disappear, like the a, z, e)
3: I hate the 'a' of no. 3 (even if it's a 'e' rotated 180 degrees)

Anonymous12/29/2008

No. 2 is awesome! that 'a' rules!

TommyFerrell12/29/2008

I prefer No 2. as no one is somehow not convenient for me, too complex. and nu,ber 3 is way too sharp ;)
but thats just me!

Steveonymous12/30/2008

It's not really a typeface, though, is it ... you couldn't use the thing as a font in Word.

ZenMN12/30/2008

It's No.2 for me aswell. Its more similar to the current design, but like Thelis said below: Remove/change the hook on the "u".

Design by Shira12/31/2008

I like #1 because of the a - it's beautiful!

Shira

victor12/31/2008

thanks for sharing. your are great!

Thomasmburu01/02/2009

I would prefer the version #1 for the new abduzeedo logo

anon01/03/2009

thanks for the great tutorial!
i prefer the 2nd one because it's simpler than the first one with the hooks, and the letter "a" in the last one doesn't look as good as the rounder "a's" above =)

AnDy2CooL01/03/2009

Thanks Alot....abduzeedo work always inspires me...:) Great community

BOOING02/28/2009

Amazing tut as allways the only thing i can't seem to make is that cut in the number 9, I juts don't know how to :/

MitchMahoney07/23/2009

i like the 3rd abduzeedo choice the best.
the flipped "e" to create the "a".

here's what i came up with from this tutorial,
thanks for insights :)

digital,future,futuristic,numbers,web 2.0,web 3.0

-Mitch Mahoney.com
(euphoric)

richbugger10/07/2009

is this available for download

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?