Posteado por: jcroatto | Febrero 6, 2008

Máscaras en Fireworks

Hace poco me consultaron sobre cómo hacer imágenes con bordes redondeados. Con Fireworks podemos realizarlo muy fácilmente con máscaras.

Para realizar una máscara necesitamos dos cosas: una imagen de mapa de bits (el objeto a enmascarar) y una imagen vectorial (un rectángulo de esquinas redondeadas, por ejemplo que llamaremos objeto “enmascarante”).

Vamos a realizar un header de sitio con los bordes redondeados.

  1. Definimos un lienzo de 760 píxeles de ancho por 200 píxeles de alto. En este caso vamos a realizar un encabezado de gran tamaño. Es importante destacar que deberemos colocar como color de fondo de lienzo el mismo color de fondo que tengamos en el lugar donde vayamos a colocar la imagen con bordes redondeados.
  2. Importamos la imagen a la que queramos definir bordes redondeados ajustándola al ancho del lienzo y definiendo el área que querramos que se vea.
  3. Ajustamos el lienzo yendo a Modify >> Canvas >> Trim Canvas (Modificar >> Lienzo >> Recortar Lienzo). De esta manera quitamos toda porción de imagen que se encuentre fuera del lienzo.

Importación de imagen 4. Una vez que realizamos esto colocamos un Rectángulo Redondeado (rectángulo redondeado) sin importar el color, y que cubra el lienzo a lo alto y a lo ancho. Luego, con los pequeños manejadores amarillos Manejador hay que disminuir al ángulo de las esquinas dado que un ángulo muy importante hará que el resultado quede bastante grosero.

Mascara 2

5. Luego, seleccionamos el rectángulo que acabamos de colocar y vamos al menú Edit >> Cut (Edición >> Cortar) para mover al portapapeles el mismo.

6. Ahora seleccionamos nuestra imagen a enmascarar y vamos al menú Edit >> Paste as Mask (Edición >> Pegar como máscara). De esta manera se pegará nuestro rectángulo redondeado como máscara sobre la imagen que teníamos en la capa inferior. El resultado quedará de esta manera:

mascaras

Categorías