Subscribe or Login to watch video

Login or Subscribe to watch video

51 - How to use Adobe Illustrator for Web & UI design


Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

Hi there, in this video we're going to look at using Illustrator for Web & UI App design. Now Illustrator is one of the tools that gets used a lot by UI/UX designers to build things like websites and apps. We're not going to go through everything possible for Web and UI for Illustrator. I've got a completely other course that's dedicated to it. It's another 50 videos, so if you want to go in, like full board and do it, go check out that course. You're looking for that little smiley man icon. It's the Web & UI design in Illustrator, but this is the advanced course, I don't want to kind of leave you hanging. So I'm going to give you that kind of 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. We're going to work on the mobile version first. What I'd like to do is-- let's say we've drawn this tick in the circle. I want to export that for my website. So there's a couple of ways. I'm going to ungroup this first, because I don't want the text. I want these two, so I'm going to zoom in, and go to you. So I've got both of them selected, they're not grouped. I can right click them and go to 'Collect for Export', 'As Single Asset', or 'As Multiple Asset'. I want this to be Multiple Asset first, and just see what it does.

So it's opened up my Export Panel, it's already got a Kiwi in there. Hello. Goodbye. There is the circle and the text separately. So what I might do is I might undo that. The Kiwi comes back. Right click, and say, 'Export' for 'Single Asset'. What I tend to do, is let's say, this logo at the top here I just drag it in. If you drag it in while it's grouped it will kind of do a Single Asset. If it's ungrouped, 'Ungroup', and I drag it in, it does that kind of Multiple Asset. Depends on what you need. 

The next thing is, I'm going to select on this Asset here I'm going to give it a name. It's important, not important, but if you give it a name now, when you export it, this is the name it's going to get. So let's call this my 'Tick'. Down the bottom here, you get to decide on the format. Now when you're exporting for Web, there's three main formats. JPEG, PNG, and SVG. Basically JPEG's good for images. PNGs are good for things that have transparency and SVGs are new, and fancy, and vector. It's Scalable Vector Graphic, that's the acronym. They're getting more and more popular. When I'm building a website, as a Web Designer I'll use SVGs wherever I can because they scale nicely. They look great on all screens. Talk to your Web Designer or Web Developer for what they need. Some websites have to support older browsers, and SVGs 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-- don't think Add Scale, think Add Version. 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, if I click on that it's going to give me-- this is what my App Designer or App Developer wants. They want a small size, the regular size and a bunch of other different scales, so goes up and down. So it's just done for you. Can I undo? I can't. I'm going to have to click them all of. 

Let's say we go for Web Design, so I've got 'Add Scale'. I'm going to not add a suffix, just going to make this '1'. This guy down here, 'SVG'. This is kind of really common grouping to send up, but again, talk to your Web Developer. Now once you've got it, you click on 'Export'. Give it a folder, it's going to lump mine on my 'Desktop', click 'Choose'. We're going to have to check on the Desktop. I've got this junk from when I was practicing. There's the Kiwi. I've got my 'tick', which is my PNG and my SVG. So that's how to export just single graphics. You'll do that a lot, the text will get built in HTML, in CSS. If you are interested in this kind of thing I've got quite a few Dreamweaver courses for building websites. If you want to get into a bit of HTML in CSS, go do that one. 

One thing you might notice is, if you are a big fan of using Clipping Masks there is something pre-made. It's got no Fill. Let's go, give him a Fill. I want to crop it down to say this size, for some reason. I'm going to hold down 'Command 7', or 'Control 7' on a PC. So I've cropped it down. Problem is, when I drag it into my Assets Panel, can you see, it's got my graphic there. It's a little hard to see, you might have to zoom in. Here we go, but it's actually got this kind of-- can you see, all the stuff around the outside here, it's actually included it in the thing. So it's not going to 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, before you kind of-- Clipping Mask, or right click, and release the Clipping Mask. Select it. I like to use my Shape Builder Tool, which is 'Shift M', here he is there. And I'm just 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. 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. So you do a lot of cropping of images in Illustrator, so I'm going to bring in an image, just a random one from my Exercise Files. Let's say I want to crop this down to a circle. I do a tiny circle around his head. I crop it, 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's 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. And I'm going to select on this guy, and there's one that says Crop Image, and I can drag it, so it should snap it, it's not snapping at the edges. Go to 'View', 'Smart Guides', turn those on. So get it kind of where you want it first, hit 'Return'. Cool thing about that, that is cropped, there's like, pixels are gone. Photoshop cropping. 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. Give it a name, and in this case we'll save that one probably as a JPEG. 

Another interesting thing to know is that this guy over here is being added, so we're going to call him 'Blob'. And this guy has been added. And he is 'Man'. What ends up happening here is that, it's not a one way street, right? So this guy, if I update him and give him a different Fill color, you'll notice that he updates up here. 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. So, I want to select all of these guys. Hold 'Shift', and click them all. I want PNGs, I want some JPEGs and I want some SVG goodness. If I hit 'Export' Select them all again. It will only export the ones you have selected. Click on 'Export'. Back in the same place. It will override the ones you already have, which is cool. 

So my Blob now, 'Blob', there's two versions. JPEG, PNG, and SVG, but if I go and quickly update this the designer comes back and says, "It's not working" or you are 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 to get going. Good work, Adobe. 

Next thing is-- so we got the graphics out, but the text doesn't want to be included as graphics. Your Web Designer doesn't want the actual graphic. The text will be the actual text, and the styles that you've used. So you could obviously go in here, and tell him it's Open Sans, and it's 14, but they want to know all sorts of things about it. That can be problematic, unless you go to 'Window', and go to 'CSS Properties'. The cool thing about it is, especially text is easy. You can see, it tells you the-- this is the CSS code, if you've not used it before. That's the code that says, "I am Open Sans, I'm Bold, and these are the colors." So it's super handy, you can just copy and paste it and zoom in and say, this title is this. You can get super fancy and start naming Character Styles and it will give you Classes. 

Often I just copy and paste this as I'm building. You can do it for-- text is really easy, just click on it, and you can see, this is Playfair Bold, and it's all the code. Now let's say there's kind of red box in the background here, say I want to export this as a graphic. I probably wouldn't, I'd build that in CSS, but anyway let's say you did, it says there's no code generated because there's no name for it. It needs a name. You do it in your Layers Panel. So twirl this down, it should show me in here. See that blue dot? That blue dot indicates, that's the thing you've got selected. If I double click it, and give it a name, and call this one 'Red_Box'. When you're naming things like this in Web Design it's often hyphen '_', no spaces. And you can see, now it is selected, it says-- my Class with Red Box has got a background color of this. So there's just some really cool stuff. 

If you want to get a bit more hard core into it you can go into the 'Burger Menu', go to 'Export Options'. At the moment it's only telling me the basics. That's what I want. Yours might be on by default, I can't remember if I've turned this on or off but you can 'Include Dimensions' and the 'Absolute Positioning'. 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'. Generate CSS for Unnamed Objects. Instead of having to go and name them to be all official, just tick that on, and that will let you create CSS for everything without having to go and name them. 

Next thing to know is we're going to go, something called Pixel Preview. Down the bottom left of this desktop version let's go down here, to him. Let's close down my CSS Properties. Let's talk about pixels, because in Illustrator, it's a vector drawing program. So it scales, everything looks super sharp on the edges, but when I go to images, in Web Design, often-- JPEGs or PNGs, they use pixels. And pixels, not as sharp around the edges. So what we need to do is, before we-- say I want this to be a PNG. I need to preview it in 'Pixel Preview'. So 'View', 'Pixel Preview'. What you'll find is, a lot of graphics will end up looking really good in Illustrator but when you export a PNG they're kind of fuzzy along the sides, or one side. 

So what you can do is you can turn that on first of all, it shows you what this would look like if it was pixels. So you can see, my lines, it's turned that on and off. Couple of things you can do, let's say this line here-- I'm going to turn on my Pixel Preview again. It's not looking great, because it's kind of-- the problem is, the Stroke is not-- is it 1pt, I'm not sure. It is 1pt, 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, 'Make Pixel Perfect'. So just kind of adjusts it. Now it has moved, literally has moved, but for me, that's better having it fuzzy. So you can decide. This guy here, same thing, you, 'Make Pixel Perfect'. Everything will just kind of tidy up. That box is a slightly different size. Text is a little hard. Adjusting Type can really-- it depends on how precious you are with Type. Especially small Type, it changes it quite a bit, you can see that. It's actually quite-- like things have happened to that font. Depends on if you can live with that or not. You can see, that top one's a little bit higher. 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 going to use it for Web Design just draw stuff that-- you can see, 'View' there's one called 'Snap to Pixel', make sure that's on because what happens is, with that off I can draw something like a rectangle here, and it will just kind of appear wherever it likes, whereas if I do the exact 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 rounder corners, everything is rounded, if I go and make Pixel Perfect it kind of works, but sometimes it just messes up. It's really easy for lines and squares, but really complex shapes, not so good. I'm going to turn off my Pixel Preview, and let's look at two more things. 

One is exporting, actually no, it's symbols. Let's say that-- as good as you guys were, I'm putting you up here. I need to make a-- when you're doing UI design in this course, we just kind of made Desktop, Tablet, and Mobile. When you're doing Mobile, you end up creating like 50 Mobile mock ups. All the different pages. On an App, you might have a hundred different screens. What you don't want to do, is let's say I want to duplicate this. I'm going to grab my 'Artboard Tool', hold 'Alt' while I'm dragging, and if I make adjustments to this, and this is now the Contact Us page, the problem is, if I adjust this heading now, I'm going to have to go back, and copy and paste it on every page. 

So what you do, once you got like a base level going you got to create a symbol. So I'm going to 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 this little turned up page. I'm going to give it a name, this is going to be 'Mobile Nav UI'. Click 'OK'. 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, grab my 'Artboard Tool', make a duplicate. And now what's going to happen is, let's say, client comes back and says "Actually there's been some usability problems with the sizes and fonts." So I've double clicked it with my 'Black Arrow', and it says, "Be careful, you're editing a symbol." I'm like, "Awesome, I know." 

I'm going to ungroup these, and I just want this guy. So you my friend now, is going to be something else, like Open Sans, Extra Bold. I'm going to click this arrow, until I get back out. What you'll notice is, it updates. So great for Navs, and like, Footers. Anything that's kind of consistent on your website. Logos, that type of thing. 

All right, before we finish, the last thing that's kind of useful. 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 XD or InVision which kind of allows you to add interactivity to things like JPEGs. So what we're going to do is export the screen. So 'File', go down to 'Export'. They call it Screens, so all the different screen sizes. And not Assets, okay? You can kind of do it from here as well. But under 'Artboards', I can say, I want all of these guys exported. What do I want to export them as? I want them exported as JPEGs at 80%. So you can fiddle around with what you want to do. Export that, and either just-- over down here is a PDF option, that could be quite helpful because then it's a multi-page PDF, or if you want to add interactivity in XD or InVision you can export maybe JPEGs to send it up. 

All right friends, that is the key version of being a UI Web Designer with Illustrator. Know that there's a lot more you could do. So check out that course if you're keen. Otherwise let's get on to the next video.

ALL ACCESS: $19.95 per Month + Cancel anytime