Creación de un sitio web para pequeñas empresas de una página con Adobe Muse

Adobe Muse es una poderosa herramienta que ha hecho que el diseño web sea sorprendentemente más fácil e interesante. Más fácil en términos de que no requiere código para crear sitios web profesionales e interesante en términos de control total sobre el diseño a diferencia de otras aplicaciones de arrastrar y soltar.

Una de las características más impresionantes de esta aplicación WYSIWYG (lo que ves es lo que obtienes) es que proporciona un flujo de trabajo adecuado para ayudar al diseñador en el desarrollo paso a paso del sitio web.

Después de terminar este tutorial, usted:

• Tener una comprensión clara de todos los aspectos técnicos y de diseño de Muse.
• Saber diseñar profesionalmente en menos tiempo.
• Conozca algunos recursos gratuitos donde puede encontrar impresionantes gráficos para su sitio web.
• Cree un sitio web de una página completamente funcional en muy poco tiempo.

Requisitos de este tutorial

Deberá descargar ciertas imágenes, vectores y fuentes para crear este sitio. Pero aún puede seguir adelante sin estos activos. Para organizar el contenido correctamente, cree una carpeta separada para su sitio.

• Ve a pexels.com y descarga:

  • 4 imágenes de tamaño 1160 x 480 para presentación de diapositivas. Aquí hay una captura de pantalla de pexels. Puede poner este tamaño en el cuadro ‘tamaño personalizado’ en este sitio web.

  • 6 imágenes de tamaño 271 x 208 para la sección ‘servicios’.

  • 1 imagen de tamaño 1160 x 692 para la sección ‘Contáctenos’.

• Ve a freepik.com y descarga:

  • Un ícono de cruz (puede editar este ícono en Illustrator o simplemente descargar el archivo png de feepik).
  • 6 imágenes de rostros para la sección ‘Testimonios’.

• Vaya a sutilpatterns.com y descargue el patrón ‘brickwall’ para la sección ‘Testimonios’.

• A medida que continúe con este tutorial, le diré cómo descargar las fuentes requeridas (se puede hacer dentro de Muse).

• Utilice el texto ficticio de lipsum.com.

¡EMPECEMOS!

Preparación del espacio de trabajo y configuración del encabezado

1 Cree un nuevo sitio yendo a Archivo > Nuevo sitio (Ctrl+N) y coloque los valores como se muestra a continuación. No olvide marcar la casilla de verificación que dice ‘Pie de página adhesivo’. Haga clic en Aceptar y tendrá el modo PLAN. Haga doble clic en A-Master ubicado en la parte inferior en un área gris. Crearás todo en esta página maestra.

2 Elija la herramienta de texto de la caja de herramientas ubicada en el lado izquierdo de la ventana de la aplicación. Haga clic y arrastre en el lienzo o la página para crear un cuadro de texto. Vaya al panel de texto (Ctrl+T), en el menú desplegable de fuentes, busque Fuentes web y elija ‘Agregar fuentes web’ y descargue las siguientes fuentes:

• rametto uno
• Pedazo
• Questrial
• raleway
• Noble
• PT Sin
• ubuntu
• Langosta

Después de descargar estas fuentes, elimine este cuadro de texto.

3 Vaya al panel Capas ubicado en el lado derecho de la ventana de la aplicación. Si no está allí, vaya al menú Ventana > Capas. Verás allí una capa llamada Capa 1 (color azul). Esta es la capa predeterminada y todo lo que crea o coloca en el lienzo va allí. Haga doble clic en esta capa y asígnele el nombre ‘Encabezado’.

4 Dentro del panel de capas, haga clic en el pequeño ícono de papel con borde doblado ubicado en la esquina inferior derecha. Al hacer clic en esto, se creará una nueva capa con color rojo. Nuevamente, haga doble clic en esta capa y cámbiele el nombre a ‘Contenido’.

5 Haga clic y arrastre esta capa de contenido y colóquela debajo de la capa de encabezado. Hemos hecho esto porque queremos que nuestro encabezado esté por encima de todo.

6 Seleccione la capa de encabezado y contraiga el panel de capas.

7 Seleccione la herramienta Rectángulo de la caja de herramientas o presione ‘m’ en el teclado.

8 Dibuje un pequeño rectángulo en el lienzo y asegúrese de que el color de su borde sea azul, lo que indica que este objeto está dentro de la capa de encabezado.

9 Vaya al panel Transformar ubicado en la parte superior derecha de la ventana de la aplicación. Deje el ancho (W) y coloque 50 dentro del campo de altura (H) y presione enter. (No se preocupe por los valores X e Y).

10 En la parte superior de la página, verá dos líneas de color azul (que se muestran en la captura de pantalla a continuación). Estos se llaman ‘guías’. Cuando pasa el cursor sobre la primera guía, dice «Parte superior de la página, arrastre para ajustar el relleno sobre la página» y la otra dice «Encabezado, arrastre para ajustar la posición». Establecer estas guías desde el principio es muy importante.

11 Ahora, como hemos creado un rectángulo de H=50, haga clic, mantenga presionada y arrastre la guía de ‘parte superior de la página’ hasta que el cuadro que aparecerá debajo una vez que comience a arrastrar diga Y=50.

12 Del mismo modo, arrastre la guía del encabezado de arriba a la guía de la parte superior de la página hasta que diga Y=0. Hemos hecho esto para configurar nuestra área de encabezado. (Es posible que desee experimentar colocando estas guías en diferentes posiciones para obtener diferentes resultados, pero es bueno por ahora).

13 Seleccione el rectángulo que acabamos de crear, arrástrelo al área del encabezado para que encaje correctamente.

14 Ahora, tenemos que aumentar el ancho del rectángulo y hacerlo al 100% para que el encabezado se vea perfecto en todos los tamaños de pantalla. Expanda el rectángulo a ambos bordes y asegúrese de que encaje con los bordes. Aparecerá una guía naranja que asegura que el objeto se ha ajustado. A medida que aumenta el ancho del rectángulo, la ventana emergente dirá W=100 % o W=1160 cuando llegue al borde.

15 Mantenga el rectángulo seleccionado, haga clic en la palabra Rellenar debajo del menú de la aplicación y configure las opciones de la siguiente manera. Elija el primer color como Negro y el segundo color: R=37, G=37, B=37.

16 Vaya a Archivo > Guardar sitio. Guarda tu sitio cada vez que hagas un cambio.

17 Cree un cuadro de texto y escriba – ‘example.com’ y cambie su formato como se muestra a continuación.

18 Ajuste el tamaño del cuadro de texto para que todo el texto aparezca en una línea. Seleccione este cuadro de texto y arrástrelo sobre el rectángulo negro. Alinéelo con el centro vertical del rectángulo (una línea azul le indicará cuándo está centrado) y ajústelo al borde izquierdo como se muestra a continuación.

19 Cree un cuadro de texto y escriba – ‘Inicio’. Cambie su formato de la siguiente manera. Ajuste el ancho y la altura del cuadro de texto en consecuencia. También puede hacer esto desde el panel de transformación. El mío es W=52, H=17.

20 Copie y pegue este cuadro de texto y escriba ‘Servicios’ en el nuevo. Ajuste el ancho. Arrastre y coloque este cuadro de texto junto a casa con una diferencia muy inferior entre los dos. Una vez más, las guías le ayudarán en la alineación adecuada.

21 Copie y pegue este cuadro de texto cuatro veces más y escriba: Por qué nosotros, Testimonios, Contáctenos y Boletín. Coloque estos cuadros de texto uno por uno a la misma distancia junto a ‘servicios’.

22 Con la herramienta de selección seleccionada y la tecla Mayús presionada, seleccione todos estos cuadros de texto uno por uno. Vaya al panel de texto, cambie el color a blanco. Elija el grupo de estos cuadros y colóquelo sobre el rectángulo del encabezado. (Verticalmente centrado y alineado con el borde de la página del lado derecho). Este es nuestro Menú.

23 De nuevo, con la herramienta de selección seleccionada y la tecla Mayús presionada, seleccione estos cuadros de texto, el rectángulo y el cuadro de texto example.com. En la parte superior derecha, verá una opción llamada Pin. Haga clic en su cuadro central superior para anclar estos elementos. Esto significa que, cuando el usuario se desplace por su sitio, este encabezado permanecerá fijo en la parte superior. Es muy útil ya que el usuario no tendrá que desplazarse hacia arriba solo para elegir otra opción.

24 Vaya al panel Capas y bloquee la capa de encabezado. Esto se puede hacer haciendo clic dentro del cuadro a la izquierda del nombre de la capa. Cuando bloquea una capa o cualquier objeto, no afectará su apariencia, pero no podrá seleccionar estos elementos a menos que los desbloquee. Hemos hecho esto para eliminar por completo las posibilidades de mover accidentalmente los elementos.

25 Seleccione la capa de contenido y contraiga el panel de capas.

Establecer presentación de diapositivas

26 Vaya a la biblioteca de widgets ubicada en el lado derecho de la ventana de la aplicación. Si no está allí, vaya al menú Ventana> elija Biblioteca de widgets. Expanda la sección ‘presentaciones de diapositivas’ y seleccione ‘En blanco’. Haga clic y arrastre este objeto al lienzo. Aparecerá una ventana negra con opciones de presentación de diapositivas.

27 Asegúrese de que las opciones estén configuradas como se muestra en la imagen a continuación. En la sección de partes en la parte inferior, desmarque las casillas de verificación que dicen Anterior, Siguiente, Subtítulos y Contador. No necesitamos ninguno de estos.

28 Haga clic en cualquier parte del lienzo para que desaparezca esta ventana emergente. Ahora, haga clic con cuidado dentro de la presentación de diapositivas. Al hacer clic una vez, verá que se ha escrito ‘Presentación de diapositivas’ en el ‘tipo de área de selección actual’. Se encuentra en la esquina superior izquierda debajo del menú de la aplicación. Esta área le permite ver lo que ha seleccionado. Es una característica muy útil cuando el diseño se complica. Vuelva a hacer clic y notará que la descripción dice «Imagen destacada».

29 Aumente el ancho de la imagen del héroe manualmente expandiéndola desde el medio. Ajústelo tanto a los bordes de la página (para que tenga el 100 % del ancho) como a la parte inferior del rectángulo del encabezado, como se muestra a continuación.

30 Ir al panel de transformación y poner H=500.

31 Vuelva a abrir las opciones de presentación de diapositivas haciendo clic en el pequeño círculo azul con un rectángulo blanco dentro (se encuentra en la esquina superior derecha de la presentación de diapositivas).

32 Haga clic en el icono de la carpeta junto a la opción ‘Agregar imágenes…’, busque las imágenes que descargamos para la presentación de diapositivas. Seleccione los cuatro y haga clic en abrir.

33 Vaya a Archivo > elija ‘Vista previa de la página en el navegador’ o Ctrl+Shift+E y vea cómo funcionará su presentación de diapositivas una vez que el sitio esté activo. Te recomiendo que memorices los atajos de teclado que estoy usando en este tutorial. Hacer esto te ayudará a acelerar tu proceso de diseño.

Creación de la sección ‘Servicios’

34 Ahora que hemos configurado nuestro encabezado y presentación de diapositivas, es hora de crear secciones para cada elemento que agregamos a nuestro menú. Comencemos con ‘servicios’. Cree un cuadro de texto y escriba servicios en él (todas las letras pequeñas) y cambie su formato de la siguiente manera.

35 Haga doble clic dentro de este cuadro de texto y seleccione solo la letra ‘I’. Cambia su fuente a ‘Chunk’ y deja todo igual. Ajuste la altura de este cuadro de texto. Cuando disminuya su altura, aparecerá una línea discontinua en un punto determinado y el cuadro no se acortará. No reduzca el tamaño después de eso. Esta es la altura más baja posible con este tamaño de fuente.

36 Con el cuadro de texto seleccionado, vaya al panel de transformación y establezca el ángulo de rotación en -90 grados (90 grados negativos).

37 Mueva el cuadro de texto al lado izquierdo del lienzo como se muestra a continuación.

38 Es posible que desee alejar un poco el zoom para ver todo el contenido a la vez o para ajustar los objetos correctamente. Para hacer esto, intente escribir diferentes valores (menos del 100%) en la sección de nivel de zoom en la parte superior. Después de escribir el valor, presione enter.

39 Vaya a Archivo > elija ‘Lugar’. Seleccione la primera imagen que descargamos para nuestra sección de servicios. Haga clic en abrir.

40 El cursor cambiará su apariencia a un lugar arma cargada con una imagen. Haga clic en el lienzo para colocarlo. Muévalo y colóquelo de modo que se alinee con la parte superior del cuadro de texto «servicios».

41 Copia esta imagen y pégala dos veces. Seleccione estas imágenes pegadas una por una y alinéelas a la misma distancia que la primera imagen.

42 Selecciona la segunda imagen, haz clic derecho sobre ella y elige ‘reemplazar imagen’ (es la última opción). Busque la segunda imagen y haga clic en abrir. Reemplace la tercera imagen también.

43 Cree cuadros de texto para la información sobre los servicios y aplique el formato para encabezados y párrafos como se escribe a continuación. Las guías le ayudarán a alinearlos correctamente.

• Para encabezados: fuente: Raleway Bold, tamaño = 20, color: negro, alineado a la izquierda y 100% inicial.
• Para Párrafos: Fuente: Questrial, Tamaño=15, Color: R=67 G=67 B=67, Alineado a la izquierda y 120% de interlineado.

44 Coloque tres imágenes más como lo hicimos en los pasos anteriores y, de manera similar, cree un texto de descripción para ellas. Deberías tener el siguiente resultado.

Resultado Final Sección ‘Servicios’

Creación de la sección ‘Por qué nosotros’

45 La siguiente es la sección ‘Por qué nosotros’. Este es un poco complicado. Tenga cuidado al seleccionar los objetos. Primero, crea un rectángulo de 100% de ancho y H=996. Rellénalo con un color (R=47, G=48, B=55). Haga clic derecho en este rectángulo> Organizar> elija ‘enviar hacia atrás’ (no enviar hacia atrás).

46 Amplíe su área de trabajo haciendo clic y arrastrando la guía de ‘parte inferior de la página’ para que tenga suficiente espacio para crear contenido que se colocará en este rectángulo que acabamos de crear.

47 Desplácese hacia abajo hasta el espacio vacío en blanco y haga otro rectángulo de W=351 y H=351. Rellénalo con color blanco y sin trazo.

48 Vaya a la opción ‘radio de esquina’ (se encuentra junto al trazo debajo del menú de la aplicación). Haz clic en todas las esquinas para redondearlas y pon 500 en la casilla de al lado.

49 Tendrás un círculo. Arrastra este círculo al rectángulo y ajústalo de la siguiente manera. Junto al radio de la esquina, hay una opción llamada ‘Opacidad’. Con el círculo seleccionado, pon 14 en esta casilla.

50 Cree un cuadro de texto y escriba – por qué nosotros (todo pequeño). Cambie su fuente a Rammetto One, tamaño = 100, Color R = 241 G = 244 B = 247, 100% de avance y alinee el centro. Coloque este cuadro de texto dentro del círculo y alinéelo correctamente.

51 Ahora crearemos las líneas discontinuas. Haz un rectángulo de W=9 y H=9, sin relleno. Haga clic en la palabra ‘trazo’ junto al relleno. Elige el color R=241 G=244 B=247. Haga clic en el icono de la cadena para romperlo y coloque ‘1’ en el peso del trazo inferior.

52 Copie este rectángulo de trazo de un lado y péguelo varias veces. Colóquelos en una línea (acerque un poco con la herramienta de zoom si le resulta difícil ver estos rectángulos). Una vez que obtenga la longitud deseada de su línea discontinua, seleccione todos estos rectángulos, haga clic derecho y elija ‘Grupo’. Copie y pegue este grupo para otras líneas discontinuas.

53 Para líneas discontinuas inclinadas, intente poner diferentes ángulos de rotación en el panel de transformación. He usado 150 y 30 grados. Deberá eliminar algunos rectángulos de este grupo para tener longitudes más cortas. Ajuste estas líneas cerca del círculo como se muestra a continuación.

54 Ahora agregaremos más texto para números, encabezados y descripciones. Use la siguiente configuración para cada uno de ellos y ajuste estos cuadros de texto como se muestra a continuación.

• Para números: Font=Rammetto One, Color: R=196 G=214 B=193, alineado al centro y 100% interlineado, tamaño: 200 (para el número ‘1’), 160 (para los números ‘2’ y ‘3’) y 120 (para los números ‘4’ y ‘5’).
• Para encabezados: fuente = Raleway negrita, tamaño = 18, color: blanco, alineado al centro y 100 % inicial.
• Para Párrafos: Fuente=Questrial, Tamaño=16, Color: R=241 G=244 B=247, Centrado y 120% de interlineado.

Resultado final de la sección ‘Por qué nosotros’

Creación de la sección ‘Testimonios’

55 Nuevamente, cree algo de espacio para trabajar arrastrando hacia abajo la guía de la parte inferior de la página. Haz un rectángulo de 100% de ancho y H=486.

56 Con el rectángulo seleccionado, haga clic en la palabra ‘Rellenar’ y haga clic en ‘Agregar imagen’ junto a la opción de imagen. Busque la imagen del patrón de pared de ladrillo que descargamos. En la opción Ajuste, elija ‘Mosaico’ para llenar todo el rectángulo con esta textura.

57 Desplácese hacia abajo hasta el espacio vacío y cree un cuadro de texto de tamaño W=406, H=289 con la ayuda del panel de transformación. Escriba – ‘lo que otros tienen que decir’ (todo pequeño). Cambie su fuente a Rammetto One, tamaño = 70, alinee a la izquierda, valores de color R = 37 G = 37 B = 37 e interlineado = 100%.

58 Con este cuadro de texto seleccionado, haga clic en la palabra trazo, aplíquele un trazo derecho de peso uno y de color negro. Arrastre este cuadro de texto y colóquelo sobre el rectángulo con patrón de pared de ladrillo.

59 El siguiente paso es agregar testimonios de clientes. Para esto, usaremos las imágenes vectoriales de cara redonda que descargamos de freepik.com. Nuevamente, baje al espacio vacío en blanco para que pueda personalizar su composición correctamente.

60 Vaya a la biblioteca de Widgets y arrastre ‘En blanco’ desde la sección de composiciones al lienzo. Haga clic en el signo más para agregar tres activadores más. Seleccione cuidadosamente el primer disparador y asegúrese de su selección con la ayuda del área de selección actual que dice disparador. Y justo al lado, hay una opción llamada ‘Activo’. Haga clic aquí para expandir. Seleccione el estado ‘Normal’ y elija ‘sin relleno’ y ‘sin trazo’ para este estado. Repita esto para cada estado que sea Rollover, Mouse Down y Active. Vaya al panel de transformación con el primer disparador seleccionado y ponga W=10, H=10.

61 Repetir el paso anterior para cada disparador que tengamos. Esto significa que no aplique relleno ni trazo para cada estado y transforme los disparadores a un tamaño de 10 x 10. Mueva los gatillos más cerca uno del otro.

62 Ahora. Personalizaremos los objetivos para cada uno de estos disparadores. El rectángulo grande que está viendo es el objetivo. Seleccione el primer activador y seleccione su estado normal en el panel de estados. Después de eso, seleccione el objetivo para este disparador y no aplique relleno ni trazo para cada estado. Luego ve al panel de transformación y haz el objetivo de W=360, H=370.

63 Repita el paso anterior para cada objetivo. Solo asegúrese de seleccionar primero el activador, llevarlo al estado normal, luego seleccionar el objetivo respectivo con el estado normal y luego aplicar sin relleno ni trazo. No necesitará cambiar el tamaño de cada objetivo. Solo hazlo por uno y se aplicará a todos.

64 Ahora, comenzaremos a agregar contenido a esta composición. Vaya a Archivo > Colocar y abra la imagen de la primera cara y colóquela fuera de la composición. Arrastra esta imagen y colócala dentro de la composición ahora. Verás que aparecerá un círculo azul en la esquina superior derecha que indica que esta imagen ahora es parte de la composición.

65 Cree tres cuadros de texto: uno para el nombre de la persona, otro para su designación y otro para la declaración o revisión. Aplique el formato como está escrito a continuación y coloque estos cuadros de texto dentro de la composición. Solo asegúrate de que cada uno de ellos tenga un círculo azul en la esquina.

• Para el nombre de la persona: Fuente: cursiva mediana Nobile, tamaño = 18, color: R = 37 G = 37 B = 37, alineación central y 100 % de interlineado.
• Para Designación: Fuente: Nobile, tamaño=15, Color: R=37 G=37 B=37, alineado al centro y 100% interlineado.
• Para declaraciones (con comillas invertidas): Fuente: PT Sans Italic, tamaño = 18, color: R = 69 G = 64 B = 68, alineado al centro y 100% interlineado.

66 Con la imagen de la cara seleccionada, aplica trazo de peso 4 en cada lado, color: blanco, redondea todas las esquinas y aumenta el radio hasta que envuelva la imagen. He usado 100 como radios de esquina.

67 Vaya a ‘Efectos’ (ubicado junto a la opción de esquinas redondeadas) y marque la casilla de verificación ‘sombra’. Ponga los valores como; Color=Negro, Opacidad=37%, Desenfoque=12, Ángulo=78 y Distancia=5.

68 Repita los pasos anteriores (del 64 al 67) para agregar contenido a cada destino y guarde los cambios (Ctrl+S). Ponga esta composición sobre el rectángulo con patrón de pared de ladrillo.

69 Ahora, seleccione toda la composición (asegúrese con el área de selección actual) y expanda sus opciones haciendo clic en el pequeño círculo azul. Configure las opciones como se muestra a continuación. Presione Ctrl+Shift+E y vea si funciona bien.

70 Debería tener el siguiente resultado.

Resultado Final de la Sección ‘Testimonios’

Creación de la sección ‘Contáctenos’

71 La siguiente sección es Contáctenos. Agregaremos una imagen de fondo, un formulario y algunos cuadros de texto en esta sección. Primero, haz un rectángulo de 100% de ancho y H=692. Rellénelo con una imagen que hayamos descargado para esta sección y elija ‘escala para llenar’ en Ajuste. Cambia su opacidad al 72%.

72 Haga otro rectángulo del mismo ancho y alto y rellénelo con un degradado. Ponga los valores de gradiente como; Opacidad=90% a 46%, Color: Negro a R=69 G=64 B=68, Punto Focal=66%, Dirección: Horizontal y Tamaño: automático. Coloque este rectángulo sobre la imagen y asegúrese de que encaje con todos los bordes.

73 Ir a la biblioteca de widgets. En formularios, seleccione ‘contacto simple’ y arrástrelo al lienzo. Aparecerá una ventana con opciones de formulario. Coloque el nombre del formulario: Formulario de contacto, Correo electrónico a: ingrese su dirección de correo electrónico en la que desea recibir la información ingresada por los visitantes, Después de enviar: seleccione ‘permanecer en la página actual’. La última opción es ‘Editar juntos’. Asegúrate de que esté marcado. De esta manera, deberá realizar cambios solo en un campo y se aplicarán a todos. Haga clic en cualquier parte del lienzo para que desaparezca el cuadro de opciones.

74 Seleccione el formulario. Haga clic en la etiqueta ‘Nombre’ y haga clic nuevamente hasta que vea ‘Etiqueta’ escrito en el área de selección actual. Presiona eliminar. Repita esto para las etiquetas de mensajes y correos electrónicos y elimínelos.

75 Seleccione el formulario nuevamente y seleccione el primer campo de formulario que dice ‘Ingresar nombre’ hasta que vea ‘Entrada de texto’ en el área de selección actual. Aplique sin relleno y trazo inferior (peso uno y color blanco) para cada estado, desde Vacío hasta Foco. Para el estado de error, seleccione sin relleno y trazo inferior de color rojo con peso 1.

76 Después de eso, con el campo de correo electrónico seleccionado> elija su estado vacío nuevamente y personalice la fuente y el color del texto para cada estado como se escribe a continuación.

• Para estado vacío, no vacío y foco: Fuente: Questrial, tamaño = 14, color: blanco, alineado a la izquierda, 100% inicial y sin cursiva.
• Para el estado de rollover: simplemente cambie el color del texto a R=196 G=196 B=196 y sin cursiva.
• Para estado de error: cambie el color del texto a rojo y sin cursiva.

77 Haga clic y seleccione el botón Enviar. Elija su estado normal, redondee todas las esquinas con 40 radios y aumente su ancho como se muestra en la captura de pantalla a continuación. Cambie su fuente a Raleway Bold, tamaño = 20, alineado al centro, color: R = 241 G = 244 B = 247, encabezado: ajuste el texto ‘enviar’ en el centro del botón aumentando este valor (he usado 130%) .

78 Para sus estados de rollover y ratón presionado, cambie el color del trazo y el color del texto a gris (R=127 G=127 B=127). Finalmente, para su estado de ‘envío en curso’, cambie el trazo y el color del texto a azul cielo (R=41 G=171 B=226).

79 Cuando seleccione el estado ‘enviar en curso’ para este botón de envío, verá que hay otro cuadro de texto que dice ‘enviando formulario…’. Seleccione esta casilla y elija su estado ‘enviar en curso’. Cambie la fuente a Questrial, tamaño = 14, color: gris, alineado al centro y sin cursiva. Elija su estado ‘enviar con éxito’ y cambie el color del texto a azul cielo (sin cursiva). Elija su estado ‘enviar error’ y cambie el color del texto a rojo (sin cursiva). El formulario de contacto está listo.

80 Haz dos cuadros de texto. Escriba – contáctenos y en su segunda línea, escriba ‘todos los campos son obligatorios’. Para el texto de contacto, use la fuente: Rammetto One, tamaño = 60, color: R = 241 G = 244 B = 247, interlineado = 100 % y alineado a la izquierda. Para el texto «todos los campos son obligatorios», use la fuente: cursiva Nobile, tamaño = 26, color: R = 241 G = 244 B = 247, interlineado = 100% y alineado a la izquierda. Para este cuadro de texto, aplique un trazo inferior de peso 1 y color blanco.

81 Escriba algún párrafo en el segundo cuadro de texto que creamos. Utilice fuente: PT Sans Italic, tamaño = 14, color: R = 241 G = 244 B = 247, interlineado = 120 %, alineado a la izquierda y espacio antes = 15.

82 Ponga estos cuadros de texto y el formulario en la imagen que colocamos. Ajústelos de la siguiente manera.

83 Cree un cuadro de texto más para alguna información de contacto como la dirección de la oficina, el correo electrónico y los números de teléfono. Coloque este cuadro de texto en la imagen. Deberías tener el siguiente resultado.

Resultado Final de la Sección ‘Contáctenos’

Crear pie de página

84 La última sección es el pie de página. Hay tres guías en la parte inferior, a saber: parte inferior de la página, pie de página y parte inferior del navegador. Lo que debe hacer ahora es asegurarse de que la guía de la «parte inferior de la página» coincida con la parte inferior de la sección de contacto y que la guía del «pie de página» coincida con la guía de la «parte inferior de la página». Después de eso, puede arrastrar la guía ‘parte inferior del navegador’ hacia abajo para ajustar el espacio que necesita para el pie de página.

85 Crea dos rectángulos de 100% de ancho y H=168 para el primero y H=37 para el otro. Cambie el color de relleno del rectángulo grande a blanco y use R=47, G=48, B=55 para uno más corto.

86 Seleccione el primer rectángulo e intente colocarlo en el área del pie de página. No irá allí. En cambio, la guía de la parte inferior de la página comenzará a expandirse hacia abajo. Para convertir este rectángulo en un elemento de pie de página, marque la casilla de verificación ‘Pie de página’ ubicada en el área superior derecha de la ventana de la aplicación. Hazlo también para el segundo rectángulo.

87 Ahora coloque estos rectángulos en el área del pie de página y asegúrese de que el rectángulo grande esté ligeramente por encima de la guía del pie de página. La parte inferior del rectángulo de color debe encajar con la parte inferior de la guía del navegador. De lo contrario, verá un pequeño espacio en blanco después del pie de página que no se ve bien.

88 Crea cuadros de texto para el pie de página y escribe lo que quieras. Simplemente marque la casilla de verificación ‘pie de página’ para los cuadros de texto que agregará. He agregado un texto que contiene información sobre el descargo de responsabilidad y los derechos de autor.

89 La insignia ‘Hecho con Adobe Muse CC’ se puede agregar desde la biblioteca de widgets en la sección social. También puede agregar enlaces a su página de Facebook, Twitter, Google+, LinkedIn, Pinterest, canal de YouTube o enlace de Vimeo.

90 El símbolo de derechos de autor y muchos otros símbolos que ve junto al texto Todos los derechos reservados se pueden agregar desde el panel «Glifos» ubicado en el lado derecho de la ventana de la aplicación. Si no está allí, vaya al menú Ventana> elija Glifos.

Creación de la sección ‘Boletín’

91 Hasta ahora, hemos diseñado secciones para todos los elementos del menú menos uno y es ‘Boletín’. Hagamos algo interesante con él. Recuerde el símbolo de la cruz que descargamos, se usará aquí (está bien si no lo ha descargado, aún puede seguirlo). En primer lugar, seleccione el cuadro de texto Boletín y anote su ancho y alto desde el panel de transformación. El mio es 81 x 17.

92 Ahora, abra la biblioteca de widgets y arrastre ‘Lightbox Display’ desde la sección de composiciones. Elimine los dos primeros disparadores (ubicados en la parte superior) y elimine todos los subtítulos (ubicados en la parte inferior). Haga que el tamaño del tercer activador sea el mismo que el del cuadro de texto del boletín informativo, que es de 81 x 17. Cambie su relleno y trazo a ninguno para todos los estados.

93 Arrastre el cuadro de texto del boletín y colóquelo dentro de este disparador de tal manera que todos los bordes del cuadro de texto coincidan con los bordes del disparador. Ahora arrastre este grupo y colóquelo nuevamente en el menú donde se colocó anteriormente. Lo que hemos hecho es que hemos aplicado un enlace al cuadro de texto del boletín. Cuando el usuario haga clic en él, el sitio web se desvanecerá y aparecerá el objetivo.

94 El siguiente paso es personalizar nuestro objetivo. Seleccione el área gris y asegúrese de que el área de selección actual diga «Objetivo». Tendrás que hacer clic tres veces para seleccionarlo. Cambie el relleno y el trazo a ninguno para todos sus estados.

95 Agregue dos cuadros de texto y un formulario de contacto simple (elimine sus campos de nombre y mensaje y mantenga solo el campo de correo electrónico). Arrástrelos dentro de esta composición y asegúrese de que todos tengan un círculo azul en las esquinas.

96 Personaliza el formulario como hicimos en la sección de contacto. Deberías tener el siguiente resultado. Para el campo de texto «Manténgase en contacto», use fuente: Langosta, tamaño = 40, color: blanco, alineado al centro y 100 % a la izquierda. Para el texto de descripción debajo, use la fuente: Ubuntu Light Italic, tamaño = 14, color: blanco, alineado al centro y 120% de interlineado. Cambie el texto del botón de envío a ‘Suscribirse’.

97 Ahora seleccione el botón de cerrar, muévalo y colóquelo en la esquina superior derecha de esta pantalla de caja de luz como se muestra a continuación. Haga clic dentro de él hasta que vea ‘Etiqueta’ escrito en el área de selección actual. Eliminar la etiqueta.

98 Cambie el relleno y el trazo de este botón de cierre a ninguno para todos los estados y haga que sea W=40 y H=40. Vaya a Relleno > Agregar imagen y busque la imagen cruzada. Elija ‘escala para ajustar’ en la opción de ajuste.

99 Haga clic en Boletín y verá un círculo azul en su esquina. Haga clic en él y asegúrese de que las opciones estén configuradas de la siguiente manera.

Resultado Final Sección ‘Newsletter’

Creación de hipervínculos

100 La tarea final que queda es aplicar enlaces a cada sección. Para hacer esto, elija la opción ‘anclaje de enlace’ ubicada en el área superior central o presione la letra ‘a’ en su teclado. Verás que el cursor cambia su apariencia a un arma cargada con un ancla de enlace.

101 Cuando haga clic en el lienzo para colocar esto, aparecerá un cuadro de diálogo que le permitirá cambiar el nombre de un ancla.

102 Cree anclas de enlace para cada sección que hemos diseñado, es decir, Inicio, Servicios, Por qué nosotros, Testimonios y Contáctenos. Coloque los anclajes en la parte superior de cada sección. El ancla de inicio se muestra a continuación como ejemplo. Colocar estos anclajes es un paso importante y debe hacerse con cuidado. Cuando el usuario haga clic en un enlace en particular, el sitio web se desplazará a la posición donde se colocó el ancla.

103 Ahora aplicaremos los enlaces. Para hacer esto, seleccione el cuadro de texto ‘Inicio’. Vaya a la opción ‘Hipervínculos’ (ubicada en la parte superior), haga clic en la pequeña flecha hacia abajo para expandir la lista. Aquí puedes ver todos los anclajes que acabamos de colocar. Vincúlelo al ancla ‘Inicio’. Repita este paso para otros cuadros de texto, excepto Boletín, ya que le hemos aplicado una visualización de cuadro de luz.

Resultado final después de crear hipervínculos

Toques finales: cambiar las propiedades de la página y agregar Favicon

104 Dentro del modo Plan, haga clic con el botón derecho en la página de inicio y elija ‘Propiedades de la página’. Aparecerá un cuadro de diálogo. Elija la pestaña ‘Opciones’ y debajo del nombre de la página, ponga – ‘Bienvenido a ejemplo.com’ y haga clic en Aceptar. Este es el texto que aparecerá en la parte superior de la ventana del navegador.

105 Vaya a Archivo > Propiedades del sitio. En la pestaña Diseño, la última opción es ‘Favicon’. Cuando pasa el cursor sobre él, aparecerá una ventana emergente que describe qué es un favicon y cuál debe ser el tamaño óptimo. Es bueno agregar un favicon, ya que ayuda a que su marca se destaque y también sirve para ayudar a los usuarios a identificar fácilmente su sitio si lo han marcado.

Prueba y exportación

106 Pruebe su sitio yendo a Archivo > Vista previa del sitio en el navegador o Ctrl+Alt+E. No elija ‘Vista previa de la página en el navegador’ esta vez, ya que los enlaces no funcionan en la vista previa de la página. Es posible que desee intentar colocar los anclajes en diferentes lugares para asegurarse de que cuando el usuario haga clic en un enlace, el sitio se desplace a la sección correcta y a la posición correcta.

107 Por último, vaya a Archivo > Exportar como HTML (Ctrl+E). En la URL del sitio, coloque cualquier nombre como ‘example.com’ y elija la ubicación. Haga clic en Aceptar. El sitio web está listo.

Resultado final de cada página

Página delantera

Sección ‘Servicios’

Sección ‘Por qué nosotros’

Sección ‘Testimonios’

Sección ‘Contáctenos’

Sección de pie de página

Sección ‘Boletín’

CONCLUSIÓN

Estoy seguro de que tienes todo lo que te prometí después de seguir este tutorial. Este es solo un ejemplo. Juega un poco con esta increíble herramienta y diseña sitios web impresionantes y profesionales mientras exploras infinitas posibilidades creativas en el camino. Gracias.