Hace un tiempo hablamos sobre la suite de creación gráfica Aviary, un grupo de aplicaciones online que promete bastante y crece con mucha convicción. Recientemente lanzaron oficialmente a Phoenix, un excelente editor de imágenes muy competente.

Con una interfaz muy limpia y herramientas fundamentales para el diseño se convierte en un ganador innato, es una aplicación rápida y tan precisa como Firework o Photoshop. Podes usar capas, cortar imágenes, trabajar con vectores y mucho mas. La fruta del postre es que además de ser una suite, Aviary es una comunidad en la que podes compartir y exportar tus trabajos a Picasa, Facebook y otras redes sociales.

Actualmente cuentan con unas pocas aplicaciones, pero están en constante crecimiento ya que tienen en proyecto muchísimas ideas funcionales. Solo hay que registrarse como usuario free o premium con sus respectivas limitaciones.

Video Demostración

Esta técnica se basa en el uso de la herramienta Pluma y Pincel, una combinación que puede borrar de tu mente los malos recuerdos y dar el inicio a una nueva etapa en la ilustración digital.

1 - Creamos un nuevo documento y con la herramienta Pluma (A) dibujamos un trazo (C) en una nueva capa, recuerda que en su panel de propiedades debe estar marcada la casilla Trazo(B).

2 - Luego de marcar nuestro trazo seleccionamos la herramienta Pincel(D) y abrimos su panel de configuración en Ventana > Pinceles(E)

3 - Entre los pinceles establecidos(F) elegimos el que vamos a usar(G).

4 -Entramos en “Dinámica de forma”(H) Con las tres primeras opciones vamos a configurar de manera sencilla nuestra pincelada, para eso debes poner en “Control” la opción “Transición” y asignar una cantidad en numeros reales(I), esta cantidad es la longitud o mejor dicho el largo final de la linea. Para lo ocasión puse el valor de 100.


5 - Luego debemos interactuar con las opciones “Variación del tamaño” que te permite variar el tamaño del punto y con “Diámetro Mínimo”(J) darle un suave final a nuestra pincelada. En el ejemplo vemos que “Variación del Tamaño” tiene valor 0% y “Diámetro Mínimo” 30%.

6 - Después de configurar nuestro pincel seleccionamos la herramienta “Selección de Trazado”(K) y seleccionamos el trazado(L).

7 - Una ves hecha la selección, elegimos la Herramienta Pincel(M), nos posicionamos sobre el trazo y presionamos la tecla “Enter”(N). Nuestro trazo se pintara con nuestra configuracion personalizada.

8 - Luego puedes borrar el trazo en el “Panel Trazos”(Ñ)(O).

Nuevamente nos encontramos frente a paquetes orientados a cada sector, tenemos Creative Suite 4 Web, Creative Suite 4 Design, Creative Suite 4 Production Premiun, Adobe Master collection. Entre ellas estan el nuevo Flash que promete la edición de gráficos 3D en conjunto con Photoshop Cs4, una de las novedades mas interesantes y sin duda esperadas, eso si habra que ver el potencial y si puede competir con herramientas como 3D Max o acercarse un poco a su nivel. Flash Cs4 también permitiría la reproducción de video en modo edición entre otras funcionalidades y la “Herramienta de Huesos”(foto).

Photoshop nos trae un nuevo panel de ajustes, mejoras en el zoom, funciones 3D, posibilidad de rotar el lienzo de manera fluida y rápida, un panel de mascaras! y lo que mas me llamo la atención es la “Aplicación de escala basada en contenido”. Esta función te permite recomponer una imagen a medida que cambia su tamaño conservando las partes vitales, en concreto la imagen se adapta de una manera nunca a vista al nuevo tamaño.

Transparencias en degradados y hasta 100 mesas de trabajo podremos tener en Illustrator Cs4 y en Dreamweaver CS4 algo que espere hace bastante tiempo: La pre-visualizacion en Vivo, una excelente función que amé del editor open source Aptana.

Para Fireworks, mi editor de gráficos para web favorito hay unas deliciosas novedades, ahora podes crear un prototipo de Abobe Air! listo para implementarle el código, exportación en pdf, exportación de CSS muy elaborada, mejoras en el diseño tipográfico, integración con Adobe Kuler.

También estan los infaltables Premiere y After effects dedicados a la producción profesional de video. Su lanzamiento oficial en Español es en diciembre de este año y la verdad que esta vez promete mas y me convence, lo que no me paso con la edición anterior.

Via: Adobe

El formato JPEG es el estándar indicado para comprimir fotografías sin sacrificar la calidad de la mismas, por supuesto depende mucho la luz y las condiciones en donde las obtuviste porque si la foto no tiene buena calidad es posible que empieces a ver grietas y bloques al comprimirla.

Optimizando y exportando una Foto:

Como primer paso debemos seleccionar el área con la herramienta de Selección que vimos en la primer parte de este tutorial, ingresar a la vista previa de 2 o 4 imágenes y remitirnos al panel de exportación.

1 – Mate: Seleccionamos el color de fondo (JPEG no admite transparencias)
2 – Calidad: Elegimos la calidad de salida comparando los valores que van del 0 al 100. A mas valor mas calidad.
3 – Suavizado: Agrega un efecto de desenfoque, este es un buen amigo de las fotos que empiezan a perder calidad en la exportación.
4 – Hacemos Click derecho sobre la foto y exportamos la zona seleccionada.

Exportar JPEG selectivo:

Esta opción te permite otorgar distintos niveles de compresión para distintas partes de la foto. Muy util cuando tenemos que comprimir una foto demasiado pesada, ya que podemos ir definiendo el nivel de calidad para los distintos sectores.

1 – En la vista Original, presionamos la tecla M o seleccionamos la herramienta recuadro desde el panel de herramientas de Fireworks.
2 – Marcamos la zona que sera comprimida
3 – Seleccionamos Modificar > JPEG selectivo > Guardar selección como máscara JPEG.

4 – Elegimos JPEG en el panel de exportación.
5 – Hacemos Click en el boton Calidad Selectiva para que se nos abra un nuevo panel.

6 – Seleccionamos Activar calidad selectiva e introducimos un valor en el cuadro de texto.
7 – El color de solapamiento no afecta nada la exportación, solo te muestra la zona marcada por lo tanto podes ponerle el color que desees.
8 – Si seleccionamos Preservar calidad de texto, este se exportará con un nivel superior de calidad, sin importar el valor de Calidad selectiva.
9 – Preservar calidad de botón permite que los símbolos de de botón se exporten en un nivel superior al igual que los textos.

9 - Aceptamos nuestra nueva configuración de zona.
10 – Vemos como se optimizo la zona, en este caso le baje la calidad al máximo para que veamos la diferencia.

11 – Click derecho y exportamos la zona.

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:

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.

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

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.

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.

Significado de los símbolos que podras ver en el panel de 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.