Exportación de Elementos Gráficos para Producción de Apps

Exportar todas las piezas para llevar a producción la app es el siguiente paso, con esta guía puedes hacerlo paso a paso para preparar todos los entregables:

Icono de la app:

Actualmente existen muchos dispositivos en los que cada uno de los íconos cambiará de tamaño. Dependiendo de los requerimientos del equipo de desarrollo, estos entregables pueden cambiar. Lo ideal es garantizar que el ícono de la app sea funcional para cualquier formato. Para eso podemos usar un poco de ayuda. Existen varios sitios web que exportan los iconos en todos los formatos que necesites para descargarlos en un archivo .zip. En este curso recomiendo que utilices: App Icon Maker, solo necesitas subir la imagen del icono y darle click en “Generate”.

De esta manera conseguirás tus piezas en todos los tamaños necesarios para llevar el icono de la app a producción.

Sign up:

La ilustración del Sign up debe ser exportada en png con transparencia, el fondo será agregado en la fase de producción por medio de código. Este archivo debe conservar la medida en la que fue creado el artboard ya que su uso será sólo para móvil.

Para exportar todos los archivos es importante mantener una nomenclatura para que sea fácil manejar cada uno en producción:

• No deben llevar espacios, estos deben ser reemplazados por "_" ej: foodie_signup

• No deben llevar caracteres especiales

• El nombre del proyecto debe ir primero siempre

• Todo debe ir escrito en minúsculas

Landing web:

Es importante tener claros los requerimientos de tu equipo de desarrollo, especialmente a nivel frontend, a la hora de exportar la ilustración del landing web. En este caso tenemos un tamaño definido por el wireframe, esta medida debe ser llevada a 2x al exportar y se repiten los mismos parámetros de nomenclatura para nombrar el archivo, excepto que debemos agregar un @2x para estos ej: foodie_landingweb_@2x.

En la opción de exportar podemos optar por que el @2x se ubique automáticamente en el nombre del archivo.

El archivo de nuevo debe ser en png transparente sin el fondo, al ser una pieza suelta es adaptable a cualquier tamaño conservando su cualidad responsive, el fondo puede funcionar aparte sin problemas.

Bullets:

Este proceso es igual a la ilustración del landing web, debe conservar su cualidad responsive. Deben ser exportadas en formato transparente e igualmente en 2x de su tamaño normal, repitiendo el proceso de nomenclatura para los nombres de los archivos.

Una vez tenemos listos todos los archivos exportados debemos optimizarlos para web, bajar el peso que tienen garantiza que las imágenes carguen más rápido. Para eso podemos usar: TinyPNG esta herramienta nos ayuda a comprimir la imagen sin que pierda calidad o sufra modificaciones.

Haciendo todo este proceso estamos listos para entregar todas las piezas a producción. Cuéntame si te queda alguna duda y la revisamos en los comentarios.