Say Hello to Octicons

Say Hello to Octicons

Cameron McEfee and Jon Rohan talk about GitHub's icons.

64827b31aef81498662e8af4bd6d5157?s=128

Jon Rohan

July 21, 2012
Tweet

Transcript

  1. 21.

    UNIQUE METAPHORS • Octocat • Repo • Issue • Fork

    • Commit • Pull Request • Push • Submodule • Gist • Etc. Saturday, July 21, 12
  2. 22.

    OLD METAPHORS • Octocat • Repo • Issue • Fork

    • Commit • Pull Request • Push • Submodule • Gist • Etc. Saturday, July 21, 12
  3. 23.

    NEW METAPHORS • Octocat • Repo • Issue • Fork

    • Commit • Pull Request • Push • Submodule • Gist • Etc.           Saturday, July 21, 12
  4. 44.

    Octicons         

                               Saturday, July 21, 12
  5. 51.

    FLEXIBLE SIZES • 16px: Optimized for 16px. Never scaled •

    32px: Optimized for n*32px. Scaled when necessary. Saturday, July 21, 12
  6. 61.

    2-UP VIEW • Window > Application Frame • Window >

    Arrange > New Window for …psd • Window > Arrange > 2-Up Vertical Saturday, July 21, 12
  7. 71.

    THE MAGIC 2048 2048 16 = 128 2048 32 =

    56 Saturday, July 21, 12
  8. 75.

    FILE SIZE IS WEIRD Size Grid Quality File Size (kb)

    512 4 Meh 28 512 8 Meh 27 1024 0 Good 37 1024 32 Meh 29 1024 64 Bad 2048 32 Good 33 2048 64 Good 33 2048 128 Good 33 Saturday, July 21, 12
  9. 76.

    OUR FINAL FILE • Cap-height/x-height = 2048 points • Units

    per em = 2048 points • Grid spacing = 32 Saturday, July 21, 12
  10. 89.

    OTF > WEB FONT FONT QUIR L .otf .eot .svg

    .ttf .woff Saturday, July 21, 12
  11. 92.

    @font-face { font-family: 'Octicons Regular'; src: font-url('octicons.eot'); src: font-url('octicons.eot#iefix') format('embedded-opentype'),

    font-url('octicons.woff') format('woff'), font-url('octicons.ttf') format('truetype'), font-url('octicons.svg#newFontRegular') format('svg'); font-weight: normal; font-style: normal; } @FONT-FACE Saturday, July 21, 12
  12. 93.

    CSS CLASSES <span class="mini-icon search"></span> .mini-icon { ... -webkit-font-smoothing: antialiased;

    } .mini-icon.search:before { content: "\f02e"; } Saturday, July 21, 12
  13. 100.

             

                                                                  ALL THE COLORS Saturday, July 21, 12
  14. 109.

    UPDATES ARE TEDIOUS 1.Icon concept 2.Draw 2 icons 3.Copy into

    Illustrator 4.Copy into Glyphs 5.Export font 6.Convert font 7.Update font 8.Deploy GitHub Saturday, July 21, 12
  15. 121.

    THANKS @JONROHAN @CAMERONMCEFEE       

                           Saturday, July 21, 12