FREELessons: 18Length: 2.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.8 Working With Text

In this lesson we’ll take a look at Gravit’s text system. You'll learn how to create and align text, adjust it, scale it, and make it follow paths.

3.8 Working With Text

Hey, welcome back to Gravit Designer quick start. In this lesson, we're going to take a look at how you can create text in Gravit Designer. So we'll start with the basics, and that is just the default way of creating text. So if we grab our Text tool here, all we need to do is just click where we want our text to appear, and there we go. So, we get some dummy text we can fill in with anything we want. And then we can select all that and we can start taking a look at the options on the right side here. And one of the most helpful things about Gravit Designer is you have instant access to every single font in the Google font library. Typically, if you're working with a graphic designer offline, and you want to use Google Fonts. Which is very common when you're doing work that's going to be viewed online, say, websites, for example. Then, you've got to go to the Google Fonts website, find a font you like, download it, install it. Sometimes restart the application that you're using for your design, test out the font. And then if it's no good, then you've got to start the whole thing over again, there are ways to speed that process up. But, nothing is quite as fast as having all of the fonts available for you right here. So, we're just gonna grab Noto Sans, and there you go, you can see that it has loaded that font in for us. We've got font sizing control here, and weight control here. And you can see there was a tiny little bit of lag when I switched the font and when I switched the font weight. That's just because it's loading in that font for the first time, but if I'm to go back to Regular now, it's just instant. So you just have a little bit of a delay as it cases each new font that you want to work with and each new weight. So just clicking directly on the canvas is one way that you can create some text. Another way is grabbing the Text tool, and instead of just clicking on the canvas. You click and drag to create a box that's gonna hold your text, these boxes are helpful for a couple of things. One, you can fill them up with paragraphs of text instead of just headlines. And the other is, if you are creating headlines, this box can help you to control the alignment and positioning of your text. So, for example, let's say you're using this box for a headline. Now if I click outside this box, it will take away that cursor, and I will just have the overall object selected. And once I do that, this adds these alignment tools here. So now I have the ability to take this text and center it both vertically and horizontally. If I double-click, I can go back into the text editing mode, but I don't have access to those vertical alignment tools. I need to be outside that editing mode before I can access these. So now if I want to change the settings that I'm using on this text. Then this headline is going to stay perfectly centered vertically and horizontally. This headline, on the other hand, if I center that, and I reduce the size. It still isn't going to be able to maintain its centering, because it doesn't know what it should be centered relative to. So if you want to control layout in that way, use a box. Otherwise, you can go ahead and just use the normal clicking on the canvas, lay your text down. If you have text like this and you want to have it function like this, you can actually do that quite easily. Because if you look closely at this Sizing section on the right here. You can see that this text has Sizing set to Fix on both the Width and Height. But this has its Sizing set to Auto on both the Width and Height. So what I can do is set them both to Fix, and that is gonna make our first bit of text behave just like our second bit of text. So I can actually drag this out, and now I have access to these alignment tools. And I'll be able to change the settings on my text and maintain my alignment. Now the next thing that's cool to know about a box of text here is, often we want to fill out boxes like this with filler text. Because we're just working on a UI. And you can do this automatically in Gravit by just typing out lorem, and then hitting the spacebar. So then that automatically gives us some nice paragraphs that we can use to fill up the space and test how our typography is looking. The next thing you're going to want to know about with text in Gravit, is that you also have the ability to control spacing. So, first up, we have this character setting here, which controls how much space there is in between each individual character in our text. So, if I boost that up to 10, you can see now we have quite large gaps in between each of our letters, I'll just undo that. You can also change the Spacing in between the words, so now we just have larger spaces in between each of our words. And you can change the Line Height, so this is 100% Line Height right now, I might want to change that to 160%, for example. And then the last setting in this section that you need you need to know about is this Scale font on resizing setting. So, right now if I re-scale this box, then it's just gonna re-flow the text, but if I check here. Now, the whole thing will shrink down in proportion with the box that's containing the text. Next up, I'm gonna show you how to do something really useful, and that is make text follow along a path. So this is great for if you want to do, say, curved text, for example, we're going to drag out an Ellipse. And now I'm gonna grab the Text tool. And all I need to do to make this text follow the path that's going around the outside of this ellipse is just hover on the outside edge and click. So now this text is going to follow this path around this ellipse. And you can do this with any type of path, it doesn't have to be just a circle. So, for example, if I grab the Bezigon tool. Make sure I've got that, and I draw out a kind of a wavy path. Then I can make my text follow along this path just as easily. So once you have some text following a path, you have a couple of ways that you can edit it. The first thing to note is you have this little start point here. That you can click and drag to determine where on the path your text is going to begin. So that's the same over here with this text on our ellipse. So I can drag this around and get the alignment how I need it to be. I can also control whether the text goes around the outside of the path or not. So right now we're on the outside, but if I wanted to go on the inside of the circle, I just need to flick this switch. And sometimes you'll want to reverse your text. So, for example, if I want this text to go around the bottom, now it's sort of running backwards. So I can click this to reverse the text and now it's going left to right, so that's really cool. There's a lot that you can do with that to come up with some really creative text in your design. So I'm just gonna leap all of that to get that out of the way for now, and that covers all of our settings here. There's just one more thing that I want to show you, and that is, if you do create some text the way you want it. So I'm just going to boost this up a little bit. But what you actually need to do is use this text as a foundation for some other type of hand design text that you want to create. You can actually right click and you can convert the text to a path. And then now, I could get in and I can directly alter exactly how each one of these individual letters is gonna look. So I can go ahead and create some stylized text of my own. So that covers all the essentials of working with text in Gravit. In the next lesson, we're going to check out a really cool feature that Gravit has, and that is Shared Styles. Shared Styles work a little bit like a class in CSS. Where you can define some colors and settings for a particular element in your design. And then you can make that set of styles available to other elements in your design as well that you can apply then with a single click. This really helps you with your efficiency and we're gonna check out how you can use it in the next lesson, I'll see you there!

Back to the top