“On the Go”

Me quiero hacer una encomienda, me quiero retar! Estoy en el desafío de ver qué aplicaciones móviles son o se están convirtiendo en el substituto de una aplicación de escritorio. Ayer descubrí por error una nueva de muchas que he encontrado, que le veo muy buenas posibilidades. Se llama Vectornator Pro!

Por lo poco que pude usar y ver en sus demos, puedes literalmente hacer ilustraciones con la misma usando solo tu iPad y exportar el arte a formatos como PNG y muchos más. Tambien puedes compartir tus vectores con la nube de Adobe para editar luego con Illustrator.

Baja Vectornator y comienza hacer el salto al diseño “on the go” como le digo yo!

Dición!

ícono

Al principio de esta serie de “post” sobre Adobe XD les mencioné que XD tiene una virtud poderosa, y es que trabaja con vectores como Adobe Illustrator. Este don es muy bueno debido a que no importa cuanto achiques o agrandes un vector, el mismo se verá bien debido a que los vectores son meramente cálculos matemáticos y no son pixeles; forma en la que trabaja por ejemplo Adobe Photoshop.

Screen Shot 2018-04-13 at 1.16.34 PM

Como recordarán nos quedamos diseñando la barra inferior de nuestra maqueta, e importamos de las maquetas para iOS una barra para colocar iconos. Eeeee… Mirándola bien, no la voy a usar!; vamos a usar y crear nuestros propios iconos. Hoy día usando servicios como: Adobe Stock, Getty Images, iStock, Pond5 y muchos otros servicios que existen en la internet, para comprar fotografías y contenido; podemos encontrar iconos ya creados para ahorrarnos muchos dolores de cabeza o adelantar camino. Ejemplo: digamos que estos iconos los quiero usar pero necesito simplificarlos para que sean propios de la maqueta creada. Si los iconos están creados en vectores, podemos usar dos programas para alterarlos: Adobe XD o Illustrator. Vamos a usar XD!

Screen Shot 2018-04-13 at 1.21.47 PM

Para la sección de Diseño gráfico voy a usar solamente la pluma. Utilizando nuestra herramienta de selección, la cual accedemos a ella presionando la tecla “v” y realizando un “double click” en el vector, podemos seleccionar los vectores que deseamos eliminar.

Screen Shot 2018-04-13 at 1.41.51 PM

Notarás que a casi todos los iconos les eliminé detalles en sus vectores para simplificarlos un poco más; pero el icono de la foto lo cambié por completo. El mismo lo eliminé y usando Adobe XD utilicé un rectángulo grande y muchos pequeños sobrepuestos. Luego los agrupé todos y utilizando las herramientas del “Pathfinder” que se encuentran al lado del botón del “Repeat Grid” pude crear un nuevo icono representativo de un negativo de video. Luego los colocamos juntos, los alineamos y el resultado lo vemos en la siguiente imagen.

Screen Shot 2018-04-13 at 1.46.32 PM

¡Eso es todo por hoy! Sigan diseñado sus páginas. Recuerden utilizar el esquema inicial de aquel “brainstorming” que crearon al principio de esta serie; o hagan como yo, que estoy creando las páginas según llega la musa y según les voy escribiendo estos “post“, jejejejejejejeje! ¡Salven sus trabajos! “Command + s“…

Screen Shot 2018-04-13 at 2.10.30 PM

La semana que viene comenzaremos a trabajar con el prototipo. No se lo pierdan!

¡Buen fin de semana!

Art boards y Vectores

Screen Shot 2018-03-27 at 2.11.47 PM Art boards

Screen Shot 2018-03-27 at 12.53.54 PM

Cuando mencionamos la palabra “Art boards“, estamos hablando de la página o lugar en donde hacemos el diseño de la aplicación que tenemos en mente. Si diseñamos para el iPhone y escogemos un modelo de plantilla, vemos en el sub menú que el iPhone X tiene por ejemplo una resolución de 375 pixeles x 812 pixeles a diferencia de las versiones Plus del iPhone 6/7/8; que tienen una resolución de 414 pixeles x 736 pixeles. Por defecto o “default” Adobe XD diseña a un tamaño básico de 1x – (No es HiDPI) o sea no es a 2x – o mejor conocido como el “Retina Display“. Para poder diseñar a un tamaño HiDPI debes de duplicar las plantillas. Si utilizamos el tamaño de un iPhone 6/7/8 y multiplicamos la resolución x 2, obtenemos un art board de 750 pixeles x 1,334 pixeles. Vean la diferencia de tamaño entre un art board 1x y otro art board 2x para el mismo celular.

Screen Shot 2018-03-27 at 1.17.50 PM

Si colocamos la misma imagen en ambas plantillas podemos ver la diferencia en tamaño. Quizás en este post no puedas ver la diferencia en la resolución; pero puedo apostar y estoy seguro de que la foto a 1x dentro de un art board a 2x, vas a ver la imagen borrosa.

Screen Shot 2018-03-27 at 1.33.47 PM

Si exportamos los art boards y los abrimos en Photoshop CC, puedes ver el tamaño de cada imagen. La imagen 1x (375 px X 667 px) tiene un tamaño de 732.8K; o sea no llega ni a 1 Mega, versus la imagen 2x (750 px X 1,334 px) que obtuvo un incremento en tamaño a 2.86M (Megas). Ambas a la resolución oficial para web de 72 pixeles por pulgada. Por mi experiencia, puedo ver la diferencia en el área de los dientes.

Screen Shot 2018-03-27 at 1.30.55 PMScreen Shot 2018-03-27 at 1.31.27 PM

Screen Shot 2018-03-27 at 1.55.43 PM Vectores

Si hacemos una comparación, podemos decir que Adobe XD es un mini Illustrator; debido a que Adobe XD contiene una herramienta llamada el “Pen Tool“. La cual ya sabes acceder con el atajo del teclado, usando la tecla “p“. Con la pluma puedes crear vectores rectos, curvos y cerrados. Pero si te gusta usar Illustrator, no hay problema! Entre Adobe XD e Illustrator puedes copiar y pegar cualquier vector trabajado. Digamos que diseñaste un icono de humano en Illustrator; para llevarlo a XD solo debes de darle un “Copy” en Illustrator y luego un “Paste” en XD.

Screen Shot 2018-03-27 at 2.14.41 PMScreen Shot 2018-03-27 at 2.15.24 PM

Adobe XD no solo entiende que estas pegando un vector de Illustrator; si no que también respeta la transparencia de la imagen y si le das un “double click” al vector que acabas de pegar en XD; también puedes alterar los vectores a gusto.

Screen Shot 2018-03-27 at 2.28.35 PM

Si conoces y has usado las herramientas del “Pathfinder” en Illustrator; también te será familiar trabajar con las mismas herramientas dentro de XD.

Screen Shot 2018-03-27 at 2.31.19 PM

“Pathfinder”

Screen Shot 2018-03-27 at 2.31.06 PM

Al colocar la imagen en vectores una encima de otra puedes combinarlas tanto para crear vectores nuevos o destruir o modificar para obtener nuevos resultados. Vean como tomé la imagen del humano; traslado su cabeza al lado izquierdo y con la herramienta del “Pathfinder – Exclude Overlap” pude eliminar el centro entre ambos vectores.

Screen Shot 2018-03-27 at 2.31.43 PM

Utiliza en tu práctica las herramientas de Adobe XD para crear todo tipo de icono dentro de tu nueva maqueta y tu aplicación será única. Recuerda usar los atajos del teclado para tener acceso más rápido a ellas. Verás que en poco tiempo estarás manejando el programa con la familiaridad con que usas Illustrator.

Screen Shot 2018-03-27 at 2.30.18 PM

¡Hasta otro rato!