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 sketch. I'm gonna draw a rectangle with the border, raise free. I'm gonna draw another one on top of it. And the border radius here will be bigger. For example, very five. That's fine. Just just position off this rectangle with the keyboard arrows. Now that zoom in and I'm gonna use scissors to delete those two segments. I'm not gonna delete this one because I can enter the shape in vector editing mode. So I press return on this shape And now let's select both off this vector points with shift . And now let's not those vector points with keyboard up arrow so that we have a perfect shape. Let's select this look icon, and that's put it in the center off our circle. Now I'm going to create another. I come inside will be teak icon, and I press l for two lines like this. I'm going to shift, click them and Commander G to group, and then I'm gonna go to transform, and I'm going to rotate it by minus 45 degrees. It also sleep vertically. There you have it. Now let's go back to these layers again. Let's shift click to select them and let's go to border options. I'm gonna sec around. It ends there. You have another icon that's double click on the loop icon to go to 100% view. And now you can select the group and as well the lock icon and go, for example, to change the thickness or the color. You can adjust the options, and basically, now we want to position it exactly in the middle. So I'm gonna have a one group out off this layers, and I'm going to select over as well. And I'm gonna use our keyboard shortcuts to center this horizontally and vertically. I'm also gonna make this second over a little bit smaller, and now let's put it in the center off the canvas by pressing command free. It's actually the best shortcut you can use for that. Now I'm going to select and created text feud pace, the text that I've already had in my clipboard and what I like to do. I'd like to change the line height, and you can adjust this line height, which is 19 by default. For this for this kind off size off the text, but I could put for example, 40. And there we have it afterwards I can hover over the line label, and I can creek and drug to adjust this spacing accordingly. And now, as you see, I have some empty space between the lines of text that tells me to. I put those little icons. So I'm gonna come and see commands, videos, a little dots and let's put it there and we're gonna need one more overall so that I'm gonna say like, this one. And I'm gonna option drag this one so that we create another one and we notch its position with keyboard arrows. Sometimes it's better s so that those are properly aligned optically not mathematically, as you do with alignment options. And there you have it. So we're gonna put those little ticks inside of each over. But first, let's go to I conjure again and I have this little finger I can I'm gonna put it there. So let's on group it. Come on, Chief G. Until we reach the shapes. Now we change the color white color and now we group it again. So I restaurant. Come on, G two group. This icons and I also delete this. Use this rectangle. I'm gonna put the group inside off my art about But right now I can't really selected. So if you have such situation, just select this group that we have here and shift in agit so that its position inside off the art board. And now we can come on k to scale it and on a scale from center and used 200% scaling. And I'm gonna also get read off this little arrow to the right off the finger. And instead of this arrow, I'd like to have a line here. So let's select L for the line tool And then let's shift drag for a line. And I want to have this line dotted, so that's quite a challenge. You can go to border settings so quick on this little icon and just the border properties. We have dash and gap here so we can enter some numbers in dash, for example, free pixels. And then we can have, for example, 10 peaks of Gap so that you can see that there is that free peaks of Dash that 10 pics of Garp three picks of dash and so on. And if you even want to go wider, you can enter another dash and another gap. And there you have this kind of different pattern you can emulate, for example, barcode or something like that. We have this dash and gaps headaches. So we're gonna get rid of all the fields instead off first and 2nd 1 So I'm gonna have a one pixel dash and let and just the gap so that it's for example, 10. And there we have a little lines. But if we round the ends off this lines so that we'll have adults instead and we can also said the arrow like so But yeah, it doesn't really look well at all. So let's get rid off this arrow and we're gonna create one later. For now, I'm gonna just the thickness off the border so that we have for this little dots and probably four is the correct value here, and that's now change the position of it. We can also adjust settings off this line such as wheat off the line, and it really works well. Now let's selectable of the group with this icon as well as line. I press comin G to group it. Now let's use our keyboard shortcut Command left bracket a square bracket to position it. Directing the center. I'm gonna option dragged the text Field command A to select all the text here and I'm gonna put slides to open here. Let's put it under our icon. Basically, I think that we no longer need this arrow. This icon looks nice right now, so I'm gonna just put it into this group and let's change the opacity off the whole groups , like the group free on the keyboard. And there we have opacity off 30%. Now let's select this group for again and I'm gonna create symbol out of it. So let's have looked to open symbol and just let me take a look at this, the structure of the layers. So let's have this group to as separate symbol as well. But what we have here is we have this little tiki idol, so that's first create at ICANN offtake symbol. So we have I can take and then we can select both layers. Both rectangles forward look anti gun that create symbol out all those layers And let's say it's icon. Look, there we have it and it's always a good idea. Toe. Keep your layers organized as well. So once in a while, please go to the hair spinal and renamed the layers. Delete unnecessary groups and just try to keep it organized. And you don't have to do it every time each time you create the layer or a group. But it's nice to just clean it up. Maybe after you create a single screen. Okay, so what we're gonna do right now is I need this little lock tick icon to appear on the other dots. So I'm gonna go toe icons and I select IQ. Now let's zooming and that's ah, recites a little bit with shift so that I hold proportions. I need it slightly smaller and have the stick also copied and pasted once again. And that's not it. With shift and keyboard arrows. English. Let's copy and magic again. So now we can just to clean it up a little bit because our first screen is ready and I'll do it in between the lessons while I see you in another video 29. Organizing and Naming Assets: So at first I thought, I'm going to clean up the layers in between the lessons. But now, when I think of it, I just believe that this extremely boring class and will be kind of a help for you to let you organize your assets better not only for the layers upon purposes, but also for export. And that's quite important. So in a second, we're going to jump back to the layers panel and we're gonna reorganize the virus, create groups. And most importantly, I'm going to show you what is the best naming pattern for your layers and why. Okay, so the first thing is that you don't have to rename the layers all the time. When you create a layer, just move on, move on. And when you finish, for example, one screen or some bigger part of the screen or a component Now you can set the proper names off the layers, so first operation you need to perform is leg the layers and group them together. So you press and hold command on your keyboard, and then you select all the layers that, in your opinion, needs to land in one group. So that's like the stink eye comes as well. And now you can press command g to group them. There you have it. So this is the first group I press command are. And now, in this editing mold, you can press start to go down the least as well as later on. You can press shift, stop to go Abdel East, and you can batch rename all the layers and groups, so that's pretty convenient. OK, so now let's move on to the naming conventions. And you already know one smart naming convention when you have name off the folder and then you have smash and then name off the layer, which lets you go to the insert menu and select symbol. And there you have all of the layers grouped in this folders that came before the slash s so we can go to symbols. And as you can see, I've created some more symbols here and more icons. And if you take a look at the layers, as you can see, they all have a proper naming off icon, lock, icon, slash and so on. But that's not all. If you select the layers, for example, that's a shift click on and select some off those icons as well as I'm gonna command click to have this color BG feel and color accent free selected as well. You can go to export options and you can click on make exportable button And there you can have all of these art books actually made exportable, and I'm gonna export them. And as you can see, they're gonna be saved in this export folder. But instead, off this individual files in this folder, what I'm gonna get after export are two separate folders. So I have this color and I can folder as well. So as it seems, it not only groups the icons in the insert menu, but also it created the folders. Why exporting so that you have all those assets organized in separate folders and they just get their names from the name before the slash in the name off the symbol. So that's pretty neat, huh? Let's go back to the home up page. And as you will see, we can even create more complicated and advanced structures off a folder. So let's press command are to go to the edit mode now that support home slash in four for this component, and let's make this component exportable. Now we're going to save it in our export folder and inside of home. We have this info, so there should be an invoked the PNG file, and there it is. But we can go further and we can change the name off this group again so that we have some extra folder here, for example, that's have a name off up for that folder. Let's put a slash here and let's export again. And now you have nested structure off the folders. So we go to the home folder and inside you have this up folder and there you have info the PNG file. So that is how you nested the structure off the layers. And actually, one more thing that is strictly connected to the names of your groups and layers as well is some CSS properties that you can export directly from sketch and pass it. Teoh, for example, front end developer. You can right click on any layer or just commodity on on layer or group, so let's brightly on this group and you can copy CSS attributes. And now, if you place the CSS code from your keyboard. You'll have the layer names as a comments in CSS coat. So that's pretty important to So now you might be wondering what is the perfect naming convention convention for your groups and layers in sketch? And actually, I'm going to give you one hint. So let's first rename this group. I'm gonna select the group and expand it. As you can see, there are plenty of overs and icons, and I'm going to press command are toe rename the group, and I'm gonna put home first. And that's because this is my home screen. So the first part of the name will be the name off my screen. And then I put slash so that I create another folder and I select the name off this very component. So probably this component can have name off info, and that's it for the name of the group. Now I pressed Tub, and I put the name off this both as first screen as well as the complement at the beginning , off each layer or each symbol and there we have home in for icon, lock and also plenty of home in for icon teak. And this is actually a way to avoid having multiple instances off each image. So if you just want wanted, you have the same names. And if you want different BNG fires, you put different names, for example, of a one off all to over free and so on, and they're here. We're gonna have home in four line as well as this text, and we're going to rename this text so that it matches the group contents as well. So let's have home in for a text. Okay, so that's it. Let's go to the next layer. And now we have looked toe open components, and we also need that home screen to be put in the beginning because we needed to land in the proper folder. And then we have, for example, home hero. Inside, we have those two layers, and we don't need to rename those. Let's go to the top layer and let's put home before the name as well as we put the name off our string before the name off the last symbol and now will have everything organized in this home folder while exporting. And it's also nice to have the correct order off the layers so that we have the top elements on top most layers and we go to the bottom. Sometimes it's not possible because because if you move hero to the top off the info panel , it will cover this little icon so that we have to change the order off those two groups. But if you can just please try to have, ah, right order off the layers so that you can go from top to bottom like so, and I don't know if you remember. But there are also keyboard shortcuts for moving the layers up or down the layer structure , and this is comment. Option up or down arrow, and also you can press control. So control comment. Option down or up, to move it to the top, most layer or to the bottom off the layer released and also one more keyboard shortcut is a common shift. L. And if you press command shift, L you look this layer so we can look those layers and groups that you no longer want to edit that you finished, for example, after finishing your work with this screen. Now let's move into symbol space, and another good advice is to keep the symbols page organized and to keep those symbols layers organized as well. And as you see, we have those text field text styles here. And as I told you before, we're going to add some extra textiles here as we move along with our layout. So here we have the styles for the headers and also different variants off the headers. But if we go to the home up, as you can see, I have now to extra styles for the text, and I'm going to select the first style, which is a body copy, and it will be Avenir Medium 14 and let's copy this text and let's move it to the symbols. Now we're going to search for those headers. I'm going to select Textiles Group and paste it here. Let's change the position and let's move it inside of this group. I'm gonna come on a and change the name toe body copy, and this will be my second textile. Let's select this group and a select click through one selecting option. This will get me select each individual player with just the one click, and now I have having your medium off 40 pixels. I'm gonna option dragons to have one copy. And then I'm going to press commodity and commodity again to duplicate this action. And now we're gonna change the how far to 50 and that we're going to change our far too 20 in this for first copy. Now let's go to the 4th 1 Let's breast control, see, and let's elect our accent color. So one more thing we need is we're going to select this layers and we're going to copy them and create the light Valiant off the background. So let's command ship V to paste them into this shape, and I'm gonna shift down are two Majette. Now we need to select free off those text fields and change the color to black. And I'm gonna adjust the, um, Alfa Accordingly. I'm gonna put 50% off in the second copy and also 20% our fat in the first copy. And please believe me that I know it might seem boring the first time because you keep doing the same operations over and over again. But if you make those text styles available for each type of text, for example, let's take this fert text which is a caption in our case. And let's say that this will be a caption and we're gonna save the stocks for this caption text as well as creed, variance of it, so you'll see that we're going to do it. I don't know 12 or three times for 1st 1 or two screens, and afterwards it will be so much easier because you have the whole structure off this styles for the text. And again, I'm going to use the naming convention off the for the dark background, and I'm gonna say, that's Bolic Opie. And at the end, I put the name off the variance. So basically, that's a number for the lightest variant. It was 90 for the 2nd 1 50 for the 3rd 1 it will be 20. The name off this layers inside off layers are not that essential here, so we can leave them eso and you'll see that soon this structure will pay off because you keep using the same symbols. You keep using the same textiles of the same pike owns, and if you keep them organized, if you keep them in the symbols, you'll see that this is really nice structure to have, and from time to time you'll discover that you can have even more symbols nested inside off other symbols. So let's clean up the background off top and top out version, and we're going to use this color BG instead. So let's select the top and let's go to insert symbol color and gonna use BG color. Let's put it as a separate layer here, and I'm gonna choose the position off 00 accent wire. Let's put it at the end off our layer structure for this particular symbol, and I'm gonna come on see and Kamanzi to paste it to the other one. And probably now we are starting to realize that this whole naming convention and this folders it immediately starts to make sense because if you select this master copy and you change the color to green, you have this green color in all off the symbols as well as in your project all over the place. And there you have it, another lifesaving technique that will be especially useful when you have a bigger project . When you start to design in other screens and you'll see that this naming conventions as well as having those separate groups for the insert menu, but as well as for the export and CSS code is pretty useful. That's all for now. I see you guys in the next lesson. 30. Different Home Screens: hello and welcome to the next lesson in this lesson. We're gonna start off by creating some alterations off this art board. And this is quite a nice technique. If you want to have a different state, for example, for your forms, for the battles or for some kind of compliments, you don't do it on the same art board, for example, with different groups that you have to hide and review. It's so much easier to do it with the iterations off this first our boat. So we're going to duplicate the our boat, and we're going to create different versions off this info panel that we have here in the home in four groups. So let's click on the art board and I'm gonna press commands need to duplicate two times, and we're gonna have three different states off this home screen. The second screen. We're going to select the ovals and let's go to few and let's select orange color so that this is some kind of a warning state, and the 3rd 1 will be open states so gonna have green color for the over 40 overs. Now let's get back to the second screen and I'm going to select those items that I want to get rid off. So I'm gonna delete both those of us as well as all off the peak icons. So let's select this with a common clicked. And also you can right click on any layer and then within the right click. You have the second option off replaced with so you can replace any item with some other a graphic. But I won't do it right now. I can simply delete it with backspace. And now I'm gonna pace to hear some text. And let's change the line heights to 20. And there you have some kind of a warning that the alarm is inactive and it needs activation. So we're gonna go to insert symbol. I'm gonna use exclamation mark that I've created in between the lessons and I'm gonna put it here. Let's move this symbol to the top of the group so that it's visible. Now it's natural a little bit with arrows. I'm gonna press command d to duplicated and I'm going to shift down auto Nagy it so that it appears on the second on the second over. Now you can access the wheat input field and you can press down or up arrow to change the wheat. And if you have this look, I compressed. You have. You are changing weight and height accordingly so that you don't have to change the dentist ice off the icon in the maximum zoom level. You can do it with this ice field as well. Now let's move on to the 3rd 1 and it's pretty easy as well. I'm going to select all the text with command A here. We're gonna play some info about people that are inside our house. And now I'm going to zoom in and Commons shift, select all the layers that I want to delete. I pressed backspace to delete it. And now let's focus on this. Look, I got so I'm gonna press commands to with the lock selected to zoom in. And now I need Teoh. Modify this icon. However, this is a symbol. So I need Teoh, right Click on the symbol and I need to select detach from symbol so that I no longer have this symbol. But I have this original group and now I can enter the editing mode for the vectors with return and click on this vector point and simply backspace or delete it. Otherwise, if I'd make modifications to the master symbol, all of the instances off this look icon, all my, my, our boards would change so that I had to detach this from the symbol first. Now I'm gonna create free overall so that I can show the avatars off people staying in my home and let's Creed and over with shifts so that we can hold proportions. Now it's commands D. Now it's press shift and just move it so that we have the second copy and co Mandy and move the first copy. Now that's control. G toe showed, agreed, and let's zoom in a little bit. And now with shift, I select free items now if you try to move it in the center of the art. But it's not that easy because we have this different smart guys here. But what do you do in this situation? You press Commander G two group in one group, and now you can use the align options so that it's very easy to feel it in the center off the audible. Okay, those overs, we're gonna feel them with avatars. Let's not them so that they like precisely on our greed. Eight weeks agreed, and now it's perfect. So let's move on. And this is actually a nice important for me to show you the potential off sketch plug ins , which are extremely useful, and you can use them for different purposes. Most of the plug ins are on Get up, and you can actually use sketch toolbox dot com, which is a free up to browse all those wagons on, get help and install them, and to sketch. You don't have to use it. You can simply download the planets and install to schedule directly. But this is so much easier. So if you open sketch toolbox, you can search, for example, for content. Generator plug in and I'm gonna install this content generated generator sketch Blufgan Eso Let's just click on install button. And as a matter of fact, I had this blocking over the installed so I won't do it again. And you don't even have to restart sketch. You simply go to the plug ins, and there you have this content generator. Plug it in starts, so to use content generator, we need to select all the shapes so that shift click on the shapes and we need to enable the few because it will use field to feel it with the images. And we're going to go toe plug ins than content generator. And we can use different things like images, numbers, text. Actually, we're going to use a personal now, and we're gonna go to photos. As you can see, we can choose from female, my neutral, and there we have some random female photos. We can also use some different photos if you want. So that's press command Z toe under this action, and you can do it by Baggins. And of course, you can use content generator, but you can also select around female again action, and there is a heavy keyboard shortcut as well, which is control shift. Our let's click on it and thats press control shift are a couple of times so that you can see different results. And if you're happy with the results, you can finally stop pressing those buttons. You'll find yourself pressing the money times, but now that switch to the borders and I'm gonna make four people thickness off the border and also decrease the opacity. And as you can see the position off the border, his center, you can change it and you can set inside or outside. So we're gonna set outside border and this look quite nice. So let's zoom out with comment one. Now that's like the art board commands to zoom in now. Control G. Teoh Hide agreed. And let's select those of us again, and I'm going to decrease the opacity off the border just a little bit. So now it's perfect. Let's move this group up so that we can feed the names off our our avatars. The 1st 1 is Ana. Let's select the style. As you can see, I did my homework and and I did some pretty styles for the text here. That's common chief click to select both layers. And now let's go to align options and allowing them to the center horizontally. Now let's put it to the top, and now you can move this text layer and afterwards, without releasing cleft most bottom, you can press option key so that you have duplicate. And now let's change the text to, for example, Jenny, and we're going to move it again with Come on the I duplicated, I move it and let's snatch this text and let's say, for example, Laura. Okay, so there we have this first article. By the way, you can move between the art boards with keyboard shortcut, which is function key and then left or right arrow on the keyboard. Eso Let's move to the second screen and I'm going to create an extra button here that will let me activate and the alarm and get rid off this message. So let's press are for rectangle that's create direct angle with the proper border, and I'm gonna use this orange color for the border. Also, let's have some big border radius so that borders are completely rounded. Now I'm glad. Make this guy stick with center off. My are doubled and a little bit smaller. Now it's Presti on the keyboard and let's click ones for out of Wheat text field and this text. It would be best if it's positioned in the center. So if the Texas A nine foot to the centre and I hope that you remember those keyboard shortcuts, so shift command left Bracket key is lying to the left shift command arrived. Bracket Key is trying to the right and chief command Slash is lining to the center so that we make sure that all the resizing options are now correct, because the text is said to be in the perfect center off this text field. So I press comment A to select the text and I want to make this text upper case. So let's go to the type man, you know, player, but type I knew and we're going to go to text transform and upper case now. As you can see, it's still lower case. But if you escape that text field, so if you click outside, this tax will be automatically converted into uppercase. Now, some more great keyboard shortcuts for the text. If you press option command pass or option command minus, you will have the text changed the size so you have bigger text with the plus button and, of course, smaller text with minors button. Also, if you have selected the text field, you can press command key on the keyboard to access the typeface, and you can immediately start typing the name off the typeface that you'd like to use for this text. So that's begin typing Avenue. And now you can use keyboard arrows to go down the least or to go up the least and see how they change, how the phone changes accordingly. And then gonna also select the white off our phones and let's stick to probably heavy. And also let's change the color too hard this orange color. So now we're gonna center the text in the bottle. Let's like both liars and let's press our keyboard shortcut, which is comment left bracket and comment. Paride bracket to century directly in the middle, and I forgot about the car off the lines. So that's common Creek on the lines to select them and change the borrowers accordingly to orange and green. Now let's create a symbol out off this bottom, so select both layers, and I'm gonna make a new group for this same kind of symbols. So I'm gonna have battled slash standard, and this is my first valiant Off this bottle A Z can see it's fully responsive as well, so that it can scale Everything stays in the center, and also I can override the activate label so that you can have different text for the battles. So that's it for the three iterations off our home screen. I hope that you enjoyed this lesson and I see you in the next one. 31. Button Variants: Hello. It's nice to see you in the next lesson. So in the previous lesson we've created at Barton and afterwards we made a symbol out of this bottom. That's great. But we need some more versions off this bottles, and we're gonna do it in the symbol speech. So let's like the bottom standard. And as you can see, we can Onley overwrite the label here. However, we'd also like to change the color off the stroke, for example, and also possibly make some states, for example, when user hovers over this battle or when the but on these active and to do so, we're gonna go toe this symbol definitions. So it's double Greek on this symbol, and now I'm going to zoom in and let's for a second brainstorm some ideas off how it might be done. So first, let's go to the toolbar, and I'm going to right click and customize the toolbar so that you can see there is a symbol and also a style text bottle. If you add those buttons here to the money, you no longer have to dig deep into this insert menu. You oh, you can access, for example, colors from the symbols. So let's insert our accent color and let's put it somewhere in this symbol, I'm gonna skate so that it feels our entire bottom. And is it even possible to feel this stroke of the blue color? Well, if it's like both color and rectangle and you try to mask it, well, you have the background off the color off your choice. So if you have bottles with solid background, that would be an option. However, in our case, it really doesn't work so well. So if we try to access this mask properties, as you can see, the field and border is kind of great out. It means that you cannot use the only border or only feel for a mosque. So maybe in future version of sketch, not in mind, at least. But the other option is to go to layer and then convert to outlines. And what does it create? A different path different shape off this particular shape that you have here and now you can select color as well as the second layer and turn on the mosque. And okay, there we have it. So it is possible. Well, actually, it is but it's not the best approach. However you return to the instance, you can now stop the colors off the outline, and it works pretty ninth, nice s and override. It's not the best approach, because if you try to scale the bottom, you can have the different results, especially if you escape did without proportions. And another, I guess, bigger problem is that for now, at least in my version of sketch, you can't override the color of the text. So that's an issue, and we will solve this issue by creating different versions off the bottom. So that's option dragged the 1st 1 And now let's press commands did to create different symbols that will be the different types of our battles, and we're going to change the colors so it's a little bit off clicking. However, I think it's worth a while because you do it only once for your application. And let's change the colors for errors. Now we have except colors, So the green buttons, and also we're gonna set the last color to a blue color. And even though our brainstorming didn't went so well, I think that this technique is also very useful and please remember this. Convert toe outline options in sketch on Second Fault There are some plug ins for sketch that can allow you to change the color values throughout whole document. So if you check the color values for green, for example, this is for four db five e you can with a plug in. You can swap those values, too, any difference color throughout whole document. And maybe you're going to use some kind of this kind of talking once in a while. So, yeah, that was just from the top of my head. Now let's collapsed those groups, those symbols and changed their names. So that's press comment are and that the first bottle is the blue one. So we have this standard dash accent. The second is standard Dash, except the 1st 1 is the red ones. So we have an error here and standard bottom with some information. That's warning states. So let's put warning here and OK, so there we have four first states off our buttons. I also always do white and black bottom so that I have this neutral generate buttons so that I can use them later in my project. So Let's change the colors too wide. Eventually, I wouldn't use pure white and pure black as well. So maybe some kind off, black ish color, not perfectly black here, so you can change the color value all you can just manipulate capacity. Now that's command are to change the name off this bottle, and this will be standard W So why'd probably you can use a standard light as well. And here we can instead of black use d for dark. So we're gonna have default before dark button and l for polite bottom, okay? And that you have six versions off a battle and this is only one valiant off this bottle. So let's select them all. And let's option drag to have another copy and let's commands thee to have even another duplicate off those six buttons. Now let's select all of the items here in the for dro and let's go to opacity. I'm gonna do the active state off the bottoms and it will be around 20% capacity. So there you have inactive state and the second, the second layer. So let's select only direct angles that we have here. I'm going to change the properties off these buttons and at some shadows. So we have effects in sketch over there, and we can at shadows also in their shadows. And we can enable those gals sindler property as well. So I'm not going to use those younger. And also, I'm not going in their shadow and let's tweak the values a little bit. I'm gonna put zero in y position so that you have shadow that is equally distributed across stroke and you can change the blurriness of this shadow. We gonna leave it at four. And well, that's I'm going to do. I'm going to change the color so you can have even a light shadow here so that our bottoms have this little glow effect, and I'm not going to use pure white color. But instead I'm gonna use this kind of yellow ish color and maybe money. People I manipulate the are far capacity a little bit as well as you can even set a blending mode for days. I'm going to stick with around 36 Alfa Value and this active state off the bottles now looks looks really nice. I'm gonna also turn on field and to use white feel with some only a couple of percent capacity, maybe six or 5% capacity. And this second row is now the active state off my battles. So it would be now best to change the names off all this copy of instances off the bottom. But I won't waste your time. I just go to this bottom section off symbol, swap many ads Now you can choose whatever button you like to use. For example, this copy variants that are active states and copy to violence that are these able states. So let's switch to another one. And there you have it. So this is how you organize the bottoms structure in the symbol speech. So thank you for your attention. And I see you in the next lesson. 32. iOS Preview: sketch has a great future that is called sketch Mirror. In this short lesson, I'm going to show you how to preview your layout directly on a mobile device such as tablet or phone. So first you need to download, freeze, catch mirror up from the APP store and it is available only for IOS devices, at least for now. But also, you can try this French party does, such as crystal up or paid up, which is color preview, and it should work on under it as well. However, in a second I'm gonna show you a tip on how to preview on Android within your local network and let's switch the sketch. And now we're gonna use this catch meter up on my iPhone. And when you open the up, you have ah, short info that the APP is connected to the sketch file that you're working on, as well as a preview off the first articles. For me, it's always best to connect my phone with the U. S B cable because it's also charging. However, you can use only WiFi network and you have to be in the same WiFi network for both your laptop or your computer as well as your iPhone. So you can now click on this mirror icon in the toolbar and you have connected devices. I have one connected device, which is my iPhone. And also, I have this little icon that will enable Teoh preview this project also on the browser. And this is this little handed trick for an android. If you have your android devices in the same network, you simply copy the address. So you have the I P address and deport, and you paste this address into Androids browser and this is it. That's how you can see the life changes off your sketch. Five inside the Android browser. So I usually try to have my iPhone connected all the time. And when I'm working on a Web based project and, for example, want to share with my colleagues at work, sometimes I can pass the I P address, and they can preview the prototype as well. So now let's take a look at the up. If you tap on the art board, you can access the first our boat, and then you can swap a swipe left or right. Teoh have a preview or off some different our boards, then you can select anything on the our boat. And as you can see, the changes that I make in sketch are real time on my device. And it is really great experience to have it on your device all the time because you can always double checks. For example, the phones, phone sizes, they appear correctly. If they are readable on the device and also line heights, you can apply some difference pacing for the elements that appear on your form. And also you can double check the colors, which is quite important because sometimes there there are minor shift between the colors on your monitor and on your mobile device. So I strongly encourage you to use it all the time to have this sketch mirror up turned on . And also, it's nice to have your phone connected with USB cable because it gives you a smooth life preview and also with charges your device. So that's all for now. I see you in the next movie 33. Login Screen: In previous lessons, we've created one screen which say, Home screen and we have three different variants off the screen. So now I'm going to select the first art board, and I'm gonna option drag to duplicate it. And this is how I actually structure the sketch fight. So from top to bottom, we're gonna have different sections of our applications. So this is basically the user flow, and this is how user navigates through different sections of the application. And as far as this horizontal from fellow is going is concerned, we're going to duplicate the art boards horizontally and to create different variants off the pages or different subsections off each section off our application. So this is how it works. And now let's focus on this first screen. So before we go to the home screen, we're gonna have a logging screen. So let's go to the background layer. And there we have this. Grady and I don't really need this Grady in for the logging screen. So I'm going to detach that from Symbol, and now I can access the rectangle and I can turn off the fields. Let's go to feels and let's turn it off. Okay, so now we can work with this first screen and let's turn on the hero image. I'm gonna make this mask a little bit bigger so that it covers an entire art board. And also, we need to make some adjustments to the photo so you can not like the photo, and you can move it as well as you can resize it. Remember that underneath under this photo, we have its native resolution so that even if I multiply this size by two as far as with its concert, I'm gonna have perfect Cory image. So maybe we could make that a little bit smaller. And let's put it in the center and also any as you can see, sometimes working well for high resolution beat maps in sketch is quite slow. So if you have plenty of beat maps and you try to move them, resize them, sketch my response slowly, and to make that happen faster, you can go to the edit menu off the image, or you can just press return on the image, and here you can make a selection. And with this selection, you can invert crop or, for example, feel it with some something. Okay, you can even use Magic one. But for now, we're just going to make a selection that is slightly bigger than the art about size. And when you have this selection ready, you can goto the options and select crop. And now, if you crop, you get rid off all the unnecessary peaks. US and sketch will respond faster. Another way to optimize your images is to use one of the positions in sketch money. And if you select the image and goto layer, you can select image and reduce image sites. Sometimes if you have really high quality images in sketch, this might help. But for this image, it's already optimized. So Sketch says that it can't optimize this five anymore, so basically used this option wisely because later on, you might not be able to turn it back. So now let's decrease the opacity of our image, and I'd like to show you guys on their options. So let's turn on the gas in there, and the standard option is giving you the possibility to change. The amount of the blur on you can have more or less blurry image while you if you access motion blur. You can also change the angle. So now you can see that we have different angle for the blur and we can determine an appropriate amount. The next option is zoom, blur, and for assembler, you can click on edit to added the origin, and you can change the region so that you can have this zoom going into some particular place off your image. Somebody you are peaks off your image and that's take the gas in there for this image and I'm gonna have around seven peaks of blurred here and now let's place here some text. And I've already copied the text from another art aboard so that we don't waste time just typing the text. And also please know that if you press command v, you paste it in the direct place from where it was coping. What if you select anything for example, this shape and press shift command v you gonna passed it to the top left corner off this selected shape and also you have an option toe, right click or control, click anywhere and use paced here command and then sketch will paste it in this very pixel that you clicked on beginning from the top left edge. Okay, let's paste it in here and now let's try to make a little icon over there, so I'm gonna use a personal and we haven't actually used this tour from the beginning of our course, but on the other hand, it's not that useful in sketch. But you can go creative with the special toe and maybe, let's imagine we can draw something. We can draw a line like this. And the great thing about this line is actually that this is a border, so you might change its properties. And this is also a path, so it's full vector. Now. Let's actually try to create something useful with the pass. It'll and let's try to create a little fingerprint icon. I'm going to draw it like so, and it's not the Cubist one I know. However, now you can access the border appropriate properties, and you can change the ants so that they around that you can change the joints. You can also determine the dash and gap and even, for example, have four and 10 and even go wider and have another four and two picks, a gap to have different effects, and there's actually quite a big chance that if you try hard enough and you change all those values as well as if you entered vector anything mold later on. So if you press return and access all those vector points that you have here and trying to change their positions using the keyboard arrows and she spent 10 or 15 minutes on this, you get this kind of icon. And another creative approach to using a fancy is actually do leak so you can make some simple Do those, like so, and I know it's not very pretty. However, if you access the border properties right now, you can create something that's kind of ah graph, for example, or some particles so you can go with rounded ends and then have some small dash and huge gap. For example, 100 and there you have the little dots Feingold around, and if you change the dash, you'll have been flying in different, different mother, and you can also change the gap accordingly so that you have different particles, and now you can access this second section and said, for example, dash off free and cap off 200 just make those values different. And let's imagine you have a flow chart or a graph here, and you can least like those data in in such a manner. So it's pretty cool, actually. Now, that's a finish off this icon. I'm gonna draw a rectangle here and let's duplicate district ago commands D Now let's imagine to the left I'm gonna enter at this anything mold with return Select one the vector points and put it 20 pixels up and the 2nd 1 20 pixels down with shift and down arrow. Now let's create over here and that select both rectangles, and I'm gonna use Boolean operation off Union. Now, I need a line here, so I press l and I draw a line that's position it correctly. Now I want to delete the part off the line that's behind the fingerprints. So let me enter the editing mode of the first rectangle, and I'm gonna add to vector points here. And also let me enter the scissor stool and delete this segment underneath my icon. So that's it. Basically, it's almost finished. Now, maybe I'm gonna enter this, um editing mode again and select with shift. Both those vector points and shift left right our own magic to the right. Now what we're gonna do is select the art board and let's change its name. So I Press Command are and I said, It's logging screen. Let's select some layers here from the icon and let's create a group out of them. I'm going to change it to logging slash icon. Then let's like both text fields and also make some clean up over there. This will be logging the lovely slash info. And with us, we have this finger brings home hero image. So maybe sweet home and put Logan here as a name off our screen. And I'm also gonna get read off this, uh, logging off this home and core section for my field. Okay, that's it. We have the first part off our logging screen. Now let's select the second text field with command and let's option drug. It's so that we have a copy here and below the icon. I'm going to give you their an option toe logging with his passwords. So I'm gonna use symbol off a battle and let's use this standard lied about on I'm gonna make that bottom bigger. And also, I'd like to put it in this center off my Archibald horizontally. So I pressed command left square bracket. Now I can do overrides to the text, but I also want to change the border. So I arrived leak at I select detached from symbol. And now I can change the text. So let's put here type passwords. So this bottle actually transformed into an input field. Let's like the group. I'm gonna press five on the keyboard to change the opacity to 50%. And as this is an impulse field, I'm also going to change the styling off this rectangle. I'm going to select rectangle and so, like dash off four and Gap off nine. And that was impossible to do without detaching it from symbol. So now we can group some layers, for example. That's like those groups that's put fingerprint inside off the logging icon. And let's create a symbol out off this icon I'm gonna put I can hear and this is logging. And also, I'm gonna create symbol out off this bottle as well. So let's select the layers. I'm gonna create symbol. Let's put input and I'm going to ride boss words, and that's it. So please remember to keep everything in your later spinal clean and tidy. Now let's delete this group. It's no longer necessary. Let's change a positive to 50% again. And now let's create this different state for our our logon screen. So let's click on the name off this art boat and let's duplicated with commands D and this will be the active state off type password input field so that we move everything up. And I also want to highlight this type password field. So let's like this field and let's change the opacity from 50% to 100%. And also let's override this type password inputs so that we have just line here. So it symbolizes that user can right here. And also we need to go to file. And here we have the templates. I'm going to use IOS. You I design templates, and from this tempered, you can borrow, for example, a dark keyboard. I'm going to come and see copies keyboard here. I'm gonna paste it and move it to the bottom off our screen like this. And there you have it. It seems like we have this looking being almost ready. And if you take a look at the symbols, those pasted symbols are here as well. So we have a keyboard and dark and lower. That's the structure. That's the naming convention for this keyboard so that you can use it later on in your next part. Boards. Maybe you're gonna also change this. Not really into it. Text and press command A in the text field and just, let's say type password here. It's probably This is it. You can now go back to the symbols page, and you can adjust some symbols that we've created in this lesson. Maybe we're gonna create this halo effect for logging icon as well. So that's a shadow here as we're gonna use some simple shadow. And let's change the core to something bright. Maybe our one of our accent colors. Let's change the Y position. I'm going to put zero here so that the shadow is equally distributed across our icon. Not and now it looks quite nice. So this is a nice halo effect that appears on both instances off this icon, and that would be for this lesson. I hope you join me in the next one 34. Home Screen: welcome to the next lesson, and let's first off. Talk about pages in scarce so you can add as many pages as you wish. And the question is, do you really need them? Well, obviously, it depends on the project, because if you have a large project and you have different sections off your application or , for example, a website, you're gonna have different pages to optimize your workflow. For me, I create pages, mostly because off the efficiency well, if you have different pages, sketch tends to work faster. And if you have plenty of our boards on one page, it would probably have a direct impact on the performance off your machine. So if you discovered that sketch is just starting to work slowly, then consider having a next page for the next article off your project. Sometimes, though, it's nice to work on the same page. That's because you can access different art boards and, for example, copy and paste some elements. Some text field some icons from there, and you don't have to go to, for example, inserting symbols and stuff. So so it's just bear in mind. But please also remember that for efficiency reasons, you'd like to have more than one page in your project and that you usually will keep different sections off your application or different sections off your website as a different page. So now let's create a different fight for a general section off our application, and I've already cope it one off our art bores so that I could pace it here. And we will start from a certain size off the art aboard and maybe, just maybe, we'll use some assets that we have here as well. So let's reset the position off X and Y 200 I'm gonna delete almost all of the layers. However, I'm gonna have this background field to be within this art board, and let's have a symbol off top. So now it's time to test some keyboard skills. You're gonna have to press option tub, and then you learned on the first in the first input feed off position. You press zero top zero, and there you have reset the position off X and Y coordinates. I'm not sure if you're a gamer or if you play Mortal Kombat before, but this option Top zero top zero sequence sounds like a fatality or something. So let's now go to override and let's override above text fields. I'm gonna put rooms and also select room here. And what I liked override also are the icons. So I have those icons to the right and to the left and let's go to a symbol overwrites. And instead, off this I consent, I'm gonna choose icon settings and I need to override this camera with some kind of home button that will let me go to logging a screen. And if I try Teoh, change it. As you can see, there are no symbols to override and why this happened? Well, actually, this is a very good question because house catch determines what kind of symbols to show you in this symbol over, right? Well, if you get back to the symbols page, you discovered that you have plenty of symbols, and the actually sketch chooses the symbols that can overwrite each other by the size off the symbol. And let me show you what I mean. If I select icon camera and I go to the size settings, I can see that it's 24 by 22 pixels. Let's select some other icon. For example, I consent, and as you can see, this symbol is 24 by 24 pixels. And even if you have an icon that is not entirely enclosed by the symbol, it's not a problem unless you have the symbol that is three correct size and that it can override eso. If you have 24 by 24 it works well. So let's change the size of this icon camera to be 24 by 24 pixels. And if you do so so let's change the height and you get back. Teoh this, uh, general screen. And now let's try to override the camera, and all the Akron's are on the least. And that's because all of the icons are 24 by 24 so that you can easy change them, and I'm going to change it to this little home icon with the padlock and this home icon. The world go to the log in screen. But for now, let's focus on the next item here. I'm gonna put a bottle. Maybe let's use this standard accent bottle, and based on this battle, I will create a simple notification that will appear at the bottom. And let's press control G to activate, decreed as well as commands to to zoom into this element and that center this in the canvas . I can also press control l to see the layout and how it feeds in the layout so that you can make those tiny adjustments. And it's always nice to made those adjustments dio the items that appear on the only layout s so that it's more stable and it looks better. Now Let's detach it from symbol and let's access the rectangle there. I'm going to change the color so that it has the field off a blue color that's select our blue color. And also I'm going to change, activate texts and let's go to type text transform, and I'm going to select known here. I don't want the upper case text to appear here. And finally, for this asset, let's switch the text style so it's maybe one of the captions, and I'm gonna select the lightest version off the caption. So the 90 version now that's changed the tags that will appear here. I'm expecting grain so windows are closing and, um, let's put it in the center of our art board, and that's just not its tightly to the bottom so that it's optically correct. Now let's change the name to notification and let's organize later so that we can create symbol off notification as well on. I'm gonna go and go inside this symbol and what I need here is a little X icon so that you can close the notification. So one smart weight off the off doing such an icon is creating a rectangle that's the height off the L A letter. And let's change the thickness of this rectangle toe one, and thats position it correctly so that we can now access the vector tools oppressive V and create first vector line. Now we have to duplicate this line, so let's press command the and let's flip it horizontally. Now we can get rid off the rectangle, select both paths and group them with command G. And maybe, just maybe, it looks like the better. If we go back and we select both off this lines as well as we go to borders and let's elect around, it ends. Now. It's perfect. So let's return to the instance, and I believe that's all as far as our notification is concerned. So now that's press command. One dio view the whole art aboard, and the next thing we're gonna create is an oval that will represent the temperature scale . And without releasing the left most button or drawing, I can press space bar to position in correcting the Archibald. Let's put temperature here. I'm gonna put 25 degrees off centre. Great. So we're gonna need Teoh search for a special character off cells. Use the grease and I'm going to press control Command Space bar. If you press control commands Space bar, you're gonna open this special characters window with emojis and old, the characters that you can search for and let's start typing cells use. And now you can copy this character with common sea and pasted directly to your text. Few that's changed, decides to maybe something around 70 or 60 and also let's change the weight to the boldest off the mo for Avenue typeface, which is black. Now let's select with shift both layers and comment left and right square bracket to position in the centre. However, as you can see now, Moffett's losing with the art and because this text should be positioned more to the right as there is a sells you sign and it's not well bus right now. So let's put it, Let's not it with keyboard arrows a little bit to the right, and I'm also going to change the thickness off this over, so that is really thick. Also, I'd like to delete this lower part off the over, and I'm gonna use rulers. So let's press control are for rulers and let's zoom in with commands to now. Let's have one guide that sits somewhere around here, and now we need to enter the editing vector mode for the overall. So let's select the over That's press return, and this little guide will help me position the vector points on one axis so that afterwards you can select the scissors tool. Let's go to scissors and delete those two segments, and we're almost set. Now let's go to the borders properties and let's select around. It ends 40 borders. I know it's funny because I'm lowering my voice when I'm focused, But please bear with me. We almost let it ready with our component. I'm gonna get rid off the guides as well as the rulers. And now let's create one more over which will feel with the white color. And by the way, if you want to enable feel, you can press F on the keyboard and to do so with Borders, you can press be now it's changed the color off the border as well as a thickness. And one last thing I'm gonna do to the border is decreasing the capacity. And let's leave the opacity for around 75 that's all for now. I'm gonna continue designing this screen in the next lesson. 35. Main Screen: we're still working with the same screen. And now let's focus on radiance. I'm going to select this over that we had here and as a border field. We can also choose ingredients, so we have this solid color. But also we can choose the other option, which is linear Grady Int as well as radio radiant and angular graded. And for this particular item, I think that they are angular, radiant, with the cars that I have here in this little rectangles will be perfect. So as you can see, there is a circle, and on this circle we have two colors. So we have to color stops for now for this angular, radiant, and we can obviously adjust those colors as well as had some other colors to the radiant with the glass cycle. Let's select those two colors, which we can do, which can select directly from the color picker. Or we can click on this little little dots here to select them as well. And this way you can simply change the color values. But he can also creek and drag on above the scale as well as this circle to change the position off this color on on the radiant. So now let's at some colors here and let's change the color values. I'm going to start with this first color and let's use color picker here to select the first car that I have. And now I'm gonna add another color by just clicking on the scale, and that's see this little daughter. I can move it here, and that's select different color. So I go to lighter blue color now, another approaches to creak directly on the circle toe. Add another color stop and press control, see to go directly to the color picker. And that's what we gonna do for the next color. So I'm adding colors, pressing control, see and selecting colors from my color palette from the Pekar. Now you can move the colors around, and you can adjust this Grady in so that it is perfectly aligned. And this you can say it kind of makes sense because you have the lower temperatures, temperatures at the left side off this case so that we use blue colors than you have orange in the middle and on the right side of our scale. Off our radiant. We have higher temperatures so that we use red colors. Now let's just this slider a little bit. I need to change the position off the stroke to be outside and maybe change the thickness. Now let's change the size of this component so that it's a little bit smaller and also I'm going to move. I'm going to use capacity off about 90% for the few. Now let's duplicated this over with a Grady int, and I want to get rid of this border. So just drag it outside off the properties panel and have some other border with a solid color. Pamphlets used some offer value for this dark blue color, and we're gonna have thickness off one. And also I'd like to create another element. Let's duplicate this over once more, and now I want to show you cool technique that will let you create vertical scale. So let's go to the borders off this over. Copy, too. And let's use dash value off one and gap value off 10. Now let's disabled the around this off the edges. I'm gonna set them to be straight, and if you go to thickness, the magic happens as you can see, you can create this vertical lines as payscale. If you access border properties again and change the gap size, you can also change this chaos size simultaneously. So let's create maybe 24 peaks of gab, and this over here is gonna be duplicated again. So it's pressed commodity, and that's because we want to have this outer scale as well. So let's shift option drug to create another one and let's change the color off the border . Let's select some lighter color and let's modify the opacity as well. We're gonna set about 30. Let's go back to these border properties, and that's changed the gab value so that we have less lines. So you definitely need to remember this technique. And what's even more amazing and fantastic is that if you take a look at the Layers panel, you have free copies of the same off four copies of the same over while on the canvas they look completely different, and we achieved that by, you know, using imagination and also with fantastic abilities off sketch. So one last thing we're gonna do to this temperature compliment is toe labels. I'm going to use some pretty fine text style off Caption 50 and let's select this Textile Creek once and put first label off 10 degrees. So let's like this type. I'm gonna press command B, which is shortcut for the setting, the text too bold. And it's not Fox bold, its a actually changing the white off the text toe heavy and all the time I have this iPhone preview turned on so I can look on my phone on my actual device and determine whether this text can be smaller if it can be off less capacity and I can make choices whether to leave it as it is or, for example, make that bigger eso. It's always best to have this device preview, especially for this little sensitive data that you have here. And let's put some other labels, maybe for this fire labor. I'm gonna use the value off 22 and the fired one at the forefront actually will be 26 or 27 and we're gonna end up with 32 degrees. So now are a complement is ready as well as is the first part off this screen. So for the second part of the screen, we're gonna use some icons and let's start with the line tool. I'm gonna press L on the keyboard and drove with shift. I'm going to draw a perfect straight line. Now, if you want to change the height of this line, sometimes I try to do it and, for example, and drag it so that I can change the wheat or hide of the line. And it's not that easy. So nice deep here is to press a return, and if you press return, so if you enter the vector editing mode, you have this first vector points automatically selected. Now we can easily knock this lines height or wheat with your keyboard arrows, and you can press up our or down arrow. We can also press shift for 10 piece of increments, and there you have it. So let's press commands D and duplicated right click on the line. Transform and rotate minus 90 degrees. And there you have another one. Let's alike both finds and group them. Commander Gina. Let's change the opacity 10 by pressing one on the keyboard, and now all we need here are the icons and icons. Actually, I choose from icons are from this extreme, Nikon said that I showed you. And now I can only copy and paste those icons. As you can see, they are already incorrect cores. So now it's only a matter off positioning them as well as putting here some labels. One interesting thing here is if you impress a tea right now and the Greek ones, their new text field will inherit all this tiles that you had in the previous text field. So now, as you can see the Typefaces Avenue, we have the weight off heavy and the size off nine. So that that was the last settings are type toe know we can type actions for the label off this first icon, and we're gonna change colors soon so that they matches the icons. But for now, that's option drug for a duplicate, and the second label will be devices. Now we can select the both off this text fields and option drag again so that we have another set off Labour's now this for labour is energy and the last one is CC TV. Okay, now let's change the colors accordingly so that select actions now control, see for an eyedropper icon and even for such a thick and thin line you can easily. With this eyedropper selected, you can easily select the color. And that's because you have this Superman ice that will let you select individual pixels. Okay, so we have the icons as well as the labours. Now let's elect this group with lines. That's position that position them correctly, and now that's click on the group shift. Click on the CCTV to select all the layers. Come on, G to group them and put them in the center off our art board that's moving upwards with the keyboard arrow, and that's let's get back to the line copy so that we can make this line a little bit wider . Maybe it's like both vector points and make them for tea. Big SOEs. Why there Each side. So it seems to me it's almost the end of the screen while I have one bonus steep for you. So if you want to reuse this, um, Grady, in this angle, a radiant that you've created out off the colors that we have here, you can add it to document Grady INTs. As you can see, we have global radiance as well as document Grady ins and you can click on the plus sign to add this little radiant and reuse it later in your project. So that's all for this screen, and that's awful. This lesson I see you guys in the next movie. 36. Settings Screen: that's proceeding with our application. I'm going to select the art board and press command, Di Dio said. The next green and it's next train. Let's get rid off all those layers and this actually will be the setting screens. So let's select this art aboard. Let's press command to and that we're going to go to the settings screen by pressing on this little I got on the right off our top. I'm going to use stop out here, and I'm going to override home to statics. Okay? We need to change this icon as well to a back icon and this little icon to the right. We're gonna set to I can. Plus, if we want to add some custom settings. Now let's focus on the middle off this art board and let's create some cool couple and here . So let's start off by creating a line. I'm going to press L on the keyboard. Then I create a perfectly straight line with shift pressed on my keyboard. And let's stick to the greed Let's have it 46 p source to the left and to the right, and let's decrease the thickness. The one now option dragged this line to create another one and also make sure that it feeds to the Greek so that we have won the roll off our settings and we're gonna set it 64 Gigs of Space. Let's go back to 100% view by double clicking on this loop icon and let's go to style text and we're gonna have this Heather 90. But I believe this Texas. It's a little bit too big. Now let's have music up as the first setting, and that's come on a and change the size of the text. You can also do it with the keyboard shortcut that I've shown you. But here, I'm gonna put 19 for the size off my text. I'm gonna leave this and 90% white color. Now let's hide agreed with Control G and let's zoom in here. I'd like to create Heather for this first row, so we're gonna have a compliment that actually has to kind of Heather's, and one will be the simple line separator with 20% capacity, and the other ones could be the Heathers for sections off our settings. So let's use style text again, and I go to description Andi. Maybe let's use this little description off nine points and it will be 20% bake. Now let's click somewhere in the middle and let put the name off. General, it's the name off our first section in the settings. Now I'm gonna have it centered in the art board and I need to hide, then this part off the line that's under general a General Heather. So let's press return to enter vector editing mode, and I can put to vector points there. But I can also divide this lying equally and to do so remembered short cap, a short cut off command. So if you command Creek in between those segments you were have always half of the segments here, and that allows me to get scissors now and get rid off those two segments. And it's perfectly equal from the left and from the right. Now let's create symbol that will be this line section symbol, and we gonna have another symbol for this normal line. So let's have nine and default, and that way we can make some overrides and switch between the section Fattal and between the normal line here and one more tip that I can give you now is to create a rectangle and 10 off the border. But you can turn on the field, but take the opacity down to 0%. And now you can a Greek on this element, and you can create a symbol out of this election, which has actually the proper height and wheat so that this rectangle sets this height and weight off the symbol. Let me create a symbol out off this elements, and I'm gonna call it settings a row and let's go to Symbols Page. Let's take a look at the newly created symbols there at the top. Oh, and by the way, if you command miners and if you want to change the position off this nine section like default setting crows setting through, you can change the position and while dragging, not releasing the left mouse button, you can hold this pace bar, and now you can change the view, and now you can release the left mouse button. So now let's get back to this setting throw and companies that we have here are the line section and also at the bottom. We have this line default. Basically, we can get rid of this line default here. That's because we will switch between line, section and line default in a components over right? So if we got, if we go back to general and now if you try to change it with the override, unfortunately, you see that there is no line general. And probably if you listen carefully in the previous lessons, you know exactly why that's because of this size off this symbol. If you take a look at the lines section size, it's 311 by 12 pizzas, and here we have the line default, which is recovered 11. But we have only one pixels in height, so we need to change the symbols high to 12 pixels to march the first symbol. And if we do so, let's make sure that this line is also said to be in the center of the symbol. Now let's get back to the setting throw and would we actually can do? We can make another text field, and we're gonna have, for example, Spotify here as our default music up in our smart home. Let's put this text food to the almost right off our section off setting throw. And I also gonna use symbol. One of the symbols that we have here and this is an arrow and here on the right off are confident we need to account for some different options. So, for example, we need some different arrow that is pointing to the right. So that's duplicated. And let's detach the 2nd 1 from the symbol. Now we can write it and transform it. I'm going to sleep. I'm not have rotated miners 90 degrees, and now we have the second are, by the way, we can also click on this arrow and make assemble out of it. So let's say that's icon slash r o all right and with us can use probably. We can use some kind of switch here in the settings, so it's best to go t to the IOS. You like it. So let's go to file and let's open in your new from template. I'm going to say I was you work it and here we have this IOS switches. You can select both off this switches, and we can simply copy and paste them into our project. So let's do that. And let's face them here and one thing worth noticing right now is that if we paste those elements here, we also pasted the symbols. So if you take a look at the top right off our symbol space, those are the symbols that we have here as well. So let's elect those symbols with commands shift pressed on our keyboard and we can zoom in a little bit and get rid off unnecessary instances off the symbol. Now let's take this instance, and that's bullet here and to maybe you can change something in this switch. Eso that much? Is this tiring off our application? So let's select this Greenfield color and let's select one of our green colors. Maybe this first accent color, so that now it looks like this. And possibly we can move all of the elements that we have here to the far right off this component, I think it would be better. So let's move the arrow and the 2nd 1 as well. This down arrow. We have to move it to the right to the far right off this component. And also, let's take a look at this Spotify text field right now. I'm going to move it a little bit. Okay? It seems that our component is almost ready. Let's turn on the visibility off this other later so that when I go back to the general page, I can see each off this elements here and let's move them around. And let's try to change those override so that we have, for example, the off state off our switch and let's go to the line. We can set a default for the line, and also we can switch back to section. If we sit back to section, we can override the text that appears as a title of the section, and it all really works well, So we can, said the arrow. Also, we can have this other arrow here. We can set some of the components to none so that they're hidden. We can also override the text feed on the right as well as we can override text field on the left, which is music up. And yeah, it would be best to or give those tax feel more generate. Names may be in the symbol space, but you can do it. In the meantime, while we have this component ready, I'm going to show you one more great option. Let's go to toolbar and that's right, Big and select Customize toolbar. Now let's select the May Agree to and let's put it in our toolbar. This is actually one off the best tools in sketch. You simply select any layer group or symbol, and you click on my greed icon. And then you can multiply this, and you can have different rose as well as the columns. So let's determine that we have one column and we 10 rows. We don't need any margon in between those rows, so let's put zero in Margon and simply click on May Greed battle. And then you wait for this catch magic to happen. And there you go. You have 11 copies. You have 11 rose because you have 10 copies and one original row off and your second throw symbol. Now we can go to the art board, and we can unlock the fuel as well, the background few as well, so that we can see all of those items. And by the way, if you use catch mirror to preview this on your mobile device, if you have on arable, that is higher than your iPhone screen, you can easily scroll and it's crawling automatically by default. So let's select some of those rose. And if you access all of the rows, as you can see, you can change the overrides for all off this selected roast. So instead, off section line, we're gonna have default time, for example. And now we can make even more overrides to each individual section and its individual rose . So, for example, for this second throw, we're gonna put the alarm sound and this is another setting setting. Go for a smart home and we gonna change it to fresh start. Also, let's go inside this symbol and we need to change the behavior off this text food to be aligned to the right. And that way you can see whatever is here, and it always stays to the right so that the text is being pushed to the left for the for dro. We're gonna have clock settings at let's have 24 hour clock, for example. And for the next row, we're gonna have some setting off, for example, show showing deeps and if you want to have a suite right now, so we need to turn off this Spotify. I just need to enter this text field and press and empty an empty space as an override. And now, as you can see, nothing is being shown in this override. And we need to enable the cell to be visible. This switch to be visible. Okay, for the next one, we're gonna have line section, so we will have the next section off our preferences and we can call it modes. You can select multiple multiple rows. So let's shift Greek. And let's select, for example, the 1st 4 rows in this section. And let's change the arrow so that we don't have this down arrow and to enable for all of them enable the right right arrow so that we can go inside the setting and, for example, change something on the next screen. So the first will be in good morning setting, and we can have an empty space here so that we could go inside and edited. Okay, I don't want to waste any more off your precious time. However, let me express something very clearly at the end of this lesson. This is simply amazing what we did because we have only one symbol, one component that's multiplied with this beautiful make greed option. It's catch, and we can do every single option here. We can do every single override on this one symbol on this one component so that we can even have very sophisticated setting screens. So that's all for now and see later. 37. Devices Screen: Well, I hope that you start believing that everything we did at the beginning of this course, which was so tedious because it was creating symbols and doing this type romp and creating all of this different things that were not necessarily needed for the screens we were making now are beginning to pay off. And that's because every next screen that you make using those techniques using those symbols that we have, he's superfast. Okay, if you come out the duplicate the our boat, then you swab the symbols. You swap some icons, you make override for the text. Then you insert some new symbols as, for example, this one as the line here and now it starts to make so much sense. And also it starts to make so much sense to organize those components wisely and to have those groups and to have proper names so that you don't get lost in all this clatter, because sometimes it's almost unbelievable that you create a huge application, but you still reuse the same components. And if you create great symbols at the beginning, it's so much easier. OK, so now let's create another screen that's a devices screen and let's use simple rectangle. I'm gonna fill it with white color. Change the opacity to 10% and afterwards let's select the border and change the call to one of our accent colors. This will be the first tile and the first icon off from our devices. We can change the devices and also said some device properties in this screen. Let me select another description. I'm gonna put some text here and the first time I will be console that, select the text as well as rectangle and let's put it in the center with co mantle right square bracket. Now let's used icon Jar in such for council icon on drug and drop this icon into sketch. And as I told you before, now we need to click on this group now press command shift G a couple of times on until you see those shapes, and then you can select multiple shapes and change the color, for example, to a white color. OK, and by the way, I don't know if it might seem obvious to me, but I don't know if you know this. If you want to have a perfectly white color, you can go outside of the scholar Pekar while holding the left mouse button. And then you have the exact white color, and the same is with black. If you go down this color picker and even outside while holding the left mouse button, you will have the black color. Okay, let's delete unnecessary shapes. Let's Commander G group this icon. Now we can change the size and we can do it with option shift drugs so that we have for this one piece of stroke. Or we can use this scale to so we can press command K and then we can set, for example, 170%. And as you can see, this cable is so much better. That's because he changes the stroke with accordingly so that we no longer had this one pizza a stroke. And we have. We have a beautiful I can hear. Let's make some tweaks to the opacity. Let's have 15% of us. Okay, now let's select all of those layers. So the group and also council and the rectangle and let's create a symbol out of it. So we're gonna have our first symbol, which is device. Let's go inside the symbols will double click it. I need Teoh change its position so that I can see it on our dark background and let's focus on the properties off this elements. For example, we need to set the alignment off the text to be centered s so that any text can be feet here. And also let's change the size of the icon to 44. I prefer those values to be divided ble by two or by eight. Now let's make sure it sticks to the center and this will be the active state off my device card. So let's change the text toe some accent color. And also we have this stroke in an accent color. But we also need a copy of that. So I pressed commands thee on this symbol, and now we have Second State which will be in active so that change the naming. This 1st 1 will be device active, and the 2nd 1 we have to change it accordingly. Let's come on, click on the rectangle and we're gonna get feet off the border as well as we're going to change the color of the text to white. So now we have two symbols, which are two states off this device card. Actually, we're gonna have one more copy. So let's press commodity. And now let's get rid off this icon, and this state will actually be the empty state for user to determine whether he wants to drag and drop any device to be his favorite. So let's have a Dasha off four and gap off 10. Now let's decrease the opacity of the border. And one last thing we're going to do here is to put this text in the centre vertically and horizontally and change the text to drag by item. So there we have free different device options, and we gonna use them in our device device screen. So let's rename it and let's have device drug here or something like that. And now we can switch back to general view and we can multiply. These items were going to use make great functions. So let's select the device. Let's make greed, and I want to duplicate the items horizontally, so I'm gonna have only one row. But I'll stick with four columns, and for the markings, it's best to set it to be multiplied by eight. So I'm gonna go with 16 and that way it's going to sit on my great. Now let's select all the copies and I'm gonna select Device Drug instead of this default device. And now let's move all of the devices a little bit to the left so that you can see the last one. And it's very important because those devices were scroll horizontally and the user should see the last one at least part of it, so that he intuitively knows that he can scroll this least. Okay, let's move on to the next section and this next section. We're going to start with Heather and let's have a slightly different heather than this line had there. We're going to select the bottle, add let's like, standard accent bottom. We're going to pace it here, and let's detach this from the symbol. So we're gonna base on this shape and let's turn on fuel Anthony off the border and the keyboard shortcut here is F and B, so you have fuel and border. And now let's go to the color that's changed the color off the text to some grayish color. And one more thing I'm gonna do here is I need some icons because this section will be based on Let's turn off the upper case styling, and this section will be based on a user's current location. So, for example, in our home, if we're in the kitchen, we're gonna have devices that are available in the kitchen, and then this will localize the user so that we need a little icon to the left that will show you that this is based on your localization, but as well we're gonna have an option to change the room. So that's bullet slightly to the top. So this options they change the room will be a little arrow. So let's go to Icon Arrow and let's put the arrow here and let's change the opacity of this arrow to maybe 30 or 40% okay, and the second icon will be some kind of a teen icon that will let you know that you are being localized by this application. And those results are this dying currently to your location. So let's go toe, I conjure. I'm going to select some map. I come here and we have this month direction here. I think it's quite OK because it's very similar to IOS icon off localization. So let's delete the rectangle. I'm gonna come on t g group it as usual because it's an icon that's used accent color free for this cycle, and we're gonna scared. So let's use common K. And let's scale it, for example, to 20% that we can go inside this field and press an up arrow or down arrow to have this scale bigger or smaller. And in just a second you'll see the preview off how, actually, it will display in your layout. So let's have this nine by nine Pizza Arrow here, and that's it for this Heather. Now let's concentrate on the section itself. So let's come on, Minors. To them out and on the top, I'm gonna have my favorite devices. And on the bottom, there is a least off all devices available, so let's like the device symbol, this very one. Okay, now let's put the 1st 1 and we're gonna make agreed out off this one symbol. Let's pull, for example, a 10 rows and this least will be scrolled vertically, not horizontally, so that will have free columns and maybe Morgan's off 16 pixels. So that it sits perfectly on the greet. Okay, now let's like all the devices there. You have 30 devices. That's Commander JI Group it at. Now we can distribute the alignment off this group so that it sits directly in the center off our outboard. Now let's move it down to make some space for this bottle to be a little bit bigger. So this is a heather, but also a bottom, so it needs to be easily topped with with a finger. So let's scale it with command K to 120%. And as you can see, scaling with scale option is really nice, because it always is case perfectly, even if you have different elements inside of a group. Now let's control G. And let's make sure that everything feeds into our greed. And let's make this art aboard as well as the background higher so that we can reveal more of those items. And, for example, if used device preview if sketch mirror, you'll be able to scroll on your phone, so that's a one way to do it. However, you can also click on our boat and select resize to fit option in this case. However, as you can see, we have this one particular item to the right. And that is why this article is now two white so that we need to command Z under this action and just scale it with the background and scare. The are about itself. That's almost it. Now let's change the boat size according the, and we can move on to the icons. So let's have a symbol open. So let's double Greek on this console symbol, and we'll have inside of this symbol will create Assemble out off the icon first. So we have this icon council, and now let's move into the background and take a look at the size. And now let's go to the icon drawer and select some devices, some kitchen devices and dragged directly to sketch so that we have. You can have some icons to be replaced with overwrites. Now let's scale them of common kale, and we need 170 I guess so. That was this K we used previously, and that's not precisely the same size, however, will change it in the second. So let's agree the first symbol, and we're going to give it the name, off icon slash apron and then we're gonna have all those icons to be symbols as well. So let's speed up a little bit. Okay, there we have the I guns. So now let's go to each icon and we need to ungroomed this icon of common Chief G and I press command strategy until I reach the shapes and we need to change the color. So I believe it's ah little bit faster than on grouping them first and then creating group a symbol again. But probably it's just the same. Yeah, let's ah, let's move on to the next icon That's ungroomed pit than this changing color. As you can see, I don't even have to create new groups right now. So that sits in the symbol, and I don't need a new group for those shapes. So maybe in that particular case, it's slightly faster to do it that way. So let's change the border color here. As you can see for some icons, you have feel color for some icons you have on the border border color. It really doesn't matter so much. That's press command suit G. To be honest, I can't think off a simpler way to do it, but it takes some creeks and sometimes, but we do it once and then we forget. So let's have this last icon color change to the white color. And now we have all those different layers and one a really nice commander and sketches that you can go to view and then layer least and collapse art boards and groups so that you have everything collapsed in your layers panel. And that's pretty useful. You don't need to collapse all those all those layers, all those symbols individually. And now let's take a look at the size of our icons. So I press option top and I go to the size and I can change it so that it matches the size off our consoles. It was 44 by 44 but as you can see, all the icons here are 41 by 41. So possibly I can change them all to be 41. And also I'm going to change the size off this console, Toby 41 to 41. And that is how you can access all those overrides right now because all our wagons are in the same size and what's more important off the symbols are the same size so that you can go to overrides. And there you have all the icons I can switch between the icons in on this first symbol. And as far as those symbols, those active symbols are concerned. Let's go to the symbol and we gonna change this group to our symbol so that it can be swamped by the other symbol as well in overrides. And to do so that's a control or right click on this layer. And let's use the replace with option so we can replace any group of the year with, for example, there any symbol that we have here. So let's select console. And now we can get back to the instance off this symbol and we can change any icons with the overrides, and also we can override the text. So instead of council, the label, the name off this layer should be, for example, info or something like this. But as you can see, we can override it easily. And for all my items here, I can do the same. So this is it. We have the next screen of our application and I see you in the next lesson. 38. Actions Screen: hello and welcome into the next lesson in this lesson. We're gonna move on in our application. So each time we agreed some screen, we use the same actions. However, I try to introduce some something interesting in each lesson. So now we're going to talk about, for example, shared starts. So let's create the next screen world, which will be an action screen and for the actions I'm gonna have separate page. As you can see, I pass other the page, and now I can set the name for the page as actions. Basically, you can move between the pages with keyboard shortcuts as well. It's control up arrow or down arrow as well as control, pay, chop or page down. I don't know, because I don't have this keys on my keyboard Now you can also racked it on the page and, for example, duplicate and divide the page. I'm going to paste a copy and paste one of the art boards as usual, so that I have this iPhone size as well as some components that I'll use. So let's delete everything that we don't need. Don't really need here, and let's switch it up toe to its alternative version. And let's override the name off this screen. And this green will be the action screen so that the user might be able to switch between the actions, for example, watching TV or playing computer games or anything. So there we have the icons. And now let's use the second icon for back battle and let's greet assembles. I'm gonna eastern the symbol off, drop down! So this drop bunk dropped down symbol. I met out off at the bottom that we've created in the previous lesson. Now we can use it as a symbol that's put it in the center. Let's control G and ensure that its correctly lines to degree as well. And the next item here will be a card for each action. So we're gonna have different cards, and user will be swiping swiping between those cards, too. See theatrical actions. So this will be the 1st 1 and I'm drink a rectangle. I, um, doing the border radius and let's make sure that it fits to the greed. Now Frump excels. I can use a few and switch to image. Teoh, have this photo from axles directly in sketched. I simply drug and drop it onto this little chat board and let's use the fuel command here. Now we're gonna turn off the border, and we'll also have another rectangle that will contain the icons off devices that take part in this action. So we're going to duplicate command, Did this first rectangle and let's change the fuel. So that is a different call or a week gonna use solid color off our background. But let's make it slightly lighter. And now let's change the size of this item and we also need to have this borders sharp so we can go to border radios. And I don't know if you remember from one of the previous lessons, but you can manipulate the radios, but also you can put semicolons here and you can directly say that you want, for example, only this bottom left border to be to have the radios. However, there is also another way in sketch that you can accomplish. This task just entered the vector anything mode. So press return and now select the vector points on the top with shift on the keyboard so that you have multiplied vector points selected and in the corner section you have the border radio. So as you can see, you can separately modify each corners vector points, radios and now we can have straight edges. Let's go to the few again. That's changed the field, and I'm going to use capacity instead off the slight color. So that's about 50% capacity. And last thing that we use here are the icon. So let's go to symbols. And in Aiken section, we have a tuner. We have a TV set as, well a speaker. So let's begin with the speakers, and afterwards we're gonna pace there as well as TV. So those are the devices that take part in this war. TV action, actually not healthy sleep. But what we were going to change at this with an override in just a second. For now, let's have this icons online. So let's select them with shift. And yet what I'm gonna do is distribute this pacing between those icons as well as probably weekend yes, at the alignment to the top off the icons, and it looks pretty nice. So let's have a group out of the icons, select him and Commander G. And now we can we can change this position to be directly in the center where we have a group, we could center this inside off our art board. Let's change the opacity a little bit. Just a minor tweaks so that it looks even better. And for this group, let's turn the opacity 60%. I want to change this healthy sleep. Teoh, watch the reaction. So let's do it. Override in the info text field and we almost set with this screen. One last thing that I'm gonna have here at the bottom is the play button so that you can enable this action directed from this screen. So let's have in the over and I'm going to do and over in Centres let's press space bar to change the position while drawing now its position that in the center of the art, bored with the online tools and I'm gonna have for this green color for running the actions , Let's have type toll and let's type go here. I'm gonna put it in the center optically. Then I'm gonna come out of the duplicate this over. I'm going to change the color to White and now you can actually use this pretty nice keyboard shortcut, which is option command up or down to change the position off the layers in the layers panel so that we have this second circle at the bottom and another great shortcut is common shift. And then you can press left or right arrow to change this size off the object you can a press command shift right, our or left arrow to make that bigger or smaller as well as up arrow to make that smaller or down arrow to make that bigger as well. So you don't even have to use the mouse throughout this whole process. You can now press two to have a paucity off 20% and there you have it. So this is basically the next level off sketch when you don't leave the keyboard so that each operation that you perform is extremely fast. You don't have to go and switch to tablet or to the mouse. You simply press keyboard shortcuts such as positioning the layer. Afterwards, you have this size off the layer, and finally, you can have this shortcut for 20% capacity. Now, let's give this car a shadow, and I'm gonna create a shadow off quite a big blur that we can have here. So let's have 12 picks us there. And if you have different effects, such as border shadows, inner shadows, assemblers and stuff, you can also set something that's called shared styles in sketch. So sometimes you don't want to use symbols, but he will use this shared styles, and those tires apply to everything that's below this section. If you create a new shirt, start out off this rectangle. You will save the style, stares off feel borders, shadows and everything that you have below. So now if you create any other shape and you go to shirt styles to apply this style, you have the current style here, and you can implied so. As you can see, the feel is supplied. Shadow is applied, but the elements that are above this shirt styles are not applied. So you don't have this raid use. You're gonna have position applied or transformation. So that's how it works. And now, instead of symbols, for example, you can have this church styles. It's actually very powerful because, for example, if you go to material design guidelines again, and maybe you know the concept off elevation and shadows here. So basically, objects in material design have different shadows so that you can express them as they were lying on the surface. And each object can be higher on the surfers or can lay lower on the surface. And this is how it works. You have different elevation levels and different values for the shadows. So, for example, those cards that, like almost at the surface, they have the smallest shadow at this farm. But on F A B button that is here have this bigger elevation, and that is how you can distinguish one between another. This far button is basically the more prominent action in this layout, so you have different elevations for dialogues, for switches, for menus, for sub menus, for example, cards and and on the scale, on the left and on the scale to the left, you have peaks of values. Those are density pixels, but you can set the same piece of values if you are designing in one Xscape, for example, 20 or 24 for having this elevation, and this is most powerful. If you create, for example, a shape you can get rid off the field. The three off the border and only said the shadow here. So we're gonna have material these and shadow off to X and Y and, for example, which thought were Start with elevation off for peace of Blurred. Now your option dragon than command the two times to have multiple copies. You go to blur levels and you said them accordingly to 16 24 8 And there you have different elevations that you can now save as a new shirt style. So let's have some shirt styles of Shadow 24 for example. You can also organize those sharp stars. You can select them, you can delete them or reorganize them, renamed them. And this is pretty useful because now, in material design projects, you can. Also, you can always select group or or layer and said the elevation off this very layer with the shared style, so using the shirt styles for objects as well as a starts for text is pretty useful. Now I've duplicated this card and let's go back to Pakistan is to change the image. I will use video game image, so let's go toe high resolution off PlayStation image here, and I'm going to switch this card. Let me go to feel now. I need to drag and drop it inside of this feel it will take a second to low load. But now there you have our another card. You could always do this card as a another art board. However, sometimes you're just really don't need it. And, for example, if you want to descend some interactions and card swiping animations like their own in principle or in Flint O, that's all you have to do. You just put the cards next to each other. They can be outside off your art board or inside of your art abort. And now let's position the icons accordingly. And there we have the actions. Screen is now ready. We have this switch for changing the actions as well as card. And also please make sure that you create some other cards of that. For example, developer. While you hand of the project, he knows that it is a card swiping action. So that's it for now. Thank you for your attention in this lesson. I see you in the next one 39. Action Detail Screen: Let's move on with our layout, I'm going to duplicate the screen to create action detail on, uh, usually you have least and the detail of you. So let's create the screen. This will be pretty easy. That's changed to watch TV action. So when we enter each particular action, we have this detailed view that we can edit. For example, we can change the devices that they part in this action or, for example, change some other properties. And if you go inside, if you accidentally go inside any object, you can press command escape and you go back to where you were before. And it's pretty useful because sometimes it is just very easy. Teoh by mistake, Double Greek on any symbol, and you are in the symbol space, so you have to go back quickly. And this is the come on escape shortcut. Now, when you try to change the size of the rectangle, as you can see this image that is a feel and has a field property s scales beautifully and you don't even have to do anything else with that, you simply select and some description. And in this detailed view, we're gonna have descriptions for each device that takes part in this action. So this will be actually speakers. Then we have to honor and Stevie said as well. And what important thing is that? I used the same layers here, and this is not in crucial for the moment. However, if you plan to make interactions and interactive prototype, for example, using principal up, it will be extremely useful. As at those names off the layers across. Art boards can have out animation in principle. So that's basically just a side note, but definitely or remembering. Now let's put this go button on here, and I'm gonna make this bigger, also going to select the text and let's changes to stop. So if you're if you around the action, you can stop it. Stop it directly from there. Let's change the color off the field to a red color, and now we can make our art, but slightly bigger so that it has all the options for different devices that take part in this action. So let's make the art boat hire as well as let's lately background feel, and I'm gonna make that heart as well. Now what we're going to use. Here are the symbols that we already have. So let's go to symbols and we're gonna have this setting throw here. I don't know if you remember, but we've used it in the settings. That's bullet in the center of the art boards, and now we can change many things here. I mean height and reveal those elements that are optional. But first, let's go to the Greek toe and let's make one call them and let's say we want to have free does here Off course. We're gonna delete the marking so that we don't have any additional Margon. Now let's elect those two rows and let's set some override. So instead of the section line, we're going to stick to default. Also, let's turn off all the unnecessary elements here and let's leave Onley the text on the label, which is not Spotify, but we can override it later. We're going to stick to the default line. Also, we're gonna turn off some arrows and just in a second I'm gonna post this video for a minute and change the labels so that we have correct labels here and OK, now we have correct overrides for each label. Let's change the size of the art board. And let's precise two feet after changing the background so you can do it in this way and it's slightly easier. And what we have now is a complete action screens. So we have, ah, least of actions as well as action giggle. Right now we can press command as to save, and actually, I didn't talk about it. In previous lessons, however, it might be worth toe talk about saving fights in sketch, so why haven't we talk about that? That's because it's sketch automatically saves defiance that you have here, so you don't even have to care about saving the fights. Sketch also keeps track off your actions, and you can press Kamanzi to undo the action as well as you can press shift Command Z to redo the action. Sometimes sketch even grooves this action so that you press it once and you have either not maybe 10 steps or five steps that are similar and you go back to the previous state. And other thing is reverting this file back, for example, to changes you might two or three days ago or maybe a month ago, you can always revert that state if you use time machine on Mark and let's go to file. And by the way, you have here at this safe option, so we can always set safe with a common s as well. You can also duplicate the fight. So sometimes if you want to create a different version of the file, you simply duplicated and then you have revert options. So on the least, here you have us safe and last open documents. But also you can go to browse old versions and dance catch changes to a time machine view, and you can switch between the versions off your document and you can go up in the history of this document saves. Then you can compare this version to the current document that's on the left, and if you want to restore any version, you can do it with the restore button. Also, you have the history off changes and history off saves to the right, And if you find the version you're looking for, you can simply go for a restore and you can restore and actually override their file you're working on. So sometimes it's a good idea. Also, to duplicate this file before you go to this fire history and replace it with some other version from history. So that's all for now. I see in the next lesson. 40. Bottom Menu: hello, and it's nice to see you in the next lesson. So now you probably know all the important features off sketch such as tools and actions and all this clatter. So now hello and it's nice to see you in the next lesson. Well, now you probably know all the most important features and tools off sketch. However creating a functional you, it is always a process and the best way these owners are those designers who can make this process as streamline and as fast as possible so that you don't have to necessarily focus on the correct tools and what kind of shortcut to use. But you basically focus on the design off your application, and to accomplish that, you need practice. You need to work, though, so it's best Teoh sometimes watch over someone's shoulder so that you can see those short cuts as well as tools in action. So let's create another page, have created a page for a room screens, and I'm gonna have a couple of screens here. Now let's do the standard operations. So it was copying and pasting Can art board Now I've deleted all the unnecessary things from the sample art board. And as you can see, designing a new screen is basically using the same styles and the same symbols over and over and only replacing some I icons, for example, or some some labels with overwrites. So it's very, very easy to use this ready made blocks off our you Iike it off our style guide and, for example, I have here a drug, a drug down, and that will change so that it feeds the art board as well. As for example, we turn off the locate icon, we can override the text that is here. So yes, basically, symbols are great now going to create a different asset, and it will also be a symbol. And we're gonna dio very popular component off native applications, which is a both of money. So let's change the height of this rectangle to be 88 so that it fits the Greek correctly. Now let's turn off the border and I'm gonna press f for the field. It's changing color to our background color, and here I'm gonna have five different icons that will let me switch between the different various, the different pages that we have four bedrooms Sometimes it's easier to right. Click on your art board and select paste here so that you have this items paid basted directly on the big so that you've clicked. And then let's select all the icons and I'm gonna move them within the art board so that I can see the smart guides to position then directly in the center. And now what we're gonna do is out of this rectangle and all of the icons we gonna create. Assemble. So let's elect them in the layers panel that's created symbol. And this is our menu. So the menu bottom symbol will be symbol with icons with both active and inactive states. So actually, those icons that I have here are now in the inactive state. So let's make a state that we can switch between. So first, let's create this active state for individual icon. I'm going to press oh for of all and with shift, I'm going to create a perfect circle. Now let's move it with the keyboard arrows. Let's enable the field and change the color to white color. But we're gonna have an capacity off around 24 now, and that's turn off the border. You can also press be on the keyboard. We also need to change the position off this layers layer in the layers panel. So that is below the icons. And let's change the opacity toe, for example, around 11. Now we have this icon, which is the active state of this icon, so it's great out. However, we want to have another symbol that we can swap in over right so that it can highlight this icon going to choose some different color. So each icon is basically a different size. This one is 27 by 29. So let's create different symbols by selecting the icon and let's have Aiken folder, and this will be a temperature. So let's put temp is the name of this symbol. Now we have the 2nd 1 with the lump. Fred. One is clients or Curtin's on this screen user. I might be able to change the position of the curtains as well as this fourth icon, which is alarm eso. You can set the alarm clock in your bedroom and the last one will be census. So let's create another symbol off senses. And now we have all the icons in separate symbols now that search for the definition of this symbols and there we have them. And in order to select those symbols, it's so much better to go to view options and from layer list, select collapse articles and groups. And probably it's even the best Teoh. Have your own keyboard shortcuts for this menu position so that it's relatively easy to set it. Now. I press space bar while dragging, too. It changed the position off the converse and let's duplicate those icons. So we have a duplicate off all of the symbols, which are correct size, and now we can change the color off each iconic separately. However, you can always do it for all the shapes. So let's on group all the icons I press command shift G on the I reach off the shapes. Now let's select the bottom most layer and the let's go to the top most layer. And now when you go to border color, you can change this color for all the selected shapes. So let's select one of our accent colors, and now all we need to do is we need to get this highlight, and I'm gonna come on X for a cut, and I'm gonna cut it out from this menu bottom. And as you can see, we have proper shapes for our icons, for the symbols to be swapped between. And what we gonna do now we're going to paste the oval to each off the active state off our symbols. We're gonna put the over indirect center off this art boards off this symbols, and we're gonna have them so that, as you can see there, outside off the symbols about three dozen mother, because everything that's outside of the symbol will be visible as well. And the trick is, if you put the over at the end, you will probably have the different sizes off each icon so that you don't have this long overwrite least, and now you can get back toe screen you're creating. So let's get back to the room page. And now if you select any symbol here you have, I can override. And for each icon, you should only have two states. So this is like an arm, and you can set this state to be active. Well, actually, for example, if you us if you have Aiken curtains here, which is the same size as some other icons. You have some different overrides, but for most icons, it would be easy to select them and change between this active state and inactive state. So now let's duplicate this screen and in the bedroom screen, I'm gonna have five screens total. So let's make another one and let's switch the state's for each screen. So for the 1st 1 we're going to set the active style state off temperature. I go on the second screen for the second screen. You have to set this lump. I going to be active. So let's turn off the senses. Let's turn on the lump. Next one is the curtains and the fourth screen ease our alarm screen. So let's change the other icon too active. And the 5th 1 the last one is SAS is. So there you have it. One bulletproof symbol that you can use all over your design. And yes, maybe you spend five minutes on creating this symbol. However, if you have hundreds or thousands articles containing this one symbol and your clients decides that he wants to change the color, you don't have to jump out of the window. So this is it for this lesson. Let's get to the next one 41. Alarm Screen: It's nice to see you in the next lesson. Now we're gonna skip the first free screens and let's focus on the alarm street. Zoom into this screen with commands to command miners to zoom out. Now I'm gonna use the symbol and let's use the first symbol off this section line. Let's put it there and I'm gonna come on, plus zoom into this symbol. Let's make sure that it fits to our greed. So that's control G for greet. And now I'm gonna put it just about there. Okay, let's select the symbol. And now let's go to the overrides. I'm gonna override the text assembled to repeat, and those are the repeat options for our alarm. So here is the nice trick. If you want to have, for example, eight icons here, let's draw a rectangle that it's the full width off this space that you want to put icons in. Then you're going to go Teoh its size. So I option top and then top three times to go to the size that I divided into eight pieces . And I also need Teoh extract 12 pixels for the markets. So there we have around 27 So let's make it 28 by 28 pixels. And here is our first icon. So let's make it one pixel. Think I'm gonna turn on the radio off about eight pixels, and now we have to select this item. Let's go to a positive about 40 by pressing for on the keyboard. Now that's multiplied shape. I'm gonna use make great toe, and I'm gonna leave one. Robots. I need eight icons. So I a said eight columns and 12 weeks off Margate. Let's make agreed, and now you have this little space at the far right. And that's because we've rounded this size to 28. So let's not the last rectangle that select all of the rectangles and let's go to distribution and let's distribute those items. Eso that the markings are even now let's go to this shape and let's duplicated. So press common did an option chief toehold proportions and skate from the center that scaled down just a little bit more change. The border radios enabled the feel of the F on the keyboard now turned opacity. Yeah, I know it's quick, but this is how you work in sketch and there you have the active state off our radio bottom . Now let's go to description, and I'm gonna use maybe this 20 opacity description to set the first description, and the 1st 1 will be once and the other seven will be wig days. So let's put it in the middle. Now that centered the alignment off the text field, and I need some more text fields. So let's make agreed out of this text it as well. I'm going to create another duplicate. And also after one duplicate, I'm gonna press. Come on, the common, the common become Andy, and I'm gonna press seven times so that I have eight copies. Now. Let's not this very last copy, so you don't even have to click or anything. You just Najid with the keyboard are does. Let's select all off the text here at Let's distribute this so that we have those text right in the middle off. Our our check boxes are radio bottles, So we have Monday Tuesday, Wednesday Thursday. Answer one. So we have two Saturdays. No worries to Southern days are quite nice, and then you need to adjust the color off the text so we can call it almost the end of this component. Let's select the line and maybe let's not do it a little bit so that it sits better on the great. Let's make sure that it's it's well here and now let's select all of the layers and press command g to group them. So there is our one group with the repeat options. Now we're gonna set for the main thing that is an alarm clock. So that's taken over. I'm gonna create an over, and I hold space bar to move it while creating. Now let's have a size off for 1 76 by 1 76 Let's put it in the center and let's have a feel off temporary color, for example, yellow. This change capacity to 50% by pressing five on the keyboard. Now that's come on the duplicate and let's come on K scale this duplicate. So we have about 140 or 130% scale. We are skating from the center and by the way, notice that all those changes happen instantly on the iPhone preview that I have here to the left side. So you always need to check it on your iPhone so that it looks best. And now we leave 140%. Let's make another duplicate with commodity and another scaling with. Come on K, and it will be about 130%. Maybe that's 320 by 320 pixels. And this way we can select all of the ovals and may be scaled them within. This agreed that we have here so that it fits degree perfectly. OK, now let's select the first overall, this one in the middle, the smallest one. And now let's move it to the top. I'm using the keyboard short. Got to move it across the layers. Now let's change the color as well as capacity to a 100. And by the way, you can usually press 02 times to have opacity off 100. Now let's have the typed also t on the keyboard. I put here some crazy early morning hour. Then let's go with size off, for example, maybe 46 black buoyant off this text. So let's put this inside of our clock. And now let's have hours here. So just another great function off sketch ahead of us, so Let's select a line tool El on the keyboard. Now let's draw a straight line with shift on the keyboard, and we have one line. Now we want to duplicate this line and we go to Layer Puffs, and here we have rotate copies. This is actually huge if you select rotate copies, you said the number of copies. So, for example, if we want to have 12 layers in total, let's put 11 here will have 12. Let's say Okay, and now we have 12 Koby's and we can take those copies and we can distribute them. We can change the position. We can change the their rotation of those layers by just holding on this little dot in the middle. So now we have 12 hour clock here. Let's change the opacity so that it's barely visible will have around maybe 15 or 16%. Now let's select the text. I needed to be in the middle, But don't use this aligned options. Just use a design wise approach off selecting this and magic with keyboard arrows, so that is optically perfect in the center. Now let's like both of us that we have here, and let's change their color to dark color as well. And for this first over we have here. I'm gonna set the border property. So let's turn off the field and let's turn on the border. This will be nice, deep as well. Let's go to the position of our border and let's go for inside options. So now we can match the week off this border so that it reaches the clock. Let's change the thickness and let's stop over there. Maybe a little bit more. Okay, now we need to change position again because we want this position to be center. So let's put center. And on this over, let's change the size off the of all so that it matches. No, not this one. That's changed size off the over with the shift and Arche so that it matches our clock. And we need that position to be center because we're gonna change the color off the art off the border so that we have a beautiful radiant here. Let's put it on the top off our layers. Let's turn opacity to a 100 let's change the color, and we actually going to use this angular Grady in that we've used in one of the previous lessons, and this one would be colorful as well. So I have the colors on the top. So let's use those colors for our Grady int. And to do so, let's select the first color stop. Then you go to the color press control C for the eyedropper tool, and there you have it. Now Creek on the line to have another car stop control see adequate on the second color. Then you can click directly on this over for the Grady Aunt and Control. See, let's have the blue color. Maybe that's quick over there and control. See, that's some like this one. Now we have to get read off this black color so I can select it and pressed backspace on my keyboard. Now we're going to do some minor tweaks to the color stops so that the Grady and looks at its best. And let's change. The color stops accordingly, and there you have it. Now the next thing, which is quite great tipping sketch, is that you can have this border to be only to the 77 hours. So we want this border to stop somewhere and not to feel the whole oval. So let's go now to the borders properties and let's elect the properties now for the dash value. You can put whatever you wish for now, for example, 10. And also please make sure that you have those rounded ends and for the gap you put, it's very important and it's a nice trick here. You put the value off the sides off your overall, so let's put 212 and this number has to be multiplied. So let's boots an ass. Tricks here by the P number and P is obviously free comma 14 so you can round it like this and then press return. And now what happens when you change the dash? Value is this line is starting to grow. So now this colorful snail creature that we've made is starting to move upwards and upwards is basically wrong direction here. So what we need to do is to select this shape and to go to transform options, and if you go to transform, you can flip it vertically. So let's do that. And now if we change the dar size, you can see that we have a right direction. So this nail is going down. And now we can set the alarm so that it matches the 7 a.m. in the morning. So let's change the value to, for example, free. Let's say 5 18 No, it's too much. Let's have 400. Okay, 400 is just around seven. Now I have a symbol here that I made. So this is the slider symbol. So let's put it there and there we have our first line, let's know, adjust the position of the slider and I don't want this nail to be visible under this Snyder. So let's probably detach that from the symbol and let's change the opacity off the field. So let's go inside, and we have fuel opacity here. Let's make it 100%. I think that now looks better. Now let's duplicate the oval. That's press and hold shift and option of the keyboard to scale it within proportions as well as from the center. And let's and modify this Grady in a little bit. So let's enter grade and properties and let's move the color stop so that this radiant is slightly different. That the 1st 1 and I think it looks better now and with us. We have to do that duplicate also this slider copy and let's put it on the 10 minutes past seven and we need to change the size. So let's go to Borders Properties and that say Dash will be 200. But also we need to change the gap so that it matches the size off the circle and we're going to multiply it by a P value. Now it's perfect. So we have our component, and maybe we're gonna select all of these items and select group. That's press commander G to group it. Now we can scale those layers with commands K. So, for example, let's put 90% here to make it's slightly smaller and there you have it. Our component is almost ready. Now let's detach the background from the symbol so that we can enter this rectangle and let's change the field slightly. So let's take this capacity up. You can click on this field and press shift and up arrow to change the opacity off this Grady in. And maybe that's put this Grady in in the centre off or clock. If you take a look on my phone preview. It looks slightly better. And now our alarm A screen is ready. So I hope you enjoyed this lesson. I see you in the next one. 42. Senses and Blinds Screen: Okay, let's move on to the next screen. We have senses screen here and let's select the drop down. And the sense that we'll be using for now is fresh lemon so our bedroom can smell nice. And let's select rectangle toe. Let's create a placeholder for an image, and I'm gonna Phew let's or press F and B on the keyboard to switch between border and feel . Now that's changed a few to the image field. Let's go toe pixels side and I have this nice quality off lemons here. Now let's take this lemon basket out off our browser and drag and drop it onto sketch feel and wait a second. There we have it. OK, now let's select the feeding option we're gonna set for feel as usual, and I'm gonna decrease a paucity off this layer so that we have, for example, 30%. Now let's move this layer to the bottom so that we have this battle on top and with, as we need here on the bottom, we're gonna put this little line. So this line section I needed I need this symbol to be at the bottom off this census screen as well Let's go to the symbols and I need line with section, and this section will actually be the section for the intensity off our smell. So basically, the more intense the smell will be in the bedroom at the more capacity this background image will get, and this will be the first visual clue for the user. And the second visual clue will be a little icons that you have here. And those will be the bottles that will let you said the intensity. Let's now go to the insert menu off sketch And here we have the shapes and some of these shapes. We haven't used them in the previous lessons, and those are star, polygon and triangle. That's select polygon. And let's draw a simple polling on. As you can see now in preferences, you can select the sides of the political, and you can also, for example, and the editing world, and you can do something crazy with those vector points as well. So basically, we're gonna have flowers as our icons here, and the more flowers you have, the more intense will be the smell. And for flowers, we're gonna use a star shape. So in the star shape you cans like the radios as well as you can select a number off points , we're going to stick to the 45 points, and we're gonna go into this elector editing mode by pressing return. And now let's zoom in. And as you can see, we have different vector points and to create for our icon. It's enough to select all of the vector ports, the other on the edges. So I shift. Click on each vector points, and now let's go to the mirror adoption. And there you have a flower, and if you want to have even more beautiful flower, you can select each off the vector points, and then you can adjust the vector handles. And if you press and hold command adjusting handles, you will adjust. Both have those accordingly, and that's how you can do those beautifully around shapes off this hour. Now let's finish off this icon and let's zoom out. I'm gonna double Greek on the assume on the loop. I come here so that I have 100% view. Now let's make this a little bit smaller with shift and out to hold proportions as well as to escape from the center and maybe we'll start from there and change the thickness off the borders to one. Now we're gonna put it toe the left edge off our intensity scale, and I'm gonna do the same as on our previous audible. So let's have a make greet option, and I'm going to do one columns, eight rows and also 16 pieces markings. And as you can see, there is a lot off marlin right now. Right? But we're gonna put this a flower to the right and then distribute the markets accordingly . So let's select all of those shapes. Let's use the island options. And now you have the flowers and I need those markings to be bigger. And that is because I need each next flower to be also scaled. And let's scale it and I can use my keywords are goes up and down to make a beer scale. And let's take a look at this flower. Maybe we're gonna have 110% for the second copy, and I'm gonna press okay? No, for the next one, let's do another 120%. So the next lower obviously be 130 will create this scale that will let us give user and other visual hinted that you can make this thing smell much more intense by just selecting more flowers. OK, and let's have 170% for the last one Now it looks pretty nice. Well, they'll have to do is just select those flowers and line them correctly to the center, to the middle, basically. And now what? We want to do that select some flowers and, for example, for us for this fresh lemon smell, we have around 30% capacity. So let's elect feel and that's make a white few. And there you can see the scale off off the smell off our bedroom. All right, so if we have a free out off eight flowers here, we're gonna have a smile off around 30%. We can then go up with the opacity off our background when the smell is more intense and those are visual clues for the user. Teoh communicate. That smell is going up or down. OK, so this is it for this census screen. Now let's move on to some other screen. So let's move on to this curtain screen and in the screen. My smart home user will manage curtains as well as blind. So we have two devices to manage and that you remember correctly within the devices view. And now we can use the symbol, which was, for example, device active or device inactive to set two devices here. So the 1st 1 will be curtains and the 2nd 1 will be diet. So if we select those guys, we can said, center them interview and just put them a little bit to the top off this hardboard, I'm gonna align them correctly to the great. And now that switch, the first icon to be curtains. And that's the one override I can use lower case here because my text is uppercase anyway, So the 2nd 1 is blind. Let's put blinds here and now we have those two devices, so we stay consistent As far as we display devices to the user. Now, this device controls will be also as intuitive as possible. So let's create a rectangle, and I'm going to set the radius for this rectangle, and this will be my scale for the scale. I lied. Some lines, some horizontal lines. So Let's draw a vertical line. That's the height off our complement. And now let's stick to the sharp and as well as I'm gonna make a dash off, maybe to add Gap off 16. So let's be consistent with our agreed. Now let's get back to the value off thickness. And right now, if you increase this value, as you can see, you can draw this beautiful horizontal lines. So there you have it. Let's have a value off around, I guess, 100. And now let's select both off this layer. So let's the select learning and rectangle and let's do a mask out of them. OK, so that's basically 1/2 off my compliment. Now I'm gonna also need a slider so that user can determine whether he wants to have a much more light or less light in the bedroom. And this I'm gonna also have as a visual clue here. So I'm going to select this line, and I'm gonna slightly change the opacity of this line so that if you if you are on top of this nine, there is there's a white line and let's use Grady. And for that I'm gonna use simple ingredient linear, radiant, and let's use white color for both colors. But for this core on the bottom, I'm going to use a paucity off almost zero. So let's have, for example, five person capacity here and now. We might have the idea that if we move the slider towards the top off, this component will have more light in the bedroom. And if we move the slider towards the bottom of the component, we have less life in the bedroom. We can also adjust this gap so that we have more or less lines, and it's very easy to make some tweaks to this component. So now let's go to symbols and let's use our bottoms slider. Let's put the slider here. But instead of this white slider, I guess I'm gonna convert the colors. Let's put it first here and now. I think that we can select the over and change some colors, and as long as you are consistent, as far as the shape of this compliment looks, I think that you can you can change it Z periods across the different art boats. It doesn't really had you x so much, so let's make even thicker line outside and we have this bottles like they're ready. So we have our first component That's almost ready. Let's change the border color here and let's change the Alpha so that it's almost 100%. And now I believe it looks pretty good. So now inside of this shape, I'm gonna draw a text field and in this text it, I'm gonna put a percentage value off how open or closed our our curtains or blinds, for example. So maybe will set the description, but I believe it's too small. So let's selected, Let's put it in the middle off the text frame. And also I'm going to change the size right now. So let's add it, this text field and let's try the size off, for example, something like 14 or 14. I believe this size is OK now. Also would like to adjust some line spacing, So let's start with 17 on. Let's go down from there. I believe that we can adjust it so that it's a little bit better. Okay, now it's fine. I believe that's all for this component. This slider. Now let's go to the layers panel and let's clean up a bit I'm gonna put the line here and let's select both of those groups. Let's make one more on group with the slider. I'm going to come on our or double click and just name it Slider. Now let's option drug to have another one next to the blinds, and this blind Snyder maybe will adjust it a little bit so that you can have a different value here. So let's take this bottom slider and put it slightly down to the bottom. Maybe here and change the value, too. Probably 25. Okay, let's collapse the layers. And now let's create another visual clue for the user. Let's use a description text year. Let's put it in the middle of the text frame and I'm gonna say open and let's put this table to the top of our component as well as to the second component. So option. Drag it to have it copied to the blinds. I'm gonna option drug it second time, and this time we're going to change the description to closed. So the blinds are closed now, and let's option drug it again. And there we have our final layout, so now you're just probably want some minor tweaks you want Teoh press control, C two c degreed and maybe a line into the great a little bit. But for now, it's also in this lesson. We did two screens. It was census and curtains and see you in the next one. 43. Lamp Screen: Now you know that keyboard shortcuts in sketch are one of the most important things that you can learn. So basically, your skill is based on how often you need Teoh Reach for the mouse or for the pan tablet, and using the keyboard shortcuts efficiently will let you speed up the process of creating , he wise. When you develop a habit off using keyboard shortcuts, you realize that you no longer click so much on the sketch options. You use the keyboard more often, and then you can save some space on your display. Using these shortcuts, you can press command option one to hide the layers panel. You can press command option to to hide the panel on the right side. The properties panel, as well as you compress command option T to hide the tool spot. And remember that in the Tools panel, you can also hide those labels so that you only have icons and you save some space on your monitor. Now, one more keyboard shortcut to enter the full screen mode is command dot and every breast commands dot there is no clatter, no interface at all, and you can use the whole space off your this day to design in sketch, and then it's even more important toe. Remember those keyboard shortcuts for tools as well as for some common techniques, such a scaling or muskie? Okay, so now let's go to the next screen. This will be the lump screen, and let's change the label for the bottom. That's a evening chill is quite a nice name for for a preset in the bedroom, so let's copy and paste those items. I'm gonna have free light sources free lamps that I can adjust and change your settings. Sometimes it's so much easier to simply copy and paste some symbols from another art boat than to going through the symbols. Battle and search for a symbol. So let's copy and paste. Let's change the markings. And as you can see this frame that we have here with accent color, it actually means that this device is active. I mean that we can change their properties of this very device, so we need to change it, and we need also to change the icons. But first that change is for a device. As you can see, we have three different types off those cards So this one that is active will have this border as well as the different color off the text. And now we know that we are editing this main light, for example. Now let's go to icons and I have icons for lambs here. So let's put reading light here, and the first icon will be our sidelight. So let's put the caption. And as you can see now, the one this one is active. And that means that user will now change the settings off the main light. And those settings will be the color off the light as well as on the intensity off the lights. So let's create an oval. I didn't press shift so that I can have this oval toe look like so. And let's take Caesar's to delete this bottom segments. Now this part off the over will let us create a scale. And as you remember, we have to access the border properties. Now it's changed the end so that we have those straight edges and let's put two for dash and maybe about 20 for a gap for start. So let's change the thickness to create this scale, and we need this scale to be equal for from left to right, So let's adjust the cap accordingly. OK, there we have it, and it starts to look nice. So this cable actually let users adjust the brightness off the light, and we're gonna have one slider off the scale with the information off. How strong is the light in our bedroom? So, as usual, we try to give the user some kind of hints. What's going on here? So let's go to the border color and let's select Viniar radiant. Let's put this Grady in from left to right, and we're also going to change this black color that's Greek on this color Stop and let's go to a white color. However, we're going to change the opacity so that it's almost invisible to the left side. It means that we'll have a very small amount off right and left side of the scale, and we have the brightest light divide side of escape. Now what I'm gonna do, I'm going to copy this Snyder bottom from the next from the curtains screen. So that's Common Sea and Commander V to paste it, and we're gonna have the same bottom here that will let users change at the light source accordingly. Let's put some values and those camp percents, because percentage is a nice value that user always understands. However, we could also put some more precise value. For example, we can give the legs value and change the front size off this labor to be, for example, about 12 or 10. And this is kind of nice. Now let's create a little icons here, and it's always fun to me to create Ikenson sketch. I don't know if if you share my enthusiasm, however, I always like to create. I constants catch instead of searching for icon, sometimes sometimes it's so much easier and it's so much quicker. So let's create a little light bulb here. I'm gonna press shift and creating over, which is a perfect circle. Now let's create a different shape, rectangle shape, and if you try Teoh, connect those shapes. So let's elect the first in the second shape and you go to union. You say that you don't have this effect that you expected expected, and that's because those shapes are not overlapping. If you have the shapes that are outside each other, you probably don't have the effect that you want. So what you do is you actually made that shape of bigger and three doesn't matter how big it is now, because if we it's the late both shapes and select union. As you can see, we have this expected effect. So let's have a line here, and I'm gonna have another one. So that's a common C Command V or simply commodity to duplicate. Now let's enter the vector editing mode, and I was like the first vector points and pressed the left our own the keyboard and then the second vector points and press the right arrow on the keyboard so that this is snatched by one peak. So now let's create one more line. This will be our light source, so we need to duplicate this layer and we to put it all around the icon. Let's go to layer now Let's go to paths Anti. Do you remember? Rotate copies. I hope you dio Let's have, for example, for now, seven layers. We're going to see if if that's okay, that's at six. And let's change the position off those elements. Actually, I'm gonna delete those two, and I'm gonna stick with five. Now, As you can see, our our above icon is ready and it looks pretty nice. So let's come on. I minus or double quick on the zamtel to have a scale off 100. Now that's a shift. Click on the layers to select them all. And let's group it. Now we have the group that's come on, Kate, change the size off this bob to maybe 40 or maybe 45%. Okay, now it's adjusted position with keyboard arrows. And let's duplicate this bob so that we can have it on the other side off our scale. Let's shift drug to hold the line, and, uh, we're gonna zoom a little bit. What we need to do is get rid of those Linus, because here at the left side, we don't have any source of flight from the Bob. So let's do another line that will cross this icon. And now I think it looks pretty cool. So let's group those layers. Let's put the line inside of this copy off the group, and now let's maybe change the opacity to about 40 or 30%. So let's press for on the keyboard and there you have our scale. But to be honest, I don't really like this curve that we have on the scale. So possibly we can go toe editing mode for vectors and change it. However, I think that it will probably be best toe mascot this shape and let's select V for Victor to. And let's create a simple mosque like this so that we can cut out those lines that are to the left and to the right. And that kind of puff should be okay. Now we can select both. My years, however, needs to change the position off the layers so that the path is under the layer with on over and now we can musket out. And as you can see, it looks so much better now. Now we can select both groups and put the bobs to the top so that we have some more space for the next component that will have to the bottom. And this next component will be that will allow users to change the course off the lights. So let's copy and paste one off our sections here, and let's change the name of this section to color. That's it So now inside this color section, we're gonna put some vector shape. So let's work with factors in sketch again, I'm gonna press, shift and draw an oval to have a perfect circle. Now that's press commands to to zoom into that circle and go to the wedding editing mold with return. Now that's Command Creek in between the sections, and that will let you put those vector points directly in the middle of the sections. I'm going to select with Shift those free vector points and let's snatch them to the right . So let's press shift and tried our own the keyboard so that we have this kind of shape. I want this transitions on this do vector points to be a little bit smoother. So let's go to disconnected variant off handles or press command free. And now, if you select the vector points and shift drag one of the handles, you will see that we can smooth that out, and this works really nice. So let's pull it there. And by the way, I'm going to go to a rulers now. So let's press control are And now let's create a guide that is in line with the this vector handled, and I show you why I'm doing so in just a second. Now that's injustice. 2nd 1 Let's also make this beautiful curve out off this vector point and also let's go to the rulers and let's put guide over there. We need the same kind of shape at the other side off our over. However, before we do it, let's go to the over and let's duplicate this layer so that we can have a backup copy and let's compress commodity on this layer. I'm gonna hide it for now. And let's work on this overall copy layer on when a press return to go to the vector editing world. And now let's have the same vector points here. So let's press command to divide the segment into equal parts and command here as well as that's she flee on those free vector points. Najid with a shift and left arrow, I pressed two times to have 20 pixels now that select both vector points here, so like disconnected arms. And now you see why guides are our best friends because now we can set those director handles to match the guys that we've created and so we have very similar curve to the left and to the right. So first part off our segment is done. We can command minus to zoom out, and now we want to duplicate this segment so that we have one segment to the left and one segments to the right. Let's option drug it and let's put the 1st 1 here. And also I'm gonna put the 2nd 1 there and let's snatch it with keyboard. It's not the 2nd 1 so that we can match or, almost much this curve that we have on also, basically, we can leave it, and for flavor it should be ideal. So let's flip it horizontally, and now it looks pretty nice. So we also need that at the end is this backup shape that we have here. So let's enable this shape and let's put it to the left of our shapes. And also we need to have won the right as well. So let's duplicate it and shift drug it to hold the line. Now it's flip it horizontally and there you have it. We almost have our shape, for colors will have some minor. Nagy is here with the keyboard arrows, and now we are ready to select all the overall. So let's click on the bottom one and let's shift click on the top one in The Liar Spinal. And now let's go to Bhuiyan operations. I select union. And as you can see, you have this beautiful, combined shaped and the beauty of combined shaped in sketch is that if you want to have any minor tweaks later on, you can always go back to the combined shape, and you can always reveal the contents and change. So now let's create Grady Int, and we're going to feel it with a linear Grady int. We're gonna put some different color values so that user can switch between colors off our lights and let's maybe flip it so that we have this line that much. Is this colors on on the slider? So we have white on the left and through and black on the right, and now we are ready to set some beautiful colors for our Grady int. We might even be inspired by this color theme that we have 40 alarm clock, so let's elect some colors and probably to the left side of the scale. We can start with some warmer colors. We're going to start warm and then we go colder. Let's have a bright yellow here, and the second color will be stuffing around orange or red color. Yeah, that's like brighter one. Now, as you can see, you can simply click in the very place that you need to color to appear on the Grady Int line. And it's so much easier Toe adds those color stop this way. So this will be lighter pink, and now we go colder. So that's half some green and blue colors. Maybe some night blue color here and also some blue collar over there. But that's like lighter, and I believe that this case now looks pretty nice so user might be able to choose between the colors as well as the intensity off our lights. One side note here is that we still try to keep the functions that are more most frequently used by the user to the bottom off our layout. So we have the menu, those sliders here at the bottom, and if you go to the top, you have less frequently used functions, and we do that just because user, while holding his phone, he can easily reach the bottom off the phone and know the top. Please remember that user experience is one off the most important factors for your layoff decisions. Now our cider is ready with this little bottle, and let's proceed to the next lesson. 44. Temperature Settings: Hello and welcome. It's nice to see you in the next lesson. So now let's proceed with our last screen for the bedroom. This is a temperature screen, and we're gonna put here a temperature component. I made a symbol out off this slider with temperature so that we can put it as a first item on our bedroom screen. Now let's go to the other one and let's have a section line here. Let's put it directly in the center off our art board. I hope that you remember our own keyboard shortcut, which is comment. Let square bracket. Now that's commands toe. Zoom in and let's create a first bottom. This will be a rectangle and let's have border radius for district angle. To be large of are you, for example, 100 so that we have a perfect care of to the left into the right. Now let's change the color to our main background color, and I'm gonna have two bottles here. First line will be a minus bottom to the left, and the second line I'm going to duplicate it will be a plastic bottle. Let's have other copy with common D, and we can transform it by 90 degrees. Or we can use rotation toe and hold shift on the keyboard to create this perfect icon. This will be a battle for changing the fun value, So let's create a fun icon I'm going to press are for rectangle. Let's create a rectangle like this, and let's change the thickness off our border to be one. Now I need to adjust the radios, but I only want to have the radio on top. So that's put two weeks of value than semicolon to peeks out and then 00 so that you have sharp edges on the bottom off this I could No, let's create another another part of this icon. This will be an over, actually, but I'm gonna change the thickness toe one and go to scissors. That's delete those two segments at the bottom. And if you press return to enter the rector editing mode, all you have to do is click on this vector point or go to the properties and select close path bottom. And now the profits close. We can zoom in and enter the editing mode for vectors. You can select this vector points on the top and then Naj it with your keyboard arrows. So maybe, let's put it one pixel to the left and one pixel to the bottom, and then we have one off the arms off for fun. So let's put it there, and we're gonna create the copies off this element. Now that's first rotated a little bit. Now let's go to layers, then paths and rotate copies. Let's create two copies so that we have three layers in total. Now let's move this middle point, and you can move it upwards to have those wings closer to each other. And also, let's move it slightly to the left. And there we have it. Let's snatch it with keyboard arrows so that we can position it correctly, and I'm gonna rotate it a little bit so that our icon looks even better now. The last thing I do is to select this rectangle ads like the feel for direct angle Let's go for our background color, and now the icon off our fund is yet quite finished. So let's organize the layers so that we can have a proper groups that's like those layers, and the first group is gonna be for the fun icon. I'm going to name it fun, and the second group will be for our battle, and that is because we need to duplicate this battle. So let's option drag it and let's create another icon to the right. I know it's so addictive to create icons in sketch, but this is the last one I am doing here. So let's zoom in and I'd like to create some icon of water drops and let's start with a novel. It would be very, very simple, So I'm starting with an oval. I'm doing thickness off one. Now let's select this first vector points on the top. Now it's double click on this vector points so that you can remove the handles and go to the straight editing mode. That's press shift and up arrow on the keyboard. And there you have it. Our icon is almost ready. Let's create a smaller icon and duplicated so that we can have to water drops, and this one will be smaller and also this smaller one. We're gonna put it to the top off our icon. Now that's double click on the zone tal to go to 100% and it looks quite nice. I think that we have to create some more detail in this icon, though, so let's zoom in and let's change this size. Let's make that smaller. And also let's create a small detail here with the vector toe. I press V and create this small craft path year. I'm gonna have thickness off one. Let's put it more to the center as well as they change the ants of that be around it. Now it looks green. Nice. Now that's come on. C Command v. So duplicate this and put it inside off this little water drop as well. So if we go to 100% right now, our icons are ready, and I think it looks pretty nice. Let's go to descriptions. Let's create the description with 90% capacity text so that we can have a name off this function as well as a percentage value. So let's have fun. 60%. And also, let's put it in the center below the fund. Let's select all of this items and let's distribute the alignment so that it's directly in the center. Now that's option drag, and here we gonna have humidity off some value. Maybe let's changes to 45% now. That said, the alignment, let's select the bottle in both with this text field and let's align it to the center horizontally. I will select the icon layers as well and create a group out of them. And this group were also behind to the center off the bottom. Now it really looks nice and we have our first screen ready. That's press control, G. And let's see if it fits well to degreed. I think it does. And I believe now it's party time because we finished the whole room section. We have five screens here, and in the next lesson, we're gonna work on some other page. Let's call it CCTV, and, uh, I'm gonna grab this one and audible from there and pasted over here. Now let's delete all the unnecessary staff. Let's select it like so And let's press backspace. So I believe we are now set for the next lesson. I see you there 45. Cameras Screens: hello and welcome in the next lesson. It's nice to see you here. So now we're gonna create another do screens for CCTV will have some cameras around our house. And, um, we're gonna do some interesting stuff. For example, with the text, I'm going to show you how to create a text on a path. So let's start with a rectangle here, and this will be an info bar with the status off our cameras. Now, one handy shortcut was still drawing. You don't have to release the left mouse button. You can simply press another short cut off control are and then you enable the greed so you can still draw. You can press space bar without releasing the left mouse button. You can adjust the shapes of that. It's march is your appropriate greet. Now let's and change the fuel and border. And please remember the shortcuts if you want to enable the feel desperate F on the keyboard and for the border press beat on the keyboard. And so that is the way how you can total both border as well as a field. Now let's put the text here. Now let's like both of these items. Let's shift leak on the rectangle and on the cameras. I'm gonna put the text in the center, so please remember our shortcuts. Common left and right square rockets. It's so fast. Then you can turn off the greet. So that's press comment. GSR contra gee and below this info box we're gonna have photos, so we need to split it into four camera views. So let's first create rectangle that is the full week off our our art board. And then let's quickly switch to the size input field. So I'm gonna press option tub and then top three times. If you press four times, just press shift, stop to go backwards and then divide this wheat two by two, and I'm going to subtract two extra pixels for the markets. Now let's switch the border and the fields. So let's press B and F. And now for the field, we're going to set an image. Let's choose an image from our hard drive, and I have here five images. I'm gonna use four images, and this time we're gonna set different feels for a single layer. So that's just another image. And there we have to feels And as you can see, those feels they work. Eso that this feel that it's on the top covert, this one that's on the bottom. So this is exactly as in the later spinal work. So there is our furred few, and we're gonna have one more extra fuel for the same rectangle. And that way we made a rectangle that has four feels and we can switch between those fields . So let's duplicate the rectangle. I'm gonna make greet out off this rectangle. So let's have two rows and two columns. And also I'm gonna set the markets to be equal toe to pick Selves. So let's make agreed. Right now it's select all of those rectangles and let's put them in the center off the art board. Now it's just the hides. You simply select all of the elements and now change the height off this object. And as you can see, everything scales beautifully. So you have those responsive images thanks to the field property. Now let's select the second rectangle. We're gonna turn off the first image for the fed rectangle. We're gonna turn off both of the first few and the 2nd 1 so that we have the 3rd 1 visible . And as you might expect, we turn off the first free images. And there we have the four images that's revealed as a feel for the Slayer. Now let's go to, Ah, this boat, the bottom of the screen. And let's create a time scale here. So basically, you'll be able to change the time and see, for example, what happened in the CCTV during the last 24 hours. So let's select the line. I'm gonna have Dash and Gap dash off. One at got off, 10. So, basically, you have to select this first item here and now you can adjust the thickness so that we can create this beautiful scale. And for the last item on the scale, I'm gonna press L for the line, and I'm gonna create bigger line with the thickness off maybe three or four and also ill change the color and this will be the current position in time. So this will be the current time for the cameras and on the scale have some different hours that I can switch between by just simply swiping this timeline, and we're gonna have some visual clues for the user. And let's create a caption off, maybe for tea or 20% so that we have ours here. Maybe we start from midnight. It's half past midnight on this part off scare. Now let's old drug that's option drug to have it here. And let's commodity to duplicate those fields and will have a 5 30 here. So five hours later, we probably have 10 35 hours later will have 15 40. So that's 24 hour clock. Okay, so let's duplicate it once again, and this will be the current view. So let's put for example, camera here. Okay, now what we need to change is the color of this text, as well as let's put it in the center off this little bar. And let's change the opacity off white color and change it to our accent color. Now we are almost. Settlers changed the name off this audible to CCTV, and let's duplicated with common D now will have a view from only one camera. So, for example, let's take the first camera and we have the camera free. Now let's put it in the center and let's delete those rectangles that we don't actually need here on. Let's enlarge this one. So as you can see, this feel option for an image within our rectangle works pretty well. And let's maybe have a full view without any markings here, so I'm gonna make it a little bit bigger at now. Let's imagine so that it feels entire screen from the left to the right and also to this green bar at the top. Now what we'll have in the center is information for user that he can swipe to change the view. So let's create an oval ugly hold shift to hold proportions and let's heavy feel so press F and B to disable the border and the fuel will be our background color. But let's take the capacity down to about 70%. And let's use some icons. I'm gonna use icon from my control right now and search for a finger. Hopefully, we'll have something like gestures. Okay, everything is attached. Gesture section and let's select one of the icons. I believe that maybe this one will feed, so let's drag it into sketch. Now let's rotate it. So to rotate it, we need to press and hold command and there you have it. And also you can press shift while holding commands to have a perfect rotation. Now let's scale it. But with the scale tool, it's so much better because if you press command K, it scales strokes accordingly. So let's have maybe free hundreds and 50 scale. This is it. So let's press OK, now we need to on group this group to get to the shapes. So that's command ship G until we have the shapes and let's change the color to a white color standard procedure. Now let's click anywhere on sketchy white to get back from the stool. That's commodity to group it. And there we have our icon. Let's select the shape and let's use our keyboard shortcuts so that it's perfectly in this center so that what we're gonna do is with 1/2 some caption, and this caption will actually follow the path. So this is the way you do it in sketch. Let's quick for a text field. Now let's select the text and let's put here, for example, swipe to navigate information and let's come on a selected change. The weight off this texted to maybe light. Okay, now we need to move it and also we need to set the path that this text and follow. So let's zoom in and let's duplicate this later that we have for our backgrounds. So it will follow the path for under the finger. Let's come on the duplicate this over. And if I have this second over with me, transform it so that it's nightly smaller and it can set the path for the text. All you have to do in order to have this text follow a path is to select this layer and then you go on to a type menu and here you have text on path. And when you enter text on path, as you can see, it automatically wants to this correct path. And how did it happen? While sketch selects the correct path in taking into consideration the common area that this text field has with this path. And if it doesn't make sense for now, please take a look at how it behaves when I try to move the text field. So if I move, it s so that it touches the different shapes, it adapts to the shapes and it follows the path. So let's leave it here and now. There is a tricky part because if you try to change for example the week, the height off the text field to set it to be perfectly aligned, you gonna fail. Instead, what we have to do is change X and Y coordinates accordingly, and there you can see all the tax. And if you can see all the text, don't try to squeeze it so that it fits perfectly. Simply select this tax. And by the way, let's select this over and let's press F for field to disable the field. And now let's get back to the text and simply change the rotation. So you press command and you change the rotation so the text is perfectly aligned to the bottom, and now we can move it even slightly up. And by the way, you can also change any off the properties off this text field. So it's still available. So if you try to select the text field again, you can go to ah, this very tax, not the text, exactly. But you have to double click on the text field, and if you do, you can see that there is, there is. Next against you can edit the text. You can change the properties off this text within this text field as well as you can change some other text properties you have. If you have selected this layer, you can go to the properties menu and, for example, in case you can change the character spacing. So let's adjust the character spacing now. As you can see, it looks so much better. You can also, by the way, he can also click in between any letters inside of a text field and change the Kern Inc individually for each character. And this is the very same character spacing input field. Now let's selected this layer again and let's press commands to adjust the rotation so that it's it's perfectly on our art board. And now we have both CCTV screens ready. I see you in the next lesson 46. Porting to Different Screens: The next thing we have to account for is different resolutions as well as different screen sizes. And also we have different orientations off mobile devices such as horizontal and vertical orientation. So basically, sometimes you have different cases when you create a native up or whether you create a responsive Web design, you have to account for devices as well, because basically on mobile user has a different input, which is a finger. And on a desktop you have a mouse, which is much more precise. So you have to take everything into account as well as those factors. The scale factors that I told you about in one of the previous lessons when we talk about skating four different screens. So the basic question here is where to start, okay? And the starting point for the mobile view is duplicating the layer that you have already created and accounting for the different screen orientation first. So for native abs, maybe you don't have to do It's necessarily because you can always force, for example, vertical vertical screen setting, and then even if user switches to horizontal, it will still have vertical. However, I don't think that this approach is s o much user friendly, so you should always create also those horizontal screens. So let's start from there. And also, if you create websites, this mobile versions and responsive designs, you should also have this version as well. So what I did here is I escaped the article so that now I have a horizontal version off the hardboard, and the next step is to check whether all of our symbols scales seamlessly to those different resolutions. So let's select the top symbol right now, and let's try to scale the height. It looks pretty nice. However, if you tried Teoh adjust the week, you'll see that those icon doesn't look good at all the settings. Text field, however, is still in the center, so that's basically a good position. However, we need to go in the side of the symbol to go to the symbols definition, and we need to change the position off the icons so we'll work on this re sizing options. I hope you remember them from one of the first lessons. Let's select the icons, and basically I need to peen those icons to the left and right, so I need to do it separately for each I counsel. That's been this 1st 1 to the left. And obviously we need to fix the width and height off this element so that they don't have this different skating one. When you when you scale the component so that they don't change their weight and height is what now, let's say, like the home home text field and as you saw its case properly, even if you don't said the resizing options. And that is because it sits in the perfect center off our art board. So the same thing we have to do for the next instance off our top. Let's select the second I can handle it. Select fix wheat and hiding also peanuts to the right. Now for this tiny arrow. We need to fix the wheat and height as well, and for those elements we need Teoh. Keep it in the center, keep them in the center. So let's select all three elements and let's group them. It's the easiest approach to have a group, and now for the group, we can said they re sizing options so that we have fixed wheat and hide and let's put the group in the perfect center, vertically and horizontally, so you don't need Teoh. You don't need to change any other resizing options, and this should scale perfectly. So now, as you can see, you can scale the wheat and height and everything sits in place. So in terms off this horizontal layouts or horizontal version, we have less space as far as the highest constant. So that is why we make this element slightly smaller. And now let's select the background and scale the background as well as let's scale the other elements. And as you can see those elements s scales quite well, let's enter these elements and see the Resize Inc option. So as you can see here, we have re sizing sets to all of the elements, and that is why you can seamlessly transformed them into other resolutions. This guy is said to be left to be left and bottom aligned. However, you can, um, peanut from the bottom. And if you want, if you want this element to be, stick to the center, you can put it in the center vertically and, um, for the next elements. This one, for example, has also been to the bottom and to the right, you can amping it from the bottom. This has to be fixed, wheat and fix hide. So let's do it. And for the General Bar, this component actually is here. So this is the line section and it has fixed with and fix height as well. And you don't even have to necessarily said the meaning to the left and to the right for this component to resize because it re size is by default horizontally. So this one as well we're gonna also put fix height here. And yeah, I believe that's all for this components in the settings row. So now you can return to the instance and you can go back to this general screen. And as you can see everything as scales beautifully now and sits in this very place that you want it. So now let's check the greed. Let's press control, G. And let's resize it so that it is perfectly aligned to our greed. And also you can change the layout, as you can see for now for each art. But we have different layouts settings and for this horizontal art boards, you can go to view and now enable layout settings again to change the layout settings. And you can, for example, change the number of columns right now to six columns and adjust the martins accordingly. Or you can just skip it for the mobile layouts. As I told you, lay out, it's not that necessary. So let's select another screen and this other screen. Let's take a look at the article settings instead of changing the width and height. You can also click on this button to change the orientation to horizontal, and it's so much easier. So now that's trying to change the position and the size they hide, especially off this element. And, as you can see this normal version off top scales seamlessly as well as we said those resize Inc options now that make this background wider and also what I'm gonna do, I'm just gonna switch those icons to appear to the right off our temperature scale. And as you can see, this is one minor fix that will let you create this horizontal view. So as you can see, it's not such a huge pain to create those horizontal layouts and adapt to different screen orientations. And sometimes it's less work. Sometimes you need to dig deeper, however, if you create your symbols so that those symbols recites properly to different resolutions , and it's both easy and pleasant Now. If you want Teoh, have a little practice. Use this first screen, and you can, for example, make nine or six rows off these devices and try to recreate the orientation, the horizontal orientation off the device. Well, now I'm going to focus on the tablet version, and it's slightly similar. And here's one more thing I like you to know. So if you duplicate the art bore, so if you are duplicating the our boat now changing the values off the size off this our boat or, for example, setting it for be the iPod value or the iPhone value. You always have the same symbols here, so the symbols doesn't change. You only make a second instance off this symbol in the tablet view, however, if you press A for an Arthur board and if you create art born in such a way and then you copy and paste so you come and see and come on V those elements between the art boards if you go back to your symbols. You'll have new symbols appearing there, so this creates the new symbols. And sometimes you might want those new symbols to be different in tablet version and in your mobile versions. So this might be helpful. But sometimes you just need to work on the same symbols, and I usually prefer working with the same symbol. So I'm duplicating the layout, the outboards, and then change the size accordingly. And now I can select everything that I have here. And first approach for the tablet is so simple because you simply change the size of the items. And if you have everything said well in your re sizing options, as you can see, everything is almost perfect on the tablet as well. Maybe we need to adjust the alignment off this text fields as well as the items so that they said directly in the middle off the row. So let's elect the music up text field, and let's ensure that this is in the middle off our component. Now, if we get back to the instance as you can see, everything sits in the center, we can now modify the height off the elements and probably Now they look at their best so well that you can do. If you want to adjust things such as fun sizes or colors in between those tablet and mobile layouts, you need to have a different version off those symbols. So remember to always have a command C Command V. If you want to, for example, modify a fun size in the symbol in between those versions. For now, let's duplicate this art board and let's change the width and height so we have. The results are version off. The tablets lay up, and basically there are two approaches. Teoh create things. Tablet layout. Usually you use all the components from the mobile layout and scale them. So, for example, you have the full width components. But better approach, I believe, as using the full space off the tablet. And there is so much more. Peaks are so much more real estate off your screen so that you can think it through. And, for example, let's copy this settings again from our mobile view and let's put it to the right to the left side off this tablet view, and that makes us see all the items. Clearly, however, to the right. We have plenty of space so that, for example, we can create a rectangle as a placeholder for some more items. And you can put more items here. Or, for example, if you go to this mode settings definition. For example, if you enter Good Morning World or Good Night holds, you have all the additional settings on one screen. So that is how you can use making use out off this extra screen real estate. And actually, in this vertical layout, we can do the same, so let's make it slightly smaller in terms off week. Now let's change the height as well, and everything is readable because you have the same phone sizes. You have even more white space in between those items. And now you can use older a place that you have the right side off this least and make this rectangle that will thats play, for example, some additional options or some other options from your settings. Now let's make changes accordingly. And as you can see, this is mobile and tablet approach in both horizontal and vertical screen orientations. So we're not going to do the whole layout that way. If you want to practice, you can do it and use our finance to convert everything into those horizontal and vertical responsive use as well as you can. Think off the desktop version, however, please take into consideration that those mobile versions are quite similar in terms off how users actually approaches devices. They used them in a similar environment. They have the same in boots so they can use gestures as well as the fingers to navigate and swipe, and you have to take it into account. So, for example, you create battles to be a little bit bigger. While on the desktop you have, AH, different environment and different input devices. You have keyboard as well as mouse. So please bear in mind that you don't need to necessarily Theo exact same options on both device or both mobile devices and the desktop. Rather, you would like to think of Vesta as something that's more advanced and gives you more control over your smart home. For example, while on the mobile you have all older, necessary actions that are connected to, for example, where a what is your location at home, at what kind of devices and actions you want to perform at best, oppression will be more for managing all those devices and performing, performing all those settings, accessing more advanced options of your hope. So, yeah, that's basically it. As far as those tapes considering different orientations, screen sizes are concerned. Please. Also remember to keep your assets a high quality meaning you need toe account for high quality beat maps if you use them, and also use vectors as much as possible. So those native schedules, as well as importing vectors from illustrator or other applications such as icons, are This Is it for now. Thank you for watching and see you in the next lesson. 47. Intro to Marvel: hello and welcome to the next lesson. And I've got good news because our layout in sketches almost ready. So now we're gonna create something that's called a rapid prototypes. Are we going to give a user and ability to switch in between our art boats and see different transitions as well as navigate as this most life application we're gonna use Marvel to do that. As you can see, my sketch interface there is a marvel blocking installed already. So you can east of the marvel Blufgan from marvel up dot com. And here you also need to create an account. This account is free for after two projects. So this suits our needs for now. And let's create a new project. I'm going like this creek Project bottom. And here we need to enter the home up name for our project will select iPhone seven as our device. And please know that this resolution is to X resolution and we have our project in one x resolution. So we're gonna adjust it later, and now you can add images directly for your camp from your computer. You can go to this design view, and in Marvel, you can also easily prototype. However, the best option we can have right now is downloading the sketch Blufgan and installing it inside off our schedule. Now we can go to sketch and use this plugging to export the art board director toe marvel. So you don't even have Teoh. You don't even have to export. Those are built. A subpoena, three fires or anything like that. You simply use this marvel blogging, and you simply sink selected our boards or you think all the our boards that are in your page. So let's now sink from the home page. I'm going. It's like think all and there. As you can see that you have this export settings you need Teoh, Select the Rights Project. So this is our home up and now you need just like the scale. So as I mentioned, we designed in one X scale. However, for Marvel, we need to adapt to two x case. So let's go to to eggs and you can even go for free X You if you have an iPhone seven plus or you have some android devices with high density this place, you can go free. Exit three dozen mother and That's because we have high quality assets inside, how accordingly beat maps as well as vectors. But for this project, we're gonna set to eggs, and that's enough. Now we said, Select export and it's exporting and uploading. Those aren't boards directly to marvel up. And as you can see, this little beautiful animation is here. And also the progress that we have already uploaded for out off five articles. Now it's finished, and we can go back to Marvel and in our home, a project we already have those screens for now let's just reorganize those screens so that they're incorrect order. And as you can see, we have 7 50 by 13 34 sides. So that is perfectly correct for our two X scale. And also there's an up I conduct we can set. So let's create a rectangle here, and I'm gonna said the size off 1 20 by 1 20 and inside off this red Congo, we're going to create a simple, simple image so that we can have this beautiful I come Now let's select a for art abort and let's select a cardboard around our selection. So around our shape and inside of this art. But we're gonna put, for example, this photo off our smart homes. Let's put it there and let's me make sure that this is inside my new audibles. Let's make it slightly smaller. I need to select this photo inside of the mosque, and this little icon will actually come pretty handy if you, for example, sent this out to a client and client will install this prototype on his or her phone, and this little icon will be displayed as the icon for our application. So that's pretty nice. If you said the name for this as I could be NGO exporting, you can now select this icon and import it directly to Marvel. So now we have almost everything. I mean from the first page. Now let's get back to sketch, and we need to export some other pages. So let's switch to General and let's sing the art boards here. So I'm not gonna think all of the art boards because I have this responsive versions here. So let's shift click on the names of the art board that I won't re export. And now I have those first free our boat selected so that Select Sing selected. I have all the sectors correct. Now let's upload. That's to marvel. And while uploading, you can also work with within sketched a weakened go to the next page and from the actions view we want Teoh upload. Those are ports as well. We have to art boards here. Now let's go to room. And now let's sink all of the art boards that we have here. So let's sink our birds. And by the way, you can also select all those are boards and put them into one page so that it's easier. You don't have to click so much than think, wants and each our board. Our boat is selected as I told you. It's always better to have some pages in your schedule command, especially if you have many art boards so that you have better performance off sketch. And now let's sing. Those aren't boards from CCTV and we can go back to marvel. So now the last screens are uploading and inside of Marvel. In a second, we're going to create hot spots as well as links and transitions between those screens. However, first thing that we need to do is we need to reorganize and reposition Those are boats so that they appear in correct order. So now let's check this out. Boards, those are from our room and let's move them. So this is the first art boat off the room. This one will go there. This is an alarm, and I believe that all other other art boards are in quite correct position. So we have actions here, so everything looks pretty need. Let's access the settings of the project so that you can see that you can change the project type and the device type. You can goto this second general top and for example, here you can enable comments as well as notification about notifications about new comments . Then you have, ah, security. You can password protect your prototype and also you have the integration top. So if you can find this case blogging, there it is. And also you can download the blogging as well as connect this to slack account. And then you can share the prototypes directed to your slack channels and to your team. Now there's go to sharing preferences you have here the girl that you can copy and paste. You can send it with email or SMS. We're gonna extort it later, and one nice option here is also user test. You can actually record the behaviors of the users that uses your prototype now, so that's basically eat as far as organization and settings are concerned. Let's go back to sketch at Remember that you can always test and ran your prototype from within sketch as well. If you press this little play battle in Marvel's bragging, you can have your prototype brother Diepraam directly from sketch. Here, you can record it. You can also share it, and we do that later. There's also one more great feature off the marvels plugging you can make any changes in yours catch layout in this art board. So, for example, let's select those rectangles and let's which the photos. So now I have those different photos in the cameras and all you need to do to sing this Our boat is to select it and select sink selected select the same project, and now the art boat is swapped inside off Marvel. So imagine you've created a prototype, and on this screen you have already made some links. Some hot sport transitions You don't have to delete that all. You just need to update in sketch and saying this selected other boat for this graphic asset to swap under the hood. And this is really nice. So you have this seamless live integration between sketch and marvel, and that's it for now. I see you in the next lesson. 48. Defining Hotspots and Transitions: here we are in Marvel. We have oldest catch screens important into marvel, and now we can select the first stream and let's go to the everything Mozart. Let's select edit and now you can create your rapid prototype. So basically rapid prototyping is all about creating so called whole sports that are basically the links between your pages and between your screens. You also have an option to have a feast heather here, and also you can have the fixed footer. So basically you can freeze some part of your graphic so that when you scroll the other part, it doesn't move, and that's it. So for our first Street, we're gonna create basically to hot spots here because we want to simulate that someone used his finger to unlock the application as well as we need to simulate the action to going to impossible typing. So let's create the first horse sport, and you do that by simply drawing over your canvas. So let's make it big enough so you can reach it with your finger. And now let's select the hospital destination so possible. Destination is basically the screen that will appear after user perform some action on this whole sport, and as you can see, you have the tops here, and you can also adjust the action top. So this is said to click or top, and this is basically the default option. However, as you can see, you can select hover against. Let's why being and you have swiping left right up, down you have changing, and you also have this double top. So we're going to stick with this creek or top. And now let's go to the second stab, which is screen transition. We can set different screen transitions for each hot spots so you can have known which is default. But you can also slide upside down. You could pope sleep, and, as you can see why, hovering over those icons, you have a beautiful animations that will show you how this another screen will appear. And basically we can sit sleep, and this is the animation off the next street. So when user taps on this whole sport, it will sleep toe a home screen open. Now let's create another hot spot. So we have the 2nd 1 on this page and let's go to the logging screen Now. The transition will be slide up. So this another S Creen was like from from from the bottom and it will go up now let's go to the action and we're going to select the default action as well. Now you can play this prototype. So let's preview this prototype in another window. And let's Greek on this very first hot spot that we have here. There you go. From there, we actually can't go back to the first screen off our prototype. So let's get back to the screen. And basically, if we finish our work with the screen, we can press down. And there we are in the list. Off the streets. We can select any other string for editing, but you can stay within this screen. And there you have those arrows to the right or to the left. And also you can use your arrows on the keyboard to switch to the next page. And as you can see, this is Page two off 17 and this is Logan screen passwords. So let's go and create some hot spot there. I'm gonna create hot spot on return, and from this hot spot will also go to the first screen off our app, which is home screen open. So let's select the screen now the screen transition as well as actions, so screen transition is gonna be flip and action gonna leave defaults. So after clicking or tapping, we're gonna go to this screen. Let's go to the next one, which is the first ring off our application, and it will have some hot spots here. So let's select the first and draw the 1st 1 Maybe, let's roll cameras hot spot, and you always greet hot both so that they are slightly bigger than the icons. So if you have space in your layout, just make a bigger hot spot so that a user can easily reach it. Now we said the CC TV screen and maybe let's select Philippe s transition here as well. Now let's create another hot spot, and now this hot sport it will be four slides to open action. We're going to do it so it covers almost all of the screen so you can swipe anywhere and you can go to the main page off our application, which happens to be the general art aboard. So let's like General Outboard and now we can set the transition. So if you swipe right, you're gonna have pushed left. Probably. Okay, push left will do. And let's go to actions. And let's change from top to swipe right? And why swiping cried, we should go to this very general and main page off our application. Let's see if it works. Let's play this prototype. Let's slide it. And there we have our screen at the rink, and I believe that's almost all that we can squeeze from this rapid prototyping techniques . So let's go to the next screen. And this is the warning screen, home screen warning and basically that's actually the same as this home string open. So what we basically can do is we can duplicate those hot spots. Let make this holds about a little bit smaller so that I can access the duplicate option for the camera hot spots and let's click on Duplicate. And now let's select Those are boats, so we want to duplicate it for home screen warning as well as home screen open. That's like duplicate on free our boards and there you have it. Now we can make this one bigger again, and maybe, why there as well, and you want to duplicate this one so that we could duplicate and let's go to the next one and next one and let's duplicate. So this is it. We have two more screens. Readies this one with warning and this open screen. Let's go to the six screen, which is general. This general screen will probably have some hold sports here for actions. And let's select the actions view. This is the action. Select our board and let's choose action. Legally default. That's your transition. We're gonna have fight here for all those screens for all those icons we're gonna have simple fading. So let's select the next one devices, Let's like devices and let's go to screen transition. Let's elect fate now. We don't have energy. Actually, we didn't do that, so let's elect CCTV, CCTV. There are cameras that we have somewhere there. Let's go to cameras with screen transition off fight, and I believe that's almost it. We also need to create a hospital that will go to this setting sections. So let's select settings and the in this case transition will be sleep. And finally, let's draw another last hot spot on this page. This will be the hot spot toe the left off our top, and we're going to use this whole sport to link toe this home screen open. However, you can also lead to the loading screen. And there you have some other options, such as linked to last visited page, and will use it for the arrows here later, as well as you can link to your or M, but something you can also have this option to scroll to an encore, and this will score. If you have a long, vertical screen, you can scroll to any position on this vertical screen, and you can also keep this crow position so we'll use that later. Now that select home screen open. And that's it for this screen. That switch to the next screen. You can also press right arrow on your keyboard to go to the next train, and here we are in the devices screen. So this is quite interesting, because on the devices screen we have a height off that that's higher, actually, than the screen off our iPhone than our device. So we're gonna use this fixed heather here. Well, maybe first let's go to the preview off this prototype, and let's see how it looks without the fix Heather, so that you can compare how it behaves. Now let's try to scroll this view. And as you can see, we have a scroll bar here and we can easily scroll the view as well as we could swipe it on the mobile device. And now we want to keep this devices elements, this stop that we have that, that it is fixed at the top and the rest of the screen is moving under this element. So now let's get back to the prototype and let's select the fix Heather so that it ends on this very pixel. We have this 1 78 weeks old and we're gonna cut it right there. So let's preview the prototype, and now you can see that where you're scrolling, you have this behavior as expected. So that way we can have this fixed heather area. Now let's create the link to the last visited side, and let's also create linked to the property. So this is setting screen Now let's said the fate transition here or actually we had this flip transition, so let's move on to the fleet transition. And now let's go to the next screen. So the eighth screen. We have settings here and we need to, Feek said. The feast Heather, because the screen is also higher than the iPhones things by now let's create a hospital or we can go back to the seventh screen. And now let's duplicate this whole spot that will go to the previous screen, and we can do it for all the screens that have this back bottom here in the top. So let's set it for all those screens and let's have it duplicated on the six crease. I select this option, and now on the screen, we already have this hot spot. So let's move on to the next art aboard. And there we have Actions are board. We're going to create one hot spot here, and it can be pretty big, so it leads toe this action. Select copy. We'd name off screen, but it's basically the single view off the action, and now we're gonna have maybe pop transition. I think it's kind of nice, so let's close it and let's go to the next one. We have 10th Art Board and here we have this stop action. So let's create hot spot. That's being enough. And this will go back to our action. Select Archibald. Okay, and let's go to the screen transition. And let's select maybe this time on, you know, slight upside down yet maybe slight, slight down transition. Now let's go to the next screen and this is the room screen. So we have bedroom. We don't even have to have fixed heather or fixed food, er, and that is because this screen matches iPhones, height and wheat. However, we're going to create hot spots for the menu and let's do it Smart way. So let's like transitions and let's go to lump screen. However we're gonna do here, we're going to duplicate this Hartsburg toe all other screens, but the lamp. So let's have curtains and also alarm as well as census I copied and there we have it. Now we're going to create another hot spot for the curtains. Oh, and by the way, actually, if we if we go back and if we try now to edit this hot spot that we have here, for example, we try to lead it. You have the option to delete this from this particular image. All you can delete it from all the instances. So from all the images now let's create another one. I'm gonna draw a hot spot for a curtains that select curtains and let's duplicated, so we need to duplicate it again. Before that, we apply transition off faith. Let's duplicated toe all screens in our bedroom instead off curtains. Now let's go for the alarm. Alarm goes linked to this alarm screen that selected. I'm going to set the proper screen here and let's go to transition. Before we duplicate, we're gonna have faith as well. So fighting transition in this many on the bottom will actually generate this effect off, changing the highlight off individual icons. And I believe that this fading transition will be quite nice because we have this menu effect than so. Let's have another one, and let's duplicated toe each screen instead off census screens or curtains. We have lumps and alarm as well, and we also have this last one last hospital. But we need to have this hot spots on the other screen, so let's switch to the next one and let's create hot spot here. This will actually go to the main screen off the bedroom. So the temperature screen with Fay effect and let's duplicated to OLED screens about the temperature screen. So it's cool there, there and there, quickly, quick and duplicate. Okay, I believe we are all set for all of this screens. So yeah, probably will need to have some other hot spots here. But no, I don't think so. So bedroom is basically done, and we won't do this. Check boxes here. We won't even try to accomplish any off the swiping gestures. That's because within the rapid prototyping que simply can't do it, it's so much easier to create prototypes with me. Growing directions we've in software such as Principal Flint or Or maybe Origami, but not there. Here we always only have some basic transitions between the screens. So for that 16 screen that we're gonna have a transition to settings and let's decide on the sleep transition and now, from the camera's view, will also have the same settings part on. So let's duplicated. Maybe let's select the CC TV screen we are after and let's so like do get onto screens and that my friends is all off our work here. So we've successfully did all the links and all the hot spots. Now we can go to the next lesson and preview our prototype. 49. Readymade Prototype: in the previous lesson with important the screens, and also we've made links and hot spots between our pages. Now it's time to test the prototype within Marvel. So let's select play. Now. You can see your prototype as well as a mo cap off a device off your choice. So we've chosen the iPhone seven, and there you can go to menu, and from there you can go home. So, too, the first screen as well as view OLED screens. So please remember the shortcuts. Age is home and G is the short cut that will display all off the articles that we have here , and you can switch between them and you can preview them in your prototype. You can also select between left and right arrows here to go to the next or previous screen as well as you can press you left or a right keyboard arrows to do so. Now let's get back to our prototype, and if you decide that you want to change the order of the screens, you can do it and then simply you can refresh the prototype. So now let's use our prototype, and let's try to type a password I'm gonna click on the first hot spot. As you can see, we had this animation going from the bottom toe at the top off our screen. And there we can set the password. By the way, if you click anywhere outside any of the hot spots, you will see the hot spots previous. So you will see all the hospitals that are in this particular page, and you can turn this off by going through the preferences, the settings off your brother type. And here in general section, you were fined hide, hot spot heenes, and you could enable that to hide all those things that appear. So now let's go to the first page. As you can see, we had this flip animation. We have the animation here as well. We can go back from the CCTV. Now we can perform this slide operation to go to the main section and let's like to the right now we have this screen going from the right to the left, and here we have five hot spots. And if we go to cameras, for example, what's interesting here is that if you click the same back bottom, you will go back to the different different screen now. So let's go to the settings on and what else we can use here. Maybe actions. Now that's Greek on the goal, or anyone inside of this actions. Here we have a scroll. So as you can see, we have to make some adjustments to our prototypes. Of that, the header is actually fixed the top. So let's get back to our prototype. Let's find this watch TV screen. This is action. Select Kobe. Let's edit it and let's select fix Heather. So now our heather will be glued to the top off the screen. I simply breast done, and we also need to refresh our prototype. So now, as you can see, we are on the same page and it works like a charm. So let's select stop to go back to the screen, and that's not look back. And I also need one more fix in my president, because if I select the rooms here, I need to go toe those screens lose bedroom screens with setting. So let's go back to your brother type and let's edit this screen. He really is. And let's create a hot spot here so that I can go directly to the first screen off bedroom , which is the temperature screen, and I select dumb or maybe just like the transition. And by the way, I probably can select. Maybe it's like left transition and maybe, let's refresh it. Let's go to the bedroom. And now, as you can see, I can switch between those pages and this fate Transition is actually pretty nice because it lets me smooth transition between those many items. If I have sliding from left or right, it wouldn't look that good. So this fate transition is pretty cool. But now I need to go back from the screens to my home screen again. Press age. However, I also can added this view again, and I can create hot spot here that will go to a home page. Basically, this this hot spots might appear as well on every other screen that I have. So let's like some transition, maybe push right and let's try to duplicate this so that it's on off our screens. I'm going to select all of the screens instead off the main screen so that it doesn't go back to itself, and I'm gonna duplicate this on all 16 screens off my prototype. So now it's a like the duplicate bottle and let's get back to our preview. Obviously, we need to refresh the preview, but now our prototype is finished and we can think on anywhere on the top to go to the main page and from the main page while speaking on the top. We have this right to left transition off our bedroom. Now let's get back to sketch and from Marvel's bragging, if you select play in schedule, also have this prototype, and this is a live view. So if you change anything in sketch, it will update accordingly in this view, so we can always press home again. Check, check how your prototype works and all the transitions that we've set within. Marvel as you can see everything, is there another thing that you have here is a copy link common so you can copy this link to a plea board, and then you can paste it to slack or to an email to your colleague, and he or she can view it inside off a browser so he doesn't even have to have sketch or Marvel's account. Then you can record. And as you can see, all the actions that we have here are being recorded to a movie file that you can send out as well. And this is how Marvel works. So our prototype is ready. I hope you have good fun, and I see in the next lesson with some export settings and steeps, see later. 50. Using Sketch Cloud: Hello. It's nice to see you here in, unfortunately, the last lesson off this material. However, the good news is that you've learned so much for out discourse and that I'm going to show you some other cool features off sketch in this lesson. So we're gonna talk about export as well as we're gonna talk about sketch clout. If you are exporting this project for Colding, you should always consult it with a front and developer or a developer off your application . However, in sketchy will always stick to the same patterns, and he will always use the same functions. Usually I go to my symbol space where all of my symbols are Arditti organized and most of those symbols I'm gonna export. So I might even select many layers at once and then ice like the export settings. First I click on make exportable bottom and now I can said the export settings. So you already know that if you have P and G's, you obviously gonna go for exporting different sizes for for example, I rest And if you go to preferences so you press command coma, you can always access this presets option. And here you can add your own presets. You can, for example, have a web preset off one X and two X as well, with some prefix and suffix is and you're just gonna plus added to your preset section. Now the next thing are the four months and for four months obviously you'll need those scales Onley in case you are exporting beat maps and if you can, you always export as VG if I so you always stick to vector fights. And unless you really know what you're doing, you don't want to export SVG and Norma two X and free X. You always stick toe one spg and in the scale off one X and then this svg file with scale seamlessly to different resolution even beat Biggers cave factors. Please remember that if you make any slices or if you mike layers exportable, you can always click on this export button and export everything at once. You even have this scales here and all information about the four months. So and next think you should remember is that if you want Teoh, grab some spg cold from, for example this icon you can do so by right clicking on this icon, and there you will have the option off Copy SVG Co. So sometimes, if you ask, your developer here just required SPG code to paste into, for example, X code or to place into HTML to have it on the website. You don't even have to export their SPG fires, but just based the coat. The next thing is co PCs as attributes such as borders, colors, phone sizes. Remember that it's all here and you can Kobe that and paste directly toe your front of developers, for example, and some other tools will allow you to do it even better. And this is called the handoff. So please take a look at the hand of section off the tutorials, and then you'll see some different tools such a sapling, or have a code that will that you cooperate with developers even more easily and effectively. Now let's explore another sketch feature, which is sketched cloud. But first, let's right. Click on the toolbar and remember that you can always customize this Tober, and if you don't see this catch cloud icon, you can get it from there. And also please remember that you can always change this icon and text to be, for example, icons only or text only. And I believe you already know all the functions that are here so that you can save some space within your monitor. Now, before we click on this little icon, let's go to sketch preferences by pressing co month coma and let's go to the cloud section . As you can see, those are account settings, and this is the same account that you've used to sign up for. Sketch. You don't need toe. Apply for any additional services or pay extra for this service. You just have it included with your sketch subscription. So that's creek on the cloud, and there you can share this document within the cloud. You can now said the password so that your document iss safe and then you click on the upload battle. Now the document is uploading to the cloud, and it will take a while because this is quite a large documents. So let's go to scheduled cloud in the meantime, and let's see how it looks in the sketch love. So if you have any documents here, they will appear in a scheduled cloud account. Now our layout is already uploaded so we can select this link and we can Kobe this thing and send it out to anyone who can paste it in the browser and can preview your project so he or she doesn't even have to have to catch installed because everything is inside off a browser. And as you can see, here is our application and all of the screens that we have here. But you can also switch Teoh different pages. For example, let's go to the cameras page, and now you can preview one off the art boards. You can go to the 2nd 1 as well, so as you can see, it's extremely easy to share it. And also, this is great for a showcasing your prototype because you don't have to export all the PNG files for art bores. Now, if you go to the scheduled cloud, you have all the projects here. You can manage those projects. You can, for example, changed the privacy settings or change the passwords. You can also delete this asset, and the best thing is, if you enable this documents Teoh be sync with the clout. Once it will be sank all the time, so it constantly saves your documents. And afterwards it pushes the changes to the cloud so that in the cloud you have the most recent version of your document. And those links that you share are always current as well. So it means that now you have one copy of this file on your hard drive, and you can always select file and the river toe and browse all those versions with the history within your hard drive. However, the most current version always stays in the cloud as well, so that it's safe and you can use it any time. Okay, that's it for now. Thank you for your attention, and I catch you in the last lesson to sum up this course. 51. Outro: Hello there. And welcome to unfortunately last lesson of this course. But the good news is that you already have all the knowledge required to work efficiently in sketch. You know, all the tips and tricks and all the cool techniques that will let you create a nice Web or our play out. So I hope you had fun in discourse and also that you've learned a lot and I encourage you to which other courses. Now it's great time toward courses from prototyping and to dive into tools like Flint or or principal. Or, for example, Framer. I hope that you enjoyed this course for me. This was really cool, and it was so much fun to create it for you. So I hope that we'll meet into next courses.