Viewers: in countries Watching now:
Productivity Tips for Web Designers is the weekly series for web designers who want to enhance their design, software, and freelance business skills and streamline their workflow. Whether you're new to web design or working professionally as a seasoned designer, you'll discover techniques that can help you become more proficient at your craft. Tune in every Thursday for a new tip on topics including typography; SEO; design software like Illustrator, Photoshop, and Dreamweaver; and web coding in HTML and CSS.
- 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.
There are currently no FAQs about Productivity Tips for Web Designers.
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.