Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sketch Basics!
You have completed Sketch Basics!
Preview
In this video, we'll duplicate our artboard to begin designing a multi-screen app.
Sketch Documentation
Refer to the Sketch documentation to learn more about all the features we cover.
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
The second screen we'll be making for this
application will be a profile view.
0:00
The easiest way to start this one off will
be by duplicating the art
0:05
board we've been working on.
0:09
You can see that the art board is styled a
little differently than the other
0:10
layers on the list, because of its lighter
color.
0:14
If we select it, we can right-click the
layer and select duplicate from the list.
0:17
And it will make a copy beside, with all
the layers intact.
0:23
There are some layers here that we don't
want, though.
0:26
So let's remove them.
0:29
Select the Woke Up cell in the layer list,
hold Shift and click check in.
0:30
Now, just press backspace to delete them.
0:37
Doing this is a lot quicker than adding a
new whiteboard and
0:40
drawing or copying over the background
elements, as well as the bars we need.
0:43
Let's remove the Add button in the title
bar we added for the today screen and
0:48
change the title to your name.
0:52
I'll use the name John Appleseed.
0:54
We'll also want to update the tab bar at
the bottom, so
0:58
the selected tab is My Profile.
1:01
I'll go to Select through the My Profile
icon and
1:04
change it to Shared Style in the inspector
to Selected Tab.
1:07
Let's change the text style, too.
1:12
Do the same for the Today icon, giving it
the Unselected Style.
1:15
Now, let's add some content.
1:23
Starting with the header, whether it be a
background image, avatar, or
1:25
some profile information.
1:29
We'll want to draw a rectangle that's 210
pixels high underneath the title bar.
1:31
When done, just group it.
1:37
[NOISE] And let's remove the time line
there, from this art board.
1:38
What's going to go in here is our
background image.
1:44
So let's select a bit map layer from our
background group and
1:47
press Command and C to copy it.
1:50
Select the rectangle in our newly created
group, and
1:53
paste the image using Command and V.
1:56
You may have guessed already, but
1:59
we will need to create a mask to ensure
the image fits into the rectangle.
2:01
And I'll do that before I resize it.
2:05
This time, I'll right-click the rectangle
we'll want to use as a mask
2:08
in the layer list, and click on User As
Mask at the bottom.
2:12
Now select the bitmap image so
2:16
we can resize it, but don't forget to
unlock the layer first.
2:18
You may have to zoom out to see the
handles to resize it.
2:23
But if you hold down Option when you click
and
2:26
drag one of the corner handles, it will
scale the layer from the center.
2:28
I'll just drag this into position here a
little until it looks good.
2:32
Now we need to draw an oval for the avatar
that will sit here.
2:36
I'll draw one in and make sure it's 120 by
120 pixels.
2:39
I'll drag it into the center of the shape
where the red guide lines appear.
2:44
And I'll just move it up slightly, so
there's room for some text underneath.
2:49
For the avatar I'll open up this image,
copy it, and
2:54
close the window as we don't need it
anymore.
2:57
Then, with the oval still selected,
3:00
I'll paste it in holding down Shift along
with the Command and V shortcut.
3:03
This will paste the layer at the same
coordinates as the selected layer so
3:08
we don't have to reposition it.
3:12
Let's change the size of our image to 120
by 120 to match the oval.
3:14
You only need to update one of these
fields in the inspector, as the locked
3:19
padlock icon in between them signifies
that the images ratio will stay the same
3:24
when you resize, like holding down Shift
when you click and drag a handle.
3:29
You can always click this icon to open it,
if you don't want this to happen.
3:34
When done, press Command and select the
oval that's underneath, and
3:38
press mask into toolbar.
3:43
Add some text underneath by selecting the
text tool, and pressing T.
3:45
And then, click and type your location.
3:49
In this case, I'll type San Francisco.
3:52
I'll change the font back to Roman and
give it a size of 14.
3:55
I'll duplicate this layer and
3:58
nudge it down whilst holding Shift, and
type in 34 friends.
4:02
I'd like this text to be a little smaller
and
4:08
not quite as bright, just like the
sub-texts in my other art board.
4:10
So I'll change the text style to cell
subtitle.
4:14
With each of these text layers, I'll need
to make sure they're horizontally aligned.
4:18
So I'll press the align to horizontal
center icon at the top of the inspector.
4:23
I will also make sure that my avatar is
aligned to the center as well.
4:28
Once done, make sure these are all inside
the folder we've created and
4:34
rename it to header.
4:38
Let's lock this bitmap layer again, so we
don't select it accidentally.
4:40
In this blank area here,
4:44
under the header, we want to draw some
boxes that contain some information.
4:46
I'll need a trusty rectangle for this.
4:50
So I'll draw the shape in, from the top
left, and make it about 90 pixels high.
4:52
And I'll make sure it fits the width of
the screen.
4:57
With that drawn, I'm just going to give it
some padding from the edges.
4:59
So, I'll nudge it ten pixels left and down
whilst holding Shift.
5:03
I'll adjust the width so it's at 355, ten
pixels from the right edge as well.
5:09
I think this will look a lot nicer with
some rounded corners.
5:15
So, I'll adjust the radius value to 5.
5:18
The information in this box is going to
relate to the user's last bike ride,
5:22
which we've already documented in the
other screen.
5:27
To start off, I'm going to select a red
circle in the today art board and
5:30
create a Shared Style in the inspector.
5:34
I'll select Create New Style in the drop
down and I'll name this Bike Ride.
5:38
Selecting the gray rectangle, I'll apply
the Bike Ride style to it.
5:45
Then, I'll add some text here.
5:50
I'll create a new text layer and type Last
Bike Ride.
5:52
I'll ensure that it's at a size of 14 and
using a regular weight,
6:00
before moving it 10 pixels to the right
and down from the top left corner.
6:04
On the next layer, I'll duplicate this and
drag it over to the right side of this
6:09
box, and then I'll make this ten pixels
from the edge.
6:13
Before I change this text,
6:17
I want to make sure it is right aligned by
clicking on the icon in this control.
6:19
I'll make this text the time in which the
bike ride was completed,
6:24
which we've noted down on the previous
screen.
6:28
For the main path of this cell,
6:32
the text will be 3.4 Miles, the distance
that we cycled.
6:34
The font size for this layer should be 36.
6:38
And this needs to line up with the Last
Bike Ride text and have it so
6:40
it looks vertically centered in the cell.
6:44
[BLANK_AUDIO]
6:46
Once done, group these four layers and
rename it to Bike Ride.
6:50
We'll need to create the groups for the
other cells below.
6:58
And whilst we could just duplicate this
layer and
7:01
move it down, there is an alternative
method.
7:03
With the group selected to go Arrange in
the menu bar and click on Make Grid.
7:06
A sheet will appear asking you to set up
the grid you want to create.
7:12
For this instance, we want four rows and
one column.
7:15
Leave the margin at a value of ten pixels
and press Make Grid.
7:19
You can see that the other three identical
groups have appeared exactly how we want
7:27
them, leaving us to update the style and
text content.
7:31
I will make the second cell here, relates
to my check in.
7:34
So, I'll make the orange check in
background on our first art board
7:38
to a Shared Style, calling it Check In.
7:41
Once I'm on this art board, I'm going to
go ahead and do the same for
7:45
this blue gradient and call it Food.
7:49
Back on the my profile art board,
7:53
I'll apply the check in style to the
second item.
7:55
I'll change the text in the top left to
Last Check In.
7:58
[BLANK_AUDIO]
8:01
Add the city on the right and change the
main text to Sketch Café,
8:05
our check in location.
8:09
[BLANK_AUDIO]
8:11
We'll then change the next rectangle style
to Food before entering the data for
8:16
Last Meal.
8:21
The calorie count will go on the right
side.
8:22
[BLANK_AUDIO]
8:24
Lastly, for the fourth cell, we'll add in
some data here that hadn't yet
8:31
appeared in our timeline for today, the
amount of steps taken over the day.
8:36
I want to change this gradient first, but
8:41
it's still associated with the background
style.
8:43
So if I change to this,
8:46
all the other layers using it will change
too, which we don't want.
8:48
So I'll give this No Shared Style.
8:52
I'd like to be a pinkish purple type
color, so
8:56
I'll open in the fill pop over and play
around with adjusting the hue first.
8:59
So my gradient is in a similar style to
the others.
9:04
Once we've got something that looks good,
I'll change this text.
9:08
Steps Taken on the left, 231 Calories on
the right.
9:11
And we'll put in 5,134 Steps in the main
area.
9:16
Then finally, select our tab bar group,
9:24
hold down Option, and click To Front in
the toolbar.
9:27
And there we have it, two screens of our
fictional iOS app.
9:33
Next up, we'll apply some slices to these
layers to prepare them for export.
9:37
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