Una de las técnicas "más populares" en la web hoy en día es el desplazamiento de paralaje. Todos hemos estado en esos sitios en los que giras la rueda de desplazamiento del mouse y el contenido de la página se mueve hacia arriba y hacia abajo o sobre la página a medida que giras la rueda del mouse.
Para aquellos que son nuevos en diseño web y diseño gráfico, esta técnica puede ser extremadamente difícil de lograr debido a la cantidad de CSS requerida.
Si eso lo describe a usted, hay una serie de aplicaciones que pueden atraer a los artistas gráficos. Básicamente, utilizan un enfoque de diseño de página familiar para las páginas web, lo que significa que no hay mucha o ninguna codificación involucrada. Una aplicación que realmente ha cobrado protagonismo es Adobe Muse.
El trabajo realizado por profesionales de gráficos que utilizan Muse es bastante sorprendente y puede ver una muestra de lo que puede hacer al visitar Muse. Sitio del dia . Aunque los profesionales de la web tienden a considerar a Muse como una especie de "juguete de cuerda", los diseñadores también lo utilizan para crear prototipos móviles y web que finalmente se entregarán a los desarrolladores de su equipo.
Una técnica que es increíblemente fácil de lograr con Muse es el desplazamiento de paralaje y, si desea ver la versión completa del ejercicio. Cuando gira la rueda de desplazamiento del mouse, el texto parece moverse hacia arriba o hacia abajo en la página y las imágenes cambian.
Empecemos.
01 de 07Crear una página web
Cuando inicie Muse, haga clic en Nuevo sitio enlazar. Esto abrirá la Nuevas propiedades del sitio. Este proyecto se diseñará para una aplicación de escritorio y puede seleccionarlo en el Diseño inicial menú desplegable. También puede establecer los valores para el número de columnas, ancho de canal, márgenes y relleno. En este caso, no estábamos muy preocupados con esto y simplemente hicimos clic DE ACUERDO.
Formatear la página
Cuando establece las propiedades del sitio y hace clic DE ACUERDO fuiste llevado a lo que se llama Plan ver. Hay un Casa página en la parte superior y una Página principal en la parte inferior de la ventana. Solo necesitábamos una página. Para acceder a la Vista de diseño, hicimos doble clic en la página de inicio que abrió la interfaz.
A la izquierda hay algunas herramientas básicas y, a la derecha, una variedad de paneles utilizados para manipular el contenido de la página. A lo largo de la parte superior están las propiedades, que se pueden aplicar a la página, o cualquier elemento seleccionado en la página. En este caso, queríamos tener un fondo negro. Para lograr esto, hacemos clic en el Relleno del navegador Color chip y eligió negro del Selector de color.
03 de 07Añadir texto a la página
El siguiente paso es agregar algo de texto a la página. Seleccionamos el Herramienta de texto y sacó un cuadro de texto. Ingresamos la palabra "Bienvenido" y, en las Propiedades, establezca el texto en Arial, 120 píxeles blanco. Centro alineado.
Luego cambiamos a la herramienta de selección, hicimos clic en el cuadro de texto y configuramos su Posición Y a 168 píxeles desde la parte superior. Con el cuadro de texto aún seleccionado, abrimos el Alinear el panel y alinea el cuadro de texto al centro.
Finalmente, con el cuadro de texto seleccionado, presionamos Opción / Alt y Cambio Teclas e hizo cuatro copias del cuadro de texto. Cambiamos el texto y la posición Y de cada copia a:
- A, 871
- Gráficos, 1621
- Software, 2371
Notará que, al establecer la ubicación de cada cuadro de texto, la página cambia de tamaño para adaptarse a la ubicación del texto.
04 de 07Añadir marcadores de imagen
El siguiente paso es colocar imágenes entre los bloques de texto.
El primer paso es seleccionar la Herramienta rectangular y dibuja nuestra caja que se extiende de un lado de la página al otro. Con el rectángulo seleccionado, configuramos su Altura hasta 250 píxeles. y es Posición Y a 425 píxeles. El plan es que siempre se extiendan o se contraigan al ancho de la página para adaptarse a la ventana de visualización del navegador de un usuario. Para lograr esto, hicimos clic en el 100% de ancho Botón en las propiedades. Lo que esto hace es atenuar el valor de X y garantizar que la imagen siempre sea el 100% del ancho de la ventana gráfica en un navegador.
05 de 07Agregar imágenes a los marcadores de posición de imagen
Con el Rectángulo seleccionado hicimos click en el Rellene el enlace - no el Chip de color - e hizo clic en la Itinta de mago Para agregar una imagen al rectángulo. En el Adecuado área, seleccionamos Escalar para adaptarse e hizo clic en el manija central en el Posición Área para asegurar que la imagen se escala desde el centro de la imagen.
A continuación, utilizamos el Opción / Alt-Shift-drag Técnica para crear una copia de la imagen entre los dos primeros bloques de texto, abrió el panel de Relleno e intercambió la imagen por otra. También hicimos esto para las dos imágenes restantes.
Con las imágenes en su lugar, es hora de agregar el movimiento.
06 de 07Añadir desplazamiento de paralaje
Hay varias formas de agregar el desplazamiento de paralaje en Adobe Muse. Te vamos a mostrar una forma sencilla de hacerlo.
Con el panel de relleno abierto, haga clic en Pestaña de desplazamiento y, cuando se abra, haga clic en Casilla de verificación de movimiento.
Verás valores para Inicial y Moción final. Estos determinan qué tan rápido se mueve la imagen en relación con la rueda de desplazamiento. Por ejemplo, un valor de 1.5 moverá la imagen 1.5 veces más rápido que la rueda. Utilizamos un valor de 0 para bloquear las imágenes en su lugar.
los Flechas horizontales y verticales Determinar la dirección del movimiento.Si los valores son 0, las imágenes no se moverán independientemente de la flecha en la que haga clic.
El valor medio – Posición clave - Muestra el punto donde las imágenes comienzan a moverse. La línea sobre la imagen comienza, para esta imagen, 325 píxeles desde la parte superior de la página. Cuando el desplazamiento alcanza ese valor, la imagen comienza a moverse. Puede cambiar este valor cambiándolo en el cuadro de diálogo o haciendo clic y arrastrando el punto en la parte superior de la línea hacia arriba o hacia abajo.
Repita esto para las otras imágenes en la página.
07 de 07Prueba del navegador
En este punto, habíamos terminado. Lo primero que hicimos, por razones obvias, fue seleccionar Archivo> Guardar sitio. Para la prueba del navegador, simplemente seleccionamos Archivo> Vista previa de la página en el navegador. Esto abrió el navegador predeterminado de nuestra computadora y, cuando se abrió la página, comenzamos a desplazarnos.
