Pro Tip 3: Proper Border Radius

29 Responses (page 1 of 2)

  1. Mac Tyler Mac Tyler

    Just something that hopefully helps illustrate the proper way to do border radius.

    [EDIT]
    I'm looking at making this whole process automated.
    Watch the Video | Download the Script

    over 1 year ago

  2. Pro Anders Drage Anders Drage

    Photoshop?

    over 1 year ago

  3. Mac Tyler Mac Tyler

    Yeahp.

    over 1 year ago

  4. Pro Isaac Grant™ Isaac Grant™

    good, we gotta keep it rollin.

    likes

    over 1 year ago

  5. Mac Tyler Mac Tyler

    Yeah man, hopefully more people will join up, really cool series!

    over 1 year ago

  6. over 1 year ago

  7. Pro Andrea Cau Andrea Cau

    Thanks man! Much appreciated.

    over 1 year ago

  8. Pro Anton Kudin Anton Kudin

    this should be in every book

    likes

    over 1 year ago

  9. Jon Wallace Jon Wallace

    Good call - some many peeps cant seem to work out that inner border radius is gonna be smaller than the outer one! Nice way of explaining it ;]

    likes

    over 1 year ago

  10. Antonio Mondragon-Becker Antonio Mondragon-Becker

    It drives me nuts when people do this wrong. Nice one.

    likes

    over 1 year ago

  11. Steven Schroeder Steven Schroeder

    What type of idiot would ever mess this up?

    likes

    over 1 year ago

  12. Mac Tyler Mac Tyler

    lol ohhh steve ;)

    likes

    over 1 year ago

  13. Nathan Hardy Nathan Hardy

    likes

    over 1 year ago

  14. Pro Steffen Nørgaard Andersen Steffen Nørgaard Andersen

    Heard! - Well illustrated

    likes

    over 1 year ago

  15. Manuel Manuel

    Good tip. I remember learning this from adam betts a while ago. Really helped me out :)

    over 1 year ago

  16. Pro Joshua Hibbert Joshua Hibbert

    Ha, I actually wrote an article on this very thing, and made a tool so that you can work it out easily: http://joshnh.com/2012/01/getting-inner-border-radius-just-right/

    likes

    over 1 year ago

  17. Artistdanz Artistdanz

    Creating two layers to do a rounded corner stroke? Why would you want? Layer style stroke achieves the same thing or you can paste from illustrator as smart object/shape layer.

    likes

    over 1 year ago

  18. Pro Mani Mani

    fabulous.

    over 1 year ago

  19. Mac Tyler Mac Tyler

    @Artistdanz I am just using a simple example, a more common use for this technique is situations where you need something like this and they need to be separate shapes.

    http://cl.ly/3p183y3i1T1U2O3K1w1F

    over 1 year ago

  20. Pro Stephen Dixon Stephen Dixon

    It's a great reminder for everyone but really this should come as second nature to everyone.

    over 1 year ago

  21. Mac Tyler Mac Tyler

    @Stephen, nothing starts out as second nature! Everyone has to learn what they learn from somewhere.

    likes

    over 1 year ago

  22. Pro Roy Abbink Roy Abbink

    Agree with Stephen and Mac. A great tip.

    likes

    over 1 year ago

  23. Marshall Klickman Marshall Klickman

    YES. Thank you for illustrating this. Incorrectly nested rounded rectangles are one of my all-time biggest pet peeves. Again, thank you.

    over 1 year ago

  24. These have been pretty cool to look at lately - so I am throwing one in too!

    When creating a button that has depth using a gradient, set your shape object to the base color you want it to be (orangish yellow in this case) and then use a B/W gradient with an overlay or multiply gradient effect instead of setting the colors of the gradients. You'd be surprised at how much easier it is to go back later and change 1 color (the layer color) than tweaking multiple gradient colors. This is very handy if you have many buttons on an app or page that the client suddenly says "I want the buttons to be green instead of yellow-orange now!" :-)

    Someone else rebound and drop some knowledge on us!

    over 1 year ago

  25. In my experience this is quite common, but can easily be adjusted. Transform (Control+T)(Command+T) and just remove the numbers before the decimal. Fixed & Crispy! (edit: to be clear, this is in photoshop)

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like