Preview
Video Player
00:00
00:00
Layer Styling
12:18Now that you have a basic wireframe, it's time to style it.
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