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
New screens in Adobe XD are typically defined using artboards. In this video, we'll complete the design by creating a 2nd screen.
Text to Copy
To save time, you can copy the two paragraphs below into the second screen of the design.
Grab your trail mix and take a deep breath! At heights around 8,000 feet, Boulder offers incredible views of the Rocky Mountains and exciting challenges for experienced hikers.
This weekend trip for two includes a modest mountain home on the outskirts of Boulder, along with flights and ground transportation. The snow will be back soon, so book today for best availability!
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
This new screen is going to be
linked from the first trip,
0:00
which is Boulder, Colorado.
0:04
So it would nice if we used that same
imagery maybe as a full screen background.
0:06
Open the final browser on your device and
0:13
navigate to the folder where you
downloaded the photos originally.
0:17
Drag the boulder image onto
the second art board, and
0:23
then position it so
that you can see just the two trees
0:28
in the bottom right corner,
something like that.
0:33
This covered up the tool bar but
we can fix this by right
0:38
clicking on the image and
then choosing, Send to Back.
0:43
This will rearrange
the layers on the artboard so
0:50
that the image is at
the bottom of the stack.
0:54
Now if you click anywhere
in the blank area,
0:57
it will deselect the image and
you can see what the art board looks like.
1:01
Next, we should add some title
text to label what this place
1:06
is along with a description.
1:10
And then finally a button to choose dates.
1:13
If you'd like, you can add more photos and
button controls but
1:16
we're going to keep things simple for
the purposes of this example.
1:21
So let's start with that title text
by copying that Boulder text and
1:26
then pasting it into this art board.
1:31
Double click the Boulder
text on the first image in
1:34
the repeated grid and
then copy it to your clipboard.
1:39
And then click anywhere inside
the second art board and paste it.
1:44
Now, let's add some paragraph text.
1:52
In the note associated with this video,
1:54
you can find some pre-written text
that you can copy to your clipboard.
1:57
That way we don't have to sit here
together and type it all out.
2:01
Then select the type tool or
hit the T key on your keyboard.
2:05
Click somewhere in the middle
of the second art board,
2:11
And paste the contents of your clipboard.
2:17
This text will probably look wrong
in lots of ways at first, but
2:22
we'll work on correcting that now.
2:27
So with the text selected,
first change its fill color
2:30
to pure black,
since this is on a lighter background.
2:35
Then change the font size to 13.
2:40
And instead of bold,
we'll just make this a regular style.
2:45
Just below that and to the right,
2:50
there's two buttons with some
different looking lines of text.
2:52
The first is the default for
short lines of text, but instead,
2:57
select this second button,
which is called Area Text.
3:02
Now, you can resize the box
containing the text, and
3:07
the text will naturally re-flow however
it needs to, to fit inside that box.
3:12
Right now, this box is entirely too wide.
3:18
So if we set the zoom level
to something like 25% and
3:22
zoom way out here, we can then click and
3:29
drag on one of these
handles to resize this box.
3:33
Just like that.
3:39
And then we can reset the zoom level.
3:43
Now let's just resize this a bit more
now that we're zoomed closer to it.
3:49
Make sure that all of the text is visible.
3:56
Looks like I may have included a few
extra characters there at the end.
3:59
So I'll just fix that.
4:06
And then let's just use the smart guides
to make sure that this is centered
4:08
properly.
4:12
There we go,
I'll actually move it up just a little.
4:13
And maybe just make it
a bit smaller there.
4:18
There we go, I like that.
4:25
Now using the rectangle tool,
draw a box around the text
4:27
that's slightly larger
than the text itself.
4:33
This will act as a container.
4:37
You can hold the Alt key on Windows or
4:40
Option key on Mac if you want to
draw from the middle of the text.
4:43
So I've got my smart guides there.
4:48
And I'll do something like that.
4:54
Then in the layer panel, drag and
drop it so it's beneath the text.
4:58
And now in the property inspector,
we can adjust some settings.
5:05
Add a border radius of six,
5:09
and then remove the border.
5:14
And then let's add a background blur.
5:19
So I'll check the box next to
background blur, and this way,
5:22
we can make the box slightly
transparent so that the background can
5:27
shine through while still providing
added legibility to the text.
5:31
So the first value is the background
blur amount, we'll set that to five.
5:36
The next value is the brightness,
we'll set that to about ten.
5:42
And then we'll keep the opacity at zero,
5:50
which is basically just the fill opacity.
5:54
Now, using the Selection Tool,
5:58
let's copy one of these book buttons and
reuse it.
6:02
So I'll click away from this image here.
6:08
Double click one of these book
buttons to select the group,
6:14
copy it to the clipboard, And
6:17
then I'll click back on this art board and
paste it.
6:22
And I'll drag this so
it's just below this text.
6:26
Maybe something like that.
6:32
A little lower there.
6:34
And then using the Text Tool,
we'll change book to say,
6:37
Choose Dates and hit Escape to accept and
6:42
then going back to
the Selection Tool again.
6:47
Let's select this rectangle,
6:51
it might be a little difficult to
grab it from the art board there.
6:53
So I'm just clicking inside
of the Layers panel here.
6:58
And let's make this button a little wider.
7:03
I'll hold down the option key on a Mac or
Alt on Windows to
7:06
constrain the proportions there and
make it even on both sides.
7:11
And now it wraps around the text,
just like we'd expect from a button.
7:16
When you're done, save your work.
7:22
We're done creating our second art board.
7:25
Now, we can link them together
in an interactive prototype.
7:27
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