Pixel Perfect
Diseñar para pantallas
Georgina Armisen
En esencia, es esta “tontería”
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente
¿El proyector nos deja apreciar la diferencia?
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente
http://med...
Un ejemplo más
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente
http://dcurt.is
¿Y por qué
es importante?
No todas las pantallas “leen” según que niveles
de transparencia (efectos anti-aliasing)
www.slashmobility.com
TECNOLOGÍA ...
Suma calidad
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?
www.abckit.es
Suma calidad (y premiable)
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?
www.abckit.es
• Laus de Oro a l...
Las cosas bien hechas suelen ser invisibles,
pero SOBRETODO
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante...
No sólo evitaremos esto
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?
¿De dónde surge?
Single fixed resolution de dispositivos tipo LCD
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Y este invento?
1600 ...
Pixel Art
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCE¿Y este invento?
Susan Kare
Tratar el color
para dispositivos
1
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
Preferencias del sistema > iMac (nativo)
2
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
Edit > Color Settings
3
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
Guardar para web: No sRGB
4
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
Apps accesibles
5
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
RESULTADOS
CON PERFIL SIN PERFIL
CÓDIGO CÓDIGO
6
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEColor
HSB vs RGB
Precisión
2
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Preferences > Units
3
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Preferences > Guides…
1
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Preferences > General
5
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
View > Snap to pixel
5
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
View > Pixel preview
Formas
1
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Capas de forma
2
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Formas complejas
3
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Bordes
Borde interior Borde centrado Borde exterior
4
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Un objeto, varios rellenos y bordes
Efectos
1
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Evita los efectos de capa
2
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Úsalos solo cuando es la mejor opción
3
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión
Incluso de manera individualísima
Pero lo más importante,
siempre será…
Entender el color y la forma
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://youtu.be/Mu...
Jugar con el color y la forma
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://youtu.be/U...
Entender la tipografía y el texto
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://vimeo....
Jugar con la tipografía y el texto
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://youtu...
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
http://vimeo.com/39260302Cultivar conocimiento
www.slashmobility.com
TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores”
www.codecademy.comTener curiosidad por el entor...
¡Muchas gracias!
georgina.armisen@slashmobility.com
Upcoming SlideShare
Loading in …5
×

Slash Friday diseño: Pixel Perfect

491 views
360 views

Published on

Nuestra última Slash Friday estuvo dedicada íntegramente al diseño. Aprendimos buenas prácticas a seguir cuando trabajamos con programas como Photoshop o Illustrator.

Published in: Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
491
On SlideShare
0
From Embeds
0
Number of Embeds
156
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Slash Friday diseño: Pixel Perfect

  1. 1. Pixel Perfect Diseñar para pantallas Georgina Armisen
  2. 2. En esencia, es esta “tontería” www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente
  3. 3. ¿El proyector nos deja apreciar la diferencia? www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente http://medialoot.com/blog/3-valuable-pixel-perfect-illustrator-techniques/
  4. 4. Un ejemplo más www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEEsencialmente http://dcurt.is
  5. 5. ¿Y por qué es importante?
  6. 6. No todas las pantallas “leen” según que niveles de transparencia (efectos anti-aliasing) www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante? Y esto nos pasó a nosotros (A mí, confieso CONFIESO)
  7. 7. Suma calidad www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante? www.abckit.es
  8. 8. Suma calidad (y premiable) www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante? www.abckit.es • Laus de Oro a la mejor app en la categoría de móviles y tablets en el 2012. • Top 1 en la categoría de Educación para iPad. • 3ª mejor app para iPad en el Rewind del 2011 en España. • 5ª mejor app para iPhone en la categoría de Educación en el Rewind del 2011 en España.
  9. 9. Las cosas bien hechas suelen ser invisibles, pero SOBRETODO www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante? www.ustwo.com If your designs aren’t done properly it can leave them (users) with a poor impression of the product, and potentially, of your brand “ ”
  10. 10. No sólo evitaremos esto www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCE¿Importante?
  11. 11. ¿De dónde surge?
  12. 12. Single fixed resolution de dispositivos tipo LCD www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCE¿Y este invento? 1600 x 1200 800 x 600
  13. 13. Pixel Art www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCE¿Y este invento? Susan Kare
  14. 14. Tratar el color para dispositivos
  15. 15. 1 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEColor Preferencias del sistema > iMac (nativo)
  16. 16. 2 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEColor Edit > Color Settings
  17. 17. 3 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEColor Guardar para web: No sRGB
  18. 18. 4 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEColor Apps accesibles
  19. 19. 5 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEColor RESULTADOS CON PERFIL SIN PERFIL CÓDIGO CÓDIGO
  20. 20. 6 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEColor HSB vs RGB
  21. 21. Precisión
  22. 22. 2 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Preferences > Units
  23. 23. 3 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Preferences > Guides…
  24. 24. 1 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Preferences > General
  25. 25. 5 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión View > Snap to pixel
  26. 26. 5 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión View > Pixel preview
  27. 27. Formas
  28. 28. 1 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Capas de forma
  29. 29. 2 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Formas complejas
  30. 30. 3 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Bordes Borde interior Borde centrado Borde exterior
  31. 31. 4 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Un objeto, varios rellenos y bordes
  32. 32. Efectos
  33. 33. 1 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Evita los efectos de capa
  34. 34. 2 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Úsalos solo cuando es la mejor opción
  35. 35. 3 www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEPrecisión Incluso de manera individualísima
  36. 36. Pero lo más importante, siempre será…
  37. 37. Entender el color y la forma www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores” http://youtu.be/MuGj6gcVjx0
  38. 38. Jugar con el color y la forma www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores” http://youtu.be/Ur-EG0_hN3o
  39. 39. Entender la tipografía y el texto www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores” http://vimeo.com/26757692
  40. 40. Jugar con la tipografía y el texto www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores” http://youtu.be/HF4Q4DfaSeM
  41. 41. www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores” http://vimeo.com/39260302Cultivar conocimiento
  42. 42. www.slashmobility.com TECNOLOGÍA MÓVIL A TU ALCANCEApps “para diseñadores” www.codecademy.comTener curiosidad por el entorno
  43. 43. ¡Muchas gracias! georgina.armisen@slashmobility.com

×