Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Type 2
  • Overview
  • Transcript

3.2 Typography Skills: Vectorizing Type

This project-based lesson will show you a couple of options (including a cheat’s way!) for vectorizing your own type designs, ready for digitising as a usable font.

3.2 Typography Skills: Vectorizing Type

Hi, guys, in this project base lesson, I'm going to show you how you can dip a toe into the world of type design. And contribute to the ever growing range of digital fonts out there. So whether type design is something you want to pursue or whether you've taken this course, just to learn a bit more about applying typographic skills to your designs. Learning how to create your own fonts is going to be a fun hands on way of picking up some transferable skills, and learning a bit more about the techniques that go into creating the building blocks of typography. Okay, let's get started. For this lesson, you're going to need to open up Adobe Illustrator. If you prefer to use a different vector software like CorelDRAW, that's fine, too. But I'll be performing the demo in Illustrator. So get it opened up, and I'll see you in a moment. Okay, so here we have Illustrator opened. And let's just head up and create a new document from the file menu. Because this course is structured to give you a broad overview of typography, we're not going to delve too deep into type design itself. But, one thing you definitely need to think about is what kind of font you want to create. In short, you need a brief. Is it going to be a serif, a sum serif, something novelty. A professional type designer will have a strong idea of the kind of font that they want to design. But when you're starting out, it can be good to have some prompts. One option is to vectorize some type from an old book, which is a great exercise in helping you notice the forms of older serif styles. If you want to see an example of this in action, head over to typographer Peter Becker's Behance profile and find the gallery for his Vinta font. Vinta is a really lovely, vintage-inspired serif with lots of character. And you can also download it for free. What piece it helpfully shows us is this process for creating that font from sourcing an old 17th century French book. Beginning with a simple alphabet and then using tracing paper to hand draw around the edges of the letters with the trembling hand. Then scanning and reprinting the letters, and screwing up the printer paper by hand. And then unfolding to create a more authentically aged look. Then Peter re-scanned the letters and vectorized them, and then digitized the font. You can certainly try this method, too, if you happen to have some nice old books hanging around your house. And I recommend that you should have a go at a similar method, if you want to delve even further into type design. But for our lesson here, one of the quickest and easiest things for us to do is to learn how to vectorize a sample of our own handwriting. So what I would like you to do first is track down a sheet of paper and a black ink pen. It can be thin or thick, whatever you prefer. All you need to get started is to write out a few letters of the alphabet in capitals. So perhaps just A, B, C, D like I've done here. And try to write as naturally and clearly as possible and experiment with different pattern thicknesses to create different looks. So why do I want you to do this in capitals and not lower case letters? Well lower case handwriting tends to be in a script style, which means that the letters join up. And for your first foray into type design, you probably want to avoid the headache of designing a scripted font. It can be really tricky. Okay, so what I want you to do is pause the video, and write up your hand-written letters. Pop them into a scanner, and make sure the scan is set to black and white, and not grayscale. This is going to maximize the contrast between the letters and the page, and make them much easier to trace. So, go ahead, go and scan your letters, and come back to the video when you're ready. Great, so once you have your scanned image open up in Adobe Illustrator and we're ready to start. When you vectorize type, don't worry too much at this stage about. If the letters match up in size, exactly, or how they will work together as a group. At this stage, you just want to make sure that you have the best basic building blocks that you can get. The first thing that you should do is isolate the individual characters from each other. This will make them much easier to edit. It's probably easier to open up the scan in Photoshop and crop the image to just one letter at a time. And re-save the image as a JPEG and then head back to illustrator and open up your single letter. There are really two ways effectorizing your type. And it really depends on what you felt most comfortable with doing. And how you feel about the end result. If you're working with a simple line-based design like this one, which doesn't have any texture. The best thing to do is to manually trace it using the drawing tools in your vector software. This may seem like a lot of effort, but it's really going to give you maximum control over how the characters are vectorized. If you can, go back to Photoshop and prepare a cropped image of the letter C and then open up this saved image in Illustrator. So go ahead, pause the video if you need to do that now and come back to the video when you're ready. So here we are in Illustrator with our letter C. What you want to do first is expand the layers panel or go to window. And then choose layers, and choose to lock the layer where you have your scanned image sitting. Then you can create a new layer by clicking on the create new layer button at the bottom of the panel. And now you can use the drawing tools to trace over the image below. For letters that are more curvy, like the C, or if you have the curved bowl of a D, for example. Your best pick is going to be the Arc tool, which you can find over here in the Tools panel. And to make those curves look as natural and smooth as possible, restrict yourself as much as you can to how many arcs you actually need to apply. So here, just two arcs will complete the shape. And then you can switch to the direct selection tool by hitting A on the keyboard, and directly adjust those anchor handles, making it fit perfectly to the line of your type. Keep turning the visibility of the layer below on and off, checking back all the time that you're staying true to that original shape. Great. Now drag your mouse across the arcs when you're ready and right click if you're using a Windows computer, or control click if you're on a Mac. And select join, to pull those two arcs together into one single unit. So now, you have your basic shape. You want to bring back in some of that handwritten style, texture back into the vector. And for that, you're going to need to adjust the brush definition of the stroke. For that head up to the controls panel at the top of the screen, and hover over where your current definition will probably be set to basic. Click the arrow and click on the bris libraries menu button, at the bottom left corner of the window. Now, choose artistic and I tend to like the options that you can find in chalk charcoal pencil. So here you can get creative and try to find a close match for your handwriting style. Or you can go for something a bit different. Like something with a bit more texture, like charcoal brushes. I think I'm gonna go with this one, which is charcoal pencil. And increase the weight of the stroke to 1.5 points just to make it that bit stronger. Fantastic, so, that's one method of vectorizing your type. The other method is a bit less sophisticated, but if you're wanting to just have some fun with experimenting creating your own fonts. It's a super simple method. So, this method will also work better with letters that have more detail to their edges and a bit more roughness. Perhaps, from using a big fat marker pen like I've done here for this letter a. Some would say this is the cheats method, but it's perfectly fine if you want to achieve a certain look. So, isolate another letter from your handwritten set and open up the scan in Illustrator as before. Pause the video while you do it if you need to. So, for this cheats method, you need to select your JPEG image with the mouse. An then head up to window and choose Image, trace. Now, expand the advanced option at the bottom of the panel to expand the full panel downwards. And make sure that the mode at the top of the window is set to black and white. Now, click the preview button at the bottom left of the window. So what this is going to do is create quite a crude trace of your letter. With this method, you're always going to lose some of the detail of the original drawing. But with a bit of tweaking, you can come up with a really nice polished result. Let's play around with this a bit. So pull the threshold slider towards the middle, to make the letter a bit darker and get rid of some of those out lying details. And you can also play around with the paths, corners, and the noise sliders to get it looking much sharper. And make sure that just fills is checked, not strokes, so the shape is as simple as possible. And as a final touch, make sure ignore white is checked, too. And then you'll just have the simple black shape with nothing extra going on. So when you're happy with the results, head up to objects on the top menu and down to image trace and choose expand. Right click or control click and choose ungroup. And get rid of the bounding frame by hitting delete on your keyboard. And there you have it, you've got a vectorized letter in no time at all. So, whichever method you choose, whether manually tracing or using Illustrator's image trace panel. You need to make that selection based on the style of your handwriting, such as did you use a thin pen or a heavy pen. And on the result that you want to achieve. Personally, and I'm sure most typographers would agree with me that manually drawing you characters is going to give you the most professional result. And by switching up the brush definition, you can achieve quite a different texture to your type designs while still preserving that original shape. But if you're short on time and just want to create a font as an exercise for yourself. There's no harm in playing around with the image trace panel. What I'd like you to do now is pick your preferred method and vectorize just a few letters, perhaps just A, B, C, D. And when you've finished save each individual letter as an Illustrator or EPS file, and save them, into a folder you create that's titled something like original vector letters. In the final project lesson of the course, we'll look at the next step of creating a digitized font. And explore some of the software options out there that are designed to help transform your designs. From simple vectors to completely digitized fonts, ready to share with others, or use on your own work. That's fantastic work guys. I hope this has given you a little insight into the world of type design. Which is a whole other spin off from the study of typography. But it's a really exciting and ever expanding sector of the design industry. And in the next lesson, I'm going to challenge you to consider whether we can call these digitized fonts art. Or whether our digital age is a less creative era for typography. So stick around and I'll see you over in the next lesson.

Back to the top