How to create a letter builder to draw consistent letters | Jéssika Rocha | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to create a letter builder to draw consistent letters

teacher avatar Jéssika Rocha, Creativity & Productivity

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (47m)
    • 1. Introduction

      1:31
    • 2. Class Project

      1:34
    • 3. The Basics of Letter Structure

      13:05
    • 4. Letter Guide Construction (Part01)

      12:06
    • 5. Letter Guide Construction (Part02)

      9:42
    • 6. Creating a Template Brush in Procreate

      8:00
    • 7. Final Tips

      1:30
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

22

Students

--

Projects

About This Class

A big struggle even for experienced lettering artists is to make every letter consistent so the final piece looks good and pleasing to the eye. To do that you need some knowledge in letterforms, but even so, how do you make sure your letters come out consistently drawn?

In this class I will tell you the secrets! I will teach you how to create drawing guides to create any letter of the alphabet and guarantee your lettering is beautiful at the end. You will also learn how to create Procreate brush for easy access to you guide. You can extrapolate everything you learn in this class to any other app and any other format of letter.

This will give you a powerful tool to make your creative process easier, after and stress-free.

Meet Your Teacher

Teacher Profile Image

Jéssika Rocha

Creativity & Productivity

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello and welcome. Throughout this class, I will teach you how to create your own digital lettering guides. You then use this excuse to create your own set of brushes or templates for your drawing app of choice. I am just curled shocked. I am a designer and a lettering artist based in Brazil. I let her for work and for fun. And from one in five years, I've been developing my skills. My main media is digital and the iPad or on a computer. To make my life easier, I compiled a set of techniques, guides that help me draw the letters more easily, quickly and consistently. In this class, I'm going to show you how to do the same. This course is aimed at designers and lettering artists in any level who are looking for a way to streamline parts of their lettering process and get amazing results in less time. You can also use the techniques learned here to develop a new alphabet and perhaps even your own phones in the future. By the end of this class, you will be able to create custom brushes for Procreate or any order design or drawing app of your choice. I hope you follow me in this learning journey to make our creative process efficient. And in the next class, I will show you details about our project. I see you there. 2. Class Project: For this class project, you will create a letter guide, brush or a template, something that you help you to draw letters in a more streamlined way, faster, quickly, and more consistently. You going to apply this brush or distantly to your drawing app of choice? I encourage you to post your creations in your results in the broke, the project section so we can all share tips and learn from each other. We will be using Procreate for this class because it's one of the most popular apps for digital drawing in lettering that is out there. Just know that you can adapt everything that I teach you here to any other app. I'll even show you how I use these techniques to facilitate my creative process. In order apps. I use an iPad Air 4, but again, you can a 100 percent adapt everything 82 here to your own tools. Be an iPad with an Apple pencil, or any other tablet with any other software in any order, stylus. I hope you'll follow along with the class project and post your results in the project section below. Everything I mentioned during the lessons will be linked to now, including helpful guides, tips, and exercises to help you along the way. If you get any questions, just ask and I will be glad to help you. That's it for the class project NICU in our first lesson. 3. The Basics of Letter Structure: Welcome to this lesson and before we start building our letter guides, I want to talk to you about letter is structured because it's going to be really important when we are creating our guides. So let's start with the basic, the alphabet. Those are the letters. We know. Those are the letters we use for lettering. And I like to divide this alphabet into four main types of letter. The yellow ones you can see the screen RD is treat letters. They are made all of his streak lines there are either horizontal or vertical always. Okay. And then we have the green letters. There are the straight with angles. They are always straight matters as well, but they have angled lines in some parts of their structure. You also have the blue letters, which are straight with the course. They have a straight part, but they also have some curves and some bowls that are part of the main structure. And the pink ones are the curves delighters. They are mostly rounds. They have curves, they have circles of some kind, ovals. Their main structure is really curved. So those are the types of letters. And we have to create a guide that can adapt to all those particularities that each one of them has. So let's see how we do this. First of all, I want to introduce you to our magic. Great. Is this one. These three by five grid is the basic template for any letter guide that you ever created for all now one, okay, with this guide here, with this base 3 by 5, you can create any letter in the alphabet. And I'm going to show you how. Let's put our letters inside this grids. And you can download the PDF in the project section. And I went ahead and put all the letters into the the grids. You can do that yourself as well to practice and see how the structure works. But let's move ahead with my drawings so that you can see how it is. So here's your alphabet, all in the grid. On the first look, we have children as some things. First of all, you can see that the letters I am and we'll, they are a little bit special. They ease out a lot narrower than the other letters. While the M and the W is our wider than the other letters. But nonetheless, we can use the same grid to create those to the three letters. They, I just stay in one of the three sections and they M and the W means that I duplicate my grids, show the side so that I can see those letters. But this is just a small adjustment that your guide is going to be able to help you to do. Because those letters, they are, after all, symmetrical. So if we do our basic guides in our created templates, we can produce half of this ladder than they can produce the full adder with no problem. Okay, So don't worry about those letters being in a different size proportion than the other ones. Okay. That's going to be addressed. Some other thing that I want to address before we start building up our guide is that some of these letters, and I'm going to start marking them here. They are going a little bit of of our guide and they're quite out of letters that are doing that. Mainly the angles and the curved ones. And that happens because something called optical adjustments. Those optical adjustments, they help us to see the letter shape better and in a more consistent way together with the straight layers. Because if I finish here as I did now, and I start looking at the fully street letter. You can see that they fit perfectly within our grid. And they are basically little rectangles, right? You can do that. So every water is red letter and you can see that they are rectangles, perfect rectangles. However, we do have this thing called optical adjustments. What happens is when you have a rectangle, or in this case here, a square. You can see that it basically fills up all the region between your job in your bottom lines, right? Yeah. But when you have your circle, you have some missing parts around the circle. And also with your triangle or an NGO or shapes, you have a lot more space missing. For our eyes, these missing is spaces there. They make these shapes seem like the ER is smaller than the square, then the rectangle, even though they have the same height here. What we'll have to do is make those two shapes a little bit bigger. Make them go a little bit over the edges so that it doesn't seem like the, the shape is so small compared to the street ones. So you can see then now we have our round parts going a little bit off the lines in our points going also a little bit of those lines. So that's what we did with the sliders. That's why they go a little bit off the grid. Why is this important? Because when we use these basic grid, we kinda have to eyeball it a little bit to draw the letters. But when we finish designing our ladder grids, you're going to have a template that help you do that, that is already set for you. The round parts are already of, the angular parts are already off and you can just draw your heart away. Okay, So what we gotta do now, and again, you can go back to the PDF institute more those ladders to be a little more familiar with their shapes and how they work in the basic right grid. But now we want to put those angles and those circles inside our templates. So what we're gonna do ease. Use these X shape here for letters like the X and the Y. They are going to need this. And we also have these AZ shape for letters like the a, the v, w. Okay? They are going to need that. We also have to put those two sets of circles for letters like the p, r, b. And we need a B round, oval or circle for AU, CG and letters such as those. Okay, so we're going to incorporate those extra for its structures inside our base guides. And that's going to be done in our next lesson. But before we go to the next lesson, I want to leave you with some homework because you are going to decide which basic grids you going to use before we add those four new structures, I showed you these regular basic grid. That is a three by five. But Amy tree by five grid view do you can have some narrower parts and some wider parts for your grids. You the site. Okay. Just made sure that everything is symmetrical because that's going to help you. You can do asymmetrical structures, but that's gonna require you a little bit more planning and you have to adapt some lines later. And that's going to be a homework for you after this course ends. For now, let's try something regular or symmetrical that you can use to learn how the structure works. And it really works. As you can see, you can create different types of letters, different letter shapes with different guides. And you can have some heavy tops and bottoms. You can have some lean letters, some regular sized letters. It depends on how easy it is. You're drawing your grid, your grid, your base grid. So your homework for this lesson is create your three by five bays. Okay? You need a three by five bays and you can either use one of these templates that I have here. You can adjust the sizes that I gave you. Here. You can do how you want it, okay? And remember, after this guy is finished, you can create every template you want just by changing these base that you're using. So this basis really, they start point to when you choose it, you got to have a base to work off of and create your structure in your template. And then you can start creating any other template that you will ever meet. For this class. I'm going to use the regular one. But I'm going to be commenting on how you can use any of the older ones and what adjustments, size in angle in proportion we're going to have to make to the structure should make them work. So don't worry if you want to choose something different. I'm just going to do the regular one because it's going to be easier to understand the concepts and they work flow of things. And then you can adopt anything to anything you want. Okay, So this is it for this class. Now, I will see you in the next, the next lesson where we're going to start constructing our template for real. I see you there. 4. Letter Guide Construction (Part01): Welcome to this class and in this class and what and teach you how to properly create every step of your lettering guide, your letter guide. So I'm going to do this in procreate here just because I want to show you exactly the lines and circles and everything that you have to do. But you can absolutely do yours in any other software. You can do that on using Illustrator, using actually a 1.5 here. That's my guide, Affinity Designer. It's the one that I use and I can open up to show you. So I use affinity because I like to show have the corals and adjust that. The only reason I'm going to show you in Procreate is because it's just going to be easier to show the lines around and it's going to be quicker to draw them. And then you can pick those disinformation and go to any other program that you prefer and you feel like choose Procreate. You can do that in Procreate. And it's not your problem. Actually, you can import directly your design to your brush creation that we are going to do in the next lesson after this one. So let's just start and I am going to use a puppet leader. It should put in a, in our brush. And I'm going to use the standard. You can use the centered square. This is square root three k here, which is 300 pixels by 300 pixels. And I'm going to use that because I think it's big enough. First thing, I like to use scholar white. So I'm going to put black as my color. And I'm going to activate, in the Canvas section, I'm going to activate the grid, the drawing grids. So it's here. Drawing grid. I hope you can see that this edge is yes. And I'm going to adjust this greed by editing drawing lines. And I'm gonna make it bigger because I want my templates to feel most of the canvas. Okay? So remember what our base was. It was five. He squares and height. Entry is squares in length. And as I said before, I'm going to do a regular grid here, happy regular guides, but you can adjust that if you want something else. And I think this is enough. If it's a little bit small, I can adjust the leader and increase the size, but this is enough for me. Oops, I mentioned the color guard row here. Now it works. And the brush I'm using is one of my brushes. I created this site called ninja brushes. And I'm going to leave a link in the description section, in the project section if you want to download it. So it has a few brushes that I tailored to my likings, just basic brushes that I like. And I'm going to use the mono brush. But you can also actually, I'm going to use one brush that is already in Procreate that you guys came have to, if you're following them, procreate and eats the mono line, that might be in the T section. I think. Probably. I don't remember anymore where it is. Oh, it's in the calligraphy section, at least for me, this is the British monoid. A monoline brush will do. Okay. And believe me, with the size to see which 11. I think I want to start with these. A little bit. Bigger size. Like I'm almost in the middle here, but it can I just see your liking when you're using your procreates? I'm going to use that. And the first thing is to create our base gray guides three by five. Okay, so let me just come here. 1, 2, 3, 4, 5. And you remember that I have three columns. And again, I'm not trying to be super precise here because I just want to show you how to draw the templates so that you can do that in any program that you want. But when you doing it, make sure you have the same lines. You can copy and paste names. Okay. I just, I'm just trying to be a little bit quick here. So the class is not that long. I'm just going to vanish this Basic Guide. And in Procreate, most of you will know if you hold your wine before lifting your pencil, it's going to make a straight line for you. That's what I'm doing here. Okay, So this is my Bayes guide tree by five. And if you want to make some difference in sizes, remember only that these first column and these last column, they have to be the same length. Just to make proportions work, you might come up with a great day, has different sizes in all things. But I find that cemetery helps here to make beautiful letters. But you do you, okay, basic grid is here. And if you are super organized like you wanna rename your layers, but not necessary, it's optional. And I'm going to create another layer to make the other parts of my letter guide just for safety. If I decide to erase something later or change angles later, maybe in another DAY to change a little bit. This template, I have things in separately here, so that's a good practice for drawing in general, in Procreate any drawing software. Now, remember what we have to do chore B's guides. We want this shape to be here. We want this shape as well. We want those two circles and a full circle. Let's start with an angle. In. Remember, we had in this regular reads, I went to go a little bit over our guide just to make sure we have our letters that are a little bit triangular, optically adjusted. Okay? So what I'm going to do here is start a little bit of income out a way to this point right here. So that's my first angle. And to make sure that I have the same angle in all the lines. And I'm going to repeat now. I'm just going to copy this layer. So duplicate. And now you can move this one and try to be a little bit symmetrical, which I did not. But let me just decrease the size so I can see what I'm doing here. T. And now what I did was this point is connecting these new line here. And since it's a duplicate, they have a perfect angle. They are the same. And now this shape we trying to do is this one. So what I'm going to do now is merge those two layers. And I'm duplicating it. Now I select and I flip it horizontally so that I have the perfect match for it here. Okay? And once again, I'm not trying to be perfect here because I just want to show you how it works and you can do your own thing and put things centered perfectly on your own software, even in Procreate, you can do that. Okay? So we have our x here, which is going to be our Y as well. Now we need a, a, n, z, and w, and all the B's angled shape that is going to serve our, our base for a Donahue these. So I'm just keeping those layers separated. And I'm going to create a new one and I'm not gonna rename them right now because it's just going to take time for me. And now I want to create that angle, a V, okay? And I'm just going to do it in the shape of an a, because when you create a v, you just flip it and it's going to work fine. Okay, Now, to do that, what I'm going to do is connects this point right here and a little bit off in this point in the top. Okay? So this is our first line. Again, I'm going to duplicate it. And just beats and tissue. These points meet right here. And if you have the snapping feature in Procreate right here is not being selected, it's going to snap there. And you're going to know exactly the point. That's going to help you eat proportion of things. Okay, so I have half of it. Now, I merge the layers, duplicate it again, select, and flip horizontally once more. And now I can just connect things here. Oops. Okay. And see, this point is connected. This point is a little tiny bit off. And now we have the shape for the a. 5. Letter Guide Construction (Part02): And now we need the circular parts. Let's just start with the two circles. So first thing I'm gonna do, it's going to increase the size here just so that I can get a circle in the sports and SQL a shape. And I added my circular shape again. You draw, hold your pencil before lifting it up. And it's going to create a perfect circle, almost perfectly. But if you put your finger down, it's going to be a perfect circle like this. But I went to a ellipse and I'm going to just adjust a little bit as points so that I have the top and the bottom, and the left and the right. And you can just adjust them here. And remember our optical adjustments, I'm going to just let it go a little bit. The grid, but this one, I want to keep it in the bottom here, just to keep the, this back eight shape. And you're going to see the end, that it works. Okay, so now I have this circle and I need a bigger circle around this one. So let's do basically the same and don't worry, to be perfect. You can correct those huge gaps in the edit shape. So again, I'm going to just see these points is right in this line here, the third square, third line. And I'm just going to adjust this a little bit because I want there going just a little bit off the grid. As a good practice is basically you want to keep almost as much as you have gone off with this first circle, right here in the second one, so that you keep the distance basically the same, basically consistent. So I'm going to do more unless the same. Okay. So there is, and the top has to go a little bit off the grid. Okay, we have this one. Nice, Awesome. And for this one in the bottom, you can, if you want to just duplicate this one and bring it down, let me do that. Okay. I saw a duplicate with everything in the screen for you to see. And this point right here has to be right in this line. And you're going to have the same circles here. But another optical adjustment that you can make. And then I think give a little bit of style and make the letters look better. Ease that this part in the bottom, let me quote to fruit free form so that it doesn't scale. You just scale in one side. And I like to make it a little bit bigger than this one. And maybe you can make a lot bigger than this one so that you have a different style of letter if you want to. But the reason is if you look two phones near a computer, usually the B, the bowl of the B, the bottom, this bottom ground parts. It's a little bit bigger than the top part. And you can check it in mobile phones in most of the classical fonts. You'll have that. So I recommend you do that. Oops, yet, so a little bit bigger here. So that's it. We have our two circles, and now we need that bigger circle right here. So it's going to go around and everything is Napa in place and edit the shape. And then icons. And I just the points perfectly or almost perfectly. I'm not trying to be perfect here. Outlines. And for the circle here, the horizontal part, you can adjust how much you want it to be. Do you want a round letter or do you want something more narrow? Like this? That's up to you, okay? With once you're happy, just go back to your brush. And now we need the inner circle in here. So it comes around those two is smaller. And this is snap it into place. And I'm going to edit the shape. Outline. This top with the top of the circle and this bottom, the bottom of this circle. And again, try to keep this distance consistent as much as you can. Fake or not. If you want to have a more distance, you can't and you're going to have a different style of letter to work with. But for me, I'm going to keep this regular. So you understand the bring suppose E. So that's it. Our guide is ready and you can go already and refine these connections here. I'm just creating my boolean is just to do that so that you have a foo connected line. Again, not be perfect and just want to show you how it's done so that you can do it yourself. And again, as you can see, it's not perfectly aligned. I want to be here to show you and then you can take your time to do your thing. So now we have our basic guide. Again, you can decrease or increase those sizes of the basic gray, basic grid. To make some different styles. You can make these angles a little bit narrower as well, to make a different style, as well as the difference between the circles. It's up to you, the sigh of letter you want to create. Okay, and that really works. Let me show you. We can other color. Let's say I want to create a letter and I'm going here to a sketching any pencil will do. I'm just going to my pencil present a relay. It's already set. Should be quick to draw. And let's say you want to draw the S. We're going to have this guide here to help us draw our S almost perfectly. I'm just trying to show you that this works. So I have a basic guide for my S and I can feel things in here. And it's going to be beautiful. And you can draw your T in here. Like so. You can do your E and just put things in theory, please. And as you can see, we have an aid in here. And if you want to draw the VI, you just pick this thing and slip vertically. Even if you agreed is teal let me just group things here so that I can hide and show them weekly. Even if you agreed is not in the correct angle. Now that you flipped it, you have a V, okay? So yes, you can create any letter you want using this one. And again, for the for the W or M or other later that basically is going off our lots from our guides. You can just draw half this letter like this, be your become but V, and now this V can be, duplicate it. If I do this correctly, I have a W that I can feel and do my thing here. Okay? So, yes, this guy here is perfect. In the next class, I'm going to show you how to churn this or any other template that you've created using these rules into one brush in Procreate. So ACA in the next class. 6. Creating a Template Brush in Procreate: Okay, We are back is showing Procreate because now I want to show you how to turn your design, your lettering guides. The one that you created in the last class, beats the same as nine or a little bit different, a little bit tweaked for your liking, for your sizes, doesn't matter. Turn it into a brush that you can use to create your letters. I usually do that by creating a new sets. And you can just Good, come here and bring your sets down and aids country to new sense. And let me call these brushes, for example. To worry about that. And in this plus sign you can see it's empty. I go, I'm going to create a new brush. So it's here, basic brush. And now we want to turn this one into our lettering guide, this 1. First of all, let's center this one and make it a little bit bigger. How do we do that? I groped everything in the list. The last time. You just select everything and click in group. Okay, that's what I did to make everything to one group. And now that's one group and selected, I can press this arrow tool. And if I do, I press this button here, Fit to Canvas. It's going to fit my Canvas. But I noticed a good practice in Procreate brushes is that you don't go right to the limits of your Canvas. So make sure your uniform so that you don't discharge your work. So I just decrease a little bit. And that mice neck feature is here so that it shows me the center of the canvas. And that's it perfectly in here. I'm just going to go here each of my tools. And now I come to ads. I click on the Copy canvas and it's going to copy all of this design that is showing here. Go back to my brush, click on it, and I'm in the brush studio. What you want to do is go to Shape, Edit, import and pests, because we bought that design into our transfer area. We caught it. So pass it here. And you see that whites at bike on white, we want white on bike. So what you do is press, we show fingers and it's going to invert the colors so you don't have to invert them in your drawing. You can invert them here, okay, now it's set. You click Done. And now we're going to go to the stroke path. And you're going to put the spacing to the maximum. Because we want this to become a stamp or a basic guide that separates every single one of our lettering guides. And you can adjust the space to be a little bit closer so that you can see them separated but not that distant from each other. And now I want you to go to dynamics or peso Apple Pencil because I don't want damn sure to be working with my III pressure sensitivity. I want you to change that. So let's come here and put opacity to the, to none so that it doesn't matter how much pressure you protein, you're creating your, your guide in the same transparence, basically. Click Don again. And now you can see your brushes here. I guess you can call, go back and About this brush. You name age, you can put your little picture in here. You can sign is however he wanted. Hey, you're going to have it here. Okay. But now let's just try it. I'm going to create a new layer by layer. And I'm going to disable this one because I want everything blank. And I have my brush selected already. I can play with the size here. And now I have this guide. Let me go tree like fan when it's virtue sketching. And I can eight letters. So now I have my guide and my letters are going to be consistent and I am not going to worry too much about their sizes, about there being in the same style of letter because I created a guide just to help me with that and not be perfect here, but you get the idea right? Now. One thing that you can know this here is that this size is not that big event in the maximum, so we have to ingest that the brush is study. Now let's go to our work Properties. And you have that minimum size and the maximum size and you can increase that, see how much it goes huge. That's why I recommend using the 300 pixels by 300 pixels Canvas because you can go really big with your brushes. But I, I, numbering 0 that way. So this is fun. Let's see how it is. And now we are at the maximum and see how this size piece a lot, it's a lot bigger. So if you don't want that big, the maximum you can come back here and just everything again, your minimum size, your maximum size. You can do whatever you want with it. So now that you have it, you can play around with it and your brushes ready? And now all you have to do is create variations of your guides. So this is a regular guides. You can do narrower, narrower ends. You can draw wider ends. You can even distorted to make it italic version. And you're going to have a full library of templates to use when you're lettering. Okay, I hope you're well, I kits and I see you in the next lesson when you're going to wrap up things. And I will give you some more tips on how to use it in how to improve your guides in any other ways possible. I see you there. 7. Final Tips: Okay, We did it. We created our letter guide. Now you can create consistent ladders and do it a lot faster because you have a template to make everything look nice too or your work. Now, it's up to you. I showed you how to create a brush in procreate, which is, I think the most popular out there and is the one that I love to use. But I do have brushes in concept apps. I do have some in Affinity Designer. And when I, you want to use my lettering guide and other software. Another app that doesn't really allow me to create a brush or any type of template. I just import the image replicated and create my layout using that strategy. So it's up to you. You can use it everywhere. You can even print it and use as a template to write on it. You just have to lower the opacity so that it doesn't show up really strong when your having, when you're finishing your lettering piece. I hope you like this class. Make sure to share in the project section what you create. If you created a different guide their minds, the letters you create with your guide, I would love to see your work. I hope to see you in another class for now. That's it. I want to thank you for watching and keep creating.