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