Fundamentals of Adobe Illustrator for Web Design: Getting Started with the Basics (I)

1. Getting Started in Illustrator: Hey, everybody. This is Ryan Clark. Welcome to the first project in the Adobe Illustrator for Web Design class. This first project should be really simple. We're just going to go through and we're going to create a new document, edit that document, look at our artboard, just get our bearings in the Illustrator and see a couple tools that will help us out with our workflow, couple of things that you can just ignore since we're not really using more of the centric features of Illustrator, and just get going and get comfortable. So, let's really start off. The first thing that we're going to do is create a new document. So, to create a new document, you're basically going to go up to the File menu and select New. Alternatively, you can just use command N to open this up. This is the new document panel. This is where you are going to configure your artboard and get everything set up for your website. There are a number of presets that you can choose from. Some of them are already set for web. 1280 by 800 is the closest to what we want to get to, not really mind that 80. So, I usually just go with 1,200 because it's a little bit easier to set up guides, which we'll get to later. You want to make sure that your units are set to pixels instead of inches or picas or any of the more print design centric units of measurement. As far as the advanced settings go, you want to make sure that you're in RGB. Everything we need to do is RGB because it's going to be viewed through a screen. Raster effects, kind of same idea. Since we're not going to print out any of this in real life, it doesn't need to be full print quality at 300 PPI. So, you can change that to screen and then as far as the preview mode, set that to pixel, so that all of our shapes that we create in later projects are super crisp and aligned. I'll explain that when we get to it. But let's go ahead and just name this new document. We'll get started. So, the document will pop up. You can see basically on the left-hand side over here, you have a really basic toolbar. These are where most of the tools are located. At the top in this area, you basically have a contextual set of options. Those options will change based on what tool you have selected. So, if you just have the direct select tool on like I did right now, you're going to get one set of options. If you say creating type and you've chosen some type, then you're going to have character drop-down, paragraph drop-down, other things like that. This comes in handy when you're actually working with individual elements on your page. Over here, we have a series of pallets. You'll see that as far as how using these pellets, you basically just click them to open them. You can click them again to close them. If there are some that you find that you use more often or never use, you can move them around, pull them out, and then get rid of them. It's actually incredibly easy to basically customize this sidebars to get just the tools that you really need in there. So, this is the general setup. This is the application itself. It's pretty simple. All right. So, now that we known our way around, we're going to go ahead and add some guides to our document. This is basically just going to give us a really simple layout or a grid that we can arrange our website elements with. It'll come in a little bit more handy when we start to use some of the alignment tools in later projects. But for now, we're going to start out with just a really solid baseline. So, we're going to use the ruler to start off with. You can use a ruler by either hitting command R or going up to View, Rulers, Show Rulers. This'll turn on the ruler. This lets you know exactly what pixel or what size your artboard is and lets you really get into the nitty-gritty of where your elements are being placed. So, we're going to go ahead and zoom in just a little bit. Since our document is set up to be 1,200 pixels wide, we know that our center line is going to be right here at 600. I want my website design to be about 800 pixels wide. That's just really arbitrary but just a really simple rule of thumb that I go off of. That means that we're going to need to commit 200 pixels from each of the sides. So, I'm going to go ahead and set one of these here at 200, and then over here at 1,000. So, now if we zoom out, you can see that we have just a really simple center line. We have our left margin, and we have our right margin all set up. That's really all you need to do as far as guides are concerned. There are a lot of different grid systems that exist. There's a ton that's been written about that. I'm going to post some of that in the project extra so that you guys can see that and link out to a couple articles. You can get as complicated as you really want to be. For something as simple as just a really quick one page site, all you really need is a really solid center line and then you're margin is set out there. So, now that we have that all set up, we can go ahead and we can do one last thing which is to quickly edit our artboard. So, say that you're working on a project and you realize that your artboard is actually too small. The one we've created is four by three. So, it's going to be constrained based on how long our site goes especially if it's a one-page site, like typical one-page landing sites that go on forever and ever and ever. So, if you need to add more space to your artboard, you can basically come down here to the Artboard tool or Shift+O. Go ahead and click that and it'll set you into this artboard mode. In this artboard mode, up here you'll see the width and height of your artboard. It's really easy to change. So, say we want it to actually be 2,000 pixels, you go and pick 2,000 pixels and all of a sudden, you're now 2,000 pixels tall. Say, one thing to note about this tool is that this icon right here is basically determining where all of your pixels are coming from. So, if we want the pixels to be added to the bottom of the artboard, then we need to put it up here so that the reference point is the top. That'll basically lock everything to the top and add content underneath it. Same thing with the bottom, if we're working with the footer or something like that and we want to add space above it, then we would reference this to the bottom, and then when we add our pixels they would be above whatever elements were already on our artboard. That's actually really it for the first project. Now that we have an artboard, we have a working document, we're going to go ahead and in the next project start working with shapes in Illustrator. Thanks. 2. Creating and Editing Shapes: Hey everybody, this is Ryan Carter again, and we are going to start our project on shapes. Shapes are really the core of illustrator and allow you to create your web design elements with great ease, and to manage them, and group them, and align them incredibly simply. I think that really at its core is the biggest reason to use Illustrator for web design is just how easy it is to deal with all these elements. So, what we're going to do is basically start off learning how to create some shapes and then how to edit those shapes, then how to move them around, scale, rotate, all of the kinds of things that you can do to make sort of all of the different little bits and pieces of your website design. So, first let's basically start off with the, let's start off at the Rectangle tool. You'll notice that over here we have the Rectangle tool. If you hold it down, you can select all of these different types of shapes to make. You can create shapes in two different ways. You can either click and drag to create a shape, or you can double-click which will give you an input box where you can type in specific dimensions, if you know exactly how big the shape needs to be. You'll notice that if you click and drag to create a shape that you can create any sort of proportion, it's totally fluid, you can make any sort of shape you want. If you hold down shift, what happens is the sides remain in perfect proportion to one another, which is how you can create perfect squares, perfect circles, anything where the sides are all aligned. You can edit shapes in one of two ways. You can either use the bounding box that is provided by illustrator to change, drag, move, shape, sort of move around the sides, click and drag, change it like that, or you can change individual elements of a shape using the direct selection tool. The direct selection tool is this guy right here, it's the little white cursor. So, whereas the selection tool grabbed this entire shape as a whole, this tool is going to select single points or lines. So this is going to allow you to drag individual elements of that shape around, and this is how you're going to create some complex shapes. Let's go ahead and delete these shapes and then we'll move on to editing these a little bit more. So, aside from editing and creating shapes, you can also edit them using a couple of built-in tools, and I'm going to show you just a couple of the ones that I use most often. So, the first one is the rotate tool, and the rotate tool is right here, you can also just hit R to select it. What it's going to allow you to do is to spin a shape around, and get kind of dizzy doing it. The cool thing about this is that if you hold down shift, then it's going to lock this into 45-degree kind of like points of rotations so that you know that if you have a perfect square and you want it to be a perfect diamond, then you know you're just going to want to rotate it by 45 degrees. This comes in super handy for making little points on things, little nubbins, little arrows, triangles, all of that. To create a triangle like that, you just rotate a square, delete one of the points, then you can use your pen tool to come in here and connect them again, then you have a triangle. So we'll go ahead and delete this kind of move on to scaling. So, scaling is one of the other useful tools for editing shapes. It's right here, the scale tool, I usually get to just by using the hotkey S. So what this is going to do is allow us to increase or decrease the size of this shape by magnitude of scale, and holding down shift like the other tools, is going to lock down the proportions and allow us to make sure that although it's getting bigger, we're not losing its original sort of shaper proportions. There, super useful tool. So that's going to help us make things bigger or smaller when we're really kind of tinkering with designs, sort of like make the logo bigger, it's how we're going to do it. But we never want to do that, I want to make it smaller. So these are basically the core ways that we're going to edit shapes, we're going to move things around. One of the other things that's really useful in Illustrator is the idea of copying shapes. So let's go ahead and delete this and then we're going to work on moving things around and copying and pasting. So, sometimes your element is not in the right place. Obviously, you need to place it. You can either drag things around using the Select tool like I am right now moving it around, or if you want, you can hold down the Shift tool while you drag, and that is going to only move your shape around a horizontal or vertical axis or a diagonal axis, and this is really really useful for moving things around when we might need to go just a little bit to the side or just a little bit down. We don't want to lose where we're aligned vertically or horizontally, but we just need to kind of finesse something into place, super-useful. Another really useful tool is just using the arrows, which can move things all around and then also holding down Shift while moving the arrows, will move things 10 pixels at a time, which is nice to just kind of nudge things when you're eyeing something as far as how to position it. Aside from moving things, we also, you know from time to time, we are going to want to copy shapes or repeat shapes over and over and over again for elements that are really similar. So the easiest way to do that is by in the edit using copy and paste. So shortcut keys is just Command C, Command V, that's going to copy an element and place it somewhere else on the art board, usually pretty close. We also can copy something and place it directly in the same spot, kind of on top of the other element using Command F, that also comes in really handy from time to time. One of the other super useful shortcuts is the ability to drag and copy at the same time. So, as you can see, I've got this nice little circle, and I showed you before that you can hold down shift and move it around, and it's going to move it on this baseline. Well, if I hold down shift and also hit down the option key, you can see that the cursor changes to the copy cursor, and what that is going to do is copy this element right here or over here, and make a perfect copy of that in the new place where I've told it to go. This is the absolute fastest way to copy elements and I use it all the time. Now, the downside of copying elements like this is that they're not always evenly spaced, and that is an issue, because we want things to be evenly spaced and super beautiful. So luckily, Illustrator has solved this problem for us with one of my favorite panels in this entire thing, and it is the Align panel. So we're going to go down here to Align, you may have it in your tool panel already. What this does is it takes multiple shapes and aligns them in certain ways. You can play around with these kind of a little bit just to see how they work. I'll show you a couple of the most useful ones. Usually a lot of times what happens is we have multiple elements and we're going to need to lock them or to sort of like to all left align them to the same line, and that's to this right here. It's going horizontally align them all to the left, which is going to move them. Now, a better example is to use shapes that are all the same size. Let me go ahead and make some of these. Awesome. So, now you can see. We've got these shapes, they're a little off. If we wanted to say, "Take all of these elements and center them all together in one center line, then we could use this horizontal align center." Same thing with aligning them to the right and also aligning them to the left. Now, an even cooler tool that's in this panel is the distribution. So, what this is perfect for is something where I have three elements and I want them to have perfect spacing in between, each other. So, you can see that I've got three circles. This one has a little bit of space, this one has a lot of space. As far as my design, I want these to be even, I want them to be perfect. So, what I'm going to do is, I'm going to grab all three of these and I'm going to use the distribute objects. What this is going to do is it's going to distribute those objects at perfect intervals so that they're all exactly the same spacing apart. I use this an absolute ton. It's perfect for when you have a design that has say, four testimonials or for icons that you need to align those in a way where they all look evenly spaced. This is the tool to do that and it is super helpful. So, that's basically it for creating, editing, aligning shapes. What we're going to do now is move on to a little bit more complex shapes dealing with compound shapes and with groups. So, creating simple shapes and aligning them is pretty easy. Where we get into a little bit more complex situations is when we have lots of shapes, lots of graphics, lots of elements that we need to all interact with each other in certain ways. So, let's go ahead and create a couple scenarios and show you guys how to deal with lots of shapes that are together. So, one of the first things that you'll notice is that when I create a new shape it always sits on top of the shape that I created first. Now, this is useful if you always want that shaped to be on top, but sometimes I don't. So, Illustrator has basically a quick little tool that lets you position an element in relation to all of the other elements around it. All of that is managed with the arrange menu. So, in the arrange menu, we have bring to front, bring forwards, send backwards, send to back. What these basically do is this allows you to change where an element sits as far as depth in relation to all of the elements around it. There are also short keys so that you can send it all the way to the back, send it all the way to the front, you can move it down just one. This is really easy. This is how you'll be able to push elements in front of and behind other elements that are around it. So, say that I created this beautiful shape but I wanted to move it all around together. The easy way to keep all of those elements together is to basically create a group. So, what you can basically do is go up here to object and you can use the Group tool, or also just Command G. So, what this is going to do is, it is going to take all of these elements, it's going to combine them into one group so that when I select one of them, I'm going to select all of them. When I move one of them, I'm going to move all of them. This is really, really useful when you have really complex groups of elements that you've created or icons, and inside containers and you want to move it all around without moving around individual elements of something. Aside from grouping elements together, we can also combine elements together into complex shapes. So, say that I wanted to create a talk bubble. I can do that using a rectangle and a perfect square. So, I'm going to take the perfect square. I'm going to rotate this sideways. I'm going to move this down here. Say that I had placed it wildly and I wanted it to be perfectly centered, I could really do that simply with the alignment tool that we showed before. Grab those and line them together. If I want this to be a little bit smaller, I'm going to move that up there. Obviously, this overall shape is right but we have a problem if this is two shapes. So, in order to change that, we can basically go over to the Pathfinder and use the Shape Modes panel. Shape Modes is pretty helpful when you want to make complex shapes with things. The Pathfinder is down here. You probably won't use these a ton, but you will definitely use this Unite tool all the time. So, clicking Unite basically takes those two shapes and it combines them into one complex shape that I can then move around, and instead of being too totally combined and make the talk bubble that I wanted to make. So, that's just like a simple quick run-through, as far as how to create more complex shapes, how to deal with lots of shapes that are together. So, you might be saying to yourself, "Brian, how do all these things go together? Why did you just blow through all of that super-quick?" Well, I'll go ahead and show you guys how all of this works together to create a simple website design. So, let's go ahead and delete these and move back over to our project file. So, what I wanted to do is basically walk you guys through, how I would create the general shapes that make up a prototypical landing page homepage. So, let's walk through that together. So, we're going to start off with a header area. I don't want to get super complicated right now, I just want to denote that header area by making a big rectangle. I'm going to change this around. You guys can see we'll get into colors a lot more later, but just for now we're going to go ahead and make this gray, move on. So, right now I'm going to nudge this into position so that it's looks really nice and aligns really nice. I'm going to focus on this section down here. So, I would like to make a testimonials area. As part of that testimonials area, I want to create a shape that is a screen grab of someone's website with a little talk bubble that has like an avatar inside of it. So, to do that, we can combine a bunch of the different shape tool. So, I'm going to start off with the rounded rectangle. I'm going to make rounded rectangle belt like that. That's a little bit too big. So, we're going to move this over. I want this to fit three wide. So, go ahead and do something like that. Cool. That should definitely work. All right. Go ahead and align that over here with my rule like that. Now, these avatars. I want sort of a circle avatar. I think it would be cool to have maybe a little bubble pop out of the bottom a little bit, to make a little bit more of a complex shape. Let's try that. To make sure these things are totally lined up, I'm going to use my line tool, strong line tool. Yeah, those guys are all lined up together pretty perfect. Move that up just a tad. Move this up just a tad. I'm going to go ahead and unite these two together. That's cool. We got this little guy but I've just got one. So, I'm going to move this around. I'm going to grab these. I'm going to group them together so that I can move them with each other, and I'm going to use that move and copy command like I showed you guys before. I'm going to move one all the way over here to the right. Then I'm going to move one into the center. You can see that these are not evenly spaced. So, then I'm going to grab all three of them. Go back over to the align tool and use this horizontal distribute center. Now, I have three elements of my little testimonials area, and all three of those elements are perfectly arranged with one another. That's just have a really quick tutorial that shows, how you can use the shapes to design little complex elements and place them around your design really simply. 3. Typography and Color: In this installment of the class we're going to talk about type and colors, and I think I'm actually going to do this in the context of this site that we were working on before from project two. Type is awesome in illustrator. I think the illustrator handles type incredibly well. I think it handles it better than it does in Photoshop. I think it's really one of the strengths of the program, since so much of a web design is type. I think that having a tool that that manages it well is incredibly useful, and I was always banging my head against the wall trying to get Photoshop to do the stuff that I really wanted it to. So, let's first talk about how we create type in Illustrator. First off, we use the type tool. You see out here real quick. It's over here. You can use the hot key T, to get to it. Clicking, will give you a, an area or give you a cursor to then type your type. So, then we can, "This is a headline." This headline is bold, ugly, and I would like to change it to something else. So, you can see up here we have some really quick presets for your character. This is the font family. This is the specific font style, size, paragraph. This is really all that you're generally going to need unless you're dealing with full on paragraphs and things, but if you need to make individual adjustments you can click over here to the character panel. This is where you're going to get all of your character elements. There's size, line height, scaling, which never ever, ever, ever, ever, use type scaling because it will skew your fonts, and it will be super ugly, and this is the kerning, if you want to kern stuff out. All of that is probably covered in other classes. This is right down here underneath that is the paragraph. This is where you're going to see all of your alignment options, justification, space above, space below, this is when you're really going to be dealing with tons of type. You may need this for some projects, you may not. One other things to definitely take note of is the hyphenate. So, automatic hyphenation is awesome when you're working on a book or something that you're going to print out, but it's not awesome when you're working with websites because websites do not hyphenate words. Most browsers don't have anything really built in, most websites don't automatically hyphenate things when they get too long. So, in order to see the real rag of your type, and have a really accurate representation of what a visitor is going to see. You want to make sure that that hyphenate is off. So, first off I do want to make a headline for our website just my general website. Okay. So, first off I'm going to deal with my headline. I'm going to change the font up here to museo sans, which is what we use. Go ahead and change this like the nine hundreds, nice and big. This is a headline. A big awesome headline. You'll notice that you can use the same scaling tools, and editing tools, and selection tools as we went over in the shapes tutorial. For the most part, your line of text is treated as a shape. You want to make sure that when you're scaling it, that you're not scaling it by just clicking and dragging, because that's going to really skew your type. You want to make sure that you're always holding down shift to make sure that the proportion of the type stays the same. So. I'm going to go ahead, and build a little centered headline. Let's see. Okay, so now that we have our headline, let's go ahead and maybe make us some subtext. So, let's do that. So, we're going to use the type tool. If I click the type tool just like I did before and copy in say a whole bunch of lorem ipsum, it's going to be a problem, because the normal type tool all by itself doesn't have any container. So, we're going to go ahead, and delete that. What we want to do is use the type tool and click and drag to define a bounding box for our type. So, once we've defined that bounding box clicking inside of it is going to keep all of the type inside there. So, I'm going to hit command A to grab everything. Obviously, I don't want all of this copy to be 48 points high, nor do I want it to be super bold. So, we're going to move it to 500. So, that it's nice and readable. No one in their right mind wants to read that much right at the top of a websites, first it's going to fake it to be about this big. You'll notice that you can change the bounding box. If something doesn't fit inside the bounding box you're going to see this little red plus, to denote that there's more type that doesn't fit. So, you can basically change this and move it around. This is going to give us just a super simple headline and sub-copy. Now, say that our lines were maybe a little bit close together, maybe we want to push them a little bit further apart. That's where something like the line height is going to come in handy. As a general rule of thumb I usually like to keep things about one point five times the size of the font size, but for something where, where it's a little bit bigger maybe it's sub-copy, headline copy. I like to keep it tight, so maybe 30. 30 is a little bit better than 28. Just give it a little bit of breathing room. So, you can see if we zoom out. We now have a really nice headline. Up there, keep our sub-type, up there. Let's move down to these testimonials. So, I want to create just a really nice type style for these testimonials. Say that I want to do a couple things, what the person said, maybe where they were from, who they are. That sounds like a great testimony. So, we're going to take all these, make it just normal body copy size say 12, maybe bump it down to the 300 size. Obviously, this is the letting here is way too much. We want to bump that down to 18, take all of these. Obviously, we don't really want them centered either, it sits a little funny down there, so we're going to take this. Come up here to the alignment. Left align it, I think maybe a little bit bigger, that seems small. 14, 21. Bot-a-thing-bot-a-boom, here we go. So, let's cut this off so they are not incredibly long. Now, what we can do is come down here and say these were made by some guy. Want the some guy to stand out a little bit. I'm going to go ahead and make this 900, and maybe he is like me. He's from Dayton Ohio. I don't want that to be super bold either, so I'm going to push that back to 500, and maybe bump it down in size just so that it's not a super in your face. You can also do some, some cool things up here. If you look in the drop down tool. You can make things all caps, which is great, if you're going to want something to always be in all caps. You can also do some other options. A little bit of a more complicated, superscripts, subscript, you might want small caps. Usually, all caps is the one that I use most often. So, that's up there. Okay. So, now that we have this we're going to want to maybe change it around a little bit. I don't really want it to flow all the way that far. For the sake of maybe making things not so ugly, I'm going to just cut that word off a little bit, but so much like our shapes that we created earlier you can use the same tools to basically make sure that that these are spaced out evenly with the rest of the type. So, we want these to the left align to the blocks of graphics above it. So, I'm going to take all of these elements, and I'm going to use my aligned tools for sure up here, and then move around, and align them a little bit, and this is going to create a really nice testimonial area down here. So, now that we have some content stuffed in, how do we make it look cool, because I would like my website to actually use some colors. Colors are important and colors are also, are really awesome in Illustrator, and one of the reasons why I love using this program. So, the color palette is really where you're going to be doing most of your work. Changing your colors, tinkering with them, to make sure that they're absolutely perfect. The one thing that I do want to point out that's going to be super helpful for later is this hex tool right here. Now, this tool, RGB typical colors anything on a screen is an RGB value. So, that's going to be the easiest way to just figure out what colors you want to use, but when you take that color you can't usually give a developer an RGB color, unless they're using some extra complicated CSS 3 RGBA values. So, what you're going to want to rely on is the hex value. The hex value is what the browser uses to figure out what that color is. So, let's actually start colorizing some of these. So, what if I want this top area to be blue. Let's go ahead and pick a really nice blue. I'll use the blue that's closest to my heart, 0093da. That is very blue. So, we've got a big nice blue header area. Maybe I want the headline to pop off and be white instead. Maybe I want this to be more of a sleigh instead of it's classic black. So, you can move and drag these elements around to change colors to find the ones that you like. Now, the real problem is what if I want to use those colors over, and over, and over again? Well, the answer's pretty simple. You can click any shape, and grab its color, and click and drag, and add it to the swatches. Now, what this is going to do, is this is going to save that color, so that we can reference it, and use it over, and over, and over again. So, I want to save this sleigh, and I also want to save this blue. Now, you noticed last time I grabbed it from here. You can also grab it from over here, and pull it over there as well. So, that's going to be really helpful to create a palette that you use over, and over, and over, again to make sure that the colors they you're using are all exactly the same. If this gets a little bit too cluttered over here, which sometimes it does you can go down here and just select all unused. That's going to grab every swatch that you're not using. And then you can drag swatches down to the trash can to delete them. So, this is basically just going to give us black and white and the two colors that we've defined as our colors for our design. So, I'm going to move down here and I'm going to do the same thing with these. I'm going to grab these guys. I'm going to make them this sleety color. Now when I grab an entire block of text it's actually going to colorized everything inside of it. If there is a specific element of the text that you want to be a certain color, then you can come in with your type tool, and select just that, and then go up and denote what color you think it should be instead. So, I'm going to go ahead and make these blue, maybe I don't want that to stand out so much, so I'm going to maybe make it a little bit lighter gray. So, hopefully all of that gives you a handle on how to you use colors and type to add a lot of personality and get some real content into your site designs. 4. Adding Styles & Effects: Hello again, and welcome to the fourth project in this class. This project is all about style and adding style to the various elements of your website. So, in order to illustrate all of these points, we're going to start off by just making a really nice button at the top of our website to kind of give everyone a general call to action. So I'm going to go ahead and start just with a basic square. I'm going to create it up here, move it into the center so that it sits really nicely. So I think I'm going to pick something, let's just go ahead with our slate. Just so that it's nice and heavy. We'll give this button a label that just says, "Do something awesome," Let's make it white so that it stands off and we'll just center alignments as well. Awesome. So now we've got our button sitting here but it doesn't look that great. So, let's start off by giving it a border. So, boarders are right here, it's technically called a stroke. You can colorize your stroke just like you would any normal shape using this color palette up here. So, I'm going to go ahead and just make it white for now. To actually change the way that the stroke looks, to add any sort of extra elements, you can come up here, the most important part of this is basically the weight where you can sort of change the way that your border works, how thick it is, and how it surrounds the object that it's on. So you can either align that border to the middle, you can align it to the inside, or you can align it to the outside. But you can see because I have a square shape, the points of all of my borders are square. One thing I can do is basically choose this corner tool to go in and tell illustrator that I don't want these elements to have a super, super sharp corner point, I want them to be a little bit rounded. That works really well, and just gives some of your more square elements a little bit softer feel. I really don't want this to be white because it stands off a little bit too much. So, I'm going to go maybe select a custom color. Let's go ahead and choose the background color and then, maybe I want it to be a little bit darker than the background. Yeah, that's nice. So let's go ahead and add a gradient to our buttons just to make it stand off a little bit. We're going to go to the gradient toolbar, we're going to select the button that we want to give a little bit of depth to. We're going to select the type of gradient that we want, we're going to use a linear gradient, so that it's a negative 90, so that's just nice and goes up and down. You can basically take these colors and drag them down into your element to change the different colors that make up your gradient, what color it's transitioning into. You can create multiple steps in-between by clicking other points along this gradient, and you can click them and drag them out to eliminate them, that looks nice. It's just a really simple gradient to give that button a little bit of depth so that people that visit your site are definitely going to want to click that thing. Now, aside from adding gradients to things, you can also use a bevy of layer styles and effects that will help you edit your shapes and give them a little bit of added style. So let's explore a couple of those. One of the ones that I use most often is actually border radius. So you can see that we've got a simple square button. But, I personally love a nice rounded corner button. So, I'm going to go up here to affect stylized round corners. Now this is going to give me a little dialog box that asks me, how rounded I want those to be. You can go ahead and preview those just by clicking this little preview button right here. I usually do somewhere around five pixels, that's what usually feels nice to me. So now we've got some rounded corners on our button, let's explore some of the other effects that will help us add some depth. We're going to go down here to the testimonials area to really try this out. So, I'm going to take all these shapes, let's go ahead and make them white. I want to make them stand off of the page a little bit. So, in order to do that, I'm going to use all of them. I'm going to use the outer glow. Now, I prefer outer glow to drop shadows just because it's a little bit easier to manage, and because with outer glows the glow is even and starts in the center of a shape instead of looking like it has directional light. So, to me this is the preferable way to add a little bit of glow to the outside. So, I want to go ahead and change the mode to multiply, that's going to give us a nice glow all the way around. I don't usually like that to be super dark, so I usually go down to somewhere around 25 or 15, maybe tighten the blurring a little bit. I really want it to be subtle, so I'm going to go ahead and do that, then take that off. Then you can see that just by adding that little bit of glow to the outside of these elements, they really starts to pop off the page a little bit, and that's a super easy way to give a minimal depth without blowing things out too far. If you add these effects to things, you can always edit them super easily later by using the appearances panel over here. So what the appearance panel does is, it tells you everything about a shape and what's being applied to it. So you can see that there's no stroke, it has a white fill, it has an outer glow, it has default opacity. You can sort of preview these things by turning them off and on, you can also double-click on an effect to quickly edit them and change them around. Maybe this was a little bit lighter and I wanted it to be darker, so I could go in and immediately adjust that. You can also take all of the effects and just delete them completely by grabbing them and moving them down here to the trash. That will revert things back to what they were before they had any styles applied to them. So that's the quick run-through of layer styles, gradients, borders, and just how you can embellish your elements to make them look more interactive and give them a little bit more depth. 5. Adding Images: So, with the last four projects we've gone over, how to set up your document, how to create shapes, and how to create the elements of your web site design, but this leaves out one of the biggest pieces of web design and that's images. So, this project is going to be about how to import images into your document, manage images, and just use them generally. The first thing we're going to go over is how to actually get images into your document. So, the easiest way to grab images and pull them into your document is actually just to drag them in into your document. I've done that with a couple images over here that we're going to use in the tutorial and this should also be in the illustrator file that I provide later, but that's really the easiest way to toss stuff in here. The other way that you can do it is to come up here to the Place command, and you'll be able to grab, and select an image from anywhere else on your computer, and this will just place it inside your document. So, once you have an image that you want to use like I'm going to use this greyed out coffee shop as just a general background for my header area. So, I'm going to scale it up a little bit, so that it fits. I'm going to use the command to push it to the back. So, that's all the way in the back and then I'm going to use a super cool tool called a clipping mask. What a clipping mask basically does is, it takes a large illustration image, anything that's really big, and uses another shape to basically clip it into that master shape. So, the simplest way to do that is basically just have two boxes. I'm going to go ahead and do this with the header. So, you basically do this by grabbing the two shapes. Make sure that the shape that you want to clip is behind the shape that you want to actually be the mask. We're going to go up here to Object, Clipping Mask, and Make. Now, you can see what this did. It took that entire big image, clipped it down to the size of that header shape that I had created earlier. So, what you can do to actually edit that is you can use the direct select tool, that will allow you to grab the element itself, and you can do things like colorize it. But right now, it has that this image sitting inside of it. So, I want a little bit of that blue to show through. So, I'm actually going to use the direct select tool, to select this image, and then I'm going to come up here, and maybe change the opacity down. Let's just go with maybe something like 30, that looks a little bit better. They can see it ghosted back there a little bit, just give it a little bit of personality. So, you can see clipping masks in something maybe a little bit more complicated down here. So, I am going to take some of my favorite co-workers and turn them into the avatars. So first, just like before, somebody go ahead and send this to the back. I'm going to take this shape since it's part of a group. I'm going to go ahead and ungroup it, so that it can be all by itself. Then, I'm going to use it as a mask, and you can see that it takes that, and you can even use it for compound shapes as well, which I think is really cool. So I wanna do that with, all the rest of these guys. Stick him, send to the back, group that let's just [inaudible] it. Now you can see that I'm using the direct select tool, and I can actually move this image around to just kind of place everything where I want it, I can scale that image back there, use the arrow tools to really position that, where I think it should go and where it really looks the best. You don't have to do all of the editing before you get things into the clipping masks. So, now we have three cool dudes, chilling in our testimonials section. They are all some guys, and they said some things that's nice about, whatever my fake little web site is. I'm going to go ahead and actually illustrate another cool thing about clipping mask, and that's that you can actually clip masks inside of a masks. You can do all of the clipping that you want, you can see that this is actually a clipping mask too. It's just an interface that's been clipped inside of this, really nice little rounded square. What I'm going to do is actually, use this same container up here to actually put that in the header as well. So, you see I'm going to grab this bounding box, from my coffee shop image. I'm going to copy that, and then actually paste it in place, and you can see that it pastes it right where it was before. Then I'm going to use this shape as the clipping mask for my interface. Now I can actually take this and I can move it around as far as the depth is concerned as well. Then if I want to, I can do other things like, coming in here to move this up a little bit. It has a nice little border at the bottom, I'm going to maybe, I can double click into here to actually edit what's inside of a clipping mask. This will just let me deal with what's inside of that one clipping mask, and I can sort of take this maybe, I don't want it to be up so high to really get in the waste. So, I'm going to move that down, or maybe make my button a little bit less enormous because it's pretty big. Let's take that here,over the course of designing your website, you're going to end up with a lot of images in here, and it's easy to lose track of them. The really nice things that illustrator has built into it is a Links panel. You can see right here, I'm just going to drag it over here. This tells you all of the images, that are linked inside of your document. Now, there's two types of images inside an illustrator document. There's embedded images and there is linked images. Embedded images are great because they are actually embedded into your document. But that's also kind of their downfall, because the more embedded images instead of a document the larger that document file size gets. If you want to keep your file size small, then you can just link to external images like we did with our coffee shop image using the place tool. That will show just as an image, whereas embedded images, images that are placed directly into our document, show with this little embedded tool. Another cool little thing about this panel, is that it has a real link button and also a go to link button. The go to link button, will actually let you select an image and it'll take you directly to where that image is inside your document, and select it for you. Really helpful if you have tons of images, and you're trying to switch out say one of them and you just want to find where it is real quick. That's really kind of the gist of how images work in illustrator, and how you can add them to your document, to make things a little bit more personal. So, now that we have kind of those images in there, let's quickly just flesh out the rest of this Website design and I'll kind of show you guys how I do things as I go along. So, our headline area is pretty much set. We've got a nice big headline, some sort of subtype, and generally, you're going to have some explanation stuff up there whenever, call to action, cool graphics, got a little testimonial area. I'm going to go ahead and create a little rule to basically section this off from the rest of it. Instead of being white, I would like that to probably make that kind of our sleety color. No, way too dark. Let's make that this really light gray. Done. That looks awesome. So, I really like these boxes, so I'm going to use these boxes again for maybe a little area down here that calls out a couple of say your features of my app that I'm building. I was going to use this type again because it's just lorem ipsum. Can basically, let's see, spread this out so it goes to two counts. We can turn our guides back on so that we know how to do that. Let's go ahead and make this. Add some lines in here. I will say this is a feature of some sort. Now, say I want it to mimic some of the other type that's around my document. What I can do with eyedropper tool is basically go and find another set of type and by clicking it, I can mimic that type completely. So, you can see that it copies everything from font to spacing to alignment. So, I'm going to go ahead and change this back to give it a little bit of alignment. Now this is here but those things are pretty spaced out a little too far for my liking, so I'm going to take this, I'm going to delete it, and I'm going to use a paragraph feature. Make sure you guys have this sort. So, this is the space after paragraphs and this actually allows you to basically type in an amount of space that you want to come after just one specific line or one amount of text that you have selected. I use that a lot for this exact thing, which is you're taking a title, you want to add a little bit extra space, you don't want your big title, and all your little body copy just sit up right next to each other. So, basically, we can use that. We can also do other cool things like grabbing this and coming up, maybe changing its color so that all of these features are called out with blue. Maybe we want to pull this a little bit tighter so that it fits and then center these things horizontally just so we don't have this funky space down here. We can do that up here with our alignment. Use the horizontally aligned vertically and then we know that everything is sitting right nice next to each other. Now, if I wanted this to say maybe you want to create a second set of these, we can use that drag and shift all allow holding down the option key to basically create another set of these that's just the same spaces a little bit close. So, I'm going to just drop that down here a little bit. All good websites have a footer. So, I'm going to maybe denote that. Let's create a little bit. Let's create a this a fitter area. Grab that with the spacing to be pretty much the same as what's above there so maybe pull this down. Awesome. That works pretty well. I'm going to come in here with my type, and let's go ahead and just give it a nice, let's see, Copyright 2014, Ryan Clark, All rights reserved. Don't copy things. Let's go ahead and use this guy over here to make the typo white. So, color picker. Now we need a copyright. All copyrights need a real copyright symbol. So, I'll show you guys how you can get access to the glyphs of your type. Basically, you want to go up here to a window. I want to go down here type, open up your glyphs, and this opens your glyphs panel. This basically shows you all the characters of your entire font so you can dig through unless you know the shortcuts and find exactly what you want. So, what do you want? Copyright. Double-click as it is right there in your type. Super nice. Let's just go ahead and close that. Copyrights don't need to be 24-point tall, so we can go ahead and just make this 11. It will chill down here in our footer area. Nice, centered. So, this just going to super simple Website skeleton. If I was going to keep on moving on this an hour, probably toss like some examples of maybe these peoples' sites or some contextual, other sort of imagery to add back there, one thing that I can show you guys like if you wanted to maybe make these pop off from the background a little bit, you could go in and add just a really nice little white border, maybe give a little bit of extra size so that it stands out a little bit. You can go back in, and I'll grab this guy. You can also use the eyedropper to copy shape styles which are just super, super helpful. So, I'm going to grab these and give them that same border. So, now these guys pop off those background shapes a little bit so they're not so on top of them. So, like I said, this is just a really, really general site skeleton. I'll actually include this in the file for the class just so you guys have it and can use it and mess around with it if you want. That's better. No one likes super bright filters anyways. So, hopefully, you guys enjoyed this class, got some things out of it. Hopefully, I didn't gloss over anything too badly, but these really are the tools that I use every single day to build Websites for Ferb and for other people, for my clients. I think Illustrator is an absolutely fantastic tool for Web design just based on the way that it deals with shapes and with type, which are really the core of any website. So, hopefully, we'll be developing this class in the future to add on some more advanced features and go through some even cooler things that Illustrator does. But this is just a really great starting point. So, keep working. Toss me any questions that you guys have. I'm always around. I'm on Twitter at ryanvsclark. I can't wait to see what you guys come up with as far as what your projects are for the class and thanks for following along. Bye guys. 6. Explore Design on Skillshare: way.