Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Aprende Experience Design CC

Creación de un blog mediante repetición de grid en Adobe XD

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
Uno de las opciones más importantes y útiles que nos encontramos en Adobe Experience Design es la posibilidad de crear repeticiones de elementos a partir del grupo que nosotros le indiquemos, algo que nos ahorrará mucho tiempo en la creación de blogs o galerías fotográficas.

Transcripción

Una de las funciones más interesantes que nos encontramos dentro de Adobe XD, posiblemente sea la opción de "Repetir Grids", sobre todo cuando estamos trabajando con diferentes elementos modulares que es tienen que ir repitiendo continuamente. Un claro ejemplo sería un bloc. Una vez que hemos definido la miniatura, la previsualización de un artículo, los siguientes se tienen que repetir. Veremos cómo realmente Adobe XD nos pone muy sencilla esta tarea y esta función y nos permite de algún modo importar de forma masiva tanto imagenes como textos para modificar por ejemplo, los títulos e incluso los contenidos. Vamos a ver un ejemplo práctico. Vamos a crear rápidamente una plantilla. Empezaríamos trabajando, por ejemplo, con un rectángulo. Este espacio sería adecuado para posicionar nuestra imagen. Y debajo de este rectángulo vamos a crear otro más. Vamos a "Ctrl+C", "Ctrl+V", estiramos. Dentro de este vamos a crear primero un título. Voy a hacerlo mediante una caja de texto. Entonces aquí vamos a poner: "ESTO ES EL ESPACIO PARA UN TÍTULO". Vamos a dejar espacio, por si tenemos títulos más largos. Y continuaremos. Vamos a duplicar con la tecla "ALT". Modificaremos el tamaño desde el panel lateral. Vamos a decir que trabaje con un tamaño de 15. Por ejemplo, algo más pequeño. Vamos a poner minúsculas: "Yo soy la descripción del artículo". Y lo que voy a hacer para no estar escribiendo es copiar y pegar rápidamente: "Ctrl+C", "Ctrl+V". Y vamos a llenar con texto rápidamente. Vamos a darle un poquito más de espacio. Allí estamos. Y por último, creamos el botón de "Leer más", y lo posicionamos. Vamos a darle un poco más de tamaño esta vez. Vamos a decirle 17, un punto intermedio entre el título. Vamos a seleccionar, y le decimos que trabaje directamente, por ejemplo, en "Bold" para que se previsualice mucho mejor. Lo ponemos más o menos por aquí. Y lo que haremos será buscar una fotografía. Yo voy a abrir la carpeta del curso directamente. Vamos a trabajar con una fotografía de aquí. Una vez que tenemos definido nuestro modelo de artículo, podemos seleccionarlo. Vamos a primero de todo hacer la mesa de trabajo más grande. Hacemos clic sobre el título, estiramos. Nos marca el punto de visión para que tengamos en cuenta a partir de dónde aparece el scroll que es lo que queda posicionado más arriba. Y lo que hacemos es ahora sí seleccionar, y le decimos que nos cree una repetición. Vemos que nos aparecen las flechas donde nosotros vamos a poder simplemente ir estirando. Lo interesante es que para que tengamos algo más de dinamismo, que no siempre se esté repitiendo la misma imagen en mismo título, podemos modificarlo directamente seleccionando. Vamos a seleccionar la primera. Y decimos desde la carpeta vamos a coger un bloque de imagenes. Estas tres y las arrastramos al documento. Automáticamente vemos que se nos va a modificar todo nuestro bloque, y ocurrirá lo mismo si trabajamos con un documento txt de texto plano. Vamos a la carpeta. Y le decimos que automáticamente el texto plano lo arrastre aquí. Vemos como nos está generando "Soy un texto 1", "Soy un texto 2", un texto diferente para cada título que nosotros podemos definir directamente desde el documento txt o incluso lo puede definir el propio cliente. En todo momento vamos a poder modificar el espacio entre las diferentes artículos. Simplemente nos posicionamos encima. Vemos que nos cambia de color y haciendo clic y arrastrando podemos modificar. Si tuviéramos un linceo más grande podríamos hacer una expansión vertical y horizontal simultáneamente, así que no solamente nos va a servir para crear, por ejemplo, blocs, sino que también podríamos crear galerías de imagenes, tiendas o elementos que se tengan que repetir de forma modular en bloque.

Aprende Experience Design CC

Descubre esta novedosa herramienta que pone Adobe a tu disposición, Adobe XD, para trabajar la experiencia de usuario y todo el diseño UX e UI de tus aplicaciones y webs.

52 min (18 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:2/12/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.