Productivity Tips for Web Designers
Illustration by John Hersey

Productivity Tips for Web Designers

with Sue Jenkins

Video: Zen and the art of rounded corners

- 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.
Expand all | Collapse all
  1. 4m 59s
    1. Zen and the art of rounded corners NEW
      4m 59s
  2. 24s
    1. Welcome
      24s
  3. 42m 36s
    1. Making blog headlines pop, with typography
      7m 52s
    2. Exploring the secrets of effective block quotes
      4m 10s
    3. Going big with type
      5m 32s
    4. Pairing fonts for the web
      6m 59s
    5. Styling your web links
      7m 49s
    6. Improving font readability
      10m 14s
  4. 1h 3m
    1. Improving your layout efficiency with rulers, grids, and guides
      5m 56s
    2. Adding killer shadow effects
      9m 20s
    3. Creating customized type for logos and graphics
      8m 30s
    4. Configuring the workspace for web design
      8m 14s
    5. Saving time using Illustrator symbols
      8m 50s
    6. Formatting text for the web
      7m 0s
    7. Graphic styles for the web
      8m 9s
    8. Two fantastic texture techniques
      7m 52s
  5. 48m 10s
    1. Pulling the text from images with OCR
      4m 3s
    2. Grabbing measurements to speed up your workflow
      5m 29s
    3. Editing nondestructively with Smart Filters
      7m 27s
    4. Using content-aware scaling for photos on the web
      7m 53s
    5. Advanced tips for sampling colors
      6m 53s
    6. Best practices for image resizing
      6m 53s
    7. Tinting images using one or two tones
      5m 45s
    8. Tricks for quick teeth whitening
      3m 47s
  6. 39m 43s
    1. Using Google font effects
      4m 39s
    2. Commenting code for better clarity
      6m 19s
    3. Utilizing master CSS files to speed up design
      4m 33s
    4. Adding pizzazz with CSS shadow effects
      4m 45s
    5. Incorporating multiple background images
      4m 54s
    6. A two-minute trick for rotating objects
      4m 17s
    7. Creating stitched borders with CSS
      3m 50s
    8. Dropping in CSS drop caps
      6m 26s
  7. 50m 38s
    1. Managing sites to harness the power of Dreamweaver
      5m 36s
    2. Externalizing CSS and JavaScript for better efficiency
      7m 5s
    3. Publishing using Dreamweaver's integrated FTP
      7m 56s
    4. Cleaning up redundant and unnecessary code
      5m 19s
    5. Using Find and Replace for rapid search and editing
      8m 8s
    6. Validating your code to W3 standards
      5m 19s
    7. Using the Link Checker to find broken links and orphans
      4m 27s
    8. Building code snippets to save time
      6m 48s

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Productivity Tips for Web Designers
4h 10m Appropriate for all Jul 31, 2014 Updated Apr 23, 2015

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.

Subject:
Web
Author:
Sue Jenkins

Zen and the art of rounded corners

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

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now Already a member? Log in

* Estimated file size

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 Productivity Tips for Web Designers.

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 ?

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 preferences from the dropdown menu.

Continue to classic layout Stay on new layout
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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.