Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Dcn 2009
Dcn 2009
Cargando en…3
×

Eche un vistazo a continuación

1 de 39 Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (20)

Anuncio

Keynote font-icon

  1. 1. Martin Charpentier & Thibaut Baillet CSS3 : L'ÈRE DES "ICON FONTS"
  2. 2. Front-end développeur @bailletthibaut thibaut.baillet@mfglabs.com Thibaut Baillet Lead Designer @im_charp martin.charpentier@mfglabs.com Martin Charpentier
  3. 3. MFG Labs www.mfglabs.com twitter: @mfg_labs contact@mfglabs.com
  4. 4. TECHNIQUES
  5. 5. Grilles guides et cercles(Pour conserver une unité d’un pictogramme à l’autre il faut s’astreindre à respecter des règles)
  6. 6. Proportions et formes(Le respect strict de règles mathématiques n’est pas indispensable. L’utilisation de formes géometriques permettent de structurer plus harmonieusement les courbes et formes qui constituent l’icône.)
  7. 7. Du fichier .AI au .OTF GLYPHS app
  8. 8. Glyphs
  9. 9. Copier / coller
  10. 10. Ascendante & descendante
  11. 11. Alignement
  12. 12. Assignement des unicodes
  13. 13. UNICODE
  14. 14. Unicode : standard pour les caractères Des milliers d’unicodes pour les formes et symboles (Arrows, Currency Symbols, Geometic Shapes, etc...) Standardise l’utilisation d’icônes
  15. 15. Assignement logique d’unicode MFG Labs Icons Name Unicode Pencil 0x1f4c5 Cloud 0x2601 Fallback Anchor 0x2693
  16. 16. Private use area Assignement au gamme private use plutôt qu’à des unicodes correspondant à des lettres Range : E000 ... F8FF (6400 UNICODES)
  17. 17. www.fileformat.info
  18. 18. http://www.unicode.org/charts/
  19. 19. HTML5 & CSS3
  20. 20. Les formats (compatibilités) EOT AA WOFF AA TTF AA
  21. 21. Compatibilités mobiles SVG AA TTF AA
  22. 22. @font-face
  23. 23. Font face Kit
  24. 24. Font face Kit
  25. 25. Class générique
  26. 26. Implémentation CSS HTML
  27. 27. Implémentation CSS Fix IE7 & 8 https://gist.github.com/Thibaut-B/5383783 HTML
  28. 28. Customisation 1x 2x 3x
  29. 29. Customisation
  30. 30. Customisation
  31. 31. Customisation
  32. 32. Customisation
  33. 33. Customisation
  34. 34. Retina ready
  35. 35. Performance Image sprite : 650kb Yslow: 82 Google Speed Score : 90 TTF Font : 11kb Yslow: 88 Google Speed Score : 96 * source : http://goo.gl/tpOKt
  36. 36. http://mfglabs.github.io/mfglabs-iconset/ http://www.fontello.com
  37. 37. MERCI Front-end développeur @bailletthibaut thibaut.baillet@mfglabs.com Thibaut Baillet Lead Designer @im_charp martin.charpentier@mfglabs.com Martin Charpentier
  38. 38. http://designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/ https://github.com/blog/1135-the-making-of-octicons http://www.somerandomdude.com/2012/01/31/font-embedding-icons-the-right-way/ http://www.codestyle.org/css/at-font-face/StandardUnicodeIconsWebFonts.shtml http://www.fileformat.info/info/unicode/char/a.htm Liens utiles

×