2.6 Images and Text
Typography is typically the cornerstone of any design. Sketch gives us some pretty tight control over how text will look in our final design. Let’s learn more about that, and while we’re doing so, we’ll learn about working with images.
1.Introduction1 lesson, 02:11
2.The Sketch Fundamentals8 lessons, 1:16:06
3.Reusing Elements and Styles4 lessons, 30:30
4.Prototyping2 lessons, 12:51
5.Collaboration2 lessons, 13:26
6.Plugins2 lessons, 11:06
2.6 Images and Text
Typography is the cornerstone of any design. And no matter what you do, you'll always use it. Sketch actually gives us a pretty good control over how the text will look like in the final product. So let's go ahead and check that out and also learn how to work with images. To create a text element in Sketch, you can click Insert Text or use the shortcut T. So T, click anywhere on your canvas or art board and start typing. Now Sketch remembers the last text properties that you used. And it's gonna apply them here. But at any point with the text layer selected you can go into the inspector, and you can change its properties right here in the text panel. So you can change the font face, you can search for a specific font family, excuse me. You can change the font weight, and this will show you all the available weights for the font family you selected. You can change the font size using this dropdown here. Or you can slide it around, then you can change the character spacing right here. Right now it's set on auto, but you can change that at anytime. Then you have the line height and this is automatically calculated by a Sketch. But you can change that manually by using this control and then you have the paragraph spacing here. Finally, he can change the text color by using this control. And for text color notice that we don't have those crazy options for color that we have for example on a film. So we can't add gradient and such, it's a simple solid color. Now since we're here, let's talk a little bit about the color picker. So besides the obvious color picker that we have here, where you can define your hue, and then you can choose the color that you want. You can also change the text opacity by using the slider. Or the color opacity, I should say, this is the hex value. And you also have an RGB value right here by default where you can change the values of Red, Green, Blue directly. And you can also use the slider on the bottom to control the opacity. Now you can hover this RGB value, hit this little drop down icon and you can choose from another color format like HSB, which is Hue, Saturation, Brightness, or HSL, which is Hue, Saturation, Luminescence. So that's pretty handy. Right here, we have the option to use some predefined global colors or we can choose document colors. So when you're working on a specific design, you can define your color here, then click the plus sign, and that color will be added to your document colors. And you can come back later at any point and reference that color for other elements. You'll also have another view option here. You can change from this list type to a different list type where you can also see the hex value. And you also have a color picker, which you can click like this. It's gonna open up a loop. And you can go around and sample any color from your screen. That is really, really handy. Now coming back to the text options, right here on the bottom we also have some alignment options. So we have left aligned, center, right, and justify. Here, we have some re-sizing options. So let's actually create a paragraph and test these things out. Now, to create a paragraph, let me add in some more text. And we'll change the text or the font size a little bit. And then this is automatically generated. The width of this text box is automatically generated. But I can always grab this handle and I can resize it. And I'm also gonna change the line height here a little bit. So now we have a text box that spans on multiple lines. Notice the resizing changed here. It's now set to auto-height instead of auto-width. If I change this back to auto-width, it's gonna resize my text box to fit all the content horizontally. If I do this, I can then resize it like this. Or I can choose this option which is a fixed size and I can make my text box any size I want. So when I choose fix sides, I also unlock the alignment here. So I can change my paragraph alignment from left to center to right, or even to justify, which is this. And I also have the option to align my text to the top, to the center of my text box, or to the bottom of my text box. And then going back to any of these two sides will actually [SOUND] lock or unlock some of these features. Like here, I can change the vertical alignment or the horizontal alignment, excuse me, while here, those are pointless because the width of my text box is the width of my text. Now with text [COUGH] we also have some additional options. If we click this where it says adjust text options, it's just outside the recording portion here. But it says adjust text options. We get some additional information, for example, the text declaration I can specify an underline or a strike through. And the text transform, which is uppercase, lowercase, or the regular case that we specified. Now Sketch also has some more advanced options for working with text. Options that you won't necessarily find in this inspector right here, but instead, you'll find when you go to the text menu item, right? So you can choose Bold, Italic, Underline. We have dedicated shortcuts for these here. It can make the text bigger, smaller using these key combinations here, or we can also do text on path. And this is a very interesting technique. For example, let me remove this strike through here. And let's draw a simple vector. Like this, right? Then I have to make sure that my path is below my text, right? I'm gonna position this somewhere here, and then I'm gonna select both and go text on path. So now I can change my path if I want to. For example, change this. And you'll see that the text kind of flows on my path, so that's actually pretty, pretty cool. So that's just one of the things you can do with this. Let's go back. Let's delete this. And under text we also have some of current options. If we're using a font family that supports ligatures, we have the option to do that here as well. And then when we select a specific portion of a text, we also unlock some of these like the base line, you can choose to use super script, subscript. So we really have some advanced functionality for typography here. So that's pretty much it for text. Now what about images? Well, working with images is super simple in Sketch. You can import an image simply by going to Insert image. And that will open up a Upload dialogue where you can choose images from your computer. So here's an image that I downloaded from on splash and it just loads it up right here. This is a quite a large image. So you can always resize it like this. And this creates an image layer that you can see right here. And on image layers, there are few less options. You would have compared to other types of layers like you can change the opacity here, of course. And you can add a fill if you want to. Maybe you wanna do something a bit more artistic, so you would add a fill on top of that image adding this in our example a blue tint to it. It can do that. So you can use fills in conjunction to images. You can add borders, shadows, inner shadows. Let's add a shadow, for example. So that creates a nice photography effect. So that's one way you can load images. Another way would be to simply drag and drop from your computer. Like for example here I have a finder opened and I can simply drag this image, drop it in, and it's gonna do the exact same thing. But using this approach will actually resize my image to fit the width of my art board, which is great. All right, now there is another way to load images in Sketch, and that is to set them as a background for a specific shape. So if I were to draw like a simple rectangle here, I can go into the fill. And I can click the patterns, and I can hit images, choose image, and choose one from my computer. And that's gonna load it here, and actually the layer will act as a mask. So notice that when I resize, This shape that I created, it reveals the other parts of the image or it resizes depending on the size of my original image. So this is great because I can now go into the options and I can choose a radius. I can even do this by using the ellipse tool. And I can create an image like this. So fills, go here, choose image. I can basically create this round image. And then I have some other image options here. I can change the display from fill to fit. Just stretch, or to tile. Of course, if I were having a very small image, that will tile it, it will repeat it all over this shape here. And the shape actually can be, One of these crazy hand drawn shapes. It makes no difference whatsoever. So you can again, go to fill, choose image, and we can now have that image inside this shape right here. And finally, you can also add an image by simply doing a copy and paste function from your computer. So you can go to the web, you can find an image, you can right click copy image and paste that directly in Sketch. That works just fine here. I just copied this image and I Hit Command-V or paste inside Sketch. And it's doing the same thing as going to insert image and then choosing the image from my computer. Except in this case, it loads it onto my canvas instead of my art board. But that's an easy fix. You just grab it and you put it in the art board. So as you can see, there are a lot of things you can do with images and text in Sketch. And the cool part is all of it can be replicated in CSS. So you're not gonna get into a situation where you create this cool design in Sketch and you can't replicate it in CSS, you can't make it look exactly the same. With Photoshop, that was actually a problem because you would find these effects that you would add to certain elements. And when you got to CSS, well, you were like, well, how do I replicate this, [LAUGH] right? Because Photoshop was an image manipulation, image editing software. So of course it had a lot more options or features you could add to elements. Sketch, on the other hand, all the properties that you can apply here to text or images can be applied via CSS, and that is fantastic. Now, let's talk a little bit more about layers because they can actually do a lot more than I showed you previously. You can combine them in certain ways to achieve some more complex shapes. Those are called Boolean operations. And we'll talk more about those in the next lesson.