UI & Web Design using Adobe Illustrator CC

1. Introduction: Hi there. My name is Dan and I'm an Adobe certified instructor for Illustrator. In this video series, we're going to use Adobe Illustrator to build a Web and UI design project together. We'll use a real-world projects. We'll start with our portfolio. You know the portfolio, the one that you've been planning to build forever, but haven't got round to. Let's you and me build that now together. I've made this course for beginners. You don't really need any previous knowledge of Illustrator or any other design experience. We'll start with the super basics. It doesn't matter if you want to use Illustrator for app or web design, the techniques are the same. We'll go through the full user interface process. I'll show you how to use Illustrator to build sitemap and then create your first wireframes. We'll then begin to design our mobile tablet and desktop site using website fonts, colors, and responsive images. We'll create our own custom icons and logos, learning how to use the Pen tool and the amazing Shape Builder tool. By the time we're finished, you'll know exactly what's expected of you as a UI designer, delivering responsive retina images and CSS code so that your wonderful web design is reproduced perfectly as a website. At the end of this tutorial series, there is a project. It's got set task that you need to do for a fit client, and you can use this as part of your portfolio to help build that out. It's like homework, except I'm going to call it carrier development. It's time to upgrade your skills, get that better job, and impress the heck out of your clients. I don't know, they just start waving around when I start talking, like I'm in a musical. 2. Am I a UI UX designer now: Now the question is, after this course, am I going to be a UI slash UX designer? You see it everywhere, they go hand in hand. They are very different things. After this course, you can say, "Yes, I am a UI designer." I can build user interfaces, like websites that were going to be doing, and app design that is user interface. Yeah. We use tools like Illustrator, amongst other ones that you potentially could use to be a UI designer. Now in terms of the UX, user experience, that is a totally bigger kettle of fish or a different thing. You'll use UI design as part of being a UX designer, but there are lots of other things that make a UX designer. There's a lot more around like setting objectives, there is research, there is testing, and then there is going through the whole build phase of a project as well. Now we're not going to cover UX design in this course. I've got a full another course about being a UX designer, so go check that out. This is focusing more on UI, which is a part of UX, but not the whole thing. 3. UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP: In this video, we're going to talk about what products do what, because Adobe have lots of them. There's some other competitors as well about web in UI design. Let's talk about the main Adobe products. We'll talk about InDesign versus Photoshop versus Illustrator, which one you should be using. The one you should be using is either Photoshop or Illustrator. Photoshop has a little advantage over Illustrator, mainly for me it's something called device preview. If you have Photoshop skills, I've got a full Photoshop's course, it's exactly like this Illustrator 1 doing UI web design, so go check that out. But we're here to learn Illustrator. Photoshop has the slight advantage for especially web design over Illustrator, but not enough to say don't use either of them, they are both pretty awesome. Illustrator we're going to look at it this full course, and it's perfect for web and UI, but it also gives you skills in terms of designing logos and symbols. A lot of people will learn Illustrator because it has dual purpose. You get to use it for a bunch of different stuff, as well as print, as well as web. Let's talk about InDesign. InDesign would be a no-go for me. You can do web designer, there's a file, a new document, and you can pick some web features, but it's missing so much of the goodies that help you develop UI for web and apps that I'd use it if you are somebody who only had InDesign skills, the problem with it is that you couldn't get a job as a web designer using InDesign. So yeah, InDesign is missing too much the features. It's for documents only. It's more like a big version of Word. The next group of them is something called XD, Experience Design from Adobe, it's new, it's still on preview, it's really cool, but it's still in preview and it's missing a lot of features. I've used it a couple of times and it's really good, but it's not like a full production product yet. I'm still using things like Illustrator and Photoshop, whereas XD eventually, I feel like it will be the product to be using for web design maybe. That's definitely one that's extensively focus more on app development than web. I think that will be its home. It'll be for app developers or app designers. Things like Illustrator and Photoshop will stay for the web design community. The last product to talk about is something called Sketch. It's outside of the realm of Adobe. It's another competing product. The product it's competing most with is Experience Design Adobe XD, because it's more of a app design. If I was now going to be a fully-fledged owning Adobe doing apps, I'd be making sure that my Sketch skills were pretty good as well. You can do everything in Illustrator, is totally fine, your app developers are not going to hate it, but Sketch is quite in at the moment in terms of looking for jobs. So Sketch is quite a cool product to use, but it's specifically for app. You can use it for web, it's no problem with that, but I feel like Photoshop and Illustrator are better at doing that web stuff. There are a lot more mature products and they have lots of other scope for doing other things. Sketch is just really specifically for app and web design, whereas this other two products have a lot more scope in terms of other things you can do with those skills. 4. What is Illustrator’s role when designing a website: So what is Illustrators role in this whole business? Okay, so as a web designer, you might decide you finish at the limits of where Illustrator stops, and what you'd be expected to do, say you're the designer, you'd have to work with the developer or web designer, or front-end web designer, somebody that does the HTML and CSS because illustrator itself doesn't actually make a website. It designs it, the look and feel, gets everything in the right position, the colors, the fonts, and we use that as a template to build it in code. Okay, now, that's where you might finish. You might just hand over at the end here. If I was your web designer, I'd be expecting a bunch of JPEGs, PNGs, and SVGs, so just images. I'd be wanting you to tell me what fonts they are, what colors they are, what the sizes are, what the colored boxes are, how far they are away from each other. I'll be wanting that stuff and that comes from you to me as CSS, and we'll look in this course how that is made. Okay, so you might decide to go on a little bit further and you want to do the whole web design process. What I'll do is I'll turn this particular design that we're making in here in Illustrator it and we'll actually build it in Dreamweaver as well, just to make it a nice complete series. So if you are more print based and if you just want to stay that side, illustrators where you finish. But if you want to move on a little bit more and maybe get a little introduction to code, it's maybe not as scary as you think, I hope, you'll move it into something like Dreamweaver and build out the full site in that. So that is the role of Illustrator. 5. Download the exercise files, completed files and cheat sheet: All right. First thing we need to do is to get the exercise files. There will be a link in the description or on the sites here somewhere. We can go off and get the exercise files, and they're just the images that we're going to use, any text we use, any resources that I talk about. So download those, and the other thing that's going to be there on every specific video, there will be a link to something called the completed file, and it just means when we're doing something in a course, when I get to the end, I'll hit "Save", and I'll put it in a special folder, and name it the same as that video so that if you're doing it and yours looks nothing the same, you can download my version, check it out, open up Illustrator and go, "Oh, that's how he's done that". So you just compare that two, they're called completed files and they're only on videos where I actually do anything. The last thing is the cheat sheet. The cheat sheet is something that I make and there will be a link on the screen about hereish, Taylor, go, and you can go there and it's a downloadable PDF, print it out. There's a video version too, share it around and it's just that stuff. Once you finish this course, you'll be like, "I'm good now. I want to go faster, what are all the shortcuts". That's what that little cheat sheet is for. Go and download all that and then we'll get on to the next video. 6. Getting your workspace and Illustrator preferences ready for UI work: Hi. In this course, what we're going to do is look at setting up our Illustrator for working with web and app design. There's a couple of things we need to change cause the moment by default, when you install it and while you're using it, it's assuming you're dealing with print based stuff. So it's using physical measurements and like millimeters, centimeters or inches. So we need to go off and change a few things. The first thing we're going to do is let's open up a new document. let's go to File New and there's a lot along the top here we're going to Web and we're going to start with Common and just click "Create". Cool and what's going to happen is it's going to default to a few things we need to change. So to do it, we go to Illustrator CC and go to Preferences and we're going to go into Units first. If you're on a PC, it's under Edit Preferences, so its Edit and all the way down the bottom here it'll say Preferences. So under Mac, it's here and we're going to go to Units. This is the first thing to change, is General, yours is probably going to be set to Inches if you're in America and if you're anywhere that doesn't use inches it's going to be set to Millimeters or Centimeters. We need to change it to pixels. That is the measurement we use when we're dealing with UI design, Let's pick Pixels. Same with the stroke, it deals with points traditionally but we need to deal with pixels and the same with the Type. The fonts are designed to use pixel sizes rather than, they're not far off, pixels and points aren't that far off in terms of measurements, but use pixels. Okay and let's click "Okay". The other thing we need to do is get our documents set up the same in terms of our workspace. You can see here mine's all mixed up because I've been messing around with it. What you need to do is go on the top here, go to window, go to workspace and yours is probably set to Essentials and it looks something like that, but we're going go to Window, go to Workspace and lets set it to Web unsurprisingly, not unsurprisingly. You can see if yours is still mixed up like mine, what we can do is we can go back to Web, and I see this is Web but we're going to say Reset Web please. What it does is it resets it, a webspace, this thing always pops up and it's a bit annoying, go away. That's the interface to make sure yours looks like mine, so we can move on. 7. Sitemap vs Wireframe: Hey, in this video, we're going to quickly talk about what a sitemap is versus a wireframe. Those two can get mixed up when I'm talking to people, so it's really easy just to show you. This, my friends, is a sitemap. It's like a flow chart of showing you what pages go where on your website. A wireframe is a mockup of your page but just using really basic graphics, so placeholders for images, placeholders for text, and we're not actually including the logo, just writing it there. It's just to get out ideas in some sort of order about where things might go rather than working on designs and colors and fonts straightaway. This is what's called a wireframe, and this is what's called a sitemap. Let's go to the next video. 8. Creating a sitemap in Illustrator: Hey. In this video, we're going to look at making a site map. Now, we can do this in a couple of programs. I'm going to show you how to do it in Illustrator because it's an Illustrator class, but then I'm going to show you why I don't do it in Illustrator mainly because it takes so long. Let's quickly log off. First of all, let's talk about how I traditionally do it. I'll do a Sitemap just by hand in my notebook. Now, if I'm dealing with my own site, it's just by hand; that's it, game over. I draw it up. Now, if I'm doing it for a client, they're expecting a higher level of presentation so I will do it in either Illustrator or I'll do it in something called Muse, which I'll show you quickly in a second. But there's no real tool specifically for it. We're going to use Illustrator to get started. We'll go to File, New, and we'll make, probably because it's going to be printed and sent to the client, it's going to be A4 and I will make it landscape. I'm going to create, if your in the US, go to letter. All you do, it's not particularly exciting, it is grab rectangle tool. I'm going to give my fill either white or a no fill, and I'm going to put a black line around the outside. In terms of the stroke I'm going to set it to one pixel. Yours might be set to point still. Don't worry, just use one point for the moment. We're going to change that over in a little bit. Sitemap is to show the client the flow of the website of where things are going to go, how it's going to be structured. So what you can do is draw a box and grab a type tool and you say this is your homepage. I'm going to center these two together by selecting them both, and up at the top here I've got some options and there's that one there that says center. Now I'm going to draw my next page. I'm going to probably move that over a little bit and I'm going to copy and paste them. So edit copy, edit, paste, I'm going to align it up. This one here is going to be my product page. Great. I'll type that over using my keyboard. Next page, and you can see it's a little bit monotonous. It's not too bad, depends on how big the structure needs to be. I'm going to go into here and this is going to be my About Us page. I should probably center this text to make it easier, but you get the idea. Now, I need to join these up, and there's a line segment tool here. Now yours might be hidden under some of these ones. So click and hold down and grab the line segment. I'm going to click hold and drag. You can see it joins those two up. This one here, it's pretty good at aligning things up. If your thing is not aligning up, you can see mine, it's got this lovely intersect, all these like, see these pink lines jumping everywhere. You can turn that on and off under view, and there's one called smart guides. So I have that on at the moment, you can see my own here is not actually drawing a line, you see it left there behind. It's because when I started drawing, can you see I've got no stroke, no fill, and that can cut you out. So I'm going to get my black arrow. I've got them selected still, and I'm going to say, you my friend need a black stroke. You can see the stroke is the liner on the outside. This first one here is the fill, and because this is a line, it doesn't have a fill. This guy here still exists, but he's got no stroke, no fill, so he doesn't print so he's not very useful. I'm going to turn this guy on. That's fine. Now we want to build this out. So we want to grab the line segment tool and start drawing this one out. That's it. There's just a lot of boxes, a lot of copying and pasting, a lot of joining lines to them, making sure they snap. So it's not super had. But if I'm going to do a wireframe, I'm probably not going to build it out this way. I'm going to jump into something called Muse because it's super easy and it's part of the Creative Cloud license. So if you've got this latest version here, you'll have Muse, and if you use it, you totally can use Illustrator. Keep going with Illustrator, keep building this thing out. Then probably where the biggest problem comes is not so much building, it's when we need to change things, we need to move this over here. This needs to come as well so we're selecting all these, and these adjustments become a little bit harder. So let's go jump into Muse and why I love it for just doing the wireframing. So download and install Muse, you don't have to. I'm going to make a new site. In terms of page width, we're not worried about this at the moment. I'm just going to click Okay, and we're just going to stay here actually. In Muse, just so you know, it's a Web Design program without using any code. It's really cool and I've got a course on that if you want to go and do it. But we're going to use it just in this case. It's part of Illustrator process and UI design because of this beautiful plan view. So just make sure you're in plan. You can see here I've already got a homepage which is handy. Then I can click this little Plus button and you can see, hey, I can put in my product page. When I say product page, it's like if we're building a site for widgets, that's where the widgets would go there. Now, I'm going to put it in my About Us page and you can see how fast this workflow is. Contact Us. Then when we go to products, we can say, I would like, say product, and spell product A. You can do it product A, and watch this. This is where it's nice. You can see it's done this, joined those lines, got a cool little flowchart going. It just becomes very easy to build a site map. You can keep building this out. You can keep adding bits, you can move them. So watch, the say About Us page needs to be there. You can see this switch is round and that's probably why I like it the most. Now, depending on the kind of flow chart or site map you're making, you can do it up here. You can go horizontal or vertical, whatever displays it more clearly for your client or for yourself. So I'm going to get back to this, the size. You can make it big or small to fit in lots of different pieces, and that's it. They're already labeled. They've got nice little lines and flow charts. Now, the question might be, what do I do with it now? There is no Export PDF of the Sitemap, which should be a really cool function in Muse, it's not. All I do is take a screenshot and then edit too in design or Illustrator just as an image. So that's my workflow. You might not like this black here. You can do some basic stuff. You can go through install the fonts and everything, but you can do some stuff. Say that want to put this, I'm going to go to Adobe Muse at the top and go to Preferences. If you're on a PC, that preferences is hiding under edit down at the bottom here. So I'm going to go to preferences. What you can do is switch out the backdrop for this lighter color here. Then you can do a screenshot on a PC. There was actually a button called screenshot. It's around where your Home and End Page Up buttons are. On a Mac, it's going to be Command Shift 4, and then just click Hold and drag it out. I'm going to take a screenshot. Then what I do is I just open up Illustrator. Get rid of you guys because you take too long. Then I'm going to go to File, Place, and from my screenshots, here you are, put them in there. Then I design around it. I might put in things like the job name, the client name, this version of the Sitemap. It's quite important. So there's one I made, almost getting ready, assignment of the UI there. So I took a screenshot of the black version. I just added my client name, my design agency name. I gave it a version, and I put on my logo, just to brand it up and give it a bit, I guess, look and feel for your client that you're delivering it to. So remember by hand is perfectly fine when you're dealing with your friends, and your buddies, and your parents. I find I don't go further than that, but when there's a paying client, often this expectation or this level at a meeting would be expected. You can either use Illustrator, drag boxes, join them up. Nothing wrong with that, or you can jump to Muse and just use that cool little tool, take a screenshot, dump it into here. So that is setting up a sitemap for your website design. 9. What screen sizes to use for desktop, tablet and mobile web design: Hey there. In this tutorial we're going to make these artboards in Illustrator. This is going to be our desktop size, this is going to be our tablet size, and this is going to be our mobile size. Let's work out what sizes we need to make these first, and then we'll go and build them in Illustrator. We need to work out what sizes to use and that can be a little bit tough because it changes over time and there's so many device sizes, but I've got some basics for you to use that what most people use, and if you want to be more informed about what's coming out, or what devices are there, there's really cool site called mydevice.io/devices. So go to that whole URL there in one go. It just gives you interesting stuff about what sizes. Now ignore these physical heights and widths, use the CSS widths. This is what we use as our designers, this is pixels wide, and we can see the new iPhone 7 is 375 pixels wide. That gives you a good gauge of maybe my mobile needs to be about that or at least include it because it's one of the more popular phones. You can see the 6 plus, the big giant phone is even bigger and I ignore that one, I let him deal with the tablet size because it's such a big phone, it's that big favorite thing. Covers iPhone 6 and you can see all the earlier ones as well don't get above 375 even. So I often just pick my mobile size to be 400 to include all those, but you will be excluding a couple. The big giant favorite one, I think there's someone's down here like Nixes 6. It was slightly bigger, it's a big phone. It covers most of them. Blackberry Passport, it's massive. So that's for mobile. You can see down here for tablet just underneath. You can start looking at these ones. I ignored the iPad Pro. Why? Because it is as big as a desktop. If you've ever gone to an Apple store and seeing the MacBook, iPad Pro they're massive. I don't design for those for tablet. I leave those to use the desktop size, but I do cover this one. So that's the size I use for tablet 768. Now there's no reason why you can't specifically pick other sizes. If you're working with a developer or web designer after this project, ask them. Say, hey, I'm designing the site what sizes do you need, and they might give you ones that the different I'm giving you here, but these will be really typical. So 400 for the mobile, 768 for the tablet, and then you get up to desktop. Desktop is a bit of a different one, it's what you want to design for, and I'll give you what I do. Let's go and do File, New. We'll start with the desktop is our first design, and you can see if we got a web. We've got a lot of different sizes here. There's web, minimum, large size, common, you can pick any of these, it doesn't really matter. What I like to start with is 1200 wide, mainly because it's divisible by our grids that we're going to learn about a little bit later on. It's still a common size. The height is going to change a lot when we're working, so we're going to leave it at whatever height it defaults to, and we're going to change it afterwards because it depends on the content. Orientation is going to be landscape, and we're not going to add any blade or anything, and we're going to make sure its RGB. Let's click "Create". Great. So this is page 1, I'm going to zoom out a little bit holding Command minus, it zooms out. Now I'm going to move around holding the spacebar key, clicking and dragging. So if you hold down the spacebar key on your keyboard click and drag, or you can use these little sliders around. I've got this first one and they're called artboard instead of pages. What I need to do now is create another artboard for my tablet size. What I'm going to do is there's couple of ways, the easiest way is to up here. There's one called the artboard tool, click on him. That allows me to change the size of this if I want to. But what I'm going to do is I'm going to click this little option here, it says new artboard. You can see my cursor becomes loaded with a duplicate of this guy. You can click anywhere. It's going to say you, leave there. I'm going to slide across using my spacebar. Now how big should the tablet be? We're going to be doing the width and height, not the x and y coordinate, in this case we're on the width and height. Now we talked about it before. How wide is it going to be? It's going to be 768. How tall is it going to be? It's going to be depending on the content. We're going to design it probably a bit longer, but we're not worried about that at the moment, so don't stress how tall this is. I'm going to move it across a little bit. So it's next to my desktop, and now I'm going to do my mobile version. Now I can't get a new again, but that's easy, you've done that. If you hold down the Option key on your Mac, or the Alt key on your PC, and you can see the cursor change to that little double arrow, means its going to duplicate it, and I find that's the easiest way to drag out another version. You can keep holding Alt and drag out lots of versions. I just want three at the moment. So I'm going to have my desktop, my tablet, and now my mobile. My mobile version, we talked about it before. We're using width. The width in this case is going to be 400. Encompasses all the new iPhone versions there up to seven now, but who knows what it's going to be? It gives us a little bit of play room. If it ends up being something stupid like 380, we don't have to go back and redesign our site for mobile. The height again, it's going to change depending on the content. So it's a lot thinner. What we'll do before we move away from this. We've created our pages, we've got a mobile tablet and desktop version, let's go name them, and we need to find you artboards tab. If you can't find it, go to Window and let's go down to Artboards. My first one, Artboard 1, I'm going to double-click him, and this one's going to be called my desktop, and I'm going to give it a name, so everyone knows that I'm using 1200 pixels. It doesn't change anything, it's just a label. Artboard 2 is my tablet, and 768 pixels wide, and my mobile is going to be 400 pixels. Great. I'll zoom out. Remember Command minus or Control minus on a PC, spacebar to move around. We're getting there. We're going to save it, File, Save. Now for this course I'm going to put everything on my desktop, I'm going to make a new folder, and this is going to be my Dan's Portfolio, and I'm going to give it V1. Actually you notice the folder name, so we're just going to call it Dan's Portfolio to create, and now the actual name of this, so this is going to be called Dan's Portfolio. Give it your name because we will build you one while we're going along and give it V1. It needs some version number, can be numbers or letters, never call it final. Final is the kiss of death. You probably got files called final 2, final revisited, final new, so just V1 and you'll end up with lots of different versions. Let's click "Save". Leave everything by default here, and let's click "Okay". That my friends is how to pick the sizes and create your first artboards for our design. 10. What is a grid system and responsive mobile and tablet design: Hey there. In this video, what we're gonna do is talk about grid systems and responsive web design. So when people talk about responsive, all it means is I'm going to design a site that responds to the different device that I'm using. So it might be that if I'm viewing, say this site here, my site, bringyourownlaptop.com on a desktop, it looks like this. But when it gets down to a mobile size, say something like this, you can see that site changes to best use the screen real estate or the screen size for this view. You can see these guys are a bit changed. These go side-by-side, but when they are on desktop, there's four in a row rather than two in a row. When it gets down to mobile, it changes even again. The big change is on mobile. I've decided that that big image at the top, that smiley handsome man here disappears. He's not useful on mobile. I'm running at a screen real estate. So I'm just getting right to the basics and using some nails here. So that's stacked on top of each other in one column, but tablet, it's at two and when it's out on desktop, it is four. So those adjustments can best use of the screen size, is what's called responsive web design. So what we're doing when we using the Illustrator is that we need to design for those three views. So that when the website's getting built either by yourself or by developer, they know what they need to adjust the size to all their website to look like at those different screen sizes. Now the next thing to look at is what a grid system is. Because that is the most common way of breaking this site up is, what happens is there's an underlying 12-column grid that runs along all the web pages, and that's how you divide the content up. So what happens is it's very similar if you are in parental magazine design, a 12-column grid on a newspaper gets used to help you get consistency across many pages. It's the same here in web design. The easiest way to see it is in our final version. So this is our final design. There's the desktop version, television, and mobile. What ends up happening is watch this, if I turn on the grids that I've got, you can see I've divided the desktop by even making sure I keep in mind this 12 columns. I wouldn't have it halfway through here or halfway through this column, they all span to equal 12. So this guy here is four of them. So 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, all add up to 12 I hope. My math's bad. But it means that this guy at the top here, this line is actually spanning all 12, and that's fine. These guys up here need to be adjusted a little bit. My design, they are spanning these two columns here. I need to line them up a little better, and this guy here, he spans the whole thing because there's nothing over here. So let's look at what we've done and redesign for the tablet. Now what we do is I could put 12 columns in here, but you can imagine if I compress 12 of these columns down to here, even though that technically all there becomes a little harder to design with hundreds of lines across, it gets even worse when it gets down to mobile. You can see what I've done and what you'll do as a designer is, I don't need all 12. That finite adjustment is too much for me. You might like it and you can keep your 12 columns. I've just put six here, so 1, 2, 3, 4, 5, 6 and I've divided them up evenly. So there's this one spans three, that one spans three. So it's still divisible by 12. You can see this spans like half of it, which would be six and that would be six. So we're still using the 12-column grid. But just visually, it's too hard to see so many of them. What we've decided here is I'm going to turn the grids off, is that's the way I want it to look like when it's on a tablet device. When it gets done on a mobile, I want to change it again. So we've changed it quite a bit in this one, the navigation's changed down here, and we've used pretty much the whole way down. We've used the complete width, which is the whole 12 columns. I want to turn the grids back on. When I'm working from mobile, often I just deal with two columns. So that's six on that side, six on that side. I just used two just to make it a little easier. You can put 12 there but it becomes a real headache to line things up. So that is the grid system and that's how web designers on the other side, divide your content up. You can't do 13 because it's really hard to divide up the middle because it's an odd number. So even numbers, most of the time it is 12 columns. So let's in the next video, look at how to make these columns so you can design them. 11. How to make a responsive 12 column grid in Illustrator: Hello wonderful people. What we're going to do in this one is we're going to actually add these guides to our views so we can use that lovely 12-column grid and get started with our design. Let's go and do it. Now we're going to make our grids, before you do, if you move the app board, the grids don't come along for the ride easily. Just get them laid out how you want. It doesn't really matter how you've got your app boards, but I'm going to align mine up this way, maybe a little bit closer. Now I'm moving it with the app board too. It's this guy down the bottom moves your pages around. First thing we need to do is grab our rectangle tool, click on this guy here. You might be stuck on the circle tool or rounded Rectangle Tool underneath grab the Rectangle Tool for me. In terms of the sizes, I want either a white fill or none filled. That's the center of the box and this is the line around the outside and I want this to be anything but something that we can see on a white background, so black works for me. I'm going to click "Hold and Drag, " and you can see mine is trying to snap. You can see it's clear that little word is his Intersect. If yours is not snapping to it, go to View and turn on this thing called smart guides or command U on a Mac or Control U on a PC. It's a really handy one to use, especially at this stage. I'm going to zoom in a little bit, remember command minus or Control minus and I'm going to draw a box across the whole thing. It's a bit of a faff, little bit. We've got one big box, and now what we're going to do is we're going to split it into columns. We find that under Object and then down under Path, and then there's one that says split into grid, and this fun box peers, we don't want rows, we want columns, the ups and downs. We're going to put it up to 12 and in terms of the widths, we're not worried about that, what we're worried about is the gutter. The columns you saw at the beginning there, there's gaps between them, and there's a really common size for them. You might have to check with the developer or the CMS that you're using. Most of the time the gutter between them is on each side of the column is 15 pixels. That's either side, when they're next to each other, they add up to 30. There's your gutter set to 30 pixels and we're going to click "12" and make sure to turn on Add Guides. I'm going to show on preview so you can see what we're talking about. That would have been easier. You can see I've got 15 pixels and then 15 pixels either side of these columns, together they make 30. Let's click "Okay". Now what I want to do is, what I really want is I want to grab my black arrow, my Selection Tool, and I click these guides that got made, then I'm going to right-click them and go to Ungroup. I don't want this horizontal one, I just want the column's not these rows here. What we can do now is we can go through, actually I'm going to select these guys here. If you have used Illustrator before you thinking, great they're guides. They're just like physical lines that are on the thing use this guides. What I need to do now is, I'm going to lower them down, just so they snap to the top there. They poke down the bottom here and what I'll do is I'll extend them down the bottom. I've got them all selected. The easiest way to select them all, if you are new, Black Arrow, select all just the tippy tops of them because we've ungrouped them, it's left these guys behind. I'm going to drag them to measure up at the top Then down the bottom here, I'm going to scroll down, and I'm going to drag this down quite far. I have no idea how long this page is going to be and it's easier to do it here when I drag it down. I've got all those done, I've got them still selected. Don't worry that one's darker than the others. I clicked it by accident, still going to work and we're going to go down to view. We're going to go to guides. There's one on here that says Make guides. I know we feels like we've done that already, don't worry. Those are actual proper guides now. Now what I can do is I can go to My view and I can go to Guides. Yours might be by default already locked. If it says unlock guides here, don't click it. But yours is probably like mine and says Lock Guides that means I can't move them now. I was able to flick them, but now I can't. Now, all this junk this is left behind, there's quite a bit of it. Gone. That is how you turn it into a 12-column grid. You might rewind and play this thing through a couple of times, it did for me when I first started doing it, so don't sweat it. That is how you set up your columns. Now what we're also going to do is, because I hate designing right to this edge here. What I do is I grab my whiteboard as I extend it out a little bit, just so that I've got some play area. It just means that it's harder to design within that little box and you're meant it butt everything up to this age and it just doesn't look right. I'll show you what it looks like here. You can see here I've got this area here and it's whitespace. I know it's not always there, but it's often there. I expanded it as a designer just so I can see some extra bits. I know that the width between these two guides is 1200, which is perfect and a little quick tip for you is if you drag this out, say this guy on the left right here, if I hold down my Option key on Mac, well, the Alt key on a PC, you can see there's both sides, just gives myself a little bit of wiggle room. Now, even though I said don't move them, we're going to move them along. There's no guides along here, so we're okay. It's stiff and repeat for the rest of them. We're going to do the next one for tablet and we'll do this one together. I'm going to drag it out, we'll make it a little bit faster, we're going to go to Object. We're going to get the Path, we're going to go to Split Into Grids and I'm going to say, let's make 12 of these guys. I talked about it earlier, 12 is just too many, so I cut it down to six because it's divisible by 12. You can put 12 in there, I like six to cut it down. The gutter between these guys is still going to be 30 and I'm going to click "Okay". No, I'm going to say Make Guides. I'm going to click "Okay", and I've got this. Know what we're going to do is I'm going to select them. I'm going to right-click them and say Ungroup, and I'm going to click just the tippy tops to these guys, and I'm going to load them down and then I'm going to say View, I'm going to go to guides, I'm going to say Make Guides, and I don't have to go and lock them again, they're all locked by default.It's like overall you don't lock particular guys, you lock the all guides on all pages. If I go to guides now, you can see I can unlock them but I can't lock them because they already locked. I can select all this stuff bye bye. Grab the app board tool, hold down your Alt key on PC, or Option key on the Mac drag the sides out just give myself a little bit of a playroom and we're going to do the next one. Now, I want you to go off and do the next one by yourself. You can pause the video and see you can give it a crack. I'm going to do it here and you can fast-forward to the next movie if you've got the idea. I've got this one selected, it doesn't really need to go to the bottom. That's my OCD and remember, we're going to go to object and we're going to go down to path, and we're going to go down to split to grid. In this case we're just going to use two. I could put four if you prefer, if you're going to do some cool things in here on mobile, I'm not. I'm going to put the gutter in of 30. I keep thinking, okay, you're going to do it as well. Make sure you click "Add Guides". Forget about that every time, click "Okay". We've got our 10 guides, we're going to select them, right-click them. I'm using my black arrow. Go to Ungroup. I'm going to select just the tippy tops to them, grab one of them, and drag it down. It lines up at the top. Great. Now I'm going to make them a little longer. I've got to do for these guys, I'm going to pay for that later. It's all right. Drag this down. Now we go to View, we go to Guides, and we go to Make Guides and then it's already locked, so we can grab all this junk that's left over, hit "Delete" and we now have a 12-column grid across them all, that we've snugly just down six and two on these ones here. I'm going to use the app board tool on this, and just go out a little bit. I'm going to hit "Save". All right guys? And that's how to make a 12-column grid in Illustrator. If you are lazy like me, you would download a template and it will be this right here. I'll leave that in the exercise files. I will call it 12-column grid in Illustrator, template or something like that. It'll be in there. You can just open that and go forth with that one. 12. Creating a wireframe Low fidelity hand drawn: In this video, we're going to look at doing wireframes, but we're going to do some low fidelity hand-drawn ones. I always start with this, I draw it in my book and start working that way. Often if it's my own work, I don't get any further than this. I don't mockup beautiful ones in Illustrator because there's no point, there's no one to impress but myself, and it's a bit of ideation is wireframing, and I work from those. But if you are going to be sending it to the clients, it would be weird to turn out with just hand-drawn ones. You want to sex it up a little bit using Illustrator to make your wireframes look really good. Let me go show you how I do it with my just hand-drawn ones first and then the next video we'll do Illustrator. In terms of the wireframes, this is the level that we're looking at. That is a wireframe. Let's have a look at some other wireframes and some other things. But you can see the level of them, it's just to get ideas down. Sometimes I put a bit more care into them, but not much. There are ones I like, it's at this level now. Would I deliver this to the client? Say I'm looking in a process where I've been hired as this UX consultant and I'm going in with wireframing, I'd put a little bit more effort into it, not a huge amount, because what I don't want to do is, I've had discussions where Board in Photoshop mockups, and it's the time to talk about basic features and layout where people have started picking colors and picking fonts or what I don't like. We can't call it that, so keep the language out, use Lorem ipsum, use squiggly ticks valine, let's get a really good sense of it, but without getting into too much detail. If you're super-special, you might get a little bit of color. Well look, highlighting, but that's about it. That's my wireframes, and that really works for me in terms of ideas. The other thing is they don't just do one wireframe, you go to your features list, and you start adding them into here, don't just do one wireframe, I find I need to do five. Even if your first one, you do this one, that was cool, then the second one, then the third one, and the fourth one, and it's not until you get a few through into them that you actually work out a few bugs because you might get here, that's great. You force yourself to do a second one, you know it's crap because that was the good one. Then you do the third one, and you're like, "I'm going through the process." But I know often when I do all five and I force myself to, Number 3 is the winner. If you'd stopped in Number 2, you would never have got that amazing layout for Number 3, so force yourself to go through and do some more than just one layout. 13. Creating a wireframe High Fidelity Illustrator: In this video, we're going to make this a wireframe. It's a wireframe. It also is just gray boxes and some type. Nice and simple. Let's get to it. Let's start building a wireframe. It's quite like our sitemap, we just got lots of rectangles and some type. There's going to be some tricks and tips to come along. But if you are pretty confident with illustrated already, you might want to skip along this one, but okay, so first of all, I'm going to grab a rectangle tool. And I'm going to start with, we could just use white boxes, okay. I like to use just a little bit of gray in the box okay, and a black stroke are on the outside with one pixel. And it just means I'm going to draw the box that's going to represent my, my logo goes about there. I like that kind of off-white just to kind of make it easy and clear with the different elements. Okay, now in terms of elements to impress people when you are at your meeting, call it "page furniture" and keep a straight face. Okay. It's kind of name for these types of things. Ok. That the [inaudible] on the page. Okay. Kind of stolen from print but it impresses people. You sound like you're in the business. Okay, the other thing to do is, try not to design this far away. I'm going to zoom out at 50%, okay, just so I could see the different outboards, but you want to be designing this thing or at least mocking it up at actual size, okay. So what it's going to look like on an actual website not kind of zoomed in or zoomed out too far because you're going to make some poor decisions in terms of design. To do it, you hit "Command One", or "Control One" on a PC, or the long way, "View", and there's one on here says "Actual Size". That's what it's going to look like on an actual website. So I feel like that logo's now a bit too tall. Okay. And you got to make sure when you are dragging these boxes that you do it within the columns. Don't try and do that. Okay. Where it kind of straddles one of these gutters. Okay. It has to line up with the edge of one of these columns and can't go across one of the gutters. Okay, so column to column, and I'm going to add a bit of type just to indicate that this, I'm going to click once down here and type in logo. Okay, font sizes. Doesn't really matter. Sixteen pixels is about 12 points in real life. So if you have to print this off, okay, it's nice and eligible. And yes, I'm going to start drawing this out. I'm going to copy and paste this guy by selecting both of them holding "Shift" and then go "Copy" and "Paste". That's it, it copy and paste or "Control V", "Control C". And I'm going to, make this my navigation, okay, but not straddling within the columns. Okay. And in terms of the text here. I'm just going to drag it over. Can be a little hard to drag this text, especially when you're zoomed out a little bit, watch this, you just end up kind of like dragging the edges of it. So the more you zoom in, the easier it is to move things around. Or you can just use your arrow keys on your keyboard if you hold "Shift" while you draw, I'm using the arrow keys on the keyboard, kind of like does it in big chunks. So I'm going to stick one in the middle there. And actually let me change the text. And I'm going to bump it across a little bit. Back to "Command One" on my Mac or "Control One" on your PC, "Actual Size". Now, sometimes it's really hard to see with all these columns on as well. So there's a really nice shortcut to turn the columns on and off. The long way is under the "View". And this is one here and "Guides", okay, and "High Guides". Okay, but you can see here this is the shortcut command and the semicolon or control semicolon on a PC. I'm just tackling, I'm holding down command and just typing the semicolon. I use this all the time when I'm designing cause like need to line it up, need to see it and you line it up neat to see it. Good. Next part is going to be a nice big, what's called a hero box. Okay, so I'm going to grab my rectangle tool here, pick all my colors and things, okay, so off-white black on the outside one pixel. And I'm going to draw out what's called a hero boxes, that kind of big slab in the middle. Sometimes it rotates. Okay. But it's the big kind of like, "Hey this is us, this is what we do and welcome". Okay, so that's that box and I'm going to add a bit of type to it. And this case, what I've done previously is of click once and typed, "OK" and it types on forever. Okay, what I want is what's called a fixed width box. So I'm going to delete that using the "Delete" on my keyboard. Okay. And what I'm going to do is grab my type tool again, which is this guy here, okay, the capital T. And I'm going to make sure I start on this side of my column. And I'm going to click and drag. And if you drag a box out, it means it's going to have like a fixed width just means, like see that it's going to kind of bang up to the edge and then loop back around. Now this text is far too small. I want this like big, like inspirational come to work with us thing and we're going to put there. And I'm just going to bump up the file size, sorry, the font size to something quite large. Okay, a cool little shortcut is with it all selected like it is here. You hold down the "Command Shift" key and tap the full stop key. Okay, so "Control Shift" on a PC and type the full stop key on the keyboard. Okay and it just makes it nice and big. And colon, sorry, comma makes it smaller. So up, they are kind of next to each, up and down. Something that looks like that. If you hate hyphens like I do, like everyone does. Okay. You can do is select it all. So I triple clicked it and it selected it all. And you can go to your paragraph tab here and tune hyphenate off. Go away hyphenation. And, I'm probably going to have to make a triple click it again and make my font a little smaller, so it sits in there. And I grab my black arrow, lift up this box just to kind of, that's what I want. So the next thing I want is going to be, there's a call to action button down here. Why it goes there just ,I don't know. It's become style that you need big inspirational quotes that defines you. And then you need a button underneath, Okay, that's your like call-to-action, like, "Come buy this thing or contact me or something like [inaudible] ". So there's my button and you can see mine's kind of come in defaulted to black center, but no sugar on the outside. I wanted to be like the rest of the buttons. So what you can do is you can start using the "Eyedropper Tool". So I've drawn this one with the "Eyedropper Tool". Okay, because it's selected and I click on this guy and you say he'll steal the styling from this guy. Okay, this navigation on the top. So I'm going to click on this, grab my logo, copy and paste it. And you are going to be my magazine called Action. I probably wouldn't put a magazine on it if you're sending it to a client. I am very professional about it all. So the next thing I want to do is I want to put in some thumbnails underneath here. I'm going to put three of them, okay, and they're going to span four columns each, okay, to make up the 12. But the bottom of the pages stuck down here. So I'm going to grab the rectangle, sorry, the artboard tool. Okay, and I am going to zoom out a little bit so I can see it all, quite a bit far out. And I'm going to make it a bit bigger. So I'm just going to grab the bottom. You can make it as long as you know, I often just make it really long. And then when you're finished, drag it up rather than keep having to move it down loads. Okay, back to command one to get to the right size, that's you there. So rectangle tool, I'm going to have a fill of my off-white. I'm going to have. I've got that selected. Can you see my tick selected when I was changing that? Okay. And it means that it's changed my ticks to have that off-white color, so it's there but it's the wrong color. So don't do that. It had "Undo". Okay, I'm going to have nothing selected. Black arrow click on the background, done. Okay, grab my rectangle tool. And I'm going to draw something out roughly about that size. It's going to spend full columns. Okay, [inaudible] perfect. Now to indicate that it's not like, that's a button, kind of to indicate that it's an image. People put a cross through it. Or they use these special image size. You can see it over there, that kind of like landscape you looking thing. So what we're going to do is grab the line segment tool and we're going to draw that. Now I could start dragging this one over, but I won't get the angle right, so it's easier to grab the black arrow, click off, make sure that just got this guy selected. I'm going to go to edit, copy it, paste, and up the top here we can go to "Object", "Transform" this one they called "Reflect". I'm going to use horizontal, click "OK", and it's just kind of flipped it over now, I'm just going to jam it close to it. Not worried too much because I'm going to select all three of them. And there's one up here that says align horizontally and vertically. Align my rectangle backup. I'm going to group them and then go to "Object" of the top head group. And I'm going to hold down the "Alt" key and click and drag one out. And it kind of makes it duplicate while we're dragging. So hold down "Alt" and you'll notice that when you hold "Alt" it just kind of moves across and often it lines up. You can force it to while you're dragging. So I'm holding "Alt". You can hold "Shift" as well. And it just makes everything lined up, straight up and down. Great. And so a lot of the time I just did these crosses, people fancy it up. You can see this graphic here with the light, that's kind of like a universal, "I'm an image" image. Okay, you can add that extra complexity to it. There's no real drama for it. You might, you might like it and you just use the line segment tool and start drawing mountains, okay? You might increase the stroke width to match that. And if you're looking for the ellipse tool, it's just under the rectangle tool here. And you can mock up your own version of that. Alright, so I've got my images. What I want to do now is I want to finish up a couple of things. This is where you might skip along because it's just going to be a little bit repetitive. And what I'll actually do is I'll probably stop this video right now. And the next video you can skip because, it is me just filling this out and I'm going to line up the tablet version as well. Yes, not going to be super exciting, but then I'll see you in the next video or the video after that. 14. Creating the Tablet and Mobile wireframes in Illustrator: Lovely people, this is what we're going to be building in this tutorial. We're going to finish off to this top, build the tablet, and mobile versions of our wireframe. I won't be offended if you just skip to the next video because it is literally just doing the same thing, but working to a different grid. Do we learn heaps more? We learn how to make a stripy line over here. If you want to hang around for stripy line, let's get into it. We need to finish off our desktop view, so we're just going to add another row of images. I'm going to select all three of these guys. Hold down my Alt key, drag them down, nice. We're going to add in some social icons on the bottom, so my rectangle tool, there it is. It's going to have out no fill, [inaudible] off white fill, and a black stroke, and my social icons are going to reach across, not exactly sure. But that's going to be my social icons. Grabbing this copy just so that the fonts are exactly the same. Like I said, how to grab when you're at some certain levels, you got to grab that right in the middle. This is going to be my social icon. Social, I can't spell social well. Social icons and put it in the middle, my middle was here. Copy and paste that, and this is going to be my copyright. What I might do just to save some time, can I type and get it to write a line so that it goes copyright, copyright 2017. Interesting thing is under "Type", the copyright symbol is under something called "Glyphs". To use it, double-click it, you'll see it appear in there, close down Glyphs. Helpful panel that was. I'm going to put in sample company. Great. Black arrow, move it along so it sits on that column there. Nice. That's my desktop finish. What I'm going to do is I'm going to zoom out a little bit and I'm going to grab my artboard too. I'm going to grab you from the bottom here, drag it up, and I want to split it for padding at the bottom there, great. Back to my selection tool, and we're going to start with the tablet version. The easiest way I find to get started is just copy and paste the course. In my case, I might grab these guys. You can copy and paste and drag or I hold Alt often when I'm dragging, line them up there. My hair box needs to come in as the first one. Great, and this logo box is probably going to be the exact same size on this side and my navigation; I know my navigation is reasonably small. It'll fit in here. You might have to adjust the size of your your logo on tablet. It's just a matter of working out what looks good at tablet size, the different layout that you plan to use. I'm going to go through, the big change for me is I would like to just do two of these guys so I'm going to bring them across. Actually, what I might do is bring one across because they're going to have to be resized. I'm just going to do one of them and then duplicate them. This is lining up with everything, zoom in a little bit, Command 1 just to make sure it's perfectly lined up, and I'm just going to drag them in a bit, and I'm going to hold Alt, and I'm going to do two of these guys. I'm going to make my artboard bigger. Zoom out a little bit, I want bigger. I've lost my grids down here. It's a bit annoying, but I'll be able to work it out. I'll want them to go three by three. You've seen one of the nice things that happens. Can you see there on the right? Here I can't let go of my mouse, but on the right-hand side there it says, "Would you like the gaps to be the same." Some of the cool things you can do with Illustrator. Cool, so next thing I want along is the social icons, I'm going to zoom out again. That's just rebuilding it over here. Now, I can't see my guides so I'm going to have to show you how that works. I'm going to line these up. I can probably just get away with, can you see it actually snaps to the guys at the top there. But you might have the question of, "How do I fix this?" What I need to do is two things, it's easier if I move these bits just over here for a second. Then go to "View", go to "Guides" right here, and go to "Unlock Guides". Now, I can select all of these guys. With the black arrow, it's not as useful as the white arrow. The white arrow, and I select all of them. I grab these little end anchor points, which you're going to learn more about later on. You can see I can drag them all down now. You want to drag them down straight. Maybe you can hold Shift to drag them straight. Perfect. I'm going to go back to locking our guides. Lock guides, please. I'm going to grab the stack back. Guides back into position, which I get the same gap. Nice. My artboard is going to have to get a bit smaller. What I'll probably do is my social icons is going to get smaller when it gets to tablet, and maybe they'll share the space in here. I might have to change that a little bit when I have got the actual icons in the scene, depending how much the client has. Now, I've got a few little work. Last bit is the mobile version. I might just get in early, and get this guide to be a lot taller. What I'm going to do in this case is, I've started with desktop and moved to tablet and then to mobile. I find that's the way I work the best. It's very common and cool, I feel, to start mobile first. It's the hardest one to design for and I agree, but I find the people that come to my site, desktop is a huge majority, so I spend more of my time on desktop and I peer back for mobile. There's loads of people who argue that that's the wrong way of doing it. If you're doing app design, there's no point doing a desktop version, so you'll start with this smaller screen, and it is the hardest one to design for so it's up to you. I'm going to grab some bits that I need, and I'll probably grab all these guys. I'm going to hold Alt, drag them across. You can do yours one by one, and what I'm going to definitely have to do is, the navigations don't fit so we're going to move it down to, basically it's called a nav sandwich. I'm going to grab my logo and move it across. In this top part, along the top here, we're going to draw ourselves a hamburger menu or a nav sandwich, so those three stripy lines, and we're just going to use three stripy lines. I'm going to draw one, I'm going to draw two, I'm going to draw three, might have no struggle applied to them. Before you start drawing, you should probably check that you've got a black line selected. I'm going to do mine separately. They're still there. I'm going to grab you guys, your black and I'm going to make the stroke bigger. Be at actual view so you can get a sense of what size they should be, there's no definite size for them. I'm going to make sure that they're separated correctly. Up the top here, there's one that says "distribute centers" and it just lines them all up. That's what I'm going to do for my nav sandwich. Grids off, grids on, it's about the right size, maybe a bit big, but that's okay. What's going to happen here is this is going to get down towards my grids back. My big hero image is going to be a lot smaller and the text here, although I didn't change the font size over here because I allowed a bit more room. When it gets to mobile, I'm definitely going to have to change the font size to something smaller. What I might do is actually just make sure I've got, so it ends at this "diam". I'm going to make it a little smaller, and you'll notice that here I'm not going to line up with the grid. There's a couple of tricks we can do to force that to happen. Where is it? Diam, so I'm going to delete, watch [inaudible] , so that's all gone and maybe line it up nicely. The other thing I'm going to do is select it all, and I'm going to change the format here. There's things you can do easily, like when it goes from tablet to mobile, I'm going to make sure it lines up center, and that's going to be okay. It's a nice, easy thing to do. Same with this guy, he's going to be centered in here as a big button. He's there, nice, and the font size gets a bit smaller. Next thing I want to do is make sure this is lined up, I didn't do that. What I'm going to do is these are going to just stack on top of each other so I'm going to copy and paste one, move it across and get you to come out to meet the sides there. It's actually going to be bigger on mobile than it is on any other view. I can see from this view here, I've got to make sure that these things are lining up perfectly. You get in there, nice. Back to Command 1. What I'm also going to do is instead of having six, I'm going to cut it down so that actually we only have four of these. Why? Mainly because I want to show you what it looks like, how to turn them off when we get to building our website. We can turn these off in code so we only have four of them going, and just so that it's not so epically long. You can see here I've got four of them already and the pages also already are much longer than the tablet version, it's a lot of scrolling. What I'm going to do down the bottom here is I'll grab this social icon and I'm going to stack these guys differently, so I'm going to have them on top of each other because they just couldn't go side by side here and that's something you can do in code as well. Easy enough. Make sure you copy them when you're dragging them. Tap it around a little bit, grab this one, and they're going to be centered on top of each other. Spacing's good, artboard tool. All right, and that is going to be our wireframe. This might be the biggest, longest, boringest of all the tutorials here on Illustrator. I promise we're going to get into some super fantastic, fun designing color using image mind-blowingness next, I promise. All right, next video. 15. Inspiration for your web design: Now, we're getting into the design phase. We've done some sitemaps and wireframes, and they don't look very sexy. Now, it's sexy time. We're going to go through and look at where I get my inspiration. You might have your spots. This, I find it's probably the best of all the sites. It's called Awwwards but with dub, dub, dub in there. Good gag. It's got Sites of the Day. If you make a brilliant site, send it to them, you might get featured, drive some traffic, and you get sweet designer kudos. It just got really pretty stuff, lots and lots of pretty stuff. Just spend some time looking through here. You might have a specific look you're looking for. You might be an illustrator, go and have a look at other people's illustrations. You've got to use that little icon there, is it? Yeah. Everywhere else if you click, it just opens up a page in Awwwards, which is fine. It gives people's rankings and stuff, but you want to actually look at the page itself. It's a pretty cool site, Mitchlana. Sorry, Michelle Lana. Awwwards.com is a great site. I use behance.com is another brilliant one. I just spend my time going through and going, "I like that," and start appropriating ideas to build something or get a feeling for what I want to work with. That's inspiration for your web design. 16. Starting your web design using Illustrator templates: In this tutorial, we're going to look at how to start from templates. You might be really new to design in general, you might be a student, you might be young, you might be older and you've never done it before, whatever reason you might be a little bit more daunted by the whole design process, what is it going to look like? It's good to start with a template, and there are lots of templates around. Some of the easiest ones are built into the new version of Illustrator, we're at 2017 at the moment. If we go to New or File New, there's this little New Document window, if you go to Web, you'll see that underneath here there's a bunch of templates, you can see if I scroll down. They're for all sorts of things. That is a landing page one, that is some presentation graphics, some social media icons, there's all sorts of different ones. But in terms of a web page design, you can see this in wireframes, look at that. By page designs, you might start with one of these and just start switching, they're here to be used, they are used commercially. You might decide, I'm going to start with this one here because it matches what I want to do. You double-click it and you just start going through and playing with the colors, the fonts, it downloads it eventually and you change it with your images. Say you're not selling an app, you're selling cookies, you could switch it with your image here and that's a good way to get started and just has the bits you might not have thought about, so you might just use this homepage and then all the rest of these. This is a great way. There's a few other templates in there. Another cool place you can go to is, under this one here, under your Creative Cloud license, your Creative Cloud app. There's one, Assets, and there's one in here called Market. If you click on "Market" and in here the search option, you might say Web UI. In here is a bunch of pre-made stuff that are allowed to be used commercially, so you can start with these, it's a great way to look pro really fast. There's a lot of app stuff in here and a lot of web stuff as well. Some of them are really big, some of them just small components, but this line seems to go on forever. To use them, say you do like this Web UI thing here, like the look and feel of this for your site, you can click on this and say download to, often people will just download it to their library, it's called My Library, what I'm going to do is I'm going to click on this and download it to one that I've made called, you can see here, Create Library, I've created this one called Dan's Portfolio. What will happen is hopefully, you can see it happening over here under Window, Libraries, that is there. It's downloading this guy that I could start using, it takes a little while to download it with the net, and then drag it on. You can see here, that is a UI that you can start using and changing and adding to your design, change your fonts, use your colors, it's a good way to get started from a template. That's it for our starting from templates. We're going to make our own one and it's going to be awesome. 17. Bring in your vector logo to the layout: Hey there. In this video, we're going to bring in our lovely, sexy vector logo and we'll drop it on nav bar, play with the opacity, and add a bit of type for our navigation. All right, let's go into it. You can start obviously by replacing things I often just go through. This is what I've used to get my ideas across to the client but it's not something I find useful to start with. I thought more about the product and I'll keep my y frames close, I'll print them off and stick them close, but I don't like switch them out the verbatim, it's not that kind of design process. What I do is I'm going to stop. I'm going to use them as a guide, don't get me wrong. I'm just going to let the content push and move and jiggle as it needs to. Because I've got images from the client now and I've got logos from them, and everything has changed just a slight bit. I'm going to bring in my logo. Just to give me my first bit, and it's going to probably drive a lot of the designs, especially colors, maybe fonts. So we're going to bring them first. Now, when you're finding logos from your client, make sure it's a vector version. What we're going to do is we're going to go to "File" and we're going to go to "Place", this one here. Now, exercise files, I've got lots of logos. There are five versions. So JPEG and a PNG are bad, SVG, EPS, or an AI file are good. I'll show you the difference between the two. Let's say, all of these three are very similar, pretty much the same. These guys have a very similar working as well. Let's bring in the PNG and let's bring in, say, the EPS version, or let's say the SVG. Let's see the difference between the two. Something called pixels versus vector or bitmap versus paths. What I'm going to do is I'm going tear my guards off and I'm going to zoom in. They look exactly the same. But watch what happens when I start scaling both of these two. If I grab these guys and I start scaling them up. Now, it's big. You can see one starts pixelating, looks horrible, and this other one here stays nice and crystal-clear. If you do have the option, the client says, "Which version do you want?" Make sure you get the vector version. The vector is SVG, EPS, or AI. Sometimes, it can be a PDF. But stay away from PNGs. PNGs are handy because they have transparency. If you only have, say, a JPEG and a PNG, get the PNG version, it's not going to scale very, that's not going to help us with our responsiveness. It's not the end of the world. Let's compare it with the JPEG version. JPEG is a clear loser because he has a white background. He's still the same pixels, he still pixelates, but you can see, at least, the PNG has a transparent background. Often, not always. Goodbye, you guys. I'm going to bring in our SVG again just because it came through the right size. SVG, great. This is going to be my logo for my slide. Remember, be working a Command 1 actual pixels. You'll notice that L logo has a white background, it's because what I want to do is turn my guards back on. If you've forgotten, that's Command colon or Control colon, I'm going to get it to bang up maybe just a little bit further in because what I'm going to do is I'm going to grab my rectangle tool and I'm going to put a nav bar on the top. I'm going to make it semi-transparent later on so you can see underneath it and make it all cool. I'm going to move it across so I can see both sides. There we go. I'm going to draw a rectangle in here, it's going to go across 12 columns. I'm going to give it a fill color of black, and I'm going to give it no stroke, so the little red line through it means no stroke. A little of the opacity a little bit. It goes a little bit gray and I'm going to put stuff behind it. Actually, when we build our site, we're going to pin it to the top, so it means that it's going to scroll down when we start scrolling and it's going to stick to the top and we'll always be able to see the logo in the navigation. It's cool. Now, the moment the logo is on the wrong side, this box is on top so we just right-click it. If you're on a Mac, you hold down Control and click with any buttons you've got. On a PC, it's a lazy right-click, and go to the one that says "Arrange", and go to "Send to Back". You can see, I've got my logo upfront. Cool. I'm going to tap it so it sits in there, turn my guides off, and looks okay. Now, what I want to do is I want to put it in the text for my navigation. I'm going to grab the Type tool and I'm going to click once. It doesn't really matter where it goes, and I'm going to go About Us. It's going to be About Me because it's my portfolio. What I'll do is I'm going to copy and paste it to the column next to him, and there's going to be another page called Contact Me. I maybe have My Portfolio button as well. I've decided just to keep those images we had on the bottom to get to our portfolio. This is just like these guys here. I'm going to make them white. So with that black arrow, we got them both selected. I can grab my Type tool now. At the top here, I can go and change the color to white. Actually, what I'm going to use is this off-white all the way through it. I didn't know why I like it, it's just a little hint on the white. It looks white, basically. We've added our type, we're going to go in style fonts in a movie just after this one, we'll just use Arial for the moment. The next thing I want to do is I want to work with a little bit of color. Let's go do that in the next video. 18. Using Adobe Color: In this video, we're going to talk about adding color to your site. We're going to start using something called Adobe Color CC. It used to be called cooler, if you remember him, but if you go to color.adobe.com and you sign in with your creative Cloud license, you'll get to here. If you have a pirated version, this is not going to work as well, bits of it will work, okay. But we hope you got a legit version. What we're going to do is skip create and go to one called explore. What this is really for, is for people that, even experienced designers, like I find myself leaning on the same colors every time I do a design. If you come to me and you're a baker and you need a website, it's probably going to be green and gray at the moment. If you are, I don't know, some international airline and you need work done, I'm probably going to make it green and gray. I'm stuck in a trap of using green and gray. To escape my trap, I use this "Explore" feature in Adobe Color. What it means is, I can go in here and wander and explore. I think by default it's on, I'm not too sure, but go to "Most Popular", I like it of all time, maybe this month. It's just going to give you the things that other people are downloading, the most popular colors and often pretty cool stuff comes to the top. Let's go with "All Time" and these ones here, yeah, loads of colors. What happens is, because you've logged in, what you can do is say that you like "Tech Office". You can click on the one that says is, "Save", and it's going to say how, you can rename it if you like. You can say actually I'd like you to put it into my, remember we made that library [inaudible] called Dans portfolio. You can make a new one here, right to the bottom, "Create New Library" will just jam it into your, where is it, my library. But I'm going to put mine as Dans portfolio, you could change it. That's okay, but I'm going to click "Save" and the cool thing about it, is magically, hopefully if I go to illustrator now and Dans portfolio, sometimes you may click that. I'm going to make this a little smaller. There is there, there is the colors and I can start using them. I can decide that actually I'm going to use that for the color. It's just a good way to start drawing things and you're like, "Okay, now things are starting to work in terms of how many have color." Because I started with this templated color guess. It's a good way to get going with your colors. What you can do for this class, is you can go to the exact same site, and go to "Explore" and go to "Search" and type in BYOL. Hopefully, you'll find some of the ones that I'm using. The one I'm using in this class is called BYOL portfolio illustrator. Download that one and we'll use that for this course. If you are working at a larger agency, it's a great way to shape brand colors. You can upload them and there's a couple of different ways you can go to "Create" and you can go down here and say actually, so CMYK, you can start typing these in and change them, and then hit "Save" and they end up on this explore thing. People can search and share and it makes it really easy, yeah sharing bright colors. So let's download the Bring Your Laptop one, kind of forgot that check BYOL, and I click on "Save", put it into Dans portfolio. Great, nice. Illustrator click the little creative cloud icon, and there he is there. I'm going to click on this guy right click him and say, Delete, don't need you. Cool and great, so we've got our colors in. Let's move on now and look at, let's say, because this is going to be a brand for this particular fake company or fake portfolio we're doing and if you've got actually specific colors and a logo to work from, I'm going to show you how to do that in the next video and pull those colors through. 19. Matching brand colors using Adobe Illustrator: Hey, in this video, we're going to look at kind of pulling colors from existing branded logos to use within your UI design. Let's say that we're doing some work for a company and you have their logo. You can bring it in and we're going to go File Place, and in this example, we're just going to use the Google Logo.png, bring him in. Let's say I want to draw some elements, say it's our hero box in the background here. But I want it to match the Google colors, let's pretend it's some random color to start with, not random enough. With it selected, what you need to do is grab the eyedropper tool, the eyedropper is tools kind of hiding down here. All you need to do is with anything selected, just pick a color from it, and you can see it'll stop pulling the brand colors from that. How accurate will it be? Pretty accurate. Let's say you want to kind of add them but to use later rather than having used the eyedropper tool every time, what you got to do is switch to your swatches panel. Now your swatches panel if you can't find it, it's under Window down to Swatches, turn it on and think of switches as pre-made, pre-mixed colors ready to use. What we're going to do is, let's pick this blue, so here is it then, what you can do is up the top here, drop-down and is an option that says New Swatch. Okay, give it a name, I'm going to call mine Google Blue, and click. You can see it's both in my library, and it's down here, my swatches library. So just work your way through the colors, I grab the eyedropper tool. Red one, here, new Google Red is there, and it's down here the swatches panel. The reason it's kind of good to have them in your swatches, we'll find that a little bit later on. You'll find that this library thing, is awesome for most things. It's new and it's not perfect for everything yet, so sometimes you need them in your swatches panel as well. Okay, awesome. That's how to pull brand colors from existing logos to start using rather than going off in trying to figure out what all those colors are. Okay. There you go. 20. Using the right web fonts Google Fonts and Typekit: In this video, we're going to look at bringing in really specific web safe fonts from Google Fonts and Typekit, like this little sexy guy here and these little Plain Jane but very cool fonts up the top here. So what we've got, and we just use plain old text. You might have used Arial, but default Illustrator loves Myriad Pro. What we need to do now is switch it out for font that we want to use. Now, you can't just go through your list and go, I want to pick all these fonts that I've got on my machine. You might have hundreds, you might only have a few. You can't just go and pick any of them. They need to be specifically fonts that can be used online, essentially just be licensed online, and if they're paid for pay for that license and if they aren't commercially usable go for and use them. There's two main places you're going to do if you're an Illustrator person. There's one called Google Fonts or Typekit. Now, in my experience it depends on what you're doing. At Google Fonts, I find that just easier. They're a little bit harder to implement, but they are better in terms of licensing. What happens is Google Fonts are free for commercial use, which are great. Typekit are free to use with your Creative Cloud license, which is perfect for my portfolio here because I'm not using it for anything else. That mean it's for my portfolio. But let's say I'm building it for a client and they don't have a Creative Cloud license, their website will have to license that font, or I'll have to use my Creative Cloud license to keep their site using the right font. If I decide to move to the Himalayas and wrap up all my digital life, means their font will stop working because I'm not paying for my Creative Cloud license. We'll look at both of them. They're both cool, both easy enough to use. First of all, let's go look at Google Fonts. First up, go to fonts.google.com, and you get here. I really like Google Fonts. There's loads of them. A couple of cool things you can do with them is on the side here, so you need a handwriting font. They can be really hard to find. Let's just have handwriting and oversee, just going to give you lists for handwriting fonts. So I'm going to turn them all on. Some of the other nice things down the bottom here are you can play around with, say like the width. Width can be really useful in you can lower it down so you can get a nice compact, or compressed font, or condensed font. It's just a bit thinner. It just means, especially when you're working online, if you get some of these really thin ones you can get it low into a title without it breaking onto two lines. You can see here you can fit quite a bit of words on this one, whereas if you're looking for a unit with a really wide fonts, you can see it's a lot further apart. Regardless, there's two things you need to do. One is pick a font, so Roboto and probably Open Sans. If you're looking for a body copy font, these are the most common. Open Sans is probably the most common. It's the new Arial. Everyone uses Open Sans because it's clear, it's nice, it's got lots of different weights, and it works good in different languages. What I'm going to do is I'm going to pick. I've actually just spent some time having a look through and I've decided and I'm going to use this one called Playfair. I really like it. It's this one here. It's got some good weights. Sometimes you pick a font and it doesn't look good. You might think it looks good here, but then it looks terrible in the words you need. You can see I can just type over the top of it just to see what my name looks like. Actually, before you go through you can click on the name and just gives you a bigger sample of it all and all the different usage, and one of the useful things as well as it gives you a matching corresponding font is we're going to use this for our titles in our big headings, but then we need a more simpler font for the body copy or our paragraph text. You can see down here it's given me an option that says try Raleway, or this one, or this one. I've opted for this one, Open Sans Condensed. Probably not the light versions, maybe a bit too hard to read online in terms of usability. But it just gives you options, so if you're new or you're old school and you just need some help picking a nice font. What we do is we pick this one and then find it at the top and we say "Select this font", or if you're back in the other screen here you click this little "Plus" button, and that just adds this bottom here called collections, and you can add the fonts to it. Now, how many do you add? Really, you just need two. It comes down to more. It's a mixture of just font rules. If you have 10 fonts on your site, it's going to look terrible. So keep it to a minimum. You only need two, a heading font and a body copy font. You can have three if you need it. I'm going to add this one and then I'm going to find up here Open Sans, and there's Condensed here, and I hit "Plus". They're both together. I'm going to pop this open. Now, there's a couple of things I need to do. I'm going to click on "Customize" because I've got to decide of these fonts, which do I want. What I actually want is I want the bold one and I'm not going to use the regular one in my design. What you could do is you could actually just turn them all on because we're at concept stage now. We don't show which one we're going to use, we just download them all. You don't want to use them all though in your actual finished design, just pick one or two because you can see the more time that's needed to load your page, and a slow loading page is bad for a couple of reasons, it's your user will spend ages trying to download fonts while your page is not loading, not caring about your amazing font selection, and Google doesn't like it, so they penalize you in terms of your searches. Try not to pick too many fonts. But in my case, I'm downloading them all because at the moment I'm just at my design stage. I will pick just one or two. But over here, this is like obscure little arrow, this thing that says download this selection. The cool thing about this is it will download, and I'm going to put it into my exercise files. That'll be there ready for you to use in your own so you don't have to go through this process. You can start using them. But we downloaded them. There they are. Open up the zip, and on both actually Mac and PC now, these are pretty easy to implement. I'm going to open up Open Sans, and I'm going to double-click all of these. It's going to open and I can click "Install". I've already installed them on mine earlier. Do it for both of them. Select all these, double-click, that'll install, and you can start using them in Illustrator. Illustrator doesn't need to be restarted. You'll just find that they amazingly appear. Open Sans Condensed and I'm going to use the bold one. I think I'm using Condensed Bold. Cool. What we've done there is we've downloaded them to use on our computer, and sneaky cool thing is you can use them for all sorts of stuff. It doesn't have to be web design. You just got a whole bunch of cool fonts now to use. Google will allow you to use commercially. Now, what you're meant to do is pick these ones and when you later on give your files to a designer, or a web designer, or web a developer, or you're doing it yourself you'll use those fonts in a special way when the website gets built. They call Google and say, "We're using these fonts, please", and Google says, "No worries," and makes them work on your website. So we've just downloaded them at the moment to use on our desktop. Perfect. Go to typekit.com, and in here click on "Fonts". You have to login with your Creative Cloud license, you can see my little face up there, and you can type in a bit of sample text. The one thing you need to make sure is that Typekit has some that are desktop use only, and some that are web use as well. You don't want to make sure that this is tick to say. I want ones that can be used on a website, because there's no point designing one, they can't be. Over here, the same things like Google. You can click on, say I want scripty fonts only, and it separates these down just to the script fonts. I want to find maybe a slab serif. You can do the same thing with the how wide they are, how heavy they are, all sorts of cool stuff. Yeah, it gets a little easier to start implementing. Say I love this font here, this Sutro, and I click on it. I decide which one I want to use. I want to use this deluxe fill, I love it. Click on "Sync". What happens is in the background, it's actually installing on your machine, which is pretty crazy. You can see it's just installed there, so Sutro. It's a little bit easier than the Google Fonts. Great. I can start using them. Remember, the only problem with Typekit is it's a paid license. You get it free for your Creative Cloud. So for your own staff, it's perfect. But going out to a client, you're going to have to explain that this fonts is licensed. It's a per yearly cost, and you'll add that to your web design just to make sure that they will know that there's extra costs for those fonts. Often, I just go to Google Fonts because no extra costs. The font libraries are different. If there's a font that they love and it's in Typekit, you can tell them, yeah, you can use it but it has to be licensed. I'm bumbling now. So there are other sites to go to. One other one is Font Squirrel. It's quite like both of them, but in between I like Google Fonts though. Cool. That was a particularly long explanation of how to use fonts. 21. Production video finalizing nav, hero box and fonts: Howdy there. In this production video, production video just means I'm not really doing anything new, I'm just going to be filling in the holes for our design. You can watch or you can skip it along, it's all right. This is what we're going to get to at the end of this video, we're going to be putting in some ticks and some colored boxes, but we know how to put ticks and colored boxes, and so let's go and do that now. Cool. First up is let's draw our little buttons on the top here. You could just leave them as text, but what I want to do is grab my Rectangle tool and draw out a button thing that fits in there. Now I'm going to use my colors that we downloaded, the BYOL portfolio colors. What color do I want it to be? Green's cool. I'm going to right-click in. Now, before we even arrange what's in the back, we send them to the back. Goodbye. He's behind the navigation, just see him there. So I've undone it. So it will undo. What I'm going to do is, there's an option in here that says Arrange and send, instead of send to back, which is all the way at the back, send backwards, just back behind like the guy in front of him. What's going on here? Yeah, I've got the right size. I'm going to make a copy of this guy and keep them banged up together, but I'm going to use that red color for it. I right-click, "Arrange", "Send Backwards". Sometimes there's a couple of guys in between and Backwards doesn't work. You've got to keep going, "Send Backwards". You can see there's a shortcut, Send Backwards. I'm going to do that till I work it all out. Great. That guy needs to be in the center. Cool. Let's zoom out a little bit,"Command-1", to get it to be actual size. Actually I'm going to zoom out one more time. I'm going to put it in my big hero box at the top here. I'm going to turn on my guides again, going to grab the Rectangle tool, and we're going to look at images in a separate video, but I bring in my image now, but we're just going to put in a big colored box, send it to the back, and look at putting in the rest of my type. So let's build it out. I'm going to grab my Type tool. I'm going to drag out my box, it's going to cover, not exactly sure how many yet, but I definitely know it's got my text, my inspirational, amazing, hire me as a trainer. Of course it's uneven. UX designer. Great. Font size, I like it. It's looking all right. It's going to be white because I'm going to put a reasonably dark image behind it. Actually, it's going to be that off-white that I've been using. That off-white's in here as well. It's in the color, so you can use either of them. Great. What I want to do is I probably want to insert it by one of these columns. You can do that in web design easy enough. You can say leave that one empty and then start this text box a little bit further along. I'm going to have some little bit of type above that, I'm going to leave that later in the tutorial. This guy needs to get a little bit lower. I'm using my black arrow just to drag it down a bit. I'm going to put a white line underneath it. Why? Just because I like the idea of it. So I'm going to get my Line Segment tool. At the moment, it doesn't really matter what fill it has, but it definitely matters what color stroke we have. I'm using that off-white again. I'm going to click it across. It's going to go across these. I'm going to hold "Shift" to make sure it goes straight. How many pixels? Probably just one pixel is going to look fine. If I turn the grids off and on just to get a sense of it all. Yeah, I like it there. Now I'm going to do a button underneath. It's going to look exactly the same as this, so I'm going to steal it, copy and paste it. It's going to be my call to action. Hire me, please. I'm going to zoom in a little bit. I'm probably going to use the same font size. This one's going to say, "Let's talk." I think everyone writes things like, "Let's get a coffee," "Let me help you." You can think of your own colloquial disarming version. One thing I've noticed when I'm in here, can you see this is a stroker on the outside? I've clicked on this. There's actually that off-white around the outside of this. It's got the green fill, but I'm going to turn the off-white to a red line, which means it's got no stroke and it lines up. Still doesn't line up perfectly, does it? Sometimes drag it off, dragging it back. That looks perfect now. Lovely. Anything else I want to do? No, that's got a lot of the core stuff that I want in there. Actually, one last thing while we're spending ages doing this is I'm going to copy and paste that text. I'm going to put it up here and there's a better copy that I want to go in there. I'm going to have this little thing that says, "I'm currently available for work." I'm going to be using that yellowy color and I'll move it along. I'm going to put in an ellipse here, like a little circle. I'm going to put a tick in. We'll save the tick for later on because I'm going to show you how to do that in the symbols part of the video series. But for the circle, hold down the Rectangle tool, grab the Ellipse tool, and if you just drag out a random one, it's going to be okay. You'll probably wing it. But if you hold down Shift while you're dragging it out, it'll make it a perfect circle while you're driving. If you were driving. It's been a long day. So it's going to be a circle in here. We're going to fill it with this lighter green. It's going to make more sense when we change this image out in the background. "Command-1". Everything is the right size, I think. I feel like it might be that circle's a big, but we'll change him later on. That's enough for the production video. Let's go off and start doing the next bit. 22. Free vs Royalty Free images: Hi there. In this video, we're going to look at where to get free images from and what royalty-free images are. We'll start with the free images. Good places to go. The best place is probably this one called freeimages.com. There are a lot of stuff in here, and you just need a login and you can use them commercially, which is quite cool. If I needed a picture of a rose, what you need to do is you need to ignore these premium ones over here. This is how, I guess the site makes its money, is it shows you some stuff that's half-decent and then goes, what about these ones? These are the ones that you're going to end up paying for, and there's no problem with that. But if you're looking for free, my big tip for using any of the free sites is obvious. On the side here, they say relevancy. Most of them will start with that. You want to go to the one that says Most Downloaded. I find that will bring the cream of the crop to the top. The ones that'd been most downloaded. You can see they're all varying sizes. Some of them are really big and some of them are quite small, like this one here is quite nice, it's a wedding ring being cut out on white, and here freeimages.com. Now another cool site to go to, this is actually just like a directory for lots of other of the smaller, free images, and I know this is a big long link up to the top here, I'll leave a link in the description somewhere, but if you just Google "Shopify 22 awesome websites for stunning free stock images", you'll end up here. What's really cool about it is that quite niche like some of the sites they'll put up one free image a day, but some of them are really beautiful. I've been looking at this guys here, Gratisography. This guy, he's a photographer, Ryan McGuire. He does some real cool stuff and he allows them to be used commercially. Well done, Ryan. Yeah, you can go through. There's more commercial stuff in here with models, whereas, say, freeimages.com often it's just real standardized stock library. Have a look through that list and there's lots of different stuff in here, but Free Images is the main place. In terms of the royalty-free, royalty-free doesn't mean free, it just means that you pay for it once and you get to use it over and over. They'll range between $20 and $40 US to buy and then you get to reuse them. They're three main players: iStock, Shutterstock, and this one here called Adobe Stock. They all have a very similar library doing a similar thing. I'm using Adobe Stock mainly lightly because it ties in so well with the Creative Cloud, and that's probability its biggest perk over the others. They all have slightly different awesome interfaces and so use the one you like the most. I'm using Adobe Stock to save for outside. I want to put in some designers images. So I just typed in designer. Actually, let's put in graphic designer, and so it comes up. Pretty similar. So what I'm going to do is I'm going to grab inspirational looking designery things, and what I'm going to do is, remember, earlier on in this tutorial, I've made this library called, or is it there Illustrator? Don't know, Dan's portfolio is what I call it it. So I've saved a preview to Dan's portfolios. If I jump into Illustrator right now, all right. We've got to Illustrator, and I hit this little Update button, there is it. The nice thing about it is that I haven't paid for it yet, you can see it's got the watermark, but it's a nice big copy and I can start presenting these to my client and say these are the images, this is what I'm thinking about and give them a cost for those images as well. What's really nice is if I start designing this, and I start adjusting it and cropping it and changing the colors, what I can do is in here I can right-click it and just say License Image, and if I've got, say, a subscription to Adobe Stock and I can get 10 images a month for something like $20 US, something around that, and it would just license it and update this thing. I don't have to read it or re-link it or re-import it or any of that jazz, so it's pretty cool. What I'm going to do for this is, is I'm going to go through and grab some designer images. I'm going to type in ux, my favorite word. I'm going to say yes, I want that one to be part of it, and you can see there's a buy one, but there's also just a save preview. I'm going to save that preview and I'm going to save that preview. I'm going to save that one. I'm going to save you, and I'll save you. I'm pretending this is my portfolio. I've totally not made these things, I'm just downloading them. You'll see in here, hopefully, we should get a bunch of little images so we can start working with. All right. So whether using Adobe Stock, there'll be a link on the screen here to go to Adobe Stock. If you've never used it before and want to sign-up, use my little link. Why? Because I get a cut from Adobe. It doesn't cost you anything else, but they give me a bit of a cut of your subscription. It's s win-win, win for me mainly. But yeah, try Adobe Stock or iStock is really good and Shutterstock is another one. Maybe go and compare those ones and see which one you want to use. Free images got to freeimages.com, and if you want to get royalty-free ones that you can buy and use over and over again for lots of different projects, go to stock.adobe.com. 23. Adding Linking Cropping and Masking images in Illustrator: In this video, what we're going to do is, we're going to bring in some images and we're going to look at how to crop them into these little thumbnails here. We'll look at both the squares and circles. Let's go. First of all, let's turn on our guides, remember it's Command, semicolon or if you're on a PC, it's Control, semicolon. I'm going to scroll down a little bit, I'm going to zoom out a little bit. What I want to do is I want to add my little thumbnails like we did in our wireframe. I'm going to grab the Rectangle Tool and I'm going to draw my fist one out. There's my first thumbnail, it's going to span 1, 2, 3, 4 columns and now I want to put an image inside of it. Actually, what I might do is, I might give it a fill color, doesn't need a fill color I'm just doing it, so it's helpful for you to see. I'm going to duplicate these guys along here. I'm going to have 1, 2, 3. Nice. I'm holding Shift select all of this. I got my black arrow. I'm holding down my Alt key, remember, to drag and copy at the same time, or you can just go Control C, Control V. What I want to do is I want to now put in these images. To import an image into Illustrator, we go up to File and we go down to something called Place. They use place instead of import just to confuse everyone. Go to File, Place, and then your exercise files. I've got some images. I've downloaded them in the earlier tutorial and other watermarked versions, obviously. If you want to use these ones, you've to go off and pay them at Adobe Stock, but here's a watermark ones. What I'm going to do is you can bring them in one by one. I can bring in thumbnail 1, Place, click ones, it's going to come through as it's full size. That's fine for these little thumbnail versions or these watermark versions, but sometimes they can be quite big. What you can do is go to File, Place and what I prefer to do is pick the first one and just drag it out. It'll constraint the height and width. To get it to a rough size that you want it to be first. You can bring in lots at a time File, Place, and you can grab all of these guys, all our thumbnails and you can go click you, can click you, can click you, can click you, you, you, you, you get the idea. You can bring them on, all after each other or if you've done what I've done and got some thumbnails from your library, you can just drag them out from here. Either way that's how to bring in your images. I'm going to drag in my stock library images from over here and we're going to look at cropping them to this rectangle. Drag them in, line them up and resize them how I want to fit them in the box. Because now what we're going to do is crop them to that thumbnail. I'm going to hold the Shift key and that makes it scale responsively so the height and width come along and I'm going to get it roughly. I can adjust this afterwards. Then what I need to do, is I need to select him and the box behind him. The easiest way to do is, because there's nothing over here I can click hold and drag. You see I can just drag over these two and I get both of them. The shortcut is Command 7 or Control 7 and you'll learn that one for cropping. The long way is under Object and it is under Clipping mask and Make. That's it gets a little bit hard, you think I'm going to crop it or I'm going to mask it. It's called a clipping mask in Illustrator. You can see there, there's a shortcut Command 7. What will happen is; it won't work. Because actually this needs to be behind our shape that we want to crop. I'm going to right-click him and go to Arrange and Send to Back. I'm going to pretend like I did that on purpose, but I didn't I just forgot. Now Command 7. Look at that, smooth. Let's do one more. Let's drag him in. Hold down Shift, scale him to get him to be roughly the right size. Get him in there. I'm okay with some light interesting cropping so I do not mind that it's not perfect in there, and remember, don't forget, it's got to be at the back. Select both of them, and then Command 7 or Control 7 on a PC. Say you don't like this crop you're like, yeah, I thought it was going to be cool but just looks like it's off. What you can do is let's have nothing selected with the black arrow, clicking the background and click on it once and you get the square. If you double-click him, what happens is you go into this thing called Isolation Mode, and it just means that I'm inside. Think of Layer 1 is home-base, that's back here, but when I double-click something, I go inside this group. It's called a clip group. It means that I can start working on this separate from the square on the outside. It's good to be careful how you drag it. You can see I can drag the image around the outside or I can drag the center of this or I can drag the edge of the rectangle. You can drag both bits in this view, which is a little confusing. Just remember if you grab the center, you drag the image and if you grab the edge, you drag this square on the outside. So it's up to you what you want to do. I'm going to drag this here. You can resize it still from here. Let me go for a big clip. This one's going to be a vector image, it's going to be. Anyway, to get around to the back to home-base is you can click this arrow a couple of times or just double-click in this no space around here, this white area. Great. We're going to go through and do these. We're going to grab you. I'll zoom through it now. We're not going to do circles for this particular one, but I'll do it in the second. Let's get this guy the in the back, clip maybe along here, Command 7. Nice. Let's say I want to do one for circle or rounded circle or polygon or a star, it doesn't matter. Let's just pretend I'm going to do a circle version. I'm drawing at my nice circle. I'm giving it a fill color. It doesn't need one. Just makes it easier for us to see. I'm going to drag this image, put it over top. Black arrow, put him over top, make sure he's underneath, select both of them, Command 7, you can see you get the exact same effect. If you're handy with a Pen Tool already, we're going to look at the Pen Tool later on. But you can draw any shape and do the exact same thing, use that as a cropping box. But if you in need to be taught don't worry, we're going to do it in another episode, well another video at least. Let's do the last parts. Which ones that I use. I don't like this guy anymore. We've got him. Command 7. You can see, you can get a bit of flow on after a little while. You're a bit big, get down. You back, you, you. Command 7 even. Last one was that guy there. We want to be a bit bigger. What shortcut I'm using there? Just to get things behind each other, and we looked at it earlier it's the, if I select something I don't want to stick it behind, Arrange, Send to Back can you see it there there? It's Command, Shift, Square Bracket, Send to Back. You can see that square bracket. On a PC it'll be Shift and Control, Square Bracket. Some of the shortcuts you learn by heart and some you won't. Last thing I do is I want to add a bit of a stroke on the outside just to give them a better consistency. I've selected my black arrow selected all of them. You'll notice that the stroke hasn't appeared up here because they are being called a Clip group now instead of our regular boxes. We can open Window and go down to Stroke. There it is there and I'm going to give it a Stroke of maybe, it has to be one pixel or above, can't be anything lower than that, it cannot print because we're dealing with pixels here. Great. What color should it be? I'm going to do, where is my stroke color? I'm going to open up Window and I go to Color. Here it is down the bottom here. My stroke color is black. I'm probably just going to pick, I do not want to pick a gray color. You probably run into this problem if you're a seasoned Illustrator user, is RGB is a hard one to pick gray from if you have to match them all up. The easiest way to pick a gray is to switch your colors from RGB to this one code Hue Saturation and Brightness. This is really easy. It means just brightness slide up and down. I'm going to use a bit of a gray. Nice. To my guides off, how does it look? Looks beautiful except the art board needs to be extended and I'm going to extend mind quit a bit down because I've got my footer and things to stick in there. That's it for our cropping in masking of images. Let's go through the next video. 24. Washing out images in Illustrator with with coloured background: Hey, there. In this video, we're going to do this little image in the background here where it's a full stretchy background, and it's washed out, and it's got a green tone. We'll look at how to do that in Illustrator. All right, first up, let's bring in our image. Now there's two ways of bringing it in, we can drag it from our library if we've got in in there, or we can go to File, Place. Now this will alter how we make it, say, black and white. I'm bringing in the image, I'm dragging it nice and big, great. If I do it this way, it becomes very easy to convert to black and white. I'll show you that now and then we'll look at some of these other images that are linked to say, your library, and they become not harder, they're just an extra step. What we're going to do is we're going to crop it in where we need it. Actually, let's make it black and white first before we go and crop it into that square in the background. To do that, it's quite easy, have it selected and go to "Edit", "Edit Colors" and "Convert to Grayscale". Now there's not a lot of control in Illustrator how you convert to grayscale, it just goes, your grayscale, and hope for the best. If you want to be a little bit more controlling over what goes, different colors go different grays, you can do this in Photoshop. Now this is not a Photoshop course, so we're going to leave that out. But if you do really need that control, turn to Photoshop and do an adjustment layer, it's under layer, adjustment layers and it's called black and white. You get a lot of control over how to convert it into black and white, save it then bring it into Illustrator. That's pretty easy though in Illustrator and I'm happy enough with the results. If I want to do the exact same thing, I'll pop you up there. I want to do the exact same thing to, say, this graphic in here. Because it's tied to my library, it doesn't let me do as much. So if I double-click it, double-click it again, I've got my image. If I go to the exact same thing, "Edit" and go to "Edit Colors", you'll notice that it's grayed out. It's just one of the things that happens if you're using stuff from your library because it's connected. If you update your library item, it updates here, so it doesn't want you messing with it. To mess with it, is, you just got to click "Embed". Keep double-clicking it until you've got your image. Then go to "Embed" and then you'll notice you can "Edit", "Edit Colors" and "Convert to Grayscale". I'm going to undo because I don't want to convert him to grayscale. I just want to let you know if you've got that problem, it might be a logo that you're trying to do it for, anything you've imported. So we've got on grayscale. I'm going to put him roughly where I want him, and remember he has to be at the back. Then I'll select both of these two and I'm going to use my shortcut, Command, seven on a Mac, and Control, seven on a PC. It's what I want. But what I want to do is give it that greeny-dark look, and there's two stages to it. You grab your rectangle tool. I'm going to draw out a rectangle that covers the whole document there, and I'm going to give it a fill of black, and I'm going to give it a stroke of none, which already is, great, and we're going to lower the opacity. You can lower the opacity a few different ways in Illustrator, we're going to use this one along the top here. We're just going to go down until we're happy with the background, it depends with what you want. Now obviously, this is over the top of everything, so what I'm going to do is going to go right-click and I'm going to go "Arrange", instead of going all the way to the back, I can go all the way to the back. Now it's behind this image. So I'm going to click on this image and say, you're at the back. There we go. Okay, so it's looking better. I want to add that green tinge to it. So you might leave it here and decide actually, I'm going to crank up the opacity. I'm going to have this background washed out, black look, and that's fine. Next thing I want to do though, is stop playing around with the colors, Dan, is I'm going to create a new rectangle on top of all of this. I'm going to de-select in the background first. So black arrow click in the background then grab my rectangle tool, makes it easier. Draw a rectangle at the top. I'm going to make this my green. Now I need to get it behind, okay, sandwiched. I want it in front of the black box and the image but behind all the text. There's a couple of the different ways. Different trainers will show you different ways. What I find easiest to do is just move it off because it's easier to snap back together, is, actually, I'm going to send this guy to the back. So you, the green box, you go to the back. Then these guys, I wanted to bring it above these two. So I'm going to grab you. I've just untiled them all so I can see them all, so I can click you, hold "Shift" grab the black box, right-click both of them and send it back. The green box is at the back now. These guys are behind that green box, but in front of this text. Okay, so that's how I do it. There's different ways. I'm using the layers panel. That's my way. Now what I want to do is, obviously, this doesn't quite work. I am just covering everything. We're going to use something called a layer mode, and that allows us to, you could just lower the opacity, and that works. But it doesn't give me the look that I want. I really want this strong black with green filling in the edges. Okay, so that would work. But what I'm going to do is something called a layer mode. You do it by clicking the word "Opacity" at the top there. So black arrow, click green box, click "Opacity", and up here where it says Normal, that does exactly what you think it was. You can play around with these ones, so you can see. It's a way of the green box interacting with the stuff behind it. Instead of just using opacity, you can use these other modes. They're all slightly different, and if you've got a different image with different colors, you're going to find a different layer mode that's going to work. I'm going to use Soft Light mainly because I've played around with this already and I like it. But soft light is a little strong, so what I'm going to do is I'm going to just lower the opacity of it. So I'm using layer mode and opacity and it looks, I like it a lot better than just lowering the opacity. You can see it's still got the vivid blacks in the background, but it's tinted as well, so I can still get that green in there, fill in the holes with green. All right, my friends, that is how you wash out a background and add a bit of a color to it as well at the same time. All right, onto the next video. 25. How to use layers in Illustrator 2017: How you doing campus? In this video, we are going to look at layers in Illustrator and what we're going to do is we're going to end up looking like this where we've got one layer with all our artwork, okay, and one layer with the background layer. The cool thing about the background layer is that it's locked. There's a locking icon here, so we can't move it around. So let's go and do that now. Okay. So first thing I want to do is I'm not going to use the white of the background here, that's a pure white from Illustrator. What I want to do is actually I want to put it in like my off-white that I'd be using here. Okay. So I'm going to grab the rectangle tool and you can update the art-board color. Okay. So we've got to actually manually draw a box and give it that fill, then I'm going to use my black arrow, right-click it, arrange, send it back and just make sure it has got no stroke on the outside, I'm just using this gray here. Okay. So that's going to be my background color. You could stick it behind everything just to make sure it covers everything. Okay? Yeah. There's no way of re-coloring this art-board. So what I want to do now is play with the layers. Because I find it really hard now to start moving things and I accidentally grabbed the backgrounds. Okay. So it's easier because I never want these things to move. So I want to get these glass to stick where they are and not move and the easiest way to do it is to stick them on their own layer, okay and lock that layer. Okay. So in your Layers panel, go to Window, go to Layers, where are you layers? There you are. Okay. By default, given one layer, it's really common to be working in Illustrator and only if they have one layer. Don't sweat it if you've only got one, you all know from Photoshop you'll end up with hundreds of layers but in Illustrator, if you know I mean that would just the one, that's not bad, okay? So there's nothing wrong with that. We are though, going to make a new layer. This little turned up page here, okay? We're going to double-click it and call it background, okay and there's nothing on the background. You can see that little thumbnail there, it has nothing on it. What I want to do is select everything that I want to move there and because I'm dragging a box around all of these, it's grabbed my green box, the black box, the image behind it and this gray box all together in one big go, which is awesome. What we want to do is drag them to this background layer, okay and the easiest way, you see this little dot here, okay, this little square, click and drag it, that moves everything that I had selected to my background layer. Cool. Now I'm going to lock it. Now the locking icon is just meant to randomly know that that's the locking hole, okay? Click on that, okay and I will lock that layer and they can't be moved now, okay? The only problem is this and that it's above, okay? You can see the backgrounds above my layer one. Let's double-click layer one and let's call this one artwork or artword and then just drag this guy click hold, drag, so he's underneath. Now. Okay? I click on artwork, so that's my active layer. My background layer now is, okay, unselectable, so I can go and select all of these guys, move them around without selecting the background. I guess that is the point of using the layers here. The other nice thing about it is you can turn that layer off, you see the eyeball. You could turn all your background layer on and off, okay, just by clicking the little eyeball there. All right. My friends, that is how to use layers in Illustrator. On to the next video. 26. Using the Adobe Market for free icons: In this video, we're going to cheat. We need a tick and we're going to just steal it, stealing is the wrong word, we're going to appropriate it from Creative Cloud Marketplace and there is lots of good stuff in there that we can use and we're allowed to use legally and it's all scalable in vectoring this. It just saves us from drawing it. Let's go and look at that now. To get to the Adobe Market, we've got this Creative Cloud app installed, so if you don't have it installed go to adobe.com/downloads and get the Creative Cloud App. That's the one you're looking to download. It's probably already installed on your machine and on a Mac it's up on this top icon up here. If you're on a PC, it's in the bottom-right, down the bottom here. You're looking for this indirective Cloud thing. You want to go to Assets and you want to go to Market. We looked at this earlier. The Market is really, really good for icons. So I'm going to click in here, and say we need a tick. "I'm currently available for work," you might have a tick and a cross. So I want to put in tick and go through and just pick the tick that I want, and there's lots of options in here. The cool thing about them is that they're scalable vectors. This one here looks good to me, I'm going to download it to my Dan's Portfolio, perfect. There it is, downloading there. I'm going to drag him in. I'm going to drag him in again. The reason he's not dragging in is, you might have run into this problem as well, is that I'm on the layer called Background and it's locked. I pretend I put that in there on purpose just to show you, but I didn't. Happens to the best of us. Beyond your Artwork layer, the unlocked version, I'm going to drag it onto this lay here. What we're going to see is that we've downloaded an image and you can see it's not a very good one because it's pixelating when I get bigger. So when you're downloading them, go to Marketplace, and when you click on them, this one was made in Photoshop, not good. Let's click on this one here, this is an SVG. Remember SVG is awesome scalable vector graphics, it needs to be be AI, EPS, or SVG and he'll work. Even though, I don't need this, that's fine. I'm going to go to Download and I'm going to download it to Dan's portfolio, lovely. Here he comes. [inaudible] Wait for him to download, there he is. Okay, there he is there. The cool thing about this now is you can see instantly it's got the blue line around it, but you can see it's scalable, which is really cool. What I'd like to do now is I'm going to right-click it, Ungroup and right-click, Ungroup again. Depending on how these are group, I'm going to delete these, [inaudible] and now I've got myself a little tick. So I've ungrouped it twice. I'm going to give it a fill color of my off-white and I'm going to scale it down and use it as my graphic. I'll zoom in, holding down Shift in the corners, remember, and there's my little tick-aroni. The cool thing about using Adobe Market is that you can find vector stuff in there and you can use it commercially and you could draw your own tick. We'll do this in a little bit, showing you how to use the Pinto, things like that, I use it for all sorts of icons, just easier to find them in there. All right, that's how to use Adobe Market to borrow icons to use for your designs. 27. Using Icon finder for free website UI social icons: Hello, in this video, what we're going to do is we're going to get these images, these icons, these social icons, and we're going to get them for free from a place called Iconfinder. Then we're going to go off and change the colors to match our design. Let's go. First step we need to use Iconfinder, and to go off and find our icons. I love Iconfinder, and there is a lot of free icons online, but there's so much real bad stuff out there that it's hard to sift through and people at Iconfinder have done that for us. So we're going to type in, say social. This could be your home, it could be products, icon that you're looking to do. What you need to make sure is it depends like I've got mine on free and commercial use. No back link. That just means that I have to pay for it, I don't have to add a link thinking them, that's totally up to you on how you want to work. I want to make sure mine is Vector as well, because I don't want any pixelation, I want to scale nicely. But the prices are pretty cheap, like if I look at Any, the icons are buy for a dollar. So they're not going to break the bank if there's not one you can phone in the free option go for pay for it and that support the site as well. What I'm looking for is Vector, Free, No back link. So I can go off and use it. The cool thing about it is not only does it have lots of icons. When you click on one of them, it has often a part of a larger group and that's what's really handy. It's getting them all looking the same and having a similar look and feel to them all, so I love that about this slide here. This is a test for you. We're going to download, say, a group of these ones. Which version should I get the SVG, the PNG the AI, or the CSH? The DW shape. Which one do I want? Either the SVG, AI will be perfect for us. This Photoshop version works as well, but the PNG one, is not scalable. So we want to go on that constriction inside and out, and these SVG and AI one, is going to allow us to recolor them. Because this most of the color is not doing for me and neither is this blue it's not matching our colors. What you can do is you can go through and download all the ones you want. I've downloaded some for us for alcoves, they're in your exercise files, and we're going to go bring them in now and go and change the colors. Thank you Iconfinder, you're awesome. What I'm going to do is first of all, I'm going to tell my guides on a little line that runs across the bottom here is just part of my design. I'm holding shift to get it to go straight, and this one has no fill, no stroke and I'm going to use maybe that green that we've been using. Where is the green? Or maybe a dark gray or light gray. Here we go. Guides off. So now on my social icons to be down here. Let's bring in all of our shapes. Let's go to File and go to Place. On your desktop, you shave your exercise files, and here's all the social ones I want to bring in, and they're SVGs that I've decided to use, it doesn't matter. AI or SVG. I'm going to go, click, all on top of each other, just so that when I select them all, I can hold down shift and resize them all. Now cool little short cut is if you're holding shift, it constraints the height and width, perfect, we already know that. But if you hold down your Alt key on a PC or Option key on a Mac, it is from the center, quite often that's quite a useful. Instead of trying to, yeah, you might be lucky, you might know. How big are they going to be? Not sure about that yet, but that's about it. What we'll do is we'll just pick them all because I want to change the colors of them first, and this is a nice quick way to do it. What we're going to do is, these are all grouped together at the moment. But let's say I want to change a match some of my colors. What I can do is first to zoom in. I will do this Facebook one first, and there's a couple of ways of doing it. The easiest way is we could ungroup full of these guys because at the moment that we're locked together. I want to change this blue background, but I'd be changing them or the stage. Little trick is we've been using that black arrow quite a bit. We're going to use the white arrow. The black arrow moves things around physically, and the white arrow moves around little pieces within that little group. So watch this. I'm going to click off in the background and then I click just on this corny. You can see I can start playing around with them, even though they're group using this white arrow. So click off the background, click once on the circle, you'll see it's picked here. What I can do is I can do something quite cool, and those track and say, because I want all of these colors to change rather than doing them all individually. So I can go to Select, Same, Fill color. I'm going to pick everything on this document that has the same fill color is him. You can see he's picked all of these guys. It means I can quickly and easily go and change the colors. Pick the color from your colors, and if this was a multi-colored icon, you can just use the white arrow and click on different parts of it, and decide and go and change them all. The trouble would be say if I wanted to change the color of the white and the Twitter logo here, if I click on "White" and go Select Same, it's going to pick white that have used anywhere else in the document. I don't think I've used white, I've used that off-white, but it'll go and change it all in one big go. It has some limitations when you start using that Select Same. We've got these guys, we'll order them in the next video, we'll look at aligning and distributing L icons in Illustrator. 28. Align and distribute icons in Illustrator for web design: Hello UI designers. What we're going to do now is get these icons just aligned nicely and balanced in these columns. All right, let's go do it. First up, I want to turn my guides back on, that's command semicolon or control semicolon on a PC, and zoom it a little bit. I'm going to go to command one or control one on PC to get a full screen because I want to get a sense of how big I want these to be. I think these guys are a bit too large for social icons because that's where the size is going to be displayed at for a website. I'm going to make mine a little smaller. Okay. The order of them. The way that this works is, let's put Facebook say is my most important one, and let's say Twitter is next and just get them in a rough order. Doesn't have to be beautiful. Then your last one. It's the first one and the last one that are important. Okay. I'm going to get these guys to span one full columns, okay? We've got them in some sort of order after each other. I'm going to select all of them, then along the top here, if you can't see this, say you working on a really tiny screen, you might have to go to Window Align, and there's a whole panel that opens up or you can use the one up top here, it's up to you. What I'd like to do, first of all, it's probably get them to align horizontally. I get vertical and horizontal mixed up every single time, you might be the same. I'm going to click on this just so that they all line up. You see that? All lined up nicely. Then there's this one called Distribute horizontally, only because I'm reading it from the toolbar there, but let's horizontally distribute them, and let's click on it. It just spreads them out evenly. That's the how to line them up and distribute them. One last thing before you go. It's not relative to what we're doing right here but it will become useful for you at some stage. At the moment by default, it's aligning to selection, which is cool. It's doing exactly what we want it to do, but say we wanted to align it to the app, well think of that alignment to the page. Say that I'm going to group these guys, so they're grouped together. Now I want to say align, but it's going to do it to the Artboard,it means when I click align to the center horizontally, it's going to align to the center of my artboard, and you can see that's quite useful as well. It will remember the last thing you do so I'm going to turn my back to selection, I'm going to get an undo to put them back where they were, and I might ungroup them again because I didn't need them grouped. All right, so that is aligning and distributing in Illustrator. 29. How to adjust vector shapes in Illustrator: All right, in this video we're going to look at editing vectors that already exist that we've downloaded, and we want to stop playing around with and kind of adjust them a little bit. We're going to do it to this little simple arrow down here, we're going to change the stalk size and adjust it a little bit along with the color, and we're also going to mess around with them, make them kind of rounded and do all sorts of fun stuff. All right, so let's go and do that now. So let's start with editing a nice simple one we're going to use this arrow that I've downloaded, I've got mine here in the library because I download it from the marketplace, but I've got an example in the exercise files you can download, go check it out, it's called Icon Arrow, which shouldn't be hard to find. So go to File and place that in, make sure its vector, and we've used the black arrow, remember to move things around, and we've limitedly used the white arrow to do adjustments, so we're going to look at that. This is the white arrow, this is how you adjust existing vectors. Let's say that I want to make this little shorter, so what I do is I can click on this corner here, so first of all click in the background, make sure nothing is selected, click in this anchor point I want to move these little dots on the corners are called anchor points. Now I want to select him and I can move him around, can I adjust it and say, this is what I want to do, my lovely arrow. So you can make some basic adjustments with the white arrow. I'm going to undo that, and let's say I want to kind of tuck this in a little bit so it's a shorter stalk on this. So I'm going to click on this first one, so I'm going to click in the background, click on the first one and then hold down Shift, and then we'll add to your selections, you got two bits selected and I click and drag it down and I'm just going to lower that stalk so it's a lot shorter. You do the same for this, I can drag this guy in, I'm going to drag him in a little bit, grab this guy and drag him in a little bit. So I'm kind of adjusting my arrow and another thing you can do is at the moment it's got sharp edges and I think I want that, I'm going to leave that, so I'm going to make a copy of it, using my black arrow, selecting it, Copy Paste, I'll leave him up there and you'll notice that I'm looking over here in this gray area, it's a really easy nice place to work without the kind of being hindered by all the graphics and guides and stuff over here. So with this selected, I'm going to go back to my white arrow and what you'll notice is can you see these little white dots here, these are how to round corners which is, I'm going to zoom a little bit, if I grab this guy down and drag them in because I have the all corner selected, they'll all get rounded. That's how to round, it doesn't have to be an arrow, it could be a rectangle. You draw a rectangle, grab the white arrow, grab the corners and you can round corners that way. What you also might do is say you want anyone around one of the corners is grab the white arrow, and click on, it's called the direct selection tool, I keep calling it the white arrow because that's easiest to figure out, but it's called the direct selection tool but if you click on one of them, you can see I only got a dot on one of these and I can cut around this corner here and this corner, but he loves these kind of teardrops factoid boxes. So that's how to convert stuff into these rounded corners. Another thing we're going to do is we're going to look at converting them because the moment that's kind of like it's quite a unique rounded corner, what we're going to do is let's grab this guy, we'll copy and paste him and what I'd like to do is start kind of adjusting it in a bit more of a freehand style way. So I'm going to grab my white arrow, I'm going to click on this corner here and instead of just making it this rounded corner, which is really symmetrical, with it clicked up here, you can convert it from at the moment it's a corner, you can kind of tell it's a nice sharp corner, you can click on this one here and this will smooth it out. It'll just give our anchor point these handles so that you can see the path still actually goes through the anchor point, it was there, now it's been stretched out by these little handles here, I think of them like little gravity things that kind of, the line still has to pass through the anchor point, but these little handles adjust how it passes through and you can start playing around with it, to kind of give it a bit more of a free-form shape. You can also break this because the moment they're the see-saw, where you do one side it will fix the other. So what you can do is you want to snap them, hold down the Alt key on your PC or Option key on a make and watch this, I click one of them they kind of snap. So there's still bending the line, but they are no longer doing that see-saw option and so there's a few little things we've learned here, one is we can round these corners by grabbing these dots, but if we want more of a free-form shape, we click on the corner, and we say I'd like you to be a smooth one and if you want to break it because at the moment it's kind of it's cause smoothing at across, but there is an interaction between the two which keeps it smoothing but say you don't want that, you can hold down the Alt or Option key, break them and you can stop messing around with these things a little bit more detail. So the next thing I want to do is color it. Now I've downloaded normally you just click on your colors here and it will work, but this particular example, and this is likely what you're going to get from icon finder or from the marketplace is watch this vector corner and go you one color. It'll use these watch these down here wierdly feels like a bug in illustrator than anything, I'm undoing to get rid of the colors is you can do one of two things, one is you can keep double-clicking it, go inside this arrow, double click it again to go inside the path and then I can color it. We'd leave this kind of lightweight combination that somebody is saved, I'm going to undo that, come back out by double-clicking the background. I find the easiest way is these Color Themes here, I'm going to right-click it and go to Add to Swatches and you'll notice down the bottom here my Swatches Panel, my pre-made little colors is the colors you can see little versions of that and I click on this and say down the bottom here, areas they had the colors, double-clicking it until you get right inside of it and then change the color. Then make sure you double-click the background to come all the way back out here, and we're going to use this guy. So I'm going to copy him, I'll leave those guys over there, I'm going to zoom in and I'm going to use this little arrow here. He's a bit big, hold down Shift remember to scale proportionately and what I'm going to do is I'm going to scale it down and I'm going to rotate it around. Now, there is a rotation tool and there is there, you can click on that and just rotate them around. What most people do though is just using the black arrow, if I zoom in, if you hover above any of these, we've used the ages lots for resizing but watch this if I have a hover just outside, you can see this is like no man's hand so that scaling, rotation, nothing else, rotation, scaling, so we want the rotation with the little bent arrow, and you can rotate it around and if you hold the Shift key down while you're rotating it, can you see it locks it into 45-degree angles and that's going to work for my arrow, we want to go that way. All right, there's my little arrow, and I've customized that a little bit, not much put the stalk in, but we've learned a little bit about customizing vector graphics that maybe we haven't created, we'll move on in the next episode and look at creating our own graphics. All right, I'll see you next video. 30. Creating custom icons and logos using the shape builder tool in Illustrator: Hi there. In this video we're going to build this logo shape here using the shape builder. We're also going to build all of these fun little guys. Let's go and do that and learn how to use the shape builder tool. First up, let's delete these guys. They were from an earlier tutorial, and we're going to use this paste area on the side here, but you can use a new document. The shape builder tool, you are going to love. When they came out with this as a trainer, I was jumping around happy days because the next thing we need to do after this is the pen tool. If you have tried to learn Illustrator before, and you've gone to the pen tool and you try to join parts. It's a pain in the bum. Now shape builder is going to make you a pro pretty quick. What we're going to do is I'm going to give it a stroke on the outside of magenta, just because I'm going to give it a nice thick stroke so you can see it. Hold down, "Shift" to get a perfect circle. I'm going to do the same with the rectangle tool. Rectangle tool, I'm going to draw this. I'm just building a random shape to show you a bit of an example, I'm going to grab the star tool. You can see there's all sorts of weird things going on here. Now, if I want to fill these things, if you've never used Illustrator before, you might not be as impressed, but if you've fumbled around and trying to teach yourself, this is going to be mind-blowing. I've selected all three of them. I'm going to grab this innocent looking tool down here. It's called the shape builder tool. What it allows me to do is a couple of nice things. It allows me to fill these gaps. They're not actually joined, but this is going to make them do it for us. I'm going to pick a fill color. I'm going to say I want you to fill with, I don't know. Where's my swatches, these are the swatches that I have bought in from over here. I'm going to grab that green and watch this. Close that back up. I can say, I want you to be green and maybe you to be green. But I'd like the rest of you, say this bit to be orange, or the red-y color. You can see how quickly and easy it is to start coloring these things. What you can also start to do is start joining them. Say that I want these guys to be the same shape, not two separate colors with a stroke around it. What you can do is, I've picked that color here. I'm going to drag across. Can you see I drew a line clicking and holding my mouse across these two, and watch, it makes it fuses it. So if you've ever messed around with the Pathfinder tool, say goodbye Pathfinder tool as well. Nice thing as well is you can trim things up, say that you don't want this box up here. You can hold down the Alt key on a PC or the Option key on the Mac, watch this, and click this, and hey, trims it up, nice. So I can say actually I don't want that, I don't want that. You can trim up a couple of things, I don't want either of those two. You can stop building shapes, whilst using existing pre-made shapes. Yeah, it makes it really easy to start creating things. You can see they're all separate. I've got a cool little, I don't know what that is. But that's the getting started with it. Not sure where he was left from. Let's look at one of the things you can do with it. Say let's use the line tool and let's draw ourselves a little home icon, like a home button. I'm drawing it free hand. All you got to do is make sure they overlap. You can see my little stick house here. Little house down the bottom here, making sure everything overlaps. If they don't, grab your white arrow, click on one of the dots, click on off on the background, click on one of the dots and you can move them around. Just make sure they all overlap. Select it all, grab my shape builder. Pick a color I'm going to fill it with. Actually let's put a roof on this thing. Let's put a roof on it. Grab my shape builder. Actually, select them all first. Grab shape builder, pick a fill color. One of my colors there, I've picked green for the roof. Cool, hey, you can just fill it in and then I can go to, what else have I got in here, pick a different color, orange. Fill the house and the door is going to be yellow. It's just really easy to create custom shapes here. Now you might be thinking, "What about all the ugly stokes?". There's a couple of things we could do. I've just used my black arrow. Click off in the background. Clicked on you Shift, select all three of these. I could just use that. I've still got the stroke around the outside. I could select them all and say, "No Stroke". You can see there I've made all these shapes or you can start doing stuff like this. Say that I just want bits of the strokes, but I want to trim these edges off using the shape builder tool again, holding down Alt. Remember by default it's adding shapes. I can click and add, but if I want to remove shapes, I hold down the Alt key on a PC or Option key on the Mac, watch this, I can drag across these guys. Goodbye. How cool is that? I do love this tool. You can get rid of the ones you want. Keep the ones you don't. That's a little bit more of the shape builder tool. You can also do things like this. You can grab say, "Type", and I'm going to do, "Dan". No, I do not want a dictation. Click and type the word "Dan". I'm going to make it nice and big. Where's my font sizes. Even bigger even. Hold down Shift, use my black arrow, make it nice and big. Pick a font that's not super lame. Museo Slab kind of a man. Now shape builder's not going to work like this while it's editable type. What we need to do is we go to Type and this one, and here this is create outlines. Okay, now it's no longer editable type. I can't change the spelling or the font. You might want to duplicate it before you do this. But now it's a shape like these other shapes here, and we can start messing around with them. By default, they're all grouped. I'm going to right-click them, Ungroup. Hopefully now I can start doing some cool. When I say cool, it's going to be pretty lame, I can tell already. That's a good example. Select all of these guys, I'm going to grab my shape builder tool. Stand back, shape builder. What I'm going to do is maybe just delete the bits that crossover to do some sort of, I don't even know what I'm doing. Pick a fill color. We'll pick a color up here from my swatches. You and you. Oh, yes, terrible. Actually, I might grab the shape builder tool and just delete that one there. I don't want him. Oh yes, we are funky. Shape builder tool, getting better. Let's look at rebuilding our logo because that's really what I wanted to do, is make something like that and you could stop. You're probably going to be able to see that's going to be pretty easy, right? It is. To make that shape there, we're going to grab my ellipse tool. I've held down, "Shift" to make sure it goes perfectly spherical. I might actually make it have a stroke around the outside, there's no reason to do this, just to make it easy for you guys to understand. There's just a black stroke around the outside, I'm back on my black arrow now. I want two of these probability, so I'm going to copy it. If I paste it, Illustrator just paste it in the middle of your screen. If you go to, "Edit" and go to, "Paste in Front" nothing looks like it happens, but there's another copy exactly in front of the one we had before. If I grab one of the corners, I can make it smaller. If I hold, "Shift" while I'm grabbing it, it will make it perfectly smaller, as in the height and the width. Remember that shortcut we learned a few videos ago, if we hold down the option as well. So shift and option or if you're on a PC, it's Shift and Alt, and it will do it from the center. We've got two little circles. You could just draw them separately, select them both, and align them. Next thing I want to do is I want to grab my line tool and because I've got smart guides on. If you don't, make sure that's ticked on, I can go from the center here. If I try and draw another line from the center, it starts adjusting the one I've got. So what you can do is go back to the black arrow, click off in the background, then grab your line tool, start a new one. Back to the black arrow. Click off in the background. Little painful. I'm just doing this like line segment-y thing for our brand to be some sort of infographic-y looking bit. You can see how easy it's going to be to fill. Black arrow, select them all and I'll making something like this. Remember, [inaudible] giant version. Maybe got one too many segments. I'm not sure how I'm going to do that. Color them, we'll work it out. With that selected, shape builder tool. What I'm going to do is down here, I'm going to pick a swatch. It doesn't matter whether you pick it up here or down here. It does matter if you click on these, it just fills the whole thing. Feels like a little bug with this. The libraries are awesome, but there's a few little things. So remember, if you are jumping into this tutorial by yourself, you might need to right-click this guy and say, "Add the Swatches" so you've got them down here. That color's going to be that one, that one is going to be that one. That one is going to be that one. It's going against a dark background, so that's why I get to use that white. I'm okay with that. Awesome. What I want to do is I could delete these guys. There's couple of ways. But what I might do is just click this, hold, "Shift" to select all of these pieces and just move them off. Select them all. They still get a black stroke around them. Say, "None Please". Now I've got myself a cool little shape-y thing for my logo. What I might do is, because they're all separate, which is cool, select them all, right-click them and go to, "Group". If you're on a Mac and you're trying to right-click and it won't right-click, go to, "Object" and there's, "Group" in here. You'll find yourself using the shape builder tool lots. It's my go-to for building all sorts of interesting shapes without having to go to the pen tool. But the pen tool is a necessity and we're going to learn that in the next video. So let's go and do that. 31. Drawing icons and logos in Illustrator using the pen tool: All right. In this exercise, we're going to draw this little kiwi and this cloverleaf down the bottom here, and we're going to draw a crown. They're all vector. They're nice in victory beds, and we're going to show you how to use this lovely, lovely Pen Tool there's there. Let's go do that. First step, what we'll do is we'll draw these on its own document and copy and paste them in later on, just to not get too confused with this document. Let's go to File, let's go to New. It doesn't really matter, we'll be on Print. Let's use A4 or Letter. I'm not too worried about the size. We're going to bring in some things to draw. Now, most of the time, if it's a reasonably complex shape, I will hand draw it in my notebook and then take a photo of that and bring it in, because I'm a lot better at drawing with my hands than I am with the Pen Tool. If it's a simple shape like a heart or a star or something like that or an arrow, I'll just try and freehand it with the Pen Tool. But let's look at bringing in some of the stuff we've drawn. So File, Place. In your exercise files, download the Pen Tool exercise files. If you don't have these exercise files, there's a link on the page somewhere to download them. I'm going to click and drag it out so it fits within here. This is the stuff we're going to be drawing. They're nice, little progressive things to draw. So I've hand-drawn these. If you're wondering what that is, that's a kiwi. It's a little native bird. It's a terrible kiwi, and it took me ages to draw that one as well. Kiwis are hard to draw. They're like footballs with legs. Anyway, so you've hand-drawn your little thing that you want. Now, what we want to do is draw over the top of that, and we want to lock this background layer so it doesn't move halfway through drawing. The easiest way, we've done this before in Layers. But see layer 1, we're going to lock it. This little icon appears in this little empty box here. We're going to call this one background. Great. We're going to make a new layer. I'm just going to make sure we've got this layer selected and this is going to be our drawing layer. Just make sure we're on this layer, we're going to grab the Pen Tool. Where is our Pen Tool? There it is there. We want this one called the Pen Tool. So the basic are, let's zoom in. If I start drawing now, watch just what happens. You end up with this white box filling it up. That happens often when people are starting. Let's give it no fill. So that's the first one here, no fill, and the stroke on the outside, something that contrasts this background. It doesn't matter what color it is because we're going to change it later on. I'm going to use a bright green. The stroke is going to be one pixel. Drawing shapes like this, like arrows and crowns, are really easy because when we're using the Pen Tool, you just click once for a corner. We'll do curves in a second. All you going to do is work your way around. So click once. You can see this thing is attached to it. Hey, don't worry about that, just previewing where the line's going to go. I'm going to click once again here, click once again here. You can see that green line starting to appear. Click once again here, once again here. Once again there, there, there, there. We've got ourselves a terrible irregular crown. But it's just like a drawing exercise, so let's not worry too much about it. Let's give it a fill. So we'll grab our black arrow with that selected. Click off in the background, click on it. I can give it a fill color or my cue. Give it any full color and give it a stroke of maybe none. Awesome. We've got a crown. To see it by itself, you can turn the eyeball off on this Background layer and that is our really pretty crown. Let's look at our clover. It's like I'm living in Ireland now, I'm a kiwi, you get it. We're going to draw this, and we're going to draw them as three separate parts and then combine them because a clover obviously doesn't have these gaps in. But we're turning it into a drawing exercise. What we're going to learn now is we've worked out the corners, you click once. To get a curve, you click and drag. It's best to start at a corner because that makes it easy. So I'm going to click once. You see that line still attached? But instead of clicking again, which is going to give us a corner, what I want to do is I have undone then. So I've clicked once down here. What we want to do is find halfway through this curve. This curve goes from here all the way around, and literally, halfway is about there. But what you want to find is the apex, where it changes the most. You can see about there it's like that, point of the corner or the apex. Watch this, if I click and drag, you get this little handle that comes out. We saw them earlier. I'm clicking and holding and dragging, and we can wiggle it around. So don't be afraid to drag it. Which this, I can drag it in so it's really tight and really sharp corner or I can drag it out and it can be a really long, exaggerated corner. So in and out and wiggle it around to get it to go the angle you want. Now, what you'll find is you'll never get it right the first time. You wiggle around, your spin ages. Don't worry, this is phase 1. We can fix it up afterwards using the white arrow. I'm going to drag it until I find there. Then is this a corner or curve? That is a corner. People have a tendency to click and drag this one as well, which is not what I want. I'm going to go here and just click once because that is a corner, it's a big change of direction. Can you see the big hoop of the top here though? They're like, oh no, erected. That's just part of drawing with the Pen Tool. We can fix this up later on easily enough. I'm going to undo. There was a corner, click once. This thing here is a curve, click and drag. Down here, is this a corner or a curve? It's a corner, so you're going to click once. I'm getting there, right? Yeah, that's what we've drawn. Once you've got the corners there and the points roughly in the right point, then you can fix it up with the white arrow. There's always a bit of touch up at the end, and you click on this anchor point here. This is the guy that needs fixing, and watch this, I can wiggle him around, yeah. So I fix him. But then, this guy is not quite right, so I grab this handle and I give him a wiggle. Now, I can move it up and down, but see this? I can move it tighter in too. Can you see it's getting a little better? I can start wiggling this around. What you'll find is you'll get this quite perfect, but you'll wreck this other side. There is definitely a lot of toing and froing. It's like a seesaw. They have to balance out to look nice and smooth. But you're going to figure out an even-steven between the two. This guy is the same. This guy here, though, is maybe not out far enough. I'm going to zoom in. Can you see? It's just like there is no matter of bending these handles to get them to come out. So physically, I need to move this guy here out. Then I can drag him out a little bit there. This guy here, I try and fix. There's always a bit of toing and froing between the two. I'm going zoom out. Yeah, it's looking all right for my first one. Let's go through, and it's just this step in repeat. So I'm going to grab the Pen Tool, click once for a corner. Out here, click and drag for a curve, click once for corner, click and drag for a curve, click once for corner. After a little while you can see I didn't wreck this one as much as the last one, but there's still a little bit of touch-up to be done. Lovely. Now, let's try the third one. Hopefully as you're going along, your first one will look terrible. I imagine it'll be this big great thing. That's okay. Just forget about him, you had a crack. Try the next one, and by the third one, it'll still probably be recently bad. It depends on your skills towards drawing with a Pen Tool, some people grab it. Now, I've taught thousands of people with a Pen Tool and I promise you, everyone is terrible for a long time. It takes a lot of practice with the Pen Tool to get the hang of it. Here we go. You can adjust them up. Now, you might find it's easier. So if I click off and click back on it, and to say actually, I want it to have no fill. I have that green stroke on the outside just while I'm working to make it a little easier to see the thing underneath. Don't be afraid to move the anchor points as well if you're not finding that they're working. Now, let's look at this last part, the little stalk. I'm going to grab back to my Pen Tool, come here Pen Tool. Watch this, I'm going to click once. If you're finding it really hard, can you see it's trying to jump around and join and link and do all that stuff? That can be helpful, but in terms of the Pen Tool, often it's not. So I'm going to undo to get rid of that point, and I'm going to turn off my Smart Guides. Where are you Smart Guides? I can't see you anywhere. There you are, Smart guides. Pen Tool. Click once for a corner. You can see here, this is just a really slow curve, so what I need to do is halfway through it, about there, I'm going to click and drag. This is where it gets a little weird. You can see here, I'm just going to bring it in. Click once there, I'm going to make this a flat end. Then there's just a slight curve in here. I'm going to wait about halfway, click and drag. Which way do you drag? People do this all the time, they drag it this way, and I'm trying that it's not working. This guy needs to go over there. If it goes horribly wrong, if you do do that, and let's go this one, and you go this way, and you're like, join it and you're like, that doesn't look right. What you can do is grab white arrow. I'm going to zoom in a bit. I'm going to say this guy here, you need to be switched around. You can start adjusting it. I'm going to select this guy, give them the same fill color, and you use eyedropper tool, we learnt him in the early exercise, eyedropper tool. Nice. All right. That guy's pretty terrible. You could cheat. I'm not going to know. I'm going to copy and paste them. If you get one of them, good. Just go and repeat them. What we'll do now is before we move on to the kiwi, we're going to join these guys up. So just get them so they overlap. This guy here, I want it to stick out but maybe not like that. Here we go, like that. They're all overlapping and remember our amazing tool that joins things. Now slick them all. They're all separate shapes. You could leave it like that, there's no real problem with that. But say you want to join them all, let's use the Shape Builder tool, and you can draw across all of these. Can you second drag across to join those two? Join those guys. Join those guys. Might have to zoom a little bit. I want all these guys to be part of the same gang along with the stalk here. You can see now they're one complete shape. Lovely, how awesome are we? Now the ugly football bird. I love this bird, but not my drawing of him. It's got a weird [inaudible]. Anyway. This guy is going to be more complicated. It's pretty much just a long version of this. Let's go and do that. Grab the Pen tool and let's start with the corner. I'm going to start with this one here. Click it once. Which way am I going to go? Now I'm going to go this way. Now this guy has some, he's not just one complete circle across here. If I tried to just do it, this one, I'd get there mostly. But because he's got like an arc there and a different arc at the back. What we might find is we're going to use two little handles to make it go round. Don't be, what a lot of people do is they'll go like this and they'll add lots of them to get the curve. That's fine, and it works. But you'll end up with a shape. Let me turn the background layer off. You'll end up with a shape that's never that smooth. There's all of these like little jinks in it. I'm going to turn the background layer back on. It's always better to use as least anchor points as possible, but when you're new, it's hard to know the least you can do. But in this case, it's probably going to need two, so I'm going to go one, just for corner, click once. Then over here, I'm going to go maybe about there, click and drag. I'm lining it up, push. I'm going to come down here and maybe another curve around by his bum. I don't need much there. You can see it was working and you have the inclination just to go click once. But then because he's a corner point, it's going to be very hard to get that to look smooth through there. Can you see that little jink? Don't worry if you get to here, you just need a little bit of the handles. We can fix this up afterwards by tucking him back in, but at least it's going smoothly through the curve. You can click here once. You'll be like, that looks here would end. That's okay, remember that white arrow afterwards, we can fix it up. Now these terrible feet, I don't know what I was doing with these. They're terrible. Can you see [inaudible] guessing what's in there? What I might do is I'm going to switch him out to have no fill and have a stroke, I'm bringing the stroke to the front. I'm using this one over here because while you're using the Pen tool, that thing we love disappears, so I'm using the Swatches panel. I'm going to use green for my stroke and it still continues on with the Pen tool. Clicking here, that's my terrible foot. Now halfway through this curve, [inaudible] click and drag and here's my corner. Click once, click and drag. Click once, I mean to the feet. I don't even know how many toes my bird has, I'm a terrible Kiwi. Lots of corners. Now this one's cool. This goes that way, then goes that way, then goes that way, so there's going to be three. It's going to be this one, it's going to be this one and it's going to be this one. If yours looks nothing like that, don't worry, get them in the right positions and we can use the white arrow afterwards. Down here is a corner, but in the middle here about middle. Great, good. Click once. Beak curve, click once, curve, click once. Let's go fix up this. It's okay. My drawing is not good, so the drawing on top of it can't be much worse. I'm going to slick it with my black arrow. There you go and I'm going to give them no stroke. I'm going to give him a fill color. I don't have my swatches from the last exercise, so what I'm going to do is probably just color in random color and then change him when I drag him to my other document because those colors will exist there. But what I'm going to do now is go to my white arrow, click on any of these anchor points and start messing about what there to try on, some dignity my little bird. Instead, I'll try and fix up his head while we're there. I always find it's easier just to draw over the top, hand draw it first and then draw over the top and fix it up afterwards. You might be different, you might just hand drawing it. But yeah, so the Pen tool, one last thing I'd like to share with you with the Pen tool is say there is a curve where there should be a corner and corner where there should be a curve. We did this a little earlier when we started adjusting existing vectors, check out that video. But let's say I want this to be a corner now, he's some rigid back bird. I've accidentally put a corner where I wanted, sorry, a curve where I wanted a corner. What I'm going to do is click on this. You can see he's got a nice little point now. He's like a camel bird thing. If I want to turn it back to having a curve, I click "Curve". I'll put it exactly back, so I'm going to have to drag him out. Nice, awesome. Say there's a point that you don't want, say that I want to do this all on one point, there's this extra one that I don't want. You can grab the Pen or you can, sorry, select on any of the anchor points. You can see up here it says Anchor and there's one that says Remove selected anchor point and he'll disappear. You might just try and actually move this one around and try and get it one big go because it's smoother. You can see it works. Actually looks better. I'll leave him like that. I don't like him, I'm going back. That's if you want to add an anchor point. What you can do is you can go to the Pen tool again and if you decide that you need another anchor point about here, see with just with the Pen tool selected, I can just click on there and I got an extra one. Gives me a little bit of extra control to stop moving around and stop playing with these guys. I'm going to undo it because I don't want it. Now we're going to move it to our other document, so I'm going to zoom out. I don't need the crown. I just need these two. I'm going to slick them both. I'm going to get a copy. So Edit, Copy. Jump over to Illustrator and what I'll do is I'll bin these guys. As lovely as they were, I don't need them anymore. I've actually draw my logo. You can reuse yours. You could delete the logo. Delete the logo in the end, use your new one that you've made. But I'm just going to paste these guys in. Interesting thing. Do you see any bit of it came along? It's because I think I only had the white arrow and he had that bit selected. Grab it with your black arrow. Click off, select both of these guys, Copy. Select these guys and Paste it there, both of them. Now I can go into my Swatches and pick my fill color. I'm going to pick the green. What I'm going to do is I'm going to line them down the bottom. It's like I don't even know why they're here, they're more of a Pen tool exercise. Do I love them? I'm loving the kiwi more. He's my kiwi. I'm a little clover. It's not going to go in down the bottom here. This is like a cool little graphic thing. Kiwi's a little big. That's it for the Pen tool for the moment. You might have to re-watch this one a couple of times. Pen tool can be hard, don't get discouraged, it is hard I promise you. You ask any graphic designer that knows the Pen tool, they'll hate it for a long time until they've had to use it for a little while and then they'll bridge that gap and start being able to use it and then that becomes their best friend. I love it. You probably hate it at this stage. Then just use the Shape a little and Pen tool when you have to. That's it for this video. 32. Creating a tablet version of our UI web design in Illustrator: In this tutorial, we're going to create our tablet vision. It's going to look very similar. We're going to play with some of the padding on the sides here, it's not so fun dented. We're going to rearrange the stacking order of these thumbnails and yeah, little bits and pieces, but we'll get ready full tablet. Let's get started. Now I've already plan through what I wanted to do in my wire frame. It's going to be easy to follow that. What I also find is, the wire frames close to what I want, but I end up actually changing it quite a bit as I'm working with the actual copy and the actual images. First we're going to know my guides. I'm using command semicolon, or Control Semicolon on a PC. You can see I've decided, remember to use three columns instead of 12. There's meant to be 12, but just visually too hard to work with. What we're going to do is use our 12 here. First of all, lets moved the background along. What we might do, is see down here my Layers panel. You might have to go to Window, Layers to see this. I lock the Artwork Layer and unlock the Background Layer. What I wanted to do is maybe select all three of these guys. What I'm going to do is hold down the Alt key while I drag it, it makes a copy. You just move it over here, and it's going to end up on this Art board. What I'm going to do is, how am I going to size this? I'm probably going to have to adjust this again afterwards, probably. What I'm going to do is, I'm going to grab all three of these guys, stick him in the top corner to get it started and will keep me going. Then I'm going to adjust them one at a time. I'm going to grab you, snip you to the edge. Now you can see mine's not snapping just fudging here a second like, window it's not snapping. Finally it worked out. Earlier in the previous tutorial, I turned off Smart Guides. Smart Guides are really useful and it means that when I can line these things up, watch snap a doodle. Yes, I said snap a doodle. We're going to drag that one in this green box, dragging the black-box, and we're going to drag in this one. Now if I drag this one in, you'll notice that it just compresses. That's not what I want. I'm going to double-click it, to go inside, grab the edge of this, this is my crop box. I've gone inside of it now. I've double-clicked it, go inside this group where I clipped it before, I've made a mask. I can decide on how I want this to work. I probably going to get this image in the middle to center. That's how I'm going to do in code at least. I need it to be smaller probably. It's going to resize a little bit, down to this little size there, and nice. Double-click the background to get back out and we're back to it, square one. One thing it didn't do, is what I might do is just tidy this up. Here we go. Today's my background graphic. I'm going to have to probably change that a little bit. I'm going to grab this big gray box.Drag him across as well. Grab that corner, lock them in. The height of this is going to change quite a bit. That's been too long enough. I'm going to lock those guys, unlock artwork, and stop moving this top it across. I'm going to grab maybe these, that's not grabbing it all, just to make life easier. What I'm doing for tablet, is I'm actually going to leave the navigation there. I'm going to grab these three guys. Make sure you hold Alt and I'll drag the whole thing across like I just did. I'm going to grab that and copy it. Then I'm going to undo, put it back there. I'm going to come over here, and go to Edit, Paste in Front. Holding Alt while you drag is you don't just move it across. Nice, I'm going to grab these three. I've grabbed all of them including the background. If I hold Shift and click this one, like don't want selected, I've just got these guys left, copy and paste them, come across and they still fits nicely enough there. I'm going to continue with that. All of this stuff is going to come across, holding Alt, lining it up, nice. All looks good. Not changing much for the tablet you can see. I'm just going to do this, turn you on and off. You see the difference that I am doing though, is that there's padding in this one because I've got a bit of freedom of space. I've got this insight on tablets is going to get it to line, all the way up here. The height works for me. The difference is going to be this guy. I'm going to grab all six of these ones, hold all just drag them across. The difference of these ones, is that I'm going to stack them two by two. They need to resize a little bit. So this guy here is going to come up. You'll notice snapping to a lots of things, moving things this other way because my guides is handy. You can see it's not matching up because it's a different size, I'm going to have to hold Shift and drag it down. If you finding a snapping to too many things, I find it's always easiest. Just to come in nice and tight, and it will forget about lots of the other things that's trying to snap too and focus. I like that guy, but how do I match all of these at the same time? It's easy as with it selected, you can see it's a width of this. It's 369.5. pixels. I'm going to grab that. Grab you. Let the small one to go, I can't. I'm going to do you, I'm going to select it. I'm going to make sure that it's linked. When I change the width, it changes the height. Enter, you can see it scaled down. To you my friend, are going to be the same, width and height. You can see that just giving proportionately smaller. You, you, and you. It becomes a little hard if you want to shuffle the order. It's easy obviously to do an illustrator, but when you come to web design, it becomes tough. Try keeping it the same color flows, within this one. Then this guy, then this guy, nice. I've got my line down the bottom here, actually about the gray box. It's [inaudible] , go massive, and we can adjust this great thing afterwards. I'm going to bring in, I'll bring it all for you. You can go in there. This line needs to be a lot shorter. It knows it's hard to grab this line and bring it in. You might need to zoom in. I find that it's easier when you're trying to grab some of those points. I grab you. One thing I didn't put in the last bit, is I wanted to add the little copyright notice to the desktop and as well. It's just going to say Copyright 2017. We're going to put in. We did do this. I felt like we did the copyright thing earlier on. Do we do it? Let's go. We must have deleted them. Type, Glyphs we did. I remember this debacle. Copyright it, my first time, this time. Double-click it, and if he has done the bottom, they have massive deleted it. This is Dans Portfolio. You put in your company name, if you have one, limited. I'm going to use a font that we're using, which is Open Sans Condensed, I'm using bold I think. Great. I'm going to grab you guys, not just the string, copy, paste them. Move across, and you go there. What we might have to do is, the ordering of this. These two going to span. What else is going to span? Well, six now? Select them all, tuck that one in. We're going to span six and we're going to distribute centers, horizontally or vertically, can I remember. That's what's going to look like over here. That's it for my tablet vision. I'll just tidy up the Art Board before we finish off and move on to the mobile. That's about right. I'm going to unlock the background so I can get this gray thing to slide down. Actually there's a big gap in here that I want to mimic. I lock the background. Maybe it goes down a little bit. Lovely, that's our tablet vision. Let's move on to the mobile. 33. Creating a mobile responsive UI website design in Illustrator 2017: Hello beautiful people. In this tutorial, we're going to make our mobile version. You can see it's a little bit different. We've done lots of left aligning and columns. In mobile, we're going to break it down. We're going to remove some boxes. You can see we're missing some lines and we've going for some centered bits and probably the main bit is a lovely mobile menu or a Nav sandwich or our Hamburger menu. Let's go and build that stuff. Similar process as the tablet. I'm going to lock the artwork and unlock background so I can move this across. I'm going to select all of these pieces, hold 'Alt', copy them across, try and get them to snap, they don't, I have to work that out afterwards. I'll select all three of these, joining, and snap in the corner. Still not wanting to snap. I was fine if you zoom in, it wants to snap a whole lot better. My problem is, a couple of these aren't quite lined up. Now the looking good. All right, what's probably going to be, it's going to be a lot shorter. I know this because I've all ready mocked it up for this tutorial. You'll probably going to do this on the fly as you're working. I'm just going to make it a little smaller because I know. Now remember resizing this one's a little bit weird. If I just grab the corner, it's actually going to work in this case, you can see it resizes it, but if I do some weird stuff like that, it makes it long and skinny. What I might do is, hold 'Shift' until I get to about there. I Want it to re-size down, now I double-click, click on the outside, which is the clipping frame. I'm going to drag him to match that and then I'm going to grab the inside of this and just move it along so it fits. I going to scale it down a little bit. All right, double click the background to come out, and we've got our nice little faded background. This guy needs to be adjusted. This one's going to be a lot longer, I assume. We'll have to adjust that when we get down to the bottom there. Cool, lock the background, unlock artwork and then start shuffling it across. Probably the biggest change in this case is going to be how the menu's going to work. We've only got two buttons, so we probably get away with just having buttons. But not many people would have just two buttons. We're going to use a Hamburger menu or a Nav sandwich. We'll turn on my guides. Now remember we using only two of the columns instead of the whole 12, just so that it's not going crazy when we're trying to, we haven't got columns everywhere. What I'm going to do is, a couple of things. The logo is going to have to shrink. It stayed the same at tablet but I'm making the decision to shrink this down at mobile. It's going to have to get smaller, how smaller? Just so it can fit my Nav sandwich in here so it doesn't get too bad. You can switch out logos to different formats, that's totally possible in HTML, you can hide one kind of logo and you might have a different stack maybe something stacked on top for mobile but for the moment there's my little Nav and we're going to draw a Nav sandwich. Now, the Nav sandwich is this three strappy lines, it's become the universal thing for doing Nav sandwiches or mobile menus. It's just three strappy lines in this case and your developer or you as a designer when you're building it in say, Dreamweaver or something else, can manipulate this pretty easily. To draw the line I'm going to make sure, I'm going to use my off white and I'm going to make sure it's nice and thick. How thick? Remember go, 'Command 1' to look at it at actual size rather than trying to zippy zoom. I thought it was an okay size, at that size when I zoomed in, but that's obviously too wide. I'm going to be 3 pixels. I'm probably going to tighten it in and again, it's really hard to do that from way out here. We're going to zoom in again and I'm going to tighten this line in. Holding 'Shift' while I'm tightening it and just make sure it stays in a straight line. With it selected, I'm going to hold 'Alt', drag him down, drag him down. How is that looking? Full-screen? It's about right. What I might do while I'm in here is just to make sure they are all equal distance apart. Is the Distribute Vertical', and they are all fine. Nice, put it in there. You might like this one, you might like the rounded corners at the end. This one's got flat ends and that's what I want because it fits everything else that I've done with the square edges. We see a roundy, edgy person. What you can do is you can select on these strokes here. Open up your 'Stroke' panel. Where is my strokes? It's not open. There's mine one there, but if you can't find that got a 'Window' and go down to 'Strokes' and what you're looking for is this 'caps' here. At the moment it's on the unfortunately named 'butt cup' but you can switch to round cap. You'll notice that it makes them roundy Hamburger menu. Up to you. Zoom out, great. I can probably get away with my logo being a little bigger. On mobile I don't want it to be too small. Actual size, guides off, excellent. Next is, I'm going to do something quite different in terms of the layout. I'm going to grab this group first. I'm going to copy him across. What I'm going to do is I'm going to group them together and I want it to be centered on this artboard. We looked at that a little earlier. We're going to go to our 'Window', we're going to open up 'align', move down here and I want it to go center, but what I want to do is I want you, my friend, show Options and I want it to align to the artboard. I want it to be centered at the art board. If I hadn't grouped them first, watch what happens. I group them, they all go centered but that's not what I want. I group them together, 'Command G' or 'Control G' on a PC, or right click 'Group' and just make sure I'm going to align it to the artboard, center. Cool, he's going go to the top there. I'm going to keep the font size the same, I think so. This bit here, I'm going to copy him across and I'm going to butt him up to the edges. But what I'm going to do is I'm going to make sure the font size comes down. It's very easy to change the font size when you are a web designer. I'm going to do that. I'm going to make it centered and I'm going to grab my black arrow, align tool. Don't need to align this because I've used aligned with the text up here. He's going to be centered there. How small? Maybe just a tiny bit smaller, there we go nice. Next bit the line. I'll bring this whole little gang in at once. Hold down 'Alt', drag him across. We can copy and paste him and what I'll do is, actually what I might do is turn this line off for mobile. It's one of these weak quirky things where I've played around with it before and I didn't like the line. I'm going to group all this together, all three of these are grouped and then I'm going to make sure it's aligned to artboard, center it, turn my columns off. I feel like this is maybe a bit too big a font. I'm going to select it all and maybe move the font size down to something a little bit smaller. Little changes like that the web developer, or yourself will be able to check it but if it doesn't look visually different, they probably wouldn't go and check so you might have to make a note to yourself to make sure you indicate to them that's actually just a font size smaller. No complaint. You might have to write to CSS just for one that we're font size but that's why your designer. You get to make the big or tiny font decisions. All right great, I probably turn this up a little bit at the bottom, mainly because it's not lining up. I'm going to unlock the background, grab him, there you go, nice. All right, next thing I want to do is save it. Let's look at how we are going to do with these thumbnails. Now up until now we've done, we did stacks of, we did 3 columns, then we did 2 columns and this one we're going to do 1 column as per a wireframe. Now, I've got my wireframe and printed off next to me and I'm just copying that as I go. What I'm going to do is grab one of these guys, move him across, turn my guides on, align him up, stretch him out. The weird thing is that he's actually the biggest he's ever been on mobile weird. Like desktop he's actually the smallest, he's a little bit bigger on tablet and he's the biggest on mobile. Now you can see there's lots of decisions being made on mobile, a lot of people will design first for mobile. It's not my, being my experience that it's better to work with the most used screen, which in this case is desktop. We've worked him out and he is how wide? 399. I'm going to grab him and actually I'm going to bring all of these guys across. I'm Shift clicking them all, all come across. I'll jam them over here in the artboard and I grab these two, because that linked 399.5, awesome. I know we did them separately before, but when they're lined up on top of each other, you can change the width because they're lined up next to each other. All right, now it's a matter of stacking them. We're going to copy that stack from tablet, nice. You next, who's next? You're next. We're totally running out of space. What we're going to do, just because I'm going to turn us until web design tutorial as well, we're going to use Dreamweaver, that makes this, rather than just designing it, is we're going to actually turn these two off just so that the page is not like this epic scrolling, massive mobile version so that it loads nice and fast on the mobile in case people aren't in Wi-Fi range. I do it mainly so that I can do it in a web tutorial to show you how to turn things on and off. We'll turn that line on and off, and we'll these guys on and off using CSS. We've got these adjusted and we'll bring a footer over here. We might have extend this down a little bit. How far? Not sure. My background, the background wasn't locked. A little bit lower. Locked the background. Grab you three, bring them across. What I'm going to do is, I'm going to get the social ones too. I'm going to group them together. 'Command G' or 'Control G' on a PC. It's aligned to artboard, I'm going to center them, so I've centered them there. I'm going to stack these. It's something I can do easily in HTML as well, is I'm going regroup these guys. I've grouped them so that I can send them on the artboard and I'm going to drag him down. I'm using my keyboard shortcuts just to get it down in this case. They weren't groups. They're all just overlapping each other. Undoing, back, back, back, undo, undo, undo. There they are. Now right click them and 'group' them. Now if you center them, they shouldn't stumble on top of each other. Nice. Tidy up the art board and there my friends is our mobile version. Unlock him. When you're doing this, it's probably not going to like this is something I've designed previously for this tutorial. You'll spend like I do an amazing amount of time nudging this up, moving this across, changing those colors, playing with their font, to get it all looking how you want it. Don't be afraid if you've got three or four versions of your mobile because it's the hardest one to do but that my friends is our little responsive web design. All right, let's move on to the next video. 34. Export your full page web ui mockups from Illustrator 2017: In this tutorial, we're going to explore our different screens or our different artboards so that we can put them into a PDF so that we can send them off to the client to see or for our web designer to maybe give us a costing on. Yeah, just a nice way to make a PDF straight from illustrator. Let's go and do that now. So we've made our super stupendous amazing designs. Now we've got to get them out to our clients to show them or maybe to our web designers to show them the mock-up we're looking to do. We're going to just export the screens or the artboards first rather than that little adb elements. It's really easy to do in the new version of illustrator. If you're using an earlier version, it's not too hard. You can go "File" "Save As" and go through and save all the different artboards, but there's this new version, you going to "Export" and there's this thing called "Export for screens" which is really cool. If it's on "Assets" this is not what I want, I want "Artboards." It's just going to export these three different pages separately. You can export them together as well and what you can decide on is what file you want. So I want all of them together or actually, I want a full document, well, maybe a one-page I just send to them or I want them separate pages on a PDF. What I want them to be, this is format, you can go down to PDF. That's probably the easiest shareable one that we can e-mail to somebody. Where is it going to go? Up at, mine in the exercise files, you can see, and I'm going to click "Export." Kick back, relax, and hopefully, there is there. I have got at a desktop, a mobile and a tablet version. Open them up. It's pooling the names from the artboards that I gave them. Awesome. Lovely. If you want to stick them together and you're in something like Acrobat Pro here, you can go over to, this is "Organize pages" and you can say "Insert" "From file" and find those other two pages. You desktop exercise files and you stick them in here, reorder them and I'll save this one and that can be just a one-page document. Now when people open it, they can go through the mobile, tablet and just tap all on one go. So that's exporting the whole look and feel. This is not the end of it. This is good for the client to sign off or for the web designer to get an idea of what you're doing, but next of all we need to explore all the little different pieces separately so that we can use them on our website. 35. Should I be using SVG export in Illustrator 2017 for web design: Okay, in this tutorial, we're going to talk about SVGs and should I be using them or should I not? SVGs a reasonably new file format. It's like a JPEG or a PNG, and it's really good for use online because it's scalable. SVG is a vector graphic, which means it can be scaled up and down without loss of resolution. Whereas JPEG if you stretch it really big, it gets all pixelated and yucky. First thing is, is it great? Yes, it is great for things like icons and logos, things that have really simple colors. Let's have a look at illustrator here. Okay, so things that would work really good as an SVG is this logo and this little icon. Here's a little arrow we've made, these little guys in the bottom here, the social icons, these will work great as SVGs. The things that don't work good as SVGs is anything that has more than a few colors. Okay, so like this image here, this is what's called a bitmap image or a raster image, and it comes traditionally from Photoshop. Whereas these guys, you can tell when you zoom in on them, that they are all vector and pods and all this lovely SVG, goodness. Whereas this is just a bunch of pixels. These guys still have to be typically a JPEG. These guys get exported as one or the other as a PNG or an SVG. Now, sure you're using SVG? Yes. If you'd have asked me a year ago, I would've said maybe and a year before that I would have said no, because of browser support. But what I like to do is keep an eye on the site called caniuse.com. You type in SVG and it gives you some useful information, at the moment it has huge browser support, unless you're supporting IE 8. Now, you might be working for a really big company and they're supporting really old versions of this browser. It's nearly ten years old now, IE 8, and I don't know many people supporting eight unless you're working at IBM or big companies that have to deal with really crappy old computers still. If you're doing your own portfolio, definitely skip it, go straight to SVG, it's awesome. If you're working with a company, you just double check with the developer. Or if you're a little unsure and you're not too sure of SVG, just stick to PNG, it's not going to kill your site, but it makes it easier for responsiveness if we're using SVGs. So just check up here you can see globally it's used 97 percent. There's a few people that don't like to use it. There are a few tricks you can do to switch off to SVG and some other things if you are a bit more hardcore into your web development. Anyway, how do you know if other people are using SVG? I showed you these two earlier, they were Shutterstock and iStock and you can see they both look great. They are logos at least. What happens is if I zoom in, so I'm just holding command plus on my keyboard, if you're on a PC, it's control plus, you see eventually it starts looking pixelated. So that's a PNG and it's fine. It looks good far out here. But if I had to scale it up nice and big, I'd have to make a really big file size in a PNG to get it to look good at this size. If I look at iStock and I zoom in on this, you can see the logo, the closer I get, the more crisp it is. This becomes really useful when you're dealing with written in screens or really high resolution screens, 4K, 5K screens. Because although this looks good here, zoomed out, it might look terrible on a really high resolution iMac or on my written mac here, or on an iPhone or an iPad. So PDF's use them, they're fine, they work everywhere, they're bulletproof. You might be freaking out your developer sending them an SVG. That's one thing you might do is if you are dealing with SVGs and you really want go down that path, because you understand vector and it's not that hard. You might have to educate the person you're working with. Or just ask them at the beginning, "Can I send you SVGs?" If they if they freak out, just send them PNGs, if they are not too sure about them and want a little bit more advice, there's a really cool article on CSS-tricks. What's his name? Forgot your name. Your name is Chris Coyer. That's it. CSS- tricks is a really cool site for anything with SVG. Okay, and this one here is pretty much how I got to speed. CSS- tricks.com, large SVG. This guy's a genius. Really well explained. I've given you the one video explanation. There's 32 videos. This is getting into the nitty gritty of SVG, if you want to go that far. All right, so that's going to be if for SVGs. If you're not too sure, make PNGs and SVGs and send them both over, it's really easy to do both. If you are doing your own stuff and you're using Dreamweaver, use SVGs. It's awesome and browsers keep up with it. If you're working with old-school stuff with old-school CMS's, you might have to just stick to PNGs. But just ask you a web developer what she wants first. 36. Exporting images and pictures from Illustrator 2017 for web: Alright, in this video we're going to look at exporting our images, things like photographs. Okay, and there's background graphic here, you can see we're going to end up in this export panel, and then we're going to end up with this lovely group of exported awesomeness. All right, let's get started. Okay, first up, what we need to do is, do we need to explore all three of these? We don't, because what's going to happen at web design phase is that, you're going to import this one image, this background image here and you are going to reuse it in all three sizes by scaling it rather than switching it out. There is a way of switching it out for every different image, but it makes your page load a long time and it means you've got lots of different CSS files and assets going on. Typically what happens is you import this one file and like we did in Illustrator, in web, we scale it down for the different sizes, for these different breakpoints, or the different screen sizes. What you do is you pick the largest one, because you want, however big it is going to get, you want to export that version, because that's going to be true of this background image on the desktop. That's as big as it's ever going to be and when you get down to say these guys though, we worked out through this tutorial though, actually, the guy on the mobile is actually scaled up a bit bigger than this guy. He's a small percentage bigger. We're going to export this background image from desktop. We'll export these guys from mobile, and then we'll look at the icons in the next one, because there's a slightly different process for doing icons and logos. First of all, we need to unlock our background layer and we need to open up this asset export panel. You can do it from Window and you can go to Asset Export. What we're going to do is we're going to zoom in a little bit, I'm going to select all three of these. I don't want to get this, but I just want all three of these guys. All I need to do is, select them all and hold them and drag them into this window here, we just click, hold, drag. That's going to export that image for me. I'm going to give it a name, because it's going to call it Asset 4 for the moment. Let's give it a good search engine name. Whenever you are naming files, give it some good search engine names. This is Daniel Scott. I'm using hyphens and not spaces. When you come to build this later on as a website developer or yourself will be annoyed of this use of spaces in then, because browsers don't like them, they like a full path. Daniel Scott portfolio. What kind of format? In this case, it's going to be a JPEG. Now, how to know which one to pick. When it comes to images, you only get to pick JPEGs and PNGs. You can't use this SVGs even though we just finished talking about it. That's good for icons and simple colors and logos, but not good for these images. When should I use a PNG and JPEG? Pretty much JPEG the whole time, if it's a flat rectangle image. If you need transparency, say you've been into Photoshop and you've masked things out and you want it to have a transparent behind it, then you're going to have to move to PNG. The problem with PNGs though, is that they include transparency, which is awesome, but they make the file size is a lot larger. We'll do a little comparison. We'll export this thing as a PNG, and we'll add another one, we'll add another scale and instead of scaling it up, we're just going to go back to the same size. It's going to be exactly times one, but we're going to do a JPEG version. How high in this JPEG one? It's up to you. Most of the time you can get away with a JPEG 50, but you can't adjust it in here to be any size you want, and think of this as the quality slider. If you move it up to a 100, it's going to be super perfect, but probably a really big file size. What we need to do is find a bit of a balance of quality versus size, and you'll find JPEG, especially this background image, it's not very clear anyway, because it's kind of washed into the background. If it was a picture of the thing I was selling, say I was trying to sell a Bentley, I would have it probably pretty high, about 80, just because I want that to be a beautiful image, as crystal clear as it can be probably above what I probably need it for. You can go lower than 50, no problem. What we'll do is we'll export both of these and we'll hit export. It's going to ask me where it's going to go and I'm going to put it into central exercise file so you can check these out. I'll make a file in there called, export images. I'm going to put them in there. Once I've done that, I'm going to go off and check them. Explore images, and you'll see the difference between these two. This is the PNG, and it's 450 kilobytes and this one here is a 120, so a lot smaller. Let's look at the quality versus the two. Don't worry about that gray changing in the background, we're more worried about the actual image itself and there is no difference. You might notice that it's hard to tell, because you're watching a video probably and, you are definitely watching a video, but the quality of may not be HD where you're watching it. We're using are low res-image with a watermark on it just so that I don't get in trouble giving you images that I've paid for. The quality is not perfect, because I've scaled that up because it's watermarked version. You can see the difference is because I don't need and I don't need transparency, I don't need a PNG. Since that image's done. What's really cool about it is you can see them in there, their kind of tethered. I decide that this top image, and maybe we select them at the top and we pick that green. Say you decide later on that the client likes a more of an orange one, you can see it's already there. I can click Export again and it goes off and updates them. Choose, replace. It makes it nice once you've done it once and the client comes back or the desert web developer comes back and says, can you change or adjust or can you give me another version? You don't have to go through and name them again. You can see they've all been exported again. I'm going to go back to my lovely color. Do you have to do them all separately? No way. I'm going to bin this PNG version, because I know I don't need it, and I'm going to go through and say I want this guy. Black arrow, grab this guy. Can you do them all in one big go?Probably. That's a ten. I'm going to go through and name them all. Maybe Taylor, you can speed this up for me, buddy. Alright. Now we're going to click Export, Choose, off it goes and Hopefully now, all of it's worked. The reason I didn't export them all is, because I had this one selected, because it was highlighted, I only exported him. I'm going to select all of them. Well, maybe just select None of them. I got nothing selected in there and nope, I need to select them all. I'm going to hold shift and select all of these guys, and make sure they're all selected and now go to export. Hit Choose, hit Replace, and nice. There's this guy in here that I'm going to get rid of, which is my PNG. I don't want him, but all of these guys have been exported. They've been appended with the minus 50, which just says that's the quality. I probably wouldn't do that, I probably can seize his suffix. I don't like that, I'm going to go in here and delete all these guys, and then go into this thing. It's like the first one, hold shift, grab the last one so they're all selected, and go to Export and choose, It's going to go export them all without that suffix at the end. Here's my graphics, they are all getting small enough. Alright, that's how you explore images. What I've just realized is I remember talking at the beginning, making sure export the largest one. I totally dismiss that. Don't worry, you can export these ones. My only trouble with that, is that I deleted at least four of these images, rather than the whole six. No big drama, I would go through and make these a bit bigger and maybe stick them off to the edge here just as placeholders so I can use them in this Export window. Alright. That's just done, now. Let's move on to exporting SVG, icons and logos. 37. Exporting logos and icons from Illustrator 2017 for UI: Hi. In this tutorial, we're going to look at exporting logos and icons from Illustrator for web or app use. When we're dealing with SVGs, we talked about it in an earlier video, it's super easy. You open up your Asset Export panel. You grab the things you want to be SVGs, like these some of these social icons here. Click them, drag them, double-click them, give them names. It's going to be called social Facebook. Make sure it says SVG down the bottom here because I want it to be a nice crisp SVG graphic. This one here, and you go through and keep adding all their names. That's it for exporting those. You click Export and you'll have a bunch of SVGs. Let's say though that you're exporting these and you're using PNGs, because you need the transparency. You don't want a JPEG. You want transparency so that this icon here, you can see around the edge of the circle there. PNGs is the way you're going. Now, this is something called pixel perfect. Now, it doesn't work on every single object, but what it does is, because a PNG is not vector, so it's not this crispy edge. It's actually made up of these little pixels, just like this image here. If I zoom in close enough, you can see this image is actually made up of all these little cubes, and that's how PNG is rendered. What we need to do is make sure when it is getting rendered, it's getting rendered as best as it can in those little pixels. I've got this little example graphics over here. What they are is, first of all, we need to go to View, and in Illustrator, you can fake pixels. It's not really changing the way your document works. It's just showing you a preview vision of pixels. If I zoom in now, can you start to see, when I'm in normal view, it's nice and crisp and vectory. But if it's going to be a PNG, it's going to look something like this. What happens is, if I've got any of these, say, this line, it's only one pixel wide, but I've positioned it so it straddles two pixels. Can you see? Goes either side of it, so it doesn't know which way to put it on, so it gives us murky blurriness, same with this L here, same with this guy here. What happens is, when I export it, it's going to be just a little bit fuzzy. That happens quite a bit from Illustrator. What we're going to do is we're going to select them and go right-click, and say Make Pixel Perfect. What it does, it actually moves the lines, so be careful. It's made it heats crispiness. As I've actually physically moved them, let's move them a little bit to the right, or half a pixel to the right, I can easily tell if it's going to be pixel perfect. See at the top here, the width is 92.5 pixels. You can't have a 0.5. They have to be whole numbers. You can manually do pixel perfect by doing that. You can see now the sides are nice, and if I do the top, 26, if I actually shrunk it down a little bit, but now it's not trying to straddle our pixel. It's definitely down the line now. Where'd it go? Here you go. This L here is the same. Fonts are a little bit weird. This one's not going to be too bad. Watch this, if I right-click them, Make Pixel Perfect, it actually looks better. It's actually trimmed the bottom of it up a little bit. Can you see? It used to be a bit fatter down the bottom. So be careful when using Pixel Perfect. Now, Pixel Perfect works great for horizontal and vertical lines, or most [inaudible] stuff anyway. But when you get to things like these types of shapes, there's no point messing around with Pixel Perfect. With these guys, watch this. If I go to Pixel Perfect, cannot do it. Just too many curves, can't work it out. Some of these ones have some straight lines. If I click on him and I go Make Pixel Perfect, I think it's made it worse. It's pushed them all over. There's just too many shapes going on. Pixel Perfect, great for really cube, straight lines, and fonts. So make sure they're Pixel Perfect before you drag them in to your Asset Panel for export as a PNG. What we're going to do is, just to finish off, is we'll add all of these guys, so I grab all three of these, there you go. Actually it's grouped them all together. That's not what I want. You're an F. You're an F. You're an F. I'll go and name them in a sec. What else needs to go? That's going to be typed in. These both need to go. What else needs to go? The arrow needs to go. Make sure when you're finished with Pixel Preview to turn it off. You don't need it on afterwards. Sometimes it's hard to grab these guys. You're going to zoom in. Here you go. What else? This guy here. Here's another way of doing it. Instead of trying to drag them in, just select at once, and there's one in here that says "Add the selected." You can see it just comes across. Awesome. We've got them all in there. Now, I want to select them off. I'm holding Shift and clicking them all. Because what I'm going to do is I'm going to make sure I'm okay for both options. I'm going to have SVG plus a PNG. We're going to scale them all. We're going to go to times one, PNG, so we're going to have both of these. Now, what I should do is go through and name these, before I export them. I'm going to go do that now. Taylor is going to speed this up with his magic editing. Go Taylor. Done. Now I'm going to hit Export and hopefully they're all going to export. So check it out. Go. I've got an arrow, two versions. I've got an SVG and a PNG. You can see the file sizes. The SVG is actually only just a tiny bit bigger, but the PNG here is just a little bit smaller. But this one here is that size, tiny, you just see it in there. The SVG though is scalable, massive. Same with the logo here. The logo is a lot bigger as a JPEG. Actually those are the wrong ones. What I want is, where a logo, SVG, two kilobytes, three. So no real big difference, except this one here is massive. Great. That's how you go through and export your PNGs and your SVGs if you were exporting icons and logos. 38. Retina HiDPI and responsive image export from Illustrator 2017: Hi there. In this video we're going to talk about what we do about retina, or high DPI, or responsive images, whatever you want to call it, it's all about quality of images. Now most of the time, we're at a point where there's no clear rules about what you should do, there's a couple of ways of doing it, and some people do it and some people don't. Most of the time people don't, what they do is they just give you an image and they scale it up and down for the different resolutions and just live with it. Because retina displays like my MacBook Pro in front of me and some of the Windows tablets and some of the new iPads, they have double the pixels, they have some amazing quality crammed into them. What mostly happens is people ignore it. It's sad, but true. People just forget about those guys, because they're such a small percentage, and there's a bit of work on the web design side to try and accommodate them all. Now saying that, if I was a big site, of course, I'm going to accommodate them. But quite often when I'm dealing with people with small to medium websites, people just don't worry about it. You can not worry about it and you'll have to get into it. We're going to talk about it now, but know that if you want to for your first website, it's okay, you get a whole post. You're allowed to just use standard definition images for this first one. But after you've done a couple and your web skills are getting better, you totally want to get into this. Especially if you're dealing with clients. Like for me, I'm teaching web designers and creatives things, so and you could argue that I should be doing high resolution stuff because a lot of people that are doing my courses have some kick-ass laptops, so they might be using MacBook Pros with latest screens and all that stuff. Let's talk about what people normally do. They just export a vision like we do here. I'm going to pin all of these. Well, our lovely work. I'm going to pin more just so we can start again. Let's say I'm exporting this for my website, I'm going to unlock my background layer, crop just this part and I'm going to drag it in. What mostly people do is that it's going to be a JPEG, and I'm going to give it the suffix. I don't like that there and it's going to be a scale of one. Let us just live with it. When it gets onto a screen that is really big or has really high resolution, like a retina display for Mac, it just scales and pixel it. It just does. It doesn't look too bad, but I can tell about 90 percent of the population can't tell that it's not being scaled. Often what I do is, say for something like this, this big graphic here, is I'll make it bigger than it needs to be, so I'll go down here and go to this 1.5. I've made it like it's not double the size. I could make a double, so it's actually twice the size of here so that it means when it seen on a retina that's really clear. The problem with that is that people that aren't, or say somebody on a mobile phone not dealing with this really big image being scaled right down for they're fine, but they're having to like load this really big file size. So often what I do as I cut it in the middle, I say I'm going to make it 1.5. Now, that's the cheap, cheesy, easy way and the way that I do it most of the time. So let's say that you're doing it proper, and let's pretend we're proper. What I'll do is I'll create a vision, that scale one. Then for the retina displays, I'll create a different vision. So add a scale and I'm going to make a thicker one that's times two. It just means that I'm going to go to JPEG. Am I going to append it? Yes, I'm going to have to append it. You could use the at times 2X. That works fine and that's really good when you're doing especially iOS development, which we'll cover in the next one. But normally when I do it, I just do times two. I have another version and it depends on how high you going to go. I only from getting serious, I really support retina, which is double the resolution. You can find lots of devices these days which have four times the resolution. This four is going to be huge. Then fine, you can support those big files. What you can do is when you're building your site, is that you can switch things out with media queries. It just means that can check what size the screen is and then display the right image for it. That is perfect and it works really well. It's a lot of extra work for quite a small percentage of your readership or your users. So that's one way of doing it and now I've got three versions. If I hit export now, I hit export. What is this guy called? Get him a proper name. So I'm going to give a new name. I'm going to call it background, that's exciting export. Let's get him in, let's have a look, background. I've got this first version and there's other version and then there's giant vision. You can see the sizes here. Once is at 1.1 megabytes, 1.2, and then one jumps up to 0.7. So quite large, so big, mess of even bigger. What happens is when you're building your website on the other side, what I mean by the other side is encode, it's not super hard to go through and create media queries to trigger these at different screen sizes. It just says with my browser is looking at this in a super retina screen check if it is, then download this image to load this image. It's a pain in the bum, but that's how people get around it. That's how you deal with retina. Often you don't need do two versions. You'll do a normal version and then at times two, and just switch it out in code. Now in saying that I don't, all I do is grab this guy, make it 1.5 right in the middle and I force everybody to look at the 1.5 version. That means that people using screens that aren't retina are stuck having to load a slightly bigger file size. The people that are on retina get a slightly bit of image. Nobody wins or everybody wins, depends how you look at it. So you can go through all these images and just upload them, drag them into here and I have two versions. Hopefully that helps you. Another thing is people sometimes call it high DPI in retina that the same thing. High DPI is what none Apple people have to call it. Retina is that a branded tune from Apple. So if you're calling it retina, you're in trouble. It has to be high DPI, because that's what they call that high resolution images. Now one other thing my little extracts at the end here is that, its 2017, a picture in a couple of years. If you're looking at this in 2019, you probably [inaudible] with yourself getting into these Dan, bad bad bad stuff. Things might have progressed than they might have been either big adoption of the at times two, or there might be some other way of doing it. So this one is the one that going check everything else solid. This one here, just check with your developer what they want. All right, if you remember nothing from this video, I've jumbled on a little bit here and is just leave it at times one, that's what everybody does and you won't be hit. If you do that, it just might not look as good on some screens. So just do one scale at the moment. All right, verbal diarrhea, over. Back to your videos. 39. Exporting your UI for App design using Illustrator 2017: This video is going to be more about exporting for app. Let's pretend we're not building a desktop and tablet version, we're just building a mobile app so we've built some icons to be used in here. It's very easy, let's say I want to export these two guys together, maybe separately. I'm going to ungroup them and you go in, drag the Kiwi. Actually we'll just use the Kiwi at the moment, you could drag all of these in one go. We just going to do this guy, so this guy is going to be called the Kiwi and what they're going to need is, let's get rid of all of this, is all you need to do is this iOS and Android. You're probably developing for both or maybe just for iOS or just for Android but let's say we're doing it for an Apple product and we were working with an Apple Developer and he needs iOS graphics. Click on iOS and what they do is they need a scale of one, two and three. So this size, double the size and three times the size to work with all the different sizes that they've got in terms of their screens. They're very strict on the naming conventions, we got to leave the suffix in there then we're going to click Export. We going to export it to this one here and we should find Kiwi in here. We've got the three versions that they're going to need, there's the standard png which is that one size then there is a png here at one scale then at times two and then at times three and those are the files that they're going to need. So that every graphic that you make you going to need full versions that probably just going to use these three but give them the SVG as well. If you're going to do the same stuff for Android, it's very similar. Get rid of these guys, click on Android, they just have a different naming convention and they have lots of different sizes for their apps. You can see there's even a smaller low dpi, medium dpi, high dpi, extra large high. It goes right up to xxx high dpi. So there's up to four scale, some of the LG phones have some huge big written screens. Click Export, same thing, we're going to have Kiwi. There is already Kiwi svg, but you'll be giving them these versions. These are the versions that will go for Android. You might be doing both or you might be doing just one or the other but that's what they're going to expect. Every graphic is going to have all this and it's going to have this explicit naming convention here and I know that Android, I think works slightly different, they end up in different folders, so that's something you might have to talk to your developer about how they want them and probably you can just give them this way and they'll split them into the folders that they need to go into. That's exploiting for app development and the one thing to think of, like we did in the previous tutorial is looking at pixel perfect especially if you got any of those horizontal and vertical lines. Mainly because we're using these pngs, these pixel versions. All right, that's it for that video, see you in the next one. 40. Exporting CSS for developers using Adobe Illustrator 2017: Hi there. In this video we're going to look at exploiting some of the code from Illustrator. Code. If you've never used code before, this is something that would be really helpful for the person building your site. If you're going to be building your site, this is going to be super helpful for you. What we'll do is we'll look at the different elements. We'll do a couple of them but the rules are the same for lots of it. What we're going to do is to start with this heading because it's the biggest and easiest. With it selected, go to Window and let's go to CSS Properties. The cool thing about this is that it's going to tell us lots of the CSS characters. I'm going to drag this property panel out. You see here, I just grabbed the top of the tab, the word there, so I can see it all. What it's going to tell me is it's going to tell me interesting stuff about these fonts. It's is going to tell me what font family it is, whether it's bold, what size it is, the color it is. This is the kind of stuff that a web designer would love. Because instead of you just giving them that PDF that we made earlier and saying, "Guess the font. Guess the size. Guess the color." They'll come back to say they build your site for you and you're like, "Jeez, what font is that? Who use Comic Sans?" They've used regular instead of bold and all that stuff that you've spent age trying to work out. It is going be 80 pixels or 81 pixels. You can actually tell them. What you can do is you can grab them, copy them, and start building up a spec sheet. You can say desktop, and this one here is going to be my, I know its called an h1, but you might just call it something like a heading. Delete anything you don't like in there or adjust it, but this is going to be my main heading. If you're a web designer, you'll know a few. You'd be able to give it things like class names or tag names, but it's up to you really. The cool thing about it is I'll have a desktop version, and what I'll do is I'll have a mobile version as well of the exact same thing. But over here, when I select it, can you see it is the different font sizes got everything here? Mobile is going to be this. It's the exact same. He knows that this is my heading one, our main heading. The difference is, Playfair, it's still bold but it's this size now. One thing to be aware of is that great, it's given me lots of the information but in Illustrator here, you can see, it's not giving me the text-align syntax. There's bit some pieces that it does, doesn't give you. It's great. It's also, it's missing a couple of little things, annoying, but that's okay. It saves the day for lots of having to pass things over to developer or just for yourself. I use this all the time myself. I'll fiddle around with the fonts in here and just come in and check. I won't probably build a document like this for myself. I'll probably just work step-by-step as I'm building the site to come into illustrator and just pull it out. But if you are sending to somebody else, and one of the things, say this box down here, you wouldn't export that as a graphic. This ready peachy box here. You wouldn't export it as a PNG graphic. It would be designed in code, in CSS, and would give it its height and width and color. You can see when you select those is there's no CSS generated. You got to give them names for some reason. You could do the long version and go into your layers panel, twill down your layers, and what happens is we've only got two layers, right? But within those layers, all those objects are listed out. What you can do with it is select it over here. Can you see this little search icon? It jumps down to this thing called a rectangle. We just give him a name. Instead of rectangle, we can call him, I don't know, call-to-action. Trying to use spaces. Call-to-action. I'm making it with hyphens. Now will give me a class name called call-to-action and the actual color for it. I don't like doing it that way. I like doing it, Because naming your classes in here as cool if you kind of know what you're doing, but I don't find it super helpful. Let's say it's this box here. Again, it's not going to give me my name until I go off and find it and give it a name. It's easier actually, just to go into your settings at the bottom of Generate CSS. Not that one. One of them is Export Options. That's it. The first icon. This one here says, "Generate CSS for unnamed objects." It just gives it cold st1 oh, st0. I'm going to copy this, and I'm going to pop this into my document. On desktop, this is going to be my, I don't know what I'm going to call it, because it's nothing. Black box. I'm going to name it in here. Yeah. Awesome. It's missing a few things though like I quite often need the height and width but I've decided in here. There's a few options in this first, kind of Export Options again that I like to include. There's one that says, "Include dimensions." I'm going to do that. Cool. It's included pixel dimensions there as well. Just give it a height and width. I find that's quite helpful. All right. Now use quick run your document and tell people how big things are. You can grab this green box in the background, give him the height and width and pixels. I have to unlock this layer here. There he goes. I know that this guy is a background width. It's mainly the height that I want to deal with. I want to make sure he's or she's got at the right height. Same with these buttons at the top, the right colors and the height and the width that I'm using, this logo. I could tell them the height and the width that I wanted. Yeah, just really quite helpful to pull the CSS out for yourself if you're going to go build it next. That's what we'll do in one of my next tutorials after this one. We'll go and build this in Dreamweaver. But, if you're working with a web developer or web designer, you can just hand them off kind of a spec sheet to give them a rough gauge. You don't have to list out every single thing and every single bit of margin, but, yeah, it could be really helpful. All right. That's how to export the CSS from Illustrator to work with your website. 41. Learning the language of UI user interaction design: All right. Now that we've created our first project to give it in Illustrator, you can now proudly call yourself a user interface designer. Are you the world's best UI designer? Probably not yet. The next steps is to get as much experience as you can. This can be done obviously, by doing your own projects and by reading and following other people that are awesome, a bit of borrowed experience. You need to go out, find out who the amazing people are, follow their work, learn from their experiences. All the while, you'll be learning and picking out words and phrases that you'll be able to use to communicate your UI projects when you are working on them. There's some really good places to get started. This one here in front of us at design.google.com is an amazing resource. This is my go-to for UI. It specifically targets more tablet and mobile, which is the cutting edge new stuff. Mobile web design is amazing and it's been around a long time, but a lot of the new language that you're going to have to learn is coming from these devices. Probably the biggest word to learn is material. Material is the word that we use to talk about how the design interacts with the person in a more indirective way than it ever has before. There's so many more features that a phone can do than say a website. This is the place to get started. Just start reading. There are so many well-curated and written articles on this site. It's pretty unbelievable, I love this site. So you just start working your way through it. This site has great articles. The resources are really cool. If I click on the resources here, material.io is Google's explanation of how this interaction works. The cool thing about it, it gives you the language you might use. I'm going to jump over to material.io. It just gives you a really nice way of, if you read it and start understanding it and working it out, that means when you start talking to your clients and working with your processes, it's going to give you that language that you need to be able to express what you mean and give it some credibility of why it should be done. Even just looking at the icons and some of these material components, just gives you icons and explains why. Even this is just a simple resource of icon that especially for things like apps we like, what the hell kind of icon should be used for, I don't know or is it an announcement. It's simple when you see it but somebody's slaved long and hard and it's been through a lot of apps so it's being communicated to people. That's an understand this is a language that already exists. You're not trying to reinvent the wheel. Same as Components One. There's some really nice documentation about how this works. See at Google's resources, its articles are amazing. Another one that I quite like is looking at Facebook's one. I've got one called Facebook.design. It's just their designers and they get to post things that they are interested in, articles they've written, what they're working on. I find this is a really cool resource for learning and following cool ideas and understanding how things work. Yeah, it's another cool site. Now let's go off, find the best UI designers you like. Follow them on Twitter, follow them on Facebook. Read these articles and it will really help you get more confidence when you start delivering your designs. You can be able to communicate those to your clients. All right. I'll see you in the next video. 42. How to get your first work as a UI designer: How do you get your first work as a UI designer? You've done the course, and you really came to get started, but how do you get work? There's two streams. If you are young, or ready for a complete career change, you're going to ditch being a baker, and now you're going to become a UI designer, or you are young and you're a student and you're looking to get into it is that direction is just starting as a junior UI designer. Find a job, any job. Because it's really hard to get into, so, just build a good portfolio, use the project we've made in this class, and build out a couple of other projects on your own, or for friends or colleagues and just get a job. Take any pay, take anything, and know that after about a year, you're going to learn a crazy amount from wherever you're working, and know that whatever job you take even if it's not the most fabulous job, it's going to give you that kind of experience you need for the second job. Hopefully that job blooms into this amazingness, but I found in my experience, everyone their first job, you get hired you get treated a bit badly, you don't have very good skills, and after a year or two you're actually starting to get pretty good but, the business never sees that person, that's why they treat them as the junior, and the pay rate stay quite low, and he gets a little crappy jobs. So you do that for a little while, and then you job jump. It's sucks but it's the way to get ahead. In web design is to find another agency, show them this is me now, I'm two years more experienced, this is all the stuff I've worked on. I've worked in an agency, so you know the language a bit more and you get a better job that way. That's one way to get started. Is just taking a job in the industry, and get going, but you'll need a portfolio to get started, so you'll need some projects that you've done, like this one in this course. The other trend is if you are say a designer, or working a creative agency, already you're running your own stuff, or you're just bored with the design that you're doing at the moment, that is going to be a little bit different. You're going to have to just take all work on the side probably and you might be like me if I change careers now, I'm 36 I've got kids, there's no mortgage to pay rent but there's responsibility. So what you're going to have to do is burn them in or out. Give yourself a year or two and say, I'm going to use every Monday evenings, Tuesday evenings, Wednesday evenings to work on a project. At the beginning can be just be your portfolio, get that away really quick, your own portfolios is the worse one takes forever, but then take on any work you can. It might be friends or family just to get that portfolio going, then you can start working on other side projects. Once you've got your experience going, you can start looking at stuff like these things like Upwork. You sign up for that or Freelancer.com or 99designs. Although that's not going to give you that clear breaking jump, because the pay is okay, and it's freelance stuff on the side, but it's building that portfolio for yourself and building that experience, so that when you do get to a point you like actually I'm pretty good at this now. I've done a few jobs, they're not paying huge amounts, they're like paid tuition. You don't have time to go off and do a year course, do these smaller job just for the smaller pays, just to build on and it's paid and learning, and then once you get to a point where you feel like, okay I've taken my design skills from another area and I've actually applied it here, I'm confident, I've got that the language, then you can make more of a jump into for another job. You need to start at a middle web level, you need to be earning 60 grand a year not starting at the band minimum. So you jump into that role as a middle web designer, and maybe way up there is not such a big a hit on the family, or it might be just you're building your business out as a graphic designer, you still don't freelance but you're getting more and more UI work. That's my advice anyway. That's my advice, all right, next video. 43. Next steps to becoming an amazing UI designer: Next steps after the course. Other things you can do is you might move into more of a UX approach to design. We've done all the UI design in Illustrator and to add a level of interactivity, you can look at something called Adobe XD or experience designer because we've got kind of flats at the moment. You can take those flats and make them clickable to jump to different pages, prototype and app through the actual phone. Adobe XD is a great next step for you, so check out my course it's called UI in web design using Adobe XD. Other tools or things you might use is Photoshop. Photoshop for web designers is another course that I've got. It's just, another feather in your cap in terms of being a UI designer. The other part you might go down is you might go down the whole web design process. Not just designing visuals but actually building the site out using HTML and CSS. Check out my Dreamweaver courses. There's a few different ones. These ones that are more design side and then there's one that's more coding sides. Check out those ones. Another option you might go down is the whole UX experience. We've talked about UI and briefly what UX is, and the difference between a user interface and user experience design but I've got a course completely on how to become a UX designer. Check that one out if you want to get into a bit more UX design or at least understand what it is. That's going to be it. Thanks for watching. I'm never sure what to do at the end of these, I just kind of mumble along. Mumble. Mumble. Bye now. 44. Next steps to becoming an amazing UI designer: All right. Now, it's time for next steps. What do I do now? Finished the course, I am getting started in UI. What can I do next? Now, you can stay as a UI designer and just keep practicing those skills. Get more work build a portfolio, just do the design side, staying on the illustrator side and supplying files and put the CSS to our web developer. But if you want to go a bit further, the next step would be to look at doing that web stuff yourself. To get started at its HTML and CSS, so that coding side, you can do it quite visually. I've got a course at during lever for Bootstrap, that keeps it quite visual using something like Dreamweaver and we don't get too heavy in the code so you can definitely do that as a web designer. All you might want to go on even further and to be a fully fledged front end web designing you really need to understand the code and there's another course I've got it's like coding for designers or coding your first website. That's it. I am going to check that one out and that uses Dreamweaver as well. That can be the next step you design it in Illustrator, build it in something like Dreamweaver. If you don't want to use Dreamweaver, that's fine. There's other programs you can start to learn to code in. Komodo is one. Wow, I can't think of the rest of them. Sublime, K2 is probably the most popular one in my circles at the moment. It's just another code into that, like Dreamweaver. What else can you do? You can build up your skills in another design program like Photoshop, I've got a course on how to build exactly what we've done here in Illustrator pretty much but doing that in Photoshop. You've got both tools to start using, you might find that if you're looking for work, they might lean on one or the other you can go to that as well. What else can you do? You can start using something like Muse maybe. You can design some stuff and use Muse to build the site. It's definitely no code. I've got a course om Muse as well. Of course on everything. Another thing you might consider is maybe taking your design skills, design it and illustrate it, and then maybe build out in WordPress. WordPress is probably the biggest CMS in the whole, entire into web. You can design them up in Illustrator and then build something called things in WordPress that might be a direction you'd go. You might just stay as a web designer. Plenty of people do and that's totally fine. I like both doing the design and the build, but you might just stay the design side. You might have other things you work on and you just do some design stuff as part of that. Probably the crowning glory, at least in my opinion at the moment, is taking you UI work and adding a level of research and testing to it, essentially becoming a UX designer. Go check out how to become a UX designer and that's another course that I've got. But it adds a level of that I love in terms of business understanding and its UI design is quite sought often now at UX design at the moment. Uses your skills from UI, but builds on that with other tools and other techniques and that is in crazy demand at the moment. Most people say, I want a UX-UI designer. There are some a little bit different, but UX could be a progression for units and it's paying really well at the moment. That might be the thing you go into. 45. Your first project: It is project time, homework time, professional development time, whatever you want to call it, this bit is super important. I promise you the people that I teach, I teach a lot of people. It's the people that do this like extra step because you've been following me step-by-step through this course which is amazing and you will get the ideas but it's not until you put them into your own practice, we have to think for yourself run into your own problems. So this little project I'm going to save it for you. The people that do this are the ones that are going to remember it. If you are serious, do this little project, seed into me. I'd love to see what you do, let's see some little tasks to do. We have written them down. You are going to be doing stuff for a client. It's a small cafe that's opened in your neighborhood. It's called Craft Espresso. What I'd like you to do is go to something like awards, awwwards.com. For inspiration, I want you to do a desktop, a tablet, and a mobile version for them and I want you to make the logo, I want you to use the pen tool or the shape build a tool to build some victor logo and put their name next to it. I'd like you to use colors for the logo and for the site. I want you to pick some stuff from Adobe color, color.adobe.com. Go check that out pick a color swatches that you're going to use, you can use your own but you might be new to color picking, so pick that. Next thing you need to do is, I want you to use two fonts and no more than two. You have to be precise and you're picking and I want you to pick them from Google fonts. So I want you to be able to download them and install them on your machine and be able to use them. Other things I want you to do is I want you to use images, cafes, and coffee shops and stuff. There should be some good quality, free commercial use. You still will be only studying so, it doesn't really matter but guys got freeimages.com. Get images wavy like take them yourself, go get from there if you want, carry it for your site. I want to see that done. I want to see you create at least one custom icon using the shape builder and pin tool as well. Some icon on the site and I want you to exploit all the stuff at the inland. Go through that process of exporting everything that is that victor shape, well pause or scalable, I want that to be an SVG. Anything sort of photographs that you're using, I want those to be jpegs and I want you to export some of the CSS as well, mainly the heating, any paragraph text and maybe you've got a call to action button. Things like that, I'd like text document. Then I'd like you to zip them all up and you can send them to me. There's a couple of different ways and you can post screenshots. Have everything is probably all that's necessary. Especially I want to see your designs. I want to see them, see how you doing, offering me advice and just keep me in the loop of what you're up to. That is your project, I want you to go through those lists and make sure you include all of that and build yourself a little thing that you can use for your portfolio. I'll see you in the next video. 46. Cheat sheet: All right, this is our cheat sheet. We're going to go through some of the bits we've covered in real quick, little bullet points and add some super extra fancy tips and tricks. Let's go do it. So you're trying to export your web graphics, some PNGs from Illustrator, but they're coming out a little milky, a little crusty around the edges. This cheat sheet tip will show you how to fix that. Let's go to View and let's go to this one that says Pixel preview. This is going to preview what it's going to look like as a PNG in pixels, and you can see, fuzzy. So let's select all of these guys and fix it by right clicking any of them, and going to one that says Make pixel perfect. Oh my goodness, look how crisp those are. That's how to fix them before you export them as PNGs. It'll align them to the pixel grid and you get perfectly crisp exports. So before you start working on any web project or UI design project, you're going to have to change your preferences to pixels because we can't use anything else online. So with nothing selected, I can go up to here were it says Preferences, or I can go down to Edit preferences on a PC or in case of my Mac here, it's under Illustrator preferences units. What we want to do is make sure that general is set to pixels, and the stroke is set to pixels, and type is set to pixels. Again, it's all you have lifelong training. It's all about pixels. Click "Okay," happy days. So you need 12 columns for your responsive web design grid. To do it in Illustrator, grab the rectangle tool, draw out a box that spins the whole width and then go to Object, get onto Path and let's go to Split into grid. It's changed the number of columns to 12. The gutters here I'm going to use are 30 to match bootstrap, I'm going to click "Ed guides," click "Okay." We're there. You can stop there if that works for you. Now if you right-click any of them, and go to Ungroup and select just these top ones here, they're just lines not actual guides. So I'm going to cut those, delete all the junk that's leftover. There's a bit of junk there and let's go to Edit, paste in place or paste in front, put it back where we got it then go to View, then go down to Guides and go to Make guides. Now the proper guides. So you're only using two fonts for your entire site, but you have to scroll through this entire list to try and find the font you were using over and over again. But where is it? There it is. I'm using playfair. I'm going to hit this little star button here, and that means now when I come in here and I say, "What fonts am I using," click this little star here, and it's just going to show me my favorites. There's my playfair. Makes it super easy to use. I'm going to go over here, click this, just playfair, happy days. So I'm ready to export my graphics to build a website. Now I'm going to go up to File, I'm going to go to Export, and then I'm going to go to don't do it. Save for web, don't use anymore. We're going to use this guy in here, window, and it's going to be the asset export panel, and all we need to do is select the graphic you want to export, click hold and just drag it in the middle here, give it a name, and decide the format. Do you need a sport retina? Easy. Click "Add scale," now I've got an option twice the size. I've got these little icons on the bottom. I'm going to drag these in, and I'm going to use, instead of PNG and JPEG, I'm going to pick the lovely, famous SVG for Scalable Vector Graphic, click "Export" and you're away. So you supply graphics to a developer and you spend a lot of time in Illustrator planning and designing, and you give it to them and they come back and nothing looks the same. What you can do to make sure this process is more streamlined, is give them some CSS. To do it in Illustrator, you select on the object that you want to get some CSS code from, go to window and then go down to CSS properties right there. You can copy this and paste it into an email and say, "Dear developer, make sure it's playfair, and it's bold and the size is right, and the color is exactly the way I picked it, nothing else." Or else, let's say something else like this orange box here, and you could see no CSS code was generated. So to get round that, there's a first little option down on the bottom here, export options that say, "Generate CSS for unnamed objects," and the other thing I like to turn on is include dimensions and voila, it's going to give me my size and height and color for my lovely little call to action button. There should be no excuses now that everything doesn't line up. Look right exactly how you've designed it in Illustrator. You need to share this project with somebody else in your team or another designer or just archive it. The problem is, is that you've used images that come from your library and off a network drive, there's fonts that the other person doesn't have. Don't worry, you can fix it all by going to File, go down to Package, make sure it's saved, tell it a place to go, and I'm going to hit "Package." Click "Okay," kick back, relax and on your desktop in a second, sure, package, I've got a useless bit of text, I have called my Illustrator file, I've got all of fonts that are being used and then the images that are being linked. Now I can zip this lot up and send it on to the next designer. Happy Days. Thank you Illustrator.