Sketch for Beginners | FREE COURSE

sketch is an amazing piece of software that you can use to design web pages apps icons and much more you can even create prototypes and collaborate with other people in real time and nowadays it's kind of hard to stand out when it comes to design software because there are so many good options out there like for example figma or adobe xd but if you're a mac user then sketch is a very good option it has a beautiful interface it's fast and it has some very powerful features like symbols libraries sketch data support for p3 color tons of plugins and much more so if you want to learn how to work with sketch then this course is for you but hey if you're just meeting my name is adipodilla i'm a web designer slash developer and my goal with these courses is to help you become a better web designer and developer now coming back to this course i'll assume that uh you are a complete beginner so i'll show you the very basics of working with sketch we'll start by talking about the ui and the different types of layers you can use then i'll show you how to group lock and hide those layers how to move scale and align elements and also how to use guides and grids to create perfect layouts you'll learn how to work with text images and basic shapes and also how to create complex shapes with the vector tool and boolean operations you'll learn about creating organizing and reusing symbols and also about a fantastic feature called smart layout and finally you'll learn about exporting assets in sketch and we'll do all this while working on a design that i've created specifically for this course uh design which you'll also be able to download for free using the link in the video description and i'll also link any other third-party resource that i've used in this course so feel free to check out the video description for more details now uh speaking of resources let me tell you about an amazing one that i'm using all the time and that is envato elements i use it to get fonts icons music for my youtube videos stock photos and videos illustrations and much more you can even find tons of sketch compatible graphics like ui kits for creatives like me this is an amazing resource because all the assets have simple commercial licensing and you're not bound to any contract therefore you can cancel whenever you want so if you're interested check out the link in the video description now let's start learning sketch and the first thing we'll do is have a closer look at what it is who is it for how much it costs and a few reasons why you should choose sketch over other apps let's go okay so what is sketch well to put it simply it's a vector graphics editor but it's so much more than that it's a digital design platform that offers tools for design prototyping and developer handoff now sketch has been around since 2010 and it was quickly adopted by a lot of people who got tired of using photoshop for ui design myself included even back then sketch was infinitely better for ui design than photoshop and using it was like a breath of fresh air nowadays we're used to having software that makes it easy to design new eyes but back then designing a website in photoshop for example was a royal pain in the behind now sketch is not for everyone obviously it's not a swiss army knife that does everything first of all it's for mac users that's the only platform it runs on so if you're a linux or windows user sorry there's also a sketch app for ios but that's just for previewing documents playing prototypes and mirroring designs created on the mac app then there's also the web app this is not an editor instead you can only use it to inspect designs and libraries to export assets leave comments and stuff like that the only way to edit a sketch file is with the mac app so the first target audience mac users okay second is designers and here we're talking about ui ux even icon design sketch is really good for creating icons and you can even create illustrations with it because at its core it's a vector graphics editor however it's not as powerful as something like adobe illustrator but it can get the job done so if you're designing websites mobile apps icons or any kind of user interface and you're using a mac then sketch is a great option when it comes to pricing things are very simple because sketch is subscription based meaning you pay a monthly or yearly fee and you get access to the whole package the mac app the web app everything as you can see sketch costs 9 us dollars monthly or 99 usd yearly per editor and if you want to try it out you get a free 30-day trial which is pretty cool just so you know it wasn't always like this sketch used to be license based so you would purchase a yearly license that gave you free updates for that year after the license expired you could still use sketch but you couldn't get any more updates so you'd be stuck at that version if you wanted more updates you would need to purchase another yearly license today because the the model has changed you can only use sketch with a valid subscription now you might be asking yourself why use sketch over adobe xd or over figma or some other design software well there's a lot to talk about here so to keep it short let me give you a few key points first of all sketch is a native mac app and that's super important because being native it's super fast but it also integrates nicely with the operating system it supports light and dark mode local auto save native font rendering p3 color profiles and more speaking of color profiles sketch is awesome when it comes to these you can set documents to use either srgb or p3 if you don't know p3 is a wider color standard than srgb so that means it supports more colors uh deeper blacks and in fact it supports about 25 more colors than your typical srgb that you can find on pretty much any display slash monitor that you can buy nowadays p3 is not yet mainstream but we're starting to get there slowly even css has some features that allow us to use p3 colors and the fact that sketch supports this right now is amazing another reason you might want to go for sketch is the fact that it works offline you don't need an internet connection to access your files which is great sketch symbols are another reason you might want to consider these allow you to reuse elements to create libraries to overwrite properties for each symbol instance and a lot more ensure the concept of reusing elements is implemented in other apps figma for example has something similar but they're called components but i feel that the way sketch does it is just a little bit better than than the rest so with that said if you're convinced that you want to learn sketch let's move on and do just that we'll start with a tour of the user interface and we're going to jump straight in here i have the demo file that i mentioned in the intro video opened up here in sketch it's called financial app dashboard concept and if you want to follow along then you can download this for free using the link in the video description so i have sketch opened up here it's using the latest version which at the time of this recording is version 89 and let's start with the toolbar it's right here on the top and its main purpose is to display the various tools that you're going to use as well as the file name from here you can add various elements you can access the collaboration tools you can see your notifications and you also have controls for zooming in and out and some other display settings now this toolbar can be customized if you right click you can choose to only display icons or icons and text and you can even customize it further by choosing which items you want to display so for example if i don't want these two buttons in here i can simply remove them and if i want to add my own i can simply click and drag anywhere on the toolbar i can add the various tools i can add spaces between items and if i want to go back to the defaults i can click and drag the default toolbar and have that show up moving on let's have a look at the canvas the canvas is the middle portion that you see in the ui and this is an infinite surface as you can see i'm scrolling all the way out and you know you can hold down the space key and then just click around and you can place as many items as many elements and layers you want in this canvas as i said it's infinite so the sky is the limit basically and you can add whatever you want in here text images shapes vectors anything that can be created using the tools available in sketch so that's the canvas next let's take a look at this left hand side starting from the top we have the page section sketch supports pages which is an awesome way to organize the content inside your document in this document i have two pages one for the master design file and another one for the various symbols i'm using throughout the design and you can easily switch between them like this you can also collapse this section entirely this page list and then you can switch from here and at any point you can add as many pages as you want it really depends on what you need to do below the page list is the layer list and this displays the full list of layers displayed in your canvas i'm using artboards here or a single artboard which is this one so the layers are displayed kind of under or inside that artboard but you can have layers like outside like so and they will be displayed in the layer list as well also on this left hand side we can find the components view so we have the canvas view and then the components view and this shows a list of all the symbols text styles layer styles color variables and templates from your document and we'll talk about most of these in more detail as the course progresses but just so you know this is how you access them you also have an insert window available if you press c on the keyboard it shows you a smaller window that you can use to search for a symbol for example a button or you can search for a text style or a layer style or color variable and so on so this is a handy handy window if you want to quickly access these components then you can press c and it's going to be right there ready for you to use and finally let's take a look at the right hand side where we can find the inspector now the inspector will show properties for selected objects and it's contextual meaning if i select this text for example it shows me all of the available properties for that text element but if i select let's say this shape you'll notice that properties here change slightly i no longer have text controls like i had previously instead now i have controls for changing shape properties like fills and borders and such of course there are some controls that are common for every element so for example if i select text i can see the alignment toolbar right here and also this area where i can control things like position and size and you'll see that that's also available here when i select the shape so that's the inspector basically and as we're doing stuff in this course as we're creating items we'll be using this quite heavily but yeah that's a quick look at the user interface for sketch so we have the toolbar on the top we have the page list we have the layer list the component or canvas switcher the canvas itself right here in the middle and then on the right side we have the inspector so that's the sketch interface i think it's very intuitive and it also looks awesome out of all the design software that we have nowadays and that includes xd and figma and all that i think sketch has uh the best looking user interface and this is coming from a guy that's actually very picky about this uh this kind of thing now um let's move on and talk about the different types of layers we can use in sketch that's coming up in sketch layers are the building blocks of any design project and there are several types so in this lesson i want to go through each type and see what it's all about let's go and let's begin with the first layer type which is artboard now an artboard is basically a collection of elements that sits inside your canvas and you would most likely use this every single time you're creating a project because instead of just placing your items on the canvas inside the group or by themselves art boards give you this visual separation but you also have some additional options right you can create artboard templates with different sizes it's really useful for prototyping because you can jump from screen to screen plus they give you a clear indication here in the layer list that hey this screen or this design is contained within a dashboard that has this symbol so you can easily distinguish these from other layer types now artboards can be created using the shortcut a or using the insert menu here and choosing artboard now whatever the method sketch provides you with a couple of presets and you can choose presets for apple devices android devices banners icons for the web we have some predefined sizes you can click on each one of these sketch will automatically create that artboard it's going to name it and you'll be good to go and if at any point you want to change the size of the artboard you can do so from here from the inspector either by using these controls or by entering a size manually or you can change with another preset altogether so maybe i want this to be a medium size so that's pretty cool now you can also rename an artboard by selecting it and hitting command r and as you can see in the layer list it's now editable and you can name it whatever you want additionally you can double click here in the layers panel and do exactly the same thing and by the way this renaming technique works for every single layer type not just for artboards so the artboard that's the first layer type now another layer type is the text and text usually makes up the majority of content in a web page so if i'm going to zoom in here you can see that we have a lot of text elements in our design here and in the layer list they are symbolized with this icon uppercase and lowercase a's and you can create text elements by using the text tool so you would go to insert text or you can press t on your keyboard and when you do that you can click anywhere and you can add your text and then you can change its properties uh by using the inspector there so let's actually move this up so we can see it additionally with the text tool you can actually click and drag to create a text area right so that's gonna have boundaries basically right so as you can see here this is now a fixed size and i can resize it like so but more about that in a future lesson so that's the text layer style next is the shape so you can create shapes by using the insert menu and choosing from one of the existing tools you can create rectangles with the r tool ovals or circles rounded rectangles lines arrows triangles star and polygon so you can either click from here and then click wherever you want to create one and for various shapes you'll have various controls as we'll discover in uh in a future lesson so you can either do it from the insert menu or you can press the corresponding keyboard shortcut and as you can see in our design we have plenty of shapes here and they are represented by this icon and also this icon it really depends on the type of shape that that we used also when it comes to shapes we also have vector and pencil now pencil you can use to like freehand a shape just like that in which case figma will create what is called a path and the vector tool does something similar although you have more control here you can work with different points you can create curves which are you know much much more precise than using the pencil tool but on both of these figma creates paths but these are also considered shapes right so when talking about layer types we have these shapes right here but also the ones created by the vector and the pencil tools and finally we have images now currently we don't have an image or a layer type image in this project although we have a lot of images being used and that's because i'm using vector images here so these are basically shapes the logo for example is made up of several different paths right and i can see each one individually but if i were to for example drag an image this is a png image you can see sketch now displays this layer this image layer using this icon right here so images that's another layer type in sketch now we have three more layer types first we have the group and you can see plenty of groups being used in our design here so for example this is a group called main widget one and as you can see when we select it in the layer list it's also highlighted or selected in the canvas and vice versa if i select it here in the canvas it's going to be selected here in the layer list now to create a group obviously you need at least one layer so if i had one rectangle i can select it and i can press command g and that's going to create a group but of course groups should be used for multiple elements so if i have these two rectangles i can group them together and now they act as one so groups that's another layer type in sketch and then we have slices and hot spots now the hotspot spot is a layer type and that's used for prototyping i won't really go into right now because i'm not covering prototyping in this course so just keep it in mind that hot spots are used for prototyping slices on the other hand are another layer type that can be used to export certain areas of your project so for example if i go here and i select slice i can hover on the logo i can click it and that's going to create a slice of the logo and as you can see in the layer list slices are represented by this icon now what happens is that sketch automatically marks that area for export you can see in the inspector it's set up as a png export at 1x size and don't worry about exporting we'll cover that in the final lesson of the course but that's what slices do right they allow you to select an element or actually a part a region in your design that you want to export so for example i can uh click on an element just like i did before or i can freehand it i can draw an area like this and that's going to create a slice of just that visible area right and i can rename it to whatever i want and that's now marked for export so using the slice tool i can basically grab any portion of my design and export it without having to crop it myself later on and just like any other layer type these can be renamed they can be grouped even if that's what i want they behave almost like uh every other layer type now before we wrap up i just want to show you layer filtering and searching if you look up here where it says search layers i can click and search for something so maybe i want the text for statistics right so as i'm typing more and more the layer list gets smaller and smaller and it only shows me the layers that match my description the stuff that i entered in the search box and that allows me to easily find the layers that i'm looking for very useful for large projects but what i can also do with this functionality is filter the layers by type so if i just want to see the shape layers i can do that and now the layer list is just going to show me the shape layers and in here i can go in and i can search for whatever i want or maybe i want to search for the text layers and if i don't want to also search for shape i can click and then press backspace and delete it so now this will only show me the text layers or i can choose from the other layer types image group exportable this is slices a prototyping this is where a hotspot would come in and then symbol right this is really easy to select all the symbols or all the symbol instances that i've used in my design so that's layer searching and filtering all right so now that we know what types of layers we can use in sketch let's see about what kind of actions we can perform on those layers that's coming up once you start building your sketch project you'll have more and more layers to deal with and to work more efficiently there are certain actions you can do with these you can group them you can hide them and you can lock them so let's start with grouping let's take a look at this main menu in my component here so as you can see i have several different layers for each menu item but let's say i want to move them further up i could you know grab each item move it and then do this and maybe this but it's time consuming and it's messy or i could click and drag over all of them and move them at the same time but actually a much better approach for this would be to group these so with them selected you can hit command g to create a group alternatively you could go to arrange and then group and that's going to take all of them create a nice group inside your layer list which you can then rename whatever you want and of course this has the added benefit of making your layer list a lot easier to read if you take a look at this page here considering just how many elements we have imagine how our layer list would look like if we didn't have any groups but since we grouped everything we now know that okay this is the menu this is the user area right here on the bottom uh what else am i looking for maybe this one the main widget the one the two maybe the sidebar widget right so as you can see they're nicely grouped they're super simple to select and they make finding things a lot easier now if i want to ungroup the elements i can select the group i can right click and choose ungroup alternatively i can go to arrange ungroup or press command shift g on my keyboard just like that and of course if i made a mistake i can command z to undo to bring back that group now once inside a group you'll notice that when you click on an element it selects the entire group it doesn't select that element in particular so how do you get to it well it's simple you double click so you select and then double click and then you enter inside the group and here you can select whatever element freely what about i don't know this one the statistics right how do i select for example this text right here if we take a look at the structure we can see that this is nested quite deep inside right here is the uh the layer that i'm looking for so i could you know double click and then again and then again and i got to the item but there's actually a much faster way you can hold down command and you can hover and select the element that you want do i want the expenses text hold down command click and it's selected do i want the word may hold down command click and select so this is much easier than just you know double clicking until you get to the to the element that you want locking layers can be used to prevent a layer from being selected and therefore moved or modified in any way so let's take a look at this statistics widget right here for the uh edges here for the borders we have a background shape right that's called widget bg so let's say that i want to select multiple elements by dragging over with the mouse right you can do that so watch what happens when i click and drag well i selected that background layer so that's a problem and in order to prevent this from being accidentally selected like this i can lock it several ways to do that right click lock layer or you can go to arrange lock layer or you can use command shift l as a keyboard shortcut or you can select the layer hold down option while hovering and you'll see a lock icon click that and the layer is now locked so with it locked i can now hover click drag and select whatever i want that layer can no longer be selected so it can't be accidentally moved if i want to ungroup it well i can click the lock icon or i can right click unlock layer or go to arrange unlock layer or use the exact same keyboard shortcut hiding layers allows you to check how your project will look like without certain elements but in a non-destructive way meaning you're not deleting those elements but instead you're just hiding them from view so let's take a look for example at this section right here right we have an activity section which displays certain transactions and we have this icon that allows us to download the statement for that particular transaction but maybe i'm not yet decided if i want to keep this and i want to see how it would look like without the icon so what i can do is i can go in select the the element and of course i can delete it but then i would have to undo maybe i'm forgetting that i deleted that element and instead of using that destructive way we can actually hide it by clicking the i icon just like that so now the element is simply hidden from view if i want to show it again well i can simply click the icon again and the element is there additionally i can right click and i can hide it from here or we can go to arrange and then hide or unhide the layer by using command shift h so if i select this command shift h hide unhide it's really easy to do another example of where we might use this is on this credit card design maybe i want to see how it looks like without this kind of decorative element well i can select that and i can use command shift h to hide it or again command shift h to unhide it and this way i can easily check how it would look like with and without the element so there you have it now you know how to group lock and hide layers next up let's talk about moving resizing and aligning elements alright so this is a pretty important lesson so please pay extra attention to it moving resizing and aligning elements is something you'll be doing a lot when designing in sketch so it's worth spending the extra time learning how to do it properly ready let's start with moving and let's uh start by zooming in in the menu section right here and as you can see this kind of looks off we don't have the proper spacing between these three elements i want to be exactly 48 pixels between each one of these elements so how do we do that well the easiest way is to select an element and then click or left click with your mouse and drag it around you can drag it here here in every possible direction so if i want 48 pixels i can do something like this i just moved it up now here's the cool thing about sketch it's extremely helpful in these types of situations because it gives us visual guides that allow us to position elements correctly so in this instance sketch shows me that hey the distance between the logo and the element that i have selected is 48 pixels and it also matches the distance between the green box on the right side and the text under it so that's really cool and that's one way of moving an element but you can also do it with the keyboard right so you would select an element you would bring it let's say kind of close to about here you can see that we have 68 pixels now from the element above and then we can use the keyboard shortcuts so arrow up arrow down to move it up and down by one pixel you can also hold down shift and move it 10 pixels at a time and of course arrow right arrow left will move it right and left so if i want 48 pixels let's say it's here and i want 48 pixels from the element above well i can hold down shift get it close enough then nudge it one pixel at a time so now it's exactly at the right distance now in sketch we can actually check the distance between two elements by holding down option or first selecting an element then holding down option and hovering on the element that we want to compare it to so here we can see that the selected element is exactly 48 pixels from the element that i'm hovering if i hover on this it's 139 if i select the logo and i hover on the drop down you can see that it shows me the distance between the two elements and if i hover anywhere on the canvas it shows me the distance from my element to the edges of my document and as you can see we also need two pixel to the left here so we have 48 and 48 so that is pretty useful what about these items here maybe i want this to be a specific distance from the icon again we can check we can say okay we have 12 pixels maybe we want a bit more we want 16. in which case i use my keyboard shortcuts and i can position it exactly how i want alternatively i can use the inspector to modify the x or the y-coordinates accordingly i can even enter my own value in here and i can even do math operations so for example let's say these items are right next to each other so we don't have any kind of distance between them well i can say okay the x position of the selected text is 298 and i want to move it to the right by 16 pixels so instead of doing 298 plus 16 in our head we can do it directly in the inspector hit enter and sketch calculates things automatically for us and this works for all of these inputs here i can change the angle i can change the position the width the height we can do mathematical calculations within the sketch inspector and finally let's take a closer look at this element here let's say i want to position this badge so that the top is aligned with the top of the icon and also its left side is aligned with the right side of my icon in sketch we can do that really easily because sketch shows us these red guides see as i'm moving elements for example now it tells me that the badge and the bell icon are vertically aligned right so i can easily do this and this and now because i have those guides i can release and the item is now placed where it should be when it comes to resizing here's what you do let's take a look at this area for example this box should be as tall as this box right so how do we resize it several ways we can do that first of all let's select the background and as you can see sketch gives us some resizing controls so i can click on each one of these and then resize it to my heart's content alternatively i can use the command key and then the arrows so command arrow down will increase its height command arrow up will decrease of course in increments of one pixel if i also hold down shift i can do this operation in increments of 10 pixels right so this is a really simple way of resizing an element alternatively we can go in here in the inspector and change the size manually like so or we can do mathematical operations so really we have a lot of options in my case the height that i'm looking for is 216 so i can either do it manually like this or i can enter the value directly and then i'm just going to align this back in so that's how you resize an element let's look at another example let's say that in our menu i forgot to add a menu item for transactions so what i do is i create the text and then i need to bring in the icon for the icons i usually use an app called icon set and in the iron icons set that i've used in this design and you can find the link in the video description i'm going to search for these swap icons and from here i can command c to copy it and then i can come in here and i can paste it or command v but notice these items are super big so i need to resize them to fit 20 pixels width and height how do i do that well i'm going to select them and then i'm going to click on the bottom right handle and i'm going to resize them like this but we have two problems here first of all these are not resizing proportionally right so let's undo that instead let's hold down shift while dragging so now that's better it locked the width to the height so whenever i'm resizing the width i'm also resizing the height but we have another problem notice that as the icon is getting smaller and smaller those lines are getting thicker and thicker so what exactly is happening here well without going into too many details for this kind of application resizing is not the correct way of changing an item size instead we need to use scaling so to use scaling you would press command k okay and this will bring up scaling options right here in the inspector and we can scale like this by clicking and dragging on that icon or we can specify a certain amount in percentages or we can specify a certain width or height so let's specify 20 pixels width and height and as you can see that scaled the element nicely and of course i can also use the handles so by using scaling i'm able to bypass the problem that we had with the thickness of these lines and that's because uh resizing so normal resizing will keep the same size for layer styles such as stroke border radius shadow size and so on scale which is what we did here will resize those properties as well okay so that's a very important distinction that that you need to make so let's bring this down to 20 pixels click finish and now i can move this in place i can actually zoom in and by the way you can zoom in by using z holding z actually and just clicking and dragging over the area that you want to zoom to additionally you have some other controls here if you click you can zoom in using command plus command minus to zoom in and out you can also press command 0 to show the actual size so 100 you can press command 1 to fit everything into view but holding down z clicking and dragging over an area is very very handy so now i can just move this in the correct place and i'm good to go so just in case you didn't fully understand the difference between scaling and resizing let me actually grab this icon and i'm gonna group it up and i'm just gonna drag it sorry outside in the canvas okay so now i have this group now notice this is made up of elements that have borders right so they're not filled they don't have a fill property so when i select this and i resize it normally see the inconsistencies the border size will actually stay the same but as is getting smaller and smaller as the element is getting smaller and smaller uh things are gonna start to get too crowded so we get this undesirable result but with uh with scaling right those borders are resized as well so the element just keeps the correct appearance regardless of its size so just keep that in mind if you're resizing an element and it looks wrong then maybe you need to scale it instead finally let's talk about aligning elements in sketch now there are two ways you can do this one is by using the controls in the inspector and two is by using the guides and you've already seen those red guides in in some previous demos so let's take a quick look at some of these um menu items here you'll notice that some of them are actually off they're not aligned with the others to the left side so what i can do here is i can select these and using the inspector i can align layers to the left now this will align the layers to the outer most left layer okay so if this was here all of these layers would be aligned to the left of this one like so but of course since i want to align them to the left of this i'm going to select them like so and of course this also works on the other directions so here you can align them to the right side you can align them to the middle and of course to the top to the middle and to the bottom so you can align them horizontally or you can align them vertically and i can actually show you that if we take a closer look here so let me actually zoom out now i want to align these three elements vertically right to the middle and let me actually group these up i can see that these two if i zoom in they're almost perfectly aligned so i can select them and i can click this icon and sketch will do its best to align these properly but what about this one this is positioned way down compared to the middle line here so i can select these three and i can align them just like that to the middle to the bottom to the top however i want alternatively i can click and drag and sketch will show me the red guides so here it tells me that this item the date is properly aligned in the middle with the search box and also its left side is properly aligned with the boxes below right with these let's do that again see how easy it is to align elements you don't have to do it by eye you have these two options either use the inspector or use the red guides that i just showed you what else if we take a closer look here in the credit card area we can see that these are not properly aligned so we can select this hold down shift select this hold down shift select this and then we can align them to the right like so and alternatively we can click hold down shift by the way if you hold down shift while you're moving an element it's going to basically snap or stay in that direction it can't really go up or down very easily so i can just align it like that you've also seen some controls here in the alignment panel and these are for distribution so the first and the second one are for distributing elements so for example i can use those to properly distribute the distance between a group of items notice on my menu here that we have a small discrepancy in the spacing here and if i want to create equal spacing i can use distribute layers vertically we're just going to click distribute unevenly and now this creates roughly the same distance between these items right so if we check we have 25 there 25 25 24. sketch does its best to create equal distance but sometimes you're gonna have a small like one pixel gap somewhere which is totally fine nobody is going to know it's there and distribute horizontally works exactly the same way in fact i used that exact method when creating the vertical lines for this chart so if these were off let's say they were something like this okay let's mess these around a little bit okay so now the vertical lines are not displayed properly well what i can do is i can select all my vertical lines and i can click this button that says distribute layers horizontally distribute unevenly so we don't have to work with subpixels right so now those will be placed exactly where they should be and the way this happens is that sketch looks at the first and the last item it calculates their position it determines how many items must fit in between those two and it automatically calculates what distance needs to be between each item and it does its whole magic like that and that's about it for moving or resizing and aligning elements quite a lot to go through in a single lesson but thankfully sketch makes it super simple for us to perform these actions now let's move on to uh certain features that are present in pretty much any design software nowadays and those features are guides and grids coming up sketch has three features called guides grids and layout and they're used for aligning and also resizing content so let me go through each one and show you what they're all about before we talk about guides uh you should know that all three features can be applied to artboards okay so not groups not the canvas itself but artboards that's the only way they're gonna work so with that said let's begin with guides and to show you the basic operating principle i'm gonna create an artboard and then to get access to the guides you need to bring up the rulers you can do that by using the keyboard shortcut control r alternatively you can go in here and select show rulers so this is going to create a vertical and a horizontal ruler and as you can see as you're scrolling on this ruler there are some vertical and horizontal red guides and when you click that's going to create a guide at that position and it works the same vertically if you want to move a guide all you got to do is click on it and move it to the desired position and this works in both directions now what can you use these for well remember when you are in school and you had those notebooks with a vertical line on the side so you know where to start a new line of text well the principle is roughly the same you can use guides in sketch to align content so for example if i were to select this artboard you can see that i have a guide set at 48 pixels from the very top and this allows me very easily to align elements to it so for example i can select the logo and if it was out of place i can simply move it up and it will automatically snap to that guide making it super easy to align elements and of course i can set one vertically at 48 pixels and then i can use it to align elements in the other direction right so that's super super helpful and that's about it really these are the guides in sketch you can use them for alignment but also of course for resizing so for example if i were to place a guide let's say here and maybe one here then i can say okay i want this box to span in between these two guides so i can get it and i can resize it to match the new layout and when i'm done ctrl r again to hide the rulers and the guides now what about grids and layouts well a grid and a layout can be applied to an artboard as i was saying so for example if i were to select this artboard i can go in here and i can say show grid or show layout so let's start with the grid this is basically a series of vertical and horizontal lines that create this pattern and you can define the size of this grid by going to grid settings or pressing ctrl command g here you can determine the block size let's say 32 pixels or 64 pixels and then where exactly do you want the thicker lines to be so let's actually go with 32 so you can see it better and then you can also alternate the colors if you don't like the red you can go with blue color it's entirely up to you and then confirm and you have basically a series of guides that you can use again to align and size elements correctly so for example i can very easily draw shapes that match this pattern of guides created by the grid feature this is very useful when you're creating icons in sketch because you can be very precise with your measurements with your alignment and so on for ui design i don't think it's that beneficial to use a grid but it's there if you need it and since we're on the topic of ui design probably the feature that you're going to use out of all these three is layout and layout works something like this so let's hide the grid by pressing ctrl g and then let's bring up the layout control l now layout allows you to define columns or rows and you can change the layout settings to display as i was saying either columns or rows or both right you can do something like this but the cool thing is you can specify the total width of your columns the offset or the spacing on each side how many columns you want let's say six the gutter is the distance between columns and you can define that and you can also define the column width and when defining the column width some of these values will automatically be calculated and of course you have some options here for determining how the grid looks like and when you're done you would hit confirm so then with this layout applied and i believe i said grid earlier i meant to say layout so with these columns displayed like this you can use them as guides basically you can you know align elements to them you can resize elements and when you're done just press ctrl l and they'll be gone and this is super useful for uh interface design because when we're talking about websites for example bootstrap the very popular front-end framework uses a similar 12-column grid system to create layouts right so you can use the same 12-column system to create your design and then when you go and develop that project uh you'll be able to use roughly the same settings in in css now for our project i have created a layout which looks something like this so it's a 12 column layout and let me just show you the settings here so 12 columns 35 pixels gutter width 80 pixels column width and this creates an offset of 32 pixels on each side and with this in place my page looks something like this notice how i aligned all of the elements to the grid so we have three grid columns dedicated for these two elements but also for the widgets in the main page then we have two grid columns dedicated for the main menu navigation and also this bit here at the bottom and the rest of seven columns are dedicated to the main content and even in here i'm setting aside three columns for this bit four columns for this and the rest of the elements just take up the rest of seven columns all right so this is one example of how you can use a layout in sketch for a ui design and again remember the keyboard shortcuts ctrl l to toggle the visibility of this layout and also control command l to get to the layout settings all right and that's about it for grid guides and layout great tools for aligning and resizing elements they really allow us to create those pixel perfect designs every time now let's move on to working with text coming up typically text represents the majority of content in a website or an app so having the proper tools to be able to control how that text looks like is very important and thankfully sketch does really well in this regard so in this lesson i'm going to show you how to work with the text tool but also how to use text styles let's go i have the demo app opened up here and there are a couple of things that i need to add to this page first of all in this uh credit card design i still need to add the credit card number the card holder and also the expiration date so let's go ahead and do that right now now to add some text you can grab the text tool or press t on the keyboard alternatively you can select it from here so i'm going to click inside here and i'm just going to add the card number and when you're done you can just hit escape now i want this to be white so i'm going to go to the inspector and i'm going to click this field and using the color picker i'm just going to choose white alternatively i can paste in the hex code right here now i want this to be a little bit bigger so scrolling down i can either do it like so with my mouse cursor or i can click on this and select the size from the drop down or if i can't find the size i can enter it manually in my case i want 23 pixels i also want this to be a little heavier so by clicking here i can choose the font weight and i'm going to choose semi-bold apart from these we can also change the letter spacing by using this field we can choose the line height we can choose the spacing between paragraphs then we can choose how to align the text so is it center is it right side is it justified and then also if we have a fixed text layer we can choose the vertical alignment but we won't get into this right now so that's my card number i'm just going to move it around a bit and i'm going to align it with the other elements and i'm also gonna move it inside my card here so what i can do is click and drag inside and now it's inside that group and this allows me to align it a lot better with the elements around it and i can make sure that i have proper spacing like so and we're ready to move on let's see about the card holder right let's add another piece of text i'm going to say card holder i'm also going to set this to white for now and as you can see this actually borrowed the styles that i used last i want to bring this up above all of the layers and i want to make it a lot smaller and also uppercase so how do i do that well let's start with this medium i'm using i forgot to mention this i'm using the pop-ins typeface which can be changed from this field so medium will go with 11 pixels and then i can click this little cog icon to bring up some additional text options and here we can choose from the text decoration underline or strikethrough but for me i'm gonna keep it at none and also how to capitalize the text for me i want to use uppercase also i'm going to set 1 for the character spacing just to give a little bit of breathing room between each letter finally i'm going to change the color of the text to white but white with a bit of transparency so by clicking this picker i can see that it's set to white and i'm going to use this slider to bring it to 50 percent so now it's semi-transparent okay so now let's align this properly let's position it just like that then i need the actual card holder name so i'm going to hit command d this will duplicate that layer alternatively i can just do command c command v it does the same thing so let's position this about eight pixels below let's rename it or actually let's uh change the content and let's change this to a different style so i'm going to use semi-bold 14 pixels font size we're gonna reset the character spacing to zero and also we'll bring back the transform to regular or no letter casing and then let's change the color to full white okay so we have these two elements we need two more for the expiration date right so one more title one more value and what i can do is simply command d drag them over i'm holding down shift so they move on the same line this time i'm going to say expiration date let's move this over and then let's say zero four two five for example and let's also move this over now let me introduce you to text styles these are very helpful for situations when you want to reuse text properties so if we take a look at this card example we can see that we're using the same style on this and this and also this has the same style as this but here's the thing in the future if i want to change this style i'll have to change it manually in both places well not with text styles this makes it automatic and here's how you do that you select the element that has the style that you want you go in here under appearance and you hit create you give it a name let's say test one and then you select the other text elements that you want to apply that style to and from the drop down under this document you select test one and apologies it's just outside of the recording area here but it says test one so i'm going to select that so now both these elements have the same text style now here's the cool thing if i decide okay i want a different color on this i can choose either one of them and i can change its color let's say red like so and then when i hit update all of the other text elements that use that style will be updated automatically and this works for pretty much all the properties here i can change the font size right and as you can see the la the text style now has an asterisk next to it and it's italicized meaning this has a change applied to it and from this point i can reset the style which will bring it back or i can update it and all of the other elements that use that style will be updated as well so let's actually bring this back let's change this back to white 50 and let's update and i can do the same here i can create a text style for this let's say create you can name this whatever you want let's call it whatever and then we can apply it to any text element in the page and as you can see from this list here i have quite a few text styles defined for all the text elements that you see i have a style defined for this right for this right this is called body i have one for this this is called display 5 for these elements right so it's really helpful that every element or every text element here has a style applied to it because it makes it much easier for me in the future if i want to change something i change it in one place click update and everything else changes automatically so i showed you how to apply text styles to other elements but there's also another way you can do that so if you press c on the keyboard and if you go here you can see all the text styles that i've defined in the document and if i want to use a certain style in my page i can do that simply by clicking and dragging and then entering my text just like that and this automatically uses the small title style alternatively i can double click and that's going to do exactly the same thing you can also see these text styles if you go to the components view here in sketch and selecting this tab and you can see all of them here this is where you can actually edit them so if you select for example body bolt you can change its name and you can change its properties directly from here and if you want to delete it you can right click click delete or just hit backspace and it's going to do the same and that's a quick introduction to working with the text tool and also a text styles now probably the next most common elements you'll be using in a design are shapes so let's talk about those next there are many different types of shapes in sketch we have simple ones like rectangles or circles and then more complex ones like polygons and stars so let me show you how to create and edit these shapes and let's begin by taking a look at lines and lines can be used in many different ways for example here in this chart i'm using both vertical and horizontal lines to create the actual chart but you can also use them very successfully for separating elements or separating groups of elements or certain areas in your design so for example in my case here we could use a vertical line to separate the menu or this menu sidebar from the rest of the content so for that i'll grab the line tool which you can do by pressing l on your keyboard or going to the insert menu shape and selecting line and once you do that you simply click and drag to create a line now notice that this is not fixed at any angle it's freely moving around as i'm moving my mouse cursor but if i hold down shift while doing this then the line snaps at 45 degree increments right so by holding down shift it's much easier to create a straight line so let's uh drag it to about here and i'm going to move it up like so and let's also resize it and i can also hold down shift while resizing to make sure the line is straight and i'm going to go all the way down to the very end now to properly align this i'm going to bring up my layout i'm going to zoom in and by the way you can zoom in by using by holding down command and using the mouse scroll wheel just like that so with the line selected i'm simply gonna nudge it using the arrow keys so that it matches the end of my um layout column here let's hide the layout that's pretty good so now let's go ahead and give this the proper color and for the color as you can see for a line only the border property is activated because this is essentially a border and we can control the width or the thickness of the line by using the width property here and i can use this color picker to determine the color and i'm just going to use a color value that i set previously here i'm going to use black 10 i believe and don't worry about where or how i created these i'll show you in in just a little bit so that's the first separating line we can actually call this vertical separator and i could use another one to separate kind of this top area right here from the rest of the content so for that i can grab the line tool yet again click and drag align just like that but i want this to be a little bit thicker so i'm going to increase its width to 4 pixels also if we zoom in all the way notice that the ends here are square i want these to be rounded so we can actually use the end type for these open shapes and i can set that to rounded just like that and with the selected i can all also change its color let's say to black 10. so now it's simply a matter of aligning this properly so i'm just going to nudge it down and i think actually i'm going to leave it something like this so about 48 pixels from the bottom here and let's see it should be around 24 pixels from the elements above so i guess we just have to nudge these down a little bit something like that so those are lines and if we can just double check here we can see that this is not exactly aligned the way it should be i can simply use the arrow keys to nudge it in place sometimes the line will start on subpixels as you can see here 280 by 0.5 on the x-axis and i can remove that 0.5 so it aligns exactly with my layout line and i can do the same here and i can remove those sub pixels manually so now if we also do a quick check on the other side resize this like so and we're good to go so those are lines but we also have a lot more shapes we can use we have rectangles ovals rounded rectangles arrows triangles stars and polygons now i won't go through every single one of these because i think they're pretty self-explanatory instead let's create a notification icon right here all right so i want an icon with a bell inside and some kind of badge that shows me the number of notifications so let's uh check out the height of this element it's 44 pixels so let's draw a circle using the o tool and to make sure the width and height are the same i can hold down shift notice now it's exactly the way it should be so let's make this 44 by 44. let's align it properly with the rest of the elements when it comes to fill color i only really want a border around it so i can either use a white background color or i can remove this color entirely so it's really up to you border width one pixel here i can determine where to place the border so this is currently inside but i can show it in the center or on the outside and if you don't know the difference let me actually change this to 10. and hopefully this will show you the difference between these uh these types so border on the outside means the width of the inside element is 44 pixels and 10 pixels of border is on the outside if i place the border to the center i basically have 5 pixels of border inside 5 outside and inside just means that the entire border is inside the element so it's actually uh contained within those 44 pixels of uh of size but in my case i usually prefer to leave it on the inside and let's just bring this back to one and i'm going to change the border color to let's say black 15 or 30 i think black 30 should do the trick here okay next let's bring in a notification icon so let's search for bell or let's see notification this is the one that we need so copy that paste it in right now it's like super big so let's lock the proportions here that means when i resize the width or the height the other value resizes automatically let's uh bring this down to 20 okay and let's move this inside zoom in and i can select both of these elements align them to the middle like this and like this great now visually this is a bit off so you shouldn't always trust the design software to properly align elements if visually it looks wrong then you can go in and you know nudge it a bit we can also uh you know reduce the size of the icon a little bit until we get to the desired size okay so that looks a little bit better let's actually grab this let's select both paths that make up this icon and change their color to just the black color that i defined in my document now let's create that badge i was talking about for that we'll also be using the oval tool and i'm going to draw a badge that's about 16 by 16. i'm going to remove the border and i can also click this trash icon to remove it completely and i'm going to change the fill to the accent color then inside t for text tool let's say i have three notifications i'm going to be using pop-ins medium 11 pixels for font size zero for character spacing i'm gonna change the color to white then i can select both of these and align them to the center like so and also i need to do a small adjustment to make sure everything looks right command g to group them up and then i can align it just like that select everything command g and we're good to go all right what else can we use shapes for well what about this carrot icon this arrow down in case we can't find an icon like this that we like we can create it ourselves in sketch very easily using shapes so what we do is we go to shape triangle we can draw a triangle that's approximately the same size let's say eight by or nine by five we can remove the borders i can set the fill color to whatever i want in this case black and here because this icon has rounded corners i can do the same for mine i can use this part of the inspector to either enter a value manually or i can use the slider here and that's going to round off the corners we might need to make it a little bit bigger and to rotate this shape we can go here rotate or we can press shift command r and then holding down shift to go in increments of 45 degrees we can flip it on the other side and we can i guess we can make it a bit bigger something like this so it's really easy to create a shape like this in sketch using the triangle tool but since we're already using the icon from this icon set we are good to go here now another great use of shapes is for things like this so this green background is actually just a shape it's a rectangle with rounded corners the same goes for the visa card background right the widget background that you see here right this is also a shape i don't have any fill for it only a border so how do you create something like this well it's super simple in this section here i want to add some statistics i wanna display my total earnings for this month and my total expenses for this month so let's go ahead and grab some titles i'm gonna hit c and go to text styles and i'm going to search for the small title okay so let's grab this paste it in total earned and now we can close this let's actually move this inside my sidebar widget one group and there are two ways we can do that we can either click and drag it directly in or we can cut it from here command x we can select a layer inside the group that i want and hit command v and that's going to paste it right above that layer that i previously selected so let's align this let's leave 24 pixels of gap between there and let's grab the rectangle tool create a shape and then let's grab the text tool and let's type in the number that i want to display inside the shape which is this so let's bring this over this is currently sitting under the rectangle and i can move it up like this so it's now displaying above the rectangle alternatively i can use the command left and right square brackets to change its position and then for the text style i'm going to use a style that i defined previously and that style is called body bold light right so it's white poppins semi-bold 14 pixels now let's take care of this shape i can start by removing the border adding a fill color as this green that i defined and rounding off the corners let's set these to eight pixels just like this now it's simply a matter of aligning this properly so i want eight pixels of distance from the top and bottom so let's do this and now let's increase the size of the shape by using command arrow up arrow down and then checking the distance with the option key held down and hovering over the item here so that looks pretty good let's uh select both of these let's group them up let's bring them inside the sidebar widget and then i'm gonna move this up so it sits eight pixels from the title and let's select uh both of these command d to duplicate let's call this total spent and i'm gonna pass in the number here and i also realized that i forgot to add the dollar sign like that so now i want both of these to fill the entire available space while also uh keeping a nice distance from the edges of 32 pixels but also a distance of 16 pixels in between so how do we do that well it's super simple we start by calculating the total width of the container that's 309 so we select this shape and we say 309 minus 32 pixels on one side minus 32 pixels on the other side minus 16 pixels in between the two and that's going to give me 229 pixels if we divide this by 2 it gives me 114 pixels let's round this off let's set this to pixels just like that and now let's align the text inside let's move this so that we have 16 pixel gap and now we should have 30 we have 33 pixels which is totally fine let's also align this and let's change the background color to this red so there you have it another great use for shapes in sketch you can create these sort of badges or you can even create buttons we also created this notification icon and shapes are really used a lot in a web design project like this besides text uh shapes are the most commonly used elements in my opinion and those are the basics of working with shapes but there's actually a lot more to talk about here so in the next lesson i'm going to show you some more advanced stuff like reusing shapes and reusing styles so i'll see you there if you remember the lesson about working with text then you might remember uh text styles right they were collections of properties you could reuse between different text elements and whenever you would change that collection it would automatically be applied to all the text elements that were using it well shapes have a similar feature and it's called layer styles so let's go ahead and start with that and looking at our page here we can start noticing some similarities between elements so for example this area has a background that looks like this green with rounded corners if we take a look at this one it's also green also with rounded corners the same amount of pixels as a radius what else if we scroll back up we can also see that this circle here has the same green color as a fill of course this being a circle it doesn't have the rounded corners but that doesn't really matter right now and what else well we have some additional elements here that could use that green color background for example this element currently it's set to uh to the accent bg this is a layer style but i wanted to use that green color so how do we do that well we can create a layer style and that layer style will grab most of the layer properties we set on a shape and allow us to apply to other shapes to reuse it basically so what i can do is i can select this green background or the shape that has the green background and under appearance where it says no layer style i can hit create and we're going to call this green bg okay so now what i can do is i can select the other shapes that i want to use these styles and i can apply the style that we just created let's do the same here and let's do the same here this is inside the symbol so it's a little bit different but we get access to the exact same window here and i can choose green bg now here's the cool part if i want to change this let's say i want this to be a darker green like so so i change it in one place i hit update and it's going to change on all the other elements that are using this layer style and of course i can always command z to go back to the way things were and throughout this design i have several layer styles defined i have one for the red background that i'm using here and i can search for it red bg let's also put it here red bg i have one for this blue i called it accent bg and i use it here as well like so and you can actually see all the layer styles by going to the components view in sketch and you can click this icon and here you can see we have the backgrounds accent green red transfer but also i have a widget bg which i use here right so for all of these boxes that just have um a light gray border i use the widget bg layer style and of course just like with text styles you can press c on your keyboard to bring up this window and you can choose any layer style from here you can create a shape even with that style currently this is kind of outside of a view here there we go so this automatically created a shape with that layer style pretty cool now when it comes to reusing styles and this applies to both text and layer styles a very important concept you need to know about is color variables so color variables in sketch represent a way to save certain colors to your documents and being able to reuse them over and over again so if we go to the components and we go to colors we can see that i have a number of color variables defined here i have the accent and for each we can give it a name and specify the color i have a variation of that accent that's 25 opacity it's basically a tint of that color then i have the green the red the red 50 tertiary color and then i have the black colors right so that's black 100 black 0-5 10 15 30 50 opacity these are basically tints they're mixes of this black color with uh with white and then of course i also have a nice white 50 opacity color now how do you create a color variable well it's uh it's actually very simple let's say that i want to use a slightly different green color for these uh for these elements so what i can do is i can go to my color picker i can choose the color or the green that i want maybe i want something like this that's more towards blue and then i can simply click create color variable i give it a name and my apologies uh this is a little bit outside of the recording zone here but i give it a name let's call this alt green and there's a button here that says create so let's click that and now in my color picker i have access to all of these color variables and i can display them like this as a list or by clicking this button i can display them horizontally like so where i can only see like a thumbnail of that color but personally i prefer the list because i can see the names so now i can reuse that color variable wherever i want so if i want this to use the new variable or to use the new color i can change it from here i can select alt green now of course this will tell me that hey you're using the green bg layer style and you've overwritten the color do you want to update or not it's really uh it's really up to you if you want to do that if we click update then all the instances that were using that older green are now using the new one so color variables are a great way of saving colors because right now i can go back to the green that i was using if i don't like the new change it's really that simple in in sketch now when it comes to reusing shapes i want to tell you about a really cool feature in sketch called make grid and this allows you to repeat an element or a group of elements in a grid pattern and it goes something like this here i've created some savings goals basically i have two shapes overlapping showing um kind of a progress bar but i want to add two more okay so what i can do is i can select this group i can command d to duplicate it and then drag it down and then do the same a third time and then a fourth and a fifth and so on but after a while it can get kind of boring right so what you can do once you have uh two elements you can select both of them and here we have a little icon that popped up and when we click and drag we can create as many elements as we want and we can do that in both directions right and right next to the mouse cursor we can see uh the number of columns and rows so this is one by three meaning one column three rows you'll notice that as i'm moving up and down that number gets updated so that's really really cool now once i have these selected i can also change the distance between them by using this handle or by using this field in the inspector and then of course i can go in and change these values as i see fit so maybe this will be something like this i can change the the number here i can change the description and so on these are like regular groups it doesn't create any component or anything like that it's just a regular group and i can do the same for example on the menu right we have several different menu items we need to add but instead of you know copying and paste all the time i can simply select both of these and i can drag down to create as many menu items as i want and then i can go in and edit each menu item individually super nice right this is very useful for repeating content so you saw we can use it here on the menu we can use it here but also we can use it here it's enough to have just uh two of these elements right and then we can drag and create as many as we want same goes for these elements here right if we had more that we needed to display right we could just create two of them and then do this very very cool functionality all right and those are some more advanced use cases for shapes and shape styles now let's move on to images because so far in this course you've seen plenty of images being used in this design project but i haven't actually showed you how to bring in images from your computer to sketch let's take care of that next let's jump straight in here and learn about working with images in sketch you can add images in a few different ways and the easiest one is to simply drag and drop from your computer so let's say we need a logo for our project which we need to place here and i have the logo in my downloads folder in two image formats i have the png and i have the svg so in sketch you can simply click and drag and that's going to be placed right in your dashboard or canvas or whatever your you're loading it into so this is an image layer type you can see that from the icon that's being used in the in the layer but there's actually something wrong with it isn't it even though it's the correct size it's kind of pixelated and you can notice that even more when we zoom in if we take this to a hundred percent i guess it looks fine you can't really see it but when you're starting to zoom in a little bit you can start noticing that drop in quality this is because the png format that i used is actually a raster format that's that's what it's called it it's made up of pixels and whenever you're gonna resize it's going to be all blurry and stuff so let's click original size and that's going to take it to its well original size now i wanted to mention this because i wanted you to see the difference between a raster and a vector and vector is represented by the svg so if i drag in the svg image it's exactly the same size but look at the difference between the two so this is raster this is vector okay if i zoom in even more you can clearly see the difference the vector will be sharp regardless of how big or small it is so i can very easily resize these two let me copy them here so i can resize them to a huge number and notice the raster on the left notice the vector on the right this is just as sharp this is pixelated unusable really so i recommend for design projects like this if you can use vector formats meaning svg the other formats like pngs jpegs gifs and so on they're better used for other types of images like a picture of someone right you don't have a a vector version of that it's it's a still picture okay so for for that it's fine to use png and jpeg and stuff but for this kind of stuff for logos for icons for anything that can be represented as a vector use the svg format it's gonna look great on all devices on all screen sizes and it's going to make your life a lot easier so for this we're using the svg so that's one way of loading images in sketches simply by dragging and dropping another way of course is to copy and paste so if you remember we've been doing this in this course so far when you have an icon from somewhere that you want to get not necessarily from this icon app let's say you have it in your downloads folder right so let's say you want to grab this one so you copy it and then you can go to sketch and you can paste it in command v or right click and paste and that's going to bring in that image into sketch and from there you can make it bigger smaller it's just like any other layer but there's also a third way you can use images in sketch and that is by using uh images as a background for a shape so if we take a look down here in this area i'm missing an avatar so here i should have a picture of this guy okay so how do we do that well we could grab like this image and we can bring it in and then resize it let's say 64 pixels let's actually resize it like this so this is actually what 40 pixels so let's resize this to 40. right so i can bring it in i can place it there but then how do i create the rounded corners right how do i make it round actually well there are ways we can do that in sketch we can use a mask for example so i can click on this avatar image and i can choose mask right and that's going to display that but i don't want to get into it right now it's a bit more advanced instead let's delete this uh image let's select the shape and then we can go to fill click here and then i can choose the image right then i can go in i can choose the image that i want maybe i want this or maybe i want this okay and that's going to be placed as a background for this shape and because the shape is already round i don't need to do anything else so that's really really cool now something else i want to show you here is data sources and this is a great functionality in sketch for images for text for a lot of different things but we're covering images in this in this section so let's say that i'm designing something i don't have pictures of like my final pictures that are going to be placed here so i just want some placeholder ones we can do that by clicking this button where it says image data and we can go to sketch data and we can click on faces and that's gonna randomly get an image from this database and i can always click refresh and that's gonna give me a different image very cool or i can grab images from unsplash so i can grab a random photo and of course i can always refresh and get a new one or i can go to search photo and i can search for people or portrait okay and that's gonna grab an image from unsplash that matches my search criteria and that's this is directly from sketch i don't have to go to splash to download that image then come back and bring it in it's done automatically from here which is fantastic but for our purposes uh let's actually uh set this back to this guy so there you have it a few different ways of adding images to your sketch project now previously we talked about or we worked with shapes but we only work with the simple ones what about the custom ones what about the the ones that you create yourself the more complex shapes well let's cover those next now when i say custom shapes i mean irregular ones so no squares rectangles circles none of that basically i'm talking about hand-drawn shapes and in sketch we can create those with the vector tool let me show you let's take a look at the statistics here where i created this chart and if you remember from previous examples we had you know lines going up and down just like you would have in a chart basically and the easiest way to create that is with the vector tool so you would go down here choose a vector and here's what you do creating a vector like this where a path basically is all about creating various points okay and once all those points are united you create a shape so i can do like this right and i unite that and now i have a shape but in my case let's do something like this so i'm going to start here and then let's go something like this so we have one point there and then maybe we're registering a slight increase in income something like this something like this and then let's end it right here so when i'm done creating my my shape i can hit escape and now this is a path with it selected i can click finish editing and i can go ahead and change the border color so let's use green for that and also 2 pixels width so that's my first shape and that's for the earnings for the expenses i can do the same thing i can grab the vector tool and i can you know start here i can go like this like this it really depends on what kind of uh shape you need to create all right so same thing i can also hit enter let's give this a color of red 2 pixel opacity and now i have my chart lines if you want you can also double click on a specific path and that's going to bring up all the points and then you can click and drag them with your mouse and you can move them around so this is completely editable even after you uh you create it and you can even play around with the border radius here so you can set a radius for each point and make it you know a little bit more rounded and you can even select all of them by hitting command a that's going to select all the points and you can change the radius on all of them at the same time so if we do like 32 pixels that's going to create a more a smoother line throughout my chart here so that's one use case for uh for the vector tool but if we take a look at the ends here you'll see that they're a bit off and that's uh that's caused by the um by the border radius so you might want to just apply that radius to only a few points so that's one use case for the vector tool you can use it to create some of these irregular shapes what about this this visa card here if you remember from the previous renders this looked a little bit different right it had some like decorative elements going through it well this is actually what the vector tool is best known for because you can create things like this so you can start here and then maybe you can go something like this and you can click and drag to create a nice curve and then you can go here and extend that and then maybe you can go like this all right and you can close that off hit enter and now you can actually remove the border you can add a fill to it you can set an opacity all right at any point you can go back in edit certain points if you don't like uh the way they look no maybe this is something like this maybe you don't like the angle so you can use these um handles right there maybe bring this in a little bit you know i'm not a i'm not a particularly good with the uh with the vector tool but i do okay every now and then so you know you can create an irregular shape like this and if you want to hide these excess parts let me show you a cool trick so uh you would let's bring this in the card group like this and let's also bring these two paths uh let's see where in the main widget one i believe they should be yeah okay so coming back to this i want to place it at the very bottom of my group okay just above my card background and to show or to hide the excess edges here here's what i can do i can duplicate the card bg i can group this up and i can set the card bg to mask and the mask will basically hide anything that is outside the boundaries of that element so in this case because i set the card bg copy to to be the mask it's hiding anything that's outside the bounds of that of that element and this is of course still editable so i can hold down command select the path double click and i can go in and i can change these at any time maybe i want to bring this in a little bit closer maybe i want to even delete one of these points i can delete it like this so i can bring it in like so so it's totally non-destructive i can i can create whatever kind of shape i want with this so that's the vector tool now when it comes to creating paths there's also another tool you can use and that's the pencil tool this is i guess a little bit more gimmicky because you can create whatever you want it's like writing uh with a pencil on a piece of paper right and of course you can create like a regular shape you can you know draw a shape like this but you know it's not going to be precise that's what i'm trying to say right you can't draw a straight line with with the pencil either holding down shift or any other key it doesn't really matter the pencil is just used for free form drawing so i don't have any use case for it in this project but i just thought i'd mention it so you know it's there if you ever need it you know where to find it so that's the vector tool very handy for creating custom complex shapes just like you saw in this lesson now earlier in the course i said that sketch is great for creating icons and one of the reasons for that is the fact that you can use what's called boolean operations let's learn more about those in the next lesson boolean operations are used for creating complex shapes and as i was saying they are great for creating icons so let me show you what they are and what you can do with them and let's uh do something very basic at first let me create two circles one like this and one like this and let's also give these different colors like so okay so we have four boolean operations and you can find them right here on the top first of all uh we have union and this is used to create a shape that's the sum of the other shapes so for example if i were to overlap these two shapes i can select them and then i can hit union and this will create a shape that's basically the merge of those two as you can see when i change the fill it changes on the entire shape another operation i can do here is called subtract it's this one and this will basically remove the area of a shape from the one underneath it so in my case the shape that's underneath is the green one so when i select both of these and i hit subtract the shape that's underneath has a cutout that matches the shape that was above it if i were to reverse the the order here if i were to put this under and i would repeat the same process i would get a different shape so that's subtract now we also have intersect which is this one intersect will create a shape from the areas that overlap between these two shapes so the area that overlaps is basically this one right so if i select both intersect i get this shape and finally we have difference and this is the opposite of intersect and it will create a shape from the areas where the original shapes don't overlap so with these two selected if i hit difference it's going to create this kind of shape now regardless of the boolean operation that i used the resulting shape is still editable so i can collapse this group and i can freely move the objects or resize them in any way that i want which is fantastic so those are the four boolean operations we have union subtract intersect and difference now let me show you how i applied these to this project first of all let's take a closer look at this visa card if you remember we used a mask here to cut away any excess from this custom path that we drew earlier but there's actually a second way we can do that so if i were to ungroup and unmask i would have a copy of the card bg and the actual path and let me actually move the path a little bit just like this and then with these two selected and i'm going to hit intersect now this will create a shape and i'm going to detach the layer style from that and i'm just gonna pick black and i'm gonna give it a nice opacity something like this and the result is exactly the same i don't need to use masking or any kind of technique like that and the shape here is still editable you can see we have a small problem here i can just go in select my path move it up just a bit and we're done i can also use boolean operations here in the chart so maybe i want to display an element that tells me exactly the value of one of these points here okay so how would i do that well let's uh let's type a value something like this it doesn't have to be super fancy as a text style let's go with body bold light let's grab the rectangle tool and draw a rectangle under that text value and let's set its layer style to maybe this one the accent bg although we can color this in any way we want let's add some rounded corners let's position this correctly so we have equal spacing around the text let's say 12 and 12 there on the side now let's say i want to add a little arrow pointing down it's like a chat bubble right so we can actually grab the arrow from the drop down so let's copy that and let's paste it here and this is a symbol i'm just gonna quickly detach it so all i'm left with is uh is a shape right so i'm gonna bring it up nudge it up just one pixel i'm going to select both shapes align them to the middle and then i'm going to click union and this creates a combined shape from my original rectangle and that small arrow so now i can you know change the color to whatever i want let's say i want to set these to the black i'm going to detach the layer style and then select the text as well group them up and then position them wherever i want and here of course i can also add just a small element let's also fill this with black and let's add a nice border white and let's make it a little bit thicker maybe like six pixels or something like that and let's bring it above these paths and then i can align it to the middle like so and we're pretty much good to go all right so that's a really easy way of creating a custom shape like this using boolean operations and as i was saying this is great for creating icons as well so icons are typically made up of simple shapes like this right take for example this icon or this icon right this is super simple to do with boolean operations you would have the the main shape here then you would duplicate that and then you would use some subtract operations to create these smaller shapes like this or maybe this one you would have a circle and then these bits that you can add using a rectangle or a line with rounded ends and then you would do a union operation on both of these what about this one this is actually super easy to do so we would have what rectangle i'm just going to quickly quickly draw this no borders maybe a bit of rounded corners something like that then what we have another rectangle that's the base strip and then we have a smaller rectangle here i'm not going for absolute fidelity here it's just a quick a quick demonstration right so i would select this and this and then do subtract and then select this and this and subtract again and there you go that's your resulting icon super simple to do and of course after the fact you can you can go in you can select the smaller rectangle maybe give it some rounded corners to make it a look a bit more realistic so that's a very quick icon created using boolean operations and those are the boolean operations you can use in sketch to create custom more complex shapes now let's say you created custom shapes buttons pieces of text components whatever and you want to reuse them throughout your design well in sketch you can do that very easily using something called symbols so let's talk about those next in sketch symbols are all about reusing content and by doing that you're actually speeding up your workflow now the nice thing about symbols is that whenever you make a change to the master symbol all the other instances will receive those changes automatically which is fantastic so let me show you some examples first of all let's go to this earned versus spend section where we have these two elements title and then a badge with a number inside if you remember we had an additional one here that said total spent now because these are relatively the same and because i might use this type of layout further down the line it's a good idea to make a symbol out of it okay so to do that i can press this button of course i need to select the group first then press this button or go to layer create symbol or use command y okay so let's call this title and badge uh no layout don't worry about this yet we'll talk about layout in the next lesson and also you have a check box here that says send symbols to symbols page i recommend you check this because it's just gonna send it right here in the symbols page and you can clearly see all of them at all times now let's take a closer look at the elements that i have inside the symbol so i have a title that has a text style applied to it i have this text which also has a text style applied to it and i have a shape that currently has no layer style applied so let's fix that let's set this to green background now this is what's called the symbol source or the symbol master i guess you would call it whenever you are reusing that symbol in your document this is called the symbol instance okay so it's basically a copy of the master symbol and inside the layer list symbols are represented like this with this uh pinkish icon now here's the cool thing about symbols they have what we call overrides or what sketch calls overrides basically you can change most of the elements inside the symbol instance without affecting the original symbol so i can change the text i can change any text style i can change any layer style so in my case i had another instance here that says total spent so i can change that right and this is happening independently of the main symbol or the other symbol instances i had a different text value here and also i had a different background so i can use the red bg here now please remember that in order for this to work you need to have layer styles and text styles applied to the elements inside the symbol and that's it it's very simple now if i make a change to the master symbol let's say i want uh less spacing between the title and the actual badge right so i'm gonna bring this down for pixels when i save and i go back i can see those changes reflected in the symbol instances the content right the overrides that i applied are still there they're exactly the same but the because i changed the structure of the original symbol those changes are now reflected here in the instances as well so this is fantastic it really saves you a lot of time and if i want to go back to the way things were i can just move this back save and now it's back if i want to unlink a symbol instance from the original symbol i can simply detach it from here or right click and detach from symbol so now if i make any changes to the original symbol like for example move this to the right side you'll see that that change is only applied to the symbols that are still linked or to the instances that are still linked to the master symbol now if i want to re-link this to uh to a symbol we can do that i can right-click and i can set replace with and i can search for my symbol here and this is called title and badge so i can do that but of course any overrides that i did will be lost and i have to do them all over again now looking at this uh this section here you might think that okay well we can also use symbols for these elements right technically yes we can however we're gonna have a hard time resizing this bar across instances so if we make a symbol out of this that's great on any instance i can change this text i can change this text but i cannot change this the width of this element any structural changes that you make to um to a symbol will be reflected on the other symbol so you cannot have this bar be a certain width on one instance and a different width on another instance it's always going to be the same so symbols yes are great but you can't use them for every single repeating element you really have to consider uh the structure of that content and if it can be overwritten from instance to instance another great use for symbols is right here in the menu and this brings me to the discussion about nested symbols you see in my menu each menu item is a symbol right and we can click this button to go to the actual source now in the actual source we have what we have a piece of text and we also have another symbol nesting symbols like this allows me to do a very cool thing and that is to change the symbol per instance so in my symbols page i have defined all of these menu icons as their own individual symbols okay so then in my instance i can change the text and also the icon and to get the best results it's best that these icons are exactly the same size but again be careful this can only happen if you have nested symbols so symbols inside symbols and i'm using symbols a lot in this document i'm using them here in the menu i'm using them here in the activity area this is one symbol right if we go to the source it looks something like this but for each row i'm changing this title this title this title and also the text inside these labels and at any time i can go in and i can change these properties in any way that i want i'm also using symbols here on today's rates this is one symbol it's called crypto coin this is what it looks like and then for each one i'm choosing the crypto icon which again i have defined as symbols i have them right here and then i'm changing this text this text this and this and the cool thing is now if i want to change the structure on all of these i can simply edit the source maybe i want slightly more space here i can save and that's going to be applied to every single symbol instance i think you get the point by now so those are symbols in sketch and that's a quick look at symbols in sketch and i say quick because there's a few more things you can do with them and if you're really serious about working in sketch then i highly recommend you discover these on your own and see exactly everything they're capable of of doing now there's actually one more thing i'd like to show you when it comes to symbols in sketch and that is an awesome feature called smart layout that's coming up smart layout is all about automatically resizing a symbol when the content inside it changes and it's doing that by maintaining the same spacing between items let me show you what i mean by that so let's say you want to create a button right and buttons can have different text elements they can have icons and it's usually a good idea to resize the button to fit that text content right so let's say we have a piece of text here that says click me and you also add a rectangle under it that serves as the button background so now let's assume this is your button and you want to make another one all right let's let's actually group this up and let's duplicate it and this other button should say send message now how do you resize this well you have to do it manually right you have to select this resize you got to check your previous button to see the exact spacing there so it's 9 pixels you have to come back here measure resize by hand it's a lot of work right if you have like 5 buttons 10 buttons you have to do this every single time however with smart layout this has just become much easier so what you do is you create a symbol let's call this test and here under layout you decide how the content inside is going to be aligned so you have horizontal left right center or right to left or you have vertical top to bottom center bottom to top let's go horizontal center layout okay so let's create that and now whenever i change the text inside that button background will automatically resize with it of course keeping the same spacing on the top left bottom and right side right so the the symbol here stayed exactly the same but the instance is now resized all thanks to this great feature called smart layout and from the symbols page when you select the source symbol you can also change its layout from here so if you want a horizontal or vertical layout and then you can change how you want the alignment to be you can also specify minimum width let's say you want this to be 300 pixels minimum right so now these new instances will be at least 300 pixels so this is a great feature it's definitely a time saver especially for things like buttons but of course you can use them for other things as well now in my page here i used this functionality in two places i used it here on the buttons right so this is a simple button and if we take a look at the source here we have a horizontal layout aligned to the center on this button with icon i also used it same exact layout so now i can you know change the text here open transactions and hello right so as you can see the button automatically changes and i also used it here for these symbols right so if we take a look at the uh this transaction source i have a symbol called transaction price okay and if we go to this source i have a horizontal layout but i have the alignment set from right to left so that when it resizes it goes from right to left and this allows me to place the symbol right here on the right side and regardless of what kind of value i will add in here it resizes from the right side to the left side and this allows me to create some more complex layouts like this while still being able to modify the contents inside various elements and that's smart layout a functionality that's that ties really well with symbols and one that i highly recommend you use now we're almost at the end of this course but we haven't talked about a very important aspect of sketching that's exporting let's do that in the final lesson so then let's say you've created your design in sketch and now you need to pass it to a developer but before you do that you need to export some assets right the images you use the icons and so on so how do you do that in sketch let me show you there are several ways of exporting your elements from sketch and i actually already showed you one in the form of slice so if you remember slice that allows you to basically draw a rectangle and automatically mark that for export so that's great for you know when you want to export uh just an area of a page you can do that uh you can select the export format from here you can either give it a prefix or a suffix and you can see exactly how the file name will be called and also at what size you want to uh to export and when you're done you would click export selected but if you don't want to work with slices and you want to export items individually you can do that as well so for example let's say i want to export this logo well i can select it and then i can go to layer make exportable or i can click this little button right here this also allows me to select the export format let's say svg prefix suffix and i can also add another format let's say i also want to export this as a png let's say at twice the size and i also am going to add the suffix of at 2x and once i'm happy with the export format i can click export selected choose my folder and click export and i can replace the existing files so now in my downloads folder i have two logo files i have the svg and i have the at 2x dot png which is a png file at twice the size maybe i want to export my profile image from here same thing select make exportable select the format export selected so now i also have this avatar exported at its uh default size but of course for things like this i might want to you know export them at a higher resolution maybe even 3x or three times the size or maybe even 5x five times the size and that will of course increase the the quality of the export we also have some slice presets here like for example if you're exporting for ios you might want to export these formats if you're exporting for android you might want to export in these formats and if you don't want a preset you can just click the x and it's going to be gone you can also use the file export option to export every single item at once so this includes slices and also every item that's uh marked as exportable and of course you can uncheck certain items from here or from sketch you can export the artboards to pdf right so that's gonna create a pdf file with the artboard which is great and those are some of the exporting options you have from sketch and here i'm talking about images but you can also for example right click an element and then you can copy either css attributes or svg code it's not exactly an export in the sense that you're not creating a file but you can get some of these items to pass down to your developer or maybe it's just for yourself if you're writing the code then copying some of these css attributes could be very helpful so if we copy the attributes from this element and we paste them in a code editor for example let me open up vs code here well it just pastes or copies the background color and the border radius because those are the properties that we that we apply to it so that's it exporting in sketch now in this course we covered what i consider to be the essentials the basics of using sketch and it's the stuff that a beginner should know in order to immediately be able to use the software but sketch is pretty complex so i invite you to discover it further by playing around with all of its features and discovering its true potential before we wrap up just remember that in the video description you'll find links to download the file that we've been working on in this course as well as links to any other third-party resources that i used icons fonts and stuff like that also if you have a question for me regarding this course or the topic of web design in general don't hesitate to drop me a comment down below i i usually read these comments and i'll do my best to uh to help out if you if you've run into any situation where you might need assistance with sketch or other uh other thing in the in this area with that said thank you very much for watching don't forget to check out the envato tuts plus youtube channel to learn more things like this and also learn more about web design and web development and a whole bunch of other things i'm adi and until next time take [Music] so [Music] you

Channel: Envato Tuts+

Views: 31,945

Keywords: Tuts+, Envato Tuts+, introduction to sketch, how to design websites in sketch, sketch for digital designers, how to use sketch, intro to sketch, getting started with sketch, sketch app, ui design, sketch intro, sketch basics, web design, sketch tutorial, ui ux design, sketch app tutorial, intro to sketch for mac, getting started with sketch for mac, sketchapp, ux design, sketch design, sketch ui, sketch ui tutorial, learn sketch for beginners

Id: pvpRGUYvbCw

Length: 157min 35sec (9455 seconds)

Published: Wed Aug 24 2022