Share
En este tutorial, te mostraré rápidamente cómo puedes crear un sitio web con Adobe Muse CC. Entre otras cosas, nosotros:
Descargue el video o suscríbase a Tuts + Web Design en YouTube
¡Hola! Mi nombre es Michael Chaize. Soy un evangelista de Creative Cloud para Adobe, y en este tutorial le mostraré cómo puede crear rápidamente un sitio web con Adobe Muse CC.
La primera vez que inicie Adobe Muse obtendremos esta pantalla de bienvenida y podrá decir que quiero crear un nuevo sitio.
Y luego definís las dimensiones de vuestras páginas. Si desea, como diseño inicial, apuntar a sus usuarios de escritorio, usuarios de tabletas o usuarios de teléfonos, y establecer los márgenes de la página. Así que haré clic en DE ACUERDO, Y descubriré el espacio de trabajo del plan con todas mis páginas..
Por el momento solo tengo una página de inicio, pero aquí puedo decir que también necesitaré una página de productos y tal vez una página de aproximadamente. Y en los productos obtendré el producto A y, al mismo nivel, el producto B. Así es como puede crear muy rápidamente la estructura de su sitio web..
También tienes páginas maestras. Por lo tanto, cada vez que agregue un elemento de diseño en el encabezado, o el pie de página de la página maestra, estará en todas sus páginas. Para mi encabezado, solo crearé un rectángulo en el fondo. Tal vez rellenarlo con un color oscuro..
Y quiero añadir un logo. Así que esta es una imagen, puedes arrastrar y soltar imágenes directamente desde tu disco. Bien, déjame arrastrar y soltar un archivo PNG y colocarlo. Verá que obtiene Guías inteligentes para ajustar automáticamente sus elementos a los otros elementos en el escenario.
Ahora, si vuelvo al plan general de mi sitio web, veo que el encabezado aparece en todas las páginas, porque es parte de la página maestra. Bien, ahora me gustaría agregar un menú de navegación para navegar a través de las páginas.
Así que aquí es donde usarás el widgets biblioteca. Esta es una biblioteca de widgets interactivos. Obtiene botones, componentes como la pantalla de la caja de luz, formularios, menús, paneles, espectáculos de luz en este caso, usaremos un menú horizontal y tal vez lo coloquemos dentro del encabezado.
Obtiene automáticamente la estructura definida en el plan. Así que ya tengo tres páginas en el menú de navegación.. Casa, Productos, y Acerca de. En realidad, este es un widget dinámico, así que si agrego otra página que nombraré Contacto y si vuelvo a mi página maestra, ya tengo el botón de contacto.
Si hace clic en el icono azul, obtendrá la configuración de los widgets. Tal vez usted también quiere mostrar las páginas de subnivel. Asi que diria, todas las páginas y luego puedes estilo.
Para seleccionar una fuente de conjunto web, tendrá las clásicas aquí, pero también puede optar por agregar fuentes web procedentes de kits de tipo. Explorará automáticamente el catálogo de fuentes gratuitas disponibles en typekit. Y puedes decir, por ejemplo, que quieres usar el actor fuente, haga clic en Aceptar y se agregará a la lista de fuentes.
Y puedes seleccionarlo directamente aquí. Así es como creas tu menú, y luego si quieres agregar un párrafo de texto. No debería estar en la página maestra, pero digamos en la página de inicio. Solo tienes que definir un bloque y decir. Bienvenidos a mi sitio web.
De nuevo, solo seleccionaré actor fuente, tal vez aumentar el tamaño del texto, y aquí vamos.
Luego a la derecha, agregaré otro widget interactivo. Tal vez una presentación de diapositivas. Así que tienes diferentes tipos de diapositivas, la básica, combinada con la pantalla completa, la caja de luz..
Vamos a jugar con una presentación de diapositivas básica que mostrará una imagen predeterminada aquí. Pero cada vez que agregue un widget, tendrá este icono azul, y aquí es donde tiene la configuración y puede decir Quiero añadir mis propias imágenes..
Cambiará automáticamente el tamaño de las imágenes. Y luego puede establecer la leyenda, puede navegar para ver todas las imágenes y también tiene diferentes transiciones. Por lo tanto, por defecto, se desvanecerá y desaparecerá, pero también puede elegir tener las diapositivas horizontales..
Así que esta es mi página de inicio, tal vez podamos agregar algo en la página Acerca de, por supuesto, puede copiar elementos de pegado de una página a otra. Así que si elijo mostrar todas mis páginas con el arreglo de mosaico, puedo copiar y pegar algunos elementos.
Y también puedes agregar animación, así que déjame agregar una imagen. Y tienes este movimiento de desplazamiento. Así que este es un panel muy poderoso donde puede decir que desea agregar el efecto de rastreo de paralaje. Entonces, si selecciono Movimiento aquí, tengo aquí la posición clave, lo que significa que cuando se desplaza por la página y se alcanza esta posición clave antes, quiero obtener un comportamiento específico..
Así que tal vez algo que viene de la derecha a esta velocidad. Y después de eso, digamos que no quiero que se mueva, así que quiero que se mueva a la misma velocidad de la página. Así que, sólo uno. También puedes jugar con la opacidad para agregar algunas posiciones clave, si quieres que aparezca tu objeto y luego desaparezca..
Añadiré otro bloque de texto. Añade el botón. Solo para aumentar la dimensión de mi página para mostrar los efectos. Entonces, si quiero obtener una vista previa de esta página en el navegador, puedo elegir Guardar archivo, Vista previa de la página en el navegador o hacer clic directamente en el nuevo Avance botón que lanzamos directamente dentro de Adobe Muse y cuando me desplazo hacia abajo, veo mi edificio.
Aparece desde la derecha. Se detiene, y luego desaparece. Entonces, este es exactamente el efecto que quería definir dentro de mi diseño gracias al panel de Efectos de desplazamiento.
Ahora, si quiero compartir este sitio web con mi cliente para obtener comentarios, tiene la Publicar botón.
Solo tienes que decir Publicar, luego escribes un nombre. Hago clic en DE ACUERDO, y utilizará Adobe Business Catalyst, que es una plataforma de alojamiento disponible para todos los miembros de Creative Cloud, y publicará su sitio web en esta URL para que pueda compartirlo con su cliente.
Aquí está. Tengo mi primera página. Producto A, producto B. Si hago clic en la página Acerca de, y si me desplazo hacia abajo, tengo el efecto directamente en mi navegador. Y puedo copiar, pegar esta URL y compartirla con mis clientes o mis compañeros de trabajo.
Adobe Muse CC se dirige a los diseñadores que desean diseñar páginas web sin codificación..
Cualquiera puede usarlo y ser muy creativo. Puede visitar muse.adobe.com para descargar y probar Adobe Muse. También lo aliento a visitar la sección Sitio del día para consultar los hermosos sitios web publicados con Adobe Muse. Para su información, el año pasado en 2013, se crearon y publicaron más de 500,000 sitios web con Adobe Muse.
Además, si desea obtener más información sobre Adobe Muse, permanezca sintonizado en tutsplus.com y consulte la categoría de Adobe Muse para obtener tutoriales y videos nuevos y actualizados para aprender a crear sitios web increíbles..
Ilustraciones de Črtomir Just
Accentsconagua