Este tutorial tiene como finalidad ayudar para los lectores el entender algunos de los formatos estándar utilizables entre diversosprogramas de diseño gráfico, sus características, similitudes y particularidades.

Atención, porque no todos estos formatos los podremos utilizar en páginas web, que resulta interesante comentar ya que este es un medio específico para los desarrolladores. Para aclaración de las personas, de los formatos que vamos a revisar en este artículo, sólo podemos utilizar GIF, JPG y PNG. Dicho sea de paso, Internet Explorer 6 tiene problemas para mostrar los archivos en PNG que tienen transparencia por canal Alpha, algo que explicaremos más tarde.

Los formatos que aquí trabajaremos son:

• BMP– Mapa de bits (bitmap)
• GIF– Graphics Interchange Format
• JPG– Joint Photographic Experts Group
• PNG– Portable Network graphics
• TIF– Tagged-Image File Format

BMPes el formato más usado en aplicaciones Windows y DOS. En la codificación de la imagen no hay compresión y por lo general resultan archivos grandes. Su ventaja es que lo lee cualquier programa que maneje imagen.

El formatoGIFes el formato de archivo que se utiliza habitualmente para mostrar gráficos e imágenes de color indexado en documentos HTML en Internet y otros servicios en línea. GIF es un formato comprimido con LZW diseñado para minimizar el tamaño del archivo y el tiempo de transferencia electrónica. El formatoGIF preserva la transparenciaen imágenes de color indexado.

El formatoJPEGse utiliza habitualmente para mostrar fotografías y otras imágenes de tono continuo en documentos HTML en Internet y otros servicios en línea. El formato JPEG admite los modos de color CMYK, RGB y Escala de grises pero no admitecanales alfa(No preserva la transparencia). A diferencia del formato GIF, JPEG retiene toda la información de color de una imagen RGB pero comprime el tamaño del archivo descartando datos selectivamente.

El formatoPNGes uno de los formatos más interesantes. Aunque su uso no está tan extendido en este momento, cada vez más rápidamente está siendo bien acogido por los desarrolladores de páginas web. Desarrollado como una alternativa sin patente al formato GIF, el formato de gráficos de red portátiles (PNG) se utiliza para una compresión sin pérdidas y para la visualización de imágenes en Internet. A diferencia del formato GIF, PNG admite imágenes de 24 bits y produce transparencia de fondo sin bordes irregulares. Esto es algo que consigue por medio del “canal alpha”, que permite definir el grado de transparencia u opacidad de un color. Sin embargo, algunos navegadores Web no admiten imágenes PNG, o no las soportan del todo bien, es el caso de Internet Explorer 6, que tiene diversos problemas sobre todo con los archivos semitransparentes. El formato PNG admite también imágenes RGB, en 8 bit, de color indexado, opcionalmente en escala de grises y de mapa de bits sin canales alfa. PNG conserva la transparencia en imágenes en escala de grises y RGB, lo que resulta extremadamente útil para utilizarse en Flash, donde PNG es totalmente compatible.

TIFFes un formato flexible de imágenes de mapa de bits que prácticamente admiten todas los programas de pintura, edición de imágenes y diseño de páginas. Admite imágenes CMYK, RGB, Lab, de color indexado y en escala de grises con canales alfa, e imágenes en modo de mapa de bits sin canales alfa.Photoshop puede guardar capas en un archivo TIFF; sin embargo, si abre el archivo en otra aplicación, sólo será visible la imagen acoplada. Photoshop puede guardar también anotaciones, transparencias y datos de pirámide multirresolución en formato TIFF. No es un formato para Internet debido al gran tamaño de los archivos con este formato.

Después de esta aburrida descripción veamos cada formato con manzanas en elsiguiente artículo.

Necesitaremos Adobe Photoshop, dreamweaver o word, y el explorador de Windows.

1. Abre Photoshop y pide un archivo nuevo. File> New. En el cuadro de dialogo New selecciona en el menú desplegablePreset SizeDefault Photoshop Size, y activa transparent en la seccióncontents.

Este archivo nos servirá para crear en él gráficos básicos, para exportarlos con diferentes formatos, comparar su tamaño en bits y después ilustrar sus características básicas en Dreamweaver o word.

2. Selecciona la herramienta GradienteEn la barra de opciones de la herramienta clic en el menú desplegable para tipo de gradiente y selecciona De Color Frontal a Transparente.

3. Aplica la gradiente a todo tu documento.

4. Guarda el archivo para WEB. File>Save for Web.

El cuadro Save For Web de Photoshop nos permite guardar imágenes en formatos comprimidos. Especialmente útil para aplicaciones Web.

5. Clic en el menú desplegable del formato (Resaltado en rojo en la ilustración anterior). Selecciona GIF. Verifica que la opción de Transparency esté activada. El resto de los valores pueden ser los de la ilustración siguiente.

6. Clic en el botón Save. En el cuadro “Save Optimized As” crea una nueva carpeta en el escritorio y guarda en ella la gradiente con el nombre GradGif.

7. Nuevamente File> Save For Web. Clic en el menú desplegable del formato. Selecciona JPG. En la caja de textoQualityteclea 80. El resto de los valores pueden ser los de la ilustración siguiente.

8. Clic en el botón Save. En el cuadro “Save Optimized As” guarda como GradJPG en la carpeta recién creada.

9. Otra vez File> Save For Web. Clic en el menú desplegable del formato. Selecciona PNG-8. Notaras que los parámetros son iguales a los de GIF. Verifica que la casilla de Transparency esté activada.

10. Clic en el botón Save. En el cuadro Save Optimized As guarda como GradPNG en la carpeta recién creada.

11. File> Save For Web. Clic en el menú desplegable del formato. Selecciona PNG-24. Verifica que la casilla de Transparency esté activada.

12. Clic en el botón Save. En el cuadro Save Optimized As guarda como GradPNG24 en la carpeta recién creada.

En el explorador de Windows navega hacia la carpeta que creaste en el escritorio. En la barra de menú Clic en Ver> Detalles para ver el tamaño y tipo de los cuatro archivos.

Notarás que el archivo GIF es el más grande de todos. Esto es por que GIF guarda una muestra de cada uno de los colores que aparecen en la imagen, por lo que no es el formato mas adecuado para tonos continuos como nuestra gradiente. JPG es lo más recomendable. PNG 8 es una buena opción sin embargo menos programas y navegadores reconocen el formato (ya lo verás en el ejemplo con dreamweaver).

1. En el archivo de photoshop que hemos estado trabajando, Presiona Ctrl+A para seleccionar todo y presiona la tecla Supr. Para dejar el archivo nuevamente en blanco.

2. Presiona ctrl.+D para eliminar la selección.

3. Clic en la herramienta Pincel y deja presionado el botón del Mouse hasta que aparezca la opción del lápiz. Selecciónalo.

4. En la barra de opciones de la herramienta selecciona un pincel de 60px de bordes duros y con opacidad del 100%.

5. traza algunas líneas con tres o cuatro colores diferentes dejando algunas zonas transparentes.

Las imágenes en que los tonos cambian abruptamente, sin pasos graduales entre uno y otro se les llama de plasta de color.

6. File> Save For Web. Clic en el menú desplegable del formato. Selecciona GIF. Verifica que la casilla de Transparency esté activada.

7. Clic en el botón Save y guarda la imagen como flatGIF en la carpeta que creaste en el escritorio.

8. Como hicimos antes guarda un JPG, un GIF,un PNG-8 y un PNG-24. y activa la transparencia en los formatos que lo permitan.

9. En el explorador de Windows navega hacia la capeta que creaste y observa el tamaño de los archivos.

La relación Gif-JPG ahora funciona a la inversa: el archivo GIF es mucho más pequeño que el JPG. Lo mismo pasa en relación a png-8 y png-24. Por tanto, en imágenes de plasta de color, GIF es un formato más eficiente con respecto al tamaño del archivo.

Cierra Photoshop y abre DreamWeaver

1. En el cuadro de bienvenida pide un archivo nuevo haciendo clic en HTML de la columna Create New

2. En la barra de menú Modificar>Propiedades de la página ( Modify> Page Properties). En el cuadro propiedades de página clic en el botón Examinar para buscar una imagen de fondo.

3. En el cuadro seleccionar origen de la imagen (Select Image Source) busca fondo.gif en la carpeta del ejercicio que copiaste al escritorio. Clic en aceptar al cuadro de advertencia y Aceptar (OK) al cuadro Propiedades de la página.

La imagen debe abarcar todo el fondo de tu página.

4. En la barra de menú Insertar>Imagen. Busca la carpeta donde guardaste los archivos creados en Photoshop.

5. Selecciona flatGIF y clic en Aceptar. En el cuadro de advertencia clic en Aceptar.

La imagen aparece en tu página

6. Inserta del mismo modo cada una de las imágenes que exportaste de Photoshop y checa su comportamiento con respecto al fondo. Presiona f12 para una previsualización Web.

7. Notaras que la transparencia de png 24 no es reconocida por Dreamweaver mientras que la de GIF y PNG8 si es respetada. A esto me refiero cuando hablo de la compatibilidad de los formatos. En general los programas de edición de imagen o video reconocen sin problemas los canales Alpha o de transparencia de los formatos que exportamos. Dreamweaver no es un editor de imagen por eso sus posibilidades se limitan al lenguaje que maneja (HTML) y a los navegadores WEB donde se verá el producto final que no todos reconocen png24 sin la ayuda de otros lenguajes anidados o de dePlug-ins.

8. Abre Illustrator y pide un documento nuevo y en blanco.

9. Dibuja algunos objetos en la capa 1

10. Crea una capa nueva. Elije File> Place.

11. Ahora: importa una imagen de las que guardamos con Photoshop, pon atención en su formato ( gif, jpg, png…) y observa su comportamiento con respecto a la capa 1 que hace de fondo.

Este programa sí reconoce la medias transparencias de PNG24, o transparencia Alfa, permitiendo resultados gráficos muy variados, que la transparencia total de GIF no permite. Conociendo las características de cada formato y su comportamiento gráfico puedes seleccionar el formato que más te convenga según las necesidades gráficas de tu proyecto.

 

Fuente: http://www.desarrolloweb.com/manuales/formatos-imagen-web.html