Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
After you've drawn shapes in a design, you'll more than likely want to add text to label sections of an app, buttons, and so forth. The text tool in Adobe XD offers the ability to place text anywhere and then format it using the property inspector.
Shortcut Keys
- Text Tool: T
- Selection Tool: V
- Move Object by 10px: Shift + Arrows
Get Adobe XD
Adobe XD Plans - Adobe XD is available as part of Adobe Creative Cloud in both free and paid memberships. Any edition of Adobe XD (including the free plan) will work with this course. Follow this link to review plans, create an Adobe Creative Cloud account, and download Adobe XD.
Resources
Image Files - These are the image files we'll use throughout this course. Download this file, unzip it, and look for the photos folder.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
With the major chunks
of our design in place,
0:00
we're ready to work on more functional
details like text and buttons.
0:02
Let's start out easy, at the top,
with the name of the app.
0:07
First, select the text tool
from the left side, or
0:11
just hit the T key on your keyboard.
0:15
Then if you click generally in
the area where you want the text,
0:19
here at the upper left,
you can start typing.
0:23
This app is called, Trippin',
with an apostrophe.
0:27
To accept this text,
hit the escape key on your keyboard.
0:34
Then we can switch back to the selection
tool by hitting the V key on the keyboard.
0:40
And we can position this
text a little bit better, so
0:47
that it's aligned left with the photo, and
0:51
aligned toward the middle
with the profile image.
0:54
In the property inspector,
let's change some values.
0:59
First, change the font
from Helvetica Neue,
1:03
or whatever appears to be on your OS,
to Verdana.
1:08
This font might not be the choice
that we'd use in the final design,
1:15
but it's functional for
the purposes of prototyping this app
1:19
without getting too deep into
the visual design of it.
1:23
Next, change the Fill color to something
that will contrast with the dark
1:26
background.
1:31
I'm going to use a sort
of orangey yellow color,
1:33
it's mostly yellow,
just a little bit of orange there.
1:37
And we'll actually end up using the same
color throughout the rest of the design,
1:43
just for highlights and
accents and buttons and things.
1:48
Finally, let's change the font styling
from Regular to Bold and Italic.
1:52
And this bit would probably
be replaced by an SVG
1:59
based logo later on, but it works for
the purposes of prototyping.
2:05
Next, we're going to add text
on top of this first photo here.
2:11
We'll have the name of the city,
a price for
2:17
the trip, and
then a button to book the trip.
2:21
Select the text tool again,
by selecting it from the menu here or
2:25
hitting the T key on your keyboard, and
2:30
then across the top of this image,
in all caps,
2:34
we'll type BOLDER and
then hit Escape to accept.
2:39
In the property inspector,
2:44
change the Fill color to white,
2:48
then change the size to 34, and
2:52
the font style just to Bold
instead of Bold Italic.
2:56
Last, let's change
the alignment to Center.
3:04
This won't actually center the text, but
if we position it using the selection
3:07
tool, And
3:13
then we change the text later on,
it will stay centered.
3:17
Now let's add some prices to this trip.
3:23
Using the type tool,
I'll click on the bottom left of
3:27
this photo here, and
let's just say this trip costs $1149,
3:32
and then I'll hit Escape to accept.
3:37
In the property inspector,
change the font size to 18.
3:42
Then let's scroll down here and
3:49
just add a small shadow underneath
this to make it stand out a bit more.
3:52
I'll increase the opacity to 40%,.
3:58
And set the x to 0, the y to 1.
4:05
And then we'll keep this shadow
super crisp with 0 blur.
4:10
Next, change the text so
that it's left-aligned.
4:16
That way, when we change
the amounts on other photos,
4:20
they'll all line up with one
another along the left edge.
4:23
Finally, use the selection tool to move it
to the bottom-left corner of the image.
4:27
And if you hold down Shift
on your keyboard and
4:35
use the arrow keys,
you can move at 10 pixels at a time.
4:38
So holding down Shift, I'm going to
hit the right arrow key to move it to
4:42
the right by 10 pixels, and
then again, I'll hold down Shift and
4:47
hit the up arrow key to
move it up by 10 pixels.
4:52
And using that technique, you can get
a little bit more accurate positioning
4:55
depending on what you want to place.
5:00
To finish this up,
we'll add a booking button.
5:03
To do this, select the rectangle tool, and
5:06
in the bottom right corner
of the first image,
5:11
draw a rectangle something like this, and
5:16
switch over to the selection tool
to move that just a little bit.
5:21
And then with this
rectangle still selected,
5:28
in the property inspector,
change the corner radius to a value of 20,
5:31
so that instead of a rectangle,
we have a capsule shape.
5:37
And then next to the fill and
5:43
border colors,
you'll notice there's an eye dropper tool.
5:46
We don't wanna border on this, so
let's remove the border, but for
5:50
the Fill, we want this to be
the same color as the logo.
5:54
So we can use this eye dropper tool and
5:58
we'll hover over an area of the text that
looks like it has a solid yellow color,
6:03
be careful not to select
any of the earliest parts.
6:09
Along the side there, so
that looks pretty solid to me,
6:13
and that will give us
the same color as our logo.
6:16
Now, let's type some text over it.
6:22
I'll hit the text tool and
click over the button,
6:24
and I'm going to type the word Book and
hit Escape to accept.
6:30
And then change the Fill color to black,
so it stands out.
6:35
Change the alignment to Center.
6:41
And then with this text still selected,
if we change over to the selection tool,
6:44
by hitting the V key, and
then hold down Shift and
6:50
click the button background, we can make
sure that these are horizontally and
6:55
vertically aligned using
the alignment tools up at the top.
7:02
So I want those to be aligned middle or
vertically,
7:07
then I want it to be aligned center or
horizontally.
7:13
And this will make sure that the text is
perfectly in the middle of the button.
7:20
When you're done,
make sure to save your work.
7:27
Our first image is done, but
we want three more of them so
7:30
people can see all the different
places they can travel.
7:34
Might be tempted to just copy and paste
your images but there's a much better and
7:37
faster way that I'll show you next.
7:42
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up