Join Sue Jenkins for an in-depth discussion in this video Zen and the art of rounded corners, part of Productivity Tips for Web Designers.
- Hello friends, this is Sue Jenkins with productivity tips for web designers. In this weeks lesson, I'll be reviewing two simple methods for rounding the edges of shapes and text to give your work a softer, friendlier feel. In the wake of all the popularity of flat design, and those hard, angled corners on the web, you can create designs that stand out from the crowd by using a simple illustrator effect, that will uniformly round the corners of any element you throw at it, including live, editable text.
Rounded corners look really great on all kinds of web and mobile app interface elements including buttons, banners, boxes, icons, logos, type, you can add rounded corners to any part of your design at any time as well as edit them to your heart's content. There are two ways to apply rounding corners to an object. In Illustrator Creative Cloud, you can use the new Live Corners tool. And for everyone else you can use the rounded corners effect.
In Illustrator Creative Cloud you can activate the Live Corners Tool by selecting your object with the Direct Selection Tool. That's your white arrow, not the black arrow. So with the white arrow selected, you'll click on your object and this activates the Live Corner icons which you can drag in or out to round the edges of your shape. Now on a star, you have inner and outer points. So it depends on where you drag, how you're gonna adjust the shape. So clicking in dragging, you can only go so pointy here.
but you can drag in, or you can drag out, and it will modify your shape, which is pretty amazing. You can also modify selected parts of your shape by selecting them with a Direct Selection arrow. So if I'll click away, and then I can click on a particular path, that isolates that part of the path, and I can just modify that one side. So I can have one really pointy point on my star shape. Now another thing you can do, let me click away and then re-select the entire object, you can precisely fine-tune the adjustments by double-clicking any one of those little icons.
And this brings up the corners dialog box, where you can adjust the sides of your corner. So by default, they're round, but you can also choose Inverted Round, or Chamfer. So any of those options, like that's a pretty interesting shape there, like a blow fish. You can also set the radius, so if you wanted to get really precise and again, depending on which corner you have selected, you're gonna get different shapes. Let's go back to this pointy one. And then you can also choose the rounding, whether you want it to be relative or absolute.
And this will also adjust how your shape looks. When you're happy with it, just click OK. This technique works for any shape which is pretty amazing, and again you can isolate any edge by selecting just that edge. You've gotta use the white arrow though, not the black arrow to access that tool. The other way to apply rounding to your object, is to select your object, and go up to the effects menu, choose Stylize, and then Round Corners. This brings up the dialog box for rounding corners.
You can turn the preview on, and then you can choose the radius. Now notice what's happening here, the entire shape is changing, but you still see the outline of your original and what's happening is this is a round corners effect, which means it's non-destructive, it's editable, and you can go back into the appearance panel at any time to modify it, so double-clicking on the round corners in the appearance panel brings up the Round Corners dialog box where you can modify the radius at any time.
This technique works on any object as well as a group of objects, and live, editable text. What's more, any time you use an effect from the effect menu, the last effect used, and all its settings will be remembered at the top of the effect menu. So if I wanna use those same exact settings, just go to the very first option at the top of the effect menu and choose Apply Round Corners, and it will. So once you do that, so I could take this one and apply the same style, I could even select multiple objects and apply that same style to all of those objects with one click.
So this really is a handy tool, because you can repeat the process. And so here's just a side-by-side comparison. The hard edge versus the soft edge. I've got the rounded corners applied to the box as well as to the text. And it really just soften things up, and it really makes it friendly. But whether you're designing a website, a mobile app, or some general graphics for the web, try using Live Corners in Creative Cloud and the Round Corners effect to non-destructively and uniformly round the hard, angled edges on your buttons, your boxes, your type, and any other areas of your designs.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.