Conceptos básicos para hacer un degradado con Adobe Fireworks CS6

Realizar degradados en Fireworks es muy sencillo y tenemos la opción de exportar el código en CSS luego de que terminamos de trabajar.

Estaré empleando Adobe Fireworks CS6 ya que trae funcionalidades nuevas que ayudan mucho al momento de realizar un diseño. Podemos tramar los degradados, este efecto sucede a nivel subpixel y se encarga de alisar las gradientes entre colores. El menú para acceder a los degradados se ha simplificado haciendo posible cambios en un solo click.

Realizar degradados con Fireworks siempre fue sencillo, desde que pertenecía a Macromedia hasta nuestros días es una acción intuitiva con pocos pasos y variedad de aplicaciones.

Con Control + N creamos un nuevo documento de 500px × 500px para comenzar a experimentar. El color del lienzo es transparente y la resolución es 72 pixeles por pulgada, es la resolución por defecto y no es necesario cambiarla en este caso.

Para aquellos que nunca han utilizado Fireworks

Hay un menú de capas, se puede acceder a él desde la barra lateral. Cada elemento que creamos añade una nueva capa automáticamente. Para organizar la superposición de capas simplemente usamos el atajo Control + Flecha hacia arriba y Control + Flecha hacia abajo. Para mover una capa o cambiar alguna de sus propiedades debemos hacer click sobre ella en el lienzo (es posible seleccionarla desde el menú Capas como en Photoshop, pero es más rápido trabajar a la manera Fireworks).

Cuando posicionamos nuestro cursor sobre un elemento en el lienzo su contorno quedará de color rojo, si deseamos seleccionarlo y trabajar con él hacemos click y su contorno quedará de color celeste. Siempre sabemos cual es el objeto seleccionado por el color de su contorno.

Crear una forma y rellenarla

Para crear una forma utilizaremos la tecla U, esta tecla permite aplicar las formas: rectángulo, elipse y polígono.

Para lograr este rectángulo accedemos al menú Propiedades que aparece en la parte inferior de la pantalla y configuramos los parámetros del degradado. Con un solo click pasaremos de modo relleno sólido (solid fill) a un relleno con gradiente.

El degradado que ven más arriba es simple, un degradado lineal con sus paradas en la posición 0% y 100%, con sus selectores rotados 270º y con opacidad del 100%. Para poder modificar las características de la gradiente hay que conocer qué utilidad tiene cada botón y cómo puede ayudarnos.

COLOREAR DEGRADADO

Podemos definir tantas paradas de color — color stop — como deseemos haciendo click en cualquier punto entre el color de comienzo y el color final. Si trabajamos con dos colores, el color de comienzo será el que se ubique en el punto fijo del degradado y el color del final será el ubicado en la punta adaptable.

Vemos en la pequeña imagen superior los dos extremos del degradado recortados. El color de comienzo es el verde más claro (arriba) y el puntero es circular, aquí empieza nuestra gradiente. Este punto es móvil, pero se traslada con la longitud y ángulo definidos por el punto adaptable. El puntero con forma cuadrada (abajo) se encarga de definir la longitud y orientación de la gradiente. Podemos mover el degradado, cambiar su longitud y ángulo tantas veces como queramos.

Para cambiar el color del degradado simplemente debemos hacer click en el Relleno de degradado y dirigirnos hacia el color que deseamos cambiar, allí podremos elegir en un selector el tono a utilizar. Son tres click, sigue las flechas para una ayuda visual. Una vez dentro del selector de colores podremos trabajar en código hexadecimal o RGB para crear el color que necesitamos.

¿Qué herramientas tenemos para cambiar los colores?

Opacidad del color: se define por separado para cada color stop un porcentaje de opacidad. A medida que la opacidad se acerca a 0% los objetos ubicados bajo nuestra forma vectorial se harán más visibles. Esta transparencia puede sernos útil si queremos crear una máscara sobre una imagen que vaya desde totalmente transparente hasta un color con opacidad 20%. La opacidad del color en el CSS se traduce como un color RGBa que define los tonos y además la transparencia alpha sin necesidad de aplicar opacity al elemento.

Invertir degradado: al presionar este botón los colores con sus respectivas opacidades se invierten. Es una manera rápida de cambiar la orientación del degradado sin modificar el ángulo o la longitud.

Posición de la parada: define donde se ubicará cada color stop. En este caso tenemos dos ubicadas en el 0% y el 100% pero a medida que agregamos más podemos ubicarlas con este cuadro para obtener un valor preciso. Esta herramienta es útil cuando vamos a exportar el estilo CSS de nuestra forma vectorial para emplearla en una página web.

Rotar selectores: el ángulo de rotación de selectores 0º se ubica a nuestra derecha, y aumenta en sentido antihorario. Así una rotación de 90º será “desde abajo hacia arriba” y una de 270º “de arriba hacia abajo”. En el CSS no veremos el ángulo 270º sino -90deg ya que se toman como positivas aquellas rotaciones entre el 0º y el 180º y como negativas las que hay entre 180º y 0º.

Definir paradas de color y/o de transparencia: podemos definir paradas en cualquier punto entre el color inicial y el final que modifiquen el color y/o la transparencia. Para añadir ambar en la misma posición debemos colocarlas por separado y cambiar su posición.

DEFINIR EL ESTILO DE DEGRADADO

Los estilos de degradado son los mismos que en las suite anteriores, veremos una previsualización del efecto cuando nos posicionamos sobre el nombre. Los únicos que son reproducibles con CSS de manera sencilla son el degradado lineal, radial y elipse. Podemos copiar el código CSS3 desde el panel lateral de CSS.

Estas gradientes son útiles cuando estamos editando por ejemplo texturas para un fondo. Cuando cambiemos un gradiente los colores de la anterior se mantendrán y podremos editarlos en un paso posterior.

Ahora que conoces los conceptos básicos… ¡A practicar!

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