App Design: Use Sketch Like a Pro | Karim Balaa | Skillshare

App Design: Use Sketch Like a Pro

Karim Balaa, UI/UX & Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (1h)
    • 1. Intro

      0:27
    • 2. What is Sketch

      2:25
    • 3. What we're going to designing

      0:40
    • 4. Overview of the tools and features

      9:39
    • 5. Artboards and App Planning

      9:28
    • 6. Symbols and Splash Screen

      14:32
    • 7. Images and Feed View

      19:19
    • 8. Exporting and Article View

      3:17
    • 9. Class Project

      0:37

About This Class

Learn how to use Sketch like a pro. Starting from the basics and moving to some more advanced features. We will be covering most of the features and tools and we will be creating a few screens along the way.

In this class we're going to learn all about Sketch, what it is and what it's great at. This is going to be more of a technical class on how to use Sketch and not so much about product design thinking (although we will do a little bit of that as well).

This class is for people that are just starting out with Sketch and also people that are familiar with Sketch and looking to learn a few new tips and techniques.

Transcripts

1. Intro: Hello. My name's Kareem. Bella, about freelance. You want a product designer from Ottawa, Canada? I designed a lot of digital things, but mainly websites and mobile APS. I use an awesome tool called Sketch. And in this class, I'm gonna be teaching you how to use catch like a pro. We're gonna cover basic features and then do some more advanced stuff. We're also gonna be creating kick ass designed for an apple on the weight. So without it, the late let's get rolling. 2. What is Sketch: you guys. Thanks for joining a class. This class is gonna start off with the basics of sketch. You don't really need to know Sketch beforehand. We're going to start from scratch and cover most of sketches features on how to use them correctly. Horry's inefficiently and they're in some tips and tricks along the way. We're also gonna be designing a few screens of a nap of your choice, really, And we're gonna have that as our class project. Before we start, though, I just want to talk a little bit about sketch what it is. What it isn't. Why you should be using it as opposed to photo shop for interfaces, Sketches an excellent tool for creating all kinds of you guys. It's lightly. It runs fast. It's great to create many federations on your design. It's not a photo editing tool, although it has some basic for editing capabilities, it's it's no for shop, for. The shop is still the king at creating great visual effects on images for shoppers to an awesome tool for creating you wise, they have definitely gone a lot better there at a lot of features to make it a better you I to those catches still more efficient in that aspect. Sketches. Also, it's Everything is done in Vector, which is awesome, so you can make your design and then export it at double the size. Triple the size, and it'll stay perfect quality. You can also create icons and logos. It's definitely no illustrator illustrators, still the king at Vector and creating great beautiful icons and logos. All those catcher does have some of those capabilities before we start. If you haven't already, just goto sketch app dot com. Make sure you download the software. You can download a free trial. You can also go ahead and purchase it. What's beautiful about sketch is that it's a one time fee for $99. That's USD, Um, and then it's yours forever, which is awesome. If you wanna stay up to date with the updates that they provide throughout the year, it's believe another $100 a year or something like that so highly recommended. At least buy it here, and then if you wish to continue with the updates, you can always do that. So go ahead and do that from when you're ready to join me in the next video 3. What we're going to designing: So throughout this course, we're gonna be working on a class project. In this case here, um, I'm gonna be working on a travel app. It's a way for maybe users Teoh keep track of their trips and write a little journal about their trips and share it with their friends. Feel food you create any app Doesn't have to be this. It could be maybe a personal project that you've been thinking of doing or could be something for a client of yours, whatever the case may be, and again throughout the class, we're gonna be learning all kinds of stuff. But by the end, we're gonna have an act, maybe three or four screens designed. 4. Overview of the tools and features: in this video, we're gonna go over the overall interface of sketch and covered pretty much every feature you see in the interface. We're not gonna go through it in detail. I was kind of gonna skim right through it. And throughout the rest of the course, we're gonna go through them in more detail. But I figure it's a good time to kind of just go through them all and cover over the basics . Really? So when you open up a document for the first time, you're going to see something like this pretty empty. You got your panel on the left here with your pages and layers, which will see in a bits on your toolbar up on top, and we installed an extension called Craft, which will get into a little bit more Al Iran. And we have our properties panel here. So let's start by creating a new art port. If you go to insert and art board. Short cut is a We have some pre defined our ports here. IPhone 88 plus and so on. With the right dimensions, you can also go up here and switch between material design. So some Google products and websites and some print stuff as well. For our case, we're gonna go to Apple Devices. We're gonna go to iPhone eights and you'll notice it. It creates an are bored with the iPhone. Any damages clicking on the title right here will select the entire airport. Let's call this. Um, if you rename it right here, you can call it something else. Let's call it, uh, splash screen. I don't want to get to me name right here. You can almost resize your art board going like this. You'll notice a change is here. I'm gonna undo it. Undo So it's just the right size of the iPhone. Um, yeah. So that's hard. Boards even create multiple airports. If I press a again, I can create another iPhone, a dartboard, and it gets out right next to it. We had to leap out. I can also hold adults and duplicate this art board. It will also duplicate over there layers that are inside here on the leaks. Here you have your insert feature concert, all kinds of things, shape seeking, draw stuff with the pen tool called vector. It'll here under the pencil text and 30 images. New are poor slices. And there's some, uh, some already designed stuff here. For example, Wes Navigation, navigation bar. Listen, stuff that sketch has just be handy. I really recommend learning these shortcuts. Couple of the main ones you're gonna want to know is l crystalline our rectangle oval you rounded Hello. Recommend learning these text pretty easy. Just tea and creating a new our port. Think those are going to use a lot. So it's nice to know those, um, let me just press articulated rectangle and gonna create square. And I'm gonna duplicated and gonna hold Ultimate Dragon Two squares. Now you'll notice my layers panel here, there, inside the rectangle our port There's two rectangle layers. I can, of course, we name them here. It's called Square. I can obviously reorder them drinking above and below the stuff appeared group on groupie. Pretty straightforward. If I select multiple things, press this, it groups them, um command G groups and by itself, um, group appreciate forward create symbol will get to it in a little bit more detail. But for now I'll destroy what? How it works if you select and whatever you whatever you have selected press, create symbol, and this is gonna be a symbol. But I'm gonna call, for example, squares. You'll notice now it looks a little different here. What that means is that it's a symbol. So I if in order to edit it, have to go inside the symbol. But let me destroy one thing if I duplicate this symbol right here. So now I've got two symbols. And if I want to edit a simple my double looking, actually, double clicking on the layer here takes me into a symbols page. And if I, for example, update the color here and go back to my page, you'll notice everything got updated, even the other ones. So symbols are a great way to update many things throughout your interface with one shop, and then we'll go through this in more detail later on. But you know me, I do this. Get back to regular a few three. Um, zoom tool. Pretty straightforward command plus command minus does the same thing. The best stuff here. Pretty straightforward again. If I click on this, I can add it to certain things. For example, I can add the points. Um, I can transform it, scale it up and down, Rotated, Flattened. Yeah, pretty 34 And really, all these things you can do from this moment here as soon as I'm here. If I hold this, I can pretty much transform it without going to this. It's nice to know that they're here. Um, asking will get into a little on and a little later on. But it's kind of similar to photo shop, where if you have an image or whatever, you can kind of mask it within this within this object scale. Pretty straightforward. You can kind of change the size. So this kind of yet 200% for example, and okay, and it goes the undue. This stuff here kind of works like the Pathfinder tool in Illustrator. If you're familiar with that, you can create all kinds of shapes. For example, if I take this and this and I select them both and I do so crack, for example, subtracts that shape from this shape so you can create pretty pretty cool shapes pretty easily and you'll notice here and the layers it didn't actually flatness. So both there still exist. I can always take this and resize it, and they're just kind of combined into one shape, which is awesome. So, like him and revert back to to the old statement easily from the undue, um, forward and backward simply moves the layers back and forward mirror will get into a little bit later on. It's a way to kind of see your designs on your phone cloud with sketch, you can upload documents through their cloud service and share it from there. View is just some other views you gonna have, rulers. You concede the pixels on the screen. You can, uh, should show your grid and create a custom grid of seem with layouts. Think, and we'll get into those little but later on. Yeah. Um, right here, if I put on object, you notice these parameters changed right away. And this stuff has things like the position that the size of your object, the rotation, for example, for changes this rotates. You can flip it horizontally and vertically, but from resizing tools here, you can change. The border radius creates around itself. Um oops. You can create styles on your object, so you can, uh, use those styles across the board. You have your A passage e as well as some blending modes very similar to photo shop, and you have your film, which is the main color of the objects. You can also change the blending mode off that fill in TV capacity of just that Phil and then same thing with the border. You can change the border size the border position outside and signed someone color, of course, as well as transparency. You can add shadows to your object with you on this half complete control over the shadow, the amount of blur and the spread course, the color and transparency in her shadow seem thing pain. Gaussian blur. He Kenbrell your objects. You can also create a motion blur as well. It's a zoom blur in the background. Blur eso. The backgrounds of that object will get blurred. These air your export tools. These are super handy, um, affect the Condon object. Quick, make exportable. I can select the format that's gonna be exported as a swells the size. For example. I want it to be exported at one, and let me add another one as well, to be exported at double the size and simply adds at two x, as in the following. And then as soon as I quick export, it'll exported at for both East. That's pretty much the just of the interface again. We'll go through these all in more detail, and we'll cover the craft stuff once we get here. Just a couple took over Kraft Kraft is the plug in made by envision, and it it's a way to think up your designs to envision and create a prototype. The street from Sketch Aziz well, as many things such as bringing an image, is straight from certain sources such as splash or your own sources, and being able to fill up your designs with content right away that wolves were images and texts and other stuff as well. 5. Artboards and App Planning: we're gonna start planning your are up. We're gonna set up our ports, find out the few screens we want to design and kind of how the tie within each other and take it from there. So let's stop equating our first our port again. You can go here, insert art board. We're gonna be up. Just click a and let's let the iPhone X. So here's the first our port. I'm thinking we're gonna create, um, splash screen first, which is gonna be the first screen you're going to see when the APP is loading Here will give us a chance to kind of establish a bit of a look for the app, and then we're gonna go straight into a log and sign up screen. If this is the first time the user is opening it and then once they log in or sign up, we're gonna take them to a feed view, which is going to show them the travel journals kind of that their friends have uploaded on that. We're gonna show one screen for when the user clicks on one of those samples journal entries. So I'm going to rename this one to splash screen you were just splash and I'm gonna duplicate this. I'm gonna just grab it and breasts and hold ult and shift. So it moved in this in one line. I'm gonna move it. I'm gonna make it, uh, 80 pixels apart. Not that it matters how far they are apart, but don't have them equal. So they look, they look nice and organized. I'm gonna rename this one too. Log in, slash. Sign up and I'm gonna do the same thing for the feed view. With 80 pixels, you'll notice sketch snaps to 80. It knows that the distance you have before was 80. So if you guys, you might wanna have a consistent let's make this feed and the store last screen blooms 80 and it's call us the article, so it depends on your screen. But a lot of times, once the screens it's already designed, I will just duplicate this screen over here. This way, it has all the same attributes, and we might end up coming back and doing this, but I just want to kind of set myself up with the airport. Sometimes it gives me a good birds eye view off the work that I need to do and how it's gonna able tie together and back kind of stuff. So let's just quickly mock up rough wire frames over what we what we think we're going to see in these cleans. So I'm kind of envisioning this screen. Teoh have, um, just, ah, simple image in the background with maybe the local off the AC. So let me just draw a box here. You'll notice again things snap nicely. So they go here, it stops and it stops by default. A rectangle. When you created, it's gonna have Ah, Phil and a border color. I'm going to remove the border color. You can take this off right here. Or you can just click be the shortcut to just hide this. Now you notice this shifted a little bit. So I'm gonna take it and drag it that there we go. Um, let me just lighten up the color of it. There we go. And I'm gonna just presti for my type tool or angle insert. And next. And I'm just kind of typing here. Uh, logo and escape will get me out of that. I'm gonna make the font size bigger. I just use my arrows up and down. And if I hold shift, impress up on, go up by 10 pixels. So I'm just gonna go local here. Want a quick on the logo? I'm going to use my alignment tools to make sure it's align perfectly in the center. So the way these work is the one on the left here, the 1st 1 blinded the left of the our board. It's one center, this one right, This one talk this one center vertically in this one bottom. So we want us to be center horizontally and center vertically. And now we know this is perfectly centered. So I'm thinking it's gonna be something like this. And for the next screen again, let me delete this him duplicate this and God, Lady pixels. Maybe the local moves up to the top. Maybe we add a slogan here. They're gonna press it, be to remove the border, and I'm gonna center. It's so I'm envisioning some kind of a slogan here, You know that we grow another box. Breasts are andro box here, Prince behind the border center. It are envisioning here. We're gonna have maybe log in with the email and log in with Twitter or Facebook and maybe at the bottom, we're gonna have, ah, a message for if you already have in accounts or if you don't have an account to sign up here. So instead of making another lineup's gonna take this and duplicated. So I'm really just creating a rough wire frame here. We're gonna have this in visual design soon, but this is just gonna give me a bird's eye view of the work that I need to do by just quickly laying out the appropriate reports. The feed view here, um, thinking we're gonna need a header of some kind where it's gonna have the title. We're gonna have gonna press over to create a circle. Maybe the profile of you here and I can almost copy things from our ports or airports. I'm gonna take this line here, copy it based it, and I'm gonna have some kind of a title here. Possibly the name of the trip. Gonna make the lips smaller here. Below it is the beat control C control. Do you copy and paste it and the between the heights here a little bit. Make it smaller. So maybe the beak will be underneath. Um, and the media here we're gonna have. How many likes this entry as so this will be like the likes section and then below Here is where we're gonna have the actual entry. So I was gonna make a box for this. We'll leave this open a nicer way once we're designing it. But this is kind of just a way to, um, to show that feed you is gonna be here, and I'm gonna take all of these guys and I'm gonna group. It's gonna copy and face it moving down. So we're gonna have another entry here. Let me make it to be. You'll notice once I'm moving here, it tells me how far it is a part, so I'm gonna make it to be 25 pixels. So now I'm gonna duplicate this and make it 25 fixes. So it's gonna be something along this line. And then when you click on one of these entries, I think we're gonna have perhaps another header here, a copy. This header paste this header and you'll notice when I copy and paste things from our port our airport, they get placed in the same exact position they are on from the airport that you copied it from, which is really handy. So, for example, I'm gonna select all of these. So one thing to make a point. So when ice when I have her over elements it selected automatically once I click on it. But because these are groups, in order for me to come here and have to double click on this airport and now I've been going to it or if I hit us, keep if I just hold command and Louis happened, select right away the layer that I'm hovering over even though it's inside a group. If I removed my finger from command now I'm still looking time. So sometimes you want to select individual elements, but you have to double click two or three times depending how many groups it's in. But if I just hold control, I get right to it. And same thing for help, control and shift. And so I can multi select. Now, I selected all of these coffee them paced up into here visioning. We're gonna have probably the same information here where it's gonna show me the person's picture, the title, the dates the likes and then perhaps a large image of the trip as well as the description off the trip. So you create this box copy piece, but it here, maybe a big title copy paste. It's gonna be the article probably face to bring it down. Could be placed bringing down pretty spinning down. So this kind of gives me an idea. Oh, the screens I want to do. I've given this a little bit of thought before, So I had a plan, though. But typically, I find it's a good way a few organizing your app, thinking about what these queens are gonna have and getting an idea of the overall flow before jumping into the visual design of every element. This kind of helps you, you know, get focused. So, yeah, the next video, we're gonna start designing this more visual design. We're going to start using some symbols, making sure things are consistent and easy to modify 6. Symbols and Splash Screen: we're going to start making these mark ups full visual design. But before I start, I was gonna show you some quick tips for zooming in and out on the right elements. If I have an element selected, for example, this word local and I press command to it'll zoom in right on that. Elements obviously command minus rooms out. So command Tuesday was writing on the element that you want. For example, if I have the circles elected, commit to boom command. One, on the other hand, will zoom for you to see everything on your canvas. So it's a quick way of just seeing the overall scope off the campus the page that you're on eso I'm gonna to assume that a little bit. Go to splash screen, quit on that first command to zoom in here, do a little bit. So I'm gonna start by putting in a background image here. Now I have sourced out an image already used the site pixels dot com p e x e l s dot com and I found this image that I think works for me. I downloaded it to my computer. You can always copy and paste it straight from here into sketch, and it works pretty well. But since I downloaded it, it's gonna go here, and I'm just gonna delete These are medium. I'm gonna bring in that image. So I'm gonna press, uh, insert image, and obviously it's huge, but I'm gonna take it, make it smaller. I'm gonna throw it in this art board. I'm gonna drag it here through it right there. So let me zoom in on this. Now, let me set up the positioning to a place that looks kind of cool. Could be something like this. Will have a little local word mark here. There's gonna work on that right now Gonna be called Travel Journal and I'm gonna center. It's on the screen. Now Let me just find the right fonts. I'm going to use a font called Bana. I'm gonna make it bolds and I'm gonna make it all caps so I can I can either retyping to be all caps or it can use a feature right here Where if I click on this and I got a text transform an upper case this meeting all caps for me now it's technically still in regular case and so if I ever wanted I want to bring it back and just couldn't quick on none. And there it is. But I'm gonna go back to upper case. You're gonna make the size 34. He's been a little bit here, put it up here, and I'm going to create a little local gonna use. My rectangle tool creates a little square here. I don't want to fill. Just gonna have a border color of whites. I'm gonna make it a little bigger, something like this. And we're gonna make it into a triangle. I'm gonna create little little mountains. Now, I can either rotate it using my rotate tool here or if I go to the edge here and press and hold command and go over here and I should be able to roll to you, and I'm gonna make it a little bit smaller. I'm gonna go 12345 into the same thing here. 12345 And, um, I'm gonna duplicate this. Put another one right here. Number zoom in illness. So sketch does a decent job at little icons. Probably not as good as illustrator, but still nice to know that It's pretty powerful gonna click on this point right here, and I'm gonna make it rounded. I'm gonna go to pixels rounded and I'm gonna do the same with this guy as well as this guy and this guy. It's kind of cool. I'm gonna take them both now and I'm gonna rename each one gonna name this one Mountain one . And I'm gonna name this one I wanted to and I'm gonna take them both and I'm gonna convert them into a symbol. So when I click on both, I can put pretty symbol and I'm gonna call it logo. Now, this is a symbol. I'm gonna center it first on the screen right here. And I'm gonna bring it down to a nice spots now that now that this is a symbol, if I double click on it, I can enter this view here, so we're not seeing it now because it's on whites. But if I click on the art board, I'm gonna give the art border background color off black. And, um, I'm gonna not include the background color in the export. Not that we can export this, but this way, we're just making in black here just so we can see the local now, the reason why it's a bit higher is because this square is actually rotated. So it's right. It's still right here So I can take this art board, make it smaller. So it fits exactly this. Now, if I go back to my instance, and here it is, so this is a symbol. If I ever decide to update this local and I'm using across the app, it'll updates everywhere. So quick. Example if it I have another version here and I decided to go into the logo by double clicking on it and see, I want to make this one red and they go else. Now, this one's reading here, but pretty cool. I'm gonna go back in there and open. Undo. So I delete dispersion. Never go. And you know what? I'm gonna add a travel journal here to be included with this symbol. I'm gonna cut it from here. I'm gonna open up this symbol. We're gonna make this symbol, uh, bigger and bigger and paste in the work. And then I'm gonna make this smaller. This way. These two covers a package kind of thing. I do now? They want simple Cool. Now let's work on our second screen, which we're going to call longing slash. Sign up and let me delete these elements. Oops. Now let me copy. Well, even better yet, let me delete the entire art board and duplicate the art board. And now this. I'm gonna move this up here. This pain when the uploads this kind of slides up, you're gonna center this 100%. Let's bring it up a little bit, so it's not overlap in their face. All right, so let's do that. Gonna give this some style by creating a a little divider line here. I'm gonna make that whites and it's around it. And then it's centered us by clicking this. Now, if I want to measure the distance between these two, if I have this item selected and I hold Ault Option key and I hover over tells me there's 25 pixels in terms of height. So this way, if I want my next item to be the right distance or equal distance, um, I don't know to place it 25 pixels, So let me press text to I'm gonna give this slogan off here. You're experience, and I'm gonna center this and I'm gonna use San Francisco. Flocked, which is the apple phones. I'm gonna make it smaller. It's also make this all caps. Yeah, I'm gonna play around the letter spacing here a little bit, a bit smaller, something like this. And I find this divider being a bit too big. So I'm gonna change the heights right here to be something like this and the with be a bit smaller than this. And now that these air adjusted, I'm gonna center them. Take this and make that 25 pixels above here. So if I click on this But here, you know what's 18 picks? Also, let me move it. 1212345 I'm also gonna dim the screen down at least the colors on the screen. So it's easy to read the text. So the way I'm gonna do that, I'm gonna quit on this. Women rename this. First, I'm gonna give this art board background color, political background, color, and I'm gonna make it wait at Black. Sorry. So we can't see it now, obviously, because this image ALS is on top. But now If I take this image and I bring down its capacity, it's gonna damn a little bit. Let me do something like we have 65% which is gonna make it a bit easier to read. Now we're gonna create a couple of buttons here. Let's create The 1st 1 is gonna be called longing with the email. So I'm going to use my rectangle rectangle to But pressing our and creating a square Let's make it 44 pixels and heights that center, it's let's give it a radius of 100%. So it's gonna be rounded and remove the Phil make it might. And let me type in Morgan with email. I'm gonna take this. Put in here. I'm gonna select them both. Now, if I have to. Adam selected these. The alignment tools will work according to the bigger item. So here is gonna center it in center it. I'm gonna do the same thing. Group these first, actually, and I'm gonna call the group outline button and I'm gonna duplicate it. Gonna have them 10 pixels apart. Gonna move them up a little bit more. Let's make them 50 pixels apart. This one I'm gonna have Ah, the background color be blue, something like this. And I'm gonna use this text treatment and copy it. Paste it here hoping both and center. And this one's gonna be called long in with Twitter. And I'm gonna have one more text at the bottom here, which is gonna be called, uh, of an account. So I know No, just lamp in the real. So now that we have these going, I'm gonna now that I kind of like this style like this text, I'm going to select this text here, click create new text style, and I'm gonna call this, um, slash screen and body text. So now if I creates new text here and see it's a different style say it's a different fonts and I wanted to be the same as this. I can select this text and go here and go splash screen, body text. Click on that and it's gonna be formatted to the text that I have 40 signed. So it's a good way of making your text insistence. The more styles you have, the easier it is gonna be maintained. Obviously, you don't want to create unnecessary styles, but having them organized in a way where you can be consistent with your typography, that's gonna be super important. So that's about it. For this video on, Expedia will start digging into the feed view and capturing some of those. 7. Images and Feed View: All right, So now that we got these two screens and a good place, let's go ahead and start working on the feed view. Um, we're gonna start by working on the header. Ah, it's Go ahead and remove this cretin new box. That's can be 65 pickles and heights and we're gonna remove the border, and we're gonna We're going to give it a ingredients color. So with sketch your colors here, you condone have a solid ingredient, a radial Grady INTs and angular ingredients and pattern Phil and noise go, We're gonna have a linear ingredients and we're gonna make it go from black to whites, and it's gonna be very like door. Let me grab the color here and go like this. And actually, let's make this go from here to here, and we can click and grab our point here to adjust are creating it to be and a perfect spot until this looks good. Um, now that we were happy with this credence, we can save this greedy int, eh? So we can reuse the rest of the documents. Now we can see that as a global ingredient, which means it will show up in all our sketch files or as a document radiant. Which means it'll show up on Lee in this sketch file. So we're gonna go ahead and do that and let's bring in our status bar. So if we go toe insert, uh, IOS you I designed buyers Status block. So these air built into sketch, which is nice in the center. It's in Atlanta Top. I'm not always use your life tools. Just makes things so much easier and so much more accurate. Let's now put in our header here. We're gonna call travel journal, and I'm gonna center it here in center here. Mm. Bring it up here. Now that I have a header here that I like, I'm gonna take all three of these, and I'm gonna convert them into a symbol. Three simple. I'm going to call it a header. So now we can reuse this symbol. And one nice thing about symbols is that you can re label things. So, for example, if I'm using this symbol here, even though the same symbol sketch gives me the option to reward things So travel journal, for example, I can call it something else here. So you know, still the same symbol. If I change the color, it'll change on both. We have the capabilities of rewarding things I just break to. No, let's work on this section here. There's a few ways of importing images. So say they wanted to put in an image here. We can either import the same way we did with this and make it into a mask here. So let's do that first. What's gonna copy this image and I'm gonna paste it into this art board and let me shrink it down a bit. So if I select this image and hold shift and select the what now this is in a group. So it was gonna run group this. I'm gonna quit here and go on group. So if I said like this image, end this box and I click on the mask tool, it's gonna put it inside. So if I hold control our story command, grab this image. I can move it around inside this mask. This is a cool way of, uh, adjusting Grammy just to put them in perfectly. There's also another way of assigning an image into a shape, and that is with Mr were. So if I select the image and go to the color, But instead of a color, we go to this one here and we choose an image. So, for example, I'm gonna choose this image and quick opening. You'll notice it placed it in here. And there's different ways of showing His image right now is set to fill. You can set it defict, which will squish it to unnecessary squish. But it'll fit. It's in proportion to the box you have. I can also stretch it. This is actually stretching, and now we're in Go tile little tiles, for example. If it's really small, we'll start looping for our case. We're gonna go, Phil, which fits. It's in proportion to the box. So, for example, if I take this box and I make it, uh, higher, it'll stay in proportion. Of course it's gonna cropped the edges, but it's a good way of getting the right size on filling it in proportion. Um, so let me and do a couple of times here, so these air two ways off, adding an image into a shape. The third way is the way I'm gonna show you what it's by using the craft blocking. So I'm gonna go here and I'm gonna going to leave this completely, and I'm going to start by. I'm gonna also delete this and this. I'm gonna start by creating a box here. Um, I'm gonna take away the border, and it's also create another box and another box. So if I select these three boxes and I go to my crafts shortcuts here now, if you don't see it here, just click on Kraft and Toggle Panel That'll show it. Hide it as long as you have craft installed, of course. So now that I have these three selected have some tools I can play with here. So this one right here is a way to import images. You can either import them from splash or from your local files. So we're gonna create our own source. Teoh, get some images from Mykonos, Greece, which is gonna be our design here. I have already downloaded, um, a few images. So I'm gonna just make that my folder. So you'll notice if I quick photos And from this tablet here, I can click on add item here and let's give it a name. They gonna call it Greece and the source is gonna be a local folder. Now it's gonna tell me to select the folder and I'm living. Go ahead and select the folder that I have added a few averages in there and quick open. You know, I'm gonna save action. So now I haven't item here called Greece. And since I have these three selected and I could Greece, it imports the photos from that folder into here. I'm gonna take it again to get a better arrangement. This is not bad. So if you have a bunch of images and you want them all states a bunch of profile shots, for example on do you want to import a bunch of images at the same time? You can just select all the items and then click one button and all these these shapes will be filled with images. It's very handy, Onda. We will speed up the process. I'm gonna just organizes in a nice way to I'm gonna have them the 10 pixels from the edge. So let me zoom in here a little bit. Now that this is all the way to the edge, I'm gonna hold shift and go. Great. Which will go move it. 10 pixels. Um, I'm also gonna do the same thing for the other edge here. 10. And I'm gonna open up my rulers by pressing control are or you can go view. Um, if you canvas show rulers right here and I'm gonna drop a couple of guides, I'm gonna do this and this. So this is gonna be my guideline to keep everything within another, have this image here in this image here, I'm gonna I'm gonna measure the exact center off my my canvas. I'm gonna simply I'm gonna send to make a box and let me remove the border. One cool thing to do with sizing here is that you can do math within here. So the width is 3 75 I can simply go divided by two and click enter. And now it's exactly halfway. So now that I know the half, I'm gonna do this and drop. He died right here. So I'm gonna have also a margin between each image of 10 pixels. That means five pixels from here. Five pixels from here. So let me take this guy, move him all the way here and go down five pixels. 12345 But there's multiple ways of doing the stuff. Thats kind of just one way we're doing right now, But there's many ways even fix up your license. So I'm going to leave this and I'm gonna do this. There we go. And then behind my rulers. And I'm also going to divide this by two in terms of heights to be something like this. And bring this guy in 23456789 10 That's kind of cool. And we're gonna give these some rounded edges. So I'm gonna double quick on this guy. Quit on this anchor point and then this anchor point and gonna make the corners be five pixels. And I'm gonna do the same with this guy. 12345 as well as this guy. So this is looking good. Um, let's fill in this image so same technique. I'm gonna click on this image. I'm going to click on this guy and I already have one called profile shots. I'm just gonna click on it. I can click on that as much as they want until I find the perfect So, saving one. We're gonna use this guy. Let's take him. Let's make sure we're left aligned. Perfect are staying with me updated. Get an image with a nice background. Okay. And let's, uh, remove this and this and let's and title call it Legal knows Let me make this headline just a bit bigger. So I'm gonna go inside my symbol and make this a little bit bigger. Just so there's better hierarchy overall. And let me do cooking this and put in the day here. Save September 2017. I'm gonna change the color, so I'm gonna add my document colors as we're going. So we have our back are black color. I'm gonna create document color for that. Now we're gonna meet and later color, maybe something like this. C three c three. Create that and let me make the font size a bit smaller and putting it up something like this group thes two. And I'm gonna center them within this. I'm gonna unbolt it as well. You know what? I'm gonna medium build none of this. And now that I'm happy with my typography, great styles Aditi's I'm going to select this guy. I'm gonna go a new style creating your style and this is gonna be Cold Location label, and this is gonna be called dates. And afterwards we're gonna convert this whole thing into a symbol. But for now, we're gonna finish up this section as well. I'm going to remove this. I have a Eitan off a heart that I downloaded and I'm gonna use that was gonna copy here, then paste every here and take Let me write the word here and 154 likes they told him and he was black and he's gonna be a bit smaller. Let's having bottom aligned with this. So I'm gonna click on this and bottom line it and let's have a right aligned with this And then let's center this heart with it with this. So now the zoom. Now we have a nice organized section. Everything is 10 pixels away from the edges. There's a 10 pixel margin between these these air bottom aligned and we're using constant typography. So let me take all these guys and make them into a symbol. Let's go create symbol. And that's call the symbol Ginger too. General. Better remember, symbols are really elements that you want to reuse throughout your design. And I'm also gonna take this symbol and these three and make a symbol out of these. The reason why we didn't do everything at the same time is because we're gonna mess thes symbols in case I ever want to change something here. But not here. I can go into this symbol and modifier. So another have all threes. Three selected. I'm gonna go create symbol. I'm gonna call this eternal. And so now, if I double click journal entry, you'll notice it takes me about symbols. And this is also its own symbol. So if I wanted to edit this double click on it and it's gonna take me right next to it here , which is where I can modify. So this is looking good. Then go back and then back again. We got this. Um, let's to matter. I'm finding this a bit too big. I'm gonna go back in here and bring it down. Supersize. In the last year, let's bring this up. Let's have a nice distance between it. Maybe let's give it some room to breathe. Maybe 30 pixels. Okay, so now that we have this simple called journal entry. We can hold adults and bring it down And let's find a nice distance. So maybe it's gonna be 30 pixels between every entry, And I think with on this and go another 30 pixels. So this is awesome, but obviously showing the same content, and we're gonna want to change that. So I'm gonna click on this symbol and re named something's So we're going to rename We close to It's a School and we're gonna change the date to say August 28 2017 on the amount of likes we're gonna change it to see, let's see, 244 likes and we want to change these images. So these images here they're right here. We can also change them. And again, this is still part of one symbol, which is awesome, that we have control over changing this stuff as well. So let me go choose image and this is gonna be a San Francisco, which so I'm gonna I have already downloaded a few images. I'm just gonna go ahead and place them here. It's this one here, this one here and this one here cool. And we also want our place. This photo here, profile shots. Let me use se this image. Here we go. And we're gonna do the same thing for the last one. 27 2017. And this is gonna have 175 from 76. Likes cool. So here we are now with this screen, pretty much all done mess video. We're going to start and plan out the other screen and think of him there. 8. Exporting and Article View: So for this screen here, we're really gonna be using a lot of the same techniques were gonna be reusing the symbols that we created here. So for that reason, I'm going kind of fast forward through this and design this pretty quickly book. All right, so now that we have all the screens designed, let's start learning about some exporting techniques. So sketch is amazing at exporting your assets. It's got a feature where Anything you have selected. For example, as soon as I select this, I'll see a make exportable feature here. So say you want to export this for your developer and you want to send them perhaps the image right here and these three images. If I go inside my symbol right here when I click on the profile shot right here, I can click, make exportable and maybe give them two sizes and they're gonna be PNG because this is a rounded corners and we want this thing. This section could be transparent. I'm gonna create two versions, one double the size, and it automatically names itself to which ever name the layer has. So I'm going to call this profile shops and go export Let's just put it, um, for now, just on my documents angle export. And now, if I go to my go to my documents, you'll notice it. Exported it at one and two. Um, so, yeah, you could have multiple things select at the same time. For example, I can select this image, this image and this image, and let me name them property here. Let's call this in. Greece one and Greece to in Greece three. Same thing. I can select all of them. Andi can make exportable export them. I double the size and click export layers and boom exports everything. Well, super handy and very quickly. Teoh export everything. 9. Class Project: Well, thanks again for taking this class. I hope you're able to take something out of it. Please go ahead and try to do your app and feel free to share it with the rest of us. That obviously doesn't have to be this. It could be anything. Just as long as you incorporate some of these techniques the use of symbols, the use of textiles and so on. Using your alignment tools properly and to try to share with us what you've created. And please feel free to hit me up. Let me know if there's any questions and, uh, yeah, thanks again.