Ejemplo práctico con Muse CC: landing page

Inicio del diseño de la landing page con Adobe Muse

¡Prueba gratis durante 10 días

nuestros 1141 cursos !

Prueba gratis Mostrar modalidades de suscripción
Iniciamos el proceso de creación de nuestra landing page configurando un relleno de imagen para la página, para lo cual buscamos una imagen del servicio Adobe Stock. Las opciones de relleno por defecto no permiten usar imágenes de las bibliotecas CC, pero lo solucionaremos con un truco.
04:14

Transcripción

Vamos a empezar a trabajar con el diseño de nuestra "landing page". Voy a hacer doble clic sobre la página de Inicio para entrar en el modo de diseño. Y lo primero que quiero hacer es aplicarle un relleno a esta página, pero ese relleno va a ser una imagen. Como no tengo nada seleccionado, en la parte izquierda del panel de control vamos a encontrar este texto: 'Página', de manera que todos los cambios que yo realice en estas opciones van a aplicar sobre la página. La imagen que voy a utilizar como imagen de relleno de esta página es una imagen del servicio Adobe Stock. Así que lo primero que voy a hacer es abrir este archivo que se llama: 'textos.txt' que se encuentra en la carpeta de 'assets' y en la parte superior encontramos este código. Este es el código de la imagen que yo necesito, voy a copiarlo, vuelvo a Muse y ahora voy a abrir el panel Bibliotecas CC y en esta casilla voy a realizar la búsqueda, pego el código, Enter, espero un momento y aquí tenemos la imagen. Voy a seleccionar el segundo botón para guardar la vista previa en esta biblioteca Muse. Después de un momento ya se realizó la sincronización y tengo la vista previa de esta imagen dentro de la biblioteca Muse. Ahora vamos a encontrarnos un pequeño inconveniente y es que si venimos a las opciones de relleno y hacemos clic sobre este texto, en la ventana que yo obtengo solo tengo la opción para seleccionar una imagen que yo tenga guardada de forma local. Esta ventana no permite que yo seleccione una imagen que tengo dentro de una biblioteca Creative Cloud. Vamos a hacer entonces lo siguiente: voy a seleccionar esta imagen que se llama 'tmp.jpg', es decir, es una imagen temporal, y vamos a seleccionarla. Aquí ya tenemos la imagen como imagen de relleno de la página. Ahora, en este menú desplegable, vamos a seleccionar la primera opción: Escalar para rellenar y nos aseguramos de dejar activa el ancla izquierda superior, es decir, que la imagen va a estar alineada en la parte superior izquierda de la página. Por supuesto, esta no es la imagen que vamos utilizar. Sin embargo, como ya tenemos definida una imagen como imagen de relleno, observen lo que vamos a realizar ahora: vamos a abrir un panel que se llama el panel de Activos y aquí tenemos la imagen, vamos a hacer un clic derecho sobre la imagen 'tmp.jpg' y vamos a seleccionar la opción Volver a vincular a partir de Bibliotecas CC. Esto me abre el panel Bibliotecas CC, elijo la biblioteca correspondiente y simplemente voy a seleccionar la imagen, que es esta, para posteriormente hacer clic en el botón Reenlazar que se encuentra en la parte inferior derecha del panel Bibliotecas CC. Hago un clic y observen entonces que se ha cambiado el vínculo de la imagen. Eso lo puedo ver claramente en la página, pero también lo puedo verificar dentro del panel Activos. Observen que el vínculo que se encuentra dentro del panel ya no es la imagen que teníamos anteriormente 'tmp.jpg', sino que es esta imagen que se encuentra dentro de la biblioteca Muse. Adicionalmente, en la parte derecha nosotros encontramos el ícono de una nube. Ese ícono nos está diciendo que el enlace no es un enlace a un archivo local, sino que es un enlace a un archivo que se encuentra en una biblioteca Creative Cloud. Posteriormente, vamos a cambiar también el relleno del navegador, pero en este caso vamos a hacer clic en este menú desplegable y seleccionamos el color negro. Ahora vamos a las opciones de relleno y vamos a cambiar esta opacidad a 45 %, presiono Enter y aquí tenemos ya la imagen en la parte superior como fondo del relleno de la página y en la parte inferior como relleno del navegador, el color negro.

Ejemplo práctico con Muse CC: landing page

Lleva a la práctica tus conocimientos de Adobe Muse CC con este ejemplo sobre la creación de una landing page con comportamiento responsive y correctamente estructurada.

47 min (15 Videos)
Actualmente no hay comentarios.
 

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.