Loading...

Templarian - Design, Develop, and Deploy


Next Page

Material Design Icon Templates

There is a new folder on GitHub for <a href="https://github.com/Templarian/MaterialDesign/tree/master/templates/icon">templates</a>. These contain all the basic shapes as a starting point. !<a href="/files/mdi_template_october.png">Templates</a> <a href="https://github.com/Templarian/MaterialDesign/raw/master/templates/icon/template.ai">Illustrator CC Template</a> <a href="https://github.com/Templarian/MaterialDesign/raw/master/templates/icon/template.ai">Expression Design Template</a> <a href="https://github.com/Templarian/MaterialDesign/raw/master/templates/icon/template.ai">SVG Template</a> To learn more about the Off layers shown above read the <a href="/2014/09/28/material_design_off_icon/">off state tutorial</a>. Making some good progress on the <a href="http://materialdesignicons.com">Material Design Icon</a> site this weekend. Should have <a href="/2014/10/03/material_design_icons_alpha_contributors/">alpha</a> accounts sent out by the end of the week.

Looking for Alpha Contributors

Are you a designer that wants to help test the new Material Design contributor features. Please take a second and email austin at templarian.com. Invites will hopefully go out next week. !<a href="/files/mdi_alpha_contributor.png">Contributor Page</a> Preview: <a href="http://materialdesignicons.com/contributor/Austin-Andrews">My Contributor Page</a> *Q.* What if I am not a designer? *A.* Sorry, but right now the only features to test and give feedback on are the contributor features. When the API is further along devs can test that. For now submit icon or feature <a href="https://github.com/Templarian/MaterialDesign/issues">suggestions</a>. *Q.* Do I get anything for helping out? *A.* Definitely. I'll be printing out stickers and various things (T-shirts) to those that help out. These may not come until Material Design Icons leaves beta though as my number one priority is getting everything complete. *Q.* Do I need Illustrator, Expression Design, Inkscape? *A.* They can all export SVG so just use the one you are more comfortable with. Each icon file needs to contain a single `<path ...` icon. *Q.* I'm waiting for an invite, what can I do while I wait. *A.* Look at the various icons on the site and start creating new ones. Tweet a screenshot of a few and I'll probably add you within a few minutes. *Q.* I have Modern UI Icons I want to add icons. *A.* <a href="https://github.com/Templarian/WindowsIcons/issues">Submit an Issue</a> Modern UI Icons will use this same interface, but right now lacks the options to switch between the icon sets.

Material Design Off Icon State

The off state of an icon is represented by a backslash over the original icon. For anti-alias accuracy follow the steps below to produce a consistent look. !<a href="/files/material-design-off-icon-examples.png">icon</a> Start by creating the normal `24` square document at `96` DPI. Ensure you have _Snap to Pixels_ enabled under _View_ on the top menu. Then create the 3 shapes below matching the size. The circle can be any icon path. !<a href="/files/material-design-off-icon-step-1.png">icon</a> Next select the two rectangles and set the *anchor point* to the bottom left. Click the chain icon so it is broken between width and height. Set the Height to `3.6` since we need each to be 1.8 tall. !<a href="/files/material-design-off-icon-step-2.png">icon</a> With the same selection set the Y axis position to `3.9`. This will move the two rectangles up `0.1`. !<a href="/files/material-design-off-icon-step-3.png">icon</a> Reselect the two rectangles and move the anchor point with your cursor one pixel to the left. !<a href="/files/material-design-off-icon-step-4.png">icon</a> Rotate the selection `-45` degrees. On the top menu select _View_ and enable _Pixel Preview._ !<a href="/files/material-design-off-icon-step-5.png">icon</a> The final steps depends on the shape of your icon and may require you to move the rectangles around for the best look. If this is the case ensure to move them by full pixel amounts for a consistent anti-alias. Select the blue line and the icon path (circle for the example). Object » Path Operations » Back Minus Front. Then select the orange and black path. Object » Path Operations » Unite. !<a href="/files/material-design-off-icon-step-6.png">icon</a> Create a few rectangles above your path like below. Then select all the paths and perform the _Back Minus Front_ operation. This is done to ensure nice anti-alias on the end of the slash. !<a href="/files/material-design-off-icon-step-7.png">icon</a> Delete the points at the end of the slash to complete the icon. !<a href="/files/material-design-off-icon-step-8.png">icon</a> This process may seem exhausting, but appears to be the quickest way to produce a result that matches the stock iconography. !<a href="/files/material-design-off-icon-step-9.png">icon</a> Hopefully you found this helpful and be sure to checkout <a href="http://materialdesignicons.com/">Material Design Icon</a>'s progress. Contributor features should be releasing soon to add your own custom icons to the collection. Most of the stock icons seem to follow this same pattern perfectly, but it is funny that a few do not. I think one of their designers is a bit more OCD than the other(s).