Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Rounded rectangles are an essential part of any web design. We use these things for anything from a button all the way up to a banner ad, even in logos and icons and things like that. The problem with Adobe Illustrator's Rounded Rectangle tool is the fact that it is so inflexible, meaning there's no way to really change the corner radius once it's been set. Let me show you an example of what I mean. I'm going to go to the File menu and choose New, and once I create a new document--it does not matter size--I'm going to come over to my tools panel, click and hold on the Rectangle tool, and find Rounded Rectangle.
Once I have the Rounded Rectangle tool selected, I can then click and drag to start drawing out a rounded rectangle. Now, I can change the corner radius simply by tapping my down and up arrow keys on my keyboard. As I do this, you can see that the corners get more round. I'm just holding down the up arrow key right now. Holding down the down arrow key will square them back up. The problem I have with this tool is that once I let go of the mouse, I'm stuck with whatever corner radius I've chosen, unless I want it go and grab the Direct Selection tool and move anchor points around and things like that. I don't want to do that.
I want to quickly and easily be able to change the corner radius on the fly. And lucky for us, we are not stuck with this. In other applications like Adobe Fireworks for instance, they have something called Smart Shapes, and in Illustrator we don't have those, but we can simulate them. So let me show you what I mean. I'm going to delete that and I'm just going to bring up the Regular Rectangle tool. And I'm going to select no stroke, and I'm going to give this an orange fill so you can really see what's going on. And so I'm just going to click and draw out what might be a button. And so I'll put that out on the artboard, and so now what I want to do is round the corners on this, and in order to that I'm going to use a Live Effect.
So I'm going to go up to the Effects menu, I'm going to go down to Stylize, and I'm going to choose Round Corners. And once I choose Round Corners-- I'll move this up so you can see it-- I'm going to turn Preview on. And it maybe a little hard to see, but if I really round this up, you'll start to see the corners rounding in. See that? And if I drag this back down, I can do something like let's say 20 pixels for instance, and hit OK. I have a nice rounded rectangle. The best part about this is, though, if I use the Appearance panel, I can select this at any time, even if I've saved it, closed it, and open it back up; it does not matter. I can select this anytime.
In my Appearance panel, I simply find the Round Corners effect, I click on that, and then I can change the Radius to let's say 10, hit OK, and it changes it to 10. If my client comes back and says, "No, we need it to be more round," that's okay. Select the object, Round Corners, crank it back up, something like 25 pixels. You can turn Preview on to get an idea of what it's going to do, and then hit OK, and it automatically applies it as soon as you hit OK. So as you start to create rounded rectangles-- and I'm sure you will, because they are everywhere on the web today-- try using this effect on a standard rectangle, versus using the standard Rounded Rectangle tool inside of Adobe Illustrator.
You'll be glad you did, because it creates much more flexible graphics that are easily editable by you or anybody else who might be working on the project.
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.