Lessons

Lesson Info

How to Use Adobe Illustrator for Web & UI Design

Hi there in this video, we're going to look at using illustrator for Web and UI app design. Now, illustrator is one of the tools that gets used a lot by UI new UX designers to build things like websites and apps. Now, we're not going to go through everything possible for Web in UI for illustrator. I've got a completely other course that's dedicated to it. Like it's, you know, it's another 50 videos. So if you want to go in like full bore, do it, go check out that course you're looking for that little smiley man icon. Okay, so it's the Web and UI design and illustrator. But this is the advanced course and I didn't want to kind of leave you hanging. So I'm gonna give you the kind of the high level stuff that you need to know. The first one is exporting these graphics that you've created for a website or an app. So we're gonna work on the mobile version first. Okay. And what I'd like to do is, let's say we've drawn this like a little tick in the circle. I want to export that for my websit...

e. So there's a couple of ways. So I'm gonna group this first because I don't want the text. I want these two single zoom in. I got you. Cool. So I've got both of them selected. They're not grouped. I can right click them and go to export, click for export as a single asset or multiple assets, um, single asset. Let's do multiple assets first and to see what it does. So it's opened up my export panel, which has already got a Kiwi in there. Hello, Goodbye. Um, there's the circle and the tick separately. Okay. So what I might do is I might undo that comes back is right click and say export for single asset or like what I tend to do is let's say this logo at the top here, I just drag it in. Okay. And if you drag it in while it's grouped, it will kind of do a single asset if it's un grouped grouped and I drag it in, it is that kind of multiple assets, depends on what you need. And the next thing is, is I'm gonna select on this asset here. I'm gonna give it a name. It's important. Not important. But if you give it a name now when we export it, this is the name, it's gonna get, so let's call this my tick. Okay. And down the bottom here, you get to decide on the format. Now when you're exploiting for web, there's three main formats. Jpeg. PNG and SVg. Now, basically Jpeg is good for images. PNG s are good for things that have transparency and SVG is a new and fancy and vector. Okay. It's scalable vector graphic as the acronym and they're getting more and more popular when I'm building a website as a web designer. I'll use SVG is wherever I can because they scale nicely. They look great on all screens. But talk to your web designer or web developer for what they need. Some websites have to support older browsers and Suggs don't work. So as a safe bet you can do both. So what you do is I want a PNG I want to add, I think I don't think at scale think ad version. Okay, so this has made a bigger size for me. I don't want a bigger size. I just want to go to SVG. So I got two options here. Now this is kind of for web design. If I wanted to go for app design, the easiest way is to click on this guy and say I'm going for IOS, which is your iphone or android, which is pretty much everything else I click on that. It's going to give me this is what my app designer or app developer wants. Okay, they want a small size, the regular size and a bunch of other different scales. Okay, so it goes up and down so it's just done for you. Can I undo? I can't, I'm gonna have to click them all off. So let's say we're going for web design. So I've got it's Gail, I'm gonna not add a suffix. I'm just gonna make this 11 this guy down here S V. G. This is a kind of really common kind of grouping descend out. But again, talk to your web developer now, once you've got it, you click on export and give it a folder. It's gonna lump mine on the desktop, click choose, we're gonna go check on the desktop and I've got this junk from when I was practicing and there's the kiwi, so I've got my tick, which is my PNG and SVg. Go on and yeah, so that's how to export just single graphics and you'll do that a lot. The text will get built in html and CSS if you are interested in this kind of thing. I've got a quite a few dreamweaver courses for building websites. Okay, if you want to get into a bit of html and CSS go do that one. Now, one thing you might notice is if you are a big fan of using clipping masks, had something pre made, but I've got a blob. Okay. And it's got no Phil okay, let's go give him a film And I want to crop it down to say this size. For some reason, I'm gonna hold down, command seven or control seven on PC. Okay. So I've cropped it down. The problem is when I drag it into my assets panel, can you see it's it's got my graphic there. It's a little hard to see, you might have to zoom in. There we go, but it's actually got this kind of, can you see all this stuff around the outside here? It's actually included in the thing. So it's not gonna be a nice trimmed box. It's going to have a junk around the outside. So what you need to do is with it selected actually before you do it. Okay, before you kind of clipping mask or right click and release the clipping mask. Selected. I like to use my shape builder tool which is shift em. Okay, there he is there and I'm going to delete this stuff off. It's a better kind of way of preparing graphics because now that thing there, if I drag it in, it's actually all the way to the edges. Okay, there's a little bit of gap at the top. Don't worry. For some reason, I really like to show a square, but that's all trimmed up now now that happens as well with images. Okay, so you do a lot of cropping of images in illustrator. So I'm going to bring in an image. Just random one from my exercise files. Okay? And let's say I want to crop this down to a circle and I do a tiny circle round his head. Okay? And I crop, it's the same principle here, if I drag it in, it's made this big graphic with this little circle in the middle, the outside is transparent and that might be okay for you. But what you need to do is with this guy selected, what you need to do is I'm going to release the clipping mask again. Okay, and I'm gonna select on this guy and there's one that says crop image. Okay, and I can drag it. So it it should snap if it's not snapping to the edges, Go to view smart guides and turn those on. Okay, so get it kind of where you want it first hit return. And the cool thing about that that is crop, there's like pixels gone, it's like Photoshop cropping. Okay, so it's a cool new feature in illustrator. Now I get to make my mask drag it in and it should be an entire circle. Cool. Give it a name and in this case we'll shave that one out probably as a Jpeg. Another interesting thing to know is that this guy over here has been added. So we're gonna call him blob. Okay. And this guy has been added and he is man great SEo den what ends up happening here is that that's not a one way street. Right, so this guy, if I update him and give him a different feel color, you'll notice that he updates up here. Okay, so that's true of all these graphics so you can kind of name them, spend some time work out what kind of versioning you want. Okay, so um I want to see all of these guys held a shift and click them all and I want PNG want some J Pegs and I want some spG goodness and if I had export select them all again, it'll only export the ones you have selected, click on export back in the same place, it'll override the ones you already have, which is cool. Okay, so my blob now blob, there's two versions Jpeg PNG and SVG. Okay, but if I go and quickly update this, okay, the designer comes back and says it's not working or you're the web developer and you're like, I don't like it, come back into here and I just click on this one guy click export and he'll go back out now replace all those fellas. It's a nice cool like little system they got going good work adobe. Next thing is so we've got the graphics out but the text doesn't want to be included in as graphics. Okay. Your web designer doesn't want the actual like graphic of the text. They want the actual text and the styles that you've used. Okay, so you could obviously go in here and tell them it was open sands and was but they want to know all sorts of things about it and yeah, that can be problematic unless you go to window and go to CSS properties. Okay. And the cool thing about it is especially text is easy. You can see it tells you the this is the CSS for it if you have not used it before. Okay, that's the code that says I am open sands, I'm bold. These are the colors. So super handy, you can just copy and paste that and send them and say this title is this, you can get super fancy and start naming character styles. Okay. And it'll give you classes often I just copy and paste this as I'm building now. You can do it for texas really easy. Just click on it and you can see this is Playfair bold and it's all the code. Now let's say this kind of red box in the background here. Say I wanted to export this is a graphic. I probably wouldn't build that in CSS But anyway, let's say you did. It says there's no co generator because there's no name for it. It needs a name. You do it in your layers panel. Okay, so twirl this down. It should show me in here. See the blue dot that blue dot indicates. That's the thing you've got selected. If I double click it. Okay, and give it a name and call this one red red underscore box when you're naming things like this in web design. Okay. It's often hyphen no spaces, hyphens or underscores and you can see now with it selected, it says my class of red boxes. Got a background color of this. Okay, so there's just some really cool stuff. If you want to get a bit more high core into it, you can go into the burger menus, go to export options at the moment. It's only telling me the basics and that's what I want. Yours might be on by default. I can't remember if I turned this on or off or not, but you can include the dimensions and the apples absolute positioning. Okay so click Ok. And it's giving me how far it is from the top and left. There was another option in there. Let's have a look export options um generate CSS for unnamed objects instead of having to go name them to be all official. Just take that on and it will let you create CSS for everything without having to go and name them. Alright, next thing to know is we're gonna go something called pixel preview. So I've generated on the bottom left of this desktop version. Let's go down here to him. It's closed down my CSS properties and let's talk about pixels because in illustrator right it's a vector drawing program so it scales everything looks sober sharp on the edges but when I go to images in web design often jpeg or PNG s they use pixels Okay. And pixels not as you know not as sharp around the edges. So what we need to do is before we say I need this to be a PNG I need to preview it in pixel preview So view pixel preview because what you'll find is a lot of graphics will end up looking really good and illustrator but then you export the PNG and they're kind of fuzzy on the sides or one side you like. Okay so what you can do is you can turn that on first of all and it shows you what this would look like if it was pixels. Okay, so you can see my lines. Let's turn that on and off. Cool. And and so there's there's a couple of things you can do. Let's say this line here and I'm gonna turn on my pixel preview again. It's not looking great. Okay, because it's kind of the problem is the stroke is not at one point, I'm not sure it is one point which is cool but it's kind of straddling two pixels here. So what you can do is you can right click it and say my friend make pixel perfect. Okay, so it just kind of adjusts it now. It has moved like literally has moved but for me that's better than having it fuzzy. So you can decide this guy here, same thing you make pixel perfect. Everything would just kind of tidy up that box is a slightly different size. Text is a little harder. Right adjusting type can really, it depends on how how precious you are with type and like especially small type, it changes it quite a bit because you can see that it's actually quite like things have happened to that font. It depends on if you can live with that or not, you can see that top ones a little bit higher. So yeah, big fonts, you won't notice smaller fonts, you might so be careful there. The other thing you can do is if you know you're just going for web design, just draw stuff that you can see view. There's one called snap to pixel. Make sure that's on. Okay. Because what happens is with it off I can draw something and like a rectangle here and it would just kind of appear wherever it likes. Whereas if I do the exact same thing and say snap to pixel and draw him, he will try and be in the right spot. Now this works for simple shapes like this really complex shapes. It just kind of doesn't know what to do. It's rounded corners, everything's rounded. If I go make pixel perfect kind of worked. But sometimes it just yeah messes up. It's really easy for lines and squares, but really complex shapes. Not so good. Okay, I'm gonna turn off my pixel preview and let's look at two more things. Okay. One is exporting Actually no, it's symbols, let's say that as good as you guys were. You can hang out here. I need to make You know when you're doing UI design in this course we just kind of made a desktop tablet and mobile but when I'm doing mobile you'll end up like creating 50 mobile like mock ups okay of all the different pages or an app. Okay. You might have 100 different app screens. What you don't want to do is let's say I duplicate this, right? So I'm gonna grab my outboard tool hold all while I'm dragging. So I got another version, right? And if I make adjustments to this and this is now the contact us page. The problem is is if I just this hitting now, I'm gonna have to go back and copy and paste it on every page. So what you do, once you kind of got like a base level going, you're gonna create a symbol. Okay, so I'm gonna select all of this and I'm going to go to window, go down to symbols and I'm going to make a symbol by clicking the little turned up page, give it a name. This is going to be my mobile nephew. I okay click okay. And nothing really changes. It's kind of like a group now. But what ends up happening is I'm going to close down my symbols library. I'm going to zoom out my upward tool, make a duplicate. And now what's gonna happen is let's say a client comes back and says actually there's been some usability problems with the size of this font. Right? So I've double clicked it with my black arrow and it says be careful you're getting a symbol like awesome. I know and I'm gonna in group these and I just want this guy. So you, my friend now is going to be something else like open sands extra bold. Okay. And I'm gonna click this error until I get back out and what you'll notice is to updates. Okay, so great for knaves and like foot is anything that's kind of consistent on your website, logos, that type of thing. All right, nearly finished. The last thing we that's kind of useful is let's say I've got this and I want to send it to the client to proof or I want to add some interactivity maybe with something like X. D. Or envision which kind of allows you to add interactivity to things like J pigs. And so what we're gonna do is we're gonna export the screens so file go down to export and they call it screens. Okay so all the different screen sizes and not assets. Okay. You can kind of do it from here as well, but under art boards I can say I want all of these guys exported what I want to be exported as I want them exported as jpeg at 80%. Okay, so you can fiddle around with what you want to do but yeah, export that. And either just or maybe down here there's a pdf option. That could be quite helpful because then it's a multi page pdf or if you want to add interactivity and XT or what is it envision you can export? Maybe J pegs to send it up. Alright friends, that is the skinny version of being a UI web designer with illustrator know that there's a lot more you could do. Okay, so check out that course of your king, otherwise let's get on to the next video