El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Muse CC práctico: Diseño de landing page

Creación de logos de redes sociales para la landing page

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Vamos a generar unos botones de redes sociales a partir de un archivo de Illustrator. Podemos exportar a SVG desde Illustrator para luego importar en Muse o simplemente copiamos y pegamos. En ambos casos se pueden escalar los logos sin afectar la calidad.
04:57

Transcripción

Ahora vamos a necesitar unos botones de redes sociales en la parte inferior del "landing page". Así que vamos a abrir un archivo que se llama 'redes-sociales.ai', que se encuentra en la carpeta 'assets', hacemos un doble clic. Este es el archivo, observen que ahí tenemos unos elementos vectoriales, solamente que el relleno es blanco. Típicamente nosotros exportamos estos elementos en un formato optimizado como JPG, PNG o GIF. Sin embargo, actualmente podemos trabajar con otro formato que se llama SVG, el cual tiene una ventaja muy importante para este tipo de elementos y es que recibe información vectorial, la cual se puede escalar sin perder la calidad. Yo puedo, bajo el menú Archivo, seleccionar el submenú Exportar y utilizar un comando que se llama Exportar para pantallas. Esto hace que yo pueda visualizar en esta ventana los "artboards" que hacen parte de este archivo de Illustrator. Y yo puedo definir el formato de archivo en el cual voy a optimizar, en este caso voy a utilizar en SVG –tiene sentido– porque estos elementos son vectoriales, entonces quiero mantener esa información vectorial para poder escalar sin inconvenientes. Hago clic en esta carpeta y voy a seleccionar como carpeta de destino la carpeta 'tmp'. Hago clic en Elegir, Exportar mesa de trabajo y aquí tenemos los tres archivos en formato SVG. Muse tiene soporte de importación para los archivos SVG, así que no hay ningún problema en integrar estos elementos. Sin embargo, también yo puedo hacer lo siguiente: puedo seleccionar este elemento, copiamos, volvemos a Muse y pegamos simplemente con Comando+V o Control+V. Repito el proceso –lo hago de forma independiente para tener los elementos también de forma independiente– y ya tenemos estos tres elementos. Ahora, la diferencia entre importar un archivo SVG y copiar y pegar desde Illustrator a Muse simplemente la vamos a ver en el panel de Activos. En este caso, como nosotros copiamos y pegamos, entonces bajo esta columna nos parece este ícono indicando que no hay un vínculo externo, sino que toda la información ha sido pegada dentro de Muse. Por otra parte, si nosotros importamos el archivo SVG, entonces se mantiene un vínculo con ese archivo externo. Vamos ahora a escalar, mantengo la proporción haciendo clic en este botón, y el tamaño que yo necesito es 50 píxeles, 50 píxeles, y 50 píxeles. La posición en Y es 388, igual: 388 e igual: 388. Vamos a ubicar este elemento en la mitad, entonces abrimos un panel que se llama el panel Alinear, en este menú desplegable verifico que esté activa la opción Alinear con el área de contenido y alineamos al centro. Finalmente seleccionamos estos tres elementos y vamos al área de los estados, seleccionamos el estado Rollover y cambiamos la opacidad al 50 % en ese estado. Volvemos a los estados, y activo la opción de Desvanecer para dejar una transición. Vamos al área de previsualización, aquí tenemos la transición. Sin embargo, cuando entra la transición está bien, pero cuando sale está cortante. Entonces vamos al área de diseño, nuevamente al área de estados y seleccionando el estado Normal también marcamos la opción de Desvanecer. Y adicionalmente, en el área de Hipervínculos vamos a escribir numeral. Esto es, dado que no tenemos aún los vínculos correspondientes a estas redes sociales, entonces colocamos este vínculo temporal. Esto hace que cuando nosotros coloquemos el puntero sobre estos elementos, cambie el ícono a la manita. Adicionalmente, miren que la transición está funcionando correctamente. De esta manera, entonces tenemos el diseño completo de nuestra "landing page".

Muse CC práctico: Diseño de landing page

Lleva a la práctica tus conocimientos de Adobe Muse CC con este ejemplo sobre la creación de una landing page con comportamiento responsive y correctamente estructurada.

47 min (15 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.