La mejor Exportación esta en Fireworks (Parte 2)

Continuamos con la exportación en Fireworks Cs3 enfocandonos mas a fondo en el panel de optimización. En la primera parte del articulo estuvimos exportando imágenes sin tener en cuenta la extensión de salida, ahora vamos a ver el panel de optimización para exportar un Gif.

Exportar en Gif

Este formato es el ideal para gráficos con pocos colores, aunque podes lograr buenos resultados en fotografías pequeñas ya que la extensión .Gif te permite llegar a un máximo de 256 colores. Esta extensión es la indicada para Botones, Iconos, Fondos, Títulos… y pequeños gráficos.

Configuración:

Es muy importante tener mas o menos una noción de cuantos colores vemos en nuestra imagen, esto será muy importante para lograr una buena relación Peso/Calidad.


Entonces vamos probando cual tipo de optimizacion se adapta mejor comparando la calidad obtenida en pantalla:

formatos de exportacion

Web 216: Para imágenes mas complejas, hasta 216 colores todos seran seguros para la web.
Websnap 256: Convierte los colores que no son seguros a los seguros cercanos con un máximo de 256.
Websnap 128: Convierte los colores que no son seguros a los seguros cercanos con un máximo de 128
Adaptable 256: contiene solo los colores utilizados en la gráfica que estas exportando con un máximo de 256.
Animado websnap 128: define como una animación gif y también se acerca a los colores seguros hasta 128.

Estos valores son predeterminados de fireworks pero lo interesante es que se pueden lograr valores personalizados, donde también podes elegir escalas de grises, blanco y negro, sistema windows y mac entre mas opciones.

Para eso nos remitimos a las siguientes opciones:

Formato del archivo: donde eliges la extensión.
Perdida: Repite la cantidad de pixeles y los fusiona para simular un desenfoque, intentando mejorar la salida final de la imagen optimizada.
Colores: para controlar la cantidad de colores.
Trama: Mejora la calidad la imagen, pero no es recomendable para la web ya que genera un archivo mas pesado.
Transparencia: Para asignar transparencias.

Exportando un Gif:

Para este caso vamos a utilizar la imagen de ejemplo y algunos de los pasos utilizados en la primera parte del informe.

Con la herramienta de división segmentamos nuestro diseño y accedemos a la vista de 2 copias.

exportar gif

A continuacion nos ubicamos en el panel de optimización:

panel gif

1 – Seleccionamos la opcion Gif
2 – Elegimos adaptable a la web para que los colores se conviertan en colores seguros y puedan ser mas fieles a los navegadores.
3 – Utilizaremos 256 colores porque el boton es medio complejo e incluso tiene unos degradados que a menos colores perderan calidad.
4 – Le damos un poco de perdida, para que los bordes filosos se difuminen un poco, ademas ganamos unos Kb/s.
5 – Click derecho sobre nuestra seccion > Exportar división seleccionada…

Nota: El campo “A” ira cambiando de valor nuestra configuracion de forma literal según la pre-configuracion por defecto de firewoks, esto no afecta en nada tu personalización, es puramente literal.

Exportando un gif con zonas Transparentes:

En este caso le damos continuidad al ejemplo anterior añadiendo transparencia en determinados puntos de nuestra imagen.

cuentagotas
1 – Seleccionamos “Transparencia de Indice” en el panel (ver en el gráfico de arribael campo B), esta te permite activar o desactivar píxeles con valores de color específicos.
2 – Con la herramienta “Seleccionar color transparente” hacemos click sobre el color de la imagen que queremos hacerlo transparente, tambien podemos hacerlo desde el panel de colores.
3 – Los cuentagotas adicionales que se encuentran al lado te permiten agregar o restaurar los colores.

transparencias en fireworks

Significado de los símbolos que podras ver en el panel de colores:

colores

Nota: Si tenemos un fondo con un color predefinido, este se hara transparente automáticamente al seleccionar “Transparencia de índice”, esto te sirve si quieres exportar un gráfico con el fondo transparente.

En definitiva con la Transparencia de índice podemos lograr muy buenos resultados y es la indicada para Gif Transparentes. También podes ver en el menú que te aparece una “Transparencia de Alpha”, esta es útil a la hora de exportar gif transparentes con degradados o para Flash que admite este tipo de transparencias, pero mas que nada la Transparencia de Alpha es la indicada para la extensión PNG.

Pronto continuaremos con la tercera parte de este informe desglosando la exportación en JPG.

2 respuestas a “La mejor Exportación esta en Fireworks (Parte 2)”

  1. Maxell dice:

    Buen tuto man pero falto poner mas imagenes explicando o algun video ……..

  2. Sebas dice:

    ACTUALIZATE mi cuate ahor ahi CS5 y en spanish.
    Osea haz F5 o Refresh

Deja un comentario