Cómo diseñar una página de destino impresionante para un sitio web de cartera con Adobe Muse

3

La lista de lo que se debe y no se debe hacer en un sitio web de cartera es interminable. Sin embargo, de esas listas, encontré dos cosas en común: evitar llenar una sola página con todo y mantener la página de destino y la navegación lo más simples, atractivas y fácilmente accesibles posible.

Eso es lo que aprenderás con este tutorial. Aparte de esto, usted:

  • Aprenda a optimizar gráficos para un sitio web de Muse usando Adobe Illustrator (esencial para hacer que el contenido del sitio se cargue más rápido)
  • Ser capaz de mostrar contenido en perspectiva utilizando Photoshop.
  • Aprende a diseñar una landing page profesional con Adobe Muse.

REQUISITOS DE ESTE TUTORIAL:

Para comprender correctamente y crear exactamente lo que se muestra en este tutorial, deberá descargar ciertos activos de varios recursos gratuitos. Sin embargo, aún puede seguir adelante sin estos.

  • Ingresa a https://goo.gl/KVL9r1 y descarga esta imagen para el encabezado. Sus dimensiones deben ser de 1400 x 750 píxeles. Aquí hay una captura de pantalla del sitio. Coloque este tamaño en cuadros de tamaño personalizado y descárguelo.

  • Vaya a http://goo.gl/ZeHxOF y http://goo.gl/BASRSP y descargue el paquete de iconos de redes sociales y el icono de flecha hacia abajo.

  • Los logotipos utilizados en este tutorial se pueden descargar aquí (hipervínculo: el archivo ‘assets.rar' se adjunta con el correo electrónico)

  • Vaya a http://goo.gl/mzw1Xh y descargue este vector de pantalla iMac de 27" que se usará para mostrar el proyecto de ‘diseño de sitios web'.

  • Abra la aplicación de escritorio Creative Cloud y descargue maquetas de iPhone y iPad mini como se muestra a continuación. Se agregarán automáticamente a su biblioteca de Photoshop.

PASO #1: CÓMO OPTIMIZAR GRÁFICOS PARA WEB EN ADOBE ILLUSTRATOR:

1. Abra el archivo ‘eps' de iconos sociales en Illustrator. Seleccione el ícono de Facebook (versión cuadrada) y presione Ctrl+Shift+G para desagrupar estos íconos.

2. Haga clic fuera del lienzo y seleccione el ícono de Facebook nuevamente. Luego, ve al panel de transformación ubicado en la parte superior y pon W=19.5, H=19.5 y presiona enter.

3. Presione Ctrl+C y luego, Ctrl+N. En este nuevo cuadro de diálogo del documento, coloque ‘static_facebook_icon' en el campo Nombre, W=20 y H=20. Asegúrese de que los píxeles estén seleccionados en la lista desplegable de unidades. Haga clic en Aceptar.

4. Presione Ctrl+V para pegar el icono de Facebook y alinearlo correctamente.

5. Vaya a Archivo > elija ‘guardar para web' (Alt+Shift+Ctrl+S). Elija PNG-24 de la lista desplegable ubicada en la parte superior derecha. Haga clic en Guardar y guárdelo en la ubicación deseada. Además, guarde el archivo del ilustrador (Ctrl+S)

6. Repita los pasos 2 a 5 para los íconos de twitter, google plus, LinkedIn y Behance y guárdelos para la web.

NOTA: hemos elegido el formato png porque tienen una gran transparencia, un tamaño comparativamente más bajo y son mejores para iconos y vectores.

7. Del mismo modo, optimice estos cinco iconos para la imagen del encabezado. Esta vez, cambia su color a blanco. Para hacer esto, seleccione el ícono, vaya al menú desplegable Relleno ubicado en la parte superior izquierda debajo del menú de la aplicación, seleccione el color blanco y guárdelo para la web. Ahora, tiene 10 íconos: 5 grises y 5 blancos.

8. Después de eso, optimice el ícono de la flecha hacia abajo (color: blanco, documento W= 30px, H=20px) y guárdelo para web como PNG-24.

9. Ahora, cree un nuevo documento de tamaño 1400 x 750 píxeles y asígnele el nombre header_image. Haga clic en Aceptar.

10. Vaya a Archivo > Colocar y busque la imagen que descargamos de pexels.com. Haga clic en el lienzo para colocarlo y ajustarlo dentro del lienzo.

CONSEJO: Presiona ‘Z' en tu teclado, mantén presionada la tecla Alt y haz clic en el lienzo un par de veces para alejarte un poco y que todo sea visible a la vez.

11. Seleccione la herramienta Rectángulo de la caja de herramientas ubicada en el lado izquierdo de la ventana de la aplicación. Crea un rectángulo y transfórmalo a W=1400, H=750px. Luego, arrastre este rectángulo a la imagen colocada.

12. Con este rectángulo seleccionado, vaya al menú desplegable de relleno, seleccione el menú de bibliotecas de muestras ubicado en la esquina inferior izquierda. En esta lista, vaya a ‘Gradientes' y elija ‘Tonos terrestres'.

13. Seleccione Earthtone 30 como se indica en la captura de pantalla a continuación y cierre este panel.

14. Con el rectángulo aún seleccionado, vaya a la pestaña de degradado ubicada en el lado derecho de la ventana de la aplicación. Si no está allí, presione Ctrl+F9. Haga clic, mantenga presionado y arrastre el control deslizante de degradado central hacia el extremo izquierdo.

15. Luego, dentro del campo ‘Opacidad' (ubicado en la parte superior), ingrese 87% y presione enter.

16. Guarde esta imagen para la web. Esta vez, elija JPEG y calidad = 86%. Además, guarde el archivo del ilustrador.

PASO #2: PREPARACIÓN DE ACTIVOS EN PHOTOSHOP:

17. Abra Adobe Photoshop CC. Vaya a Archivo > seleccione ‘Nuevo'. Pon el nombre como ‘ecommerce_design', W=619px y H=310px.

18. Desde el panel Bibliotecas (ubicado en el lado derecho), seleccione la mini maqueta de ipad que descargamos y arrástrela al lienzo.

19. Mantenga presionada la tecla Mayús y aumente su tamaño arrastrando las esquinas y ajústelo dentro del lienzo como se muestra a continuación.

NOTA: Es posible que desee utilizar la herramienta de zoom. Para cambiar entre las herramientas de zoom y selección, presione las teclas ‘Z' y ‘V' en su teclado. Además, si no puede encontrar el panel de bibliotecas (o cualquier otro panel), simplemente vaya al menú Ventana> seleccione Bibliotecas.

20. Seleccione la herramienta Rectángulo y cree un rectángulo de cualquier tamaño dentro del lienzo (no se preocupe por el color de relleno). Aparecerá un cuadro de propiedades. Dentro de esto, pon W=1024px y H=768px y asegúrate de que el ícono de la cadena no esté seleccionado.

21. Ahora, haga clic en el icono de la cadena para seleccionarlo. Pon W=290px y presiona enter. Contrae este panel de propiedades.

22. En el panel Capas ubicado en el lado derecho, seleccione ‘Rectángulo 1', haga clic con el botón derecho y elija ‘convertir en objeto inteligente'.

23. Luego, vaya al menú de edición> elija ‘Transformación libre'. Nuevamente, abra el menú de edición> transformar> seleccione ‘distorsionar'.

24. Sostén una esquina del rectángulo y hazla coincidir con una esquina de la pantalla del ipad. Haga esto para las cuatro esquinas y presione enter. Tendrás el siguiente resultado. Utilice la herramienta de zoom si es necesario.

25. En el panel Capas, haga clic derecho en la capa de fondo y elimínela. Además, haga que la capa ‘rectángulo 1' sea invisible haciendo clic en el ícono del ojo pequeño a su izquierda.

26. Repita los pasos 18 a 22 para crear un rectángulo más, conviértalo en un objeto inteligente y haga que coincida cada esquina con las esquinas de la pantalla del ipad y presione enter.

27. Haga que la capa ‘rectángulo 1' sea visible y la capa ‘ipad' invisible.

28. Haga clic derecho en la capa ‘rectángulo 1' y elija ‘editar contenido'. Se abrirá en una pestaña nueva. Vaya a Archivo > Colocar incrustado, busque ‘screen1.webp' que se puede encontrar en la carpeta Logos que descargó. Haz clic en colocar y presiona enter. Presione Ctrl+S. Este cambio se actualizará en el rectángulo 1 de nuestro archivo principal. Cierra esta pestaña.

29. Del mismo modo, haga esto para el rectángulo 2 con ‘screen2.webp' y guárdelo. Mueva las capas hacia arriba o hacia abajo en el panel de capas según sus preferencias. Elimina la capa del ipad.

30. Haga clic derecho en cualquier capa de rectángulo y elija ‘opciones de fusión'. Aparecerá un cuadro de estilo de capa. Seleccione la última opción que es ‘sombra paralela' y coloque los valores como se muestra a continuación.

31. En este cuadro de diálogo, justo al lado del modo de fusión, hay un cuadro de color. Haga clic en él y elija los siguientes valores de color.

32. Aplique el mismo efecto de sombra paralela a la segunda capa también. Presione Alt+Ctrl+Mayús+S. Seleccione PNG-24 y haga clic en guardar. Tendrás el siguiente resultado.

NOTA: Así es como puedes colocar un sitio web o cualquier imagen en perspectiva. Solo necesita saber la resolución exacta del dispositivo en el que lo va a colocar. Hágalo para maquetas de iphone e imac para mostrar proyectos de ‘diseño de logotipo' y ‘diseño de sitio web' como se muestra a continuación.

PASO #3: CONFIGURACIÓN DEL ESPACIO DE TRABAJO EN MUSE:

33. Abra Adobe Muse CC. Será recibido con una pantalla de bienvenida. En ‘Crear nuevo', haga clic en sitio y aparecerá un cuadro de diálogo de sitio nuevo.

NOTA: Otra forma de crear un nuevo sitio es yendo a Archivo > Nuevo sitio o Ctrl+N.

34. En este cuadro de diálogo, hay un menú desplegable que dice ‘ancho de fluido'. Ábralo haciendo clic en él y seleccione ‘Ancho fijo' y cambie los valores de ancho de página y columnas como se muestra a continuación. El valor del campo ‘alcantarillado' cambiará automáticamente.

35. Expanda la opción de configuración avanzada y asegúrese de que la casilla de verificación ‘pie de página adhesivo' esté seleccionada. Además, asegúrese de que el sitio esté ‘alineado al centro' dentro del área del navegador. Haga clic en Aceptar. Muse lo llevará al modo PLAN.

36. Pulse Ctrl+S y guarde su sitio en la ubicación deseada. Le recomiendo que cree una carpeta separada para su sitio y la guarde cada vez que realice un cambio.

NOTA: el ancho fluido es para crear un diseño receptivo. Elegimos ancho fijo porque crearemos un efecto de desplazamiento que no funciona con sitios fluidos.

37. Haga doble clic en ‘A-master' ubicado en la parte inferior en un área gris. Desde la caja de herramientas ubicada en el lado izquierdo de la ventana de la aplicación, seleccione ‘herramienta de texto'.

38. Haz un cuadro de texto en el lienzo. Presiona Ctrl+T para abrir el panel de texto y en el menú desplegable de fuentes, busca fuentes web y elige ‘agregar fuentes web'.

39. Aparecerá una nueva ventana. Seleccione la pestaña ‘fuentes web de borde', busque y descargue las siguientes fuentes una por una:

  • Monótono
  • Télex
  • Números
  • raleway
  • Lado
  • Cuestiones

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

40. Abra el panel ‘Capas' ubicado en el lado derecho o vaya al menú Ventana> elija ‘capas'. Haga clic en el pequeño ícono de papel con borde doblado ubicado en la parte inferior derecha. Haz clic dos veces para crear dos capas más.

41. Haga doble clic en ‘capa 1'. Aparecerá la ventana de opciones de capa. Debajo del nombre, coloque ‘home_header' y haga clic en Aceptar. Repita este proceso para otras dos capas y asígneles el nombre ‘static_header' y ‘content' respectivamente.

42. Organice las capas en el orden que se muestra a continuación simplemente arrastrándolas hacia arriba o hacia abajo y guarde los cambios.

NOTA: Hemos puesto las capas en este orden porque queremos que nuestro encabezado esté encima de todo lo demás. Las capas son una forma eficiente de organizar y apilar el contenido del sitio, especialmente cuando el diseño se vuelve complejo.

43. Seleccione la capa ‘static_header' y contraiga este panel.

PASO #4: ESTABLECIMIENTO DE CABECERA ESTÁTICA:

44. En la parte superior de la página, verá dos guías. La primera es la guía de "parte superior de la página" y la segunda es la "guía de encabezado". Haga clic, mantenga presionada y arrastre la guía de encabezado a continuación y configúrela en 80 píxeles. Puedes hacer esto con la ayuda de las reglas. Esta es nuestra área de cabecera.

45. Seleccione la herramienta Rectángulo o presione ‘M' en su teclado. Haga un pequeño rectángulo en el lienzo y asegúrese de que el color de su borde sea ‘rojo', lo que indica que este objeto está dentro de la capa ‘static_header'.

46. ​​Vaya a ‘Redimensionar' (o ‘Transformar' en versiones anteriores de Muse) ubicado en la parte superior derecha, haga clic y coloque H=80.

47. Arrastre este rectángulo y colóquelo dentro del área del encabezado de tal manera que encaje con las guías de ‘parte superior de la página' y ‘encabezado'.

48. Ahora, aumentaremos el ancho del rectángulo y lo haremos al 100% para que sea escalable para cada tamaño de pantalla. Expanda el rectángulo a ambos bordes y asegúrese de que encaje con los bordes de la página. Cuando llegue al borde, aparecerá una guía de color naranja que indica que el objeto se ha ajustado y un mensaje dirá W = 100% o W = 1400.

49. Con el rectángulo seleccionado, haga clic en el menú desplegable Relleno debajo del menú de la aplicación y seleccione el color blanco.

50. Haga clic en la palabra ‘trazo' junto al relleno. Haga clic en el icono de la cadena para dividirlo y coloque ‘1' en el campo de peso de trazo inferior.

51. Después de eso, haga clic en el menú desplegable de color de trazo, coloque los valores para R, G y B como 235 cada uno. Luego, haga clic en el ícono de papel con el borde doblado para crear una nueva muestra. Aparecerá un cuadro de opciones de muestra. Haga clic en Aceptar y guarde los cambios.

52. Vaya a Archivo > Lugar. Busque ‘static_logo.webp' y haga clic en abrir. El cursor cambiará su apariencia a un arma de lugar cargada con una imagen. Haga clic en el lienzo para colocarlo.

53. Luego, mueva esta imagen al rectángulo del encabezado y alinéela con su centro vertical (una línea azul indicará cuándo está centrada) y ajústela al borde izquierdo como se muestra a continuación.

54. Nuevamente, vaya a Archivo > colocar y seleccione todos los íconos estáticos de redes sociales que optimizamos usando Illustrator. Haga clic en Abrir. Verás que la pistola de lugar tendrá un número (5) indicando cinco imágenes cargadas. Si desea cambiar a otro ícono para colocarlo primero, puede usar las teclas de flecha en su teclado. Colócalos uno por uno.

55. Seleccione todos los íconos y vaya al panel ‘Alinear' ubicado al lado de Redimensionar en la parte superior derecha. En el menú desplegable ‘Alinear con', seleccione ‘alinear con el objeto clave'.

56. Luego, coloque 11 en el campo proporcionado bajo la opción ‘Distribuir espaciado'. Haga clic en las opciones ‘A' y ‘B' como se muestra en la siguiente captura de pantalla.

57. Con estos iconos seleccionados, haga clic derecho y elija ‘grupo' o Ctrl+G. Mueva este grupo al rectángulo del encabezado y ajústelo al borde derecho alineado con el logotipo como se muestra a continuación.

58. Cree un cuadro de texto y escriba INICIO en él. Presiona Ctrl+T y selecciona Fuente: Télex, Tamaño: 13, color: negro, alineado al centro e interlineado al 120 %. Ajuste el ancho y la altura de este cuadro de texto de acuerdo con el tamaño de fuente.

59. Del mismo modo, cree cuatro cuadros de texto más para TRABAJO, SERVICIOS, CONTACTO y ACERCA DE. Selecciónelos todos, vaya al panel de alineación y repita lo que hicimos con los íconos de las redes sociales. Esta vez, cambie el espaciado de distribución a 50. Agrupe y muévalos al rectángulo del encabezado como se muestra a continuación.

60. Ahora, fijaremos estos objetos en la parte superior del navegador, lo que hará que nuestro encabezado sea estático. Significa que siempre se mostrará en la parte superior del navegador independientemente del desplazamiento. Para hacer esto, seleccione el rectángulo de encabezado, vaya a ‘Pin' ubicado en la parte superior derecha y haga clic dentro de su cuadrado central superior como se muestra a continuación.

61. Del mismo modo, fije el logotipo en la parte superior izquierda, el grupo de menús en el medio superior y el grupo de iconos sociales en la parte superior derecha. Nuestro encabezado estático está listo.

PASO #5: ESTABLECIMIENTO DEL PIE DE PIE:

62. Verá tres guías en la parte inferior: pie de página, parte inferior de la página y parte inferior del navegador. Haga clic, mantenga presionada y arrastre la guía "parte inferior del navegador" y configúrela en 770 píxeles con la ayuda de las reglas. Luego, arrastre la guía de ‘pie de página' y ajústela a la guía de ‘parte inferior de la página'. Esta es nuestra área de pie de página.

63. Cree un rectángulo dentro de esta área de H=270 y W=546, haga que sus lados superior e inferior coincidan con el pie de página y la parte inferior de las guías del navegador, respectivamente.

64. Con este rectángulo seleccionado, haga clic en la palabra ‘trazo' y aplique solo el trazo superior de peso ‘1' (valores de color de trazo: R=235 G=235 B=235). Vaya al panel ‘alinear' y debajo de alinear objetos, seleccione ‘alinear centros horizontales' (es la segunda opción).

65. Coloque static_logo.webp y agregue texto dentro de este rectángulo como se muestra a continuación. (Fuente del texto: Arimo, Tamaño: 14, Color: R=37 G=37 B=37, alineado al centro y 120 % de interlineado).

66. El símbolo de derechos de autor que está viendo antes de 2016 se puede agregar desde el panel "Glifos" ubicado en el lado derecho de la ventana de la aplicación. Si no está allí, vaya a Ventana > Glifos. Nuestro pie de página está listo.

PASO #6: CREAR EL ENCABEZADO DE LA PÁGINA DE INICIO Y EL EFECTO DE DESPLAZAMIENTO:

67. Cierre la página maestra y vuelva al modo plan.

68. Abra la página ‘Inicio' haciendo doble clic en ella. Abra el panel de capas, seleccione la capa ‘home_header' y contraiga el panel.

69. Haga algo de espacio aquí arrastrando hacia abajo la capa de pie de página a 4000 píxeles con la ayuda de las reglas.

70. Ahora, crea un rectángulo de 100% de ancho. El ancho completo, como hicimos anteriormente, se puede lograr expandiendo el rectángulo desde su borde izquierdo y derecho y ajustándolo a ambos bordes de la página.

71. Expanda el rectángulo hacia arriba arrastrando su borde superior y ajústelo a la guía de la parte superior de la página como se muestra a continuación.

72. Ve al panel de cambio de tamaño, pon H=750px.

73. Con el rectángulo seleccionado, haga clic en la palabra ‘Relleno' (no en el menú desplegable de color) y haga clic en ‘agregar imagen'. Busque ‘header_image.webp' que descargamos de Pexels y optimizamos en Illustrator. En el menú desplegable ‘ajuste', seleccione ‘escala para rellenar' y colóquelo en la esquina superior izquierda.

74. En este mismo cuadro de opciones de ‘Rellenar', al lado de rellenar, hay una opción llamada ‘Desplazar'. Haga clic en él y ponga 0 en los campos de movimiento inicial y final. Esto significa que la imagen permanecerá fija y el contenido se moverá creando un efecto de desplazamiento agradable y visualmente atractivo.

75. Cree un cuadro de texto y escriba ‘ACERCA DE NUESTRO EQUIPO' en él. Fuente: télex, tamaño: 13, alineado a la izquierda, color: blanco e interlineado: 120 %. Muévalo y colóquelo en la esquina superior izquierda de la imagen de la siguiente manera.

76. Coloque todos los íconos sociales que optimizamos para nuestra imagen de encabezado. Alinéelos a la misma distancia que hicimos para el encabezado estático. Agrupe y colóquelos en la esquina superior derecha de la imagen de la siguiente manera.

77. Crea un cuadro de texto. Debe ser de W=944, H=92. Escriba ‘NOSOTROS DISEÑAMOS LA WEB' en él. Fuente: Monótono, Tamaño: 72, Alineado al centro, 120 % de interlineado. Cambia el color de la palabra ‘WEB' a R=41 G=171 B=226 y blanco para el resto.

78. Crea tres pequeños cuadros de texto más para SERVICIOS, CONTACTO y BLOG. Fuente: Télex, Tamaño: 13, Color Blanco, alineación central e interlineado 120%.

79. Coloque la imagen ‘header_logo.webp'. Ajuste el logotipo y estos cuatro cuadros de texto de la siguiente manera.

80. Vaya a la biblioteca ‘Widgets' ubicada en el lado derecho. Expanda la sección ‘Botones'. Seleccione ‘Botón de estado' y arrástrelo al lienzo. Cierra el panel de widgets.

81. Seleccione cuidadosamente el pequeño círculo dentro de este botón y presione eliminar.

82. Haga doble clic dentro del cuadro de texto de Lorem Ipsum, seleccione el texto completo, elimínelo y escriba ‘PORTAFOLIO'.

83. Seleccione la herramienta de selección (herramienta de flecha) de la caja de herramientas. Vaya al panel de texto (Ctrl+T) y cambie el formato del texto de ‘cartera' de la siguiente manera.

84. Ahora, seleccione el botón de estado y cambie su tamaño a W=177, H=43. Ajuste el cuadro de texto correctamente dentro del botón.

85. Seleccione el botón. Vaya a la opción ‘radio de esquina' (ubicada junto al trazo). Haga clic en las cuatro esquinas para hacerlas planas.

86. Con el botón seleccionado, mira en la esquina superior izquierda, debajo del menú de la aplicación. Notará que el ‘botón de estado' está escrito en negrita. Esto se conoce como ‘área de selección actual'. Te permite saber lo que has seleccionado.

87. Justo al lado está ‘Normal'. Haz clic en él y tendrás cuatro estados.

88. Para el estado Normal, cambie el color de relleno a ‘ninguno' y el color del trazo a blanco.

89. Seleccione el estado ‘vuelco', cambie el color de relleno y trazo a R=41 G=171 B=226.

90. Para el estado ‘ratón presionado' y ‘activo', los cambios requeridos se aplicarán automáticamente.

91. Seleccione su estado normal nuevamente, expanda el panel ‘Transición' ubicado en la parte inferior. Seleccione la casilla de verificación que dice ‘Fade' y coloque los valores como se muestra a continuación. Guarde los cambios.

92. Coloque la imagen ‘down_arrow.webp' debajo del botón. Deberías tener el siguiente resultado.

93. Nuestro encabezado de inicio está listo. Vaya a Archivo > Página de vista previa en el navegador (Ctrl+Shift+E) y vea si todo funciona correctamente.

PASO #7: AGREGAR CONTENIDO:

94. Vuelva a Muse, abra el panel de capas, seleccione la capa de ‘contenido' y contraiga el panel.

95. Desplácese hacia abajo hasta el espacio en blanco a continuación y cree un cuadro de texto de W=464, H=60. Escriba ‘NUESTRO TRABAJO RECIENTE' en él. Fuente: Raleway light, tamaño: 46, color: negro, alineación central y 120 % de avance. Ahora, seleccione la palabra ‘RECIENTE' y cambie su fuente a ‘Raleway Bold'.

96. Haz dos cuadros de texto más. Uno con W=376, H=165 y otro con W=376, H=363.

97. Haga doble clic dentro del primero y escriba ‘DISEÑO DE SITIO WEB'. Fuente: Raleway Extra Light, tamaño: 77, color: negro, alineado a la izquierda, 100% inicial.

98. Haga doble clic dentro del segundo y pegue un texto ficticio de lipsum.com de la siguiente manera.

  • Para el encabezado principal: Fuente: Lato Bold, tamaño: 30, color: R=33 G=42 B=52, alineado a la izquierda y 120 % de interlineado.
  • Para el párrafo principal: Fuente: Lato light, tamaño: 21, color: R=57 G=57 B=57, alineado a la izquierda y 120 % de interlineado.
  • Para el encabezado ‘Testimonio del cliente': igual que el encabezado principal pero el tamaño es 21.
  • Para el párrafo testimonial: igual que el párrafo principal pero la fuente es ‘Lato Light Italic'

99. Seleccione el botón de estado ‘cartera', cópielo y péguelo debajo del cuadro de texto que creamos en el paso anterior. Cambia el texto de portafolio a ‘VER SITIO'

  • Para estado normal – Relleno: ninguno, color de trazo y texto: negro.
  • Para estado de rollover: color de relleno y trazo: R=41 G=171 B=226 y color de texto: blanco.

100. Coloque la imagen ‘imac con maqueta de sitio web'. Organice la imagen, los cuadros de texto y los botones de la siguiente manera.

101. Desplácese hacia abajo hasta el espacio en blanco y cree un rectángulo de W=1200, H=5. Aplicar trazo superior de peso ‘1' y color R=235 G=235 B=235. Colóquelo de la siguiente manera. Esto funcionará como un separador.

102. Copie los cuadros de texto y botones que creamos en los pasos 92 a 95, péguelos debajo del separador. Cambie el texto del primer cuadro a ‘DISEÑO DEL LOGOTIPO' y el texto del botón a ‘VER EN DIRECTO'.

103. Coloque ‘iphone con maqueta de logotipo' y organícelos de la siguiente manera.

104. Copia y pega el separador después de esto.

105. Del mismo modo, copie y pegue los cuadros de texto y el botón debajo de este separador. Cambie el texto del primer cuadro a ‘COMERCIO ELECTRÓNICO'.

106. Coloque ‘ecommerce_design.webp' que creamos y optimizamos en los pasos 15 a 30 con Photoshop. Organice todo de la siguiente manera.

107. Ahora, cree un rectángulo de W=1004, H=363 sin relleno y un trazo superior de peso ‘1' y color: R,G,B=235 cada uno.

108. Dentro de este rectángulo, crea dos cuadros de texto. En el primero, escriba – ‘LO QUE CREEMOS ES' (Fuente: Raleway light, tamaño: 35, color: R,G,B=37 cada uno, alineado al centro y 100 % a la izquierda). Seleccione la palabra ‘CREER' y cambie las fuentes a ‘Raleway bold'.

109. En el segundo cuadro de texto, escriba la famosa cita de Milton Glaser como se muestra a continuación (Fuente: Lato Light Italic, tamaño: 70, color: R, G, B = 37 cada uno, alineado al centro y 120 % de interlineado).

110. Copie y pegue cualquiera de los botones de estado anteriores y cambie su texto a ‘VER NUESTRO TRABAJO'. Organice todo de la siguiente manera.

PASO #8: ENLACE:

111. Desde la caja de herramientas, seleccione ‘anclaje de enlace' o presione ‘A' en su teclado. El cursor cambiará su apariencia para colocar un arma cargada con un ancla. Coloque este ancla sobre el cuadro de texto ‘NUESTRO TRABAJO RECIENTE' como se muestra a continuación.

112. Aparecerá un cuadro de diálogo con opciones de anclaje. Dentro del campo de nombre, pon ‘recent_work'.

113. Seleccione el lugar de la imagen de la flecha hacia abajo debajo del botón de cartera. Vaya al menú desplegable ‘Hipervínculos' ubicado en la parte superior y seleccione ‘recent_work'. Guarde los cambios y obtenga una vista previa del sitio (Ctrl+Shift+E).

PASO #9: AGREGAR TEXTO ALTERNATIVO, METADATOS, ETIQUETAS DE NIVEL Y FAVICON:

114. El texto alternativo es una forma de hacer que los motores de búsqueda entiendan el significado del contenido de una imagen y debe incluirse en cada imagen que agregue a su sitio. Para hacer esto, haga clic derecho en cualquiera de las tres imágenes que hemos colocado y elija ‘editar propiedades de imagen'.

115. Aparecerá un cuadro de diálogo de propiedades de la imagen. Verás dos campos aquí. Uno es ‘información sobre herramientas' y el otro es ‘texto alternativo'. Las diferencias básicas entre los dos son las siguientes:

CONSEJO SOBRE HERRAMIENTA TODO EL TEXTO
  • Este es el título que aparece cuando pasa el cursor sobre una imagen en el navegador.
  • En HTML, esto se conoce como <title>etiqueta.
  • Esta es la información sobre el tema de la imagen.
  • En HTML, esto se conoce como <alt>etiqueta.
  • Debe ser breve pero descriptivo.
  • No aparece en el navegador pero se escribe automáticamente dentro del código.

NOTA: debe buscar en la web métodos y consideraciones importantes para agregar texto alternativo y metadatos, ya que son aspectos cardinales para un mejor SEO.

116. Para agregar metadatos, vuelva a la vista de plano, haga clic con el botón derecho en la página de inicio y elija ‘propiedades de la página'. Aparecerá una nueva ventana que contiene tres pestañas: diseño, metadatos y opciones. Cambie entre estas pestañas, explore las opciones y agregue palabras clave relevantes.

117. Otro factor importante a considerar antes de poner el sitio en línea es alterar algunas propiedades del texto para agregar etiquetas de nivel.

NOTA: Normalmente, cuando agrega contenido escrito en un sitio web, pone los encabezados en negrita y más grandes que los párrafos (u otro texto) para ilustrar la diferencia entre ellos. Nosotros, como humanos, podemos reconocer esta diferencia. Pero el problema es que el navegador no entiende qué parte de su texto es el encabezado y cuál es el párrafo a menos que asigne etiquetas de nivel designadas a cada uno de ellos.

Seguramente, presentará su página en línea tal como la diseñó, ya sea que haya aplicado las etiquetas o no (debido a CSS), pero para hacer un sitio compatible con SEO, es necesario usar estas etiquetas descriptivas.

118. Para hacer esto, seleccione el texto, vaya al panel de texto (Ctrl+T) y en la parte inferior, verá un menú desplegable que contiene todas las etiquetas. Selecciónelos en consecuencia y guarde los cambios.

119. Vaya a Archivo > Propiedades del sitio. En la pestaña de contenido, la última opción es ‘Favicon' (en versiones anteriores de Muse, está en la pestaña Diseño). Cuando pasa el cursor sobre la palabra ‘Favicon', aparecerá una información sobre herramientas que describe qué es y cuáles deberían ser sus dimensiones apropiadas. Es ventajoso agregar un favicon, ya que hace que su marca se destaque y hace que su sitio sea fácilmente identificable si los usuarios lo han marcado.

PASO #10: EXPORTACIÓN DEL SITIO:

120. Por último, vaya a Archivo > Exportar como HTML (Ctrl+E). En el campo URL del sitio, coloque www.squaremaze.com y seleccione la ubicación donde desea que se exporte el sitio. Haga clic en Aceptar. Nuestra Landing Page ya está lista. Puede obtener una vista previa (archivo ‘index.html') en cualquier navegador que desee y probar su aspecto y rendimiento.

RESULTADO FINAL:






CONCLUSIÓN

El uso de otras aplicaciones como Illustrator, Photoshop, Fireworks, Fuse y Animate para crear activos de calidad para un sitio de Muse siempre ha resultado beneficioso y ha obtenido resultados excepcionales. Este fue solo un enfoque hacia el diseño con esta increíble herramienta. Adelante, explora más. Gracias.

Fuente de grabación: instantshift.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More