Adobe XD y las máscaras para contenidos - Tutorial de Adobe XD

Como ocurre con otros elementos de diseño dentro de Adobe XD, el trabajo con imágenes también es algo muy intuitivo y muy simple. Para ello, voy al menú desplegable de Archivo y voy a darle la opción de Importar. De esta manera, voy a poder importar la fotografía que yo quiera. En este caso, vamos a coger esta fotografía, vamos a decirle que queremos importarla y, como vemos, en este caso esta imagen podemos observar que tiene una proporción muy grande ya que mi mesa de trabajo o mi zona de visualización de mi prototipo es mucho más pequeña. Yo voy a poder cambiar aquí los parámetros, por ejemplo, dejarlo en 900 y, como tenemos activado el candado, podemos observar que en ambas proporciones se escala. Si yo vengo a cualquiera de las esquinas, al hacer clic y arrastrar podemos observar como cambia el tamaño, como digo, en proporción. Si desactivo la opción del candado, yo puedo, como podéis observar, distorsionar mi imagen. Voy a hacer un Control + Z, voy a volver a activar en este caso el candado para que las proporciones sean iguales, tanto de horizontal como de vertical, a la hora de modificar la fotografía. Otra de las cosas que podemos hacer, como en los elementos, en este caso, rectangulares, es la generación de los bordes redondeados. Voy a eliminar ese borde redondeado y veamos que también tenemos la posibilidad de visionar partes de nuestra fotografía sin tener que ir a editarlas en otra aplicación externa. Voy a coger esta herramienta, por ejemplo, que es la herramienta de Rectángulo, y voy a hacer esta zona de rectángulo. Ahora, simplemente voy a seleccionar ambos elementos, con la tecla de Mayúsculas selecciono los dos elementos, o pinchando y arrastrando, como podemos ver, voy a volver a seleccionar esos dos elementos. Y dentro del menú de Objeto vamos a poder crear la máscara que tenemos a través del atajo de teclado, en este caso Mayúsculas + Comando + M, o Mayúsculas + Control + M si estoy en un PC, y generamos una máscara de la zona de la imagen que vamos a trabajar. Voy a poder, como podéis observar, volver a modificar y a duplicar como quiera la imagen o voy a poder reencuadrar y centrar esa imagen. Para ello, si hago un doble clic podemos observar como puedo mover mi imagen dentro de esa zona de máscara. Cuando vaya en la parte exterior, podemos observar como tenemos la nueva visualización. Otra de las formas que vamos a poder generar este tipo de efectos va a ser directamente sobre el vector. En este caso, voy a generar aquí un círculo y lo que voy a hacer va a ser minimizar la ventana para ver en este caso la ventana que tengo en el escritorio. Aquí, por ejemplo, voy a abrir esta ventana de Personas y voy a pinchar y arrastrar sobre ese círculo. Podemos observar como el círculo se ha puesto de color azul. Voy a centrar todavía más esta zona para que lo veamos mejor y voy a coger esta imagen para irme justo encima del círculo. Al soltar, acabo de enmascarar, como podéis observar, esa imagen dentro del vector que tenía seleccionado. Lo mismo da que fuera un círculo, un rectángulo o un vector cerrado o creado con la pluma, funciona de igual forma que funcionaba la anterior, con un doble clic, como podéis observar, voy a poder modificar tanto el tamaño como recentrar la imagen en la zona que yo quiera. Y de este modo ya tengo centrada esa imagen dentro de esa máscara de imagen. De esta manera, o bien generando la importación primero de la imagen y después la zona que queremos visualizar de la misma, podemos trabajar las imágenes, o al revés, primero generamos el vector a través del que queremos ver la imagen y después colocamos la imagen encima.