New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating navigation buttons

From: Illustrator for Web Design

Video: Creating navigation buttons

An essential part of any good web site design is going to be to have a really nice navigation system. And you can really mock up some great-looking stuff inside of Illustrator by utilizing just basic shapes that really translate well into a navigational system. What you have to understand is that these navigation systems are not just going to be accessed via the web with a mouse or a tablet or something like that. They're going to be accessed with mobile phones, tablet devices, different things like that, where people will be interacting with them not just with a mouse, but also their finger and a stylus and things like that.

Creating navigation buttons

An essential part of any good web site design is going to be to have a really nice navigation system. And you can really mock up some great-looking stuff inside of Illustrator by utilizing just basic shapes that really translate well into a navigational system. What you have to understand is that these navigation systems are not just going to be accessed via the web with a mouse or a tablet or something like that. They're going to be accessed with mobile phones, tablet devices, different things like that, where people will be interacting with them not just with a mouse, but also their finger and a stylus and things like that.

So, when we're creating navigation for any type of web site, we need to make sure that it's both desktop- and touch-friendly. So, in this movie, I'm going to be exploring how to create a basic navigation system mock- up, and I'm also going to touch on several different ways that you can make this a little bit more touch friendly. So let's get started. I'm going to go ahead and go to the File menu and choose New, and inside of this dialog box, I want to make this about 960 pixels wide, and let's make it about 500 pixels tall.

It doesn't matter how tall it is necessarily. I'm mainly concerned with the width of the document. So I'm going to go ahead and hit OK. Let's assume that this is going to be for a 960-pixel-wide web site, and this is going to be something that lives at the very top of the web site. So, the first thing that I do when I'm designing a navigation system is I determine what type of navigation system I'm going to create. Is this going to be something that goes horizontal, is this something that goes vertical? It is going to have dropdown menus inside of it or are all the navigational items going to be included in this horizontal or vertical layout? That's all up to you.

For this project, I'm going to do a horizontal menu with some dropdowns. So, the first thing I'm going to do is I'm going to draw out a rectangle and when I'm drawing out this rectangle, I'm going to keep in mind that this needs to be a touch-friendly graphic, meaning that it needs to be big enough so that when someone taps on it with their finger, it will be selectable. And so the desired size for most touch- friendly aspects of a web site is generally around 35 to 40 pixels in height. So just keep that in mind. It needs to be at least 35 to 40 pixels in height, and I would say I wouldn't go any smaller than about 50 or 60 pixels in width either.

So in this case, I'm going to make all of my buttons the exact same size, and I'm just going to distribute them across the page. So let's say that I wanted to have five buttons that go across the page. Then I would need to take 960 pixels and divide that by 5, which makes this about 192 pixels apiece. So in order to create these things as precise as possible, I'm just going to click once, and I'm going to type out 192 for the width, and then I'm going to type out about 40 pixels for the height and I'll hit OK.

So, once I do that, there is the basic setup for my first button. And I'm going to grab the Selection tool and I'm going to flush it over to the left, just like so. And if you really want to make sure it's right up against the edge of the artboard, you can come up to your Control panel and choose Align to Artboard, and then hit this first button here to align it right to the left side. Now, I'm going to copy this and then I'm going to paste it on top of itself four times: one, two, three, four. That gives me five total copies.

So now if I select all of these by clicking and dragging across, I can align them and go to Horizontal Distribute. And since I had that aligned to the artboard, those automatically distributed across, like so. So there is the basis for my navigation system. I need to determine what these are going to look like, so I'm going to focus on one button at a time and then I'll just copy the appearance to the rest of the buttons. So, let's go ahead and select this button here, and we'll start on this one first. So I want this to be an orange color, so we'll make it orange. And I'm going to give it no stroke, just like that.

I want to make sure that these are all fitting in the right area, so I'm going to flush that left. And I can realign these after the fact. It's the stroke that kind of threw it off, while I go. That's no big deal. We've got that selected. I also want to bring up the Appearance panel. I can do that by going to Window and selecting Appearance. And if it's already onscreen, you should just be able to locate it, and I'll find mine and drag it out. I'm going to add something to the top of this, just to give it a little bit of something extra, so I'm going to add a fill. So, I'll select the fill that's already there, and then I'll go down and hit Add New Fill.

And I'm going to select a gradient, just like this. Once I have that gradient selected, I'm going to toggle open that fill. I'm going to change the opacity of this gradient by going to the blend modes here on the left, and I'll change this to Soft Light. Then I'll find the Gradient panel and change the angle to something like 90 degrees. And if you don't like that, you might want to switch it over to something like -90. There we go! The final thing I'm going to do is I am going to add a stroke to this.

So, let's go up to the Stroke panel, open it up, and I'll add a 1-point stroke to it. I'm going to make sure that it is aligned to the inside of this. Then I'm going to go to the color, and I'm going to pick kind of a darker reddish-orange color. I may even go a little bit darker than that. And if you want to get real custom with it, you can just go down here, target the stroke, double-click, and kind of mix your own. In this case, I'll use a dark orange like this.

The hex code for this is 824106. So, I hit OK. That looks better. So, that's the overall appearance that I want for each one of my buttons. So, the easy way to do this is to save it as a graphic style of course. So, what I'll do is bring up the Graphic Styles panel by going to Window > Graphic Styles, and I'll open those up. And I'll make sure I have this button selected, create a new graphic style just like that. I don't have to worry about naming it right now. I'm going to reset my workspace. Use Command or Ctrl+0, and I'll just select all of these at once, bring up the Graphic Styles panel, and apply that graphic style to them.

And with all those still selected, I can then go back to the Align panel and I can align them with the artboard again, making sure they're all ready to go. So there you have it! There is a basic navigation style. So now what you want to focus on is adding some text to this. It's a mockup after all, so we need to know what it's going to say. So I'm going to grab the Text tool, and I'll just type out "HOME," in all caps. Once I have that typed out, I'll select the text. And I'm going to increase the font size just a little bit, so maybe something like 14 pixels. That might be a little small for this, so I may even bump that up to something like 16.

Then I'm also going to hold down the Option key on the Mac, the Alt key on a PC, and tap the right arrow key a few times to kind of spread that out a little bit, add some tracking in there. Once I do that, put that right on top of that button. I can select this button here, and then I'll change the alignment to the selection and align those to each other's center point, just like that. I can also align them to the vertical center as well.

I'll just move that back into place. If at any time your buttons get out of place like this, you can just realign them by moving them around. Select that and just kind of move it down. If you zoom in closer, you'll get a better level of control on these. Let's do that. And you can always move these around and change them any way you want. It's okay that those are misaligned for now. I can fix that later. So I've got my HOME button ready to go. I'm going to change the color of the text, though, to white. The next thing that I try to do is I try to figure out if these buttons are going to have hover states or over states, and once we do that, we need to figure out what those are going to look like.

The easiest way to do that is to just take what you've created so far and duplicate it. So what I'm going to do is take this button and select it. I'll copy it--Command or Ctrl+C--and then paste it--Command or Ctrl+V. That just puts it right there, and I'll put it right underneath it. So this way you can kind of see the over and regular state of the button. So, I'll take this button, and all I'm going to do here is go into the Appearance panel and I'll bring that out so you can see it.

I'm going to target the gradient fill so that I'm working on that gradient fill, and I'll go to the Gradient box here and I'll change that angle to 90. So, when somebody hovers over this, the gradient will change. So, that's what I'll tell the developer is okay, this is the up state, this is the over state, et cetera. And the easy way to get through this, where this makes sense for your developer, is to select something like this, group it with Command or Ctrl+G, and then use your Layers panel. So, I'll do this. And I'm working on this group right here, so I'll call this Home Up.

So that's the up state. If you can't see this, you can expand it out a little bit. I'll select this. Command or Ctrl+G gives me this group. Double-click and I'll call this Home Over, and then I will move it until it's right on top of it, like so. So now anytime I want to see what it's going to look like-- I'll just turn off the over state for now-- so there is the up state, and if I want to see what it looks like rolled over, just click that on, just like that. So it looks like I'm actually hovering over it right now. So that's a great way to show interactivity to your clients and also to the developer.

I am going to rest my workspace really quick. So, the easy thing to do here would be just to copy this and paste it as many times as you want. But we have one final thing we need to do. We need to do a dropdown, because we need to see exactly what that's going to look like. So, I'm just going to grab my Rectangle tool again, come right to the intersect point, and we'll do 192 x 40 again. We'll keep this the same, except this time I'm going to make sure it is a solid fill, just like this, and there is no stroke, like that.

So that's my dropdown. And I'll copy that, and I'll paste in front, Command or Ctrl+F. Then I'll move it down till it intersects, just like this. And we'll copy it again, paste it again, Command or Ctrl+F, and we'll put it down like that. So that's going to be my dropdown whenever I roll over this. So now what I need to do is give this a little bit of a differential I think. So, I'll select all three of them at once, and I'm just going to add sort of a lighter gray stroke. And we'll align this to the inside, like so. There we go! Kind of a little panel-like dropdown, and I can move that up so it's flushed with the rest of it.

Then I can take this HOME text and I'll double- click until I get a hold of the HOME text, and I'll copy that, double-click to exit. Then I'll select this, and I'm going to group this together--Command+G or Ctrl+G. Then in my Layers panel--I'll bring this out so you can see it--double-click, and I'll name this DropDown, just like so. So, with this selected now, I'll double- click to enter in Isolation mode for the group so I'm only working in the group. I'll paste, get that lined up.

And again, it doesn't matter what these words say, because they're always going to change based on whatever button you're working on, but this just gives the developer, or whomever is creating this, an idea of what this is going to look like. And so I'll just copy and paste in front--Command or Ctrl+F--and then I'll move this down till it gets about in the center there, Command or Ctrl+F, keeping that in line, just like so. So there is my dropdown. Then we can double-click the canvas to exit. So really, I don't even need these extra ones over here on the side.

I can actually get rid of these if I wanted to and just use this. I'll just move this to the center. If you wanted to create the entire thing, you could, but in this case, I think one example works really well. And if I go to the Window menu and bring my Layers panel back up, you can actually see what I've got. I've got the Home Up, I've got the Home Over, and I've got the dropdown all set there, so if I wanted to turn on the over state for this, I can do that. And it's actually over here. I need to move that with it, so I'll just move that back over till it lines up, just like that.

So, if I were to send this to somebody, I can say, okay, this is what your navigation is going to look like. And I'll turn off the dropdown and turn off the over state. This is what it looks like normal. This is what happens when I hover over it and when the dropdown appears. So you can turn those off to show the regular button state after the fact. As you continue to develop your navigational style, you may find that vertical navigation works best, horizontal works best. It's just totally up to you which one works best for whatever design you're working on. Also, the dropdowns and things like that are always going to be different for each design that you work on, but hopefully this gives you a better idea of how to create these things, how to mock them up, how to showcase them to a developer or a client, and also, how to make them touch friendly, so that they can be used effectively on any device or screen.

Show transcript

This video is part of

Image for Illustrator for Web Design
Illustrator for Web Design

67 video lessons · 24397 viewers

Justin Seeley
Author

 
Expand all | Collapse all
  1. 1m 13s
    1. Welcome
      50s
    2. Using the exercise files
      23s
  2. 43m 51s
    1. Designing for screens
      1m 57s
    2. Decoding screen size and resolution
      2m 40s
    3. Exploring the Illustrator to HTML workflow
      3m 42s
    4. Setting up Illustrator for web work
      6m 55s
    5. Creating a new document for web
      6m 25s
    6. Creating a new document for mobile
      3m 31s
    7. Using artboards for responsive layouts
      7m 42s
    8. Creating email newsletter documents
      4m 31s
    9. Working with Pixel Preview and anti-aliasing
      6m 28s
  3. 25m 28s
    1. Adjusting color settings
      6m 47s
    2. Understanding web color
      3m 47s
    3. Creating a color palette
      5m 4s
    4. Creating custom swatches
      4m 50s
    5. Working with fills and strokes
      5m 0s
  4. 13m 15s
    1. Exploring the Layers panel
      5m 21s
    2. Renaming and grouping layers
      7m 54s
  5. 24m 5s
    1. Drawing simple shapes
      4m 16s
    2. Working with Pathfinder
      5m 4s
    3. Using the Shape Builder tool
      4m 33s
    4. Creating symbols
      6m 24s
    5. Editing and replacing symbols
      3m 48s
  6. 20m 22s
    1. Planning your project
      2m 56s
    2. Using guides and rulers
      5m 56s
    3. Developing a layout with shapes
      6m 21s
    4. Using a grid system
      5m 9s
  7. 25m 53s
    1. Exploring the rules of typography
      4m 1s
    2. Using text as text vs. using text as an image
      3m 37s
    3. Understanding web-safe fonts
      1m 46s
    4. Creating and using paragraph styles
      5m 16s
    5. Creating and using character styles
      3m 2s
    6. Simulating the CSS box model
      8m 11s
  8. 21m 17s
    1. Understanding object appearance
      4m 43s
    2. Applying and editing live effects
      3m 34s
    3. Creating and using drop shadows
      3m 13s
    4. Creating more flexible rounded rectangles
      3m 17s
    5. Saving appearance as graphic styles
      6m 30s
  9. 35m 57s
    1. Starting with a wireframe
      5m 23s
    2. Adding master elements
      6m 45s
    3. Creating navigation buttons
      13m 34s
    4. Working with photographs
      5m 50s
    5. Simulating pages with artboards
      4m 25s
  10. 54m 45s
    1. Creating video placeholders
      10m 33s
    2. Creating buttons
      13m 1s
    3. Creating form fields
      8m 15s
    4. Creating radio boxes and checkboxes
      5m 11s
    5. Creating progress bars
      10m 12s
    6. Creating tabbed interfaces
      7m 33s
  11. 35m 28s
    1. Understanding slicing
      3m 26s
    2. Slicing up a mockup
      3m 6s
    3. Understanding web file formats
      5m 33s
    4. Exploring the Save for Web dialog
      3m 50s
    5. Optimizing photographs
      4m 29s
    6. Optimizing transparent graphics
      4m 43s
    7. Saving Retina display graphics
      3m 46s
    8. Exporting SVG graphics
      6m 35s
  12. 9m 29s
    1. Understanding image sprites
      3m 4s
    2. Creating a sprite grid
      4m 36s
    3. Optimizing sprites for the web
      1m 49s
  13. 15m 29s
    1. Placing Illustrator Smart Objects
      3m 22s
    2. Sharing color swatches between apps
      2m 9s
    3. Exporting Illustrator artwork as a PSD
      3m 49s
    4. Importing artwork into Fireworks
      2m 41s
    5. Exporting HTML from Illustrator
      3m 28s
  14. 1m 19s
    1. Taking the next step
      1m 1s
    2. Goodbye
      18s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.