Twitterbw

Pro Tip 3: Proper Border Radius

29 Responses (page 1 of 2)

  1. Pro Twitterbw 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

    4 months ago

  2. Pro Avatar Anders Drage

    Photoshop?

    4 months ago

  3. Pro Twitterbw Mac Tyler

    Yeahp.

    4 months ago

  4. Pro Bulb o Isaac Grant *

    good, we gotta keep it rollin.

    likes

    4 months ago

  5. Pro Twitterbw Mac Tyler

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

    4 months ago

  6. Avatar

    4 months ago

  7. Pro Me AndyTheJoker

    Thanks man! Much appreciated.

    4 months ago

  8. Pro Avatar Anton Kudin

    this should be in every book

    likes

    4 months ago

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

    4 months ago

  10. 227936_10150158911552063_661177062_7282602_5884897_n Antonio F. Mondragon

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

    likes

    4 months ago

  11. Ha Steven Schroeder

    What type of idiot would ever mess this up?

    likes

    4 months ago

  12. Pro Twitterbw Mac Tyler

    lol ohhh steve ;)

    likes

    4 months ago

  13. Personal identity Nathan Hardy

    likes

    4 months ago

  14. Pro Drbl Steffen Nørgaard Andersen

    Heard! - Well illustrated

    likes

    4 months ago

  15. 284421_253513944674498_100000476843147_1096560_5025196_n Manuel

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

    4 months ago

  16. Pro Avatar_28 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

    4 months ago

  17. Avatar-default 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.

    4 months ago

  18. Pro Untitled-2 Mani

    fabulous.

    4 months ago

  19. Pro Twitterbw 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

    4 months ago

  20. Pro Stephen-sf-2 Stephen Dixon

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

    4 months ago

  21. Pro Twitterbw Mac Tyler

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

    likes

    4 months ago

  22. Pro Twitter-logo Roy Abbink

    Agree with Stephen and Mac. A great tip.

    likes

    4 months ago

  23. Personal_avatar_500 Marshall Klickman

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

    4 months ago

  24. Mysterio

    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!

    4 months ago

  25. 21cf08680a9d11e19896123138142014_7

    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)

    4 months ago

keyboard shortcuts: previous shot next shot L or F like