Lessons

Lesson Info

Free UI Icons

Hey there. Welcome to the video. This one is all about icons. Okay. We need them to kind of indicate. What these things do is an image play buttons? We could draw them. But if you're lazy like me, we're going to go off and appropriate them not steal them because they're free. I'm gonna show you a couple of cool places will be adobe market google material plus icon finder and I'll show you how to kind of use them, recover them plus some little re sizing tricks. So hang around, we're gonna make some icon and by make, I mean steal from other people. Okay, so we need those icons, where do we get them from? You can steal them from other ey kits. Okay. The, like the wires one we've got here. The problem I find with using these they're totally fine. The problem is you just gotta dig them out because there's no like, search for icons in this thing, you've got to kinda like look around and like, let's say we want that image icon, okay. Or the play or pause. I know it's not in here because I've ...

had to hunt around already, but you end up doing this great for ticks and kind of more of this interface, you y but this particular wireframe doesn't have the bits we need and how we're moving around just to remind you, hold the space sparky down, click and hold and drag your mouse. So if you can't find them in here. You can find a lot in different UI kits. You can download some of the ones I have in your exercise files, where else do you get them from? Where do I get them from? Like where, where is the easy place? There's two main places that I use and the first one we're going to look at is called the adobe markets. Hang on a second, wait there, wait there, wait there. This is dan from the future. Um, I'm jumping in here because there's been some updates to XD and I'm going to jump in here just a couple of times throughout the course just to kind of keep you updated on things that have changed. Adobe XD is by far like the most updated program adobe has at the moment and it's a little hard for me to keep up. So I kind of had these little patch videos just to keep it fresh and I'll do one of two things. If it's pretty complex change. Like it is in this video, I'm going to rerecord bits, either rerecord the whole video or add a little extra like this one or I'll just update it in the comments. If you are looking at something, you're like, hmm, that seems a bit weird. Have a look at the comments and either me or one of my teaching assistants will explain the strangeness to you often. It's just a language change things that used to be called symbols and they'll call components. They work the same. Okay, so check in the comments throughout the course. If there is something just that you're like, hey, it's not where it is in the video. Just have a little look down and we'll just explain where it is. Often it's just repositioned somewhere. Now for this particular videos update, I've cut out a chunk where we talk about where to get free icons from. Specifically this image icon here. Originally in this video, we got it from something called Adobe marketplace Dobie Marketplace doesn't exist anymore. Um, so I've cut that bit out of the video and simply put this icon sitting nicely in your exercise files. It's under icons and this one here. Okay, So instead of going around and finding it in adobe marketplace, just go to file, go to import. Okay, and go to your exercise files and bring in this one called image and you were kind of up to date. So just to recap, adobe marketplace doesn't exist anymore. I'll probably mention it a couple more times in the course. Okay, so ignore me whenever I say Adobe marketplace think google material, an icon finder. Those are the replacements that are going to cover next in this video or in the following part of this video. Uh, just a replacement for Adobe marketplace that doesn't exist anymore. Alright, so right now for you go import this image and then continue on with the video. The reason to do that is because I want to break this apart. We're not really breaking apart. I just want to change the color of it because it's black at the moment. I wanted to be the blue. So what I can do is I can double click on the double click on it. Just keep clicking on it until you see this over here and you can change the fill color. Okay? And then to get back out, just double click on the background, kind of like double click it to dive inside, change the color. Double click to get out. Let's get it to be about the right size. Now. I'm gonna show you a little trick here. I'm gonna show you a little thing that happens in next day. If I drag this down, can you see something weird happening? You can see the little dot and what ends up happening by default. Is this thing over here called responsive. Resize is turned on. If I turn that off and do the same thing, can you see it doesn't mess around with that dot. So there's gonna be times in this class where that's really awesome and when it's really not, it's in the really not function at the moment. So I turned it off, scale it down. Okay, And I'm going to use it on this one here. Okay, so that's what that's guys gonna go, I'm gonna duplicate it, it's gonna go on this one is gonna be an image as well and the fact is not going to have an image. What I'm gonna do is I'm gonna just move these guys up holding shift to select more than one. And here we go there. This one though, I want to have some different icons and let's say I can't find it in here. Okay, I can't find it in this one. So I'm going to show you another place where I get my icons from. All right. And here we are. It's a website. It's called Material dot io It's run by google and it's a I guess a place where especially if you're new to web design or app design, it's just a really awesome place to get. Like there's lots of not only like icons which we're going to find, but if we click on things like design, there's just a lot of articles, research projects. Um If you read this site back to back, you'll end up with a lot of the language used in kind of ui design and it just gives you good examples and you get to meet really famous designers. There are famous ones because it's just a really good central resource for ui design. What I want to do is go to tools and I want to find the icons. I just want to steal some cool icons from them. Case of tools then click on icons there's lots of other things in here. And but I just want this So in here there's some cool stuff. Sit down the bottom here. Just a real good large chunk of lots of icons. And the best bit is that's searchable. So over here I can filter by name. I want to find the play button. Okay and down here is a bunch of play button. You can decide whether you want filled ones, outlined ones, rounded ones to tone ones. Okay, so there's just a nice consistency across like icons are quite easy to find I guess online but it's hard to find ones that are consistent across such a large broad amount of different icons, they all look like they're from the same place. So I'm going to pick I have no idea what the difference between these two are going to click on it. Down the bottom here it says of the selected icon. I'm going to click on this and actually no. Yeah. Do you want the dark version or the light version? It doesn't really matter. In my case PNG or SVG, that's my question to you now. It's a test which is the better one and S V. G. Is okay because I can edit it. PNG I can't it's going to be a graphic, it's going to be an image. Don't click on it. Whoops. Okay I don't want that one. I want the SVG. This website in general is a little hard to use which I find a little it's just not it's nontraditional. They're pushing the boundaries of what you can do with website design. So you get a little lost in here. Don't worry. I do too. When you download it you stick it on my desktop and you can start using it. I've already downloaded it for you so you don't have to go through all this process. Okay, so once it's downloaded I'll show you what to do in a sec. So I've gone through and I'm gonna click on that and I found a mute button and a pause button and a re like a restart button and I've got them ready. There It is, replay. Okay, So I download this for you just to save some time. So let's jump back into X. D. All right, so I want to bring in those icons is an official way. An unofficial way. And so the proper way is file I'm going to go to import and I'm going to find them in my exercise files. I'm going to go to icons. I'm going to bring in the play button that I made for you. I just name them differently to make it easier as well. There's some crazy names down from the material site import and there it is there. I'm gonna zoom in on it. Now. Remember the shortcut we had there's command one gets us 100%. What's the one that gets us all the way zoomed in like super big command three or control three on a pc. Just whatever you have selected. Okay, so I have it selected first. Just zooms in so it's just a handy shortcut. See here Phil I'm going to double click on it so I get the gray, the black background because I don't want to change this white area here. I'm gonna click on it and go to my little little consistent blue command one zoom out and that's my little icon and that's my first one here. First one there, I'm gonna zoom out. Command zero. Control zero. I'm gonna stop saying shortcuts soon because you're gonna punch me. But for a little bit of the first class, I'm going to repeat myself. What I want to do is select all of these. You can see I want this one, this one I can just drag a box around the mall and command el control L on a Pc to lock them all so that I didn't run into that problem. Command one This guy needs to be a bit bigger and he's going to go there so that's the official way of doing it. I'll show you that kind of down and dirty dan way. Okay. Is what I'll do. So I'll find my exercise files, grab my icons and I want the play already got that one. I want mute and replay. We use both of these. It's going to click hold and drag them and that's an easier way to do it. Okay, wow, is it easier? I don't know. That's the way I do it anyway, just drag them in Mac or pc you can just kind of like have the window open on your kind of finder or in your windows and just drag things in images, icons I find that's the easiest way to work. Now I'm going to kind of get these positions the right size now you'll notice that resizing this one, it's kind of doing some weird stuff so if you know, some people know, some people don't, if I hold the shift key down while I'm resizing so hold shift down, you can see I can't distort it. Okay, so with it off I can squish it. Okay I'm gonna undo edit undo. It's a holding shift is gonna get me the right size ish. Same with this, I'm gonna get down to the right size. Yes, double click it, you are blue and double click. You you are blue, that's why Suggs are awesome, scalable that victor and the graphics. Alright, so I might get him looking nice there, you get bumped over now. Sometimes the smart guides where it's trying to line things up and you're like stop lining up, I just want to move it a little bit, you see that's quite hard. Um what you can do is just select it once for the black arrow and with your keyboard just kind of tap it across just using the arrow keys. Okay, just a little plain old hierarchies. Alright. The last place I go to for icons if I can't find it up in here in the assets market and I and I can't find it on material or it's just not the right one. Right? I just don't agree with the mute button. Okay, so you don't like it, you can go to something. This is the only other place I go to. I go to icon finder dot com and I go into here and I type in mute and there are paid ones and free ones. I'm cheap. I shouldn't be but anyway, I go in here and I say I wanted to be free, I wanted to be victor and these are the ones that are free and victor. Okay, so you might decide that like I prefer this style and the cool thing about it is a you can get SVG s make sure there is an SVG version of it. And what can be cool if I can click on this one often they're part of larger groups of free icons as well because that's the one I'm going to download but you can see it's part of a bigger group. It's not a huge group. Oh no, there's a huge group in this one. Okay, so what I want to do is download the SVG. Okay, so that's the other place I go to, you might have your own place. It's not like the place to go but try market try material and then after that you can do some just google searching or try icon finder dot com. Alright. I have the icons I need. We are going to move onto the next video. I'll see you there.