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
Posted by Instagrate to WordPress
Posted by Instagrate to WordPress
JJ Abrams was kind enough to bring a clip of Star Trek Into Darkness onto Conan featuring a balmy 3 frames of Spock (Zachary Quinto) in a crazy suit in the middle of a Volcano. (video and image below)
There has been wild speculation as to the premise of the movie. What seems to be currently the most viable is the Gary Mitchell theory with the amazing benedict cumberbatch, the BBC’s Sherlock (amazing show go watch it now), as Gary Mitchell.
If you have seen TOS (the original series) like me, you will recognize the name from Season 1 Episode 3. I’ll leave the details for you own watching or exploration.
As a graphic designer for a mobile application (web and hybrid) development team, the need for styling in code comes often. Not having learned any of that in school I find myself using CSS Tricks , Stack Overflow , or whatever else google offers up. So I am taking the opportunity to offer up the snippets I find for other designers.
Why? Well anything you can accomplish in code without an image is ultimately more efficient (as far as speed is concerned) and sometimes discovering the right bit of code for those particularly tricky situations can affect the outcome of your entire day. So keep an eye out for some freshly cultivated bits of code for your design pleasure.
BOX SHADOWS
Today I want to talk about box-shadows. In css, box shadows can add that little bit of dimension that you need in all the right ways. I could go into great detail but instead I will refer you to one of my favorite resources:
http://css-tricks.com/snippets/css/css-box-shadow/
What I will give you is a brief break down on the structure of the tag itself. Its one thing to plug in some found code, its another to understand how to make it serve your purpose, well. So that being said:
box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: horizontal offset vertical offset blur spread color;
(remember to always include the px unless the value is zero)
The coolest trick that I had to figure out was how to do top and bottom shadows only for a tray-like appearance.
-webkit-box-shadow: inset 0 8px 8px -8px #696868, inset 0 -8px 8px -8px #696868;
/*remember webkit doesn't work in all browsers so be sure to include the browser specific variations.*/
/*mozilla*/-moz-box-shadow: inset 0 8px 8px -8px #696868, inset 0 -8px 8px -8px #696868; (this code was found here)
THE WAY IT WORKS.
This bit of code actually layers two box shadows on top of on another by duplicating the styling and seperating it by a comma.
This trick can serve other purposes as well by changing the color, blur, or opacity (with the use of rgba).
Hope this helps your design projects!
Feel free to contact me for questions, comments, corrections, or suggestions on topics:
contact@russpate.com
Attribution:
oh yeah the picture is from here:
