Exportación de Elementos Gráficos para Producción de Apps
Contenido del curso
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.
Elizabeth Vega Rosas
Aruzidna Sánchez Alonso
Alejandra Avendaño
Juan Esteban Galvis
Leonel Vega Vargas
Hanz Rodriguez Emiliani
Laura Moreno
Leonel Vega Vargas
Famitry ㅤㅤㅤㅤㅤㅤ
Pedro Isaac Aguilar
Alcides Cervantes
Carolina Gómez
MARIA TERESA PANIAGUA RIVERA
erika rojas
Aquí dejo la guía con una lista to-do para no olvidar nada.
Icono de la app:
Sign up:
Landing web:
Bullets:
Gracias por tu resumen, es de mucha ayuda :)
Hola! tengo una duda. Las ilustraciones que suba a la redes sociales las debo exportar con x2? o eso solo aplica para landing?
Considero que en 1x (Normal) está bien, para desarrollo web es bueno usar 2x por si hay modificaciones en los tamaños al momento de programar pues la imágen sea bastante grande para no sufrir posibles fallos o algo así.
No porque por lo general cuando tienes que diseñar una imagen para redes sociales ya tienes unas dimensiones fijas en donde si te pasas o la haces más pequeña más bien te puede afectar cuando la subas. Por eso en caso lo ideal es que lo exportes en resolución para pantallas, 72px. Saludos :)
Gracias por toda la info, pero me gustaría saber como es el proceso con imágenes exportadas con formato SVG
Muchas gracias! valiosa información. Super importante esa parte de optimizar el peso de las imagenes y también como ahorrar tiempo en la cantidad de tamaños que se deben entregar de las imagenes al equipo de producción.
Me pregunto si ....siempre se usan las imagenes en 2x para landing web.
Es lo ideal no solo para este caso que fue una landing sino a nivel general de cualquier recurso que vayas a utilizar en un sitio web lo exportes siempre en 2x.
Gracias por el aporte!!
No tenía ni idea que las ilustraciones para web debían ser exportadas a 2x. Muchas gracias por enseñar estos relevantes puntos y ahorrarnos un quebradero de cabeza frente al equipo de desarrollo a la hora de pasarles nuestros archivos.
Aqui el link que yo uso para hacer Icons, tambien sirve para covertir casi todo, echenle un vistazo y espero les ayude https://www.online-convert.com/
Gracias. Rescato que todo llegue a buen puesto es importante el ónden y buena comunicación con mi equipo.
Gracias
Una pregunta, si el fondo tiene varios colores ¿se envían todos los códigos? y si es así ¿como hacen para saber la distribución de esos colores en el fondo?
