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

Start learning with our library of video tutorials taught by experts. Get started

Illustrator for Web Design
Illustration by

Creating navigation buttons


From:

Illustrator for Web Design

with Justin Seeley

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.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Illustrator for Web Design
5h 27m Appropriate for all Jul 30, 2012

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.

Topics include:
  • Customizing a web workspace
  • Decoding the mysteries behind screen size and resolution
  • Working with Pixel Preview and anti-aliasing
  • Coloring web graphics
  • Renaming and grouping layers
  • Working with shapes and symbols
  • Creating wireframes on a grid
  • Styling text
  • Creating image sprites
  • Simulating web pages with artboards
  • Optimizing and exporting your work
Subjects:
Design Web Web Graphics Web Design Web Foundations
Software:
Illustrator
Author:
Justin Seeley

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.

Find answers to the most frequently asked questions about Illustrator for Web Design.


Expand all | Collapse all
please wait ...
Q: Where can I learn more about graphic design?
A: Discover more about this topic by visiting graphic design on lynda.com.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Illustrator for Web Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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.