Art boards
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.
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.
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.
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.
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.
Si conoces y has usado las herramientas del «Pathfinder» en Illustrator; también te será familiar trabajar con las mismas herramientas dentro de XD.
«Pathfinder»
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.
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.
¡Hasta otro rato!
JRVstudio 