Hey, I'm Hunter from Skillthrive and in
this tutorial you'll learn how to create this landing page in Sketch. Before we
get started, make sure you download the course files by becoming a free member
on Skillthrive.com. You'll get instant access to the Sketch file that we're
creating in today's course as well as all of our current free courses. There's
a link in description that will take you to a registration page where you can
join. Once you're in Sketch, go ahead and click A to bring up the artboard
tool. Then I'm going to click and drag. That's going to create an artboard, but what I want to do is come over to width and change this value to 1440 and then
change the height to 1617 and then hit return. Then let's go ahead and just
rename this artboard to landing landing page one. Then I'm going to zoom out here so I can see the entire artboard because I'm
going to drop an image here that we want to use as the background. I included
that image here in the course files. You can see here, I can drag this into
Sketch, and once it loads in you'll see that it's a little too big. Let's come
up to size and then drop this down to 2700, then reposition that. Once you
get it in this place that you like, come up to gaussian blur, increase that amount
to 50, and then come in to fill. With the solid fill, let's go ahead and select a really dark purple and change the blending mode to multiply. If we
hover over opacity, we can go ahead and just drag that to the left to decrease
that overall effect. Something around 30% looks good. Then we can go
ahead and just lock this layer so we don't move it by accident. Then let's
go ahead and just zoom in to this top section where we can start working on
our header. The first one to do is go ahead and just create a logo. To do
that, I'm going to come into insert, shape, and then triangle. I'm going to create a
perfect rectangle here around 48 pixels. I'm going to flip it–so turn it
upside down. I'm going to increase the thickness here to two, come in to the
border color, and then change it to this color that we want to use
throughout this tutorial, which is e2e1e7. Then click return. I'm just going to go ahead and add that color here to my swatches by clicking on this
plus button. Now, if we turn off the fill, you can see that we just have this
outline. I'm just not going to leave it as a plain rectangle, what I'm
actually going to do is create another triangle. Make this one a little
taller and thinner. Let's go ahead and increase this one to two, do that color
here that we just saved, and then turn off the fill. Then I'm going to
rotate it to something like this and then move it over. Then I'm going to select both of these triangles and then come into subtract.
Now, if you don't get the look that you want right off the bat, what you can do is come into this combined shape, expand it, and you can always come in and edit these shapes. I can make this one a little taller, I can stretch it out,
maybe make it a little skinnier again. I can rotate it just a little bit– something like that looks good. I can
hit return and just go ahead and rename this combined shape to logo so we know what it is. I'm going to leave that there for now, and then I'm
going to start working on the nav links. I'm going to hit T on my keyboard to
bring up the text tool. I'm going to click and I have the typeface set to Rubik,
which is a free Google font. I'm including the course files if you guys
don't have it and I'm going to set the weight to medium, the size to 16, and the
character to 3.5. Then make sure that the color is set to this color that we
saved here–that we used for the logo. Then I'm just going to type in some
stuff that would make sense for our project, which would be features. Then I'm
just going to hold alt and click this out to about 50 pixels. I'm going to
rename this to pricing. Maybe do one more. Let's do this one that says
about, and then we can make sure that those are 50 pixels from each other. This one is 46, so move that four
to the left. We can go ahead and just select this grouping, command G,
and let's go ahead and name this nav links. Now what I can do is go ahead and
create a button that would say something like get demo. To do that,
I'm going to hit U to bring up the rounded rectangle tool. Go ahead and select this and drag it out. I'm going to set the width here to 162 and the height to 44. I'm going to come over to the radius and just increase that all
the way. I'm going to come into the borders and make that on two. Come into the color and set this to this really cool blue color, which is this hex code 30A8FF, and just go ahead and save this to the palate as well. Then we can go ahead
and just turn off the fill. Then hit T again to bring up the text tool
and type in an all caps get demo. Then go ahead and reposition
this, and kind of get an idea of how far it is from the edges here. I'm
actually going to go ahead and just group this and call it get demo button. Then we can get an idea about far it is. Actually it's already centered,
and it looks good. It's 27 pixels from each side, 13 from the top, and then 12
from the bottom. Then I'm going to take this and move it about 50
pixels from the about. Then I can go ahead and just group these–command G and do nav. Let's come look at this logo. I can move that, and make sure it's a
centered. I think something like that looks good. I'm going to group both of
these now –command G, call this header, and move this entire grouping about
50 pixels from the top. I can center it by clicking on this button. Right
now, I'm not going to worry about the left and right align until I start
working on this next section. So with that said, let's go ahead and start
working on the next section. The first thing I'm going to do is create the video section. And to do that I'm going to go ahead and just drag
back in this image. You can see now it's a little too big. I'm going to zoom out. I'm going to resize this to 1920 for now. Then I want to create a
rectangle, drag that rectangle out, resize that rectangle to 1920 by 1080. What
this is going to do is set it in the proportion of a video, which is 1920 by
1080. I can go ahead and mask that and come in and move this image
maybe up then I can command K to scale this proportionally. What I'm going to
do is set this to a width of 900 and then drag this back
into this artboard. I'm actually just going to click and drag that in and then I
can rename this to "video" so we know what it is. Then I'm going to place it here–
actually come back into this one and on the mask I'm going to turn that fill off
so we don't see it. There we go, so that looks good. The next thing I'm going to
do is go ahead and just add some text here. Again, I want to hit T on my keyboard
to bring up the text tool. I'm going to click here and then I want to change
this to–instead of a weight of medium I'm going to set this to regular. I'm
going to set the size to 40 pixels. I'm going to set the character here to 7 and then set the line to 55. Then my color should still be the same from the
last time I used it. Then I want to type something here like in all caps "The
Best Live Streaming Platform Ever". Maybe space this out a little bit. I don't really like the way this looks. Let's go ahead and make this title a little longer or something like.
"The Most Powerful ... " Something like that looks good in my
opinion. Then we can move this around for now. Don't really worry about
the positioning for now. I want to hit T on my keyboard. This is going to be the subtext. I'm going to set the subtext size to 22, I'm
going to set the character here to 3, and then set the line to 40. Then I'm
going to type in some filler text. I can see the section is set to a width
of 545, so with this one selected I can set that to 545 as well. And drag this over, move it about 50 pixels from this one. I can go ahead and hit
Command G. Name this one "Column 1," and now that we have that we can go
ahead and start coming back to this video section. The first thing I want
to do is come into this actual image. I'm going to come into fill, and then
radial fill, then move this to about the center of this. Move this dark one to the
corner. And for the gradient, I actually want this one to be black. And then I'm
going to make this, instead of white, I'm going to make it a little bit darker of a
gray. And then change the blending mode to multiply, and then just drop the
opacity down. Toggle this on and off to kind of get an idea of what the
effect looks like. I might actually come back in, and instead of doing a gray,
I might actually do a white so it's not as dark. Then maybe come in and bring in that radial fill a little bit to make those edges darker. Something like that just kind of helps make sure that this text is going to stand out
against this image. What we can do now is go ahead and add a play button here.
To do that, we're going to use a rectangle. Let's come into insert,
shape, and then rectangle. I'm going to create a rectangle here that's 80 pixels
by 60, and then rotate that by 90 degrees. On the border, I'm going to increase that
to 2. Come into the color and set it to this off-white, and then turn off
the fill. Then we'll come in and actually increase this thickness quite a
bit. Then double-click on this, and I want to select all of these corners. And
then just increase this to something like–let's try five. If
we zoom out we see what that looks like. Now, I'm actually–I think I'm going to come in and turn on the fill, and then set that back to this color. That way we can
see it; it's a little easier to see. Alright, so let's go ahead and just
position that in the center here. And I'm going to drop this triangle into this video layer. Alright, and the last thing I'm going to do on this video
layer is add this little ribbon up here that's going to say "Live Now." And to do that, what I'm going to do is actually hit R to use the rectangle tool. I'm going to just
drag out a rectangle here–something like that. Set the width to 174, and then the
height to 55. Then what I'm going to do is double-click on this rectangle and it
brings me back to these points. What I can do is grab this point here, and if I click and hold Shift I can bring it in to the left a little bit like this. Then
I can go ahead and select both of these corners. And what I can do is just go
ahead and increase the corners to give them a little bit more of a round
appearance. So you'll notice that these are still straight, and these are a
little bit more rounded. So I might actually make those a little less
rounded. Let's try something like 4. So I think that looks good. Let's go ahead and just click on this, turn off the border, and then come into
Fill and set it to that really bright blue. Now what I'm going to do is create
this effect where it looks like it's wrapping around this video. So, to do that,
I'm actually just going to hit R again to bring up the rectangle tool. I'm going to
drag it out to something like this. I'm going to zoom in here. Go ahead and just
turn off the border. The fill, I'm going to set it to this blue. And just move it
in. Then I'm going to double-click. Come into this corner here and just hit delete. And now what I can do is just
make this a little darker. So now if we zoom out it looks like it gives it this
like little wraparound effect. And I actually make that a little darker.
Cool. And now what we can do is add a little bit of text here. So let's go
ahead and hit T on our keyboard and we're going to click–I'm going to set this
text to about the same that we used for the nav text. So that's going to be 16. We
do 3 and a half here. And I'm actually going to set this to Medium Italic, and then type
something in like "Live Now." And then just reposition this to something like that.
So, it's telling us that this is in the center, but to me it looks like I need to
come over to the right. So feel free to eyeball that if it doesn't look center
to you. Alright, so now what we can do is just go ahead and select these three
layers. I'm going to Command G and name this "ribbon," and then just bring
it above the video. Now, I'm not going to drop it into the video folder because, if
I did that, it's going to be using that mask. And everything that's outside of that mask is going to be hidden, so we don't want that. So, cool. I think that looks
good. And now we can just go ahead and play around with the positioning of this.
So let's see that this is in the center–something like that looks good. I don't want it too far onto this image.
And then what I can do is just go ahead and select all of these layers, Command G, and let's go ahead and name this "section -1." And the next thing I want to do before we finish up this section is add a little bit of a drop
shadow to this video to kind of give it some depth.
So to do that, I'm going to select this video layer, come into Shadow, and I'm
going to come into the color here and just pick like a really dark purple. And
we can come into the blur here and just spread it out. And then drop the alpha
here for the color, so we toggle this on and off. Something really subtle, but it
kind of just gives a little bit of extra effect. And I'll actually just drop that
down to something like 55. Cool. Now we can select this section-1 and come
over to this button and just center it. And that's going to give us a guideline
to go ahead and center our header. So let's go ahead and just do that. And we
can see that this is 67 pixels from the left. So if we come into our header here,
we can just move this over to 67 and make sure it's 50 from the top. Then I
can come into this section here, and just move this over, and this one is 66. Alright, if we zoom out everything
should be aligned. We can go ahead and just create a guide here too, if
you'd want, something like this. That looks nice and straight. So after I put that guy there, I'm
actually going to move the logo over just a little bit. And zoom out just kind of get
an eyeball effect. We'll right-click here and uncheck this "show alignment guides." It looks like this needs to move down–
just like looking at it, it looks like it needs to come down just a couple pixels. So this whole grouping is still 50, but this
is kind of a little bit off of what it is saying is center. So, I think that
looks good. So now what we can do is go ahead and move onto section two! The first I'm going to do in section two
is bring in a laptop PNG that I created in Photoshop. So I did have to do a
little bit of work outside of Sketch in order to get this effect the way I
wanted. But, I did all the heavy lifting for you guys, so if you're not familiar with
Photoshop you can go ahead and download the course files and use this
asset if you want. Let's go ahead and come into the course files here and
then drag in this laptop PNG. It's going to be really really big, so let's go ahead and resize this to 540 pixels If we zoom out, I can find it way up here. We can drag it into our artboard and then
flip this so it's facing the other way. Alright, so now it's way more manageable. What we're going to do is add some fill layers, some linear gradients, and
some radial gradients, change the blend mode in order for this laptop to blend
in better with this landing page. With that said, with this laptop layer
selected, let's come into fill and I'm going to come into linear gradient and I'm
going to select a color here–like a really dark purple. So let's zoom out and
select like a really dark purple– something like that. I can copy this hex
code, create another point here, and paste that in. I can come into this one and just go
ahead and paste that in as well. Maybe tweak this–make it a
little lighter. Something like that. Alright, and now I can come into this
leftmost point and let's go ahead and actually drop the alpha all the way down
to zero. Then what I'm going to do is drag this gradient down and then focus on this line here being in line with the bottom of this laptop. You can see if I move it, that this line is a little bit off, so something like that I think looks good. Then I can move down this point, something like here. Then slide this back up. You can see that we're covering this bottom section. Now what we can do is come into blending
mode and change that to multiply, and then drop that opacity down quite a
bit until we get the desired effect. So I darkened it up quite a bit. Now
what I can do is come in and add a blending mode coming on this plane–on
the screen of the laptop. Let's go ahead and add a new fill here.
Come into to our linear here and we can do the same thing. Let's go ahead and pick another dark purple color. Copy this hex code on this one as well.
Maybe lighten it up a little bit. Create another point, and paste that hex
code in. Come into this one–let's go ahead and just crank that all the way up
to 100. Then drop this one down to zero. This one–I
actually want this one to go the other way. Then again I'm focusing on this plane to be a little bit more in line with the screen. You can see now that
this gradient line fills up nicely on this screen. I'm going to move this
alpha right here and then move this point all the way down, maybe turn it
just a little bit– something like that. Then we can come in
to multiply and drop this down to something like 40. So if you toggle this
on and off, you can see it just darkens it up a little bit. We can zoom out. So
it's a little too dark. Let's come into this one here and let's drop
this down to 50. Now if we toggle this on and off, you can see that we get
this cool effect. I'm just going to add one more fill here, and it's going to be
a radial fill. I'm going to come down to this point, move this over to like this. On this point here, I'm going to select a dark. On this bright point, I'm
going to select a really bright purple, like this–that's not the color I
wanted. Let's do something like that. Maybe make it a little brighter and then change this to screen. You can move this around, and we need to drop the opacity
on this quite a bit, something like 5%. Now, if we toggle this on and off,
you can see it kind of gives us a little little bit of a brightness right here, where the screen is going to be reflecting down–because
we're going to put a screen here and it's going to give it a little more of
realistic effect. So that's all we wanted to cover for adding the fills to this
laptop PNG in order to give it a more realistic look. Now what we can do is
go ahead and create this screen here. To save us some time, I'm just
going to use the image here that we used on this video, but you can use any
image that you want. In order to create that on a perspective, we're going to use the Magic Mirror plugin. If you don't know what the
Magic Mirror plugin is–I'll include a link in the description–but it's a
really cool plugin that allows you to create shapes like a rectangle and then
mirror an artboard on that shape. The first thing I'm going to do is go ahead
and create an artboard. I'm going to click A on my keyboard and I'm going to set this artboard to 1440 by 900. Then I'm going to go ahead and
name this artboard "laptop screen." Then I'm going to come into this layer, and I'm going to select this unsplash image. Command C and then Command V to
paste it in, and go ahead and scale this up to fit this artboard.
Now what I can do is select this artboard and then come over this. Once
you install Magic Mirror, you'll have this little panel here. You can click
on "include in artboards" and that's going to save it in your Magic Mirror. That's going to make a lot more sense here once we create a rectangle and then
skew this artboard on to it. Let's go ahead and create a rectangle here.
So I'm going to hit R my keyboard. Let's draw a rectangle out and I'm actually going to
set this to–let's do 1440 divided by two and then set a height here to 900 divided by two. That's going to give us the same ratio as this
artboard. I want to turn off the border. I'm going to drag it over to this laptop
and I'm going to resize it to be pretty small–a little bigger than that.
Then I can double-click on this and then go ahead and just move these points into
an area that fits this computer screen. Something like that looks good for
this tutorial at least. With this layer selected, what I can do now is come
over to this Magic Mirror panel, and right now I have no artboard selected,
but if I come into to this drop-down, I can select the laptop screen and it's
going to be mirrored onto this rectangle, which is why they call it Magic Mirror.
It's really cool. We can go in and turn off this fill because you can
see that there's a little bit of gray around that image. Now you can see
that we get this really cool screen effect on this laptop. Obviously it's a little too bright, so what I'm going to do is come into the
fill here and I'm going to come in to radial. Let's go ahead and make
this one a really dark purple. Let's make this one a little bit of a
brighter one. Come in to multiply and we can drop this down to 30, or
maybe increase it to 50. You want it pretty dark, and let's
actually increase it just a little bit. Maybe to 60. Cool, so that gives us
that. Now what we can do is–I want to create this effect where it looks like
this screen is coming– floating off from this one. What I'm going to do is Command C, Command V, and that's going to create that. I accidentally
turned on this fill, so make sure that was still off. Now what I can do is
turn off this one so it looks like it's actually not dark, and just move this
into a position–maybe make it a little bigger. Alright, so that kind of gives
this effect that is kind of coming off of the laptop–it's a really cool effect. Now what we can do to really bring this effect even closer to where we want
it is create these lines that are coming out of the laptop–to kind of give the
viewer this idea that it's coming off of this. To do that, we can hit V on our keyboard to bring up the vector tool. I'm going to zoom in here. I'm going to click on this corner
and then click on this one here, which is on the edge of the one on the laptop.
Just click return. Then I'm going to come into the border and turn up the
thickness to two. Come into this gear icon and click on this rounded ends so the
edges are round instead of squared off. Then I'm going to come into the
color, come into linear gradient, and just move these around. On this one, I'm going to set a color to this like bright purple. So if you zoom
out, I can set a color to this here. Feel free to just pick this yourself– I think something like that is good. Command C, and then I want to
paste it here on this one as well. On this one, I'm going to drop the alpha down to zero and then make another point. Then bring that alpha up a
little bit. You can see if we zoom out it kind of gives this effect–
helps the viewer a little bit give an idea of what's going on here. Let's go ahead and select this path. I'm going to Command C, Command V to duplicate it. I'm going to hold shift and then just move it down to this corner. I'm going to zoom in
here, maybe just kind of move this around. I can Command C, Command V one more
time and just move this over one more time. Then stretch that out to that corner. If you zoom out here, you get an idea of how that's giving this
cool zoomed-out effect. Let's go ahead now and add a
little bit of text to this section. To save us some time, we'll just come up
here and Command C, Command V on column one, drag it out of section 2, and then
rename this to column 2. Then drag this down. We can say something different here, but before we type that let's resize this. I'm going to make a little bit smaller, so let's set the header here to 30. Set the
characters to 6 and the line to 50. Then we can type something in like, in
all caps, "Real-time playback with zero latency." Then we want to make this section a little smaller–just delete some of that. This is at 438, so let's go ahead and set
this width as well to 438. Delete some of this as well. Then we can move this. Right now my smart guides are not on, so if I right-click up
here to show alignment guides, I will be able to get that snapping back. Let's go ahead and set this about 40 pixels from each other. I think I'm going to bring the text of this one in a little bit, so let's come back
to column 1. And I'm going to move this over to the right quite a
bit and then come into section one and then recenter that. Now it's 122 from the side–there we go. I think that looks a little nicer. What I can do now is come into this "get demo" button. I'm going
to Command C. I want to select this one and do "paste it over." Then drag
this button down. I'm going to zoom in. I'm going to rename this to "learn more" and then I'm going to come into this rectangle and make it a little
wider. Then recenter that–something like that. If i zoom out here, I can make
sure this one's about 40 as well. Go ahead and drop this one into the column 2. Now that all these move together, make sure this one's still 122 from the
side–there we go. Let's go ahead and clean up this laptop
section. Let's go ahead and Command G on these paths, name this lap laptop lines, rename this to "laptop screen," and rename
this to "laptop screen expanded." Go ahead and get all these layers,
Command G, and we can call this laptop so we know what that is. I'm going to shift left to move this over, maybe move it down a little
bit. Maybe move section one up, and then select these, Command G. Let's call this
one "section two." Bring section one on top and let's just go ahead and move
this over and move this down–maybe move the laptop back a little bit to the
right. The last thing we need to do is go ahead and bring this
part here in the nav–the header–we need to bring that a little bit in the
inside so it lines up with this new text layer. I'm going to drag this guide a little bit to the left, so it's going to help us line this up. Do
the same with the right. Now we can come into this header layer. I'm going
to zoom in a little bit, click on this icon. If we expand this, we can click on
the logo and move this to the left. I'm going to do about right there and
then click on the nav section and move that to the left as well. That's it,
that wraps up this tutorial. Congrats on finishing the course! If you liked it, give it a thumbs-ups and please subscribe! And don't forget, you can still become a free member to download the Sketch file that I completed in today's course. Again, I'm Hunter from Skillthrive and I'll see you in the next one!
