Hola gente, les traigo un tutorial básico para que puedan crear sitios web con efecto Parallax / Scrolling fácilmente en Adobe Muse.
Para los que no sepan que es Adobe Muse, es un programa para creación de páginas web sin necesidad de meternos ni escribir códigos, si has trabajado en Adobe InDesign (programa para trabajos editoriales), se te hará fácil usar Muse pues la interfaz es casi la misma y todo es muy intuitivo, si quieres más información googlealo, pues ya empezaré con mi tuto :encouragement:
1.- Primero que nada debemos tener nuestro diseño web hecho en una sola página, que cada sección este una debajo de la otra, esto no voy a poner como hacerlo pues el diseño web de cada uno puede variar, y depende de cada uno y su creatividad crearlo, pero es esto a lo que me refiero:
Como ven es una página que se divide en 5 secciones, y todas van hacia abajo, las secciones en cuestión son: 1. Inicio, 2. Acerca de, 3. Servicios, 4. Portafolio, 5. Contacto
Repito, el diseño ya depende de cada uno pero usare este que hice para hacer el tuto que esta dividido en las 5 secciones que ya enumere, aunque pueden ser más o menos según sus necesidades.
2. Una vez teniendo nuestras secciones bien definidas, agarraremos la herramienta ancla de Adobe Muse.
(Al hacer clic en la herramienta ancla, nuestro cursor tendrá la siguiente forma)
3. Seleccionaremos la herramienta según la cantidad de secciones que tengamos, cuando tengamos la herramienta seleccionada, solo nos basta con hacer clic en la parte en la que queramos que este nuestra ancla, este paso es el más importante ya que según la posición que coloquemos nuestras anclas, será la posición que el navegador bajará o subirá y se detendrá.
Al hacer clic en la parte que queremos este nuestro ancla, nos pedirá un nombre, las nombraremos para que sea más fácil identificarlas después.
Por ejemplo, agarraré la herramienta ancla para la sección Acerca de, y la colocaré en donde quiero que en navegador se desplace y se detenga, también la nombraré.
Esto es lo que obtendremos al colocar nuestro ancla "Acerca de".
4. Repetiremos el mismo proceso de colocar anclas en las demás secciones:
Y así con todas nuestras secciones.
5. Por último para que nuestro efecto este terminado, crearemos un menú que se quede estético en la parte superior para que no se mueva (clic aquí para ver tutorial de como crear menús en Adobe Muse), en este caso, así luce mi menú.
6. Le asignaremos a cada sección de nuestro menú, su ancla correspondiente.
Ya está! Hemos terminado y debemos obtener un resultado como este.
Como ven es muy fácil, de todas formas aquí te dejo un videotutorial hecho por mí por si no quieres leer.
[YOUTUBE]https://www.youtube.com/watch?v=a1Hmqgqmq7o[/YOUTUBE]
Link: https://www.youtube.com/watch?v=a1Hmqgqmq7o
Sus LIKES ayudan mucho, les gustaría más tutoriales de ADOBE MUSE?
Saludos
Para los que no sepan que es Adobe Muse, es un programa para creación de páginas web sin necesidad de meternos ni escribir códigos, si has trabajado en Adobe InDesign (programa para trabajos editoriales), se te hará fácil usar Muse pues la interfaz es casi la misma y todo es muy intuitivo, si quieres más información googlealo, pues ya empezaré con mi tuto :encouragement:
1.- Primero que nada debemos tener nuestro diseño web hecho en una sola página, que cada sección este una debajo de la otra, esto no voy a poner como hacerlo pues el diseño web de cada uno puede variar, y depende de cada uno y su creatividad crearlo, pero es esto a lo que me refiero:
Como ven es una página que se divide en 5 secciones, y todas van hacia abajo, las secciones en cuestión son: 1. Inicio, 2. Acerca de, 3. Servicios, 4. Portafolio, 5. Contacto
Repito, el diseño ya depende de cada uno pero usare este que hice para hacer el tuto que esta dividido en las 5 secciones que ya enumere, aunque pueden ser más o menos según sus necesidades.
2. Una vez teniendo nuestras secciones bien definidas, agarraremos la herramienta ancla de Adobe Muse.
(Al hacer clic en la herramienta ancla, nuestro cursor tendrá la siguiente forma)
3. Seleccionaremos la herramienta según la cantidad de secciones que tengamos, cuando tengamos la herramienta seleccionada, solo nos basta con hacer clic en la parte en la que queramos que este nuestra ancla, este paso es el más importante ya que según la posición que coloquemos nuestras anclas, será la posición que el navegador bajará o subirá y se detendrá.
Al hacer clic en la parte que queremos este nuestro ancla, nos pedirá un nombre, las nombraremos para que sea más fácil identificarlas después.
Por ejemplo, agarraré la herramienta ancla para la sección Acerca de, y la colocaré en donde quiero que en navegador se desplace y se detenga, también la nombraré.
Esto es lo que obtendremos al colocar nuestro ancla "Acerca de".
4. Repetiremos el mismo proceso de colocar anclas en las demás secciones:
Y así con todas nuestras secciones.
5. Por último para que nuestro efecto este terminado, crearemos un menú que se quede estético en la parte superior para que no se mueva (clic aquí para ver tutorial de como crear menús en Adobe Muse), en este caso, así luce mi menú.
6. Le asignaremos a cada sección de nuestro menú, su ancla correspondiente.
Ya está! Hemos terminado y debemos obtener un resultado como este.
Como ven es muy fácil, de todas formas aquí te dejo un videotutorial hecho por mí por si no quieres leer.
[YOUTUBE]https://www.youtube.com/watch?v=a1Hmqgqmq7o[/YOUTUBE]
Link: https://www.youtube.com/watch?v=a1Hmqgqmq7o
Sus LIKES ayudan mucho, les gustaría más tutoriales de ADOBE MUSE?
Saludos
