As Star Trek Into Darkness approaches I am getting more and more excited. I am preparing by re-watching episodes of TOS on Netflix, make some weird vine videos, and of course.. designing some icons. Similar to my previous project to Back to the Future, Indiana Jones, and Star Wars.
If you are interested in tshirts or any other type of swag, feel free to drop me a line.
After much searching and deliberating I think I have finally found the magic number. The number that helps you figure out exactly what that pesky corner radius needs to be for that beautiful iOS icon that you have been working on, and keeping those nested corners stunningly proportionate.
so, how did I get to 0.175?
its simple really. I googled it. and then I googled it again.. each time came up with a plethora of answers that seems very convincing with the math. but after much trial and error I came across http://hicksdesign.co.uk/journal/ios-icon-corner-radii which redirected to a pre-collected list of sizes and border radii here http://iconhandbook.co.uk/reference/chart/ios/.
Amongst several cross referenced sources (including stack overflow) the consensus came down to 57/10. which is 57 divided by 10.
so like I said it was simple. I just divided the two and that producers the multiplier of 0.175. So for those of you out there who don’t want to whip out your calculators.
here is the list of iOS (ipad) icon sizes and border radii:
72px x 72px = 12.6
144px x 144px = 25.2 (@2x)
512px x 512px = 89.6
1024px x 1024px = 179.2
These are the sizes I work at for everything I do, so if the size you are needing is missing? 0.175 folks.
—
update there is also the apple resource here, almost forgot about that: http://alturl.com/3h8ad
—
now, for nested border radii.
There is a recipe for this as well, and that doesn’t mean just slapping to border radii together like 20px/20px. It seems there is more of an issue in the world of web design where you can simply set the border-radius:20px; to two containers publish and be on your merry way.
So for this I always suggest using your resources to discover the proper way to do things. my favorite just happens to be google. This is where I love finding where people all over provide free resource for doing things correcly, most of the time.
Today, I found this little guy http://joshnh.com/tools/get-your-nested-border-radii-right.html and you can’t beat a bookmark for checking your own math. He even goes as far as breaking it down for you in his blog post here http://joshnh.com/2012/01/27/getting-inner-border-radius-just-right/
radii matter! so give them the attention they deserve or be a square!
Happy National Blog Posting Month!
I have seen alot of these really impressive icons on dribbble so I figured I’d give it a shot. obviously this has been processed through instagram, so I apologize for the black edges, I will probably be posting a fancy high res version to my portfolio soon. I am thinkin about posting the .psd as a freebie? if there is anyone who reads my blog and is faintly interested. perhaps i’ll share.
Posted by Instagrate to WordPress
