Imágenes de tono continuo

En este artículo veremos las imágenes de tono continuo.
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ú desplegable Preset Size Default Photoshop Size, y activa transparent en la sección contents.


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 Gradiente En 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 texto Quality teclea 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).

Compartir

Comentarios

Alexandro

19/2/2008
No es del todo correcto este artículo. El mejor formato para guardar un gradiente (tono continuo) es PNG24. Además, si como en el ejemplo que se muestra, se utiliza una transparencia, entonces PNG24 es la única opción (como formato para web), hasta ahora, que representa de manera continua ésta transparencia.

Cabe aclarar que el algoritmo de compresión para el formato JPG es con pérdida de datos, entonces, a medida que aumenta el índice de compresión, crea lo que se llaman "artefactos" en los cambios de color. Además de que acercándose, son notorias bandas que simulan el degradado, como en el caso, aunque más exagerado, de gradientes guardadas con la compresión GIF y PNG8. Esto detrimenta la calidad del gradiente.

El “bandeado” de las imágenes GIF y PNG8 ocurre porque estos formatos tienes sólo la posibilidad de guardar imágenes con un esquema de color de 256 tonos. JPG y PNG24 tienen la posibilidad de representar imágenes en millones de colores.

Es mentira que pocas aplicaciones reconocen PNG. En la actualidad, la mayoría de los navegadores, sino es que todos los de última generación (2007 a la fecha), tienen la capacidad de interpretar correctamente las imágenes PNG. También programas de ofimática pueden reconocer el formato y su capacidad de transparencia sin ningún problema.

PNG24 es la mejor opción para gradientes no sólo por la calidad, sino también por el peso. Una degradado de negro a transparente con dimensiones en pixeles de 640 x 480 y una resolución de 72 px/in arroja los siguientes pesos en estos formatos (guardado en photoshop CS3):
GIF a 128 colores sin difusión con transparencia de un solo color: 72.4KB
JPG a 60% de compresión optimizada (sin posibilidad de transparencia): 7.97KB
PNG8 a 128 colores sin difusión con transparencia de un solo color: 2.36KB
PNG24 con transparencia continua: 1.99KB

Para elegir el mejor formato a utilizar es conveniente analizar el uso y el tipo de imagen que se guardará.

Saludos. ;-)

maria ortiz

20/1/2011
CONSULTA
QUISIERA SOLICITAR VUESTRA AYUDA. SUCEDE QUE DESDE UNA SEMANA MAS O MENOS , AL INTENTAR INGRESAR A LA PAGINA DEL BANCO DE MI PREFERENCIA, EN LUGAR DE SALLIR EL bANCO ,AUTOMATICAMENTE ME SALES ESTA PAGINA. BANCO QUE INTENTO Y ESCRIBO LA PAGINA IGUAL ME SALE ESTA PAGINA QUE AL PARECER ES EN IDIOMA ALEMAN. ---http://christoph-seider.de/postsv/


........POR FAVOR ME PUEDEN AYUDAR Y ORIENTAR QUE PUEDE SER ¿ ES UN VIRUS ?


ATTE


MARIA