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

Illustrator for Web Design

Creating progress bars


From:

Illustrator for Web Design

with Justin Seeley
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

Video: Creating progress bars

In this movie, I'm going to be exploring how to create your own progress bar mockups here inside of Illustrator. I've got one open that I've been working on here, and you'll notice in the Layers panel I have three distinct layers that I start with each time. The bottom layer is the Guides layer. That's where I stick all the guides. And then I have a Base layer, which is the background part of the progress bar; and then I have a layer called Progress, which contains each individual piece of the progress bar as it goes from 0% all the way to 100%. For my progress bars I tend to break them up into four pieces, 25% each. In this case this is an 800-pixel-wide progress bar, so each one of these separate sections is going to be 200 pixels in width.

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 progress bars

In this movie, I'm going to be exploring how to create your own progress bar mockups here inside of Illustrator. I've got one open that I've been working on here, and you'll notice in the Layers panel I have three distinct layers that I start with each time. The bottom layer is the Guides layer. That's where I stick all the guides. And then I have a Base layer, which is the background part of the progress bar; and then I have a layer called Progress, which contains each individual piece of the progress bar as it goes from 0% all the way to 100%. For my progress bars I tend to break them up into four pieces, 25% each. In this case this is an 800-pixel-wide progress bar, so each one of these separate sections is going to be 200 pixels in width.

However, if you wanted to break this up into 30% increments, 20% increments, it's totally up to you; you just have to set the guides accordingly and then break your sections up, as you see here. Let me show you exactly what I'm talking about. I'm going to open up my Layers panel so you can see it here, and I'll toggle open the Progress layer. And so I've got each one of these set on its own individual sublayer, and so if I turned off everything but the 25% layer, you would see that it goes back to 25%. If I turn this on, there is 50%, 75%, and then of course 100%.

So I keep all of those on their own separate sublayers. Then the Base layer is just the shape back here, which could be any type of shape that you want. It doesn't have to be this rounded-rectangle shape like you see. It could be just a straight rectangle. It could be anything you want. So I just use this as a way of conveying to the developer that this is what I want it to look like. This is what I want the background to look like. This is what I want each step in the progress bar to look like, et cetera. You can develop these all on your own, just depending on your personal preference, but now let's go ahead and see how I created this by creating a brand-new document and walking through it.

I'm going to bring my Layers panel back down to the bottom, and I'm going to create a new document: File > New. And for this document I'm going to choose a Width of 800 pixels, just because that's easy divisible, and a Height of 100 pixels, just to give me some space to work with, and I'll hit OK. And once I hit OK, I get a document that looks just like the other one. And so the first thing I need to do is set up my guide. So I'm just going to double-click on layer 1 over here and I'm going to type out Guides. Then I'll create a new layer on top of that, double-click it, and I'll call that Base, and another one on top of that, and I'll call that Progress.

So I'm going to go ahead first and lock the Progress and Base layer so I can't make any changes to them yet, and I'm going to select the Guides layer and I'll just start working with some guides. So the first thing I'm going to do is bring up my rulers with Command+R or Ctrl+R on the keyboard, and then I'm just going to draw out a guide like so. And it doesn't matter where I place it right now because I can always re-place it. If you find that you can't move your guides by clicking and dragging, that means they're locked, so go to the View menu, go down to Guides, and uncheck where it says Lock Guides.

That way you can move them around. So in this case I'll snap it over here to the zero point. Then I'll drag this out. And notice as I drag it out I don't get a little heads-up display indicating where I am at all, so my Info panel on the top right-hand portion of my screen is not showing me where I am. So what I'm going to do is release temporarily and then click again to drag it, and you'll notice my Info panel starts calculating where I am. So as soon as this hits 200 pixels even, I'll let go, and that places my guide exactly where I need it to be. And then I'll drag this one out to 400 pixels. So I'll just click and release, and then click it again to drag it, out and right there it should snap right to the middle.

Then I'll drag this one out around about where I think it should it go, and this one needs to go about 600 pixels. So again, you could divide yours up any way you wanted to, based on how big you want your increments to be, how big you want your progress bar to be, and ultimately that's going to really be dependent on how big your overall design is. I'm just assuming that the design that I'll be working on is going to be 800 pixels wide. It might be 960, it might be 600; it just depends. So you have to work from your original mockup in order to make these things accurate. I'm going to click and drag this out one last time and I'll snap this guide to the very end.

That way I've got an end point as well. And so I'm using these guides for a reason. I'm going to use them in a minute to actually separate out the shape into individual pieces. So once I have the guides done, I'm going to lock that layer down and then I'm going to unlock the Base layer and select it to make sure I'm working on it. Now I'm going to grab my Rectangle tool. Again, this is totally up to you. It could be a rounded rectangle. It could be a regular rectangle. I'm going to come right here against this guide and I'm just going to click one time. I'm going to make this 800 pixels wide and I'm going to make it about 30 pixels tall.

It doesn't matter how big it is, because really and truly nobody is going to be interacting with this with their mouse or their finger, so it really doesn't matter how big, or even what it looks like necessarily. But in this case I'm going to go 30 pixels in Height, 800 pixels in Width, hit OK. I'm then going to switch to my Selection tool, and I can move it into the center of the document. If you're not sure if it's in the center, just come up to the top in your Control panel, align it to the artboard, and then hit the Align Horizontal Center and Align Vertical Center to make sure it's right there in the middle. And once I do that, I'm going to give it a light-gray color so I can actually see it.

So that's the base of my progress bar right there. And I'm going to also round the corners, but I'm going to do that through the Effects menu. So I'm going to select it one more time, go up to the Effects menu, choose Stylize, and go down to Round Corners. And I'll hit Preview so I can see it and 15 pixels, I'll take that back to about 10 pixels and hit OK. So now I've got my base. One final thing is I am going to add a stroke to it. So I'll target the stroke, go over to my Swatches, and I'll pick a darker gray. And then in my control panel I'll just increase the size of the stroke to something like three points, like so.

I'll click away so you can see it. There is the base or the background for my progress bar. And so now I'm going to select it and copy it to the clipboard, Command+C or Ctrl+C on my keyboard. Once I have the Base copied, I can then lock that layer down, and I'll unlock the Progress layer and select it. So now I'm ready to paste on to the Progress layer. So I'm going to Edit > Paste in Place, or Shift+Command+V. That's just going to paste it directly on top of it. First things first: I'm going to take away the stroke and change the color.

It doesn't matter what color you choose right now. I'm just going to choose something like a green for right now, just to kind of give it a little bit of a different look. So there is my green progress bar. And so now I need to divide this into separate sections. But in order to do that, I first need to do something called expand the appearance. Why am I doing that? Because if I were to separate this into separate sections, each section would have that Round Corners effect applied to it and it wouldn't fit evenly with each other at each stopping point. So I'm going to go up to the Object menu and choose Expand Appearance, and when I do that, you'll see that the live editable path comes up around the edges, indicating that the Round Corners effect is now just part of the object.

So now I'm ready to break this up into individual sections. The easiest way to do that is to use your Rectangle tool. So I'll just grab my Rectangle tool, and I'll just come right here where these intersect, and this is where I use the guides. I just click and draw. I let it snap to that guide. And now I'll just take the Selection tool by hitting the letter V on my keyboard and I'll copy this, Command+C or Ctrl+C, and Command+F or Ctrl+F to paste it in front. And then I'll just move it to the second section, Command+C or Ctrl+C, Command+F or Ctrl+F to paste it.

Move it right there, each one just snapping in- between these. Copy it and paste it one more time. Again, it doesn't matter if these line up, as long as they line up horizontally. It doesn't matter vertically where they go. So now I'll select all of these pieces. I'm going to change the color so I can see a difference. So I'll change these to kind of a darker green. And then I'm going to use Command key on the Mac, Ctrl key on the PC and the Left Bracket key one time to move them behind the progress bar. I'm going to select the progress bar by holding down the Shift key and clicking on it, makes it active, and we're going to bring up the Shape Builder tool.

That's the Shift key and the letter M, or you can simply find it right here in the toolbar. And so what I'm going to do is come right here, hover over this part, click once, hover over this part click once, this part, click once, this part click once. So I've created each individual piece of the progress bar. Now I'm going to come here and I'm just going to Option+Click or Alt+Click the remaining pieces. That removes these. And if I want to make sure that I did this correctly, I'll toggle open my Progress layer and I should have four paths, one for each portion of the progress.

So if I turn this one off, you see there it is, turn this one off, and so forth. And so I'll rename these. So the first one here at the bottom is 25%. The next one would be 50%. And this is where They live in the relationship to the 100% all the way across. These are each individually 25%, but this one lives at where 50% would be, This one lives where 75 would be, et cetera. So 75% and then finally 100%.

So now I can alter the appearance of these any way I want, so make changes to them, add gradients, whatever I might need to do. But you get the idea of how this works. Now all I have to do is toggle these on or off when I want to show the progress, either 25, 50, 75, or 100. And so I can turn this over to my developer and say okay this is the progress bar that I want to showcase at the top of this form or whatever I might be creating, and these are the increments I want to use, these are the graphics that I need, and it's easily translated into HTML and CSS or JavaScript this way rather than just saying "oh, I need a progress bar." So the next time you need to create something like this just set up a document.

You maybe want to set yourself up a template similar to this for different sizes that you might be working with, and then use this to create your progress bars and it will be much easier when you take it to the next step.

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

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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