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).
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).
Luis Aceves