Tipos de exportación

Screen Shot 2018-04-19 at 4.07.18 PM

La pregunta ahora es; ¿cómo le entrego la maqueta a un “Developer“?; y quizás; ¿qué usa el Programador y qué necesita que yo como Diseñador le entregue?

Como Diseñador debes de entregarle varios formatos al Programador para que le dé vida a tu maqueta pero más aún debes de darle un cariño enorme a los detalles de tu maqueta para que el Programador no se pierda y debes de trabajar junto a el para hacerle la vida más fácil; a no ser que el mismo te diga: “Lo siento, trabajo solo; no me llames; yo te llamo“… jejejejejejejej…

Anyway; vamos a separar esta sección en pequeñas secciones para hacer la entrega más llevadera. Primero vamos a mencionar que a un programador se le debe de entregar todos o algunos formatos que voy a mencionar a continuación, al momento de hacer tu exportación del trabajo.

Vas a exportar tu maqueta en los formatos:

  1. PDF (Portable Document Graphic) — Compartir el documento completo.
  2. SVG (Scalable Vector Graphic) — Compartir elementos gráficos, logos e iconos.
  3. PNG (Portable Network Graphic) — Compartir imágenes con transparencias.
  4. JPEG (Joint Photographic Expert Groups) — Compartir imágenes fotográficas.

Exportemos primero el PDF de la maqueta; seleccionaremos File / Export / All Artboards.

Screen Shot 2018-04-19 at 4.26.15 PM

Adobe XD nos preguntará en dónde deseamos guardar el PDF?; vamos a crear un nuevo Folder en nuestra computadora, preferiblemente adjunto a nuestro proyecto; seleccionamos el formato; escogemos todas las páginas como un solo PDF o separadas las páginas; y presionamos el botón de Export All Artboards.

Screen Shot 2018-04-19 at 4.35.24 PM

Como resultado obtenemos un PDF con todas las paginas de nuestra maqueta. Este documento lo podemos hasta imprimir para comentar con el programador.

Screen Shot 2018-04-19 at 4.37.53 PM

Mi documento pesó unos 238 MB; así que pueden imaginar los tamaños que podemos obtener de maquetas que sus diseños son enormes! OK esa fue la parte más fácil; pero ahora viene lo interesante. La maqueta que diseñamos tiene unas doce páginas y cada página contiene fotos, iconos, textos, vectores agrupados, etc, etc. Mi consejo en este momento es que si durante el proceso de diseño no te has detenido a nombrar adecuadamente tus layers; te aconsejo que te tomes un tiempo para nombrarlos adecuadamente.

¡Ready! OK…

Vas a empezar a exportar cualquier formato de tu preferencia; sea el PNG, sea el JPG o sea el SVG. Lo que necesitamos es que exportes página por página, y que cada vez que exportes página por página; que nombres los folder de cada página que van a contener los elementos de cada una. Comencemos por la primera página!

IMG_6204

Esta página se llama “Splash” y la misma contiene un rectángulo (vector), color azul turquesa; el texto o palabra “studio” con la fuente San Francisco; y el logo JRV es una imágen blanca en formato PNG. Asi que tenemos: vectores (el cuadrado), una fuente, y una imágen en pixeles en PNG. Si seleccionas solo el nombre “Splash” al tope de la página y lo exportas digamos como un PNG; vas a obtener un folder con el diseño de la página “Splash” en su totalidad pero en 3 archivos (.png) de tamaños distintos. ¿Por qué? por que Adobe XD siempre exporta la maqueta en esos tres tamaños debido a los distintos tamaños de pantallas que existen hoy día. 1x es para pantallas Non-Retina o Non-HIDPI; 2x y 3x son para las pantallas Retina Display en adelante. Hoy día existen pantallas que tienen una densidad exagerada de unos 400% (xxxhidpi).

Voy a tomar otro ejemplo; escojamos la página de “Password“… selecciona con el ratón de tu computadora haciendo un click y arrastrando desde arriba hasta abajo. Verás que todo se marca; todo queda al descubierto. La foto de fondo, la imagen del teclado iOS, los textos de username y password con sus respectivas líneas.

Screen Shot 2018-04-19 at 7.34.59 PM

Seleccionas File/Export/Selected o “Command +e“; luego crear un folder con el nombre de password y seleccionas el formato PNG; para iOS y que guarde todos los diseños empezando desde el 1x como se muestra en la siguiente imagen.

Screen Shot 2018-04-19 at 7.24.08 PM

Luego seleccionas el botón de Export; buscas el folder donde guardaste el archivo y notarás todo lo que guardó. Aquí es que notamos la ausencia de nombrar adecuadamente los layers y las imágenes durante el proceso de diseño. Por ejemplo vemos la foto de fondo con su nombre de compra de iStockphoto.com. Observa que tiene la original como 1x; aunque no lo dice; luego @2x; y finalmente @3x. Observa los tamaños que van desde 1.8MB la de 1x; 7MB la de 2x; y 14.5MB ;a de 3x.

Screen Shot 2018-04-19 at 7.46.45 PM

Quizas no tengas aún el ojo para ver los detalles pero la imágen 1x se ve media borrosa; la 2x se vé más sharp en los detalles y la 3x es más grande. Aquí te dejo las tres fotos, tocalas para que se abran y trata de ver la diferencia. Orejita, notarás la diferencia en el brillo de las hojas de los árboles.

Siguiendo este patrón se guarda el rectángulo opaco del centro el cual difumina la foto; y lo mismo sucede con las palabras Username y Password con la línea y la imagen del teclado iOS; todo en 1x; 2x; y 3x. De haber nombrado el grupo del Username y el Password debidamente no hubieramos obtenido esos nombres alocados de “Symbol 1 – @ 2x“. Recuerden nombrar correctamente y adecuadamente todo lo que utilicen en sus maquetas. Esta página solamente pesa 24.7MB.

screen-shot-2018-04-19-at-8-09-50-pm.png

Terminemos por hoy hasta aquí y mañana continuaremos realizando lo mismo exportando las demás páginas usando los formatos restantes, pero esta es la temática a realizar con todas las páginas. Salvar cada una en su propio Folder para tener todo bien organizado.

¡Buenas Noches!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s