Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
Web site mockups just don't magically create themselves; we actually build them from a skeletal system known as a wireframe. If you need a little bit more help with creating wireframes, like the one you see here, I would suggest going back and watching chapter 5 of this course, where I explained in depth on how I create basic mockups by utilizing shapes inside of the Illustrator. And so once you get a wireframe completed or someone sends you a wireframe and says "hey, build a web site mockup out of this," where do you go from there? Well, you start off with the mockup like the one you see here on my screen, and the first thing you need to do is start building in an organizational structure for the mockup that you are going to be creating.
Now in this case there are some placeholders in place here that tell me where certain aspects of the web site are going to go. And so what I need to do is first put those in a logistical order so that as I start to build objects around them, it makes a little bit more sense. So that's what I'm going to do first. In order to do that, I'm going to bring up the Layers panel here. And when I create any sort of web site mockup, I go ahead and I create three layers: I create a header layer, a footer layer and then what I call a content layer. The header and footer layers are what I call anchor content, because that's pretty much going to say the same throughout the entire design. And usually what I'll do once I get those completed is I'll lock them down.
But I'll discuss more about that as I talk about adding master elements to your pages. Once I create these three layers, I now have a basic organizational structure in place where I can put different things as I work. So I'll go ahead and create a new layer here and I'll call this layer Header; I'll create another new layer, double-click to rename it, call it Footer; and I'll create another new layer and I'll call it Content. I'll usually put my Header layer at the top, like so, Content in the middle, Footer right there.
I'm also going to add a background layer to this, because particular site that I'm going to be working on has a really elaborate background image. So I'm going to create another new layer, in this case it will say layer 5, and I'll call this Background. And I'll move it all the way to the bottom. I'm going to open the layer 1 down here at the bottom, and I'm going to start moving pieces of this around. So first I need to find the elements that I need to move around. For instance, this right down here is the Footer. Once I click on that, I'll be able to see it right there. There it is. And so I can actually move this up in the order, and I want to move it up all the way until I get right on the Footer layer, and I'll drop it right there.
So it drops right in on the Footer layer by itself. And for now I'm just going to lock that layer, because it's the only thing going on in that layer right now. I'm also going to select this big piece of content here. This is the background for the page elements. And so this is going to live on the Content layer, so I'm going to drag that up and I'll drop it on the Content layer. Even though this strip right here and this big logo are technically a part of the header, they're going to be at the top of every single content piece, so I'm also going to put those on the Content layer as well.
So I'm going to select one, hold down Shift, and select the other. It should be displayed down here. And I'll take this one and drag it up and I'll drop it right on the Content layer like so, and go back and get the second one, and I'll drop it on the Content layer as well. Oops! It didn't drop it quite good enough. Let's drop it this time right there on the Content layer, and they should appear on top of it just like this. And so I'm going to go ahead now, I'll toggle this open, and I'm going to lock those two layers. I'll lock everything that's not going to change from page to page. This makes it easier to create what I call Anchored Content, content that never moves.
And so I'll toggle that back up. I have now got my content and my footer area in place and I'm ready to put my header objects where they need to go. So this is going to be a top navigation bar followed by the background, so I'm just Shift+Clicking on this. And then to the right, this will be a little search field. And so all of this stuff is down here, and I'll select the layers that I need. I'm just Shift+Clicking. And then this bottom one here, I'll Command click on that to grab it, and then I'll just move these up and I'll drop them on to the Header layer, like so.
Now the rest of these layers are nothing more than guides down here at the bottom, and so what I'm going to do now is go to View and I'm just going to choose Guides, and make sure Lock Guides is turned on, and it is. And so I'll toggle this up and I'll go ahead and double-click and rename this Guides, and I'll lock that layer down. That way I can't select anything on it or anything else. And so now I have all of the basic pieces in place for my mockup. I have got my header area defined. I've got this big square where my logo is going to go. This is another navigational area.
This is going to be the main body of my page, and in the bottom we've got a footer that goes all the way across. And so I've taken the mockup that was either given to me, or I quickly did up here inside of Illustrator, and I have given it some organizational structure that makes sense to me. I've divided it up into a header, content, footer, and background layers, so that I can easily distribute objects as I continue to make my design going forward. So once you have your mockup open inside of Illustrator, go through, organize it as you see fit, and then once you have everything organized, start to move the content around in a logistical way that makes sense to you, and then once you get everything moved into place, it's time to start adding what I call master or anchor objects to your designs.
Find answers to the most frequently asked questions about Illustrator for Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.