Botón gratuito de “Compartir” realizado con Adobe Fireworks

El artículo anterior explicaba conceptos básicos sobre los degradados en Fireworks, continuando con la idea, este tutorial te enseña a realizar un botón simple y en óptima calidad que podrás adaptar a uno de tus diseños.

Para los que llegan desde el buscador o una red social, puedes revisar el artículo que mencionamos en el siguiente enlace.

Visita el sitio

LO QUE ESTARÁS CREANDO

Este es el resultado final, un botón de “Compartir” con un símbolo del hermoso set de íconos gratuito Entypo. Claro está que puedes elegir el ícono que desees, e incluso desarrollar un set de botones con diferentes funcionalidades. Puedes descargar íconos para UI gratis para personalizar el botón a tus necesidades.

PRIMEROS PASOS

Creamos un lienzo del tamaño deseado y con la tecla U creamos un rectángulo. Las medidas de mi botón en 2× serán 194 pixeles de ancho y 52 pixeles de altura. El botón en tamaño normal será de 97 pixeles de ancho por 26 pixeles de alto.

Seleccionamos el rectángulo y aplicamos esquinas redondeadas en el campo “Redondez”. Un valor de 5 pixeles.

Este rectángulo funcionará como borde debido a las limitaciones de trabajar con borde y efectos en vivo de Fireworks, más adelante les daré la explicación más claramente.

Entonces rellenemos esta forma con color #005B79.

AÑADIENDO EL RELLENO CON GRADIENTE

Ahora creamos un segundo rectángulo que será 4 pixeles más pequeño en ancho y en altura. Tomamos ambos y los centramos vertical y horizontalmente. Este será el relleno de nuestro botón, y tendrá una gradiente como aprendimos a realizar arriba.

La gradiente será lineal vertical, el color de inicio es #00AFEA y el color de final es #00769D. En este paso deberías tener el botón como el siguiente, con el borde en color oscuro de 2 pixeles y el relleno con degradado.

Continuemos agregando efectos a este botón. Una sombra interna en color más claro agregará relieve. Seleccionamos el rectángulo pequeño y nos dirigimos al menú desplegable Filtros para aplicar una Sombre interior.

Esta sombra se ubicará en la parte superior del botón y actuará a modo de iluminación. Esta sombra será una iluminación “dura”, es decir, sin difuminado. En la imagen a continuación podemos apreciar que el ángulo de 270º aplica la sombra interior en el límite superior del rectángulo pequeño. Marcando la distancia en 2 pixeles y la suavidad en 0 obtenemos una sombra que se difumina a medida que sigue la curva de las esquinas.

¿Por qué no añadimos un borde de 2 pixeles a la forma? Si añadimos el borde como haríamos normalmente y luego añadimos la sombra interior el resultado será un botón de calidad — muy — inferior. En la imagen podrán apreciar el resultado de hacerlo con dos capas y hacerlo con una capa única.

TEXTO E ÍCONO

Ahora, con la tecla T añadimos el texto a nuestro botón. Yo utilicé Helvética Neue Bold en tamaño 25 pixeles. Le agregué una sombra “dura” para mantener coherente el estilo de sombreado. Aplicaremos esta sombre con el menú Filtros.

Configurando el ángulo a 270º la sombra “caerá” bajo el texto, como si estuviera siendo iluminado desde arriba.

Añadiremos el ícono del set Entypo en vectores, lo coloreamos de blanco y aplicamos una sombra idéntica a la que utilizamos para el texto.

El estado hover del botón es simple de realizar, cambiamos el color del texto al mismo color del borde y la sombra del texto a #00ADE8.

Redimensionando el botón

Para realizar el botón en tamaño pequeño seleccionamos las cuatro capas de nuestro botón en estado normal:

  • Fondo oscuro que actúa como borde
  • Relleno del botón
  • Texto
  • Ícono
Copiamos y pegamos en el mismo lienzo y procedemos a escalar el botón. Luego repetimos este paso con el estado del botón hover.

Trucos y atajos para que el botón sea pixel perfect

Hay algunos detalles que tendremos en cuenta.
  1. Algunos trazos pueden haber quedado borrosos si las dimensiones de tu botón no son números enteros divisibles. Para aclarar, si tu botón mide 245 pixeles de ancho y vas a dimensionarlo a la mitad de ese tamaño, 122,5 pixeles ¡vas a tener border borrosos!. La solución es Control + KAjustar a pixeles o Snap to pixels. Esta herramienta ajusta los pixeles fugitivos a la cuadrícula nuevamente.
  2. Las esquinas quedaron demasiado redondeadas. Si te parece que las esquinas del botón quedaron demasiado redondeadas luego de que redimensionaste el rectángulo, selecciónalo y ajusta su “Redondez”. Pasando de 5 a 3 pixeles de radio el botón ya se ve más como su hermano mayor.
  3. La gradiente no escaló junto con el vector. Este es un problema común que tiene una solución simple, hacemos doble click en el puntero donde comienza nuestra gradiente. Si cambiaste el ángulo a la gradiente, esto no se reestablecerá.

Nuestro botón ya está listo, y si desean tener el que realicé como guía pueden descargar el archivo .fw editable.

Este pack de botones en vectores tiene licencia Reconocimiento-CompartirIgual 3.0 Unported (CC BY-SA 3.0)

Usted es libre de:

  • Copiar, distribuir y comunicar públicamente la obra
  • Remezclar — transformar la obra
  • Hacer un uso comercial de esta obra

Bajo las condiciones siguientes:

Reconocimiento — Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).

Compartir bajo la misma licencia — Si altera o transforma esta obra, o genera una obra derivada, sólo puede distribuir la obra generada bajo una licencia idéntica a ésta.

Descarga
Modificado por última vez el día 06 de diciembre de 2012 a las 14:59
Scroll to top