{"id":9087,"date":"2014-07-06T14:15:19","date_gmt":"2014-07-06T18:15:19","guid":{"rendered":"http:\/\/mjtsai.com\/blog\/?p=9087"},"modified":"2014-07-06T14:15:20","modified_gmt":"2014-07-06T18:15:20","slug":"inspecting-yosemites-icons","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2014\/07\/06\/inspecting-yosemites-icons\/","title":{"rendered":"Inspecting Yosemite&rsquo;s Icons"},"content":{"rendered":"<p><a href=\"http:\/\/martiancraft.com\/blog\/2014\/07\/inspecting-yosemite-icons\/\">Nick Keppol<\/a>:<\/p>\n<blockquote cite=\"http:\/\/martiancraft.com\/blog\/2014\/07\/inspecting-yosemite-icons\/\"><p>The shapes and sizes of the icons have been adjusted to provide a better visual rhythm on screen. I have not seen it published anywhere, but there appears to be a grid system that helps achieve this consistency.<\/p>\n<p>[&#8230;]<\/p>\n<p>There are three basic shapes utilized for application icons across the system. A <em>circle<\/em>, a <em>square<\/em>, and a <em>tilted rectangle<\/em>. Of course, Apple is consistently inconsistent and deviates from this system in a few places, but they are clearly outliers.<\/p>\n<p>[&#8230;]<\/p>\n<p>The old tilted rectangle icons, like the one on the left, are <em>fully placed<\/em> in 3D space, with natural perspective. They have a vanishing point on all axis. Put another way, if you drew a rectangle, and rotated it -11&deg;, you would still have to skew it in perspective to match the shape.<\/p>\n<p>The Yosemite icons appear orthographic at first, but with depth. They are a straight-on view of an object, with no perspective on the axis facing &ldquo;the camera&rdquo;. If you take a rectangle and rotate it -9&deg;, you don&rsquo;t have to skew anything, other than false 3D depth. (e.g., add the pages of the book, a drop shadow, an edge, etc.) They are much simpler in look, and easier for artists to draw.<\/p>\n<p>[&#8230;]<\/p>\n<p>Grey scale is out &mdash; warm and cool tones are in. It&rsquo;s been a popular look in Hollywood blockbusters: yellow\/orange highlights, blue\/teal shadows. The new Yosemite icons use similar tonal shifts with their metal materials. If we consider these icons as materials, this tone represents an environment reflection &mdash; not merely a color effect.<\/p>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"<p>Nick Keppol: The shapes and sizes of the icons have been adjusted to provide a better visual rhythm on screen. I have not seen it published anywhere, but there appears to be a grid system that helps achieve this consistency. [&#8230;] There are three basic shapes utilized for application icons across the system. A circle, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[77,545,30,903],"class_list":["post-9087","post","type-post","status-publish","format-standard","hentry","category-technology","tag-design","tag-icons","tag-mac","tag-mac-os-x-10-10-yosemite"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/9087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=9087"}],"version-history":[{"count":0,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/9087\/revisions"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=9087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=9087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=9087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}