Los desarrolladores trabajan en puntos (pt), así que es necesario que antes de nada entiendas la diferencia que hay con los pixeles.
Cuando salió el primer iPhone en 2007, era muy fácil: 1pt = 1px.
Cuando años después aparecieron los teléfonos con pantalla retina, esta igualdad se rompió. 1pt equivalía a 2px… y hasta 3, con las nuevas pantallas que hay ahora en el mercado.
¿Qué me estás contando, Cris?
Que una pantalla sea retina significa que caben más pixeles por punto. Donde antes había 1, ahora hay hasta 3, por eso tienen más definición y se ve todo mejor.
¿Y hay que diseñar todo por triplicado? ¿Y sumarle Android?
No 🙂 Sigue leyendo y lo verás.
Un consejo: diseña siempre en @1x
Para evitar la locura de diseñar en decenas de pantallas distintas, se llegó a una especie de acuerdo:
Los diseñadores diseñamos en @1x y después exportamos los assets en todas las resoluciones necesarias.
Y eso es lo que hace precisamente Sketch cuando exporta assets:
Si dudas en qué tamaño escoger, en Sketch utiliza iPhone 8 a 375 x 667.
Si utilizas otro programa asegúrate de que pone este tamaño. Adobe, por ejemplo, tiene tendencia a poner los tamaños en @2x por defecto.
¿Qué se exporta como asset y qué no?
Pensemos en asset como cualquier recurso gráfico que se carga de forma externa.
De este modo podemos definir qué hay que exportar para el equipo de desarrollo y qué no es necesario.
Así, solo exportamos como asset:
Iconos complejos (más complejos que una simple redonda o cuadrado)
Botones
Logotipos
El equipo de desarrollo puede generar mediante código las sombras, desenfoques, fondos… etc. así como los bloques de navegación, títulos y demás que vienen predefinidos en cada sistema operativo.
Los datos (textos e imágenes), tampoco hace falta exportarlos, ya se cargan mediante archivos JSON o similares.
Cómo exportar assets: los 3 métodos
Exportar con selección directa
Puedes exportar cualquier elemento fácilmente seleccionándolo y, en el Inspector, selecciona “Make exportable”.
Como ves, por defecto exporta a @1x. Para añadir las otras resoluciones, simplemente haz clic en el primer icono que sale a la derecha de “Presets” y selecciona iOS o Android 🙂
Este método para exportar también está accesible desde File > Export Current Selection o en el icono Export del menú de herramientas.
También puedes exportar de golpe todo lo que Sketch considera que puede ser un asset. En este caso, selecciona File > Export… y te abrirá una ventana con las opciones:
Aquí podrás escoger qué quieres exportar como asset y qué no marcando el checkbox.
Las alertas que ves salen cuando el nombre genera un conflicto con otro asset. Para solucionarlo solo hay que cambiar alguno de los nombres conflictivos.
Exportar con “slices”
Ese método para exportar es menos preciso, pero sirve para exportar grandes zonas o bloques que deben ir juntos.
Seleccionas Slices cuando aprietas S en el teclado (también está en la barra de herramientas superior). El cursor se convertirá en un pequeño cuchillo.
Después solo tienes que dibujar arrastrando qué quieres exportar. Date cuenta de todos los cambios en pantalla.
En las capas, aparecerá un icono con un rectángulo y un cuchillo, el asset quedará rodeado por un borde discontínuo y se abrirá el panel de Make exportable en el Inspector (como en el paso anterior)
Exporta assets con ‘Drag & Drop’
Es el método más curioso. Personalmente solo le veo utilidad para exportar rápido elementos para enseñarlos, pero no para trabajar con ellos.
Para ponerlo en práctica solo selecciona la capa y arrástrala al escritorio, fuera de Sketch. Se exportará automáticamente en @1x.
Si quieres configurar cómo se exporta y cambiar la resolución, debes pulsar la tecla Option del teclado a la vez que lo arrastras.
Cómo exportar assets. El resumen:
Si has leído hasta aquí, ya habrás visto lo «fácil» que es exportar assets con Sketch: lo más complejo siempre suele ser decidir qué exportar y qué no.
Todo forma parte del proceso de diseño que se establezca: cuando tengas todos los assets, envíaselos a tu equipo de desarrollo junto con un enlace de Zeplin para que vean las pantallas y tengan una referencia de cómo y dónde va cada asset.
Te recomiendo que estés encima de ellos -con cierta distancia- para asegurarte de que comprenden exactamente cómo debe ir todo. Para ti puede ser muy obvio, pero probablemente el equipo de desarrollo vea por primera vez el diseño.
.SVG y te evitas generar 90 íconos en infinitas resoluciones. Aligeras el proyecto y además se pueden editar el color de relleno, sombreado bordes y demás con CSS.
Únete a 3.931 diseñador@s y recibe los mejores contenidos para crecer.
Resumen de privacidad
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies de terceros
Esta web utiliza Google Tag Manager para recopilar información anónima tal como el número de visitantes del sitio o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
.SVG y te evitas generar 90 íconos en infinitas resoluciones. Aligeras el proyecto y además se pueden editar el color de relleno, sombreado bordes y demás con CSS.