Sketch Tutorial – Create a web design in Sketch App

Hey, I’m Hunter from Skillthrive and inthis tutorial you’ll learn how to create this ground page in Sketch. Before weget started, make sure you download the course enters by becoming a free memberon Skillthrive.com. You’ll get instant access to the Sketch file that we’recreating in today’s course as well as all of our current free courses. There’sa link in description that will take you to a enrollment page where you canjoin. Once you’re in Sketch, go ahead and sounds A to brought forward by the artboardtool. Then I’m going to clink 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 thenchange the altitude to 1617 and then hit return.Then let’s go ahead and justrename this artboard to property land page one. Then I’m going to zoom out here so I can see the part artboard because I’mgoing to slip an image here that we want to use as the background. I includedthat epitome here in the course folders. You can see here, I can drag this intoSketch, and formerly it lades in you’ll see that it’s a little too big. Let’s comeup to length and then drop this down to 2700, then reposition that. Once youget it in this place that you like, come up to gaussian blur, increase that amountto 50, and then come in to fill. With the solid complete, let’s go ahead and select a really dark purple and modification the blending procedure to multiply. If wehover over opacity, we can go ahead and just lag that to the left to decreasethat overall effect.Something around 30% glances good. Then we can goahead and simply fasten this seam so we don’t move it by collision. Then let’sgo ahead and time zoom in to this top section where we can start working onour header. The first one to do is go ahead and really create a logo. To dothat, I’m going to come into insert, contour, and then triangle. I’m going to create aperfect rectangle now around 48 pixels. I’m going to fling itso turn itupside down. I’m going to increase the thickness here to two, come in to theborder color, and then change it to this color that we want to usethroughout this tutorial, which is e2e 1e7. Then click return. I’m just going to go ahead and add that color now to my swatches by clicking on thisplus button.Now, if we turn off the pack, you can see that we just have thisoutline. I’m just not going to leave it as a plain rectangle, what I’mactually going to do is create another triangle. Make this one a littletaller and thinner. Let’s go ahead and increase this one to two, do that colorhere that we just saved, and then turn off the fill.Then I’m going torotate it to something like this and then move it over. Then I’m going to select both sets of triangles and then come into subtract.Now, if you don’t get the gape that you want right off the at-bat, what you can do is come into this mixed mold, expand it, and you can always come in and revise these shapes. I can make this one a little taller, I can extend it out, maybe make it a little skinnier again. I can rotate it precisely a little bit something like that inspections good. I canhit return and just go ahead and rename this compounded influence to logo so we know what it is.I’m going to leave that there for now, and then I’mgoing to start working on the nav associates. I’m going to ten-strike T on my keyboard tobring up the verse implement. I’m going to sound and I have the typeface set to Rubik, which is a free Google font. I’m including the course documents if you guysdon’t have it and I’m going to set the load to medium, the size to 16, and thecharacter to 3.5. Then make sure that the colouring is set to this color that wesaved herethat we used for the emblem. Then I’m just going to type in somestuff that would make sense for our project, which would be features. Then I’mjust going to hold alt and clink this out to about 50 pixels. I’m going torename this to pricing. Maybe do one more. Let’s do this one that saysabout, and then we can make sure that those are 50 pixels from each other. This one is 46, so move that fourto the left.We can go ahead and just select this grouping, dominate G, and let’s go ahead and reputation this nav relation. Now what I can do is go ahead andcreate a button that would say something like get demo. To do that, I’m going to reached U to bring up the rounded rectangle implement. Go onward and select this and drag it out. I’m going to set the thicknes now to 162 and the elevation to 44. I’m going to come over to the radius and merely increase that allthe way.I’m going to come into the borders and manufacture that on two. Come into the color and designated this to this really cool blue color, which is this hex code 30 A8FF, and just go ahead and save this to the palate as well. Then we can go aheadand simply switch off the fill. Then reached T again to bring up the verse tooland kind in an all covers get demo. Then go ahead and repositionthis, and kind of get an idea of how far it is from the edges here.I’mactually going to go ahead and time 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 ogles good. It’s 27 pixels from all sides, 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 only group thesecommand G and do nav. Let’s come look at this symbol. I can move that, and make sure it’s acentered. I think something like that searches good. I’m going to group both ofthese now require G, label this header, and move this entire grouping about5 0 pixels from the top. I can center it by clicking on this button. Rightnow, I’m not going to worry about the left and right align until I startworking on this next section. So with that said, let’s go ahead and startworking on the next area. The first thing I’m going to do is create the video section. And to do that I’m going to go ahead and time dragback in this image.You can see now it’s a little too big. I’m going to zoom out. I’m going to resize that is something that 1920 for now. Then I want to create arectangle, lag that rectangle out, resize that rectangle to 1920 by 1080. Whatthis is going to do is set it in the percentage of a video, which is 1920 by1080. I can go ahead and disguise that and are now in and move this imagemaybe up then I can require K to scale this proportionally. What I’m going todo is set that is something that a thicknes of 900 and then drag this backinto this artboard.I’m actually just going to click and drag that in and then Ican rename this to “video” so we know what it is. Then I’m going to place it hereactually come back into this one and on the cover-up I’m going to turn that fill offso we don’t see it. There “theres going”, so that seeks good. The next thing I’m going todo is go ahead and precisely add some verse now. Again, I just wanted to affected T on my keyboardto bring up the verse implement. I’m going to please click here and then I want to changethis toinstead of a force of medium I’m going to set this to regular. I’mgoing to set the immensity to 40 pixels. I’m going to set the specific characteristics now to 7 and then set the line to 55. Then my colour should still be the same from thelast hour I squandered it.Then I want to type something now like in all caps “TheBest Live Streaming Platform Ever”. Maybe space this out a little. I don’t really like the route this seems. Let’s go ahead and make this title a little longer or something like.”The Most Powerful … ” Something like that appears good in myopinion. Then we can move this around for now. Don’t really worry aboutthe positioning for now. I want to stumbled T on my keyboard. This is going to be the subtext. I’m going to set the subtext size to 22, I’mgoing to set the specific characteristics here to 3, and then set the line to 40. Then I’mgoing to type in some filler text.I can see the section is set to a widthof 545, so with this one selected I can specify that to 545 as well. And draw this over, move it about 50 pixels from this one. I can go ahead and hitCommand G. Name this one “Column 1, ” and now that we have that we can goahead and start coming back to this video section. The first thing I wantto do is come into this actual portrait. I’m going to come into fill, and thenradial fill, then move this to about the centre for human rights of this. Move this light one to thecorner.And for the gradient, I actually require this one to be black. And then I’mgoing to make this, instead of white, I’m going to make it a little bit darker of agray. And then deepen the blending state to multiply, and then exactly decline theopacity down. Toggle this on and off to kind of get an idea of what theeffect was like. I might actually come back in, and instead of doing a gray-headed, I might actually do a white so it’s not as obscurity. Then maybe come in and bring in that radial pack a little bit to realize those edges darker. Something like that really various kinds of assists make sure that this text is going to stand outagainst this image. What we can do now is go ahead and supplemented a toy button here.To do that, we’re going to use a rectangle. Let’s come into insert, determine, and then rectangle. I’m going to create a rectangle here that’s 80 pixelsby 60, and then rotate that by 90 severities. On the border, I’m going to increase thatto 2. Come into the color and gave it to this off-white, and then turn offthe crowd. Then we’ll come in and actually increase this thickness quite abit. Then double-click on this, and I want to select all of these regions. Andthen merely increase this to something likelet’s try five. Ifwe zoom out we find what that looks like. Now, I’m actuallyI repute I’m going to come in and turn on the crowd, and then set that back to this color. That route we cansee it; it’s a little easier to see. Alright, so let’s go ahead and justposition 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 videolayer is add this little ribbon up now that’s going to say “Live Now.” And to do that, what I’m going to do is actually affected R to use the rectangle tool. I’m going to justdrag out a rectangle heresomething like that. Set the width to 174, and then theheight to 55. Then what I’m going to do is double-click on this rectangle and itbrings me back to these points. What I can do is grab this station here, and if I sounds and hold Shift I can bring it in to the left a little bit like this. ThenI can go ahead and select both sets of areas. And what I can do is just goahead and increase the regions to give them a little more of a roundappearance. So you’ll notice that these are still straight, and these are alittle bit more rounded.So I might actually reach those a little lessrounded. Let’s try something like 4. So I considered that gapes good. Let’s go ahead and time click on this, turn off the border, and then come intoFill and defined it to that really bright blue. Now what I’m going to do is createthis consequence where it looks like it’s wrapping around this video. So, to do that, I’m actually just going to smacked R again to bring up the rectangle implement. I’m going todrag it out to something like this. I’m going to zoom in here. Go onward and justturn off the border.The fill, I’m going to set it to this blue. And exactly move itin. Then I’m going to double-click. Come into this corner here and only affected delete. And now what I can do is justmake this a little darker. So now if we zoom out it was like it causes it thislike little wraparound upshot. And I actually induce that a little darker.Cool. And now what we can do is add a little bit of text here. So let’s goahead and stumbled T on our keyboard and we’re going to clickI’m going to set thistext to about the same that we used to support the nav text. So that’s going to be 16. Wedo 3 and a half here. And I’m actually going to set this to Medium Italic, and then typesomething in like “Live Now.” And then merely reposition this to something like that.So, it’s telling us that this is in the center, but to me it was like I need tocome over to the right.So feel free to eyeball that if it doesn’t gape centerto you. Alright, so now what we can do is just go ahead and adopt these threelayers. I’m going to Command G and referred this “ribbon, ” and then really bringit above the video. Now, I’m not going to drop it into the video folder because, ifI did that, it’s going to be using that cover-up. And everything that’s outside of that mask is going to be hidden, so we don’t want that. So, cool.I think that looksgood. And now we can just go ahead and play around with the positioning of this.So let’s see that this is in the centersomething like that gapes good. I don’t want it more far onto this image.And then what I can do is just go ahead and select all of these blankets, Command G, and let’s go ahead and call this “section -1. ” And the next thing I want to do before we finish up this section is add a little bit of a dropshadow to this video to kind of devote it some depth.So to do that, I’m going to select this video layer, come into Shadow, and I’mgoing to come into the color now and precisely pick like a really dark purple. Andwe can come into the blur here and precisely spread it out. And then discontinue the alphahere for the colour, so we toggle this on and off. Something truly slight, but itkind of time dedicates a little bit of extra effect.And I’ll actually precisely plunge thatdown to something like 55. Cool. Now we can select this section-1 and comeover to this button and merely hub it. And that’s going to give us a guidelineto go ahead and core our header. So let’s go ahead and time do that. And wecan see that this is 67 pixels from the left. So if we come into our header here, we can really move this over to 67 and make sure it’s 50 from the top. Then Ican come into this section now, and time move this over, and this one is 66. Alright, if we zoom out everythingshould be aligned.We can go ahead and exactly create a guide here too, ifyou’d want, something like this. That looks nice and straight. So after I threw that person there, I’mactually going to move the logo over merely a little. And zoom out precisely kind of getan eyeball effect. We’ll right-click here and uncheck this “show alignment guides.” It looks like this needs to move downjust like looking at it, it looks like it needs to come down precisely a marry pixels. So this whole grouping is still 50, but thisis kind of a little bit off of what it is saying is center. So, I think thatlooks good. So now what we can do is go ahead and move onto section two! The first I’m going to do in section twois bring in a laptop PNG that I created in Photoshop.So I did have to do alittle bit of work outside of Sketch in order to get this impression the course Iwanted. But, I did all the heavy lifting for you guys, so if you’re not familiar withPhotoshop you can go ahead and download such courses records and use thisasset if you demand. Let’s go ahead and come into the course files now andthen 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 thenflip this so it’s facing the other way.Alright, so now it’s direction more practicable. What we’re going to do is add some pack strata, some linear gradients, andsome radial gradients, alter the harmonize state in order for this laptop to blendin better with this landing page. With that said, with this laptop layerselected, let’s come into fill and I’m going to come into linear gradient and I’mgoing to select a color herelike a really dark purple. So let’s zoom out andselect like a really dark purple something like that. I can replica this hexcode, create another point now, and paste that in. I can come into this one and just goahead and glue that in as well. Maybe tweak thismake it alittle lighter. Something like that. Alright, and now I can come into thisleftmost site and let’s go ahead and actually slip the alpha all the way downto zero.Then what I’m going to do is drag this gradient down and then focus on this cable 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 belief seeks good. Then I can move down this time, something like here. Then slip this back up. You can see that we’re comprising this tush section.Now what we can do is come into blendingmode and reform that to multiply, and then drop that opacity down quite abit until we get the desired effect. So I darkened it up quite a bit. Nowwhat I can do is come in and contributed a blending state coming on this planeonthe screen of the laptop. Let’s go ahead and add a brand-new complete here.Come into to our linear here and we can do the same thing. Let’s go ahead and picking another twilight purple hue. Copy this hex system on this one as well.Maybe lighten it up a little. Create another point, and glue that hexcode in. Come into this onelet’s go ahead and just crank that all the way upto 100. Then drop this one down to zero.This oneIactually requirement 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 thatthis gradient line replenishes up neatly on this screen. I’m going to move thisalpha right here and then move this place all the way down, maybe turn itjust a little bit something like that. Then we can come into multiply and cease this down to something like 40. So if you toggle thison and off, you can see it exactly shades it up a little. We can zoom out. Soit’s a little too dark. Let’s come into this one now and let’s dropthis down to 50. Now if we toggle this on and off, you can see that we getthis cool effect. I’m just going to add one more crowd now, and it’s going to bea radial complete. I’m going to come down to this part, move this over to like this.On this item here, I’m going to select a dark. On this light degree, I’mgoing to select a really luminous purple, like thisthat’s not the coloring Iwanted. 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 opacityon this quite a bit, something like 5 %. Now, if we toggle this on and off, you can see it kind of pays us a little little bit of a brightness right here, where the screen is going to be reflecting downbecausewe’re going to kept a screen now and it’s going to give it a little bit more ofrealistic result. So that’s all we wanted to cover for adding the crowds to thislaptop PNG in order to give it a more realistic look. Now what we can do isgo ahead and organize this screen here. To save us some time, I’m justgoing to use the image here that we spend on this video, but you can use anyimage 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 theMagic Mirror plugin isI’ll include a tie-up in the descriptionbut it’s areally cool plugin that allows you to create determines like a rectangle and thenmirror an artboard on that determine. The first thing I’m going to do is go aheadand create an artboard. I’m going to clink A on my keyboard and I’m going to set this artboard to 1440 by 900. Then I’m going to go ahead andname this artboard “laptop screen.” Then I’m going to come into this layer, and I’m going to select this unsplash portrait. Command C and then Command V topaste it in, and go ahead and magnitude this up to fit this artboard.Now what I can do is select this artboard and then come over this. Onceyou install Magic Mirror, you’ll have this little panel here. You can clickon “include in artboards” and that’s going to save it in your Magic Mirror. That’s going to make a lot more sense now formerly we create a rectangle and thenskew this artboard on to it.Let’s go ahead and create a rectangle here.So I’m going to punched R my keyboard. Let’s reap a rectangle out and I’m actually going toset this tolet’s do 1440 divided by two and then set a meridian now to 900 divided by two. That’s going to give us the same ratio as thisartboard. I want to turn off the border. I’m going to draw it over to this laptopand I’m going to resize it to be jolly smalla little bigger than that.Then I can double-click on this and then go ahead and really move these points intoan area that are appropriate this computer screen.Something like that seems good forthis tutorial at least. With this blanket selected, what I can do now is comeover to this Magic Mirror body, and right now I have not yet been artboard adopted, but if I come into to this drop-down, I can select the laptop screen and it’sgoing to be mirrored onto this rectangle, which is why they call it Magic Mirror.It’s really cool. We can go in and switch off this pack because you cansee that there’s a little bit of grey-haired around that image. Now you can seethat 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 thefill now and I’m going to come in to radial. Let’s go ahead and makethis one a really dark purple. Let’s make this one a little bit of abrighter one. Come in to multiply and we can drop this down to 30, ormaybe increase it to 50. You crave it jolly dark, and let’sactually increase it merely a little bit. Maybe to 60. Cool, so that gives usthat.Now what we can do isI want to create this influence where it looks likethis 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 accidentallyturned on this complete, so make sure that was still off. Now what I can do isturn off this one so it looks like it’s actually not dark, and precisely move thisinto a positionmaybe make it a little bigger. Alright, so that kind of givesthis consequence that is kind of coming off of the laptopit’s a really cool effect.Now what we can do to really introducing this effect even closer to where we wantit is create these lines that are coming out of the laptopto kind of give theviewer this idea that it’s coming off of this. To do that, we are able to stumbled V on our keyboard to bring up the vector implement. I’m going to zoom in here. I’m going to click on this cornerand then click on this one here, which is on the edge of the one on the laptop.Just sound return.Then I’m going to come into the border and turn up thethickness to two. Come into this gear icon and click on this rounded ends so theedges are round instead of squared off. Then I’m going to come into thecolor, come into linear gradient, and time move these around. On this one, I’m going to set a complexion to this like bright purple. So if you zoomout, I can set a colouring to this here.Feel free to only pick this yourself I think something like that is good. Command C, and then I want topaste 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 alittle bit. You can see if we zoom out it kind of demonstrates this effecthelps the see a little bit demonstrate an idea of what’s going on here. Let’s go ahead and select this road. I’m going to Command C, Command V to replication it. I’m going to hold switch and then just move it down to this corner. I’m going to zoom inhere, maybe only kind of move this around.I can Command C, Command V one moretime and precisely move this over one more time. Then strain that out to that corner. If you zoom out here, you get an idea of how that’s opening thiscool zoomed-out influence. Let’s go ahead now and add alittle bit of text to this section. To save us some time, we’ll just come uphere and Command C, Command V on row one, lag it out of section 2, and thenrename this to column 2. Then drag this down. We can say something different now, 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 thecharacters to 6 and the line to 50. Then we can type something in like, inall detonators, “Real-time playback with zero latency.” Then we want to make this section a little smallerjust remove some of that.This is at 438, so let’s go ahead and setthis thicknes as well to 438. Delete some of this as well. Then we can move this. Right now my smart templates are not on, so if I right-click uphere to show alignment navigates, I allowed to get that snapping back. Let’s go ahead and designate this about 40 pixels from one another. I picture I’m going to draw the text of this one in a little, so let’s come backto article 1. And I’m going to move this over to the freedom quite abit and then come into section one and then recenter that. Now it’s 122 from the sidethere we go. I think that gapes a little nicer. What I can do now is come into this “get demo” button. I’m goingto Command C. I want to select this one and do “paste it over.” Then dragthis 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 littlewider. Then recenter thatsomething like that. If i zoom out here, I can makesure this one’s about 40 as well. Go onward and stop this one into the column 2. Now that all these move together, make sure this one’s still 122 from thesidethere “theres going”. Let’s go ahead and clean up this laptopsection. Let’s go ahead and Command G on these roads, word this sip laptop directions, rename this to “laptop screen, ” and renamethis to “laptop screen expanded.” Go ahead and get all these coatings, Command G, and we can call this laptop so we know what that is. I’m going to alter left to move this over, perhaps move it down a littlebit.Maybe move part one up, and then select these, Command G. Let’s call thisone “section two.” Bring section one on top and let’s just go ahead and movethis over and move this downmaybe move the laptop back a little bit to theright. The last thing we need to do is go ahead and bringing thispart here in the navthe headerwe need to bring that a little in theinside it is therefore strings up with this new text layer. I’m going to draw this guide a little bit to the left, so it’s going to help us boundary this up. Dothe same with the claim. Now we can come into this header layer. I’m goingto zoom in a little bit, click on this icon. If we expand this, we can click onthe logo and move this to the left. I’m going to do about right there andthen click on the nav section and move that to the left as well. That’s it, that packages up this tutorial.Congrats on finishing such courses! If you liked it, give it a thumbs-ups and please subscribe! And don’t forget, you can still become a free representative to download the Sketch file that I completed in today’s trend. Again, I’m Hunter from Skillthrive and I’ll see you in the next one !.

As found on YouTube

Share this article

Leave a comment

Related Posts