Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Muse

Cómo crear botones en Photoshop y Adobe Muse

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called All About Adobe Muse.
How to Use Web Fonts With Adobe Muse
How They Did It: “Years of Living Dangerously” EPK Microsite
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Alejandra (you can also view the original English article)

En este tutorial te mostraré cómo crear un botón en Photoshop y usarlo, con todos sus estados, en un proyecto de Adobe Muse. Una vez que hayamos diseñado e importado nuestros activos de Photoshop en Adobe Muse, veremos qué pasa si queremos actualizar el PSD más adelante.

Ver el Screencast

Descarga el video o suscríbete a Tuts+ Web Design en YouTube.

Leer el Tutorial

Bienvenido a este tutorial de consejos rápidos sobre Adobe Muse. El video de arriba te muestra cómo se puede crear un botón en Photoshop y colocarlo en Adobe Muse.

Un botón en Adobe Muse tiene cuatro estados. Por lo tanto, si colocas un rectángulo en Adobe Muse sabes que por defecto, tienes cuatro estados

  • Normal.
  • Rollover (cuando el ratón está sobre su elemento).
  • Ratón pulsado (Mouse Down) - cuando haces clic.
  • Y Activo.

Para crear un botón, dibuja un rectángulo y luego rellénalo con un color o un degradado, o añade una imagen en el fondo.

Esto es genial, pero a veces querrás diseñarlo todo en Adobe Photoshop, y poder importar los estados desde allí.

Usando Photoshop

Abre Photoshop y crea una forma vectorial; un botón verde normal. Estílalo como quieras, con esquinas redondeadas, un borde y así sucesivamente. Quiero crear cuatro estados, así que empezaré nombrando a esta primera capa Botón Normal.

Luego duplicaré la capa, la siguiente capa será mi estado del Ratón pulsado.

En este caso solo cambiaremos el color, haciéndolo más claro.

Repite el proceso para los cuatro estados que necesites, luego guarda el archivo como ButtonGreen.psd.

Pasando a Adobe Muse

Ahora en Adobe Muse, si quiero usar este diseño sin exportar las capas a archivos PNG, puedes ir directamente a Archivo > Colocar botón de Photoshop, seleccionar ButtonGreen.psd, y luego, se analizarán todas las capas que están disponibles en el archivo de Photoshop.

Asigna cada capa a un estado de botón, luego colócalas en el escenario, y redimensiónalas si es necesario.

Luego, usando la herramienta Texto, podemos añadir una etiqueta encima de ella (por ejemplo, SUBSCRIBIRSE).

Vista previa

Si ahora lo ves en el navegador verás que, en efecto, tenemos cuatro estados. Cuando hacemos Rollover, y cuando hacemos clic, cambiará el estado del botón.

Volver a Photoshop

Ahora, ¿qué pasa si cambio o modifico mi diseño en Photoshop?

Por ejemplo, en Photoshop cambiemos el color del estado normal. Lo convertiremos en un Botón Azul, y luego guardaremos el archivo PSD. Si ahora volvemos a Adobe Muse, no hay ningún cambio visible, pero si abrimos el *Panel Activos*, verás un mensaje de advertencia.

Dirá que el activo ha cambiado desde que se importaron los datos, así que podemos hacer clic con el botón derecho y decir que queremos actualizar el activo.

Conclusión

Esto demuestra que trabajar con activos entre Adobe Photoshop y Adobe Muse es más fácil que nunca. ¡Espero que hayas disfrutado de este rápido consejo!

Más de Adobe Muse

Para una mirada más detallada a Adobe Muse, echa un vistazo a mi curso gratuito Diseñar y publicar sitios web con Adobe Muse.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.