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
Now that you have a basic wireframe, it's time to style it.
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
So now we have a basic looking wire frame
for the first screen for our application.
0:00
It's time to start styling it.
0:06
We'll begin with the background.
0:08
And I'd like to use a photo here.
0:10
I have this one which has some nice color
to it with no majorly light or
0:11
dark points.
0:17
It might be too distracting behind our
text.
0:18
To get us into the document I'm working
with, I'll copy it, using Cmd+C, and
0:21
close the window.
0:26
I'll select my background layer, and paste
it.
0:28
As we can see, this image is pretty big,
so let's zoom out to resize, and place it.
0:32
[BLANK_AUDIO]
0:37
I'm happy with the position of this.
0:41
So I'll move it behind the background
layer, and then adjust its color.
0:43
I'll make sure it's fully black and at 50%
opacity.
0:47
Then, I'll apply a background blur with a
radius of ten pixels.
0:52
This setting can be found by going into
the inspector and
0:57
clicking the arrows by the Gaussian blur
setting.
1:00
In the menu, select background blur.
1:03
There we go.
1:06
It's looking good but just a bit dull.
1:07
If we adjust the color on our imported
image that could really help.
1:09
So we'll select it and enable color adjust
from the inspector.
1:13
Here we'll boost up the saturation to make
it more vibrant and
1:18
adjust the brightness a little bit.
1:22
Now that's done, we can select our bitmap
and
1:25
background layers before grouping them.
1:28
If we zoom out, we can see the selection
is quite large because of the image we
1:31
are using and how anything outside of the
art board is being excluded.
1:35
Let's lock this layers so
1:39
we don't select it accidentally when you
click off of another element.
1:40
Right-click the layer and select Lock
Layer.
1:44
Our title bar is looking a little spartan,
and
1:48
we need a button in here that would allow
users to add to their timelines.
1:51
The best thing to use here would be a plus
button, so let's draw one.
1:55
I'll zoom in to the top corner of the
title bar and
1:59
draw a rectangle 20 pixels high and 2
pixels wide.
2:02
I'll be then sure to place this layer
above the Navigation Bar.
2:09
I'll press Cmd+D to duplicate it, and
then, in the Rotate
2:12
field of the Inspector towards the top,
I'll replace the value of 0 with 90.
2:18
With that rotated, I'll select the layer
below and
2:24
perform a union operation by the toolbar
item and rename this layer to at.
2:26
To place it exactly where I want, I'll
move it to the right edge of the art board
2:32
and nudge it left ten pixels with my shift
and
2:37
left arrow key before changing its color
to white.
2:40
If I zoom back out to look at the gray
circles here on each of the rows,
2:44
they need to have their own color
depending on their type.
2:48
For example, all check-in activity will be
orange.
2:51
So, let's style them.
2:55
Let's zoom into the first item here at the
top.
2:56
Let's turn this fill into a green linear
gradient.
2:59
The top point is already selected.
3:03
So I'll change its color, then select the
second point and adjust that.
3:05
[BLANK_AUDIO]
3:09
Next I'll apply a drop shadow and adjust
its values so y is 1 and blur is 3.
3:17
With an opacity of 20, which we can edit
under color.
3:24
Now I'm happy with that.
3:28
I'll zoom back out and copy and
3:30
paste this style to the other layers
before I edit their colors.
3:31
In the menu bar I'll go to Edit and Copy
Style.
3:36
I'll hold Cmd and click the layer from the
canvas to select it.
3:41
I'll paste the style with Option+Cmd+V.
3:45
I'll do this for the other two layers and
edit the gradients so they're blue,
3:48
red, and orange.
3:53
[BLANK_AUDIO]
3:54
Now all that's left is this big gray
rectangle for our map view.
4:11
I'll go to Window and select it.
4:16
I'll copy using Cmd+C.
4:19
Close the window.
4:22
Select the box by holding down Cmd and
clicking it.
4:26
And then paste it with Cmd+V.
4:30
The map should be selected.
4:32
Hold down Cmd and
4:34
click the gray rectangle layer that's
underneath it in the layer list.
4:35
Once done, press Mask in the toolbar.
4:39
A new group has been created.
4:43
With the rectangle acting as a mask,
meaning that any layers inside this group
4:45
won't appear outside the bounds of the
shape.
4:50
Let me open up the folder and zoom out so
I can see all the points of my image.
4:53
I'll hold down Option and drag one of the
handles.
4:59
I'll then press Cmd+1 to zoom back into my
artboard.
5:05
Let me just drag this image around into a
slightly better position.
5:07
And I'll lock this layer, so I don't
accidentally select it again.
5:12
I like this, but
5:16
I'm not a 100% sure on the right angled
corners that are on the left side.
5:17
And I'd quite like them to be rounded.
5:21
I could drag the slider that says radius
in the inspector, but
5:24
as you can see, this adjusts all the
corners and we don't really want that.
5:27
So we'll press Enter to take this shape
into edit mode.
5:32
The point in the top left corner is
already selected now we're in this mode,
5:36
and if you look in the inspector, there'll
be a corners field.
5:40
Select the text box and enter in 7.
5:44
Click on the point at the bottom and
change its corner radius the same way.
5:48
[BLANK_AUDIO]
5:51
Then press Enter again to confirm the
changes.
5:54
Now we need to include a route on here
otherwise it's just a map.
5:57
So let's draw this using the vector tool.
6:01
Zoom into your document a little and then
press V for vector.
6:04
Start mapping out your route, following
along roads.
6:09
Don't worry about trying to make sure it's
accurate or the right length.
6:12
Just do whatever you feel looks good.
6:15
It's only a mock up at this point.
6:18
Press Enter when you've placed your last
point.
6:21
If we zoom back out, it doesn't look like
much has happened at all.
6:24
But we will need to adjust our border
properties to get this to look good.
6:27
I'll make the line thicker and give it a
nice blue color and adjust the end and
6:31
joint types in the pop over from the color
icon
6:35
to make sure there are no sharp corners.
6:39
No we haven't forgotten about our tab bar
at the bottom.
6:42
Let's zoom into it and begin by changing
some of these labels to something more
6:46
appropriate for this app by double
clicking on the text layer.
6:49
[SOUND] I'll select the blue
6:53
history text layer and
6:58
change its shared style to tap bar text.
7:03
I'll then do the opposite thing for
7:12
the today text layer because this is the
active tab.
7:14
Just select tap bar text active from the
list.
7:18
I'll make this blue a white before making
the other tabs white but
7:22
with a 60% opacity.
7:26
Because it is a shared style they'll all
update magically.
7:28
For the tab icons, I have some that I've
made earlier.
7:34
So I'll select that document, copy them,
and paste them into my temp bar group.
7:37
After you line them up, just delete the
alter layers,
7:47
as we won't be needing them anymore.
7:50
Let's put some icons on our colored
circles for the log types.
7:56
For the woke up cell, let's draw a simple
icon of an alarm clock.
8:03
I'll draw an oval from the middle of the
circle.
8:07
So I'll press O, and holding the Option
and
8:10
our Shift key to ensure it's the same
height and width at 20 by 20.
8:13
Once done duplicate the shape and
8:19
make it two pixels smaller on each side by
holding down the same keys.
8:21
After that select them both and press
subtract.
8:28
I'll draw a small six by six pixel circle
and place it in the top left of the shape
8:32
using the guides before duplicating again
and moving over to the right edge.
8:37
Next, we'll need a rectangle that's two
pixels high.
8:42
Its length doesn't matter, but I'll rotate
it minus 45 degrees and
8:46
move it to the bottom left of the shape.
8:50
Duplicate this, and
8:55
flip the layer horizontally using the
button next to the rotate field.
8:56
And drag over to the right.
9:00
Before I draw anything else, I'm just
going to select all these layers and
9:02
perform a union operation on them.
9:06
If I click the arrow to the left of the
layer preview,
9:08
I can see all the layers inside this
shape.
9:11
Now our alarm clock icon is looking a
little bit broken, and
9:15
we need to fix this.
9:18
In order to fix this shape,
9:20
we have to select the Oval 19 layer and
drag it to the top.
9:21
Now we need to give our little clock some
hands.
9:25
I'll collapse this group and draw in a
2-by-8 rectangle in the middle,
9:28
adjust its radius, and then duplicate the
shape.
9:33
Now press Rotate in the toolbar.
9:38
The layer has now gone into a rotate mode.
9:40
So if you click and drag one of the
handles, it will rotate.
9:43
The little crosshair shows us that the
shape will rotate in the middle
9:46
around this point.
9:50
We can pick this up and move it anywhere.
9:51
So let's place it towards the bottom of
the shape,
9:54
in the middle of the clock face.
9:56
If we drag a corner handle down towards
the 4 o'clock position we can press Enter
9:58
to exit the mode, and even make this line
a little bit shorter in height
10:03
by clicking and dragging the middle point.
10:07
With that done, select the two layers that
are hour hands,
10:10
as well as the clock shape, and press
Union.
10:14
Now, we name this layer, make it twice and
10:17
make sure it is in the same group as the
green base layer.
10:19
We've now created quite a complex-looking
shape just out of a few ovals and
10:24
rectangles.
10:29
For the rest of the icons,
10:30
I'll just import some I made earlier to
keep this video brief.
10:31
But you can find them in the teacher's
note download,
10:35
along with the tapable icons so you can
see how they were made.
10:38
[BLANK_AUDIO]
10:41
We're almost finished with this screen.
11:02
All that's left to do is to update the
fonts that we are using.
11:04
Right now it's Helvetica Neue which is the
system font of IOS.
11:08
Whilst this is nice I think we should use
a different font, Avenue.
11:12
So let's update our file.
11:17
Again we'll work our way from the top
11:18
to the bottom starting with the title bar
text.
11:21
Hold down command and click the text layer
in the canvas.
11:24
Click the typeface button in the inspector
and select Avenida from the list.
11:28
You can type in this pop over to search
for fonts too.
11:33
Now let's update the text in the cells.
11:36
Select the woke up text layer and open the
font pop over.
11:38
You can see that all the titles and
11:43
times are using this font because of the
shared style we gave the text earlier.
11:45
This is a huge time saver.
11:50
Let's update the font for the rest of the
text in the document.
11:52
[BLANK_AUDIO]
11:55
And that's it.
12:01
The first screen of our app is completed.
12:02
The style for the rest of the application
is already laid out
12:05
with our use of typography and colors.
12:08
So, all that's left to do is to create the
next screen
12:11
which is a profile view before preparing
the documents for export.
12:14
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