Imagenes.
Las imagenes son un recurso que indica el exito de una aplicación o sitio Web ya que una aplicación con solo texto es una aplicación que dejará de tener visitas rapidamente, porque no atrae al usuario de la aplicación. Para evitar que la monotonía del lector haga abandonar rapidamente al usuario, es recomendable insertar imagenes expresivas y a la par divertidas.
Con Xd se pueden insertar imagenes pero para ello se necesita un contenedor en el cual se van a insertar las imagenes.
Contenedor para las imagenes.
En todos los proyectos cuando quieras insertar una imagen la tendrás que insertar dentro de un objeto. Por ejemplo vamos a insertar una imagen dentro de la forma que hicimos en la clase teórica.
Para ello, lo primero que tenemos que tener es la imagen que queremos usar siempre con un tamaño adecuado para nuestro proyecto. Si por ejemplo tenemos que el objeto tiene unas dimensiones de 311x232, la imagen que queremos usar tendrá que tener un tamaño equivalente a la forma para que no se muestre deformada.
Es recomendable el uso de imagenes vectoriales ya que por mucho que se hagan zoom, no se va a mostrar deformada dicha imagen en calidad. De hecho ADOBE Xd está pensado para que pueda trabajar como complemento de otros productos de ADOBE como Photoshop o Illustrator, lo cual la inclusión de este tipos de archivos es una funcionalidad muy buena.
Siempre es recomendable tener un directorio en el que se incluyan los archivos multimedia que vas a utilizar. Aunque Xd no necesita un directorio para acumular dichos archivos, es recomendable tener cierta organización en la gestión de archivos que incluirás en tus artboards.
Para escoger una imagen iremos al Panel de Herramientas, en las tres rayas 
seleccionaremos el Menú de Archivos desplegable y escogeremos Importar.
Seleccionas la imagen específica.
Y al pulsar sobre el botón de Importar, se insertará la imagen por encima del objeto seleccionado del artboard, pero no estará integrada dentro del objeto.
Observa que la imagen aparece con los puntos de anclaje y redimensión para editar sus bordes y tamaños y posicionamientos de sus ejes.
Arrastre de imagenes.
La otra opción de incluir imagenes dentro de nuestro artboard es hacer que coger la imagen y arrastrarla directamente al objeto en cuentión. Esta forma de actuar difiere mucho de la importación, ya que la imagen se incrusta en el objeto en lugar de estar dentro del mismo.
Así si creo un nuevo rectángulo y la imagen anterior la arrastro directamente al nuevo rectángulo, la imagen se acoplará al objeto y formará parte de él.
El resultado que la imagen queda completamente integrada en el objeto el cual se puede redimensionar y ajustar como se desee, en lugar de la anterior, que la imagen no se ajustaba al objeto y quedaba sobre el mismo.
Ahora a la imagen se puede aplicar estilos y efectos como difuminar la imagen. Para ello desde el Panel de Ejecución y Representación cambias el Desenfoque de fondo a Desenfoque de objeto y escoges la cantidad numérica para el desenfoque Gausiano.
Crear una galería de imagenes
Insertar imagenes es una acción habitual en los programas de ADOBE, por lo que no va a ser diferente en este software. En esta parte vamos a crear una galería de imagenes de forma sencilla. Para ello recuerda que las imagenes deberán de estar adaptadas al entorno de trabajo del artboard (si vas a trabajar con Web o con dispositivos móviles, la imagenes estarán diseñadas para tal fin con tal tamaño y resolución).
Crearé un objeto rectángulo que editaré con un color de fondo guardado de la paleta del artboard y le daré una opacidad para que casi no se vea el rectángulo. Utilizaré las teclas Crtl + C / Crtl + V para copiar el objeto y generar un nuevo objeto con las mismas propiedades que el primero.
Selecciona cada objeto y desde el Menú derecho de alineación 
, centraremos los objetos en el centro del artboard. Fijate que cada vez que movemos los objetos respecto a otros, nos aparecen las guías de posicionamiento para las ayudas visuales.
Y ahora en cada rectángulo insertaré una de mis imagenes arrastrandola desde mi carpeta de imagenes preferida. El resultado se muestra a continuación.
Ajustando la Mesa de Trabajo.Sin el ajuste de la Mesa de trabajo cuando ejecutemos para visualizar la aplicación veremos que se muestra una pantalla móvil en el que se ven las cuatro imagenes de forma vertical. Pero podemos añadir efectos de visualización gracias a la Mesa de Trabajo. Teniendo una Mesa de trabajo dentro del proyecto (y ordenado por capas desde el menú derecho de Capas), la línea de Ajuste del artboard de ADOBE Xd nos permitirá escoger el área de visualización al cargar el proyecto, de manera que si lo pongo en la segunda imagen, al ejecutarla nos aparecerá la pantalla solo hasta la segunda imagen y el resto estará oculta y habrá que desplazarse con el scrollbar para verlas.
Has podido ver como con pocos movimientos se ha generado una galería de imagenes de manera sencilla y como poder configurar basicamente su aspecto de reproducción con muy pocos clics. En la proxima clase aprenderemos como alinear elementos del menú de Capas e iremos viendo también otras herramientas y accesos rápidos.
