Preview
Video Player
00:00
00:00
Working with Text
4:51In this video, you'll learn how to insert and style text within a document.
When designing a website for application
interface in Sketch,
0:00
it's more than likely you will want to
include text layers inside your document.
0:03
You may have guessed this already, but
0:08
the Text tool can be found inside the
Insert panel.
0:10
The shortcut to the tool is simply just T.
0:14
To add text to your document, just click
anywhere on the canvas.
0:17
As you can see, the text, Type something,
appears.
0:23
Let's replace this with Hello World.
0:26
[BLANK_AUDIO]
0:28
If you were to keep on typing and typing
it would all be on one line unless
0:31
you create a line break as this text has
an auto or infinite-width.
0:36
If you change the width setting to Fixed,
0:43
the text will be confined to a
fixed-width, which can resize and alter.
0:47
You can start off typing in a fixed-width
text box by clicking and
0:53
dragging on the canvas with the Text tool
selected.
0:56
The auto-width is generally prefered for a
short amount of text.
1:02
Less than a couple of words long, such as
Labels and Strings.
1:06
As you would expect, you can style your
text.
1:11
All the available Style options, are in
the Inspector.
1:15
You can change the font, or type face, for
the entire layer or just for
1:18
the selected portion of text, adjusting
the weight to make it bold or italic
1:23
can be found here as well as options for
font size, color, and text alignment
1:27
[BLANK_AUDIO]
1:32
Layer stars can also be applied to text.
1:49
But they can only be applied to the entire
layer and
1:52
selected sub-ranges of text like the font
and size.
1:55
In Sketch it's possible to turn any text
layer into a shape
1:59
if you wish to alter any of the characters
or
2:02
share a doccuments that's using fonts
other users may not have.
2:05
But beware, once you convert your text
layer it's not possible to change it back.
2:09
So duplicating your text layer to create a
copy is recommended.
2:14
To convert your text to outlines,
2:18
select the option from the Type menu in
the menu bar or
2:20
right-click the text layer and select the
Option at the bottom of the list.
2:23
[BLANK_AUDIO]
2:27
Another thing you can do is create a
textile, and this is a great thing to
2:31
do if you have more than one text layer
using the same style.
2:35
Let's first of all create two text layers.
2:39
I'll name this first one Example One, and
the other Example Two.
2:43
I'll select Example One and give it a nice
style.
2:55
I'll change the typeface to Avenir.
2:59
I'll make it orange and I'll adjust its
text size to make it a little larger.
3:05
[BLANK_AUDIO]
3:12
That looks quite good.
3:16
Now I'll go into the Inspector and
3:18
head towards this white box that currently
says No Text Style.
3:20
If I click that and then choose the option
Create New Text Style,
3:26
it will ask us to name it.
3:33
Anything will do here now so I'll enter in
Test Style
3:35
[BLANK_AUDIO]
3:38
And press Enter.
3:41
I'll then select the Example Two text
layer and in this same area
3:43
of the Inspector where we just created our
text style, we'll apply it to this layer.
3:48
Select it in the list.
3:57
And hey, presto!
3:58
It's applied!
4:00
Now this is is where the cool stuff
happens.
4:00
Let me change the text color of Example
One.
4:03
I'll make it green.
4:08
[BLANK_AUDIO]
4:09
And both layers will update.
4:14
If I change the font or adjust the size,
this will update also.
4:16
This is really useful when you want to
update any styles in your document.
4:22
And you can also do this with styles for
normal layers, too.
4:27
If you don't want the styles of these two
layers to be linked anymore,
4:30
just select one of them and then choose No
Text Style again from the list.
4:34
[BLANK_AUDIO]
4:38
So, that just about covers all the basics
of Sketch.
4:42
Next, we'll be taking a look at how to
export your designs and
4:45
get them out of the app and onto your
computer.
4:48