If you’re just getting started with designing for the web, a newbie to Sketch app, a Photoshop (or similar) user not quite ready to make the jump, or a developer looking to throw UI design into your repertoire, then these easy to follow tutorials will be perfect to give you a brief understanding of how Sketch works, and how to produce a gorgeous design for desktop, tablet, and mobile.
Ok. Let’s make some progress on Part 2 of this 5 part course. (It was just 4 parts originally, but I wanted to break it down a little to cover some aspects in more detail).
So by now, hopefully, you have the following installed…
- Sketch (If you don’t we may have some trouble with this tutorial)
- Sketch Toolbox & Plugins that I recommended (Content Generator for Sketch and Unsplash It)
- SkyFonts (not essential, but a great app to have)
- Google Fonts (Raleway, Open Sans, Satisfy)
and the following setup inside of Sketch…
- Layout Guides
- Artboard for Desktop (1400px x 7000px)
In Part 2 of this tutorial series, we’re going to work through the first half of our Desktop template. So we’ll be covering the header, about section, and portfolio section.
Awesome! Let’s get down to creating some design goodness folks…
Let’s take it straight from the top
Now, let’s start with the Header where our background image, logo, navigation, and introductory text will reside.
Ok, so firstly we’re going to drop in our large background (Hero) image.
Now you can choose to stick with the Unsplash It plugin that we installed earlier, to add the header image (and all other images that will be required throughout the tutorial), or, if you really want to use the images I’m going to be using in the examples below (And who wouldn’t, they’re some great images), you can grab them from here, and I’ll quickly show you how to add images manually to your design below.
Option 1: Adding images via the Unsplash It plugin
This is the most straightforward option for quickly dropping images into your design. The only restriction you have via this option is that the images are randomly chosen by the plugin. If you’re wanting to create a mockup, without a specific style of image it’s cool for that, and such a timesaver.
Also remember that the layer your image has just been inserted into is currently a Vector, so if you want this layer to act like a bitmap image then you need to go to the Menu bar, and click on Layer > Flatten Selection to Bitmap.
Option 2: Adding images manually
If you want more control over the images that you add to your design we’re going to have to do it the hard way (it’s really not).
You have 2 options of adding images manually.
- The obvious way. Click on the Image icon in the Toolbar, or via Insert > Image…
- Or. And I do this from time, to time if I want to have a specific image size set, and not have to resize my image after I have inserted into my design. Use the key command (R) to draw a rectangle (or a shape of your choice), then in the Inspector panel you will see the Fills option. Click on the fill colour, and then choose the Pattern Fill option. In the dropdown menu change from Tile to Fill, and then click on Choose Image… to add your image. This will constrain the image to the dimensions you set on the shape you inserted. This image is still inside of a shape layer, so If you want it to act like a bitmap image, make sure your layer is selected, and then from the Menu bar click on Layer > Flatten Selection to Bitmap. This now allows your layer to act as a normal image, and allows you the option to make Colour Adjustments, cropping etc… in the Inspector panel.
For the purpose of these tutorials, we’ll stick with the Unsplash It plugin, but hopefully you now have a better understanding of the various options there are to insert images into your design.
Creating the header
Ok. So we’ve inserted our large Header image (keep it as a Vector layer for now. It just allows you to easily change the image via the Unsplash It plugin if you want to.
Quick Tip: Ctrl + Shift + R. If you want to quickly run the plugin again (in our case, quickly swapping out the image in the header for a new one) that keyboard shortcut right there will become your new best, shortcut friend. Try it out!
Now we’re going to drop in another layer to act as a dark overlay over our header image. Now you could have flattened your header image to a bitmap, and just reduced the Brightness, and Contrast in the Color Adjust settings to achieve a similar effect. But as I mentioned in the last paragraph, keeping it as a Vector layer for now just allows you the freedom of swapping out the image (if you change your mind) quickly.
So create a new layer for our overlay (R) and draw a rectangle on the artboard, any size. And then give that layer the following dimensions, positioning, and border settings.
Now let’s change the colour of our overlay, and tweak the opacity, with the following settings in the Inspector panel…
Cool. This just allows us to keep a good contrast when we place our text (in our case, white, and lime green) over the top of the image. If you are using an even darker image then you may not need the overlay.
Creating the menu bar
Now we’re going to create the top menu bar that will contain our logo, and main navigation. Grab the image logo if you haven’t already, from here.
Time to add 4 menu items to our navigation. I’m keeping it simple for this tutorial series.
Press (T) to add some text to your artboard, and then enter the following style preferences to the text…
And now with the text layer still selected, hold Alt, and then drag to create 3 more copies of that layer. Another option is to right-click on the selected layer and choose Duplicate.
So we now have 4 menu items. Go ahead and double-click each one, and change the text to the following (for the purpose of this tutorial anyway)…
Now with all 4 menu items selected. Go to the Menu bar, and then from the Type dropdown menu, choose Uppercase.
With the 4 items still selected, let’s make sure all our menu items are spaced evenly, and vertically aligned correctly. Using Distribute Horizontally, and Align Vertically in the Inspector panel.
Now lets pull that logo, and our menu items into line also. With your logo, and menu items selected, click Align Bottom in the Inspector.
Let’s drop in a divider to separate our top bar from the rest of the header, and to provide a little more focus to the navigation area.
Choose the Line tool (L), and then holding Shift, draw a line across the design, adjusting the Length, if required to 1360 in the Inspector.
Then making the following adjustments (Color, and Thickness) in the Borders settings.
Keeping your colours in shape
Ok. Let’s just back up for a moment.
Now we’ve started adding more colour to our design it makes sense to start adding these colours (which we may be using a few times throughout this tutorial) to the Document Colors palette in the Inspector. This just allows you to easily find, and re-use colours throughout your design, and it’s also great for when you hand off to a developer at some point.
So with that Line (with the beautiful Lime Green we chose) selected. Click on the colour in the Inspector, and then at the bottom of the pop-up. Inside the Document Colors section, click on the (+) symbol to add that colour to the palette.
You can go ahead and do the same for the Overlay colour for the header image if you want. Let’s keep things nice, and organised.
If you ever want to remove a colour from the Document Colors section just right-click on the colour, and choose Remove. Simple.
Ok. Back to it…
Time for some spring cleaning in our Layers List
Now so we can begin to align elements correctly on our Artboard, and also to start grouping some of our layers together just to keep things organised moving forward. I always like to rename, group elements etc.. after I have created just a small section of my design. Just being organised like this as you move through a design helps so much, and doesn’t leave you at the end of design looking at a massive Layers List with Rectangle 68, Rectangle 73, Bitmap etc… which leaves you bewildered at what, is what on your Artboard. Not cool. And it’ll frustrate you big time in the end.
Rename, Group, Rearrange Layers as you move through, a little at a time. You know it makes sense.
So firstly going through, and renaming some of the layers in your Layers List. You can use Cmd + R to rename the layer and quickly Tab through the layers, renaming as you go, until you end up with something like in the image.
Then group your menu items together. Select them all in the Layers List, and then Cmd + G Now go ahead and rename that group to Navigation.
And it would make sense to group that whole top header area together (Logo, Navigation, Line/Divider). So select them all and Cmd + G, and then rename.
Now Sketch will assign it’s own group names such as (Divider + Navigation + Header Logo). And on some occasions, I’m happy on what it outputs, but other times I’ll quickly rename them to something a little more refined (ie; Logo + Navigation). It’s completely up to you how you go about this.
Now let’s position this top header area nicely in our design. With the logo/navigation group selected press the Alt (another keyboard shortcut you’ll use a lot) key, and you’ll see Sketch’s Measure guides appear. Now we’re going to position the group 40px from the top, right, and left like the following image…
Let’s get that big ol’ Hero Statement (As I like to call them) into place. Create 2 text layers (T). You could use just the one layer for the Hero Statement, but for the purpose of this tutorial, you just have a little more control when having them on 2 separate layers.
Now for the first text layer ‘We are design’, use the following options in the Inspector panel and choose the Colour (that fruity Lime Green) we saved in the Document Colors previously…
And for the second text layer ‘Personified’, use the following options, with a Hex (#) colour value of FFFFFF.
Nice work. Looking good!
Now let’s line things up nicely. Switch on the Layer Guides Ctrl + L so you can quickly snap your 2 text layers onto your guides. Like the following image…
Now group those 2 text layers together Cmd + G and rename them Cmd + R to maybe ‘Hero Statement’?
Let’s group all those elements that we’ve created up till now
- Logo + Navigation
- Hero Statement
- Background Image
And rename it something like ‘Header’. And boom! There’s our header all done, and dusted. Let’s move on…
The About section
Time to give the people a little introduction, and time to bring one of the plugins that I mentioned in part 1 of the tutorial series ‘Content Generator for Sketch’ into play.
And also to look at using Styled Text, so we can easily reuse Text Styles throughout our design.
So let’s drop in 2 text layers for the section heading, and style them (as shown earlier) the same as the Hero Statement in the header (minus the drop shadow).
But, as we’re going to be re-using those text styles in further sections of our design, It would now be a smart idea to look at the Styled Text option in Sketch.
So select the ‘Time to say’ text layer, and then either…
- Click on Layer in the Menu bar, and choose Create Shared Style
- Go to the Inspector panel and click on No Text Style, then choose Create New Text Style from the pop out menu
Whichever option suits you. You will now see a field highlighted in the Inspector panel where you can now label your new Text Style. In my case, I gave it the label of ‘Section Title Accent’.
And then follow the same instructions for the text layer ‘Hello’. Which I simply named ‘Section Title’.
Now we can quickly re-use these text styles throughout our design, and save ourselves plenty of time in the process. Your time is valuable my friend, and don’t you forget it!
Ok. We’re going to drop in a small paragraph of text under our section title, and make good use of the ‘Content Generator for Sketch’ plugin before it thinks we’ve forgotten about it.
Create a new text layer (T), and then style it with the following (including a Hex (#) colour value of 666666), and keeping the Width ‘Fixed’. (This saves the block of text that we will soon generate from spilling out of the Artboard, which can be annoying).
And make it a new Text Style following the instructions earlier. Maybe call it something like ‘Section Paragraph’.
Quick Tip: Remember the keyboard shortcut throughout this tutorial Ctrl + L for your Layout Guides. With your guides visible you can quickly snap (align) elements to your grid.
Alongside Alt for measuring the distance between objects, Ctrl + L are without a doubt my most often used keyboard shortcuts. They’ll be yours too. They’re invaluable.
Ok. Lets drop in some filler text from our plugin. With your text layer selected go to Plugins in the Menu bar, and then Content Generator Sketch Plugin > Text > Dummy Text > Fillerati > Generate
And then with your Layout Guides visible drag the text out to cover 7 columns.
Boom! Now does that not save you some time, instead of looking for dummy filler text on the web? There’s so many more options available with the plugin that I’ve not covered. Have a play around with it some more. It will become an essential part of your Sketch toolkit, I guarantee it.
Using the Masking tool, and those beautiful icons
Now for this About section we’re going to look at using the Masking tool in Sketch, and trying out some of those pretty icons from Entypo.
We’re going to be grabbing the Megaphone icon from inside Iconjar and dropping that into our artboard, and then masking with an image.
So hopefully you have Iconjar installed, with the Entypo icon set inside it? If not, go ahead, and do that now.
There should be 2 folders in Entypo that you can install (Standard Icons, and Social Icons)
Once you have Iconjar installed, and the Entypo icon sets added to the application via + Add Icons we’re ready to drop one of those icons straight into our Artboard.
Using the search bar at the top right of the Iconjar window, do a quick search for ‘Megaphone’. Once it appears in the window, highlight it, and then click and drag it into your Artboard. How cool is that? Beats hunting through your computer to find that icon you want!
So we now have a teeny-tiny icon in our design. But we’re going big!!! Switch the lock on to keep proportions, and then take it up to 350 x 350px.
Now, any shape can be turned into a mask. And to do that you select the shape layer, in our case, the megaphone (remember to have the shape layer selected, not the folder in your Layers List) and then go to Layer > Use as Mask in the Menu bar (Ctrl + Cmd + M). Any layers above the mask are clipped to its contents.
So go ahead, and draw a Rectangle (R) that covers your icon, and then run the Unsplash It plugin to choose an image that will be masked to your icon.
You could also look at maybe adding a gradient layer above your image. Again clipped to your icon. Just to give your icon some more visual flair. I’ll let you have a play around with that one. Go wild!!!
We’re going to create a nice little divider to finish off this section, and then take a look at Symbols in Sketch, so we can re-use that divider easily throughout our design.
Draw a line (L), that spans the 12 columns of your grid (switch on those Layout Guides remember). Set the thickness at 3px, and then choose the Lime Green colour that we saved to our Document Colors previously.
Now using the Oval shape (O) create a perfect circle that will sit above our line.
The guides will let you easily align the circle, and line correctly here.
Now jumping back to Iconjar, do a quick search for the ‘Infinity’ icon, and then drag & drop that into your design. Increase the Width to 35px (remember to have that lock icon on for correct proportions), and then fill it with the Lime Green colour.
Drop it over the circle we created, and with both the icon, and circle layer selected, do a quick Align Horizontally, and Align Vertically to make sure they’re lined up together perfectly.
Now let’s turn our divider into a Symbol. Hopefully you’ve grouped the elements for the divider together, and given it a mind-blowing name like ‘Section Divider’? Cool!
With that group selected click on Create Symbol in the Toolbar. You will now see your group change to a nice purple colour to let you know it’s now….wait for it….I know the suspense is too much………a Symbol!!!
Now we can quickly re-use this Symbol (in our case, the divider) later on in our design by going to Insert > Symbols, or by clicking on the Symbol icon in the Toolbar, and choosing our divider symbol there.
And remember any edits you make on one symbol will be reflected through every instance of that same symbol. So for example, if you think the Infinity icon sucks, you can quickly swap that out for another icon, and all instances of that symbol change to reflect this.
Make sure, as I mentioned earlier, to be renaming layers, and grouping elements as you go along, so your Layers List is in a nice tidy order. (ie; grouping your title, text, icon, and divider before we move onto the next section).
The Portfolio section
So let’s move onto the Portfolio section of our design.
Firstly we’re going to drop in the title for this section. Using the Text Styles we created earlier. You can easily drop these into your design by clicking on the Styled Text icon in the Toolbar, and then inserting them into your design. If you followed my naming conventions before you will want to add in ‘Section Title Accent’, and ‘Section Title’ from the Styled Text dropdown.
And then alter the text to something suitable for this section, so you have something like the following…
After our Portfolio section we have 2 more sections (Blog, and Contact) where you can use the Styled Text option again to easily drop in your titles. Timesaving titles all the way!!
For our portfolio thumbnails we’re going to go with a full-width Masonry Grid layout. Similar to the image below…
Ok. Underneath your section title, go ahead and grab the Rectangle Tool and just start drawing a bunch of squares, and rectangles on your design (I’ve tweaked the colours so you can visualise what I mean. You don’t need to change them).
Now. Make sure you have all of those shape layers selected. And then run the Unsplash It plugin, Plugins > Unsplash It
Another boom! All your shape layers should be showing pretty pictures from Unsplash. That saved us a bit of work did it not?
Not sure if you like those placeholder images? Remember the keyboard shortcut Shift + Ctrl + R that I showed you earlier. You can quickly cycle through more images until you find something suitable (or maybe there’s one shape layer where you don’t like the image inserted. Do the same thing).
Now you can keep with those images from the Unsplash It plugin, or change the fill background to any of the images contained in this download here.
Remember that the image layers are currently shapes (with a background image fill), so if you want them to act more like images so you have more control over colour adjustments, cropping etc… you can go ahead and select each shape layer at a time (not all of them at once, or you’ll just have one large bitmap) and use the Flatten Selection to Bitmap command I’ve shown you at the start of this tutorial. Or you can leave them as they are. Entirely up to you.
Now we’re going to create an overlay for those portfolio thumbnails, like we did for the header image, but this time look at using Layer Styles in Sketch, so we can swiftly apply the same style to many elements.
Where again, like Text Styles, and Symbols, you can make a change in one place, and it’s replicated across all instances of that layer.
So go ahead and draw a Rectangle over one of the portfolio thumbnails, and then apply the settings shown here…
Just above the styling options in the Inspector, click on the ‘No Shared Style’ dropdown, and then on ‘Create New Shared Style’, and call it something like ‘Thumb Overlay’ (Don’t make the name too specific, as we’ll be using it again in the Blog section of our design).
Cool. Now go ahead, and follow the same process, creating an overlay layer for each of your other thumbnail images, and then choosing the Layer Style you created from the dropdown menu in the Inspector.
An even quicker way to do this is to select one of your images, hit Cmd + D, to duplicate that layer, and then apply the Layer Style to that duplicate image. Done!
Just try and remember to re-name those layers as you go along, or it may get a little confusing in the Layers List.
Now. The overlay treatment that we gave to all those images was for a reason. I’m thinking ahead to when this design has been handed across to your developer (that may even be yourself), so it would be great to create a hover state that could be used on those portfolio images when a user interacts with your design online. The dark overlay for a normal state, and then a hover state, which we’ll cover in the next paragraph.
So, we’re going to look at creating something like the image below…
We’ll work on the category, and client name text first.
So go ahead and create 2 text layers. One for the category, and one for the client name.
For the category name, use the following settings…
Do the same for the client name, with the following settings…
And then create a new Text Style for both of those text layers so they can be easily re-used.
And then position those 2 text layers at the bottom left of your thumbnail (like shown in the image earlier). Using Alt to measure the distance, position the text 20px from the left, and 20px from the bottom.
Now we’ll quickly create a graphic that will appear in the centre of your image on hover.
Create a circle at 70 x 70px, with a Hex (#) colour value of A2CB75, and then a text layer (ie; View Project) with a Hex (#) colour value of FFFFFF to place over the top of the circle. Make sure they are aligned correctly using the alignment tools in the Inspector, then select your shape, and text layer and turn it into a Symbol. Label it something like ‘View Project Button’.
Now select the group (Symbol) you just created, and your image layer, and then use Align Horizontally, and Align Vertically in the Inspector panel to make sure all looks good.
We’re getting to the end of this section. Let’s quickly create a button to appear underneath our portfolio images. And make it into a Symbol, with a twist!!
So create a button with the following settings. And then place some text inside of the button (ie; View More).
Now go ahead and turn that into a Symbol.
Now, here’s the Symbol with a twist part. If you wanted to re-use that button Symbol in another part of your design, but with different text (ie; in the Blog section ‘Read more’) you can easily do that.
Once you’ve converted it to a Symbol. Select the text layer in the button, and then in the Inspector panel check the box ‘Exclude Text Value from Symbol’.
Now you can keep the styling (border radius, colours etc…) of the button in sync across all instances of that Symbol, but you can go ahead and change the text as you please. Happy days!!
Ok. To finish up this section, let’s quickly drop in a section divider Symbol. And we’re all done for the first half of our design. Nice work!
Hopefully you know you’re way around Sketch a little more?
In Part 3 of this tutorial series, We’ll finish up our design for Desktop screens. We’ll be digging even further into Sketch, and I’ll be showing you more cool features, shortcuts, and tips as we work our way through Part 3. Hope to see you again soon.
Thanks for reading the article,
Oh. Before you go, don’t miss out on this amazing offer for Sketch users…
Want to rapidly improve your design workflow?
Meet Cabana. A Design System for Sketch that helps you work better, smarter, and faster than ever before…
Use the offer code MEDIUM20 to receive 20% OFF Cabana here.