Sketch Course - UI Design

1. Introduction: Hey there, I have the pleasure to invite you to an eight hour long sketch course full off. Practical knowledge and Secrets Off Interface design Sketch has already won the heart off you, I and UX designers, even though just about anybody can learn it. Really. The up was greeted for one thing, Onley extremely efficient you a graphics design off course. It can be used for different tasks. But then you realize that the number off interface designs created in sketch last year surpassed even full of shops. Thanks to its singular focus up and website design, Sketch has gained a distinct advantage over the less deficient applications overloaded with various functions. Sanchez Photo Shop and illustrator, Just like a surgeon who is at his best using a single precise couple instead of a sweet snipe knife with a confusing assortment off tools, faster operations, smaller files, better efficiency dedicated your vitals and hundreds off useful community created plug ins will make you definitely fall for sketch. The course has been designed to show you the functionality off sketch to teach you how to best make use off its potential. We'll start with a set of small examples off how to find your way around the UPS, interface and tools. And then we move on to a practical project where the tools will be used creatively. I divided the course into two parts. The 1st 1 is a greatly compressed compendium off hundreds off important techniques, key short card steeps, intrigues and other things. The other one will lead you through a design project often up interface off an intelligent home from scratch. You will experience the full potential off sketch and to learn how to work with reusable symbols. How to use catch to design layouts, which scale easily to various devices and resolutions. How to creatively USV actor tools and design your own icons, among other things, will also discuss the typography, icons and extraditions to help you in your work. By the end of the course, will apple screens to marvel in order to create an interactive prototype. Adding in animations and transitions lets us present our up as spectacular but also clear composition. This course is essentially a new, fresh approach to designing mother user interfaces. I can barely contain my excitement for the direction said by everything I've prepared for you. There are dozens off additional techniques and materials added to the course. And trust me, it's fun to go for all of it until you realize that it's only the beginning off. A wonderful adventure in the world off Mother knew I and UX design tools. Next, you will be captivated by the functionality off tools for prototyping creating micro interactions and finally exporting your design to development. How quickly can reach the other side of the mirror depends entirely on you. Will you take up the challenge looking forward to see in the first lesson? 2. Course Assignment & Source Files: Hey there! And welcome to the next lesson. I'm super excited that you decided to take my skill shirt course. Thanks again for that. And in this lesson, I'm going to tell you about the course project. So it's super important that you take steps to recreate what we create in the course. It's really useful that you make your own designs in sketch and you submit the project. So the project and the assignment of the course is making a mobile up. We're going to be focusing on and mobile up that I've created here and you can see the case Study on be hands is pretty neat up with, ah, some cool features and also animations that you can learn from the other courses that I have on skills. Sure, but basically we're gonna design a beautiful up. And I want you to create this up on your own as well and submit this up as the course project so you can follow the lessons and you can do exactly what I do. Teoh accomplish this task. But also I encourage you to take some other steps and maybe tweak it a little bit. Maybe you, some other colors, maybe use some different photos. Or maybe you decide to create the completely different version off the up. It doesn't have to be the smart home up that I create, but it's really important that you train and you submit the project. Now. Another thing I want to mention here is the source files. So the source files for this course are in the comments to this lesson. If you take a look at the lesson timeline, you can see a little avatar here. That's my other hand, basically a comment with the link to drop books that you can use to download all off device that I've agreed to this course now. Not all of the lessons have their starter files and finished files, and also not all of the assets that I use half files in the source files, but I encourage you to use the links that I provided. Some resource is were just under some licenses, so I couldn't close them here. And for some examples, I just feel that it's better that you start from scratch and you create those resources along with the course. So I wish you all the best and ah good luck for creating this course project. As I said, this assignment is pretty important. So make sure you create your own version of the up and you submitted in the discussion for discourse. Thanks a lot, then. See you in the next lesson. 3. Navigation through Document: this lesson is all about navigating in your schedule documents. So every time you lam sketch, you see this welcome screen with some use, and also you can access the recent documents as well as the templates that are created for you to use. For example, for IOS you I design or material design. You can also create your own templates. You can disable the welcome screen, but I think it's very useful, so we leave it for now, and we create our first document with material design scheme. So when you work from ready made document, you can see that you have all the style guides ready, mate in sketch layers groups and also symbols, and you can easily reuse them. So this is very efficient way. If you're creating some material, design the websites or applications for Google play. If you have some other files with dots catch, you can open them by double clicking. But what you get this instead off opening those fires in the same window as you get in follow shop or illustrator. You have another window off sketch, and it's very useful because you can now get the components from one file and for example, just dragged them to another file. Or you can come and see. Come on TV just co p and paste them too. Some other window off course. You can always work with the tops as well. You have tops that you can out here, and you can rare rearrange the tops. You can close the tops from here, and you can, ah, just grab the top from one window and then just make it stuck to another window so that you have to tops in one window. Okay, let's close this window that we don't need. We can press command W and then let's make this window bigger. We don't want to enter full screen, so we present hold health on the keyboard and full screen changes to Plus I come so that we can enter this this mold that that will scare our window. So now the sketch window is maximized, and you can navigate through all of the pages off our mobile application and art boards with some handy keyboard shortcuts. So if you want to zoom into some object or some layer or the outboard, you simply click on the article name and then you press the first shortcut. It's comment to when you press command to you. Get the full screen view off what you recently selected. The second shortcut is comment one and comment. One lets you see everything that you have in your project, so it scares up to right now to 14% to handle interview that you have everything that you have in project. Then you can select some other item, and you can press command to zoom. It's again. And as you see this doesn't have to be in art board. You can select any item, and it zooms as much as it can. So the next shortcut is command free and common. Freeze the short shortcut that you used to bring the selected object, for example, this one to the center off the view port. So the reason we do it ISS because when we select some other item and just press coming, plus and command miners, it doesn't work because it's not in the center, so you have to press command free, and then you can use the family there shortcuts off common plants and common miles because they zoom exactly to the center off the view so the fastest workflow is to select an element, and then press command to it zooms it and you can use the plus and minus signs here at the top. Or you can you can use common plus and common comment minus. Then you can press common zero to zoom to 100%. And also you can double quick on this zoom icon to bring to the 100% of you. So those are two ways to accomplish that. Dusk. Okay, one more thing I like to show you is when you select an item and you are certain zoom level . You can always press and hold space bar, which will allow you to change the view. So you present hold space bar than you press your left mouse button and you simply drug and you can see some other objects on the other boat. So this is a spring loaded tool. So that means that when you press it, you have to hold it. You have to hold space burr, and when you release it, you can no longer use this tool. So you get back to the tool you've been using and s O that you have this very common techniques to navigate. For sketch, you have command free command, plus common minus. Come on, one command to and come on zero and everything you have in this view money as well. Okay. And there's one more thing I like to show in this lesson. And this is s so called presentation view. It's not the full screen mode, but it hides all the clatter on the left and on the right side as well as the toolbar, and you access it by pressing command dot on the keyboard. So now you have a few part that feels entire screen, and you have you can work in sketch. If you know the keyboard shortcuts, you can use all the shortcuts to access the tools and also all the shortcuts we discussed in this lesson. You could make a presentation or, for example, if you have a small screen real estate, you can work this way in sketch. So you press commandant to go back to normal sketch mold with all the panels, and basically that's it. Now it's press command and to create a new instance off sketch and what I like to show you and this is the part that I've recorded later on. After recording this course after the new scourge version was released, I'd like to show you the differences in terms off the user interface of sketch because it slightly changed because schedule refresh its interface in schedule. Version 52 I was recording in previous one. But honestly, there's no need to re record almost anything, and you'll find the updated lessons across the course. But I want you to take a look at the new features off sketch and the new interface and how it's organized. So basically, those are just minor changes with all the styling and borders, and everything is slightly betters and slightly better looking than at the version that you can see in the course. But what is really cool is that you can now go to system preferences and change the mode in your system so you can apply light or dark appearance to scatter. If you switch from light to dark, you immediately switch to dark version off sketch and let me show you how you can switch between light and dark. This is a system option so you can easily select the one that fits you. On the other hand, you have different a bit different layout off the panels and tools. Basically, they've improved the clarity off the icons and the clarity off general interface. But to be honest, you'll find almost all the options in the same place. So if you are working with the U. S diversion off sketch with this course from time to time, you'll know this slight differences in the icons that you have in the panel and maybe some rounded corners and probably laying out off the data here. But you'll quickly figure it out, and there should be no major differences and how things behave. And will that explain in the course? If there are just let me know and I'll fix it, I'll keep updating this course with each new update off sketch that brings something fresh and something new. So rest assured that you know all the modern tools and techniques that you can apply to sketch. And I'll keep doing that until I realized that it doesn't longer make sense in this form in this way, and then I just start over and we record this course from the ground up. So I think you're in good hands. I see in the next lesson 4. Making Selections: hello and welcome to this next lesson in which I'm going to show you how to select things in sketch and this is pretty basic knowledge. But if you've worked especially with Father shop or other bill a straighter before, you might find it quite surprising because it doesn't work the same way. So basically and that will be for the shop or illustrator. You press the wiki to enter this selection toe, and if you present Vicky in sketch, you basically go to a vector toe. So this is different tools. So we press escape and even if you're drawing rectangles or over, you simply press escape and then you are in this election toe so you can know hover over the layer. As you can see, it's highlighted both in the layers panel and in canvas, and you can click on the group. You can expand the group, you can go inside, and as you see all the layers are being ah, highlighted. And if you want to select any layer, you can click, and if you click wants you select the group first, So to go inside the group, you have to double click, so you double click on a group to go inside and there you go. There's another group inside. So now this second group was selected and still just like that. Son, I have to DoubleClick DoubleClick inside these groups and now I am in this field. So I'm I've selected the field, so I had to click six or seven times to select this one layer. And would you can basically do is you can change the behavior by selecting this quick through when selecting on the group so that you don't have to double quick. You just simply click once to go inside this group. So when I did it on my main group, I click once. Now the second group has to have this click fruit when selecting, enabled as well and the first group. Actually, if I go inside the for group the Sun Group as well, I need to click it as well. And now, if I go back to this Golden Gate Bridge Group, I can click on Lee once to select the sun. OK, so you can have this enabled for all the groups by default. It's very easy. You have to go to preferences, so press comment comma. And now, in the layer section, you just click enable quick fruit for new groups. And each time you create a new group, you have this behavior so you don't need to double click. You just creek once and to enter this layer there's a second way, though you're gonna have to enable this option in preferences to go inside any group and to select any layer with one click. What you do is you just press and hold command while doing so. And if I press and hold command as you see all the layers inside, those groups are highlighted, and when I click, this very Castell layer is selected. So this is basically how I do it. I command Click to select any layer, but you can also hover over some layers and then right click or contra, click and then peak layer, and you have the least off all the layers that sit just below your mouse, and you can select any layer like so yes, so that's the way you do it. You just press command and you select anywhere, even if it's nested inside a group. So there is also another way, Teoh select a layer and edit it. So if you have a vector layer, you come and click on the layer to select it, and then you can do some simple operations. Such a scaling. You can also press comment and over over one of the corners to rotated. But if you want to enter the edit mode, you simply press return. If you press return on the keyboard, as you see, you can now enter and access all the vector points and change a vector points accordingly toe what you wish to achieve. So this is an Eddie editing mode, and you go to this everything mode by pressing return. Now I press escape, and if you press escape a couple of times, you go back to you. Always go back to this selection tool so that you can select some other layers in sketch. So let's do a quick summary. You can creek on the group's to access the layers. You can double click on the groups, and you double click if there is nested group, and you can also enable this click through option on the groups, or you can simply coman click on any layer to select it. And there's also one more technique that I like to show you on that is selecting multiple layers at once. Let's switch to this next image, and what I'm gonna do is I'm gonna select this first layer with command and now I press command and also shift button to select more than one layer. And if I command shift, click on the second layer. As you can see, both fires are selected now, so I can select the layers with shift in the layers panel as well as you see all the layers get selected in between those layer that I clicked and I can co month click the layers in the panel as well to select some multiple layers. Also, there was another technique that lets you just creek and drug to select any group. As you see, the group is selected. But if you press command while doing so, you can select any layer that is in that selection. So you can simply drug to select the group or you can commander drug to select each layer. Let me copy this bike liars for now. So come on, C, come on TV and I'm just gonna move it there and let's elect those layers by dragging. And as you see all the layers inside the bike are selected when it is outside off any groups, That way I can select all the layers. And if you wish, Teoh select all the layers. Except, for example, this one you can right click on this layer and seller and lock it so you can also breast shift command l to look the layer and that while drugging you won't select this field 30 later. So that's basically it as far as selecting players and group in sketches concerns. So thank you for your attention and see you in the next lesson. 5. Pages and Artboards: Okay, let's now focus on the structure off your sketch documents, so the main thing in the structure is page, so you can have many pages in your document and in each page. You can have, for example, one section of your application, or you can have a mobile version. And pages are also good for speed because you congrats up many art boards in pages, and you can optimize the speed off sketch that way. So as you can see, you can collapse or you can show the pages. Least you can click on this little icon next to the page name to switch the pages as well. And pages contains part boards. You can see all the other boats by pressing command one. You can switch toe the second page that we have here. This is the page symbols, and there we have one symbol as well. Speak about the symbols next time. Now that switch back to this DuPage and you can have many art boards in one page. So now I'm creaking through the art boards and inside the articles we have the groups and inside the groups we have other groups or the layers so what happens if you select the group or a layer and he try to move it to the side of the art board as you see the Audible Clips group so you can no longer see the content that's outside the Archibald. But if you take the group and you put it outside of the art, but as you see now, it's not in the log in our boat. It's just sitting alone on this do bitch so you can basically transform it into an art bolt . If you select any group that's on the page, you can press A and A is inaudible tool. And if you press A, you can go to the right side sketch and you can basically create the Archibald around selection. So you have this first option here around selection, and while your mark group is selected, you can just click that. And there you have a new art. But that is the size off this group, so you can go back to this article. It also lets press a again, and you can access different sizes and different presets. So I have IOS devices here, a responsive web design material design as well And if I access, I was devices There you have iPhone seven. You have iPods and stuff so we can create iPhone seven art board. Like so all you can simply let me go back to this a tool, and you can simply click on the Iowa's devices to create all of the art. But from this section eso you have now all the iPods, you have all the iPhones, and you can lead the our boards by pressing backspace on the keyboard. So let's get back to this. I found art board. And if you want to duplicate the art board now you have tow select this cardboard and you simply click on the art boards name and command, the to duplicate. And now we have a copy off this art board, and this one is actually empty. We can change the Morgans. We can command the again to make another copy, but also you can duplicate existing card boards with content so you can duplicate all the content inside off the art board. Just select the art aboard press commodity and there you have it. There is a duplicate off this very saying art, but with all the content, you can now change the size of the art board. You can make some alterations. For example, if you want to change and compare two different views of your page, you can do the copy, and you can work on this copy easily if you wish to get rid off the article. But you want to keep the content, you press shift command G and now at the art aboard Scone and you have only the contents of the groups and the layers. You can select the group, and then you can go back to this article, tools up. Just press a and create the art. But again, by selecting around selection option. And there you have, you have a new art board, and also we can do this when you have some content inside of the art board. For example, let's create a simple rectangle here, and you want to do march. The audible sighs to this content. You just click on the resize to fit option, and first you have to select the art about. Then you click on recites two feet and it re sizes toe Whatever content is inside. Okay, let's explore some other options that's like the art board, and what you can do is you can change the background color property, so it means that your art board can have reddish, for example, background color, and also you can include this color in export. So it means that if you want to save this art aboard as a graphic asset, you can select it and you can just make exportable select the plus sign, and you can no export this as a graphic. And if you d select, including export, it will export with transparent background. So let's try to export this layer, and I'm going to export iPhone seven copy right now. And as you see, you can save it as a PNG file, and now it will contain this red background. That's press escape to go out of this function, and I'm going to show you how to select multiple art board. So just press shift and shift. Click on each off the layers off the Alborz names, and there you have it. You can select them. You can set multiple background colors, and also you can export multiple images as well. Right now, you can export free art boats so that free images free PNG images will be saved, and there's also cool feature in the file menu, and this is export our boards to pdf's, and you can actually export all of the art boards to a Pdf file and the order off. The art boards can be set in the properties as well, so you can access the properties by pressing command coma. And there you have it. You can access the general tub, then goto our board export and select how the are words will appear in the media fire so you have left to right, right to left off the bottom. You can select different options, and you can also rearrange the art boards. You can make your own order by just creaking on the our board, same and drugging to the place you wish it to appear. So I showed you how to export the art boards to PNG assets to BNG fights, and you can actually do it by simply creaking on the other boats. Name. So that's like, for example, this are bought and you can make this our boat exportable. You can shift click on many are boats to export them as free, different PNG files. But if you want to show someone all of the art boards in one image, you can do so by simply creating another art board on top of them. So I press a and I try to enclose all of this art boat in one extra heart board that goes on top. And as you see, it doesn't group them, but you can and go to the export options. And there you have one image with for articles. So that was need. That was a nice trick, and I see you guys in the next lesson. 6. Layer Organization: on the left side of sketch interface. There is a layer spinal in which you can organize the layers. You can filter the layers, just entered the name off the layer or group, and there you have the results. You can also access the groups. You can access the art boards, and also we have the layers you can select group or select multiple layers with shift key. And if you want to create a group out off, select the layers, you press command G. So when you group it, you can un group it as well. You can press command shift G toe on group the layers, and if you click on the blogged group, I can shift Command Jichuan Group. Once that shift commander toe on group all the groups inside and she's comin G toe on group even further, and now you have all of the layers that are simply put on the very top off this weapon. Elements aren't boards without any groups, so with us you can hide layers with this little icon next to the name, or you can shift command age to hide them, or you can shift command out to lock the layers so you can no longer edit nor select. This looked layer. And there's also a little triangle next to the group as well as next to this of pseudo group. This is a group off items that are actually vector layers so you can select vector layers, and you can put those layers onto another layer to create a combined shape. This is a combined vector shape, and this is not, ah, proper group. This is a group of vectors, which you can, for example, used Teoh. Combine these shapes with Boolean operations. You can click on this little icon and you can make Boolean operations such as unions subtract. You can intersect difference, and I show you the oppressions in the next lessons. But basically in the layers. That's how you can create a combined shaped out off vectors with us you have here. This little icon is a symbol, icon and symbol. It's great concept and sketch you can note at its symbols directly in this art board, you have to double click the symbol, and then you go to this special symbols page and all of your symbols land on the symbol. Special talk about this later, But basically, in this symbol space, you can edit the symbol. And when you return to the Web Elements page there you have the changes made to this symbol . So remember this. I come in the layers panel Next feature is changing the names off the layers. You can double click on the name to change it, but you can also press command are, which is a nice work for God on you can also right click and select rename from this menu, but it's always best to use. Command are now. You're in the edit mode. You can change the name off this layer, and it will also press tab to go to the next layer. And you are still in this edit most so you can edit the names off multiple layers at once. And also you can oppress shift stub to go up the layers panel so you can go down with top. You can go up with shift top. Also layers. Hierarchy is quite obvious. If you have liar that's on top. It covers everything that's below, and if you want to change the position of the layers in the layers panel, you pressed option command, and then you press arrow on the keyboard so you compress option command up to move it up in the late respond or option command and down arrow to move its down. You can also press control. Why holding this comment and option to move it to the very top or to the very bottom of the layers panel. So this is the same as using those toe aiglons backwards and forwards icon that you can use to move the layer in the layers panel. And also you can press and hold option while doing so to move its two front or to move it to back. So to the top, off the layers panel or to the bottom off the layer spinal. And basically this poor layer is now on the bottom of the list, so no one conceived. So that's all I had Teoh say about the Layers panel in sketch. I see you guys in the next lesson 7. Boolean Operations on Shapes: Let's now talk about logical or, in other words, Boolean operations in sketch. So you need two or more shapes that are vector shapes in sketch and then you can use union , subtract, intersect or difference a logical operations. You have to select all of the layers. So I select both over 5/5 copy and the 1st 1 is union. So, as you can see, I have now a combined shaped and all of this operations are reversible. So I can always take that back. I can click on this little rectangle and I can change this Boolean operation. And one very important thing to notice is that this shape is merged so that the top layer so this over five copy inherits all the styles from the layer on the bottom. Some eso the over five gifts stroke or the cold fuel color to the layer on top. While you used this union a logical operation. Next 1,000,000,000 operation is subtracting so you can subtract and merged two layers into one, and now you have a combined shape so that the layer that is on top so this overall could be free, cuts everything out from the bottom layers. So overall copy to in this case so would prevails is always the top layer. So you have to remember that this is not a mascots. You can see there is a stroke here as well. So this is a Boolean operation. And then usually I keep the biggest shapes on the bottom so that I can cut with the shapes that are on top. So please bear in mind that both in subtract as well as in union layers. Order is very important because in union we had this top shape that inherits all off the properties, colors and strokes from that shape below. Now we have intersect. And if we select both shapes, we're gonna use this intersect option and leave words common in those two layers. And actually, difference is quite the opposite because everything that is in common for this layers will be cut out. So there you have it. Union subtract, intersect and the difference Logical operations. And remember that you can always go back and you can really reverse what you did with bullion operations. And right now I'm going to show you how to create simple icons using these bullion operations and we're going to use simple shapes as well as a logical operations toe. Create icons sketch. So first that's create the cloud icon and we gonna use the oval tool. So I press Oh, that with shift. I hold the proportions off the over and there I have this first shape, so the second shape will be the second over. I present holds shift to maintain proportions so that it's perfect circle again, and there we have this top shape. Now let's create the last one, and I press over overall shift for proportions and also while creating shapes in sketch. You can press and hold space bar without releasing the left most bottom and move the shape around so I can change the position and I can still draw the shape. Now you can see the red line that suggests that it is perfectly aligned with the other shapes so I can finish this cloud shape with rectangle so I press are on the keyboard and let's draw a rectangle here so that we have the whole shape off the cloud. So this is just basic operations, basic shape drawing. You can also press option while drawing a shape, too. I drove it from the inside and now I select all the shapes and I can change the border. I can change the field. Eso As you can see, I can change older properties off the shapes altogether. If I select layers now, we can use the bullion operation to merge all those shapes together. So let's select all the shapes and let's use union bullion operations. And as you can see, we have now combined shape in the liars panel and we can make it bigger so that zooming with common plus and let's go to editing mode for vectors to refine this shape. So I press return on the keyboard and as you can see, I can now a drug around some vector points. I can adjust the handles so that my icon is perfect. I need to adjust this guy and move it to the left. As you can see, I have this smart guys as well for the vector points so we can basically play around. You can select the vector points and move it with your mouth. You can also click on the vector points and use the arrows on the keyboard to adjust the position, you can adjust handles. And basically that's almost done for our I gone. And the great thing is that this combined shape is still creditable and you can edit each layer separately. Now, one more thing I'd like to access is the border properties. So I go to the right side of the border and I click on this little icon and that we can change the ants as well as joint. So let me click on this rounded joints, and now this icon looks even better. So now you have this little cute cloud icon that was made in sketch using the Boolean operations. Okay, well, those we have here, this is maybe rain or snow. Yes, snow, probably. So let's make snow and let's use an over. I'm gonna hold shift for proportions. I'm gonna draw a second over inside. I'm gonna hold space bar to adjust the position. But to be honest, it's so much better to adjust the position with the alignment options on top. So you have them on the top, right? And let's align horizontally and vertically as well. So if you selectable flares, it's very, very easy to center them using the alignment options. Right now, I can use Boolean operations and I need some tracked. And because my stacking order off layers was correct so that the overall seven, which is the layer with a smaller circle, was on top. I was able to cut out this over seven from over six. The layer that was below over seven. So now we need to change the color that select over seven. Let's select black feel color. So one last thing that we need is duplicating this layer. And basically, I told you that you can do it with command the option. You can also select the combined shape and you can move it to the right place. And afterwards you can use the option key for duplicating the layers. So I'm not releasing the left mouse button. I'm holding the option key, and now I have the duplicate so you can redo this duplicate action by simply pressing Commander D right now. And as you see, all of the shapes are now in place. I have the cloud icon as well as the snow, and I use Boolean operations to create combined shapes and its copy. So that's all for now. I see you guys later 8. Working with Shapes: in the previous lesson. We've created a cloud icon and it consists off combined shapes as well as ovals. There are shapes inside so many shapes there and if you select the layers inside combined the cloud shape You can see that when I go to an edit mode and I press return here to enter the vector points. There are many users vector points here and shape that I don't necessarily need so well, you can dio You can flatten all of this layers and I recommend you doing so before exporting to, for example, SPG file and you can go to ah layer menu and then from the baths you select flattened option. Now take a look at the combined shape structure. We have a rectangle and free ovals there. So if we select paths and then flatten and we try to access the vector points with the return on our keyboard, as you can see they were optimized and we no longer have eso money vector points but also we no longer have this eligible shapes inside. So I cannot access this rectangle or over, or I cannot change the Boolean operations inside that combined shape. So It's better to keep some kind of a backup off this combined shape before flattening. And fattening is actually the option you'd like to do at the end of your work before you export those vector lighters as, for example, as VG files for an application or website because it will perform so much better if it's optimized. But as I said, you lose this eligible options. And also, if you have previously worked with the Beatles traitor, you might be willing to flatten all of your vectors and all of your shapes in sketch. But it's no that good practicing sketch as opposed to other illustrator when you are flattening a lot, so in sketch, basically, you'd like to keep the layers auditable as long as possible, so you you'd like to keep those combined shapes. And it's very easy to work with this combined shape players. And on the other hand, some shapes just won't flatten that easily. So if you have a shape like this one, if I go to layer and I go to puffs than flatten, we get the message that we can't flat in those layers. And why did that happen? Well, that's just because those layers are just inside each other so you cannot flatten the layers when one layer is entirely containing the other layer. On the other hand, you can't do this if they don't have any matching ports at all as well. And one more operation I like to show you is going to this layer menu and going to paths and then splitting the combined shape. So if you want to reverse this operation and you want to get back to original layers, you can use this option and then you can subtract again to have this shape. There's also one more issue I like to address at this point when you try to combine shapes , especially when you try to flatten shapes. Sometimes you instead of this intended result you get something like this. So you get this overlap issue will. Those vector points just got messed up, and sometimes you simply get this issue because off the nature off vector shapes that you create in sketch. So if you try to create a shape, for example, are rectangle, I press are and I create a rectangle. Then I press returned to enter the vector points in editing mode, you have this little point that's on the top left, and it's not a coincidence that this point is selected by default. This is actually the starting point off your vector, and now you're graphic card were droves vector. From this point in some direction, it might go left, or it might go right. So to check, whether it goes left or right, you can press tab key on your keyboard and sketch. And as you see, it goes right to the next point, then top to the next point and top to the last one. And this overlapping issue is connected to the direction off where your profit is going. So sometimes sometimes you good the shapes, which are reversed so they go left to right or right to left. And if you try to combine those shapes, you get overlapping issues. So you can basically fix this issue by going toe paths and then going to reverse order option if we reverse the order off the path we've created. So let's like that option, and we go inside that shape into a dating mode with return. As you can see, I have this right point selected by default, and if I press top on the keyboard, I go left instead of going cried. So this is only a small hin. But sometimes when you have this overlapping issue, when you see that vector points are going to be messed up. After combining some layers, you simply go to layer and you reverse the order off vectors. OK, so now let's focus on this second icon and let's try to recreate this icon. You can press O on the keyboard, but you can also go to this insert menu on the top. Let and there you have all the shapes off sketch and all the tools of sketch so you can select ovals, rectangles, lines, rounded rectangles and thesis. Remember shortcuts as well. This rounded rectangle. I don't use it a lot because I always use simple rectangle. And then I said the rais use on the right. So I guess that's more convenient. Way off Doing so because you never stick toe one value off around the borders, you need to adjust it a little bit, so if you wish to copy the styles especially feel and borders between different shapes, you can draw some other shapes and let's try to copy this properties from from this shape so you can right click on the shape and then select copy styles from this menu, and you can afterwards, like both shapes with shift and right click or control. Click on the selection and just paste tights, and it works on Lee for fields and borders. As you can see, Border Radius was not copied. You can also use ah, handy keyboard shortcut. For that. You can press option comments, see, so come and see for copy, but also you press option. And while pasting que also press options, So option Command V. And if you find yourself using the same shape styles over and over, you can selected the shape and you can go to the edit menu in sketch. And here you have the option to set this time as default so it will default toe all the tools. So even if I draw over right now, I have the same border and the same field that was said US default. So now that's make this off a little bit bigger. That's have a white feel in this shape, and we're gonna create this little ship shape we have here with bullion abrasion. So we're gonna draw another of all without shift right now, So I don't know what hold proportions. And now we're going to select the shapes and choose intersect. So as you can see, we'll have this top shape using Boolean operations. Let's do another shape with Oh, and remember that you can always press the space bar to position the shape. Why? Drawing the shape eso without releasing the left mouse button. And so let's position this correctly and let's move this over four under combined shape. And as you can see, we have in this combined shape we have white feel so that it covers the layers below and now we can notch this shape so we can use one pixel increments with keyboard arrows can press down or up to move the shape by one pixel. If you want to move, my 10 picks us, you just press shift. So shift down or up arrow. And you can also natch with one off the 10th pixel increments withholding options. So option down arrow up arrow will go 0.10 point two bigs up. Okay, so what we gonna do now is we're going to press L for the line toe and we're going to create our simple line. We need to match this shape, the position it correctly and then we need to select the shape and the press commodity to duplicate this line. So we want to use the same shape, but they're going to right click on the shape and select transformation that you have. Rotations flee being course entirely or vertically. So let's flip this horizontally. And let's notch this shape the position correctly under the A spaceship. And let's use another line for the last shape. Okay, so now it's almost ready. We just need to borrow some shapes from our previous I come. I'm gonna come on d those shapes and I'm gonna imagine so that they feet under the spaceship and there you have it. So now we need to position the elements correctly, and those are basically all the operations that you need to remember. In order. Teoh create shapes in sketch also to manage the shapes and created Boolean operations. Sometimes it's so much easier and so much more satisfying to create your own icons in sketch. Instead of searching for readymade icons over the Internet. Or sometimes you just have a, Nikon said. But you don't have this one particular icon that you want to use for some case, and that's the reason why you can recreate the icons and use these shapes, bullion operations and all the stuff that I showed you in sketch. It's very, very easy now. One more thing I want to show you. I can go to this view menu and select show rulers. You can also press control, are on the keyboard to access the rulers, and you have rulers on the left and on the right. You can click on the ruler to other smart guy, but sometimes it's just easier toe over and see if the shapes are aligned properly. So this shapes inside our UFO. You can create them in between the lessons. I encourage you to do so, and that's all for now. Thank you for watching See you in the next lesson. 9. Vector Tools: in this lesson, I'm gonna show you how to use a vector toe sketch. It's very powerful toe, but it needs some practice to be mastered. So you press V on the keyboard to get to the vector toe, and now you can click wants to create your first vector point. This vector points can be straight. And, as you can see, when I create the next point, I'm going to draw a straight line. So that's create a straight line here as well. And if you want to create the curve point, you click and hold the left mouse bottom and they need drug to the left or to drive to create that handles. And as you can see, I have two handles. There's a right handle that determines the path that was really created, but I also have this left handle, and this determines the the position off the next vector points of the path that will be created by the next vector points. So let me creek and hold there, and I'm going to use handles second time. Also, take a look that the longer handles you have, the more of the care. If you create so right now, I'm going to create the next point and this puff is correct. But the next buff will go straight to the bottom of the letter, and that's why I need to change the vector points behavior. So now I have this mirror handles, and what it means is that they're on the same path and they are symmetric now so that they lay on the same line. But I can also select this connected or a symmetric and where oppressor disconnected. I can move each handle separately so I can now move the right handle so that it sets the direction for the next path. And as you see now, I can create this smooth path to the bottom off my letter. So I brought this vector point with disconnected victor handles. I need this handle to be a little bit bigger, and now I can click and hold to create the next handles. And the default behavior is that the handles are mirrored and that's basically the best one , because you can create shapes that are extremely smooth and have this beautiful lines that you can't even tell that the vector points are there. But it's often not the case, and sometimes you just need to disconnect the points or create a symmetric points. And also another pro tip is that you can hold shift while dragging those handles. And now, as you can see, you get very smooth results as well so you can drag with shift toe, hold the line, and that's that's why you generate very small Fine. So it basically needs some practice and what us you can do. You can double click on the vector point Teoh change this periods from mirror to straight, and if you go straight you don't have any care of so you don't have any handles, and you can double click again to switch back to a mirrored option. So now you can select, for example, disconnected so that you can modify the angle off one handle without modifying the angle off the 2nd 1 And you can change the position off the handles like so so that it much is the direction off the curve that we need. I'm gonna create one more vector points here, and I'm gonna close the path right now, and they can closed above by clicking on the first vector points so there you have it, and the best thing about it is that you now have a path in the layer spout, and you can always access this path by pressing return, and you can change any vector points inside. So if you decide that this vector points is no, it's perfect and you won't adjust the handles you can do so we can click on the rector Point and then you can move the handles accordingly. If you move the handles so that they're in one line, possibly you'll get the best curve. So going back to the options you have straight without any handles you have mirrored when the handles are at the same distance and the same angle from the vector points, you also have disconnected where each handle moves separately, and you have this a symmetric option when they are on the same angle. But each can be in a different distance from the vector points, and it also gives you very smooth results. You can also delete both the vector points, and you can click on the handle even one handle, and you can delete even while handled. If you press backspace on the vector points, the path is still closed and the second vector borne becomes the first. So to open the buff, you click on the vector points. You select open path, and now you can press return. Or you can just finish editing to escape without closing the path. So sometimes you need just a shape without the close path, and if you later decide that you want close this path, you can press return. Enter to access this anything, mold any concrete on the first point to close the path. You can also have the vector points to the paths. So when you hover over this path, you have this blue dot and it lets you click on the path to other vector point. And also one great deep is to hold command while hovering over this line to get the vector points directly in the middle off this line. So it's directly centered between two other vector points, and now we can match it with shift with arrows on the keyboard and position it wherever you want. You can also move this handles. As you can see, they are a symmetric by default so you can move them around and By the way, if you want to position the vector handled in the exact X and Y position, you can do so. So you have X and Y coordinates for each vector point, but also for each vector handled. So you can decide that this might be 830 for for the handle and for the point. You have different position. You can press the backspace to delete this vector points. You can select both vector points. Why home the holding shift? You can also drag and drop those like many vector points, or even use this little tool on the right to select many vector points at once. So let's go ahead and not a little bit. This vector points using the arrow keys on the keyboard and let's go to the inside off our drop cup and create some more vector points to create the inside shape off the letter A. And we gonna finish this shape. I'm going to use this connected here and going to finish this. But as you can see, there are no handles, so there's only one handle here, so I have to double click on this vector part, and now I have two handles. I can disconnect the handles, and now I can easily draw the one curve and the second curve like so, by the way, there's a handy shortcut for using straight mirror, disconnected and a symmetric. You can press 123 or four or on your keyboard to access any mode so you can press two for mirrors. And now we can select any point. You can nudge it with your mouth, and sometimes you get this smart guide that lets you position one point according to another, and sometimes it helps. Sometimes it doesn't. And so when it doesn't, when it when you want to turn it off temporarily, you can press and hold command, and now you can notch my one pixel. You won't get this smart Guides that sometimes just sometimes are annoying. Great. Let's do that with the handle. And as you can see with handle, you also have this smart guide and Teoh get rid of it. You just press and hold commands, and now you can use the stools toe freely to position your handled. So as you can see, this vector to is extremely powerful, but it's also quite difficult so you have to practice a little bit. And remember, at the pro tapes and also keyboard shortcuts that I gave you, they're very important. So you can press. Want to go straight to mirrored, free, disconnected. And for a symmetric, it's so much easier. And also when you choose any modes, for example, mirrored or a symmetric, and you move one off the handles and you decide that you want to move this handle separately from from the other one, and you want to disconnect it. You just press and hold command so you don't have to go to disconnected. It goes there automatically when you press command while moving one off the handles so you can experiment and take a look at the shift button. It doesn't always work 45 degrees, but it will be useful to create smooth shapes. And also you can set the position off the vector points as well as the handles separately. As you can see, those coordinates are always at full peak cells, but sometimes you need extreme precision, and that's why you want to set this option to don't around to nearest pizzas. I usually stick with the default surround tofu pizza edges, and it's kind of helpful when you want to export it as a bit map and you don't have very edges. But if you're creating very sophisticated icon, for example, sometimes you want to imagine so that you have this extreme precision and then you select this option. Now, let me do a thicker line on day. I'm gonna also select both off the shape. So I'm going to set a path for on and off to and click on some track Boolean operation so that I can get read off them off this shape and I can use one field to feel whole letter. We're gonna use a greenish color and let's come on minus deism out. I'm going to set background for our letter. So let's create a simple rectangle. It's use shift and option to scale proportionately and also from the center. Now I'm gonna sell like this shape, center it with a letter and use feel cooler. Let me switch to some maybe pink ish color, and, uh, one more thing I'm gonna do. I'm gonna get rid off the border, and by the way, you can just drag the border out of this panel and release it to get rid off the border. And the streak also work for feels in their shadows, gas and blurs and other things that you have below feel in this right. Call them. So our letter is ready. I encourage you to practice and, for example, to create the first letter off your name. And I see you guys in the next lesson. 10. Transforming Shapes: in this lesson, we're gonna take a look at more sophisticated shapes and also going to use the scissors tool. But first, let's take a look at the top bar off sketch. This is a toolbar. Actually, we have some tools over there, but we can customize this toolbar and we can access its options. So if you right click on whatever empty sport on the toolbar and select this customize toolbar button now you can select any iconic jeez drug it in and a drag it out side off the toolbar. So if you find yourself using cars a lot, you can just drag this colors on the toolbar. Also, you can move this dividers. This is an empty space, and you can move out the tools from, Even if they're great out, you can move them out the toolbar and get rid of them alike. So you can also get rid off the dividers. You have, ah, simple space, and you also have this flexible space that you can use to adjust the spacing between the icons. And if you just want to reset to a default icons and spacing, you can drag the default set into the toolbar. And this default said, is on the bottom, you can take the default set and just put it in the toolbar to reset it. Teoh what? It was originally when you first launch sketch, then you have an option to select. I can only or text only, or text and icons I usually use on the icons. But for this course I'm going to use I got a text so that you can discovered the names off the functions as well. And we're going to move this Caesar still here as well, because we're gonna use the scissors in this lesson. So let's switch to a drawing shape like this, and you're going to find yourself doing it very, very often, and you need to use the overall door. So that's press. Oh, and let's hold shift. Do hold proportions. But sometimes you won't do create a symmetric shape and shift. It's not enough you want to draw from directly from the center. Instead, off starting from the top left edge off the shape and drove from the center. You gonna press option while dragging so you can proceed the whole proportion. And if you want to draw from center, you press option. And of course, you can start with option and then hold shift to create a shape that is both thrown from the center and that is both proportional and is a perfect circle. Now entered. The rulers with control are you can always switch the rulers with human you as well. And sometimes when you want to create a circle like this, you are need some rulers and you need to click on the ruler to, said the guide. And this guy is exactly in the center, off our top over and right now I have horizontal ruler as well, and I can go toe over toe. I can put the course cursor directly in the middle, and I can press option while dragging to draw from the center. Sometimes you want symmetric shape like this, and it's very easy to draw it with the rulers enabled. So I press come. Control are too hide both the rulers and the guides, and if you want to get rid off the horizontal or vertical guides, you right, click or control, click on the rulers and select remove all vertical guides. You can also select on the one guide and drive, take on this guide and select remove guide. So another way is to just drag it outside off the ruler so I can do it with both horizontal and vertical guide, or I can remove all the guys that I have in my document. So now what I'm gonna do that's increased the thickness off this over, I'm gonna select six. And I'm gonna select green color for the border and that what we need is we gonna dio on another circle that will be a duplicate off the previous one. So I press commands D and I changed the color. So that is kind of matches the color off those overs on top. And now I need to get rid off some of this border off over five copy so you can press returns. This is one way of doing it. You wouldn't press return, and you can select any vector point and press backspace or delete to delete this vector point. And now you can just open the path so that you have, for example, half off this border. The second approach would be to create, for example, a rectangle or any shape that would be maybe 1/4 or 1/2 hour shape and then select both shapes and select subtract. But there's a problem eso that we have this border going on in the center. So the best way to approach this kind off exercise is to use the scissor toe scissor tools that you delete that segments between vector points. It means that if you select the over and you over with the scissor toe over any path, you can delete the path between any vector points. So in this over by default you have four vector points, so you can at least four segments and make one of the quarter off this over. But also you can add vector points and the one fives, maybe, or 1/4. Now we can go to border, and you can also change the border and so that they are rounded and this shape looks even better, is how the scissors works. But there's so much more to the stool, I can create much more sophisticated shapes and icons using the scissors. So let me create something more advanced. I'm gonna use an overall tool to create a simple WiFi icon. Let me Dragon first shape. Now I'm gonna command the duplicated and I'm gonna make many duplicates. I'm going to scale them using option key to scale from the center as well as the shift key to scale proportionately. You can also option drug and then use commodity toe have multiple shapes as well. So let's select all of the shapes and you can drug If you can't drag because you have this rectangle free in the background, you simply press shift command l to look this rectangle. And now you can select all the shapes that center the shapes use the space bar to adjust the view. And what I need is to more shapes. I'm gonna use lines. So please remember the shortcuts for line. It's l. So I'm gonna use l to do that. But I need Teoh have the exact center off my icon. So let's use the rulers and let's said the guides. I'm going to set the vertical guide and also the horizontal guide so that I have the exact center. Now let's put the cursor in the center and let's draw the first line. Maybe like this. Okay, now that's duplicate this line, so I'm gonna use Command D. And now I have the copy off the line in the layers panel so I can use the sleep here to flip it horizontally or vertically. And I earlier showed you one more way to do it, to access this right like money, and said the transformation. But the bottles are so much and more efficient. So now let's move the layers to the top. And our next challenge is to merge all off this layer. So if I select one over and two lines, I'm going to use a 1,000,000,000 Operation Off union. And as you can see, that works as expected. So I have a nice shape. And now this press command z to undo it and select all off the ovals. And now let's try union operation. And now it doesn't work. Why? It doesn't work week Because, as I told you earlier there overs, they don't have any common points. And in this case, you actually cannot use union operation because you get a result that is unacceptable for this. So I'm gonna undo it, and instead, off union, I'm gonna use different Boolean operations that sometimes you just need to experiment. Let's use the difference bullion operation. And now take a look at the combined shape. This is exactly what we want it. So we have all the lines and we have all the paths connected so that we can use the scissors to delete the segments that we don't need here. Okay, I'm gonna Cathcart caps and speed up the movie so that the WiFi icon is almost ready. So, as you can see with great in the the icon, using the bullion operations on shapes as well as using the scissors toe and now we can make this border thicker. We can change the color and access the properties around the ants off the border. And the icon is ready. So thank you for watching. And I see you in the next movie. 11. Advanced Transformations: in this lesson, I'm gonna talk about the transformation options as well as aligning items. So let's zoom into this article and let's create our first shaped will be a rectangle. Let's which do the right hand side. We have position here science, transformation and all the labels have the input fields. You can enter the input fields as well as you can press the arrows to change the position accordingly. So if you click on the input, you can now use the arrow keys on the keyboards of the up arrow key and down arrow key toe , not the values by one pixel. If you press and hold shift so we have a shift arrow you can not values by 10 increments. And also why holding option. You can have this dolt one increments. So that is how you change the values in all off the input fields. You can also over over the label off input field, so hover over. Why label. Then you creek with your left mouse button and you can drug left or right with the bottom cleat, and then you change the values off any input field in sketch. So if you want Teoh select the able field on the right, and you currently have this de selected. Just select the layer and you can use the keyboard shortcut, which is option tub. And when you press option tub, you selected the first field, which is in this case position, so you can press top again to access any other field, and you can type the numbers. You can use the arrows on the keyboard. You can also press shift tab to move out of the field so you can press tab or shift up to excess any field without even creaking with your mouths. The next option you have here is this little lock icon, and this is between the width and height labels. And as you see this, look I got allows you to log the proportions off the object. And if you said the wheat, the height will change accordingly. When you press return, the same things happen if you try to modify the width or height off the shape using the handles. So if you drag on what any of the handles, you'll see that the wheat and hide changes accordingly. And that's because we have this little lock icon that prevents you from changing the proportions off this layer. And if you don't need it, you just click on the look icon. As you see now, it's unlocked, so that means I can change the wheat and hide separately so I can change the proportion off the layer. So now you don't have to access any special transformation mode or anything like that. You just Greek on the layer, and you have the handles that you can adjust accordingly, and you can also access this rotate stool from the top, and now, if you hover outside the layer, you can see cursor changes, and you can change the radius. You can also access it from the right hand money, and you've got this rotation option here so we can type 40 degrees and it rotates, and you can also access the floater rotation toe with a common key. So when you hover over the corner and press command to temporarily enter this rotation toe and thing is when you rotate like so you can also press shift to have ah rotation with 15 degrees increments, and this is how you do it. Actually, there's one advantage to using a rotation toe instead of pressing command, because when I click on the rotational, you can access this little rotation point in the middle, and you can change the position of rotation points. So if you go outside rotation, toe and press command, you don't have this little icon. And if you go to rotate, you can change the position off the rotation origin, and now you rotate accordingly to the position off this point. So one last thing that we have in terms of transformations is the transform tool that is on the top. So it's basically quite different than standard transformation handles, and you can also access to transform with the right click menu. And I shall give this people resentful and vertical options. But you have a rotation here, as well as transform that we can access from there or from the icon on the top. So let's go to the transform mode and this mode. Let's you change the position off each of the points. As you see, the points are now rounded and you can make some pseudo Freedy transformations 2.5 the transformation so you can skew the object. You can transform it in a different way, so that is transformation. Now I'd like to show you some other option to change the layers wheat and tied, and this is using the keyboard so you can change any layer and you simply press option command and then you not with the arrows so you can press left arrow to make the wheat smaller by one pixel or the right arrow to make bigger by one pixel. You can also impressed shift command, left or right arrow to have 10 pixel increments. And these shortcuts. It comes very handy. For example, when you have many objects and it's quite difficult to select individual layer on your article, you can select the layer from the layers least, and then you can use the shortcuts toe. Adjust the height or wheat or to adjust the position. Now this kale toe. It's one of my favorite tools in sketch because it lets you scale any object, air or group or a set off layers, and instead off this traditional scaling, which doesn't scale, for example, and border so you can see that if I scaled even with option and shift the whole proportion and scale from center at the thickness off the border is still 15 pixels, and actually, all of the effects you have here so borders in their shadows. Ghassan blurs, and also shadows will stay the same. So if I other shadow and you have some shallow values over there. So I have this Blair, for example, that is four pixels, and if I try to scale the layer, it always stays for pixel. At this behavior, you probably don't want it for, I don't know 80% of your time, because you want to scale your icons with all the effects. It has so scared. The borders scale the shadows. Let's get rid of the shadow. And let's maybe focus on this border property, which is 15% think so. When they skated up, it doesn't change. But if I access the scale tool and this is probably one of the most important keyboard shortcuts, that's command K, so you can now resize the layer and you can give proper value in percent so I can skate it 50%. I can also give exact piece of values for width and height as well, but usually I use percentage and take a look at the border now, so it was 15 and now it is 7.5 pizzas. So it works also for the borders and this little scale function. You'll use it all the time. It's especially useful when you, for example, import some icons into sketch and you want to scared the borders proportionally toe the icons I used all the time, really, So you can also preview the values and you can scare from the centre left over bottom so he can choose any scaling position. And it's super super useful. So the good news is, that's probably all you have to know about scaling and transformation in sketch. So let me accept this changes and resize this layer and move to the next lesson. I see you guys there. 12. Aligning Elements: hello and welcome in the next lesson in which I'm going to show you very simple yet very powerful features off sketch, which are alignment options. So we have the diamond options on the top right corner off the interface, and you can use them for aligning groups, layers, art boards. You simply select anything, and as you see some off the alignment, options are now available. So I've selected this planet group and there is a little frame new de alignment options, and that means that you will align according to an art world. So if you have one element selected and it's not within a group, you can align according to this spy space icons. Copy, too, are about. So let me ally in this to the left, to the right to the top bottom, and you can also send their vertically and horizontally in the article. So it's very easy, and you can also aligned using those smart guys. As you see, if I go to the center, I have vertical guide as well as horizontal guide that will let me put it directly in the centre off the article, and if by any chance, you want to position it. I don't know, maybe knew the center, but not in the center. And you want to skip a snapping. You hold command while drag, and that's it. Okay, let's switch to some other art boards I have. So now I have some groups. I have four icons, and if you have more than one element on the art about, as you can see, you have more smile, guys. So you have smart guides for the art board appearing in the centre body also have smart guides for the edges off each group that we have here, and also we can disable the smart guys while dragging. You just need to press and hold the command bottom on the keyboard. But those smart guys that can become very useful, especially when you want to position the groups within each other and when you want to march the margins between different layers or different groups. So, as you see, I've got the measures now, and if I go close to 91 I have snapping and it lets me position their group correctly so you can also measure those distances between different layers and different groups. By pressing the option bottom. So the first use case is when you present hold option key and you hover over this selected group. Now you have measured the distances between the edges off the art abort. What you can do is you can also hover over the next layer or a group, and now you've measured the distance between this group and the second group. So you can easily measure different distances between the art boards or between the liars themselves or group themselves. So remember that keyboard shortcut and next thing I like to show you is aligning those icons with a nine options. So let's select all the items. So let's elect all the groups. And now, as you can see, we have all options available here because we have multiple objects so that we can distribute the spacing as well. So now if you select any off the aligning options, it's not positioning within the cardboard. It's positioning between those objects, So if I left aligned them as you can see, they aligned to the very left edge off the first group, and now I can center them in the art. But like so, and if I want Teoh distribute within the art, but I need to have a different group for all those objects. So I press Commander G while having those objects selected to create another group. And now I have only this group selected. And in the Align panel, I've got this little borders next to the obnoxious. So that means that I will work now with the whole group and position it within the art bolt . So let's press command shift, G toe on group the elements. And now I have more than one element selected, so the airline options are different. So let's switch to this first our board. And as you can see, there are many groups and each group is a different icon. So let me select the first row off icons eso 1st 7 icons and I'm going to use alignment does to properly in the align those icons. So now let's use this first aligned vertically option. Teoh have them in one line, and then I need to distribute the margins between the icon. So I'm gonna click on distribute horizontally, and that's catch is saying that basically it cannot move it to their full peaks us. And it asks if I want to move them to sub peaks us some pics of positions on the X axis, or do I want to distribute them evenly? And to be honest, I just don't mind to distribute them evenly because you won't even notice the difference. While you have all the icons on the full picks us on the peaks are great, which is quite important. So I click on distribute on even the option. And there we go. We have even distribution of those icons, even margins between the groups. So even if there are negative, you can do it like so And now what I'm gonna do, I'm going to select the one last icon because I want Teoh distribute the I cough so that they feel the entire space off the our board. So I'm going to select the last icon. I'm going to present hold shift to maintain the line. And now I'm going to select all the icons while this icon lists to the right and again I'm gonna distribute unevenly so that I have the first row off the icons and now I can ah group this icon. So I press command G to group them. Now I press control are for the rulers and I said the guide so that I have the guides to the left and to the right off my icons on. Let me take the next icons of the first in the next row and said it here. And I'm gonna also position this last icon in this second throw. And as you see, it's so much better to position it optically then mathematically. So I'm gonna Nagy it with right arrow on the keyboard. And now it's perfect. I'm going to select over the icons and before grouping I need to set the distribution like So now I can group those icons so I press. Come on, G and I can take the other icons and do the same for the federal. We need Teoh not just a little bit with the keyboard. I'm going to select all the layers with the shift key on the keyboard and distribute the spacing, so position them in the vertical axis as well as distribute the markings between the icons . So what I need to do right now is to said the last row off icons, I'm going to select them all and distribute the spacing as well as the position. Now I can command the G, I said the next group and this federal also needs to be a group off icons. Now, if I have all those groups, I can select the groups, and now I can work with the groups to distribute the spacing vertically. So let me click on this icon I'm going to use unevenly and I have all the icons to speak and span incorrect positions. So we've never used the text tool, But it's quite easy. I'm gonna sell like the tea on the keyboard and just draw a simple text field. I'm gonna say space icons as a title off my art board, and we're going to talk a lot more about text properties later. Right now, as you can see, we have this long text frame and we can align the text within this text friend. So the great keyboard shortcuts are shift command plus right or left square brackets key to align them to the left or to the right. Or you can use common shift back Slash to align it to the center. So you have all the time and options for the groups for the text, and also you can access the same alignment options in the arrange menu. You can select a line objects option, and you have every icon that is in this panel marked to the menu. And that's quite important because now I'd like to show you how to create your own keyboard shortcuts for sketch, and you can apply keyboard shortcuts to any item that appears in the sketch menu. So if we have alignment options we have, we can go straight to system preferences and from preferences. We go to keyboard and there is a shortcut stub. So from the shortcut stop, you go toe up shortcuts, and now you can add new shortcuts. You select the application, and that's basically sketch. So that's press as on the keyboard and select the scheduled up. And now we have to rewrite the menu title. So we have to put their exactly world. Is that what is the name of the function in the menu? So let's make sure we know the correct name. So let's go to arrange line objects, and we have horizontally as well as vertical. So let's set both short cuts. Both options. And let's like both options Toe said the shortcuts in the preferences. So I'm gonna put horizontally as a first short God and in the keyboard shortcut, you just pulled the shortcut you wanna use. So I'm gonna put coma and left bracket. I'm going. Come on, Left bracket for centering horizontally. And of course, you can use whatever shortcut you wish you can. For example, use Come on, four for horizontal and command five for vertical alignment. And I'm gonna put vertical here, so it needs to be a correct spelling. It needs to be spelled the same as in a sketch. And I'm gonna press command right bracket. And after this short cut, So now I can close the preferences and I don't even have to restart sketch application. I can easily use this comment left bracket dried bracket to said proper distribution and let me do it on the the other art aboard and usual, A scenario is that you use any two shapes, so I'm gonna pace there an icon and I have these two shapes and I want to center this icon inside off the rectangle. So I shift select both group and the ICOM, and now I can use the alignment options to do that. But instead of alignment options, I can now use my shortcut. So let's like both players and press command left bracket and command right bracket to center the icon horizontally and vertically. And also, if you are using the newest versions of Sketch, there's a nice Adam to this. Let me paste, maybe free or for alien icons, and you can now select those objects, whether those are layers or groups, and what you can do is quick on this little tidy battle. It will tidy them up like so, and also you can no hover over the markings between those elements, and you can see little icons that will indicate that you can click and change the markings whatsoever like this. And this is pretty cool so you can do this for vertical alignment. You can do this for horizontal alignment like this, and this is getting pretty smart if you select multiple elements at once. So you can like this, and it even knows that you have to rose in there. You don't even have to have another group. It's intelligent enough to tell. So that's basically it. This is the tidy bottom and also the smart alignments. Also, in the newest versions of Sketch, they've improved snapping a lot and those smart guides that will let you distribute items next to one another just a little bit better. But this doesn't need a showcase. So basically, that's it. In this lesson, I see you in the next one. 13. Resizing options in Sketch: Hey there before I begin this lesson. Just a quick disclaimer. This is the newest version off sketch and re sizing options that I'm going to talk about change slightly in the layout. Basically, it's the same. So Pinto is the same and fixed size. You had two bottles, one for this access and one for that one. Now it's one S O. That's basically it. I'm not gonna re record this lesson, so enjoy the rest of it in the older layout, but still the same invest. Listen, we're gonna talk about re sizing options in sketch. So basically everything you create in sketch, whether it's assembled group or a layer you can access, it's resizing options on the right. And you have different Resize Inc options, which are responsible for how this object will scale within its parent and actually for the over and for rectangle. Its parent is this group for the group. Its parent is the art board. But let's focus on the group right now, and let's focus on the properties off, re sizing for over and rectangle. So if we select this group and we try to changed my mentions off the group as a general note, you should remember that everything scales in percentage. So if we try to scale the group sweet as you see the over sweet scales accordingly. So if you have 50% off the group sweet, you have 50% off the oval. Sweet. And if you have 50% off the group's height, you have also 50% off the oversight. So that is why this over is being deformed right now. But when you try to change the default to re sizing options, so when we set some of these are Very Size Inc options, we can, for example, decide that this over will be, I don't know, maybe paeans to the top right corner. So let's try to move it to the top right corner first. And afterwards I'm gonna use this default exercising options, and we're going to focus on this little handles. So within this handles, we can set the alignment to peen any element to the top left, right, or to the bottom. So if I want toe be into the top right, I select both Hello, stop and right. And now, as you see, the oval is being scaled. So it changes accordingly to the percentage off the group. But it's also pins toe the top and beans to the right, so the margin between the top and right is fixed. So a part of this functions. I also can fix the width and height off my objects. So I'm gonna click, fix wheat and we fix tight within the over. Now I'm going to select the group so its parent and I'm going to scare the group. And as you see, the overall is not scaling. And in addition, it is also pinned to the top and right border so that the markings always stay the same. So we have the fixed margins, OK, and now let's imagine some other situations. So maybe you want to put the object in the direct center off its parent. So now the over is in center of the group. But when we try to scare the group, as you can see doesn't stay in the center. And why is it happening off course? It's happening because we set Resize Inc options and we pulled this option and we decided that it has to be pinned to the right, and if it's been to the right. It always has the same Margon toe the right border off its parents. So what we have to do, we have to lead those pins. So we have to amp in it, especially from the right. So now we have fixed wheat and fix hide and we don't set any options here in resizing We can't actually said the left and right meaning because it would stretch the object. And we have the fixed wheat and hide set. So it's impossible. So we leave it empty and we select the group. Let's try to resize the group right now. And as you can see, this over remains in the center. So basically, sketch takes care off this object being still in the centre. Why re sizing so we can put it in the center both vertically and horizontally and try Now you can resize and you can have this object in the exact center off its parent. While still the resizing options are turned off and fix wheat and fix height are turned on . So this is how you do it. Okay, so now that switch to some other example and I'm going to draw our rectangle here suppress our I'm gonna draw a rectangle right click and copy STAIs from the over to the rectangle. Remember, you also have this shortcut, which is common shift See and Contrave. Now I'm gonna hide the over and I'm going to switch to my group. And I tried to resize department as you can see, the object three sizes and also the left and the right Margon every sizes as well. So if you want to Margon fixed, you can set the reciting option so that you can pin it to the left and pin it to the right . You obviously can't said the fix with with that option. But now when you try to recite the group, you have beautifully scaled object with fixed margins from the left and from the right. So now what we can do is we can stretch this object so that it it is not only pain, but it also touches the edges off our group. And now if you try to resize a group, you have ah, very nice behavior, which is like, I don't know, maybe fixed footer or the menu in your mobile application And one more thing that we can ask for this to be perfect. We competed to the bottom, and we can also said the heights to be fixed so the height doesn't change with the height off the pirate. And now you have ah, nicely designed component that you can use, for example, in different screen sizes. And one more thing I like to show is that you can turn off the fix height, and you can actually pin this object to each corner off this group so to each side of its parent. And to do so, you have to click in the center off this icon. So if you creek in the center, you can know scale, and there you have it. There's the effect Were you have rectangle that is paint to both left, right, bottom and stop and why isn't behaving like this. So let's switch for a second to this mode that I had. So let's hump in it from the top that's tried to resize. Now it's zero margin from the left, zero from the bottom and zero from the right. But when you bean it to top as well, you have the fixed marking from on top. So we have the marking off about, I don't know, maybe 500 pixels from the top. And that's why this shape behaves like this. So now all the text is experimenting. So a police try to experiment a little bit with the resizing options and try to, for example, set this guy to be paeans to the top, to the bottom and to the right. So now, obviously, the fixed height is not available. That's because it's beans to the top to the bottom so that it stretches with the container . So you obviously can't have the fix height, and maybe you can have the fixed wheat and let's select the fix sweet for now. And let's try to scale this group. So let's scare the parent. And as you see, it's now 18th. But it doesn't changes its wheat. And if you turn this function off, so turn off the fixed wheat, you have the variable weeds, and the with will change accordingly to the percentage change off its parent. So it's quite easy against. So the last thing that I like to show you is how the contents of the art boards can resize with the art boards within the Army. So, as you can see with the new schedule is and you are able to my news so you can switch through material design, it can switch to Responsive and, for example, apple devices, and you can select the our boat. So it's pretty similar to what I showed you. And now you can decide that this our boat should be different size, so weaken. You can access the art about and you can click on the iPhone Sevens name, and you can choose the different size of the artwork. So it's pretty similar, and right now you have this additional option here, which is a just content on the recites. So here it is. Let's not turn it on for now. And let's create a simple shade shape inside of this art board. So I'm gonna drawing over, and I'm gonna put it in the center off the our boat. And now, when I tried to resize the art board, As you can see, the overall stays in place so it doesn't change its position. But if I said the adjust content on precise option and said, select the our boat and now try to resize this art board so they could look at this over what will happen. And now we have this default behavior. So we have this behavior where percentage off the objects dimensions equals to the percentage off the articles. A masses now that stand dysfunction off, adjust continent resize and let's like the oval. Take a look at the structure. So at the art aboard is exact parent off the oval right now. And if I said the fix wheat or excite or change anything in the Resize Inc options, please note that the adjust content on precise option turns on automatically. So now at least you won't be surprised, and they can look at this art board now. It re sizes, but the oval stays the same because it's got fixed height and fixed with that, we said, emphasizing options. And also the Archbold is direct parent off this over. So all of this re sizing options are quite important, but also their optional. So you don't have to set the Resize Inc option at first, and you can deal with them later. But to be honest, it's best to have a habit to set the resizing options while you're creating some elements, especially if you're creating, for example, mobile First website that you are going to responsibly a port into some other resolutions for a tablet and, for example, for desktop. So if you work with the resizing options while creating governments, it will be so much easier to create different responsive versions off your interface. So that's all for now. Thank you for watching and see you in the next video. 14. Using Masks: in this lesson, we're gonna talk about masks at mosques are very popular and very powerful technique in the sketch, so we can use mask to hide or reveal some parts of the images. You can also use them for shape. So basically, you can use must on almost anything in sketch. So layers, groups, shapes, images. But the most common approach is to use the simple shape to mosque part of the image. So we're gonna do this on this art board, and I'm gonna select a rectangle toe and draw a rectangle for the first photo. I'm gonna have free photos. So I need one more rectangle and this guy I'm gonna duplicate. So command d will hold shift, Teoh. Put it there, and I'm gonna shift click to select both rectangles and change this side. So now I have three placeholders and I want to use the images inside this place holders. So I have Paksas dot com where you can find photos. I also have some follows from pixels in finder. And if you want to use an image in sketch, you simply select the image and drag and drop it into your art bolt and that you have this pixel photo and I can now with common select second layer, which is rectangle, and this rectangle will mask this photo. So I go to this mosque bottle on top and I click mosque. And there you have group. And inside this group, you have further with us Little arrow. And this arrow means that this photo is actually being masked by the layer that's underneath, and basically the initial layer order doesn't defend to make a difference. So if I have this pack cells photo under direct angle and now I saw that go shapes and shape in the photo sketches smart enough to mask the photo with the rectangle. So there you have a group, and inside the group you have two layers, and you can edit those layers separately. So meaning that you can go to the mosque and go to the photo. You can adjust the settings of both mosque and photo to reveal or hide some arias off this photo. So the next photo I'm gonna use here, I'm gonna drag and drop. And as you see, I have the second layer in the same group so that I can have two layers being mosque with one shape. And as you see this little arrow, that means that this is actually being mosque. Now. I can right click and select. Ignore underlying mask for this image. No to be included in the masking procedures. OK, so that's how you create a mosque. And that's how you decide whether you want to use the mosque for this group contents or not . So now let's move some images and I'm going to close this group and I'm going to move another photo. And this time I'm going to use Father from back cells and you can drag and drop for those directly from the browser onto yours. Catch windows. So I'm going to drag and drop from the browser to sketch. And as you see, I have this layer. I had specs, this photo as well, so I can come and click to select the layers. And now I can use mosque, and instead off using this battle, I'm gonna press control command M, which is the shortcut for mosque. And as you can see, I have the mosque now. The 11 difference between the bottle and the keyboard shortcut is that Now I have to ignore underlying mask on this rectangle to copy, because the shortcut doesn't create group automatically. So if you click on the mosque but on you have a group, and if you use the shortcut, you won't have a group. So let's find some other father and on pixels, you can find plenty for off great photos and resource is that you can use in your project. I'm going to use this photo for the last mosque, and I'm going to select the both photo and rectangle to copy with Command on the keyboard. And now I'm gonna use command, control em to use it as a mosque. So that way I've got free masks for my photos. But the 1st 1 was created with the mosque battle, and two other ones were created with the keyboard shortcut. And difference is that, for example, if I create any other shape right now, so I press are and create a rectangle. As you can see, I have this rectangle being mosque by the last mask I used. That's because the keyboard shortcut didn't create a group for those layers, so you have to like the groups like the layers and create a group with command G. So I press. Come on, g. And now I have a group for and those two layers. And now we have the group's for all the free must that we've created. Now I'm going to show you some other technique because this was a simple mosque, and we can also create our farm mosques in sketch. And let's use some other photo I'm gonna position in right there. I'm gonna drawn over. This will be my avatar photo. So I'm going to press and hold space bar to position this over. And now let's use the mask. So I shift click on the photos to select both layers, and I use mosque to create it. So it's very, very easy. And remember that it's always known destructive, so I can always go back. I can adjust the photo, adjust the size of the mosque, and I can also revealed some some more. My photo. So the mosque is basically a simple shape with yellow feel. It doesn't really matter, but the opacity is 100. If you go to ah, layer and mosque mold. This is an outline mosque, and you can also switch to an hour from us. And now, as you can see, you can't see the layer, the masking player. But you still have this masking behavior at as previously. But what you can do right now is you can select the mosque and you can change the field. You can change, actually change the fuel capacity, which is there. And if you change the fuel capacity, you also change the opacity off the object. And obviously you can select the group. Or you can select the photo and change the opacity of the photo. But having enough a mosque enables you to use, for example, Grady INTs too, have this beautiful, smooth transition in the mosque. So I'm gonna create Grady int and let's make a radio, Grady, and I'm gonna talk more about radiance later. But right now let's change the position and the changes the size of this radiant, as you can see that there is a black color here. And if I change the opacity of this black color, as you can see, the white color reviews things and the black colors hide some off this layer because it's alpha was adjusted. So that's working only with Alfa Mosque. So if I go to mask, mold and switch to out like mosque, As you can see, we have a Grady int on this. Grady in is slowly fading out because I change the opacity off this one color. So off this black color and without her mask, you can use the opacity to manipulate the opacity off awards being masked by this layer. So let's change this mold again. I'm gonna use off a mosque mode and there you have it. So sometimes you might be willing to use the Alpha mosques to achieve this kind of results . OK, so as you can see, mosques are very powerful. Feature off sketch and you'll find yourself using them over and over England projects. But sometimes you just don't need mosques. You simply want to feel some layer, feel some shape with an image. And this is another technique that I want to show in this lesson. So instead of having a mosque, I'm gonna draw ah, simple shape. So let's switch this feat hardboard. And now we're going to draw are simple rectangle. I'm gonna press, are and draw rectangle that feels this card and I'm gonna use instead of masking, I'm gonna use feels. So I'm gonna click on field and there you have this little image icon so you can feel this layer with an image. You can choose the image from your hard drive, but you can also simply drag and drop the image onto your shape so you can use finder or a website to select the image dragging and dropping over there over this chalkboard. And there you have the image that feels your shape and you can create even more sophisticated and complicated shapes and feel them with the images. And now we have this field option enabled. So that means when you scale the shape and the image will scale with the shape and it won't change its proportions, but it will scale to feel the whole shapes of sometimes you have parts of the photo hidden , but it will always feel the whole shapewear. When you select feet option, it will resize so that always you will see the whole image. And if the image is not the same proportions as a shape, you have this markets. The third option is stretched and when you use stretching, probably lose the proportions of the photo, but you can see the whole photo and it feels thes shape. So the last one is tiled. And when you use style, you can also change this highs of the photo like so. And as you can see, we are generating some kind of, ah pattern here and yeah, that's how it works. So basically you'll use feel almost all the time because it feels perfectly to the shape that you have, and it also scales seamlessly to different resolutions. One more think left to show you. Let's go to the pixels sites, and you can use the browser and directly from the browser you can drag and drop the image toe this very same field in the field menu so that you have for this image feeling their layers so you can use the browser you can use. Find there with your photos to attach those for those, and to have them masked by the shape and also you know how toe use the mosque function in sketch. So I see you guys in the next movie 15. Exporting Assets: welcome. In the next lesson in this lesson, we're gonna focus on exporting image assets from sketch. We're gonna export vector graphics as well as big mob graphics. So as you can see, we have the groups. We have images inside. We have Victor things. We have our boards, so everything can be make exportable with this little icon on the bottom. So if you click on the plus sign and you have selected art board there you have the art board, which is made exportable, and you can even shift click on the art boards to see them in the export panel. Make them exportable as well. And as you can see, we're gonna export free different graphics. You can include or exclude the background off the art boards in export, and you can also, to some options. So first you have this size and the one X basically means that he will export in the same size the same resolution that you have sketched. So in this case, we're gonna export in 7 50 by 13 34 pixels because it's one X. We also have her prefix and suffix here and by default. The name off here if I will be the name off the layer or the edible, but you can have something at the beginning or at the end, and he also have the form of the defaults to PNG. If you click on this little icon, you can apply a slice preset. It means that you can use a preset, for example, for Android or for IOS. And if you select IOS, I have scales for IOS. So 12 and free X and the according to this scarce. I have the South Texas and let's export defiance now and I'm going to show you finder. As you can see, those images are being generated, and I have free fires for each article. So let me on go to this view options and let's show item info so that you can see the sizes . So one size is this native one X. The 2nd 1 is the twice its size and the Fred one it's three times its size. So why do we even need so many images for IOS? Well, this is connected to the display and to the pixel density in the routine of this place, which is very, very high, so you have plenty off pixels in the display, which makes it extremely sharp. But on the other hand you have your device, which is really small, so it's like maybe four or five inches for a display in the phone. So if you serve an image that this one X for user, it would be very, very small on this device. So that is why we need better resolution images for different devices. And if you see this material io Device metrics website, you can see different devices, for example, iPhones and in the cold on the right, you have densities, and that is basically the scale factor. So iPhone four has the scale factor off to iPhone six plus has the scale factor off free, and that means that we have to deliver images that will be free times bigger than the scale off one X And for android, it goes wild and crazy because you have scarce after four. But let's forget about it because sketch takes care off all of the sizes. So the only one decision you have to make is decide the initial size off your art, bored and decided initial scale. If you go to the article tour. You have older sizes in one X scale, and I suggest you work always at one X. That's because you can then export to one x two x or free X. And if you start, for example from two eggs, you have to export to I don't know, 1.5, then half so it won't work that way. I guess that the best decision you can make is to start with this one X scale, but also one potential disadvantage of that could be that later have to export the assets at after free or four times bigger. So it doesn't really matter if you use the native schedule, such as tax or effective tools, because they will scale seamlessly. But if you use images, remember to import to sketch high quality assets, because otherwise, if you create in one extent exporting 300% you will see that the images will be blurry. But if you import to sketch the image that has a native resolutions off, for example, I don't know for OK or five K, then you scale it down and then you export. He will have perfect resolution because sketch always carries this native resolution, and when you export, it looks at native resolution and that it exports at its best quality. So you soon discover that thinking about all those different scale factors and resolutions comes to a beaten up because in a case off vectors, you'll always have the perfect scale of a vector. And you don't even have to export the PNG files, which are, of course, beaten up images. So now that's X, those extra resolutions. And let's focus on the four months. So if I click on the former name, I have different 54 months that I can choose from and on the top you have beaten up 54 months, and on the bottom, you have free vector four months. That's pdf EBS and SVG. So the general rule is to use vectors as much as possible. So if you create anything within sketch and you use native schedules, you always create vectors. And this way you never have to worry about the resolution, and you always exported factor assets as well. But you know, cameras don't yet take photos in Vector, so you always have beat maps as far as photos are concerned, so you have to export the beaten up, and then you export PNG or Jay Peak fire. So J. Beck is slightly better for exporting for weapons devices because in J back four months you can select the quality. So if I select Jay Picked and I select export, you can adjust the quality slider so that you have a smaller file size and this file will load faster. But if you have transparency in your file, you have to select P and G because only BNG format has this full funding to be transparency . So there you have to four months. You always use P and G or J pick for your files as long as you are dealing with beat maps. So the second thing is vectors, and you always try to have as Marge directors as possible in sketch. So always use this native schedules or import from illustrator or other application that export vectors. So then you use PDF for IOS devices because in X cold, you can use PdF as a vector four months for other applications. And for Web layouts, you always use SPG files, and the last four months, the last vector format is E. P s and you use E. B s Onley in case that you want to later added this five that you are exporting from sketch in other applications such as Coral illustrator or maybe father shop. So then you can export GPS and it's quite universal four months that you can open in any application. So I'm going to select SPG. And as you can see, we no longer have to deal with this scale because as B j is vector, so it will scale seamlessly to any resolution. And that's so much easier to have vectors. So please take care off this assets so that they are high quality and export as many factors as possible. So now, as you can see, I can export, for example, a group and about our group. And when I go back to this avatar group, I have this little knife icon next to the folder. So all those export settings are remembered in sketch, and you don't have to do it over and over. When you get back to an asset that previously had some exports setting, they will remain the same if you have many assets that are set to being exportable in sketch. You can go to this fire export menu, and you can see all off the assets, so the previous option that you export individual assets. While this one can export all the assets that are set to be exportable and you have scales , you have also the 54 months here you can select or de select the acid that you wish, or you don't want to include in your export, and you can click export to export all off the image from this one sketch fight. So this way you can select an export layers groups or art boards. What if you want to export something that's not a layer group or inaudible? You go to the insert toe and you select this lifestyle, which is as on the keyboard, and not weaken ho over over some layers. You have this blue lines that allow you to just creek and have the and the slice settings the same as object under this selection, but basically you can also take a slice toe and create a selection by dragging. So now I have a selection off, not necessarily a layer or group, and it will export accordingly. So I can said the export options, skating and stuff. And in the layers panel you have this as a separate thing. So this is not a group or a layer. This is just a slice that you can adjust later so we can change the size of this slice. Or you can, for example, move it elsewhere, and it sort of takes a screenshot off what you select so you can see this preview on the right, and you can select many things with this slice and slice appears in the layers panel. So that means that you can change the name of the slides you can. They need. The slice could reorganize it, and it's pretty useful. But sometimes you have many slices in your project, and you can't select any layer that's underneath so you can look this nice. You can make it invisible, but you can also use this little function that will hide all the slices. So I have 47 slices here, and by clicking on this little knife icon, I can hide them all. And if I'm ready to export, I can reveal them by clicking on this icon again. So right now, when you press command Shift E, which is a short cut for this export slices window, you can access this newly created slice as well. So now I'm going to show you one more bonus protein that you can use to export assets directly from sketch and put them, for example, to find the window or, for example, to your desktop. You can easily select anything, such as a group or a layer, and then you go to the layers panel and you simply drag it out there and you put it into finder and your file is now exported. So what's in this group is being saved as a PNG file. You can also do it with an art board so you can easily drag and drop things around. And if you quickly need to use some PNG five from your layers from sketch, you can do it like so you don't have to export. And it gets even better because if you use slack, for example, you can select anything from the valuer spinal, and you can drag and drop it into slog. And then you have this asset exported and it's uploaded to your slack account and, for example, sent to your teammate. And wait. Because there is more. You can also select those exported assets to be sent, for example, to Facebook or directly with an email as an attachment with this little share icon. So you click on this share icon and you have all the applications on your mark that supports training, for example, male up Facebook, flicker or Twitter. So this is how it works. You can now easily export assets from sketch and save them to different formats. I see the next lesson. 16. Mathmatical Operations: here we are in the next lesson, and as the years we can use mathematical operations in each input field in sketch. And this is actually huge, because if you select any layer, you can go with option top to the first position able field. And in every input field you can use operations such as, for example, dividing or adding or multiplying. Or you can also subtract. So let's add 45 let's subtract and extra to pieces. And there you have. You have 48 pixels, you can divide by two, and you have 24. You can also, for example, multiply by the result off the operation off for minus two, and there you have it 48 again so we can press tab to go to the next input field Oregon Press Shift tab to go to the previous input field, and we can use the keyboard Teoh conduct this mathematical operations. As you might suspect. It goes even further because in this wheat import feels, what we can do is if we have this 563 pixels, we can take that down and you can say, for example, 10% please and there you have it. So it's about 55 pixels. It's 10% of this value. Now, if we add something subtract, you can see that the wheat and the Hyde field changes accordingly because the little lock icon is turned on. So now if I slide, if I change the size this small image goes in proportions as far as we can hide is concerned. So now what I'm gonna do is actually I'm going to show you a smart way to scale any layer from one side. So we're gonna put 500 there. And if I put 500 I want to, for example, out of this 500 make 600 so make it that 100 pixels larger, I can actually tell sketch to scale it from the one side so I can scale from the left side , and that way it's gonna put this 100 extra pixels to the right off my image. So when I press return, there you have it, 100 pixels to the right, and I can go back to 500 then put 600 put are to the end of this input field and right Now I'm gonna escape from right, So that means it's going to add 100 pixels to the left. And as you might expect, you can use it in height as well. So in height left and right, it doesn't really make sense. But you can use top and bottom, so I'm gonna say free 50. And now I'm gonna expand by 100 pixels and I'm going to add T at the end, so T means top. So that's why I'm going to scare from the top. So I'm adding this 100 pixels to the bottom and to the opposite. I can also scale to the bottom. So I'm starting from the bottom and I'm going to add 100 pixels to the top, and this is how it works. You can put left, right, top or bottom at the end of the input fields to escape from each side. So let's switch to some other input field may be transformed there. We have degrees, but it really doesn't matter. If you put past 10 it will make 10 degrees rotation, so that's about it. So that's how you can conduct mathematical operations in input fields off sketch right now , I'm gonna show you next steep. So last lesson was about exporting images. So let's now go to, for example, our logo. Let's select the logo and make that exportable. And as you know, you can select scares here so I can select one again. For example, put 1.4 to have 140% scale. I have now 160%. But also, I can say 100 pixels, for example. And now, when I export this logo, take a look at the file and I'm gonna press command I to see the properties and Info panel . You can see that the week off this logo is now 100 pixels and the height is set accordingly to the proportions off this image, so it will never, never lose proportions. But you can set it to any exercise you wish. And right now we're gonna have 500 pixels. So when I checked the info panel, we're gonna have 500 pixels wide and 500 pixels 5 48 pixels high so that it holds the proportions. And that's not good. Because instead of pixels, you can use letters. For example, you can put the letter W for wheat order their age for height. So if I said it to be free 100 height, it will be no higher than 300 pixels. So let's export it as local, too, and you can see that it's still in proportions. It has 300 pixels height and accordingly, 274 speaks us. Wait, so you don't need to match the need to gas this second number. You simply said one resolution, for example, 300 pixels wide. And let's give it a name off the little free. And we always have this proportionally scaled height in this in this fight. So this is needs to remember those letters, w and age, and also remember the letters for left, right, top or bottom next, and the last deep in this lesson is setting the border radios for your shape so we can set the radios here and let's select the rectangle and let's change the border radius. As you can see this border radios, whatever value is, it changes for all the corners. So what if we want to change the values separately for each corner? We can do it in this input field. We start from the top left corner and then we go clockwise. So first value is for the top left corner. And I put zero that as a separator, use semicolons. And then you put 20 pixels for toe pride. Zero pixels for bottom, right and 20 pixels for bottom left and you press return. There you have a different radius for each off the corners. OK, that's it. For now, let's switch to the next lesson. 17. Pixel Grid: as I mentioned in one of the previous lessons. Sketch is a vector environment. It means that everything that you create within sketch with this native tools is a vector. So if you select the icon and press commands K to scale it to, for example, 48 about 48 comment to zoom in and I have 1000 zoom ever, I can zoom in even more to, for example, 13,000. And as you can see, everything is extremely crisp and clear, and this is the beauty of vectors. However, sometimes you have to export those vector assets as a PNG file or as a J pic file. So, for example, a developer request is that you deliver PNG fires and you have to exports. Beat him up. In this case, you'll have to think about something that's go peaks agreed, and basically big. So great is property off your display, and as you know, you have a big so that city in your monitor as well as the resolution. So if you have a full HD display, you have 1920 pixels white, and you have 10 80 beaks us high. So this creates agreed and When you go to the view settings in a sketch and you enter canvas, you can enable show pics of read option, and the keyboard shortcut is control X. So now you can see individual picks us on degreed at my Iconix 48 by 48. And if you take a look at the coordinates off this rectangle, the X and Y position are actually on full picks. Us. So now what will happen if I imagine this rectangle and I put it on some decimal values? So I have this Position X and why with this more values at the end, and it means that it's not in the force for peaks us. Now. If I go to view and show weak cells, I can emulate how this would work and how this would look on the peaks. Agreed on the monitor while exported as a beaten up. So if you look closely, you can see that those edges are actually blurry now, and that is because those edges are not on the full weeks of values. So to change that we can go toe position properties again, and we can delete everything after a coma. So I have now horizontal values that are perfect, and also I need vertical values perfect as well. And as you can seek, those blurry edges disappeared, and now the rectangle is perfectly aligned within the pixel. Agreed. So as a take away, please remember that it's best to keep the peaks of values around it to full peaks us all the time so that you can ensure that the monitor displays them correctly. Now let's press command coma again and let's go to sketch preferences. And in General section, you have this pixel feeding option, and you can feed layers and points to pixel bounds when resizing players, and also when aligning players. So I strongly recommend you select both of this options. And now, if you use a line options toe incorrectly, positions, layers as well as you move the layer around, you always snap two full weeks of values. So let's select those options and let me show you what I mean by this. I'm gonna zoom in to change the position of this rectangle again, and I'm gonna keep the peaks agreed enabled, so that you can see that it always snaps toe full, speaks up, So I can't actually leave it on the half pizza. But what I can do is I can do to the input field, and I can type of the decimal value so that you can still have it on half pixels, for example. But it's most important that when you move the layers, they will always snapped a four weeks about. So that's like this diamond right now. And let's talk about maybe one exception to this rule. So if you have a shape that you want to transform with the rotation so you apply invitation off, for example, 20%. As you can see, you automatically get this decimal values in the X and Y coordinates, and basically you want to keep it that way. That's because otherwise you will are. Move the position off X and Y coordinates, and it will know Logan longer be centered within this rectangle in sketch for each individual layer that you selected, you can go to layer menu and select around two picks up, and that is how you can afford this layer to be on full pixel values for co ordinates. For this I couldn't, though it doesn't really do at this end, job. That's because it's now moved within their the big so agreed and it's not perfectly aligned to the center off the rectangle. So that's because I press command Z. And if you use rotation values, for example, 20 degrees, you don't have to worry about being only, for example, half weeks us or decimal values off pizzas. You are still fine. So let's like this icon and let's like, make exportable options. And as I told you, you cannot export safely do A P and G or a J pic file, which is a beaten up filed. But you have this coordinates set to full pixels so that it will look at its best, and why Motive that I have is to select a safe or Web check box while you're exporting meat mumps because it was keep color profiles and also some meta later so that you have smaller file that loads faster, and that's it for now. I see you in the next lesson 18. Working with Symbols: in this lesson, I'm going to show you one off the best features off sketch and the one that will save you a lot of time. And this feature is symbols. So you're going to use symbols in your project so that you have many instances off one symbol that's defined in the symbol space. I'm going to show you in a second, and if you want to make a change to all of the instances, you can do it at once by just anything. The master symbol. So now I'm going to recreate this on boarding process for a payment, and let's select the layers that we don't need on deep them. And now I have only one road that I could recreate as assembled. So to create a symbol out of a group or out of a layer, you simply select this group and you click on create symbol bottom. Now you can enter a name for your symbol and by default. It's the name of the layer, and you can also create a separate symbol space That sketch will use for all your symbol. So I recommend you select this option and I select Okay, Now I have in my pages structure, symbols, page. And in this page, I'm gonna have all off the symbols. Why? On page one, you only have the instances off the symbol. So not now. Let's create even more symbols. I'm gonna use all the groups with icons to create symbols, so I'm gonna have tick as a symbol, also alert. And I'm gonna transform dots to symbols as well. So now all of this icons are in the symbol page, and I can edit those monster symbols right there. And if I go back to page one and try to copy the instances so I'm selecting those icons and I'm gonna option move it to the next card so that you have two instances off each individual assemble that I've created. I can no longer edit them on page one, but I can double click on this little icon to go to the symbols page. And if I double click and make some adjustments here, I can, for example, change the color of the stick icon, and I can select the shape and goto color and maybe changed to some reddish color and go back to the instance as you can see all of the instances off my symbol change accordingly. So I have read sticks now, and that's how you update the symbol in the symbol space so that it changes in your layout . So let's imagine that you have the style guide with the logo and all the assets that you can update once, and they change in all off your layouts off the pages. So let's now select the card number. Let's change this name to some more generic name, for example Item. And I'm going to change the names off these icons as well. I'm gonna add prefix for them, and it will be icon slash. So now I'm going to select this icon slash and copy and face it all over the names off my icon. So I'm gonna have icon, icon, others and then pressed, have to go to the next name and put icons tick using this particular naming convention for the symbol names will let you organize them in the insert menu. So I'm gonna go to an insert menu in sketch. And as you can see, I can insert symbol from here, and the item is a standalone symbol. But all of the icons are grouped in the icons group, so I have this icon. Then I put slash and I pulled the name off. Other thoughts antique. And this structure is well organized in this insert menu. So remember that you can use this convention for grouping your symbols and it's pretty necessary for keeping their files organized because as you work along with sketchy, gonna have thousands or hundreds off symbols and you want to keep them nice and clean. So now let's duplicate those liars. I'm gonna option drag it and then come on d to duplicate. Now shift, click on all of the items and go to alignment options. I'm going to distribute displacing vertically. So now I have perfectly aligned items. Okay, let's make some minor changes to the symbol itself. So I'm gonna select the item symbol and the double Greek to enter the editing mode in symbol speech and I'm going to press commands be which will allow me to make that text field boulder and what I'd like to do right now is to change the text accordingly in each off the instant. So now you can see the full potential off symbols because you can actually make something that's called an override and you have override settings on the right partner when you select the symbol and there you have all the text field that you can change. So I have input field and also label field, And I'm gonna put date in the label instead off the card number in this first symbol, and I can also delete it to go back to original orginal phrase that was there. So in the second field, I'm gonna put month and year in deferred. I'm going over had the label to have this cvv coat, and in the 3rd 1 I'm going to override the label so that I have postal cold. As you can see, the naming convention for four layers is also important because, saying label instead off, For example, CV vehicles is so much better for symbols to be more generic. Sometimes in your symbols you have plenty off the text fields and you don't necessarily need those text fields. Teoh appear in the overwrite panel, so toe exclude them from being over return. You can press command shift l toe, look the layer or to simply look the layer in the layer spinal, and as you can see it now doesn't appear in the overact. So if you want to exclude suffering from overrides, you simply lock the layer in the layers panel. The second thing I have here in overrides by default is a Visa logo, so that's basically a beat my player that I can replace with some other beaten up so I can select MasterCard logo, for example. And there you have it. I swapped the local. So my default in all of your symbols you can override beat my players as well as you can override the text fields. So the second scenario might be that you don't want this visa image or any image to appear on the right side off your item at all. So you basically want to delete this Visa logo, and you can choose a bank image, for example. But it's not the best way to do it. What you can do is the first thing you can detach this from a symbol. So when you detach it from a symbol, you no longer have this connection between the symbols page and this card number. As you can see, this is a separate folder now. And you can, for example, delete or hide this visa logo, so that might be the first approach. However, it's not idea, because if you did are something from symbol, it can no longer update with the symbol of the muster symbol changes. So it has to be a better way to do it. And of course it is. And what we're gonna do to accomplish that is we're going to create even more complex structure off a symbols, which means we're gonna nest symbols inside each other. So I'm gonna select this Visa logo now, and I'm inside of the item symbol and out his visa logo. I'm going to make another symbol. So make sure that you've selected the visa local layer and now create a symbol out off it. We're going to give it a name off a logo, or maybe something more generic, like an image, and I'm going to select. Okay, Now I have one simple inside of the other symbol, and this is how you make this another symbol to appear in the overrides. And now you can select non in the overrides to hide the symbol in this particular instance . So that's how you do a nested symbols that can have overwrite. And we're going to do this for all of the icons as well, because we can swab the icons in each row. So I'm going to move to a symbols page, and I'm gonna creates nested symbols out off this icons again. So I'm going to move the icons first into the correct position on the item symbol also, and I'm gonna make sure that all of the icons are inside this item symbol. So let's move the alert as well. And this is s so far the best way to do that. And I'm going to move on the dogs as well. So we cannot destroy all of the remaining symbols. Let's select the icons and just pressed backspace to delete them. And now let's make symbols out off the icons that we have here. So I'm gonna create a symbol and just make sure that you put icons slash before each name so that it's nice organized, and we're gonna do this for others as well. And also Putin icons here, and we gonna set the name for a new symbol dots. And now we can swap those images. That's because they are invested symbols inside our item. So I'm gonna set none for Dolce and others here in the second troll. I'm gonna put Nantou docks others and takes as well toe hide all of the items. And here I'm gonna show on the teak. And in the last one, I'm gonna only show the other. So I'm gonna set the others to others. And adults do not as well as the teak. So we're almost set now, one more thing that I'm gonna create is this little red line that will appear under the field that, for example, someone misspelled or I just put an incorrect card number or something. So please bear in mind that you have to design all the states off, for example, a form or a bottle, so that when you handle to developers, they know exactly how that states, for example, empty state, inactive state or error state would look So I'm gonna have a duplicate of this line and I'm going toe, have a name off line and also create symbol for doubt. And let's put icons here and I have line alert as well. I'm gonna create a symbol for that, and that's first changed the color toe red color. And let's change the thickness to do and discreet a symbol. By the way, line alert is quite a good name because it's more generic than, for example, red line. And if you decide later that you want to have an orange line, you'll have to change the names accordingly, so it's better keep them generic. And now I'm going to select all of the items with shifty, and you can also perform operations on multiple selected items. As you can see, I turned off the line for each item and for the last row, I'm gonna just turn on this red line that I've created. Now, if you are using the US versions of Sketch, you got lucky because symbols got really nice updates, which I'm gonna show you right now. And one off the big public that you have to take into account for the next lessons as well is that previously you'd have to lock the layer to exclude this layer from override. So if I love the input layer in the symbols master, then if I go to page, this will be a lot from override, so input I won't be here and I'm using this in the future lesson. So please bear in mind that this is the way that not necessarily works in the newest versions of Sketch. You don't really have to look anything. Basically, if you look anything, it won't have any effect, whether it's visible in the overwrites or not. But you can simply dis able something's from overrides in the symbol itself. You just go to the symbol and select the symbol itself. So I click on this item, and to the right hand side, there is a managed overwrite pain which you can use to allow, and this allow overrides for both everything in the symbol or you can select individual elements. And also, if you have, for example, text, you can disable Onley text value so that you cannot override this card number value. But you can leave enabled text styles so that you can change the color or something like this. If I go back to page and select this, you see that for this label, I have only text styles that can be overridden and applied to it, and I don't have that input value, so I can't change this card number text in here. So this is how you can decide and 40 overrides themselves. You can both use the values here so you can change it like so. But for the text fields, it's also very easy to select the text feel you can come and click on the individual field and then double click. And now you can live added this input overwrites in here also simply by double clicking because you also have all the individual things that can be over written under this symbol . So in the newest versions of Sketch, you can click at this little triangle next to the symbol, and it will allow you to see all the and the symbols inside and all the text foods and images and everything else. You can select it from here, and unless it's not disabled for overwrites, you can override it in here so each individual think will have only one overwrite setting. And if you select the entire symbol this card number, you will have all the available over rights, depending whether it's an image or maybe text field, you will have different things to choose from. For example, this battle teachers any measure, or you can swap an image. If you have symbol, that's the same size. Or you can, for example, put text here or change the text. Styles of different things are here, and also this tiny icons will let you jump straight to the symbol definition because if you have nested symbols like I've shown you, for example, there is this icon line, and this is separate symbol. It's just nested inside of this card number, but if you want to quickly jumped to the icons line, you can just click on this little arrow, and this will go straight to the line instead off the parents symbol, which is in this case, the item. And also you can do is use this little overwrite with data thing that I'll explain in the later lessons. But if you have text data or some dummy images, you can simply use catch data off, for example, award cities or names, or you can bring in different data that will be filled automatically. But we'll do that in one of the next lessons. If you've done enough and you want to go back to the initial state off the symbol. You can reset all of the overwrites at once by clicking on this little reset icon. Also, in the newest versions of schedules slightly changed. This drop down that will allow you to pick up another symbol, and this will basically are you to replace entire symbol. So if I select a card number, I can instead use the icon like so, and this will keep the sizes, the different properties that you applied for this element. That's basically it for the future lessons. Police remember two things. The first is that you can, and it's the text overrides directly on the canvas. You can double, click and edit the text. That's one nice thing, and the 2nd 1 is that you no longer have toe look any layer so that it's not available for overrides. Instead, you go to the item itself to the symbol, and then you manage over rights to the right hand side. That's it for symbols, and I see you in the next lesson. 19. Sketch Libraries: Hello there and welcome to the next lesson. Now let's make this bling bling bling. And this is simply because libraries are one of the most anticipated features off sketch, and now you can use them. They're pretty easy to grasp. It means that you can basically use other of sketch fires and the symbols that you have in those sketch fires inside any project in sketch that you have so you don't necessarily have to copy and paste all the symbols to the symbols page. You simply can use those fires as a libraries. So let's go to insert menu. And here you have symbols and obviously this type text or, you know, those already. And if you create a symbol out of this guy, for example, that created and let's say that this is our for example, text symbol, you can use this symbol, and this has this little arrow icon that you already know. It's already also in the symbols page, and you can use, insert and then go to symbols. And there it is our tech that in addition to that, you can go to insert, and here we have, for example, IOS you I designed and those are symbols that are inside off at this IOS ey design key that you have in sketch. And now you can use them without even opening this file and without even importing this elements into the symbol space. So now I don't have it in the symbols page, but I haven't here and now let's go to sketch preferences. I press comment, coma, And here you have this a library stop. And now I can only use Iris. You I design, by the way, you can click on this little II going to preview this library. But also, you can close the preview and you can add a new library. And this basically can be any sketch file that you have. So that's, for example, import this. You are key that that I have here, I'm gonna open this and here I have another library, So this is choppy. You can preview this library again, and there are some symbols in this library. So now when I go to insert, I can see Shop E, and I can see all the symbols that are inside. So, for example, if you want to use some bottom, I'm going to use simple bottle. It's creek on this item and let's put it to our sketch fire. Now what you have here are also ordered all the overrides. So it means that it goes to this fight and it can determine whether you want to change this override color, for example, for this battle. And this pretty cool because you can have everything in one place. For example, this tire guide. So this one source off truth that you have for your design files, for example, for the product, and then you can use it over and over inside off the new finds that you create. That's pretty handy, and you can also distribute those fires across your team, and then everyone can use this one source off truth. And when these changes, you can update via drug books or abstract or any other way, and you have all the assets in the correct place. Now what you can do is access the preferences, or you can simply right click on this asset in the libraries, and you have the same menu, and from there you can disable shop E, and it means you won't delete it from this libraries. But it'll simply disable it so that it doesn't show in the insert manual, and then you have show in Finder. And that's pretty important. Remember that you have to keep those catch files that are imported as libraries on your hard drive. And this is the main difference between symbols as well, because symbols are nested in this various catch fire that we working on. While those assets that you create and that you use from libraries are not symbols itself, they are symbols, but they have this little link icon, and it means that they are linked to this particular file that is somewhere outside off the sketch file on your hard drive. It means that if you remove this original source of truth out, or you simply move it somewhere else on your drive, this will no longer be available as an assets here in libraries. So this is really important, and also you can open this fire and sketch as well as remove it. If you remove it from there, you won't remove it from your hard drive. It simply remove it, remove it from the libraries, and I believe that's pretty simple, and yet it's very powerful technique so that you can have all your design assets, for example, logo and the type prompt in one separate file. And then you can use it across all other fires without important into symbols. It was always a travel when you imported and copying it pasted symbols across the fires. Then if you change one source off truth in your 15 you have to have abated in each other one and libraries simply solve this problem. Now let's dig a little bit deeper into the libraries and create one from scratch. And what will basically do its will create something that could be called nested Library. So I press command and to create a new sketch fire. And now imagine that in this sketch file, for example, we have two rectangles, so we have the 1st 1 that is our brand yellow color, and the 2nd 1 will be brown blue color. Okay, Now you can select those elements and create symbols out of them that set Kohler and this will be yellow. And that's press. Okay. And now for the other one, let's create also a symbol, and this will be called book. Okay, so this way. We have one file with two symbols of SAARC orb blue and yellow. Now I can create another file and this another file will have some, maybe shapes or I console. Let's maybe select star and I'm going to draw a star. This will be basically another symbol. So let's create it. I'm gonna create icon star symbol here and press OK, now, inside of this symbol, it's double click it on its on the symbol space. What I'm gonna do is I'm gonna call this previous library. So let's press command comma. And also we need to first save those files. So let's save this untitled free schedule. This will be course for our brand. Let's save it out. And also for this untitled fire, we're gonna save it as icons. Okay, now, let's in the library's. I'm gonna create another library. So that's at the library. And here we have our colors that's open, and we can use it inside off the symbol right now. So if we, for example, want to call it from here, let's go to colors and let's use our blue color. I'm gonna put it over this time I come like this And now we going to do is we simply select the star and right click on it and select mosque so that we have masked out this color with the shape and what we can do if we return return to the instance. You can see that we have those colors overrides, and those are from our color fire. You can select color yellow to change the car to yellow or, for example, blue. OK, so now let's save this fire command s and let's make sure that colors are also safe and let's go to our first find. Now, if you go to insert and we use icons, we can use one of our icons that we have here. And if we put this icon inside, you see that will also have the override. So now this icon is from this. Icons, notes, catch fire. But the core that we have in the overrides can be overridden, and it's from colors. That's catch. So now you can organize those libraries, so you have separately icons, colors, logos, phones, all the different things, and then you can link and merge them together. And the best thing is that you have this icon star as a separate asset. It's outside of the symbols because it's simply linked. So now all those fires work together as a library since catch, and that's pretty cool. And by the way, if you want to edit any off the library assets, for example, this bottom you can simply double click it and then you have the options toe. Open this in original documents so that you will modify its source off truth. And remember that when you save it out, it will change across all their files. But also you can make it a separate instance and simply unlinked from the library. If you do so, instead of going through this fire, you will have it inside off this. Verify that you are in in the symbols, so now it's a symbol. Now I can go back to this instance you see that I have no longer this link icon, and I can eat at it this directly in this particular file so that it won't change over in the source of truth or at the other five that he uses those source of truth. So there's one more thing I'd like to show in the newest releases of Sketch, you can used techstars in the libraries. It means that if you create a text frame and then you want to save those settings in the text are you can create one. Now let's go ahead and create new textile. Now let's give it the name offs style one. And now I want to add this far as a library. So let's go to the file menu and you have artist library. And after you've saved the file, you have an information that this document is now a library. So let's go ahead and create a new document. Now, in this new final, let's Presti and create a frame. And if you double check in the preferences, you have this test library connected. So now you can select the frame and you can use test libraries styles and applied to any text frame. This is really cool. And if you want Teoh update this style, you could just change the properties and you have a little ass tricks here. So what you can basically do is you can on link at update this text out for this document only, and if you want to update it in the library. You will have to go to the library, so you have to open this text time in the library. Now you can apply some changes, and afterwards, if you come back to this file, you'll be ableto update this style accordingly. Now, if you go back to the test library file and create any shape and, for example, use some feel as well as some specific border, you can also save the layer styles like the text I. So let's create and use later style, and this is this might be an oval style. OK, now let's save this file and let's go to this this new file and let's create a rectangle maybe, and we can apply this styles from our tests elaborate file. So this is really cool. And this way you can exchange information between your libraries and please bear in mind that you can also upload those libraries to this catch cloud. Or you can just keep them on drug books, and then each member of your team can contribute to this file. You can create a style guide in which you have different text styles as well as layer styles that you can link to the documents that are before the same company or clients, and then you can use all those settings to stay consistent. So this is all about the library's hope. You'll check them out and asked you in the next lesson. 20. Working in 1x Scale: hello and welcome to the next lesson. Throughout this course, I'm gonna show you how to create a complete beautiful layout, often application within sketch so that I'm going to show you step by step process that you have to follow to accomplish, successful you I project. So now it's focused on the ward. How and why. So the basics off creating new fires and setting up your project in sketch One of your first decisions would be the article size. And unless you are targeting a specific device, for example, and iPhone eight, which is very rarely the case, I recommend you to use s so called device agnostic approach. So basically, we're gonna use art about size for a mobile layout that's to play out and a tablet layout, and we'll try this audible to be assed generate as possible. So we don't think of it as an iPod necessarily. But we do resolution, which is most common for most tablets. And then we try to keep our sketch assets organized, and we use symbols as well as the resizing options that I'd show you that will enable us to make the small adjustments between the resolutions. So If you have 7 68 resolution for a tablet, you can easily adjust to 1024 pixels, for example. But still you have different devices as different articles. And, baby, you keep them organized in different pages in sketch as well, so that you have a mobile layout, then desktop and tablet layout separately and maybe even a wash layout. And that's because they are different ratios and that you have to keep in mind. So let's select. Some are doubled and you can choose from IOS devices, for example, and selector iPhone seven audible to start with. So now we have the position and size and let's reset the position so that I have zero x and y coordinates. And this is just to clean up the project and let's put it in the center and that from now on, let's treat this iPhone art aboard as a device agnostic mobile view, and we're going to create a mobile layout. And by the way, if you have the device that have a certain size, for example, iPhone or some Samsung device just you can just set on weight and height off your device so that you can preview the layout that you're creating in sketch, and I'll show you this later. So now let's focus on the resolution. We have the width and height off 3 75 by 667 Well, actually, it means that we're creating a project in one X scale. So what does it mean that we're creating it in one Xscape? Let's take a look at device Metrics website again, and let's go down to see the iPhone, and we have iPhone six resolution and native resolution is actually 7 50 by 13 34. So you might be wondering, where does the difference come from? And it comes from the retina display, which scales the content so that it's perfect for the user. However, you don't have to divide this value off native pixels by the density scale factor. So we have the scale factor off to, and you have to divide 7 50 by two to get free 75 you have to divide 13 34 by two and you get 667 and this is how you get the one X scale, which is differ default for sketch and which is best for your project. So why is it best for your project? What is best for your project? Because you design want to one or two user sees and the user sees this one x resolution. So you have to bear in mind that for each one peaks of that you create, there can be even four pixels in the native resolution off the device. But it really doesn't matter because they are scaled by two. And so that user sees this one x scale. And if you take a look at some other devices, for example, you have this iPhone six plus and you have full age the retina display. But the scale factor is free so that you get for 14 by 7 36 for this iPhone. So we're gonna start with iPhone six or seven on our board, which is the same. And let's double check these export options. 40 are bored. I'm going to set the background color to a blue collar. Now let's select the art board, so I'm gonna creek on its name, and I'm gonna click on make exportable options at the bottom to see the scale sizes. So if you select Iowa's preset, you have one x two X and free X. And if you start with one x, which is the correct size now we gonna have this asset scaled accordingly and we're gonna have perfect scales. However, if you're going to start with native resolution off iPhone, so you're going to start with the two X scale. You have to change the export settings so that they match the scale. So you're gonna go for 0.5 for scale one, and then you're gonna have one for two. And if you want to go from two to free, you have to count 1.5 and it's a bit over complicated, I guess. And I also have one more reason for this tax case not being perfect. And let's imagine that we have this two x scale and afterwards we need to have a one X assets as well. So from this scale, we need Teoh. Divide the values off the wheat and hide by two. And well, if those values cannot divide on four picks us, for example, if you have one a one week off this off this rectangle and you want to export toe one X, you're gonna have 55 then you obviously have this blurry edge on the on the edge off the pixel. And this is going back to this lesson with pigs Agreed when I showed you that if we don't have full peak cells as we door height, we get blurry edges. So that's another reason not to design in tow XK, but stick to the one X scale. But also this one. X scale is the smallest size off your document, so it means that we're exporting beat maps. You have to take into account that those beat maps will even be maybe two free or four times larger. And as long as you use native schedules to design graphic elements such as rectangles, overalls and use text, you're completely safe. And that's because those are old vectors and they can scare even 100 times. And the graphic will still be perfect. Also, if use vectors, for example, from illustrator and you import them to sketch, you are safe because vectors skate seamlessly. No matter what. However, you have to take into account that if you have a poor quality, beat mops inside of a sketch fire and you try to export it from size one x two, for example, four X four free eggs. Those beat mops can get blurry and tow. Avoid this quality degradation in sketches. Just have to make sure that the beat maps that you import into sketch are at least three times bigger in native exercise than the size that you have in your design. And that way you are safe, and the sketch is smart enough to keep this native resolution. And remember this native resolution, even if you make this image smaller in your interface. So let's take a look at this practical example. We're gonna have one photo, and I'm going to check the resolution of the photo I Press Command. I end. There is a 3.5 1000 pixels in this photo, so it's quite a good quality. When I drag it into sketch, you'll see that the quality is now 17 48. Why? Why did that happen? Well, it happens because sketch already compressed this image to be half off the size toe account to a retina, this place so you have now the size of the image that will look great both on standard this place as well as high resolution displays. And you can always take that bag by going toe layer image and selecting sets toe original size. So now this layer is again free and 1/2 K But what's the most interesting thing in sketch is that it remembers the value that you have as a native resolution. So if you even make the image so much smaller, for example, 100 pixels wide and people, for example, scale off 15 X before export, which means it is 1500 bigger picture and it would destroy every beaten up, so you have pixelated. But when you export this file, let's give you the name off test and let's go to this export folder. You have an image that is 1500 by 9 45 So the correct size. And did you see this picture? The quality of it is perfect, and that is because sketch has this naked resolution underneath this file. And until you have exported five that is bigger than this native resolution Off free and 1/2 K you're gonna have perfect quality off the image, and now you know everything about skating and you also know that the best K to start with its one X, but also you have to take into consideration using high quality, beaten up images so that they can scale seamlessly while exporting to different scale factors. And that's it for now. I see you in the next movie. 21. Grid Layout: So now we know device agnostic approach. We also know the scale factors as well as that. We have to stick to this one X scale in our project. And other thing is, if you are creating a Web layouts, you should always start with the mobile of you than you do a tablet view and afterwards, a desktop view. So this approach is called Mobile first, and I strongly recommend you to respect it. In our case, we're working on native up for a mobile device, and now I'd like to show you greet setting options and also layout setting options that are accessible from the view menu. So let's first access the greed settings and you can choose the great block size. And also you can have the thick lines every, for example, 10 blocks, which is default. So the block size for degreed I usually set to eight pixels. These thick lines usually default in my project to 12. So I'm gonna set 12 here and eight big so great is actually quite nice. If you know material design guidelines, you often have this eight peaceful increments, so we're going to stick with that and for some project. You can have this declines, for example, set to 100 blocks or 1000 blocks to make them invisible in your agreed. So Sometimes it's only the greed that we want to work with, and you don't need this declines to appear next. We have the color of our great, and we have two themes, and the dark theme will appear on lighter interfaces and light. Theme will appear on darker interfaces, and you can always change the color off the Greek accordingly. So they have the colors and also can make this greet settings default. I'm gonna set this to default, and if you want to justify your choices about the greed, I encourage you to read the article, and I have the link in the source files for you. And this article treats on the greed, and it explains why. Actually, the eight points agreed. The eight weeks agreed. It's nice both for keeping your design organized as well as keeping the standards, for example, for material design guidelines and too much the display resolutions and the specs settings . For example, one of the nice discoveries here is about most used most frequently used screen resolutions that you have in this table that they can be divided by eight, which is good for and it speaks agreed. So if you have time, just take a look at this article, your final ing in the source files. And now we're getting back to the great settings. I brisk, okay, and one more great things about working with degreed like this is that if you try to create any shape, it will snap to the greed. So it's easy to create a shape that is perfectly aligns to degreed. And also, as you can see, dragging this shape is easy toe. Align it to the greed. But if we try to match it, so if you try to use shift and the arrows on the keyboard, the rectangle moves in 10 pixel increments instead off eight pixel increments. And that's a shame for our great. So fortunately, we can fix it, and we can go to ah notch it website link. You'll find in source fights as well, and we can install this little free application that will allow you to change the night values for sketch, and I'm going to double click on this up and then you have this small Nagy, which is basically just an arrow on the keyboard. And by default, it's one pick. So and we'll set it to one pixel as well. But you can change it, and then you have this big notch, which is shift plus arrow, and we're gonna set it to eight pixels. So I'm gonna set the value toe. The exact value S s our greet. And now we can not with the eight picks up increments. So everything that we do in sketches perfectly aligned with a pixel great and this is what you call a holy Grail in the greed industry. Now we have this perfectly set up and let's switch from the greed to a layout. So let's go to view and I can enable layout by setting this show layout option. I can also go to layout settings. And before we do that, let's change the view a little bit so that I can move the art aboard with space bar to the side so that you can see this layout properly. And I'm gonna go to layout settings, and, as you see, you can set combs and rose for a layout. So that is basically something else than greed. I'm gonna turn off the greed by pressing control G so that you can see the layout better. And let's go back to this layer of the options by as, like, view and layout static. So as you can see, we can set columns as well as rose in our layout, and the first value that we have here is the total with off the layout. So as you can see, we can have the different with off the layout, then the size off our our boat. But usually you'll stick to the size of the art board, so you have 3 75 pixels in terms off the with off our read as well as the layer. And the next setting that we have here is the offset setting, so we can offset the layout by, for example, 20 pixels, and it always offsets it from the left edge. However, if you want this officer to be distributed evenly between left and right edge, you just click on the center button to the right off the offset input. Let's reset that 20 big sells. Next. You have number off columns so Usually he will stick with four columns on Mobile, eight columns for tablet and 12 columns for desktop. The next is next setting is Gutter Wheat, and the cutter is basically the marking between your column so you can set it to 16 and I usually set it to 16 or 24. And that determines the column. Wait. So if you have 16 that the column, which will be 82 because the total with off the layoff settings east 3 75 on. If you decide to change any off this values, the other values will change accordingly. So if you decide that the column it should be, for example, I don't maybe 65. I'm gonna set 65 here, and the gutter with is now adjusted so that it feeds the daughter with off the layout. Basically, the 3 75 value cannot be divided by four. So that's why you gonna have this little shift in pixels either way. So let's default toe 24 picks us. I think the 24 is great gutter and sometimes have you 16 as well. We can also set the gather to be outside, and now let's just to 24 again. And by the way, those values of gutter wheat are not coincidental as well, because I try to keep them as a multiplier off eight. So I have the eight weeks agreed, and that's why I keep the gutter toe 8 16 24 or, for example, 32 for the layout settings. Too much the greed settings as closely as possible. Unfortunately, as a total weight off 3 75 not being Divide Herbal by eight or four you will always have this column with that's slightly shifted from your greed. And that's probably why I tend not to use layout settings and not use layout at all in mobile designs while in tablet designs as well as desktop. This layout settings are very valuable because you have much more space and it's easier toe . Organize this space, having the eight weeks of great as well as the layout statics. As you can see, you can also determine the number off rose as well as gather between rose and you gonna select the greed or outline view for your layout. You can know some change colors as well as make this settings default, and please also remember the keyboard shortcuts. You have to select the art aboard. Then you press control l for layout and control G for the greet. So that's all for now. I see you guys in the next lesson. 22. Drafts and Mockups: It's nice to see you in the next lesson. In previous lessons, you've learned about sketch, basic tools, operations, common symbols and I want to do to get familiar with a sketch. And now we can proceed to the next part of our course, which will be practical project off an application. So we're going to design it up inside of sketch. And that's how I'm going to show you a real work, though, and some even the more at fast functions. I usually start with some wire frames and more cops, and I love using pen and paper because it just gives you this kind of freedom, and you don't necessarily need Teoh draw beautifully. It just need to draw out some components here on just focus on the user flow. So imagine some action that user needs to perform in your application and then try to recreate this action so that you use the minimum amount off screens and the minimum amount off compliments. For example, if the user wants to change the temperature in the living room, you can draw such a screen or screens that would let him accomplish this action. And this where you create a flow, so you don't necessarily. I have to write down older screens of your applications and then drove them. You think off flow, so you think off the particular actions that user needs to perform in your applications, and then you have some sketches and you won't. Teoh export those sketches into digital form so you can scan them. You can make a photo and send it to your email, or you can use a device like mine. It's bamboo spark, and it lets you connect to the application and synchronize those sketches with one think of about on within with your application. And now we can send it out as a PdF or at some other 54 months. And the nice thing about Bumble Spark is that you can actually have those sketches in Vector as well, but you don't need as much, so that's just an option. Next application I want to show you is ever be comp. You can use your iPod or an iPhone to draw shapes and create some basic more cops and prototypes within the application. So if you don't want to use pen and paper, you can use this application for sketching, and there are quite a few applications out there that can create simple shapes by just drawing. And you can position this shape change with set size, and it's quite nice, maybe note on the phone, but on the tablet, it's quite nice, usually on the meeting. For example, with your client, you can discuss some options. You can use this simple gesture stove, for example, draw a text field and change the size of the text view. As you can see, it's pretty easy. You can have also a stylist for your iPod, for example, to perform these operations. As you can see, you can delete things easily as well. And the nice thing about this become application is that you can easily send out those prototypes to, for example, illustrator or for the shop. You don't have the option to send to sketch, although, but you can send out to illustrator and from illustrator is just come and seek on TV to sketch, and it works beautifully and you'll have vectors as your prototype. So we've learned about pen and paper approach, also the mobile apps, and finally, you can also prototype and creed those fire wire frames with Web applications such as envision or, for example, you explain. So I'm not gonna teach you how to use all those abs, but I'm gonna show you how to create simple project and what this approach is about. So what you can do is you can register for a seven day try. ALOF you explain and just use it freely for this time. And you can prototype with designs that you've already made with a sketch for the shop. Or you have this Jay Peak five that you've imported from. For example, this become application and you can install the wagons as well. But that is not altogether after we after creating a design from scratch. So we gonna design with this, You explain, editor, and we're going to start with a blank piece off interface. So piece of converse. And we're going to set this converse to be the size of iPhone six. And now you can use the shortcuts you're familiar with. For example, space bar to change the position off the view. And then you can, for example, use this pre defined bottoms or check boxes, circles, hot spots, icons to prototype, a simple behavior in your layout, you can even choose a photo Teoh be uploaded into you experience and again select the folder from your hard drive. And there you have it, so we can always use some compliments that you have already created for your layout. And those are the best things to discover any new Experian. Or envision that you have those ready made libraries off components and, for example, you can search for enough bar from Iowa s Iraqi. Then you can select enough bar just drag and drop it on your canvas selected and just skated to march the size of your art boat and then you There you have it so you don't really need to care a lot about styling about typographic colors because you are doing this low feel even more copy are doing this simple wire frame that is all about functionality, not about the design. So you don't care about greed. Those things don't necessarily have to be properly aligned. For now, your main concern is the user and actions that he or she performs in your application. So you tried to set the components so that those components help him or help her toe actually to accomplish those tasks in the most user friendly and the fastest mother. So then you can have the text, you can have some icons. And again, we're not going to focus on the next properties here, which is gonna put the correct copy and we're gonna leave Arial 14 or 16 picks us. But what we gonna, uh, look for is the correct spacing and the correct elements, as well as compliments that will allow users to see what's the most important on this screen. For example, this is the lock screen of our home, and I want to show some information about the systems at home. So now we can distribute those elements that we can see that it's a well organized. All the necessary informations are on the front, and we don't have any clatter here. We don't have unnecessary information. For example, the information about the address off our property is not necessary here because we have the photo of the home. So user intuitively knows that he's editing this very property. This is how you create simple wire frames using pennant paper using mobile apps as well as Web apps such as you explain or envisioned, but you can also is plenty more prototyping tools such as actual, which is pretty popular, mock for mock plus and many, many others. So the main goal to keep in mind is that you create Notre designed right now so you don't focus on the styling but on the function off your application. And the best approach I know is to focus on those tasks that user has to accomplish. And then, if you know that he has to do a certain task, you try to create a screens that will let him do it as fast as possible and in user friendly mother. So that's all for now, I see the next video. 23. Choosing Colors: welcome in the next step off our journey. So we're going to create a layout in schedule. But first we need some inspiration. Let's imagine that you've created all the wire friends for our application and also that you have all the ideas about what's user gonna accomplish using your particular screens in the up. Now we're going to focus on styling. So by styling, I mean the starting off our components as well as colors as well as typography and those things you search on the Web sites such as dribble. So the first website I'm going to show you is dribble and basically here You can find many simple components and parts off the design that can lead you to some kind of ideas off how you'd like your components to look. And of course, it's not. It's not stealing. It's not coping 1 to 1, but it's just searching for an inspiration. For example, if you said for a user profile, you can search for a different designs off user profile and decide whether this or that solution could be could work well in your project, and afterwards you can adjust it so that it feet the needs of the project perfectly. Actually, on this point good idea is also to create a Pinterest account and to have one board for each project where you will peen all the inspiration on you will be all the images. Then you can get back and see the whole inspiration for that project. It's so much better Teoh being able to compare all those ideas and afterwards this I decide which will actually work better. So Pinterest is a great place to manage your ideas. And also I recommend you to go to Adobe Be house which is a great resource off fantastic words class projects. So I recommend you to set for, for example, you I projects or some illustrations here which is absolutely awesome. And the next website I'd like to show you is awards dot com. This website is actually one of my favorites in terms off Web design inspiration because you can find plenty off really create quality websites over there, and you can also search for a particular color or for particular type of websites. So it's really great to see those website that you that you have on the world that come the next website is patterns and patterns is Ah, it's a place where you can find screenshots from readymade applications, for example, from up store or from Google play. And if you search, for example, for a design off Airbnb or uber, you can go for patterns and you can set for it. Okay, you're gonna have to install the application. Okay, so this is how you search for inspirations. Or at least this is how I said for inspiration. And those are the teams that I can give you. And remember about this Pinterest account and the board for each project. It will really help. So now let's go to the color inspiration, and I have a few websites for you, so the 1st 1 is color dot adobe dot com, and the main idea here is to use this color well. That's in the center, and you select any cola rule that you like, for example, monochromatic or try out or complementary. And now, if you have, for example, try out so that there is a triangle inside this circle, you can take one color and match the other colors accordingly. The good news is, if you select any of the color rule. It's really hard to mess up the colors because they always match each other. So that's great, too, for beginners and also for people who for some reason have some trouble with selecting cars for the project. So you can also select this little icon, too. Upload an image and select a color theme out of the image that you like and those who can go to a top menu. And there you have explore section. If you go to explore section, you can explore other people's choices in terms of colors, and you can also browse those choices and let's see most popular. And there we go, so you can select those colors. You can copy this waters. You can save this water so you can add it. Those colors and copy there are to be var use or the hex values off colors accordingly. So that's how it works. And one more until that I recommend, is colors that co. And there still is really great for, especially for those of you who has some experience in color theory and also know how to choose colors. Now you can press the space bar to change the colors in each off there. Five bars that you have here. So I presidents pays bar until I realized that one of the course is, for example, good for my project. So now I hover over this color. I can adjust it a little bit, for example, make it darker. And now, if you like the color, you can select the lock icon so that this color is locked and the other colors will change accordingly When you press space bar. So I press space bar Auntie, I see colors that I like. Then I look another color. For example, For this blue color, I go to the top option, which is alternative shades, and I'm going to create a little bit lighter color. Okay, let's look it. And for this one, I'm gonna go to shades again and let me It's like some darker color. So yeah, there we have it. Now let's look this one so we have one more to go. And by the way, this is not a coincidence that there are five colors and explained it later. Now, when we have the pallet, we can go to the top most option off export. You can export this Pollitt in different four months, for example, we can go with the SPG fire. And if we select the SPG file, I can download the file. And there you have the Pollitz told SPG in sketch we go to pages and I'm going to organize our project a little bit so that I have all the components for the style guide off our application in one place. So I create a new page, give it the name of components. I'm gonna turn off the layout, and now I can just drag and drop the pilot. The SPG and nice think about this is when you access this group. You have older rectangles and you can select the rectangles right now and you can go to a few. And now you have this color. So you can easily, for example, copy them to swatches, which I saw you later. But for now, if you want to create your own style guide, I'm gonna create a rectangle and give a size off. 1 28 by 1 28 I got rid of all the rectangles that I had and if he wants to put in a different value for I feel you can use, for example, websites like fatty y Caro colors and material design colors. So 1st 1 is 30 wear colors that come, and here you have those nice flat colors that you can copy just by clicking on the color that you like. So you can just click on the clouds, for example, And there you have the Hexi decimal value off this color copy, and when you go back to sketch, you can access the field property and then you have at this hex value. Actually, it's selected, so it's only a matter off command V to paste it, and there you have it. The second website is material powers dot com, where you can select two colors. And that's pretty nice, because if you select two colors, for example, blue and yellow, it generates the palate off eight colors, and you have a primary color and accent color as well. Those are the colors that you've chosen, but the other colors, for example, primary tax and secondary text and icons and stuff are also here. So based on those two colors, you have a palate off eight course, which is quite nice and You can download the values off this colors as its watches, and you can also select those colors to copy their Hexi decimal values. There's also one more tip I have. If you use, for example, this ready made pilot, Let's adjust, decides off the rectangles. So I'm going to select all the rectangles. I'm gonna get rid off the text. And now let's kill them all together in sketch and let's have those rectangles next to each other. So I'm gonna put them next to each other and there. I'd like to show you how to create your own pilots, using simple methods off, creating one rectangle that's on top off the other five. Now let's divide the height by free. Let's put this guy at the bottom of our shapes and let's change the color to ah white color or a black color if you want it darker, so I'm going to change too wide. But I'm gonna decrease capacity by pressing four on the keyboard, and now I have 40% of capacity. I'm going to duplicate this one, and I'm going to decrease the opacity on the 2nd 1 to 20% by impressing to on the keyboard . And there you have different shades off the same color off this hex of the small value. Okay, so you have writer and the lightest. And as you can see, you can generate different shades and different pilots, different parts for your project. One more thing that we can do is let's create another rectangle and let's divide the wheat by free right now. So instead of generating different shades, we're gonna generate different hue. So we're gonna use a color for example, a bright yellow, and we're gonna start like this yellow color, and we're gonna change the opacity to 20. And also we can access those blending modes. And if we select over light bending mode, as you can see those layer mixes with each other and now you have a little bit different colors. Let's go up with the opacity. And as you can see, you have 40 rapacity now, and you're generating shades off the colors. But also you are changing hue a little bit. That's because you have this blending mode, and also you said the field to be a different chord than black or white, so we can experiment with those colors like so and generate plenty off pallets and the different variants off the cars that you create for your style. Guide and I also strongly recommend you to take a look at the websites as shown in this lesson. But right now let's create a style guide for colors from scratch. For our application, I'm going to select a rectangle I did. It's 1 28 by 1 28 and I'm going out to drug. It's and afterwards I'm going to come on the D a couple of times so that I have five rectangles. And that's not a coincidence that we have five colors. Eso I usually use five or less colors in my project. The 1st 1 will be the main color from the brand. Guide to the 2nd 1 is the accent color, and you'll use it for some interface elements like bottles. The 3rd 1 is for except so it will be kind of green, the four funds for error. So I'm gonna use kind of red and the feet one is for text, and that's why I'm gonna speed it into half because I can have light text and dark text, depending on the background, so I always use two colors for text. I'm gonna have one, which is for now, black and 2nd 1 that is, for now, white. Why for now? Because I attends to avoid those black and white colors, I usually go to a paucity and said the opacity to 80%. And I believe it's so much better than having completely that color or to set it, setting it to some dark color. That's because when you put the text over some background, which is, for example, blue or yellow, you will get part of this yellow color in your text. So you have this 20% off the background color into text, and it's so much better for marching those two colors and still the contrast is acceptable . So there you have it. That's how you create. That's how you start creating this color seems for your application, and we're going to finish in the next lesson. Okay, Before we finish this lesson, I'm going to show you an update to the color panel, which is in the newest versions of Sketch. But this is just a small update and everything that's in the future lesson. Its OK but just in a slightly different layout. So I think you'll figure it out. But I'm going to show you what's new right now. So, basically, they, uh, added this hex value in here, so this is pretty nice. You don't really have too quick on the color to enter this hex value, but it's still there. You can do it the old way and also can change the values off the colors. In here. You have documents and global cores in this drop down menu instead off the sections. But this is just basically the same for document colors. You can add colors in there, and in addition, you can opt and change the names for the colors. And this is pretty cool because later on, when you are, figure out libraries and sharing those colors with others. For example, with your team, you'll see that the names for the colors really make sense. Also, you can select and change the position of the colors, which is pretty neat. You can change how they display in here and also change position, and, um, that's basically it. You can also select the most frequently used colors, so the ones you use frequently are here in this little clock icon. If you switch the radiance, there's not much new. But you can switch the color, the beginning and ending color of the radiant like so. And you can rotate the Grady int with this little icon. Also from the Grady INTs, you can access global and document radiance, which is pretty nice, and you can have them from here. If you go to images, there are some nice changes as well. For example, you can select those frequently used images. You can also use data from sketch or like faces, for example, or you can use things like unspool Esh as a plugging, and I'm going to show you how to work with data and future lessons. But just keep in mind that you can have it in there. Also, you can store images in the global images repository or in the document images. So every time you have an image, you can add this and you no longer have to search for this image on their hard drive. So this is pretty cool. Also, you have an image is if you, for example, at another field that would make sense you can access this little icon both in the borders and then images that will allow you to apply some blending modes. I'm going to explain blending modes in detail, and this is nice because you can mix and match those layers and you can change their positions and apply some blending mode so you don't really have to have multiple layers. You can simply operate on the fields, and you can just blend them together or at multiple colors. And as for the borders, everything is the same. They slightly change the layout off those icons, but this is just easy to grasp. So basically, that's the update I wanted to tell you about and see in the next lesson. 24. Colors and Symbols: there we are in the next lesson and between the lessons I've treated my color scheme with the white background accent error except warning and also to accent colors and was important about this structure is that we have the components page. But inside of this components page, we have each color as a separate symbol. So this last one, which is not a symbol but a group I'm going to convert to a symbol I'm gonna put create symbol and I'm gonna put color slash and name, having named accent free. So now it's also a symbol. I can delete this color, and I can put the symbols next to each other and you can access them in the insert menu. But also, if you change anything in this dire guide in this component section and you have any instances off this colors in your project, they will update accordingly and show you that in a second. For now, let's create a simple shape for example, a rectangle and less access the color options. So if you click on the color, you have this color dialog box and you have two sections on the bottom. So 1st 1 is global colors, and the second is document colors. So, as you might expect, you can save colors for later. In sketch and document colors will be colors accessible only from this particular scourge document, while global cars are the colors that you can access from any sketch documents. So let's add our application colors to the document color section and what I'm gonna do. I'm gonna come and click on the rectangle so that fuel is now white. And if you creek on this little plus icon in document colors, you can easy at the colors to this section so we can dissect all of the colors that I've created so except warning and also the accent colors. And now we can access those colors from any color dialog box in sketch. So now you can have the colors, and if you want to remove a color, you simply drag it outside the color dialog box and sketch and very go. This white color now disappeared. The next very important tool in terms off core management is this little color Pekar, so you can select any shape, and now you can change the color that you're in with this color Pekar and use can select any color from within your project. But also, as you can see, you can select any polar from sketchy Y. And that's not all because you can me my sketch. And if you have any window outside off sketch, for example, a browser or any window that you want to be called from, you got it easy. Do so so you can select a color picker. Go outside sketch application and select the color that you wish to have for your object. So this is how use color picker and actually, one very important keyboard shortcut that you have to remember is a shortcut for the color picker and this is control, See, So if you select the shape and select control, see you have automatically color a selective color picker and then you can pick on any color to applied as a feel. To this shape, you can also use the hex, a decimal values or RGB values. And if you click on the RGB values here, you can go with H S B colors as well. This is almost 81 last thing that I want to show you in this color dialog box is this frequently used colors box and in your project. If you have many fields and many core set to one color value, they will also appear in this frequently used colors books. So let's delete this cars and let's focus on our symbols. So I told you before that it's quite smart to have those colors as a separate symbols. And that is because when you change your mind about one color in your style guide, you can simply change this one color. And what you have is all the instances off this colors off. This color will change accordingly throughout your project, or you have to Keep in mind, though, is when you create a symbol, and one way of doing it is just create a symbol out of simple rectangle. And if you create a symbol you don't use, actually use this feel color to set the few color to red or green. But you have to nest this second symbol inside, and one more thing to add is that if you are creating symbols that have nested symbols off this color, it's not enough to cope e and paste it. You cannot also simply drag and drop this color until a another symbol. So if you call common sea and command V and try to place it as you can see, it's it's still outside off the definition of this rectangle to symbol. So instead of doing so, that's collapsed. All those groups and those groups are just a definitions off a symbol. It means that you cannot simply drag them or copy them to another symbol. And the best way to have this color inside off this rectangle to symbol is to go to the concert venue and to select symbol from the color group. You now select the accent and you put the symbol inside off the 2nd 1 And now, as you see, this message structure is working really well. So instead of copying and pasting, just try to insert it from this insert menu. And now what happens is when you have those symbols well organized and you have different symbols nested inside each other, you can change the original feel for a master color, and it changes in all of the instances. Okay, so this is great way toe. Actually organize your colors and to use them throughout the project So now let's go to the page one and let's change its name to home up. And we're gonna play with some different backgrounds here and some different properties of background so that you can see the difference between symbols and between using, for example, simple feels. So let's select this article first, and what you can do is conduct placate the art boards, for example of free time. So I press. Come on the end, I have the background color property. So one way is to select all of the art boards, and now you can access the background color property and you can change this backgrounds color. So now let's get rid off. Those two aren't boards, and this is quite nice. But you, for example, you can't have multiple backgrounds as well. You as you cannot have this symbol here and why, when you create a rectangle like so, so create a rectangle that's 100% weight and height off the Archibald. And now let's select the few off our background color. And for this kind of shape, you can select this little plus icon next to the field s so that you can create more more than one field in one shape. And let's create radio Grady int here that split underneath. I'm here and that we can adjust the properties off this field s O that it has, for example, 60% capacity. And as you can see with one rectangle, we have now to feels I can turn them on or off. And having selected this shape, I can make a symbol out of it. And this is a great approach. And I can also said, this symbol to be put to, ah, symbol space. And by the way, you cannot change the original name off this symbol space. So if you want all your components to be start in one page in sketch, you can simply rename the components page so you can keep them all together with your style guide. So let's put symbols here and let's go back to the outlets, create the symbol out of this rectangle, and let's have a name off. Okay, that was color and slash then BG feel and off. Also, let's check this sent to Symbols Page and now in symbols Page, I'm gonna have a few that I can use in many different screens of my applications. So that's commands thee and have multiple copies off this first nut bolt. And imagine now you want to change the background in all of the screens. You can go directly to this symbol, and then you can put, for example, 30% capacity to this little Grady. And as you can see, all the symbols updated accordingly. So this is how you symbols in colors and how you organize them in the symbol speech. I see you guys in the next video. 25. Typography Tools: in this lesson, we're going to visit some nice places for typography in our you I design. Typography is extremely important, and you're gonna take some time to select the proper phones as well as right front sizes to create something that's called a type ramp. And I'm going to talk about in a minute. So first you need to select the phone that you'd like to use. And I usually use phones that google dot com because those are free phones, high quality phones that you can use both. It's catch as well as in your in your final application or a website. It's also nice to make sure that the phone that you're using is available in the language off your application or a website. And finally, you have Teoh select the phone that you are about to use. For example, for our project, I recommend you to use the phone or a bottle, so let's click the plus icon and on the bottom, you have one phone family selected. This is the family roboto, and you can also change the styles. You can adjust the size off this preview, but we're gonna cetera Balto as our main phones. Actually, I'm going to use some other phone, but you can use roboto so that it fits perfectly tarred project. And to use this phone inside off sketch, you have to select this little arrow and then download this phone. Then you need to extract it and installed in your system. By the way, there is also a link that you need to provide your developer if you wish to have this phone embedded to a website you created. But for now we only need to download this phone. And by the way, I have some other link as well on and something to get help that you can use to download all the Google phones so over 800 from families you can download as a one file and installed in your system. You can select club or download here on get help and select Donald Zip. You'll have over 500 megabytes off phones that you can install it in your system, and then you have all the phones from Google that are ready to use inside of sketch and other service that I strongly recommend is adobe type kit, and this is included in your adobe creative cloud membership if you pay for your membership . If not, you can access funds from type kit as well by paying some fees. And you can like the phones here and, for example, said the classification. And also check the language support. And here are really nice phones that you cannot really find on Google phones, their quality phones. And also you can use them in your Web project as well as your application. So you need to have this creative cloud up to sing those phones. But once you sing them with creative cloud up, you can use them in sketch as well. So both of this website are really a great resource to find a nice front of your choice. And also, if you have creative cloud account, remember that you can use the type kit, and also you can use those phones in sketch and the next website is phones Paradox Co. And this is the website that shows different configurations off pair off funds. For example, you have this Josefin sons and as well you have play for as a body copy, so you can march those funds and as you can see, those Paris look really nice. And also, you can download those Paris directly from this from this website. So if you're a beginner and you want to just take a look at some funds that match each other or you just want Teoh search for some inspiration. Most of those funds are available on Google phones, By the way, you can use this website and the last one is right for this is actually a pied up, which is, I think, where if it's money because it lets you sync all of the phones that you have in your in your system and manage them. This is available only for Mark, but yeah, refuse catch. Obviously, you're a marked. So when you open this rightful application, you can search for phones installed in your system. There are no extra phones, but it lets you manage the phones so you can search for serif sounds and all the types of phones. Also, you have this little preview and you can have the least of your phones. For example, I have all the Google phones in one least and all the type headphones I use in one list as well, and I don't have to go to glue phones to search for this. Least I can have also a I I conference here, and one of the great things about right phone is when you create something in scarcer. When you press T for the type tool and you work with some text, you can have this rightful, open and creek through the types to change them directly in schedule is also works in. They'll be software in photo shop so we can go through the least. And instead of using this native sketch tools for text, you can simply use right from which is in many cases, much more user friendly and has more options. So this is how you search for inspiration, and also this is how you choose the font. And if you've made a choice, you can goto a symbol space in sketch and inside the symbol space we're going to create something that's called a type romp and type romp is basically the set off sizes and styles for the phones that you use throughout the project. And if you go to material that I owe, you can see the material design guidelines for her bottle. Actually, so if you use a reporter for your project, you can just copy those values or you can create your own. It really doesn't matter whatever suits you, and there you can see they can get the idea off What type type trump actually is. So you have older styles for example, light regular, medium and old, uh, older sizes compared to what is called display one display to also Heather's on our in our project. Also titles subheadings, Baldick, Opie, captions, buttons. So you have all this times that will be reusable throughout our application, and then it will let you stay consistent with the fonts. You're using it that that's very important for having as table and well designed layout. So, for example, for headlines here you have regular 24 pixels, actually, and then you have, for example, titles with medium 20 pixels. And of course, you can also create a type from off your own, and I strongly recommend you do that. And if you're not not that confident about those front relations and sizes, you can visit the Greed Lover Adults net website and you can set the base phone size here. So this is the body copy, for example, 18 pixels. And the second thing that you determine is the line height, which has to be set so that it's optically well balanced. And afterwards you create something that's called the scale factor. So this is the relation between your heather's basically, and this scale factor is supplied to your phone size to determine the Heathers size. Or you can change the scale factor. For example, two major second or minor effort or whatever you choose. And if you choose some relation, for example, you go for relation to you. Have the body copy the font size off 18 and it's easy to come. That 18 multiplied by two is, for example, 36 for your heather's. And if you if you are happy with this selection, you can go to pixel values. Any can simply copy and paste. Those speaks our values into sketch so that you have the proper type ramp. Okay, so that's how we do it in theory and that are some tools that will help you to established the relation between your phone sizes, and I'm going to show you how it works in practice. In the next lesson, 26. Creating Type Ramp: Okay, It's nice to see you in this next lesson. So we're gonna continue. And now let's focus on some text styles. So let's reorganize those symbols that I have on symbols Page. Now I'm going to zoom out, and yet the symbols will be actually on the background of our application so I can create a huge rectangle here in the symbols page and that I'm going to feel it. I'm gonna change the position of this layer, and I'm gonna feel this layer with the color off my athletes off the background of my application so that everything that sits here will be in the context off some background on my application. So let's move it there outside of this assemble. And now let's change the fuel color off this to a beggar and color. And now I can see everything in context. So now let's look this layer I'm gonna breast common shift Age is for hiding and common shift l is for looking. I hope that you remember the shortcuts. And now I've got this layer looked so that nothing gets selected. When I click on this layer. Now I select the text tool with tea on the keyboard and I can click wants to create a simple text field in sketch. As you can see, this text field expands as I'm writing. That's because this is an alto sized extrude, and if I change the week toe fixed, this text changes, and now I can be select, select, and now I can change the size off the text and the text feeds to this size. I can also select the text tool and then draw a shape off a text field so that it's automatically fixed. So we're gonna usable this fixed text fields as well as out of experience. For now, let's have it fixed. And let's put Heather one inside off this first text field. And now let's focus on some text properties. I'm going to set Avenue as the front of my choice, and if you don't have avenue, don't panic. You can use Roboto. As I said, Roberto is grateful as well. Now let's go to the second property, which is weight, and you're going to use a different weights for different styles, and you can have light medium have your black. Basically, the general rule for all the projects is that if you have bigger size off the tax, for example, Heathers, you can choose some lighter weight, so maybe light or a medium. But if you have smaller text, you're going to stick with medium or black or bold. And that's just because if you have smaller text, it's easier to read when it weights more. So I'm going to duplicate the heather now, and I'm gonna have free more copies. So I have four instances in total. Now I'm going to distribute the spacing between those Heathers and I'm going to create different variants off this heather at these. Bear in mind that this is not a different type off Heather. I'm just gonna create different variants off each other, and usually I stick with free, more variance. That is because I'm going to set this to be a white color, and I'm gonna set off a Toby something between 80 and 90% so you don't have to necessarily stick to 100% because it's it's not that good. If you put it in the context of the application. Sometimes it's so much better when this 10 extra percent are this very color that you have in the background. So I tend to stick with 80 Teoh 90% values for this first variant, and the second variant will be at the text that is slightly darker. Okay, so if we have this 1st 1 ready, let's go to the 2nd 1 and we're gonna just stick to this alpha value. We're not going to change the color. So let's have white text. But here, we're gonna set it to be, for example, about 50%. So usually this second variant is in my applications about 50%. And the first variant Also, I'm not going to change the Koehler value. I'm just going to change the alpha value. And this will be the darker text, so it will blend with the whatever color is underneath. Pretty much so. I'm gonna set 20% off porosity now for the last one. I'm gonna use my accent color, and I'm going to select this heather than press control, see to get to the color picker and I'm going to click on the accent colors so that it now is the color of the text. And as an exception, I'm not going to change the opacity of this color because I don't want blue color to blend with any other color from the background. So now you have four variants off your text and this accent color Heather, we're going to use it, for example, for you, Where else in our design. So if you are creating text variance, you're gonna have to create another rectangle that we're gonna feel with some light color, and you need to create those variance for both dark and white background. So that's why I'm selecting off the Heathers. And if you press command seeking on TV, you're going to paste them in place. But if you select the rectangle and press command chief TV sketch will paste the contents off your keyboard into the top left corner off whatever you selected. So now we're gonna position that text, and we're going to select the free Heather's. So I need to select all off the Heathers instead off the accent color on, and I'm gonna go to the 2nd 1 and I'm going to select the Alfa Value to be around 50 here as well. And also, we're gonna adjust the value off the off the second Heather and we're going to stick with 20% capacity. Now I'm gonna control our just show the rulers. And I'm gonna said the ruler so that I can match the position of this Heather's. This is just a matter of order in your symbols page. And the next thing will do, we're going to create something that school, the textile, and we can select any text field that we have inside of sketch. And there is no textile on the right. We can create a new textile from this menu and we can give it a name. So let's give it a name off other. But we're gonna do a prefix, and I'm going to stick with D slash heather. And this means that this is a 90 opacity off this white color. So it means it's the lightest off the headers that appear on the dark background. And this is only my personal naming convention, but it works really well. So what if it's 80% off? Well, it doesn't matter. I always put 90. Okay. And here, for example, I I always put 50 even if it's 45 or even if it's 58 I always put Heather 50 and I also put the so that I know that it appears on the dark background and for the text that I have online background, I'm going to create a new style, and I'm gonna put l and the L stands for life. So this heather is 90 on the light background. So there you have it. And if you organize your text ties in such manner, you can then go to insert and you can go to in tow style text, and you can see that the D and L stands for dark and light. And those are two groups that will create created because I use this slash in the name and and now I can access any off this text styles, and I can do it in two ways. I can go to insert style text. And there you have this separation between dark and light backgrounds and on light backgrounds. I can have this heather 90 text, for example. In dark, I have two variants, and if I happen to create any text field that I want to form up in this particular style, I'm going to select it, and I'm gonna put some text inside going to select the texted, and I can always actually from this least as well. So I can select that this tax will be variant 90 on light backgrounds. Okay, so that's how you do the textiles. Oh, and also a quick update to this lesson. If you have a text field and you want to put the text to the horizontal center, you can do it with this little guy, but he want to put it vertically in the center. You can also do that. You have to create the text train that is actually higher than one line of text, for example, like this and now you can put it to the top as well. Ask to the vertical middle and to the bottom. And also, one more thing that you will find new and the future releases off sketch is that you can access the file menu and then you can select this. Replace missing phones, they old books, and it helps you to replace all the phones in the fire. For example, if you download some you like it, you can then go here and replace older missing phones. Do the phone that you have installed and you can do it for all phones at once. Okay, so that's it. In the next lesson. I mean, between those lessons, I'm gonna feel the rest of the textiles, and we're going to proceed to our next step. 27. Designing Top: and I went, Welcome to the next lesson. First, I have an announcement to make on. This is good news. That's because from now on, in the next lessons, we're gonna use this all knowledge that you've gained and we're going to create a practical application in sketch. We're gonna do a design that will be a native app for IOS or Android, and it's connected to the smart home industry. So let's get started. And by the way, I have all my ugly duels, all the wire frames in front of me on the piece of paper. So it's not doing anything from space. It's just doing those prototypes, right. And it's just organizing those assets in sketch so that we can have a perfect high fidelity moke up. So let's begin with a rectangle toe and let's draw a simple rectangle. I'm gonna set the size of this rectangle to be the full width, but also I'm going to change the height to feed degreed. So I'm gonna pull to the 72 for example, or 80 or 88 so that it feeds our eight weeks agreed. I'm going to stick with 88 here. It's a nice size. So let's maybe change the color of this Assad's. I'm gonna go to feel and less juice our background color. And now I'm gonna use simple text field, and this will be out of extra. So I click once with the T O on my keyboard, and I select the style off Heather 90. Now I can put it directly in the center, off my shape and basically as far as Texas concert, you can also go for fixed. But now you need to expand this text field so that even longer text appears correctly in this text field. And now it's centered the text, and now you can type anything inside of this text rain and you'll always have it in the center. To be honest, I prefer the easier well way. So I prefer to switch to auto and just make sure that this text is centered vertically and horizontally as well inside off this shape. So I'm gonna set the shape, the text, and then when they used and I meant options. And right now, if you have this text center in the frame now, you can put whatever text you like, and it's always in the center. Okay, let's move on. I'm gonna put it slightly to the top and I'm going to select a new text field. I'm gonna create text field with the address off our property. It will be because the road 19 for example. And now my approach is not to make all the text styles to the type romper in advance. I'm going to just use those things that are creating in the layout, and I'm gonna then move them into our symbol, Spain, into the type ramp. So I'm going to create a 50% off our 10 pixels text. And now that's estimate if this text is even readable on the mobile device, So one way of checking, which is not so good is changing the zoom value so that it matches the physical size off the of the art boat on your monitor. Much is approximately the device, and as you see, it's the Texas a little bit too small. And the second way of doing so is preview on a device which I'll show you later it and it's so much better so you can preview from sketch on that real device. But for now, Let's change the text to 12. I'm going to stick with 50% capacity and now I'm going to select both off those elements and I'm gonna group them. And also, I'm going to put this group in the center off this rectangle. Now let's move the home, toe the left. I'm gonna move it. Eight pixels to the left. I'm going to press l for line and I'm gonna create the line than commands D to duplicate the line. And I'm going to sleep in this line horizontally. And now let's match the position so that we have Ah, arrow. Let's elect both the years and change the fake prince to one and also are going to change the and so that they around it. Also, it would be best to scale those lines a little bit. I'm gonna first group them. So let me select both layers and Commander G for grouping. I'm gonna put this group outside and now I can group. I can move this handles on the group so that both there's changes accordingly. Now let's zoom out and there we have it. So we basically almost have our first top component. But what I'm missing. Here are the icons, and I want the icons to appear to the left and to the right off my component and in terms off the icons. I liked you to know this simple after them using its called icon jar, and you don't have to necessarily use it, but I think it's worth the pan. It costs about 15 bucks, but it helps you organize your icons and all the I concepts that I have here. I have, I guess, over 100,000. I can hear icons here, and it lets me easily view those icons as well as organized in sets. And also I can search for the icons I need. For example, if I search for the user. As you can see, it searches all my sets for this particular phrase or keywords because, especially if you paid for the icon sets, you'll have them nicely organized with the keywords, which is lifesaver if you have 20 off icons and you want to quickly search for the icons, So if you want to put this icon inside of sketches, simply drag and drop it, and there you have it, so it works in scheduled works in for the shop illustrator and was the best is that if you review the contents off this group that you actually have a vector shape, so it means is the best quality you can get out of the icon. OK, so I'm going to use I Condra a lot throughout the course, but you don't have to use it. It's not necessary. You can just drag and drop from finder, or you can install a trier off I control and just check whether this application is for you . So I'm going to use also this streamline icons dot com said, which is also paid. But I think that investing in icons is really a good way to become better designer. That's because you save so much time in sketch. You can obviously design icons. It's very easy. It's very rewarding. However, it's also time consuming, so you can spend this time on something else and just buy a good set off icons. Otherwise, you can use free icons from the Internet, but please make sure that they are at least vector icons so that you have the optimal optimum quality. The next website I recommend issue. I ate the net. And as far as free icons are concerned, I recommend you check out Icahn monster dot com as well as I confined there that come and you'll find some free vector icons here. But you have to probably spend some more time to find the icons that are actually in the same style or just just suit your needs as far as your design is concerned. OK, so now let's go back to the icon jar and I'm going to search for some icons. Then I'm going to put them into scheduled and show you how. What is the best work for with this icons so you can search with within all the sets off icons. But you can also switch to set to search Onley in the current selection. So only in the current streamline said I'm gonna set for camera first and let me see if there is some nice I come with the camera. I believe that this cc camera one is quite gold, so I'm gonna put it into sketch and now I'm going to search for the other key word, which is whether, and as you can see, I would plenty off whether icons in the same state styling as the camera because it's still the same icon set. And I can, for example, said this day, come out and pull it inside off sketch. If we go back to Aiken Jar, what we can do is we can actually change the sides off this icon so that we can see them in a bigger or smaller preview. But it doesn't really affect the size of the icons that are being important into sketch. The same goes for colors because you can easily change colors inside of icons are. But this is only an icon drug preview, meaning, if you drag and drop it into schedule, still have this dark icon. But it's not really that much of important, because you can always select the icon asses this vector icon. You can select this group, and now my workflow is basically ungroomed ing this different groups because, as you can see, there are plenty of groups and now, inside of this last one, we have vector shapes, and that's usually how you get icons out of my contract inside of sketch. So I press shift command G plenty of times until I reach the end off our selection. So until I one group all the groups that are there in the icon and now I can perform operations such a scholar change or thickness change and those operations are applied to multiple selected layers. When I'm down, I pressed Commander G so that I can group the layers all together one more time, and I good read off the strict tango I needed. I'm gonna put this icon into the exact center off this shape, and I'm also gonna transform it. So I rightly Gannett and the Jews sleep horizontal from transformed menu. And there we have our first icon. So now I perform the same operations on the 2nd 1 So I pressed Comanche G until I reached the shapes now and change the color. And also I grew bit commands, g. And now let's like shapes and group them. And now I have to get rid off this rectangle and put this group to the right off our compliment. Now we're going to make sure that is positioned correctly, so I have to position it in the center vertically and been impressed. Command right school bracket, which is our custom people. Shortcut for doing so. And right now I have both icons. I can select both groups, and it's always better to perform operations such as capacity on both groups because it's always easier to access the group an individual layers so that you can select the groups and press free on the key word. And now you have said the opacity to be 40%. Now let's select all the groups and layers and let's make a symbol out of them. I'm gonna put the name top with symbol. And now let's go to the Symbols page and for now, it ones here. But we're gonna move it later. And now let's zoom into this compliment with comment to and what I'm gonna do. I'm going to transform it so that has even more symbols inside. So this icon might be switch with simple over right. So I'm going to create a symbol out of it, and I'm gonna say icon camera as well as this right Ikonomou. It's like the right I can create symbol out of it, and I'm gonna put icon slash son and this arrow as well we're gonna create symbol out of it . This will be I can narrow. And as you can see, I've got another symbols. I'm going to duplicate the whole top. So I'm going to press. Come on. D on the top symbol and this top copy symbol I'm gonna just so that it doesn't have this little subtitle and also an arrow. And now I'm gonna select home and put it in center vertically and horizontally. And as you can see now, I have the alternate version off the top, so I'm going to rename it to top out. And now let's see what we've accomplished with the symbols that switch to home a page. And now let's swab the top toe. It's alternate version. So I'm gonna select top out and I'm going to override home do, for example, office. And also you can swab the icons. I don't really have much icons here, but I can set it, for example, to known to hide this icon to the left. And also, if I go from top to top again, as you can see this override prevail. So I still have the office as the override, and that's pretty nice. So that's all about the top. I see me the next lesson 28. Home Add Ons: Haider. It looks like we are set for the next lesson, and here we have the Pixels website and different images on the Spectator's website. I search for house query and there we have some beautiful pictures off a modern house that select one picture that we have here and let's make sure that we're in the full quality off this picture. Now it's loaded and we can use it as a feel off our layers. So let's create a rectangle, and this rectangle is gonna add in the half off my art board vertically. And now I can set the field off this rectangle till be my image. So I go to feel and I select image option now from the browser. I can grab this high quality photo and just pull it and release it onto this little chalkboard that we have in the image option. So in the image options, we also have feet, stretch or tile, and additionally, in the tile option. You have freedom to adjust this slider, which will make the image beer or smaller, and actually we want the image to be a little bit bigger, but we wanted to be in the center off our off rectangle. So basically the feel option works best for us. But to be honest, I prefer some other methods. So if you want this image to be partly visible, you just select a few off a solid color and you drag and drop this pixels photo to sketch, Then select both players and select mosque. And this is the difference. The practical difference between the mosque and the field common so that you now can adjust the size of the photo. You can adjust the position of the photo and you can transform it freely while it still sits inside off this rectangle because this rectangle is a mask, so we're gonna put it somewhere in the middle. And now I'd like to adjust the capacity. But as you can see, if I try to adjust capacity on the specials, follow What I do is actually I reveal apart off this yellow color so we can click on the mosque and just you can turn off the field and now you can transform. You can change the opacity. Also, you could use this opacity on whole group, and the third way to do it is to use an offer mosque, but it's really up to you. Okay, so we said the opacity to 75%. Now let's draw some shapes and I'm gonna use over. So that's like this Over with common tourism in command minus zoom out, let's command the duplicate the over hold option and shift to make it bigger. And now so, like the field off white color and 20% opacity. Now it's select L for line, and I'm going to draw a straight line with Shift and I'm going to draw another over with Shift so that I have perfect circle and just move it in the center. Now in the layers panel, that's command. Click on both off this overs s so that I can say like both layers and I'm gonna select feel . And let's use one of my accent course, maybe this pink color. And then I'm gonna like the line as well and change the color of the line to this very same color. I can use it from the recent list, or I can just click there. Okay, now let's create a Nikon in sketch, and I'm not gonna use icon jar because I want to show you how easy it is to create an iconic sk