2. Aplique los ajustes de optimización. Optimizar imágenes para Internet: Tutorial

Transcripción

1 Tutoriales Optimizar imágenes para Internet Si es la primera vez que crea gráficos Web, puede resultarle útil comprender cómo se guarda una imagen para Internet. Hay tantos factores que entran en juego (formato y tamaño del archivo, colores, transparencia) que resulta difícil saber por dónde empezar. Afortunadamente, el cuadro de diálogo Guardar para Web de Adobe Photoshop 7.0 le permite previsualizar distintas versiones de una imagen optimizada sin alterar el archivo original. Lea este documento y aprenda algunos conceptos básicos acerca de la optimización de imágenes para Internet. 1. Abra el cuadro de diálogo Guardar para Web. Seleccione Archivo > Guardar para Web y haga clic en una ficha para seleccionar una opción de visualización. Haga clic en la ficha Optimizado para ver la imagen con los ajustes de optimización actuales, la ficha 2 copias para obtener previsualizaciones continuas y comparar la imagen original y la imagen optimizada, o la ficha 4 copias para ver varias versiones de la imagen optimizada. 2. Aplique los ajustes de optimización.

2 Haga clic en una versión para seleccionarla (un cuadro negro indica la versión seleccionada) y seleccione un ajuste de optimización del menú Ajustes. Al seleccionar un ajuste de optimización, lo que se pretende es mantener la calidad de la imagen y, al mismo tiempo, minimizar el tamaño del archivo (y, por lo tanto, el tiempo de descarga). Puede ver el tamaño del archivo y el tiempo de descarga a diferentes velocidades de conexión debajo de la imagen. Para elegir una velocidad de conexión diferente, utilice el menú Previsualizar que se encuentra en la esquina superior derecha del área del panel. Elegimos el formato GIF porque admite la transparencia. El formato JPEG mantiene una gama de colores más amplia que el formato GIF, por lo que es la mejor opción si lo que se desea es obtener imágenes de tono continuo como fotografías, pero el formato JPEG no admite la transparencia. 3. Bloquee un color. Seleccione la herramienta Cuentagotas y tome una muestra del color que desee conservar. En la tabla de colores, haga clic en el botón Bloquear los colores seleccionados. Aparecerá un cuadro blanco en la esquina inferior derecha del color bloqueado. Si elige un ajuste de optimización con menos colores, el color bloqueado permanecerá en la imagen. Para cada versión seleccionada, la tabla de colores que aparece a la derecha le muestra los colores exactos utilizados en la paleta de la imagen optimizada. A medida que reduzca el número total de colores en la imagen, algunos colores se eliminan de la tabla. Sin embargo, puede ejercer un control total sobre algunos colores guardados, simplemente bloqueándolos. Cuando se bloquea un color, se garantiza que permanecerá en la paleta de colores, incluso cuando se eliminan tres cuartas partes de los colores utilizados en la imagen, tal y como se muestra aquí.

3 4. Asigne un color a la transparencia. Seleccione un color con la herramienta Cuentagotas. (Hemos seleccionado el borde rojo.) A continuación, haga clic en el botón para asignar transparencia en la tabla de colores. Puede utilizar el mismo método para cambiar un color: seleccione el color que desea cambiar con la herramienta Cuentagotas y, a continuación, haga doble clic en la muestra que aparece en la tabla de colores y utilice el Selector de color para elegir un color nuevo. Cuando se cambia un color o se asigna a la transparencia, la muestra de la tabla de colores se divide diagonalmente, mostrando el color nuevo en la parte superior con el color original debajo. El color no se cambia en el archivo original y puede volver fácilmente al color original en la versión optimizada. Para deshacer un cambio de color, haga doble clic en la muestra de la tabla de colores para volver a abrir el Selector de color y, a continuación, haga clic en OK. Para restaurar un color después de haberlo asignado a la transparencia, selecciónelo en la tabla de colores y, a continuación, vuelva a hacer clic en el botón para asignar transparencia.

4 5. Establezca el tamaño de la imagen. Haga clic en la ficha Tamaño de imagen. Especifique un valor de anchura o altura para cambiar el tamaño de la imagen optimizada. Haga clic en Aplicar para previsualizar el nuevo tamaño en el cuadro de diálogo Guardar para Web. Durante la optimización, puede cambiar las dimensiones de la imagen de salida sin cambiar el tamaño del archivo original, con la ficha Tamaño de imagen. Puede especificar nuevas dimensiones o redimensionar un porcentaje de la imagen original. Elija un método de interpolación del menú Calidad al redimensionar la imagen. Irregular (por aproximación) es el método más rápido pero el menos preciso y es el que más se ajusta a las ilustraciones que contienen bordes no suavizados. Redondeada (bicúbica) es el método más lento pero más preciso que produce gradaciones tonales más suaves. 6. Aplique tramado de transparencia. En la sección Ajustes del cuadro de diálogo Guardar para Web, seleccione Transparencia. En el menú Mate, seleccione Ninguno. En el menú Tramado de transparencia, seleccione Tramado de transparencia de difusión. Establezca el regulador Cantidad al porcentaje de transparencia deseado. El cuadro de

5 diálogo Guardar para Web le ofrece distintas maneras de crear imágenes GIF transparentes. Un método estándar es aplicar un color mate a los píxeles transparentes de la imagen sobre un color sólido que coincida con el color de fondo de la página Web. En los casos en los que no conoce el color de fondo final o tiene que trabajar con una gama de posibles colores, puede utilizar la nueva característica de tramado de transparencia de Photoshop 7.0. El tramado de transparencia crea efectos de transparencia que se mostrarán sobre cualquier color de fondo. Hay tres opciones de tramado de transparencia disponibles: Difusión, Motivo y Ruido. 7. Genere la imagen optimizada. Haga clic en Guardar para crear el archivo de imagen optimizada para la versión seleccionada. En el cuadro de diálogo Guardar optimizada como, asigne un nombre el archivo de imagen y seleccione HTML e Imágenes como el tipo para guardar como. Después de crear el archivo HTML que contiene la imagen, haga doble clic sobre él para verlo en el navegador Web. Puede elegir guardar sólo la imagen optimizada o crear la imagen y el archivo HTML para una página que contenga la imagen. Después de crear y ver la página Web y la imagen, intente cambiar el color de fondo de la página y, a continuación, vuelva a mostrarla para probar el efecto de transparencia sobre colores diferentes Adobe Systems Incorporated. Reservados todos los derechos.