Loading...

Templarian - Design, Develop, and Deploy


Next Page

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).

AngularJS Upload Button

The goal is simply to combine the simple CSS on this <a href="http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/">tutorial</a> with a AngularJS directive. You *do not* need the CSS from the tutorial above as it is injected by the directive. ```html HTML for Button <button ng-upload="/api/import" ng-model="importForm.data"> Import File Data </button> <!-- Preview --> <pre ng-bind="importForm.data"></pre> <!-- Error Message --> <ng-messages for="importForm.data.$error"> <ng-message when="failed">Failed to import file.</ng-message> </ng-messages> ``` When used it should look like something below... Hopefully you find this helpful.

About those Icons

This blog post is basically about me refocusing my priorities. Some of you may know I have a long <a href="http://www.webos-internals.org/wiki/Icons">history</a> of doing <a href="http://modernuiicons.com/">icon</a> work. I have kind of strayed slightly from Open Source in the last few years and I'm not really happy with that realization. With that said from now on Community Open Source is going to be my primary focus. !<a href="/files/freelance_break.png">Break</a> I wrapped up my last freelance client for a while and replied back to those in the last month that I will not be taking on new clients. This is a pretty big change for those than know me, since I always like to be doing something. The _first_ dive back into Community driven Open Source will be done with a new icon sharing platform as seen on <a href="http://materialdesignicons.com">Material Design Icons</a>. This is still in early stages, but will progress relatively fast now that is has focus. !<a href="/files/freelance_mdi.png">Material Design Icons</a> Wait-a-minute, isn't 'Material Design' Android? Definitely, but I assume that was phrased more in context with Modern UI Icons. For every new icon you see by me there will be a <a href="https://github.com/Templarian">commit</a> in the other repository for the same icon (in their respective style). !<a href="/files/freelance_crossplatform.png">Android</a> Now that is all sorted out, what is this icon platform. It is more-or-less a contribution platform specifically aimed at icons. The main goal allows developers *and* designers to acquire icons in the formats and sizes they want. !<a href="/files/mdi_dialogview.png">Contributors</a> This goes a little further to ensure that everything can be downloaded with as few clicks as possible. Even just right clicking to directly download a single asset. !<a href="/files/mdi_contextmenu.png">Context Menu</a> All the next goals focus on the _contributor._ This starts with easy entry for new designers and removing the minor hurdle of GitHub. Developers embrace it as their best friend, but it really is not needed to add icons. !<a href="/files/mdi_becomecontributor.png">Become a Contributor</a> A designer can either import (not shown) or paste in SVG path data. The server uses this vector data to generate all assets and download options. Once the icon is in the system they can tag and categorize it appropriately. !<a href="/files/mdi_addicon.png">Add Icon</a> Once a contributor is in the system all five icons that were previously submitted are visible to the public and a welcome email is sent. From then on there are no reviews. Just developers with a comment button (a bright pink comment button). !<a href="/files/mdi_comments.png">Comments</a> A designer has a few icons in the system now, but what keeps them motivated to keep adding new icons. A full range of stats and metrics will track pretty much all interaction and views as it relates to the user / contributor relationship. This rich data set should help track which icons users are more interested in. More anonymous global metrics on this will also be shown as traffic increases. !<a href="/files/mdi_contributorview.png">Contributors</a> From here developers can view a contributor's gallery of icons and get links to their various social networks. !<a href="/files/mdi_contributorpage.png">Contributors</a> Those are all the high level features so far planned for the initial release. I am really excited to get this platform further along and open it to anyone that would be interested in alpha testing. !<a href="/files/mdi_community.png">Contributors</a> If you actually read this far just for a mention about <a href="http://modernuiicons.com">Modern UI Icons</a>, yes that whole site will shift to this new platform. The two sites will have very tight integration.