Posted 10 months ago

Creating awesome landings in Sketch part 01

View Profile

In this first part of the tutorial we are going to  to begin creating  our soon to be awesome looking Mockup for a new landing page, for this tutorial i have taken the concept of a music app. 

Start by launching  SketchApp  if you don't already have sketch then you can download the trial or pay, sadly this tool isn't free but its a great tool and has endless possibility's.

On the load screen we are going to select new document , next we will click the plus sign ( insert ) found on the top left of screen and select art-board , as this is really a mockup we don't have to be really specific with sizing but make it big enough that you can work with , and you can always expand if required so begin by drawing your art-board.

Next up we are going to begin with the header of our page,  so we will add our first rectangle  Insert -> shape -> Rectangle.

Once we have our first rectangle drawn 100% width & 400px high we will begin customising it.

The toolbar on the right allows you to change the colour and remove the border that are both ticked by default, so first untick the border to remove the border we wont need it , next select the fill option and here we will change the colour i'm using #43319B but you can use any colour you wish.

Now comes the fun part :) we begin creating the landing design! if you haven't already checked out Unsplash then i recommend it to anybody its full of incredible royalty free image's. I am using this cool DJ photo with the smoke background.  you can open image on unsplash and right-click copy image  then head back to Sketch and right-click paste here image.

Once we have image pasted next we will select image then hold shift  and  then select your rectangle. Once both are selected we can now click Mask  [green circle with small blue square] this will merge both together *please don't worry about position of image we will sort that out next.

Cool! now lets position our image over purple rectangle you will notice on the left hand side a folder has appeared called Bitmap open the folder and click on our bitmap image , you will now be able to move the image around so find a position that suits you and once your happy we can now drop the opacity of our image using the right hand toolbar while we still have our image selected.

We now have a great looking header for our landing page! In Part 02 we will begin adding the content  to header then work down the page to the next section of our site. Don't forget if you have any questions or problems feel free to comment below or tweet me :)

Must be logged in to comment
Creating awesome landings in Sketch part 01 / Welcome to Signl