Photoshop

BST Business Software Training, C.A.
Manual de Photoshop
LECCIÓN 1
PREPARACIÓN DE imágenes para WEB

Lección 1: Preparación de imágenes para Web
Introducción
Este curso se centra en la preparación de imágenes para ser vistas en el World Wide Web o
WWW. Empezaremos esta lección aprendiendo algunas técnicas básicas y conceptos sobre la
resolución de imágenes y métodos para reducir el tamaño del archivo.
Objetivos
Para aprender los conceptos básicos para crear gráficos Web, debes:
1A Aprender cómo se crean las páginas Web y cómo se integran las imágenes.
Aprenderás un poco sobre el lenguaje de programación HTML que se utiliza para crear páginas
Web.
1B Ajustar las preferencias de Photoshop para unidades de tamaño.
Aprenderás por qué debes medir la resolución de imágenes en forma distinta a como lo harías
para las imágenes impresas y ajustarás las preferencias de unidades de Photoshop en forma
acorde.
1C Aprender los factores que contribuyen en la reducción de archivos.
Verás que el tamaño de archivo de una imagen depende de varias cosas, no sólo de la apariencia
de una imagen. Aprenderás a utilizar el escáner para obtener las mejores imágenes en tamaños
pequeños para ser visualizadas en la Web y colocar correctamente el tamaño.
Archivos de datos
Swimgirl32.psd
Swimgirl100.psd
Expgraph1.psd
Tiempo destinado a la lección

45 minutos
Página 1/157
BST Business Software Training, C.A. Manual de Photoshop
Tema 1A
HTML y archivos de imágenes
Casi todas las páginas Web que visualizas en el World Wide Web se crean con el Hypertext
Markup Language o HTML. Las páginas creadas con HTML son en realidad líneas de texto, con
códigos (o etiquetas) como por ejemplo <B>, que indica que el texto debe aparecer en negrillas y
<P> que designa un salto de párrafo para empezar una nueva línea de texto.
Las imágenes en las páginas Web no forman parte del código HTML en sí. Una página Web
tampoco se crea completamente a partir de imágenes. Éstas se almacenan en un servidor Web
como archivos separados. El código HTML de la página Web contiene etiquetas como <IMG
SRC = “image.gif”>, el cual se refiere al archivo de imagen y le indica al explorador como debe
mostrar la imagen.
Así que, a pesar de que puedes usar Photoshop para crear imágenes para páginas Web,
normalmente no creas toda una página con este programa. En este curso, aprenderás básicamente
a crear imágenes no el código HTML que permitirán mostrarlas. Sin embargo, Photoshop e
ImageReady pueden generar HTML para mostrar las imágenes que elabores.
Debes crear gráficos de páginas Web para vitalitytips.com, un “boletín” en línea que trata sobre
temas de salud y fitness. Cuando completes el curso, podrás ser capaz de ver las imágenes que
creaste abriendo documentos HTML incluidos con los datos del curso, utilizando una aplicación
de explorador Web como Microsoft Internet Explorer o Netscape Communicator.
HTML:
Hypertext Markup Language. El código de texto utilizado para crear páginas Web.
Tema 1B
Unidades de resolución de imágenes Web
Cuando preparas imágenes de Photoshop para impresión, normalmente utilizas pulgadas o picas
como unidades para determinar el tamaño. Sin embargo, para las imágenes que se mostrarán en
un monitor en vez de una página impresa, el número de pulgadas en que se muestra una imagen
en un monitor dependerá de la resolución del monitor.
El término resolución, cuando se refiere a un monitor, indica el número de píxeles de ancho y

alto que el monitor puede mostrar. Las resoluciones normales de un monitor varían de 640
píxeles de ancho por 480 de alto (640 x 480), 800 x 600, 1024 x 768 y 1280 x 1024.
Página 2/157
La mayoría de los monitores son “multisync”, es decir que puedes cambiar la resolución a unos
pocos ajustes. Así, incluso en un monitor, el tamaño de una imagen puede cambiar de acuerdo a
las preferencias del usuario.
Figura 1-1: La misma imagen mostrara en varias resoluciones diferentes, aparece en varios
tamaños distintos.
Como no puedes controlar el tamaño físico de una imagen en forma precisa, el número de
píxeles de la imagen es un valor mucho más poderoso que el número de píxeles por pulgada.
Cuando utilizas píxeles como unidad de medida en Photoshop, te permite determinar cuánto
ocupará en el monitor del usuario. Por ejemplo, si la página Web fue diseñada en un monitor de
640 x 480, no tendrá que desplazarse horizontalmente, puedes estimar que un ancho de imagen
de 200 píxeles ocupará aproximadamente un tercio del ancho de la página Web.
Actividad 1B-1:
Cambiar las unidades de medida de Photoshop
Objetivo: Cambiar las unidades predeterminadas de Photoshop (pulgadas) a píxeles.
Preparación: La computadora debe estar encendida, pero Photoshop no debe estar ejecutándose.
Navega e inicia la aplicación Adobe Photoshop 6.0.
Aparece un diálogo que te pregunta si deseas personalizar los ajustes de color. Hablaremos sobre
gestión del color para imágenes más adelante en el curso, por lo que debes cancelar por ahora
este diálogo. Haz clic en “No”.
Selecciona el menú Edición Æ Preferencias Æ Unidades y Reglas. Aparece el diálogo

Preferencias.
Gestión del color:
Página 3/157
Un sistema trata de hacer que los colores en una imagen aparezcan iguales cuando ésta se
visualice con distintos dispositivos (por ejemplo, dos monitores distintos o un monitor y una
impresora).
Como parte de la preparación del curso para cada clase, los alumnos deberán eliminar el
archivo de preferencias de Photoshop. Si no haces este paso, no aparecerá el diálogo.
Selecciona “Píxeles” de la lista “Reglas”. El tamaño de la imagen, las dimensiones y reglas se

expresarán en píxeles para todas las imágenes con las que trabajes. El tamaño de Tipo debe
seguir estando en puntos, porque es la unidad regular de medida para el texto.
Haz clic en “OK”.
Tema 1C
Controlar el tamaño de archivo

Uno de los principales objetivos cuando crees gráficos Web es mantener el tamaño de archivo lo
más pequeño posible. Mientras mayor sea el tamaño de archivo, más tiempo tardará el usuario en
descargarlo.
Tiempo de descarga
El tiempo real para descargar un archivo depende de la velocidad de conexión del usuario,
medida en kilobits (no kilobytes) por segundo (Kbps). Las velocidades de conexión varían
significativamente. Algunas personas se conectan a la Internet con módems de 14.4 Kbps; la
Página 4/157
mayoría de las personas con nuevos módems lo hacen aproximadamente a 56.6 Kbps; mientras
que las conexiones de alta velocidad generalmente exceden los 128 Kbps. Los archivos se miden
en kilobytes (K). Como hay ocho bits en un byte, una conexión de 56.6 Kbps no descargará un
archivo de 56.6K en un segundo. Adicionalmente, debido al tráfico de la red, las conexiones
pueden ser más lentas que la velocidad determinada.
La siguiente tabla indica cuánto tiempo toman las distintas conexiones en descargar un archivo
de 50K.
Velocidad de conexión Tiempo normal de descarga

14.4 Kbps 37 segundos
128 Kbps 5 segundos
Aunque muchos usuarios tienen conexiones de 56.6 Kbps o más rápidas, algunos tendrán todavía
conexiones de 28.8 Kbps, por lo que debes diseñar las páginas para que se descarguen lo más
rápido posible a esa velocidad. Por ello, siempre resulta una buena idea mantener las páginas
Web que elabores alrededor de los 50K o menos, porque muchos usuarios no desean esperar más
de 20 segundos por la información. Como una página Web tiene varios gráficos, no es muy
extraño tratar de mantener un gráfico específico en 5K o menos.
Es importante que diseñes un sitio Web con el público al cual va dirigido en mente. El sitio que
diseñes en este curso, ‘Vitalitytips.com’, es un sitio de consejos sobre salud, y será diseñado
con el usuario que se conecta desde su casa en mente. Como es posible que algunos usuarios
accedan al sitio con conexiones de 28.8 Kbps, dejarás que el diálogo Guardar para Web calcule
el tiempo de descarga basado en un módem de 28.8 Kbps. Si el público al que va dirigido el sitio
posee una conexión más rápida, puedes ajustar el tiempo de descarga basado en una conexión
con un módem de 56.6 Kbps o conexiones más rápidas. Para ajustar la velocidad de un módem
que se utiliza para calcular el tiempo de descarga, haz clic en el diálogo Guardar para Web y
selecciona una de las velocidades que allí aparecen. Normalmente es mejor pensar en una
velocidad de conexión menor, en vez de una mayor, porque incluso un usuario que acceda a la
red con un módem de 56 Kbps, la velocidad de conexión real es mucho más lenta. 56 Kbps es la
velocidad máxima que un módem de 56 K puede lograr, pero es más factible que utilice
velocidades entre 33.6 y 56 K, dependiendo del ruido en la línea y el congestionamiento.
Factores que contribuyen al tamaño del archivo

Existen muchos factores que contribuyen al tamaño de los archivos de imágenes. Aprenderás
más sobre cómo utilizar los formatos específicos y las técnicas de Photoshop para lograr tamaños
pequeños en otras lecciones, pero por ahora, es importante entender los conceptos básicos detrás
de la reducción del tamaño de los archivos.
Número de píxeles
Página 5/157
El número de píxeles en la imagen es el principal y más importante factor del tamaño del
archivo. Mientras menor sea el número de píxeles, más pequeño será el archivo. Como
mencionamos anteriormente, el tamaño impreso, medido en pulgadas no es importante. Por
ejemplo, una imagen que tiene 150 píxeles de ancho por 200 píxeles de alto, tendrá el mismo
tamaño de archivo si se guarda en 100 píxeles/pulgada (2 pulgadas de alto) o en 400
píxeles/pulgada (1/2 pulgada de alto).
La página Web donde se mostrarán las imágenes puede controlar el tamaño de la imagen
también, pero no afectará el tamaño del archivo. Por ejemplo, si el código HTML para una
imagen de 150 píxeles de ancho por 200 píxeles de alto incluye WIDTH=”75” HEIGHT=”100”,
se mostrará en la página Web a la mitad de la altura que la original, pero no cambiará el archivo
original archivado en el servidor. Tomará la misma cantidad de tiempo en descargarse que el
mismo gráfico sin los parámetros de WIDTH (ANCHO) y HEIGHT (ALTO) distintos de la
imagen original.
De esta forma, si cambias los parámetros de WIDTH y HEIGHT de los valores de la imagen
original en el código HTML no será lo suficientemente eficiente. Si los reduces, la imagen
tomará más tiempo en descargarse que una con menos píxeles. Igualmente, si aumentas los
parámetros de WIDHT y HEIGHT del tamaño de la imagen original, ésta contendrá el mismo
número de píxeles, así que si cambias los parámetros originales la imagen contendrá el mismo
número de píxeles, pero cada uno se dibuja más grande en la pantalla.
En Photoshop, la forma más fácil de indicarle a una imagen cómo aparecerá en la Web con
HTML ordinario es verla al 100% de su tamaño, verás el mismo número de píxeles que los
usuarios. Este aumento muestra la imagen en la resolución del monitor, el cual debe ser similar o
igual a la resolución en donde las demás personas verán la imagen en la Web. Así, este método
ofrece una vista previa del tamaño de la imagen.
Número de colores
Nota: Si trabajas con un ambiente en red, es posible que debas compartir los archivos Photoshop
con otros usuarios a través de una Red de Área Local o LAN (Local Area Network). Varios
usuarios pueden acceder a la misma imagen utilizando el comando de Photoshop Gestionar flujo
de trabajo. El comando Agregar al flujo de trabajo coloca una copia de un archivo en un
servidor, que otras personas conectadas en el servidor pueden tener acceso. Para evitar cambios
en la gestión de archivos, puedes utilizar el comando Registrar, que evita el acceso con escritura.
Puedes cargar los cambios realizados con el comando Cargar en servidor. Cuando un archivo se
registra, ningún usuario puede hacer cambios al archivo en el servidor (a menos que un archivo
en el escritorio de otro usuario cambie, por ejemplo). El comando Registrar permite obtener
acceso de escritura a la gestión de archivo. Puedes acceder a las opciones de Gestionar flujo de
trabajo con el menú Archivo Æ Gestionar flujo de trabajo. El flujo de trabajo puede descargar
desde el servidor y preguntar antes de salir del mismo. Puedes cambiar también cualquiera de los
ajustes por defecto del flujo de trabajo en el diálogo Preferencias del grupo de trabajo,
Página 6/157
seleccionando “Siempre”, “Nunca” y “Preguntar”. Puedes acceder al diálogo Opciones de flujo

de trabajo en el menú Edición Æ Preferencias Æ Opciones de flujo de trabajo.
Compresión de imagen
Una tercera forma de reducir el tamaño de un archivo es aplicando la compresión de imagen. La
compresión de imagen reduce la cantidad de información almacenada en el archivo mientras
mantiene la apariencia básica de la imagen. Existen dos formas de compresión: sin pérdida y con
pérdida. La compresión sin pérdida no cambia los datos de los píxeles en la imagen; sólo la
escribe en el disco de forma más eficiente que si sólo guardara el archivo. Si utilizas compresión
sin pérdida en una imagen y luego abres el archivo, seguirá siendo idéntica a la original.
Por otra parte, los métodos de compresión con pérdida cambian algunos píxeles de color para
reducir la cantidad de información almacenada. Aunque la compresión con pérdida retiene la
apariencia básica de la imagen, es posible visualizar algo de distorsión. Por ejemplo, el formato
JPEG utiliza compresión con pérdida para reducir significativamente el tamaño del archivo a
partir de imágenes sin compresión.
Compresión:
Reducir el tamaño de un archivo simplificando los datos almacenados en el disco (por ejemplo,
escribir “valores de color x 7” en vez de escribir el mismo valor de color siete veces en una
fila).
Compresión con pérdida:

La compresión que cambia parte de los valores del color en una imagen para ahorrar espacio
en disco. Mientras mayor sea la compresión, más visibles serán los cambios en el color de los
píxeles; con cantidades menores, la compresión es casi imperceptible.
En ambos casos de compresión, el arreglo y colores de los píxeles en la imagen pueden ayudar a
reducir el tamaño del archivo. Por ejemplo, la codificación de longitud, una forma de compresión
sin pérdida, luce igual para los colores idénticos en píxeles adyacentes, y escribe la información
del color una vez en vez de repetirla para cada píxel, creando así un tamaño de archivo más
reducido. Aprenderás más sobre la optimización de archivos en otras lecciones.
Compresión sin pérdida:

Una forma de compresión que reduce el tamaño de archivo de una imagen sin alterar los
valores de color de los píxeles.
Información adicional almacenada en un archivo

Por último, la información que no sea sobre el color de los píxeles que se almacena en una
imagen aumenta el tamaño del archivo. Por ejemplo, puedes seleccionar Archivo Æ Información
de archivo y escribir una anotación, el nombre del una persona, un título y texto sobre
instrucciones especiales de la imagen. Cuando una imagen se guarda en Photoshop, aparece una
versión en miniatura por defecto para que pueda verse una previsualización de la imagen cuando
Página 7/157
se seleccione el archivo en el diálogo Abrir. Aunque esta información adicional no afecta el

tamaño real de la imagen o apariencia, añade datos al documento y por eso aumenta el tamaño
del archivo. Sin embargo, parte de esta información sale de un archivo cuando se almacena en un
servidor Web y se descarga, así que incluso así, puede aumentar el tamaño del archivo en el
disco duro, pero no impacta la velocidad de descarga del archivo en el servidor donde se
encuentre almacenada.
La siguiente tabla indica algunos elementos sobre el tamaño de archivo para los formatos
utilizados para gráficos Web.
Información Aumenta el archivo en Aumenta el archivo Como

el disco duro cuando se almacena desactivar
en un servidor en Photo-
shop
Vista previa Sí Sí a, b, c
en Windows
Vista previa en Sí No a, b, c
Macintosh
Vista completa de Sí No a, b, c
la imagen (Mac)
Icono (Mac) Sí No a, b, c
Recorrido Sí Sí a, d
Canales PNG-24 (solamente) PNG-24 (solamente) a, b, e
Información de Sí Sí a, b, f
archivo
Perfiles ICC
(gestión del color) Sí Sí a, b
Herramienta Sí No a, b, g
Notas
Herramienta Sí No a, b, h
Anotación
sonora
Página 8/157
Claves: a= comando Guardar para Web, b= diálogo Guardar, c= diálogo Preferencias, d= paleta
Recorrido, e= paleta Canales, f= diálog Información de archivo, g= opciones de herramienta
Notas, h= opciones de herramienta Anotación sonora.
Como indica la tabla, existe una gran variedad de información que no forma parte de la imagen
que puede contribuir al incremento del tamaño del archivo. Aunque existe más de una forma de
eliminar los datos que no son imágenes, el comando Guardar para Web elimina todos los tipos
distintos de información externa en un solo paso.
Puedes agregar notas a un archivo en el diálogo Información de archivo. Puedes agregar una
anotación, el nombre del que hizo el archivo, un título y/o texto con instrucciones especiales en
la imagen. Esta información adicional se inserta en la imagen y puede visualizarse en el diálogo
Información de archivo si se abre de nuevo en Photoshop. La información del archivo no afecta
la apariencia ni tamaño real de la imagen, aunque agrega datos al documento y por eso
aumenta el tamaño del archivo. Si utilizas el comando Guardar para Web, la información del
archivo se elimina. Para acceder a la información del archivo, selecciona el menú Archivo Æ
Información del archivo.
Paleta:
El conjunto específico de colores utilizados en una imagen de Color indexado. Las imágenes
RGB no especifican una paleta porque pueden almacenar hasta 16.7 millones de colores.
Como mencionamos anteriormente, algunas computadoras sólo pueden mostrar hasta 256
colores simultáneamente. Aunque debes tener esto en cuenta para preparar imágenes para Web,
Photoshop e ImageReady pueden mostrar como lucen las imágenes en una pantalla de 256
colores, por lo que no debes ajustar tu monitor a 256 colores para lograrlo. En cambio, debes
configurar el monitor para que muestre la mayor cantidad posible de colores.
El número de colores disponibles está limitado por la cantidad de VRAM (Video Random
Access Memory) en la computadora. Mientras más VRAM tengas instalado, más colores podrán
mostrarse simultáneamente. Si no puedes ver más de 256 colores al mismo tiempo, es posible
que debas disminuir la resolución del monitor para aumentar la profundidad del color. Tendrás
menos píxeles en el monitor, pero el número de colores disponibles simultáneamente será mayor.
Debes determinar la profundidad del color (número de colores disponibles) para la computadora
y ajustarás a miles o millones de colores si es posible. (NOTA: Debes realizar la siguiente tarea
fuera de Photoshop utilizando los comandos del sistema operativo Windows).
Importante: No realices los siguientes pasos sin consultar antes la documentación de la tarjeta de
video así como también las especificaciones del monitor, para asegurarte que tanto la tarjeta de
video como el monitor aceptan la resolución y el color que elijas. De lo contrario, puedes tener
problemas.
Profundidad del color:
Página 9/157
El número de colores en una imagen o pantalla. La profundidad del color se mide a veces en el
número de bits (por ejemplo, una profundidad de 8 bits puede almacenar 256 colores).
La configuración por defecto de Photoshop crea e inserta automáticamente una vista previa de
la imagen con cualquier imagen almacenada en Photoshop. La vista previa es útil para
identificar el gráfico en el diálogo Abrir, pero puede aumentar el tamaño del archivo. La vista
previa de la imagen se elimina automáticamente cuando utilizas el comando Guardar para Web,
pero aunque no debes incluir este tipo de opciones. Puedes cambiar la configuración
predeterminada para las vistas previas en “Guardar siempre”, “No guardar” o “Preguntar
antes de guardar”. Para cambiar las preferencias, selecciona el menú Edición Æ Preferencias
Æ Guardar archivos.
Actividad 1C-1:
Maximizar los colores de la pantalla
Objetivo: Ajustar la computadora para que muestre tantos colores como sea necesario en el
monitor.
Debes utilizar el panel de control Monitor para comprobar y modificar la profundidad del color.
Selecciona el menú Inicio Æ Configuración Æ Panel de control. Aparece la ventana del Panel
de control.
Haz doble clic en el icono “Pantalla”. Aparece el diálogo Propiedades de pantalla.
Haz clic en la pestaña “Configuración”.
Selecciona “Color verdadero” (Millones de colores) de la lista “Colores”.
Si cuando seleccionas “Color verdadero” no disminuye la resolución en la sección en “Área

de pantalla”, salta al paso 8.
Si cuando seleccionas “Color verdadero” disminuye la resolución en la sección “Área de

pantalla”, cambia la resolución a la cantidad anterior.
Selecciona “Color alto” (Miles de colores) de la lista “Colores”. Debes utilizar esta
profundidad, sin importar si disminuyó o no la resolución.
Página 10/157
Se minimiza el número de colores disponibles en el monitor. Haz clic en “OK”.
Haz clic en el botón “Adobe Photoshop” en la barra de tareas para regresar a Photoshop.
Reducir el número de píxeles efectivamente
En el curso Destrezas Básicas 1 en Photoshop, aprendiste que para las imágenes impresas debes
utilizar una resolución bastante alta para evitar la pixelación o bordes irregulares, en el
dispositivo que utilices. Adicionalmente, para la impresión lo mejor es evitar el remuestreo de
imágenes, porque disminuye la calidad de la imagen (la imagen generalmente aparece más
“suave” o borrosa después).
Las imágenes que van a utilizarse en la Web normalmente tienen un conteo de píxeles bajo que
aquellas que se van a imprimir. Igualmente, tenderán más a pixelarse, particularmente si las
escaneas a baja resolución. Aunque si escaneas a baja resolución se crea una imagen con un
conteo bajo de píxeles (lo ideal para las imágenes Web), la mayoría de los escaners no realizan
un buen trabajo en lo que a capturar detalles se refiere. Las líneas diagonales se muestran
Página 11/157
distorsionadas. Otros detalles como partículas de polvo en la superficie del original pueden
capturarse como un píxel. En un escaneado de alta resolución, esto tendrá una proporción
bastante pequeña en relación con la imagen; en un escaneado de baja resolución, es uno de pocos
píxeles, por lo que será más evidente.
Por ello, debes escanear las imágenes Web a alta resolución, después las retocarás en vez de
tratar de escanearlas al tamaño que quieres que aparezcan en la Web. Después de escasearlas a
alta resolución, puedes disminuir las dimensiones finales y aplicar un filtro para mejorar la
imagen.
Remuestreo:
Cambiar el número total de píxeles en la imagen sin recortarla. Bien sea aumentando o
disminuyendo el número de píxeles constituye el remuestreo.
Actividad 1C-2:
Comparar escaneados de alta y baja resolución
Objetivo: Obtener la mejor calidad de imagen posible cuando escaneas imágenes para Web.
Debes probar con diferentes copias de la misma imagen para obtener la mayor cantidad de
detalles. Debes comenzar abriendo una imagen pequeña que fue escaneada a baja resolución.
Selecciona el menú Archivo Æ Abrir (Método abreviado: CTLR O). Aparece el diálogo Abrir.
Navega hasta la carpeta “Photoshop 6.0 Web Data”.
Primero debes abrir una imagen escaneada a 32 píxeles por pulgada para mantener el conteo de
píxeles bajo. Selecciona “swimgirl32.psd” de la lista de archivos.
Los nombres de los archivos para las imágenes Web deben ser una sola palabra sin espacios.
Adicionalmente, como los servidores de Unix que almacenan gráficos Web son sensibles a las
mayúsculas (pueden reconocer “Image.gif” como distinto a “image.gif”), deben estar en
minúsculas siempre para evitar confusiones. Por último, a pesar de que muchos servidores Web
soportan nombres de archivos largos, lo mejor es mantener el nombre corto para evitar que el
código HTML sea muy grande. Esta imagen, así como también las demás que utilices en el
curso, se guardaron siguiendo estos pasos.
Haz clic en “Abrir”. La imagen se abre. Como fue escaneada a baja resolución tiene un buen
tamaño para utilizarse en la red. Sin embargo, el escáner no realizó un buen trabajo en cuanto a
la resolución y por eso se ve granulosa y con pocos detalles. En particular, los mosaicos del
borde la piscina aparecen muy irregulares.
Página 12/157
Antes de abrir la segunda imagen, debes ajustar la ventana de aplicación de Photoshop. Haz clic
en el botón maximizar de la ventana de aplicación de “Adobe Photoshop” para que la
ventana llene el monitor, si es necesario.
Selecciona el menú Ventana Æ Restaurar ubicaciones de paleta, par mover las paletas
hacia la parte derecha de la ventana, maximizando así el espacio disponible en la ventana
para las imágenes.
Un escaneado de mayor resolución tendrá detalles y bordes más limpios que la versión anterior.
Selecciona el menú Archivo Æ Abrir (Método abreviado: CTRL O). Aparece el diálogo Abrir.
Debes abrir otra versión de la misma imagen que fue escaneada a 100 ppp. Dependiendo de la
imagen, es posible que quieras escasearla a 300 ppp, aunque 100 ppp era bastante aceptable para
esta imagen. Selecciona “swimgirl100psd” de la lista de archivos.
Haz clic en “Abrir”. Aparece una versión más grande de la imagen.
Arrastra la ventana de imagen hacia la derecha para descubrir la versión más pequeña.
Hay más detalles en la versión más grande, las líneas diagonales de los mosaicos no se muestran
irregulares como en la versión pequeña.
Como esta versión de la imagen es mayor que la que quieres mostrar en la página Web, debes
remuestrearla para reducir sus dimensiones. Selecciona el menú Imagen Æ Tamaño de
imagen. Aparece el diálogo Tamaño de imagen.
Si marcas la casilla “Remuestrear la imagen”, puedes cambiar el número de píxeles en la imagen.

Si es necesario, marca la casilla “Remuestrear imagen”. Los valores del alto y ancho en la
parte superior del diálogo aparecen en campos, que indican que puedes cambiarlos. Si desmarcas
la casilla “Remuestrear imagen” el número de píxeles se fija.
La imagen tiene 545 píxeles de ancho. Como muchas páginas Web se diseñan para verse en un
monitor de 640 píxeles de ancho, ocupará la mayor parte del monitor. Debes reducir la imagen a
175 píxeles de ancho para que no llene el monitor en caso de que sea pequeño. Este ancho
concuerda con el tamaño de la imagen a baja resolución que abriste primero. Escribe 175 en el
campo “Anchura” de la sección “Dimensiones en píxeles”. Los valores en “Anchura” y
“Altura” de la sección “Tamaño de documento” se modifican también. Sin embargo, el tamaño
de impresión y resolución no son importantes para las imágenes Web; sólo cuenta la dimensión
en píxeles.
Página 13/157
Haz clic en “OK”. La imagen se remuestrea y aparece del mismo tamaño que la primera que
abriste. Las líneas diagonales de los mosaicos de la parte superior de la imagen lucen mucho más
infirmes. No obstante, la imagen luce más suave que la de baja resolución porque el error del
remuestreo la hizo un poco más borrosa.
Si trabajas con un monitor cuya resolución sea menor a 1024 x 768, la imagen
“swimgirl100.psd” debe haberse abierto en un aumento menor a 100%. Si es necesario,
selecciona el menú Vista Æ Píxeles reales y cambia el tamaño de la ventana hasta que la
imagen pueda verse al 100%.
Debes utilizar un filtro de enfoque para añadir contraste en los bordes de las líneas finas para
hacerlas más definidas. Utilizarás el filtro Máscara de enfoque, porque ofrece mayor control
sobre los filtros de enfoque de Photoshop. Selecciona el menú Filtro Æ Enfocar Æ Máscara
de enfoque. Aparece el diálogo Máscara de enfoque.
Máscara de enfoque:
Un filtro que enfoca imágenes, su nombre indica que el filtro puede enmascarar áreas que están
desenfocadas para evitar enfocarlas.
Este filtro busca píxeles que contrasten y aumenta el contraste. La cantidad determina cuanto
contraste adicional agregará el filtro a los bordes. Debes colocar un contraste ligero. Arrastra el
regulador “Cantidad” hasta 130. La imagen luce más definida.
El enfoque ajusta los colores de los píxeles con los bordes contrastantes, pero también ajusta los
píxeles cercanos. El valor radio determina cuántos píxeles fuera del original deben modificarse.
Para imágenes impresas, normalmente utilizarías un radio de 1.0 a 1.5. Sin embargo, para las
Página 14/157
imágenes Web debes utilizar uno menor (entre 0.3 y 1), porque uno mayor puede contrastar
muchos píxeles, creando “halos” alrededor de los bordes. Puedes observar este efecto en la
esquina superior derecha de la imagen. En caso necesario, escribe 1 en el campo “Radio”.
Mira la esquina superior derecha de la imagen, luego desmarca la casilla “Ver”. Si

remuestreas una imagen con un valor de radio de 1, se crea un borde claro alrededor de la piscina
que no estaba en la imagen original.
Si es necesario, vuelve a marcar la casilla “Ver”. Regresa el borde claro.
Debes reducir el efecto de “halo” disminuyendo el radio. Puedes ajustar estos valores en muchos
diálogos de filtros, presionando las teclas de flecha del teclado. Si es necesario, presiona TAB
para moverte hasta el campo “Radio”.
Presiona la tecla ↓ hasta que el valor de Radio llegue a 0.6. Se minimiza el halo.
El ajuste Umbral es útil para evitar que las áreas de colores planos se vuelvan granulosas, porque
mientras más alto sea el umbral, mayor contraste debe haber entre los píxeles adyacentes para
que pueda haber enfoque. Sin embargo, la imagen no tiene áreas que deban ser de color sólido,
así que si aumentas el umbral de su valor predeterminado cero, sólo evitará que haya enfoque en
algunas zonas que desees mantener enfocadas. Si es necesario, escribe 0 en el campo
“Umbral”. Un umbral de cero permite que todos los píxeles permanezcan enfocados.
Página 15/157
Ya completaste el enfoque. Haz clic en “OK”. Cuando enfocas la imagen remuestreada,

mejoraste sus detalles para hacerla comparable a la imagen a baja resolución. Las líneas en
ángulo también son mucho más suaves.
Terminaste de experimentar con la resolución de las imágenes. Debes guardarla con un nuevo
nombre. Haz clic en el menú Archivo Æ Guardar como (Método abreviado: CTRL SHIFT S).
Aparece el diálogo Guardar como.
Escribe swimgirl.psd en el campo “Nombre”.
Haz clic en “Guardar”. La imagen se guarda. Ahora debes aplicar los conceptos que aprendiste
para redimensionar imágenes durante todo el curso.
Haz clic en la imagen “swimgirl32.psd” en la barra de título.
Haz clic en el botón Cerrar de la ventana de la imagen “swimgirl32.psd”.
Eliminar píxeles
Como mencionamos anteriormente, reducir las dimensiones de los píxeles tanto como sea
posible es una parte importante de mantener comprimido el tamaño de los archivos. Debes crear
un borde en forma de óvalo calado para colocarlo sobre la imagen de la niña de la piscina. Luego
utilizarás un comando para eliminar los píxeles transparentes en los bordes. Comenzarás
duplicando la capa “Fondo” para que la imagen original funcione como respaldo en caso de que
cometas un error.
Actividad 1C-3:
Recortar imágenes
Objetivo: Eliminar el espacio adicional transparente o los píxeles del color de fondo de una
imagen para reducir el tamaño del archivo.
Mantén presionada la tecla ALT y arrastra la capa “Fondo” hasta el botón Crear una
nueva capa en la parte inferior de la paleta Capas, suelta el botón antes de la tecla ALT.
Como presionaste la tecla ALT mientras duplicabas la capa, aparecerá el diálogo Duplicar capa,
permitiendo que coloques un nombre a la capa.
Escribe Swimming girl en el campo “Como:”.
Debes ocultar la capa “Fondo” original para que puedas ver el efecto de calado que aplicarás a la
capa “Swimming girl”. Haz clic en el icono del ojo en la columna Visibilidad de capa a la
Página 16/157
izquierda de la capa “Fondo” en la paleta Capas. La capa “Fondo” no será visible cuando
borres parte de la capa “Swimming girl”.
Ahora, crearás un marco elíptico con un borde calado alrededor de la niña. Mantén presionado
el botón del mouse en la herramienta Marco actual en la Caja de herramientas para
seleccionar la herramienta Marco elíptico (Método abreviado del grupo: M).
Ahora debes establecer una opción para que la herramienta cale los bordes. Escribe 6 en el
campo “Calado” de la barra Opciones de herramientas.
Presiona ENTER. El nuevo marco elíptico que dibujaste tendrá un borde calado.
Coloca el cursor justo detrás de la oreja de la niña.
A lo largo del curso encontrarás métodos abreviados en el teclado para grupos de herramientas.
En estos casos, un carácter del método abreviado selecciona más de una herramienta. Si la
abreviación no selecciona la herramienta correcta la primera vez, puedes presionar la tecla
SHIFT y continuar presionando el carácter hasta que aparezca la herramienta deseada. Otra
forma es seleccionando el menú Edición Æ Preferencias Æ Generales y luego desmarcando la
opción “Utilizar la tecla Mayús para cambiar de herramienta” para permitir cambiar de
herramienta presionando sólo la tecla repetidamente.
Puedes crear un marco desde el centro en vez de un borde manteniendo presionada la tecla ALT
mientras arrastras el mouse. Mantén presionada la tecla ALT y arrastra hacia arriba y a la
derecha hasta la esquina de mosaicos de la piscina.
Suelta el botón del mouse y luego la tecla ALT. El marco está completo.
Página 17/157
Debes mantener el área seleccionada y borrar el resto, para poderlo hacer, debes invertir la
selección antes de borrar. Haz clic en el menú Selección Æ Invertir (Método abreviado: CTRL
SHIFT I). La selección se invierte y el área dentro de la elipse permanece seleccionada.
Presiona SUPRIMIR. El área alrededor de la elipse se reemplaza con espacio transparente.
Haz clic en el menú Selección Æ Deseleccionar (Método abreviado: CTRL D). La elipse se
cala porque fue la opción que ajustaste en la herramienta.
La imagen contiene ahora píxeles adicionales alrededor de la elipse que harán un archivo más
grande que lo deseado. El comando Separar recorta automáticamente los bordes basados en sus
bordes. Utilizarás este comando para eliminar el espacio transparente que rodea la imagen.
Selecciona el menú Imagen Æ Separar. Aparece el diálogo Separar.
Puedes separar los píxeles del borde basados en la transparencia dentro de la imagen, del color
de los píxeles de la esquina superior izquierda o inferior derecha. En este caso, debes eliminar el
espacio transparente. Si es necesario, haz clic en el botón “Píxeles transparentes”.
Puedes seleccionar separar cualquier combinación de los cuatro bordes; debes separarlos los
cuatro. Si es necesario, marca las cuatro casillas en la sección “Separar”.
Página 18/157
Haz clic en “OK”. Se elimina un poco más de espacio adicional alrededor de la imagen.
Photoshop puede separar las imágenes basadas en el color de los píxeles del borde también.
Debes abrir otra imagen para demostrarlo. Selecciona el menú Archivo Æ Abrir (Método
abreviado: CTLR O). Aparece el diálogo Abrir.
Debes abrir una imagen de un gráfico. Selecciona “expgraph1.psd” de la lista.
Haz clic en “Abrir”. Aparece un gráfico sobre la expectativa de vida.
Debes eliminar parte del espacio blanco adicional del borde. Selecciona el menú Imagen Æ
Separar. Aparece el diálogo Separar.
En este caso, debes eliminar los píxeles blancos adicionales. Haz clic en el botón “Color de
píxel superior izquierdo”.
Debes separar los cuatro bordes como hiciste anteriormente. Haz clic en “OK”. El espacio
blanco de la imagen se elimina.
Selecciona el menú Archivo Æ Guardar (Método abreviado: CTRL S).
Puedes cerrar ahora la ventana. Haz clic en el menú Archivo Æ Cerrar (Método abreviado:
CTRL W). Se cierra la ventana.
Guarda y cierra el archivo “swimgirl.psd”.
Resumen
En esta lección tocamos los conceptos fundamentales para preparar imágenes Web. Aprendiste
cómo se muestran los gráficos en las páginas Web y cómo es mejor medir la resolución de
imágenes Web. También aprendiste los enfoques básicos para controlar el tamaño de archivos.
Página 19/157
Por último, maximizaste los colores de la pantalla y comparaste métodos para reducir el conteo
de píxeles a tamaños pequeños utilizados en las imágenes Web.
Revisión de la lección
1A Describe brevemente el papel que desempeña Photoshop para crear páginas Web.
1B ¿Por qué las dimensiones en píxeles son mejores como unidades de medida para las
imágenes Web que los centímetros?
1C ¿Cuáles son las cuatro formas principales de reducir el tamaño de una imagen?
¿Por qué es mejor escasear imágenes Web a alta resolución, a pesar de que quieras
reducirles el tamaño más adelante?
Página 20/157
Lección 2
Optimizar imágenes
Lección 2
Optimizar imágenes
Introducción
Una imagen Web se almacena normalmente en un formato de gráficos. Aprenderás algunos

detalles sobre cada uno y guardaras archivos en distintos formatos para ver como puedes
equilibrar la calidad de imagen con tamaño de archivo. Mientras trabajas con diferentes tipos de
imágenes, determinarás el mejor formato de archivo para cada uno.
Objetivos
Para seleccionar el mejor formato para cada imagen que guardas para Web, deberás:
2A Examinar las especificaciones de los formatos GIF, JPEG y PNG.
Observarás como cada formato reduce el tamaño del archivo de la imagen original y los cambios
en la calidad de la imagen en el proceso.
2B Contrastar los tres formatos para guardar distintos tipos de imágenes.
Observarás que el formato JPEG es ideal para fotos, porque disminuye el tamaño del archivo sin
afectar mucho la calidad de la imagen. Igualmente, verás como el formato GIF es ideal para las
ilustraciones. También trabajarás con los formatos PNG-24 y PNG-8 para compararlos con JPEG
y GIF. También experimentarás con la compresión y ajustes de color, así como también
transparencia para equilibrar la calidad y tamaño de imagen.
Archivos de datos
Healthexpert.psd
Expgraph.psd
Applepearcarrot.psd
Expgraph2.psd
Expgraph3.psd
Swimgirl.psd

70 minutos
Página 21/157
Tema 2A
Especificaciones del formato
Existen tres formatos de gráficos principales para los archivos Web. Dos de estos formatos, GIF
y JPEG, son comúnmente utilizados, mientras que el tercero, PNG, es un nuevo formato que, sin
duda alguna, será muy utilizado en un futuro. Esta sección presenta las características de cada
uno de estos formatos.
Formato GIF de Compuserve
El Formato Compuserve de Intercambio de Gráficos (Compuserve Graphics Interchange Format)

es el más utilizado en la Internet, principalmente porque fue el primer formato en los primeros
exploradores Web como un estándar.
Las imágenes GIF pueden incluir hasta 256 colores como máximo, y dos como mínimo. El
formato utiliza la compresión de imagen LZW para reducir el tamaño de archivo. Esta
compresión, a diferencia de otros modos, no tiene mucha “pérdida”, es decir, cuando abres de
nuevo una imagen GIF, ésta se muestra exactamente tal y como la guardaste.
Las imágenes GIF pueden entrelazarse, para mostrar poco a poco los detalles de la imagen
mientras se descarga, en vez de mostrarla de una sola vez con todos sus detalles. Esta opción le
da una vista preliminar al usuario de la imagen más rápidamente en vez de forzarlo a esperar a
que se cargue la imagen completa antes de visualizarla.
El formato GIF89a te permite especificar áreas de la imagen como transparentes. Este formato es
útil para colocar imágenes con bordes irregulares en el fondo de una página Web sin un borde
rectangular alrededor de la imagen.
Por último, puedes utilizar otros softwares para combinar varias imágenes GIF en un archivo
animado. La imagen GIF animada puede reproducirse repetidamente, como un clip de película o
también puede configurarse para que se reproduzca una sola vez y luego se detenga.
GIF animado:
Un archivo GIF que incluye varias imágenes mostradas en secuencia. Aunque muchas imágenes
GIF simulan movimiento, no tienen que hacerlo obligatoriamente (pueden ser series de
imágenes mostradas en sucesión, como has observado muchas veces en los banners publicitarios
Web).
Formato JPEG
El Joint Photographic Experts Group (JPEG, o JPG) es un formato comprimido normalmente

utilizado para imágenes fotográficas.
Página 22/157
A diferencia de las imágenes en formato GIF, las imágenes JPEG almacenan la información
RGB completa para que puedan contener millones de colores. Esto generalmente podría
aumentar el tamaño del archivo lo suficiente como para hacer que las descargas sean muy lentas.
Sin embargo, el formato JPEG comprime las imágenes más eficientemente que el formato GIF,
que resulta en archivos de un quinto del tamaño original, sin una evidente disminución de la
calidad.
Sin embargo, el método de compresión utilizado pierde un poco, que indica que parte de los
datos originales de descartarán del archivo cuando éste se guarde. El formato se diseñó para
descartar los datos menos evidentes y puedes seleccionar la cantidad de compresión que se
aplicará. Mientras más comprimido esté el archivo, más información se perderá. Si lo guardas
con la configuración máxima de calidad, la imagen JPEG será casi indistinguible del original,
pero el tamaño será mucho más grande que los archivos guardados con una menor calidad.
Puedes guardar archivos como imágenes JPEG progresivas; esta opción mostrará una serie de
imágenes con detalles en aumento cuando se descarga. Esto permite que los usuarios tengan una
idea general de cómo luce el archivo más rápido que si se mostrará directamente en alta
resolución. Sin embargo, muchos exploradores no soportan esta opción, aunque los dos más
populares (Netscape Communicator y Microsoft Internet Explorer) sí lo hacen.
Un error común es guardar repetidamente el mismo archivo en formato JPEG mientras trabajas
con él en Photoshop. Como el formato pierde parte de la información cuando lo archivos, cada
versión sucesiva disminuirá la calidad en relación a las anteriores y se observarán cada vez más
las imperfecciones. Para evitar este problema, debes mantener siempre una copia de la imagen
RGB original para editarlo en un futuro, en vez de editar directamente el archivo JPEG. Otra
alternativa es guardar la imagen en un formato que no pierda, como TIFF para evitar la
degradación de la imagen si se graba repetidamente un archivo JPEG. Mientras una imagen de
este tipo requiere más espacio de archivo que un archivo JPEG, puedes guardar una copia de la
imagen como JPEG una vez terminada la edición.
Por último, las imágenes JPEG pueden almacenar información sobre gestión de color. Si el
software de navegación que muestra el archivo soporta la gestión del color, puede ajustar la
imagen para que sea lo más parecida a como se concibió inicialmente, incluso si el monitor del
usuario muestra las imágenes de forma distinta (por ejemplo, más claras o más oscuras).
Cuando abres imágenes con Photoshop, puedes observar el mensaje “Detectar marca de agua”
que aparece temporalmente en la barra de estado. Las marcas de agua son motivos casi
imperceptibles en una imagen digital que ayudan a los diseñadores a identificar las imágenes
con un copyright. Photoshop busca en cada imagen que abras esta casi imperceptible marca que
identifica quién la creó y la información de copyright. Digimarc es el nombre de la compañía
que maneja las cuentas Digimarc ID, los únicos indicadores de marcas de agua que identifican
un diseñador en particular. Para poder recibir una identificación Digimarc, debes registrarte
Página 23/157
primero con la compañía. El costo de afiliación se basa en el número de imágenes que registres
anualmente. Para mayor información sobre marcas de agua y Digimarc, visita su sitio Web
www.digimarc.com. Si deseas evitar la detección automática de las marcas de agua en
Photoshop, puedes eliminar el plug-in “Detectar Marca de agua” en la carpeta Photoshop 6.0.
Podrás buscar marcas de agua con el comando Leer marca de agua.
Formato JPEG:
Un archivo guardado en formato Joint Photographic Expert Group, el cual puede almacenar
imágenes RGB (millones de colores) y emplear una compresión con desenfoco.
Formato PNG
El formato Portable Network Graphic (PNG, se pronuncia “ping”) es un nuevo formato que se
utiliza cada vez más. Hasta ahora, los dos principales exploradores (Internet Explorer 5.5 y
Netscape Communicator 6) pueden abrir imágenes en formato PNG.
El formato PNG es el más fuerte de todos los formatos para gráficos Web. PNG soporta hasta
color RGB de 48 bits y escala de grises de 16 bits. También utiliza una gran variedad de
algoritmos de compresión sin pérdida, cada uno se ajusta mejor a ciertos tipos de gráficos. La
implementación de los PNG en Photoshop es más limitada; soporta tanto las versiones de color
de 24 y 8 bits. Igualmente, sólo guarda archivos PNG con un algoritmo de compresión.
La información de gestión de color puede ser incrustada en los archivos PNG. Al igual que los
archivos JPEG, si el software del navegador Web soporta la gestión de color, puede ajustar la
imagen para que sea similar a como la concibió en principio el diseñador.
Uno de los grandes beneficios del formato PNG es que soporta mejor la transparencia que el
formato GIF89a. De la misma forma en que las imágenes con capas de Photoshop pueden tener
una opacidad reducida en ciertas zonas, el formato PNG permite definir áreas transparentes a
través de un canal alfa para indicar una máscara de transparencia.
Aunque los últimos exploradores pueden mostrar imágenes PNG, no incorporan todavía la
transparencia multinivel. Hasta este momento, el único explorador que soporta este tipo de
transparencia es Internet Explorer 5.0 para Macintosh. Es por ello que debes evitar las
transparencias en el formato PNG en las páginas Web hasta que más navegadores las soporten.
Sin embargo, aprenderás y trabajarás con este formato, para que comprendas en que forma
funciona mejor.
Existen otras características muy innovadoras sobre el formato PNG, como la posibilidad de que
el usuario cambie el brillo y contraste, comprobación de integridad de archivo para evitar que se
corrompa durante la transferencia y el entrelazado bidimensional. Este último permite que los
gráficos se construyan en capas, en vez de utilizar progresión simple. Sin embargo, esta opción
no permite soporte multi-imagen como el formato animado GIF.
Página 24/157
Compresión sin pérdidas:

Ver “Compresión sin pérdida”.
Archivo PNG:
Un archivo guardado en el formato Portable Network Graphic; utiliza compresión sin pérdida.
La variante PNG-24 puede almacenar imágenes RGB, la variante PNG-8 alberga imágenes con
color indexado.
Tema 2B
Optimizar imágenes
El término que utiliza Photoshop para guardar una imagen en un formato para Web es
“optimizar” porque cada formato para archivos Web disminuye el tamaño del archivo original.
Puedes utilizar varios métodos para optimizar imágenes. Por ejemplo, puedes guardar una
imagen GIF directamente, convertir manualmente una imagen de RGB a Color indexado y luego
guardarla o utilizar los comandos Guardar como, Guardar para Web o Exportar a GIF89a. Cada
uno de estos métodos tiene opciones y capacidades diferentes. No obstante, por lo general el
comando Guardar para Web del menú Archivo es el más eficiente de todos, porque te brinda la
oportunidad de previsualizar la imagen, incluyendo un tamaño de archivo bastante preciso y
porque puede buscar en el archivo cualquier información que aumente su tamaño (como
mencionamos en la lección “Preparar imágenes para el Web”). Por estas razones, el curso se
enfocará principalmente en el diálogo Guardar para Web.
Cada uno de los formatos principales para gráficos Web resulta apropiado para ciertos tipos de
imágenes. Aprenderás a seleccionar el formato correcto para cada imagen y tratarás en lo posible
de mantener la mayor cantidad posible de calidad, mientras se reduce el archivo a lo mínimo
posible. También aprenderás a controlar las diferentes opciones para guardarlos en cada formato
para crear archivos lo más reducidos posible.
Si deseas probar la compatibilidad del navegador que utilizas con la transparencia multinivel
PNG, visita el sitio http://tectrixinc.com/coursefiles/photoshopweb/pngtest. Esta página Web
utiliza archivos PNG que incorporan transparencia multinivel.
Color indexado:
Un modo de color que permite hasta 256 colores aunque puede utilizar menos. Normalmente se
utiliza para imágenes GIF.
Imágenes fotográficas
Como mencionamos anteriormente, el formato JPEG es el mejor para mantener la fidelidad del
color de imágenes fotográficas. Sin embargo, no siempre es tan eficiente cuando guardas
Página 25/157
imágenes en escala de grises como el formato GIF. Como estas imágenes sólo pueden tener hasta
256 niveles de gris, el formato GIF es mucho mejor que el JPEG.
El formato GIF no siempre es tan bueno como el JPEG para imágenes fotográficas, porque sólo
soporta hasta 256 colores. Este tipo de imágenes luce mejor en modo RGB, el cual permite hasta
16.7 millones de colores.
El formato PNG-24 crea imágenes fotográficas de excelente calidad. No obstante como utiliza
compresión sin pérdida, no puede reducir el tamaño de archivo tanto como el formato JPEG.
El formato PNG-8 es similar al GIF en lo que a calidad de imágenes fotográficas se refiere; el

límite de 256 colores reduce la calidad.
Actividad 2B-1:
Optimizar imágenes fotográficas
Objetivo: Crear imágenes fotográficas con la mejor apariencia posible y un tamaño de

archivo lo más reducido posible.
Preparación: Al comenzar esta lección, Photoshop debe estar activo. Si comienzas el curso en
esta lección y no has completado las anteriores, sigue las indicaciones de “Utilizar los datos
almacenados” en la sección “Sobre este curso”, al comienzo de este manual.
Utilizarás el comando de Photoshop Guardar para Web para optimizar una imagen fotográfica.
Selecciona el menú Archivo Æ Abrir (Método abreviado: CTRL O). Aparece el diálogo
indicado.
Si utilizas el diálogo Guardar para Web para guardar las imágenes antes de completar las
actividades 2B, es posible que los resultados varíen de los descritos en el manual, porque
Photoshop basa las vistas iniciales en el último archivo guardado. Por ejemplo, si viste por
última vez un archivo GIF, los valores iniciales se mostrarán en este formato. Para asegurarte
que obtengas los resultados correctos, haz todas las actividades del tema una después de la otra.
Si fuese necesario, navega hasta la carpeta “Photoshop 6.0 Web Data”.
Selecciona el archivo “healtexpert.psd” de la lista de archivos.
Haz clic en “Abrir”. La imagen se abre. Por las razones discutidas en la lección “Preparación
para imágenes Web”, fue escaneada a una resolución bastante alta. Probarás con la optimización
de la imagen (es decir, guardarla en un formato de archivo para Web), en su tamaño original y en
uno reducido.
Página 26/157
Selecciona el menú Archivo Æ Guardar para Web (Método abreviado: CTRL ALT SIFT S).
La imagen aparece en el diálogo Guardar para Web.
El diálogo Guardar te permite previsualizar una o más versiones de una imagen optimizada, al
igual que otras versiones. Primero, compararás una versión optimizada con la original. Haz clic
en la pestaña “2 copias” en la parte superior del diálogo. La versión original aparece a la
izquierda del diálogo, mientras que la optimizada se muestra en la derecha.
Primero tratarás de optimizar la imagen como un archivo GIF. Este formato sólo soporta hasta
256 colores, aunque puedes usar menos para tratar de reducir el tamaño del archivo. Utilizarás un
valor preestablecido de la lista “Ajustes” a 128 colores. Selecciona “GIF 128 con tramado” en
la lista “Ajustes”. El tramado simula colores que no están en la paleta del color intercalando
píxeles de diferentes colores.
Los colores específicos utilizados en una imagen se almacenan en una tabla de color (también
conocida como una paleta de color), que se muestra a la derecha del diálogo. La imagen luce
similar a la original, con muy poca distorsión. Sin embargo, el tamaño del archivo, que observas
en la parte inferior, sólo ha sido reducido a 85.18K, el cual tomará 31 segundos en descargarse
con un módem de 28.8 Kbps.
Tramado:
Un motivo de píxeles de colores intercalados cuya función es simular un color sólido (por
ejemplo, píxeles rojos y azules intercalados dan la sensación de morado).
Tratarás de reducir el número de colores lo más posible para disminuir el tamaño del archivo.
Selecciona la opción “GIF 32 con tramado” de la lista “Ajustes”. La calidad de la imagen se
reduce dramáticamente, pero el tamaño del archivo sólo se reduce hasta 49.52K. Con sólo 32
colores, las áreas con sombras suaves en la original se muestran un poco distorsionadas, mientras
que algunos colores se mezclan entre sí. Aunque podrías ajustar los otros controles para
disminuir más el tamaño del archivo, esta imagen demuestra que el formato GIF sólo disminuye
el tamaño de archivo de imágenes fotográficas hasta cierto punto hasta comenzar a desmejorar la
apariencia.
Archivo GIF:
Un archivo guardado en Formato de Intercambio Gráfico (GIF), puede tener hasta 256 colores
y utiliza compresión sin pérdida.
Compararás una imagen optimizada en formato GIF con una optimizada en formato JPEG.
Utilizarás la vista “4 copias” para que puedas ver la original con otras versiones optimizadas.
Haz clic en la pestaña “4 copias” en la parte superior del diálogo. Las dos versiones que
visualizaste aparecen en la parte superior del diálogo; Photoshop genera dos versiones
optimizadas adicionales con tamaños menores basadas en la versión superior derecha. Ambas
Página 27/157
lucen peor que el archivo que creaste. La imagen inferior izquierda tiene 16 colores; la inferior
derecha tiene 32, pero no trama la imagen y por eso aparecen áreas más distorsionadas.
Puedes cambiar los ajustes para cualquier vista. Debes cambiar la imagen inferior izquierda a
formato JPEG. Haz clic en la imagen inferior izquierda. Aparece un borde negro alrededor de
la imagen, que indica que ha sido seleccionada.
Selecciona “JPEG Alta” de la lista “Ajustes”. La imagen inferior izquierda se optimiza con el
formato JPEG. A diferencia del formato GIF, el JPEG no disminuye el número de colores;
comprime la imagen para disminuir el tamaño del archivo. Incluso a este nivel de calidad (la
menor cantidad de compresión), el tamaño de la imagen es de 31.98K, mucho menor a las de los
formatos GIF de 32 colores. También, se muestra mucho más uniforme.
Si desplazas una de las imágenes en este diálogo, las demás también lo harán. Si es necesario,
haz clic en la herramienta Mano en la esquina superior izquierda del diálogo Guardar para
Web (Método abreviado: H).
Arrastra la mitad de cualquiera de las cuatro imágenes para ver el cuello y parte de la
camisa del hombre. Las cuatro imágenes se mueven. Las versiones GIF de la parte superior e
inferior muestran un color bastante sólido en este lugar, pero la versión JPEG luce casi igual al
original.
Puedes disminuir aún más el tamaño del archivo disminuyendo el nivel de calidad JPEG. Una
vez más, debes seleccionar la imagen que deseas cambiar antes de cambiar la configuración. Haz
clic en la imagen inferior izquierda.
Selecciona la opción “JPEG Baja” de la lista “Ajustes”. El tamaño del archivo disminuye
hasta 9.811K, pero la calidad de imagen disminuye porque se aplica una mayor compresión del
archivo.
Puedes examinar los efectos de cada método de optimización más de cerca utilizando la
herramienta Zoom. Haz clic en la herramienta Zoom en la esquina superior izquierda del
diálogo Guardar para Web (Método abreviado: Z).
Traza un marco de zoom alrededor de la boca del señor en la esquina inferior izquierda de
la imagen. La imagen aumenta significativamente y podrás ver la degradación más claramente.
El formato JPEG comprime una imagen dividiéndola en bloques de 8 x 8 píxeles y ajustando los
colores de cada uno. Mientras mayor sea la compresión, los bloques de 8 x 8 serán más visibles.
Las áreas que se degradan con la compresión se dice que tienen defectos.
Puedes algunos de los métodos abreviados para utilizar el zoom en el diálogo Guardar para Web,
tal como lo harías en una ventana normal de Photoshop. Presiona CTRL – para disminuir el
zoom. La imagen se muestra al nivel inmediatamente inferior de la lupa.
Página 28/157
También puedes utilizar la lista de zoom en la parte inferior del diálogo. Selecciona “100%” de
la lista Zoom en la parte inferior del diálogo. En caso de que no esté en esta opción, la imagen
regresará al nivel 100%. Los defectos de JPEG no son tan evidentes en esta vista.
Por último, debes probar con los dos formatos PNG. Haz clic en la imagen inferior derecha.
El formato PNG-8 es muy similar al GIF. Selecciona “PNG-8 128 con tramado” de la lista
“Ajustes”.
Debes disminuir el número de colores para concordar los de la versión optimizada en GIF de la
derecha. Selecciona “32” de la lista “Colores”. La imagen luce similar a la de la derecha,
porque utilizan la misma paleta. Sin embargo, el tamaño del archivo es distinto porque los
formatos PNG-8 y GIF utilizan algoritmos de compresión distintos. Aunque el algoritmo PNG-8
que Photoshop utiliza puede crear imágenes más pequeñas que la compresión de GIF LZW, las
imágenes como ésta, con áreas grandes de colores planos pueden ser más grandes cuando se
optimizan con PNG-8.
PNG-24 puede compararse al formato JPEG, porque guarda la imagen en color RGB en vez de
una tabla de color. Sin embargo, el método de compresión es sin pérdida, a diferencia de JPEG, y
crea archivos más grandes. Selecciona “PNG-24” de la lista “Ajustes”. La imagen luce idéntica
a la original porque la compresión es sin pérdida. El tamaño del archivo es de 347.4K, la mitad
del original aproximadamente, pero sigue siendo demasiado grande para utilizarlo en el Web.
Puedes utilizar el diálogo Guardar para Web para reducir la resolución de píxeles. Esto te ahorra
el paso de utilizar el diálogo Tamaño de imagen antes de optimizarla y puede hacer que los
archivos almacenados en formatos como PNG-24 tengan tamaños más razonables. Haz clic en la
pestaña “Tamaño de imagen” en la parte derecha del diálogo. Aparece el panel Tamaño de
imagen.
Debes reducir esta imagen a 75 píxeles de ancho. Escribe 75 en el campo “Ancho”.
Haz clic en “Aplicar”. Photoshop vuelve a generar las imágenes y las muestra en pocos
instantes. Con este tamaño, el tamaño de los archivos disminuye considerablemente. El tamaño
de la versión PNG-24, a pesar de que sigue siendo más grande que las anteriores, es mucho más
razonable con el tamaño actual, 14.83K. La versión GIF luce más cercana en calidad a la original
que en el tamaño original con un tamaño de archivo de 2.704K.
La compresión de baja calidad que no tuvo mucho impacto en la imagen del tamaño original luce
muy distorsionada. Deberás mejorarla. Haz clic en la imagen inferior izquierda.
Selecciona “JPEG Media” de la lista “Ajustes”. El tamaño de la imagen aumenta a 1.522K,

pero todavía pueden apreciarse algunos defectos.
Página 29/157
Selecciona “JPEG Alta” de la lista “Ajustes”. La imagen luce muy similar a la original, pero
el tamaño del archivo aumentó a 2.688K, comparable al tamaño del archivo en formato GIF de
32 colores.
Por último, debes cambiar la calidad manualmente en vez de utilizar los ajustes preestablecidos
para reducir el tamaño del archivo ligeramente sin perder calidad. Haz clic en “Calidad” y
arrastra el regulador que aparece hasta llegar a 50. La imagen luce casi igual, pero el tamaño
del archivo disminuye de 2.688K hasta 2.115K. Aunque no es una gran diferencia (unos 0.57K
aproximadamente), si ahorras esta cantidad mínima de espacio en unas veinte imágenes de una
página Web, ésta tomará casi 6 segundos menos en descargarse. Por ello, vale la pena ahorrar al
menos una fracción de un K por imagen.
Las otras dos opciones afectan el tamaño del archivo JPEG. Una imagen JPEG puede guardarse
como “Progresiva” para que aparezca gradualmente en niveles de detalle que aumentan
progresivamente en el explorador del usuario. Esta opción puede ser útil para imágenes muy
grandes, porque le permite al usuario ver la imagen durante la descarga. Verás el impacto que
tiene sobre la imagen la configuración “Progresiva” en el tamaño, marcando esta opción
temporalmente. Marca la casilla “Progresiva”. El archivo aumenta a 2.27K.
Figura 2-1: Una imagen JPEG parcialmente descargada; observa los diferentes niveles de
detalle.
Para imágenes pequeñas, si guardas el archivo con la opción progresiva sólo aumentará el
tamaño del archivo y el tiempo de descarga. No activarás esta opción para mantener el tamaño
del archivo al mínimo. Desmarca la casilla “Progresiva”. El tamaño regresa a 2.115K.
Por último, verás el impacto de incluir un Perfil ICC en la imagen. Los perfiles ICC (Internationa
Color Consortium) poseen información sobre la gestión de color que ciertas aplicaciones pueden
leer para asegurar que la imagen se muestre aproximadamente como se diseñó. Sin embargo,
como sólo un explorador en una de las principales plataformas lo soporta (Internet Explorer para
Macintosh, versión 4.01 y superiores), lo mejor será no incluir perfiles ICC, porque sólo
aumentarán el tamaño del archivo. Verás el impacto que tiene el perfil ICC en el tamaño del
Página 30/157
archivo marcando la opción temporalmente. Marca la opción “Perfil ICC”. El tamaño del
archivo aumenta a 5.186K.
Perfil ICC:
Un archivo que contiene información sobre el espacio de color de un dispositivo. El formato fue
creado por el International Color Consortium (ICC, Consorcio Internacional del Color).
No incluirás el perfil ICC para mantener al mínimo el tamaño del archivo. Desmarca la casilla
“Perfil ICC”. El archivo se reduce a 2.115K.
Con este experimento, puedes generalizar que, para las imágenes fotográficas:
El formato JPEG produce el mejor balance de calidad y tamaño de archivo para las imágenes
grandes.
Para las imágenes muy pequeñas, las diferencias se minimizan, especialmente aquellas con áreas
de colores planos.
El formato PNG-24 es mejor para tamaños pequeños que para los grandes, aunque el tamaño del
archivo es mucho más grande que en los formatos GIF o JPEG (no olvides que no todos los
exploradores lo admite).
Las opciones “JPEG Progresiva” y “Perfil ICC” normalmente aumentan el tamaño del archivo y
no siempre son necesarias para los exploradores a menos que se muestren imágenes grandes que
tomarán cierto tiempo para descargarse.
Ahora guardarás la versión JPEG optimizada con la extensión de archivo correcta, anexada al
nombre del archivo. En el menú “Tipo”, puedes seleccionar algunas opciones para guardar la
imagen únicamente (“Sólo imágenes (*.jpg)”), un archivo HTML que incluya las etiquetas
apropiadas para mostrar la imagen (“Sólo HTML (*.htm)”) o ambos (“HTML e Imágenes
(*.htm)”). Aprenderás más sobre guardar imágenes con HTML más adelante; por ahora sólo
guardarás la imagen. Si es necesario, selecciona la opción “Sólo imágenes (*.jpg)” de la lista
“Tipo”.
Haz clic en “Guardar”. El archivo se guarda con el nombre “healthexpert.jpg” en la carpeta

“Photoshop 6.0 Web Data” y regresas a la vista original de la imagen.
Cierra el archivo “healthexpert.psd”, guardando los cambios.
Haz clic en “Guardar”. El archivo se guarda con el nombre de “healthexpert.jpg” en la carpeta

“Photoshop 6.0 Web Data” y regresas a la vista original de la imagen.
Haz clic en la ventana “healthexpert.psd”, guardando los cambios.
Página 31/157
Gráficos de colores planos e ilustraciones
Como la compresión GIF pierde, las imágenes GIF resultan eficientes para guardar las
ilustraciones y gráficos con grandes áreas de colores planos y detalles. El algoritmo de
compresión examina las filas de píxeles y, si hay píxeles consecutivos que concuerden
exactamente en una fila, sólo se escribirá el valor en el archivo una sola vez. Por ello, el tamaño
de las imágenes grandes con colores planos no son mucho más grandes que aquellas con menos
píxeles.
El formato JPEG no siempre es tan bueno como el GIF para las ilustraciones. El algoritmo de
compresión JPEG puede crear artifacts en áreas de colores planos y texto pequeño. Como el
formato GIF no pierde, las áreas de colores planos y texto pequeño permanecen como se
diseñaron.
Cuando el formato PNG sea más aceptado, podría ser más útil que el formato GIF para
ilustraciones. La compresión es mucho más eficiente que la del GIF LZW por lo que puede crear
archivos significativamente más pequeños con la misma calidad y número de colores. Sin
embargo, el formato PNG-24 no es tan eficiente en las ilustraciones porque no reduce el número
de colores y no ofrece compresión con pérdida.
Actividad 2B-2:
Optimizar gráficos con colores planos e ilustraciones
Objetivo: Crear la mejor apariencia para imágenes de colores planos con el menor tamaño
de archivo posible.
Esta vez, utilizarás ImageReady para comparar los métodos de optimización. Haz clic en el
botón Ir a ImageReady (Método abreviado: CTRL SHIFT M). ImageReady se inicia.
ImageReady tiene varios comandos y herramientas que concuerdan o son similares a los de
Photoshop. No obstante, se centra principalmente en los gráficos Web, de modo que integra parte
de las características específicas para Web de Photoshop con su interfase básica.
Selecciona el menú Archivo Æ Abrir (Método abreviado: CTRL O). Aparece el diálogo
seleccionado.
Navega hasta la carpeta “Photoshop 6.0 Web Data” y haz doble clic en el archivo
“expgraph1.psd” para abrirlo.
La ventana principal de ImageReady puede mostrar una versión optimizada, dos o cuatro
versiones de una imagen. Utilizarás la opción de cuatro versiones que utilizaste en Photoshop
Página 32/157
para comparar los formatos de archivos. Haz clic en “4 copias” en la parte superior de la
ventana. Aparecen tres vistas adicionales de la imagen.
Al igual que en el ejercicio anterior, debes optimizar la imagen de la parte superior derecha en
formato GIF. Haz clic en la imagen superior derecha.
Debes seleccionar los ajustes de optimización en la paleta Optimizar. En caso necesario, haz
clic en la pestaña Optimizar.
Haz clic en “GIF 32 con tramado” de la lista “Ajustes” en la paleta Optimizar. La imagen se
muestra idéntica a la original, porque ésta tenía muy pocos colores y porque la compresión GIF
no tiene pérdida. El tamaño del archivo es de 7.522K, mucho más pequeño que el original.
Debes comparar la optimización de la imagen en formato GIF con la que optimizaste en formato
JPEG. Haz clic en la imagen inferior izquierda.
Selecciona “JPEG Baja” de la lista “Ajustes” en la paleta Optimizar. La imagen inferior

izquierda se optimiza con el formato JPEG. Incluso en esta calidad (tiene una gran cantidad de
compresión), el tamaño del archivo es 18.44K, mucho más grande que el de la imagen GIF en la
parte superior derecha. Aparecen también artifacts bastante evidentes en la imagen y resultan
más todavía alrededor del texto y en los contornos de alto contraste.
Por último, debes probar con los dos formatos PNG. Haz clic en la imagen inferior derecha.
Selecciona “PNG-24” de la lista “Ajustes” en la paleta Optimizar. El formato PNG-24 es

bastante eficiente con gráficos de colores planos. El tamaño del archivo, 7.085K, resulta más
pequeño que el GIF, a pesar de que puede tener millones de colores.
No obstante, el formato PNG-8 es más eficiente, porque la imagen sólo necesita una pequeña
paleta de colores. Selecciona “PNG-8 128 con tramado” de la lista “Ajustes” en la paleta
Optimizar. El tamaño del archivo se reduce hasta 4.303K.
Al igual que en Photoshop, puedes examinar los distintos efectos de cada método de
optimización más de cerca con el zoom. Los métodos abreviados del teclado para el zoom y
desplazamiento en la imagen de Photoshop sirven en ImageReady. Mantén presionada la barra
de espacio. Aparece temporalmente la herramienta Mano.
Arrastra la imagen inferior derecha tanto como sea necesario para ver la palabra
“Expectancy” en la izquierda.
Mantén presionada la tecla CTRL y la barra de espacio. Aparece temporalmente el cursor de

la herramienta Zoom.
Página 33/157
Haz clic en el número 60 que está abajo y hacia la derecha de la palabra “Expectancy”
hasta llegar a 200% en el zoom. La imagen se acerca. Con este aumento, los artifacts JPEG son
más evidentes en la esquina inferior izquierda de la imagen. Las áreas de colores planos se
distorsionan donde se juntan con otros colores (cerca de los textos o de las columnas en el
gráfico). Las imágenes superior e inferior de la parte derecha (las versiones GIF y PNG-8)
aparecen igual que la original, la cual sólo tenía nueve colores. Todas las áreas de colores planos
se mantienen perfectamente.
Debes guardar la imagen en formato GIF, porque el tamaño de archivo es pequeño con una
apariencia aceptable. Debes seleccionar una opción más antes de guardar. Esta opción
normalmente se encuentra oculta en ImageReady (aunque aparece en el diálogo Guardar para
Web de Photoshop). Haz clic en el triángulo doble a la izquierda de la palabra “Optimizar”
en la paleta Optimizar hasta que se expanda completamente. La paleta se expande para
mostrar más opciones. Si haces clic en este icono varias veces, muestra más o menos opciones.
Puedes seleccionar también “Mostrar opciones” en la lista de la paleta Optimizar.
En otras actividades de la lección, al igual que en la lección “Preparar para visualizar en

diferentes plataformas”, verás más en detalle sobre algunas opciones adicionales. Sin embargo,
examinarás la opción “Entrelazado” en este momento. Las imágenes GIF entrelazadas son
similares a las imágenes JPEG Progresivas; cuando se descargan, la imagen aparece primero a un
nivel bajo de calidad, y con el tiempo, van apareciendo detalles hasta completar la imagen.
Figura 2-2: Una imagen GIF Entrelazada parcialmente descargada; observa los distintos
niveles de detalle.
Al igual que con las imágenes JPEG, sólo necesitas utilizar el entrelazado si la imagen tomará
mucho tiempo en descargarse; el entrelazado aumenta el tamaño del archivo y el tiempo de
descarga. Verás el efecto del entrelazado en el tamaño del archivo activándolo temporalmente.
Haz clic en la imagen de la esquina superior derecha.
Marca la casilla “Entrelazado”. El tamaño del archivo aumenta de 7.522K a 7.73K.
Debes desactivar el entrelazado para crear un archivo lo más pequeño posible. Desmarca la
casilla “Entrelazado”.
Página 34/157
Con esta prueba, puedes generalizar que:
El formato GIF es definitivamente mejor que el JPEG para imágenes con colores planos.
PNG-8 puede ser el más eficiente (pero es incompatible con algunos exploradores).
El entrelazado normalmente es innecesario y alimenta ligeramente el tamaño del archivo.
Ahora guardarás la versión GIF optimizada. A diferencia de Photoshop, donde la vista de 4

copias aparece en un diálogo, sólo debes utilizar el comando “Guardar optimizado” en
ImageReady para guardar la versión seleccionada. Selecciona el menú Archivo Æ Guardar
optimizada (Método abreviado: CTRL ALT S).
El diálogo Guardar optimizado aparece, con la extensión del archivo correcta anexada al nombre
del archivo. Además de la imagen y del archivo HTML, ImageReady puede dividir imágenes en
componentes y guardar los sectores en forma separada. Al igual que antes, sólo guardarás la
imagen por ahora. Si es necesario, selecciona la opción “Sólo imágenes (*.gif)” en la lista
“Tipo”.
Navega hasta la carpeta “Photoshop 6.0 Web Data” y haz clic en “Guardar”. El archivo se
guarda con el nombre “expgraph.gif” en la carpeta “Photoshop 6.0 Web Data” y regresas a la
vista de 4 copias de la imagen.
Haz clic en el botón Cerrar en la ventana “exprgaph.psd”.
ImageReady pregunta si deseas guardar la imagen. Haz clic en “Aceptar”. La imagen se cierra.
Imágenes con sombras sutiles y gradientes
Muchas imágenes caen en la definición de “fotografías” y “colores planos”. Por ejemplo, las
ilustraciones o dibujos pueden ser muy realistas pero sin llegar a ser fotografías, mientras que los
gráficos pueden incluir gradientes que se desvanecen gradualmente de un color a otro.
Los gradientes son difíciles de reproducir en formato GIF, porque el número de colores del
gradiente o en todos los gradientes de la imagen puede exceder el número de colores de la tabla
de color de la imagen. Normalmente necesitarías utilizar más colores en la tabla de una imagen
con gradientes que en la de colores planos. Por este motivo, los tamaños de los archivos serán
más altos. Como la compresión LZW de los archivos GIF comparan píxeles horizontalmente,
mas no verticalmente, puede crear archivos más pequeños a partir de imágenes con gradientes
verticales que aquellas con gradientes horizontales.
Aunque el formato JPEG puede crear gradientes más uniformes que el formato GIF, también
puede generar defectos cerca de los contornos de la imagen. Por ello, en las imágenes con
ilustraciones como gradientes, las versiones optimizadas en JPEG pueden tener ciertas
objeciones.
Página 35/157
Como cada método de optimización tiene ventajas en relación al otro y cualquiera puede
producir tamaños de archivos más pequeños, recomendamos probar cada uno antes de guardar
las imágenes con sombras y gradientes. El comando de Photoshop “Optimizar al tamaño de
archivo” (disponible también en ImageReady) te puede ayudar a decidir el mejor formato en caso
de que necesites reducir el tamaño del archivo hasta cierto punto.
Actividad 2B-3:
Optimizar imágenes con sombras suaves y gradientes
Objetivo: Comparar métodos de optimización para guardar imágenes con sombras y

gradientes.
Imágenes con sombras suaves.
Primero debes abrir una ilustración con una sombra suave utilizando Photoshop. Haz clic en el
botón “Adobe Photsohop” en la barra de tareas.
Selecciona el archivo “applepearcarrot.psd” de la lista de archivos.
Haz clic en “Abrir”. La imagen se abre. Aunque es una ilustración, puede contener sombras que
son más difíciles de optimizar que los colores planos.
Haz clic en el menú Archivo Æ Guardar para Web (Método abreviado: CTRL ALT SHIFT
S). El diálogo Guardar para Web aparece en pantalla.
Debes comparar otra vez el formato GIF al JPEG. Haz clic en la imagen de la esquina superior
derecha.
Selecciona la opción “GIF 128 con tramado” de la lista “Ajustes”. La imagen superior
derecha luce muy similar a la original, porque tiene 128, muy similar a la versión inicial.
Haz clic en la imagen inferior izquierda.
Selecciona la opción “JPEG Alta” de la lista “Ajustes”. Esta optimización también luce bien y
es similar en tamaño a la versión GIF.
Debes utilizar la herramienta Zoom para examinar la imagen más cuidadosamente. Selecciona
“300%” de la lista Nivel de zoom en la esquina inferior izquierda del diálogo. En este
Página 36/157
tamaño, puedes ver los defectos más claramente de la versión JPEG y que la sombra en la
versión GIF no es tan uniforme como en la imagen original.
Ambos métodos generan archivos de más de 6K. Debes disminuir más el tamaño del archivo,
sobre todo si la página Web incluirá muchas imágenes. Utiliza el comando “Optimizar a tamaño
de archivo” de la paleta Optimizar para permitir que Photoshop determine los ajustes necesarios
para crear un tamaño de archivo específico. También te permite comparar los métodos de
optimización, porque pueden utilizarse tanto en las versiones GIF como JPEG para ver la calidad
que cada imagen produce según el tamaño de archivo. Probarás esto primero en la imagen de la
esquina inferior izquierda. Haz clic en la imagen de la esquina inferior izquierda.
Selecciona la opción “Optimizar a tamaño de archivo” del menú Optimizar a la derecha de

la lista “Ajustes”.
Aparece el diálogo Optimizar a tamaño de archivo. Puedes utilizar o bien la configuración actual
como punto de partida, o permitir que Photoshop seleccione el formato GIF o JPEG. Permitirás
que el programa seleccione el formato que “crea” mejor. Haz clic en el botón “Autoseleccionar
GIF/JPEG”.
Debes indicarle al programa que optimice la imagen a un tamaño de 4K. Escribe 4 en el campo
“Tamaño de archivo deseado”.
Haz clic en “OK”. Photoshop selecciona el formato GIF y prueba con varios números de colores
hasta llegar al tamaño de 3.909K, justo debajo del límite que especificaste. Como esta imagen
sólo contiene 27 colores, la sombra de la original se bandea (se reproduce con sólo unos pocos
colores) y muestra también tramado.
Página 37/157
Aunque Photoshop seleccionó el formato GIF porque la imagen tiene áreas extensas de colores
planos (principalmente blanco), debes probar la misma optimización con el formato JPEG. Haz
clic en la imagen en la esquina inferior izquierda.
Selecciona “Optimizar a tamaño de archivo” del menú Optimizar en la derecha de la lista

“Ajustes”.
El diálogo Optimizar a tamaño de archivo aparece. Esta vez, comenzarás con los ajustes actuales,
que forzarán a Photoshop a utilizar un formato JPEG. Haz clic en el botón “Ajustes actuales”.
El tamaño del archivo de 4K que ingresaste anteriormente se muestra en “Tamaño de archivo

deseado”. Haz clic en “OK”. Photoshop prueba con distintos ajustes de calidad hasta llegar al
tamaño 3.972K, justo debajo del límite especificado. Con la calidad relativamente baja de 33, la
imagen muestra defectos más evidentes que en la versión anterior.
Debes regresar al nivel de zoom de 100% para ver la imagen como aparecería en una página
Web. Selecciona “100%” en la lista Nivel de zoom, en la parte inferior de la ventana. Con
este tamaño, los defectos del formato JPEG no son tan evidentes. Aunque el tramado de la
imagen GIF no es tan obvio, el formato JPEG luce mucho mejor. En otras imágenes con
sombras, puede ser lo contrario, por eso siempre es bueno comparar antes de optimizar.
De la misma manera en que el comando Optimizar a tamaño de archivo de Photoshop indica el

tamaño de archivo que utilizarás, puedes permitir que ImageReady seleccione automáticamente
el formato GIF o JPEG en las vistas 2copias o 4 copias. Selecciona el menú Edición Æ
Preferencias Æ Oprimización y haz clic en el botón GIF o JPEG seleccionado automáticamente
en la sección “Optimización por defecto”. Aunque no siempre selecciona la mejor opción,
algunas veces lo hará, porque basa la decisión en el número de colores y el ordenamiento de los
mismos en la imagen original.
Debes guardar la versión JPEG. Haz clic en la imagen de la esquina inferior izquierda.
Haz clic en “OK”. El diálogo Guardar optimizada como aparece.
El nombre del archivo es correcto y deberás utilizar los mismos ajustes que empleaste
anteriormente. Haz clic en “Guardar”. La imagen se guarda como “applepearcarrot.jpg” en la
carpeta “Photoshop 6.0 Web Data”. La imagen original aparece.
Haz clic en el botón Cerrar en la ventana de la imagen “applepearcarrot.psd”.
Photoshop pregunta si deseas guardar la imagen. Haz clic en “Aceptar”.
Dirección de gradiente y el formato GIF
Página 38/157
Ahora compararás los tamaños GIF para dos imágenes con gradientes. Verás que el algoritmo de
compresión GIF, LZW, permite comprimir imágenes con gradientes verticales mejor que
aquellos con gradientes horizontales. Selecciona el menú Archivo Æ Abrir (Método abreviado:
CTRL O). Aparece el diálogo Abrir.
Selecciona el archivo “expgraph2.psd” de la lista.
Haz clic en “Abrir”. La imagen se abre. Es casi idéntica al gráfico sobre la expectativa de vida
que guardaste anteriormente, sin embargo, esta versión tiene un gradiente que va verticalmente
en el fondo. El formato GIF comprimirá bastante bien esta imagen porque cada píxel está en una
fila en el fondo que concuerda el que está al lado.
Selecciona el menú Archivo Æ Guardar para Web (Método abreviado: CTRL ALT SHIFT
S). Aparece el diálogo Guardar para web. Photoshop muestra la imagen original y tres versiones
optimizadas en formato PNG.
Esta vez, sólo trabajarás con el formato GIF. Haz clic en la imagen de la esquina superior
derecha.
Selecciona “GIF 32 con tramado” de la lista “Ajustes”. La imagen luce similar a la original.
Puedes seleccionar “Guardar ajustes” de la lista Optimización en Photoshop (o en la paleta

Optimizar en ImageReady) para crear opciones adicionales del menú en la lista “Ajustes”.
Al igual que Photoshop “pobló” automáticamente la ventana con versiones PNG basadas en la
versión superior derecha cuando entraste por primera vez al diálogo, puedes “repoblar” la
ventana basado en la optimización de la imagen de la esquina superior derecha. Selecciona
“Repoblar vistas” de la lista Optimización. Photoshop crea dos alternativas de archivos con
tamaño reducido; una versión de 16 colores en la esquina inferior izquierda y otra versión de 32
colores sin tramado en la derecha.
Como la versión de 16 colores luce bastante bien, puedes repoblar las vistas basadas en esta para
crear archivos con tamaños mucho más pequeños. Haz clic en la imagen inferior izquierda (la
que tiene 16 colores).
Selecciona “Repoblar vistas” en la lista Optimización. Photoshop genera dos archivos basados
en la versión con tramado de 16 colores. La versión inferior izquierda contiene sólo ocho colores
y parte del tramado es evidente en el fondo. La versión inferior derecha, con 16 colores luce
mejor y el tamaño del archivo es mucho menor (9.343K) (la anterior es de 10.36K). Utilizarás la
versión de la esquina derecha.
Haz clic en la imagen de la esquina inferior derecha.
Página 39/157
Haz clic en “OK”. Aparece el diálogo Guardar optimizada como.
Los ajustes son correctos. Haz clic en “Guardar”.
Haz clic en el botón cerrar en la ventana “expgraph2.psd”.
Photoshop pregunta si deseas guardar la imagen. Haz clic en “Aceptar”.
Ahora abrirás una versión del gráfico con un gradiente horizontal y verás que el tamaño es
mucho mayor con los mismos ajustes de optimización. Selecciona el menú Archivo Æ Abrir
(Método abreviado: CTRL O). Aparece el diálogo Abrir.
Selecciona “expgraph3.psd” de la lista.
Haz clic en “Abrir”. La imagen se abre. Esta versión del gráfico tiene un gradiente que va en
forma horizontal en el fondo. Como el algoritmo de compresión GIF LZW sólo compara cada
píxel con los que tiene al lado (no los que tiene abajo o arriba), no guardará este archivo tan
eficientemente como el anterior porque los píxeles cambian de colores muchas veces en
dirección horizontal en el fondo.
S). Aparece el diálogo Abrir. Photoshop muestra de nuevo la configuración PNG en la esquina
inferior derecha. Debes duplicar los ajustes que utilizaste en el gráfico anterior.
Selecciona “GIF 32 sin tramado” de la lista “Ajustes”.
Selecciona “16” de la lista “Colores”. Se duplica la configuración que utilizaste para

“expgraph2.gif”, sin embargo, el tamaño de archivo actual (10.18K) es mucho más grande que
en la versión (9.343K).
Adicionalmente, el bandeo es aparente en la versión de la esquina superior derecha, porque el

gradiente se extiende sobre una gran distancia y porque las líneas horizontales en el fondo
hicieron el bandeo menos evidente que en la otra versión.
Selecciona la opción “Repoblar vistas” de la lista Optimización. La imagen de la esquina

inferior derecha, a pesar de que utiliza el mismo número de colores, no aparece bandeada,
porque el tramado rompe la línea vertical donde los píxeles de colores cambian en el gradiente.
No obstante, el tramado aumenta el tamaño del archivo también (11.92K).
Debes probar con el tramado en esta imagen para ver cómo reduce el efecto de bandeo y tratar de
reducir el tamaño de archivo. Debes utilizar el zoom para ver el efecto más claramente. Haz clic
en la herramienta Zoom en la parte izquierda del diálogo (Método abreviado: Z).
Página 40/157
Haz clic en el segundo par de columnas en la imagen superior derecha.
Haz clic en el segundo par de columnas en la imagen superior derecha, haz clic de nuevo en
el nivel de zoom 300%. El tramado de la versión inferior derecha se mezcla con el borde entre
los colores del gradiente.
Si disminuyes el porcentaje de tramado, habrá más áreas de colores sólidos. Debes probar un
porcentaje de tramado menor para la imagen superior derecha. Haz clic en la imagen inferior
derecha.
Arrastra el regulador “Tramado” hasta 85%. El área con tramado disminuye y el tamaño del
archivo se reduce a 11.21K.
Debes regresar al tamaño real de la vista para evaluar los cambios realizados. Mantén
presionada la tecla ALT y mueve el cursor sobre la imagen inferior derecha. Aparece un
signo – en el cursor de la lupa cuando presionas la tecla ALT.
Haz clic dos veces mientras mantienes presionada la tecla ALT. El aumento regresa a 100%.
El bandeo sigue siendo visible, incluso con la pequeña reducción en el tramado. La versión 85%
tramado, con un tamaño de archivo de 11.21K, es el que se acerca más a la versión del gradiente
vertical en términos de calidad. Esta versión es casi 2K más que la versión con el gradiente
vertical, que demuestra que el formato GIF es más eficiente con gradientes verticales que con los
horizontales.
No guardes esta versión, utiliza más bien la que tiene el gradiente vertical en la página Web para
mantener el tamaño de archivo lo más pequeño posible. Haz clic en “Cancelar”.
Haz clic en el botón Cerrar de la ventana “expgraph3.psd”. Como no guardaste una versión
optimizada, la imagen se cierra sin que Photoshop pregunte si deseas guardarla.
Imágenes con transparencia
Los dos formatos Web principales tienen capacidades limitadas para crear transparencias
utilizables. El formato JPEG no puede crear transparencia mientras que el GIF sólo puede crear
transparencia simple. Los píxeles en las imágenes GIF pueden ser o bien, completamente sólidos
o completamente transparentes. Por ello, si colocas una imagen guardada con transparencias
como un archivo GIF sobre un fondo de varios colores, los bordes posiblemente tendrán un
“halo” visible sobre uno o más de los colores.
El formato PNG-24 puede crear múltiples niveles de transparencia que permiten efectos de
sombras suaves en fondos de varios colores, viñetas suaves, entre otros. Sin embargo, la
transparencia PNG sólo es compatible con Internet Explorer 5 (hasta este momento).
Página 41/157
Por fortuna, en el diseño Web actual, no existen muchas instancias en donde la verdadera
transparencia sea necesaria. Muchas, sino la mayoría de las páginas Web emplean fondos de
colores sólidos (posiblemente porque es difícil crear efectos de transparencia atractivos con el
formato GIF). En estos casos, puedes crear tanto en el formato GIF como en el JPEG un fondo
“mate” que concuerde con el fondo de la página Web.
También, en casos donde una página deba aparecer con espacio transparente alrededor de la
misma, puede ser posible agregar parte del fondo de colores en la imagen de frente, tomando
ventaja de la capacidad de Photoshop para la transparencia multi-nivel para mezclar el frente con
la imagen. Luego puedes guardar la imagen sin transparencia y utilizar etiquetas DHTML para
colocar la imagen en forma precisa en la página Web, para que se incluya parte del fondo en la
imagen y se alinee perfectamente con el fondo de la página Web.
Actividad 2B-4:
Utilizar transparencia en imágenes Web
Objetivo: Probar con una imagen que se beneficie de la transparencia multi-nivel.
Debes abrir la imagen de la niña que creaste anteriormente y probarás varios métodos de
preservar la transparencia que rodea la imagen. Selecciona el menú Archivo Æ Abrir (Método
abreviado: CTRL O). Aparece el diálogo Abrir.
Selecciona el archivo “swimgirl.psd” de la lista.
Haz clic en “Abrir”. La imagen se abre. Creaste una viñeta suave alrededor de la imagen en la
lección “Preparación para imágenes Web” borrando una selección con calado alrededor de la
niña.
Antes de crear cualquier imagen Web, debes probar con el posicionamiento de la imagen en un
fondo multicolor. Selecciona el menú Archivo Æ Abrir (Método abreviado: CTRL O).
Aparece el diálogo Abrir.
Selecciona “twocolorbkgd.psd” de la lista de archivos.
Haz clic en “Abrir”. Aparece una imagen con dos áreas de colores – un color sólido en la
izquierda y una parte blanca a la derecha. Esto resulta similar a una porción de una página Web
con una barra de “navegación” a la izquierda. Aunque el posicionamiento de imágenes en una
página Web real se hace con códigos HTML, puedes utilizar esta imagen para simular la forma
en que se verán en una página Web como esta.
Página 42/157
Debes mover la imagen de la niña hasta el fondo, por lo que deberás mover esta imagen fuera de
la vía. Arrastra la barra de título de “twocolorbkgd.psd” hacia abajo, para que la imagen
“swimgirl.psd” pueda verse.
Haz clic en la barra de título de “swimgirl.psd” para activarla. Siempre es una buena idea
hacer clic en la barra de título de una imagen de fondo para activarla (en vez de hacerlo dentro de
la ventana), porque al hacer clic en la ventana de fondo, sólo se seleccionaría el color de frente
en vez de activar la ventana si la herramienta Cuentagotas está seleccionada.
Haz clic en la herramienta Mover en la Caja de herramientas (Método abreviado: V).
Arrastra la imagen de la niña hasta la imagen “twocolorbkgd.psd”. La imagen aparece como

una nueva capa.
Si deseas colocar la imagen de la niña sobre más de un color, la imagen tendría que incluir varios
niveles de transparencia, como lo hace esta versión. Arrastra la imagen hasta la parte
superior central de la imagen hasta que se vean los colores. La imagen se desvanece
suavemente entre ambos colores y en la sombra entre los mismos.
Colores mate vs. Transparencias
Aunque son posibles los efectos de bordes suaves cuando trabajas con Photoshop, no siempre
resulta tan fácil cuando creas archivos para imágenes Web verdaderos. La única forma de lograr
que la transparencia se vea como en la imagen es utilizar el formato PNG-24 con la casilla
“Transparencia” seleccionada. Sin embargo, como los exploradores más utilizados no soportan
varios niveles de transparencia en imágenes PNG, necesitarías utilizar JPEG o GIF. No obstante,
ninguno de estos formatos permite una imagen con transparencia de varios niveles. Ahora
experimentarás con el formato JPEG para aprender a trabajar con estas limitaciones.
Actividad 2B-5:
Utilizar colores mate en imágenes JPEG en lugar de transparencia
Objetivo: Crear una imagen JPEG a partir de una imagen con transparencia que se mezcle
con un fondo de color.
Página 43/157
Haz clic en la barra de título de la ventana “swimgirl.psd”.
S). Aparece el diálogo Guardar para Web.
Como es una imagen fotográfica, lucirá mejor cuando se guarde como un archivo JPEG. Verás
que este formato elimina la transparencia en la imagen. Haz clic en la esquina superior
derecha de la imagen.
Selecciona la opción “JPEG Media” de la lista “Ajustes”. El espacio transparente de la

imagen se reemplaza con color blanco.
Haz clic en “OK”. Aparece el diálogo Guardar optimizada como.
Debes utilizar los ajustes por defecto. Haz clic en “Guardar”. La imagen se guarda como
“swim-girl.psd”.
Deberás abrir ahora la imagen que acabas de guardar y la colocarás en la imagen

“twocolorbkgd.psd”. Selecciona el menú Archivo Æ Abrir (Método abreviado: CTRL O).
Selecciona el menú “swimgirl.jpg” de la lista de archivos.
Haz clic en “Abrir”. La imagen se abre. El espacio transparente en la imagen se reemplaza con
color blanco.
Arrastra la imagen hacia el centro de “twocolorbkgd.psd”. El espacio en blanco alrededor de

la imagen no se mezcla con el fondo de color.
Sin embargo, mientras la imagen esté colocada completamente sobre el espacio en blanco,
parecerá que se mezcla suavemente con el fondo. Arrastra la imagen hacia la derecha para
Página 44/157
que llene completamente el espacio. No existe forma de indicar que la imagen esté rodeada por
un rectángulo.
Puedes cerrar ahora la ventana “swimgirl.jpg”. Haz clic en la barra de título de la ventana
“swimgirl.jpg” (la que tiene el espacio blanco alrededor de la niña, no “swimgirl.psd”, que
contiene transparencia).
Haz clic en el botón cerrar de la ventana “swimgirl.psd”.
Si deseas colocar una versión JPEG para la imagen sobre un color diferente al blanco, puedes
hacerlo seleccionando un color “mate” para reemplazar el espacio transparente. Haz clic en la
barra de título de la ventana “swimgirl.psd”.
S). El diálogo Guardar para Web aparece. La imagen superior derecha se optimiza como JPEG
con un nivel de calidad de 30, porque guardaste la última optimización en este nivel.
Debes cambiar el color de fondo que reemplaza la transparencia en la imagen. Haz clic en la
imagen de la esquina superior derecha.
Selecciona “Negro” de la lista “Mate” (ubicada debajo del campo “Blur”). El espacio
transparente de la imagen se reemplaza con color negro.
Puedes utilizar el Cuentagotas para seleccionar cualquier color y puedes usar el color del
Cuentagotas para el color mate de la imagen. Haz clic en la herramienta Cuentagotas en la
parte superior izquierda del diálogo (Método abreviado: I).
Color mate:
Un color que designas en el diálogo Guardar para Web que se utiliza para reemplazar espacio
transparente en las imágenes o como un color cuyo espacio transparente deba mezclarse.
Puedes seleccionar cualquier color, normalmente es mejor utilizar uno que concuerde lo más
cerca posible con el fondo de la página Web.
Debes ajustar un color mate que se asemeje al color del agua. Haz clic en el agua en la esquina
superior derecha de la imagen. El color del Cuentagotas, que se muestra debajo de la
herramienta Cuentagotas a la izquierda del diálogo, se vuelve azul.
Selecciona “Color de Cuentagotas” de la lista “Mate”. Un color azul rodea la imagen, muy
similar al agua.
Debes seleccionar un color mate para utilizarlo en una página Web con un fondo similar al de la
imagen “twocolorbkgd.psd”. Puedes determinar primero los valores RGB del color de fondo.
Haz clic en “Cancelar”.
Página 45/157
Haz clic en la herramienta Cuentagotas (Método abreviado: I).
Haz clic en el color dorado de la imagen “twocolorbkgd.psd”. La paleta de color indica que
los valores RGB son 204R, 204G, 51B.
Haz clic en el color de Cuentagotas debajo de la herramienta Cuentagotas en el diálogo

Guardar para Web. Aparece el diálogo Selector de color.
Escribe los valores del color dorado RGB en el diálogo Selector de colores: 204R, 204G,
51B.
Haz clic en “OK”. El color del Cuentagotas cambia a dorado.
Selecciona “Color de Cuentagotas” de la lista “Mate”. La imagen de la niña aparece rodeada

por un color dorado.
Puedes guardar la imagen ahora. Haz clic en “OK”. Aparece el diálogo Guardar optimizada
como.
Página 46/157
Debes guardar la imagen con un nombre distinto. Escribe swimgirlgold.jpg en el campo

“Nombre del archivo”.
Haz clic en “Guardar”. La imagen se guarda como “swimgirlgold.jpg”.
Ahora debes abrir la imagen que acabas de guardar y la colocarás en la imagen

“twocolorbkgd.psd”. Selecciona el menú Archivo Æ Abrir (Método abreviado: CTRL O).
Selecciona el archivo “swimgirlgold.jpg” de la lista.
Haz clic en “Abrir”. La imagen se abre. El espacio transparente de la imagen se reemplaza con
el color dorado.
Haz clic en la herramienta Mover en la caja de herramientas (Método abreviado: V).
Arrastra la imagen hasta el área dorada hacia la izquierda de uno de los espacios blancos
de la imagen “twocolorbkgd.psd”. La imagen se mezcla suavemente en el área dorada.
Ahora puedes cerrar la ventana “swimgirlgold.jpg”. Haz clic en la barra de título de la

ventana “swimgirlgold.jpg” (la que tiene el espacio dorado alrededor de la niña, no
“swimgirl.psd”, que contiene la transparencia).
Haz clic en el botón cerrar de la ventana “swimgirlgold.jpg”.
Transparencia Simple
Ahora crearás transparencia con el formato GIF.
Actividad 2B-6:
Página 47/157
Transparencia en imágenes GIF
Objetivo: Crear una imagen GIF con transparencia simple.
Haz clic en la barra de título de la ventana “swimgirl.psd”.
Selecciona el menú Archivo Æ Guardar para Web (método abreviado: CTRL ALT SHIFT S).
Aparece el diálogo asociado.
Haz clic en la esquina superior derecha de la imagen.
Selecciona “GIF 64 con tramado” de la lista “Ajustes”. Cuando selecciones “GIF” para el
formato, aparecerá una casilla “Transparencia”. Se marca automáticamente cuando seleccionas
cualquiera de los ajustes GIF que vienen en Photoshop. Con la casilla “Transparencia” marcada,
los píxeles transparentes de la imagen permanecerán iguales. No obstante, como el formato GIF
no soporta las áreas semitransparentes, los píxeles semitransparentes en el original se mezclan en
un color mate. Este color es blanco en este momento, de modo que los colores del agua y de la
piscina se mezclan a blanco ante los píxeles totalmente transparentes que aparecen en el borde.
Debes mezclar los bordes con el color dorado como hiciste con la imagen JPEG. Selecciona
“Color de cuentagotas” de la lista “Mate”. Los píxeles semitransparentes de la imagen se
mezclan con el color dorado. Esta imagen funcionará bien cuando se coloque sobre un fondo
dorado.
Antes de guardar la imagen, deberás compararla con una sin transparencia. Desmarca la casilla
“Transparencia”. El color dorado aparece alrededor de la imagen. En este caso, el tamaño del
archivo aumentó ligeramente cuando desactivaste la transparencia. Así, si el fondo detrás de la
imagen era de color dorado sólido, puedes utilizar cualquier versión; ambas aparecerán igual y
tendrán aproximadamente el mismo tamaño de archivo.
Debes activar de nuevo la transparencia para que puedas ver el efecto que crea Photoshop en la
imagen GIF real. Marca la casilla “Transparencia”.
Antes de guardar las imágenes, puedes previsualizar como se mostrarán en el explorador que
elijas. Para hacerlo, Photoshop guarda una versión temporal de la imagen así como también un
archivo temporal de HTML, inicia el explorador
Si la memoria lo permite, se abrirá la aplicación del explorador y la imagen de la niña aparecerá.

En este caso, se le asigna a la página un color de fondo para combinar el color mate y puedas ver
cómo se mezcla en el color. La tabla de información detrás de la imagen muestra detalles sobre
el formato, dimensiones, tamaño de archivo y ajustes, así como también el código HTML que
puedes copiar y pegar en otro archivo HTML para mostrar la imagen en otro sitio Web.
Página 48/157
Debes regresar a Photoshop para guardar la imagen. Selecciona el menú Archivo Æ Cerrar
(Método abreviado: CTRL W). La aplicación se cierra y regresas a Photoshop.
Puedes guardar la imagen ahora. Haz clic en “OK”. Aparece el diálogo Guardar optimizada
como.
Debes guardar la imagen con el nombre predeterminado. Navega hasta la carpeta “Photoshop
6.0 Web Data”, si es necesario y haz clic en “Guardar”. La imagen se guarda como
“swimgirl.gif”.
Debes abrir ahora la imagen que acabas de guardar y colocarla en la imagen “twocolorbkgd.psd”
de la misma forma. Haz clic en el menú Archivo Æ Abrir (Método abreviado: CTLR O).
Selecciona el archivo “swimgirl.gif” de la lista.
Haz clic en “Abrir”. La imagen se abre. Aunque aparece espacio transparente en la misma, el
espacio es en realidad un color en la tabla de colores de dicha imagen que se especifica como
reemplazo de la transparencia. Puedes determinar cuál color será el que reemplace la
transparencia viendo la tabla de colores de la imagen.
Haz clic en el menú Imagen y mueve el cursor sobre el submenú Modo. Las imágenes GIF se
guardan en modo Color indexado en vez del modo RGB (como la imagen original), por eso
utiliza una tabla de color.
Haz clic en “Tabla de color” del modo submenú. Aparece el diálogo Tabla de color.
Página 49/157
Una forma de reducir el tamaño de archivo es limitar el número de colores. El modo Color
indexado cambia una imagen en 256 colores distintos y utiliza tramado para simular los colores
que no se incluyan. Como la imagen utiliza menos colores (256 vs. millones de colores), el
tamaño del archivo será menor, a pesar de que es posible que haya tramado. La imagen sólo
puede guardarse como archivo GIF o PNG. En general, el comando Guardar para Web es el
mejor para la optimización. La razón principal es que puedes convertir la imagen manualmente
a Color indexado, guardando o cargando paletas de colores que desees utilizar para varias
imágenes. Puedes realizar esta opción seleccionando el menú Imagen Æ Modo Æ Tabla de
colores, una vez que la imagen esté en color indexado. Para cambiar una imagen a modo de
Color indexado, selecciona Archivo Æ Modo Æ Color indexado.
El último color de la tabla se muestra con cuadros, que representa la transparencia. Sin embargo,
puedes ver el color que se almacena en realidad con el archivo que funciona como si fuese
transparente. Haz clic en el último color de la última fila de colores (el que representa
transparencia).
Aparece el diálogo Selector de colores. El color dorado que seleccionaste para el color mate es el
que está almacenado en el archivo de la imagen, aunque funciona como espacio transparente. Si
haces clic ahora en “OK”, el color aparecerá en la imagen en vez de la transparencia. Haz clic en
“Cancelar”.
Regresas al diálogo Tabla de color. No debes cambiar la tabla de color para esta imagen. Haz
clic en “Cancelar”.
Página 50/157
Para que puedas arrastrar una imagen a otra, Photoshop requiere que los modos de color sean
iguales. Como se trata del modo Color indexado, no puedes arrastrarla al color RGB de la
imagen “twocolorbkgd.psd”. Sin embargo, puedes convertirla a color RGB y luego arrastrarla.
Selecciona el menú Imagen Æ Modo Æ Color RGB.
Arrastra la imagen al área dorada en la parte inferior izquierda de la imagen

“twocolorbkgd.psd”. La imagen se mezcla perfectamente con la zona dorada.
Sin embargo, no se mezclará bien con otros colores. Arrastra la imagen al espacio en blanco
en la esquina inferior. Los bordes dorados resaltan con el fondo blanco. Por ello, aunque la
transparencia funciona estrictamente (el espacio alrededor del óvalo es transparente), la imagen
sólo puede utilizarse con el color de fondo correcto o uno similar al color mate.
Si debes crear transparencia en una imagen GIF para utilizarla sobre varios colores, puedes
eliminar el color mate que creará un borde duro. Debes crear una imagen GIF más con
transparencia para probar esto. Primero, debes cerrar la imagen con el color dorado mate. Haz
clic en la ventana “swimgirl.gif” (no en “swimgirl.psd”).
Haz clic en el botón cerrar de la ventana “swimgirl.gif”.
Photoshop te pregunta si deseas guardar los cambios. Haz clic en “No”.
Ahora debes crear una imagen GIF con el color mate especificado como “Ninguno”. Haz clic en
la barra de título de la ventana “swimgirl.psd”.
Haz clic en Archivo Æ Guardar para Web (Método abreviado: CTRL ALT SHIFT S).
Aparece el diálogo Guardar para Web.
Haz clic en la imagen de la esquina superior derecha.
Puedes guardar un conjunto de ajustes de Optimización de ImageReady en un droplet y luego

aplicando los ajustes a las porciones de imágenes arrastrándolas hacia el icono de droplet, el
cual realizará después la optimización en ImageReady. El icono droplet aparece en el escritorio
para que puedas encontrarlo fácilmente y abrir ImageReady en caso de que no esté abierto
hasta el momento. Puedes crear un droplet a partir de una serie de acciones o puedes elegir de
una lista de acciones. Debes especificar una carpeta destino de las imágenes que debes crear en
el menú Destino. Para crear un droplet, selecciona la opción “Crear droplet” en la lista de la
paleta Optimizar.
Selecciona “Ninguno” de la lista “Mate”. La imagen aparece ahora con un borde duro. Cuando
utilizas un color mate para “Ninguno”, Photoshop hace que cualquier píxel que tenía una
transparencia de más de 50%, sea completamente transparente. No intenta mezclar píxeles
semitransparentes en otro color, por eso los bordes aparecen duros.
Página 51/157
Ya puedes guardar la imagen. Haz clic en “OK”. Aparece el diálogo Guardar optimizada como.
Debes cambiar el nombre de la imagen. Escribe swinmgirlnomatte.gif en el campo “Nombre”.
Haz clic en “Guardar”. La imagen se guarda como “swimgirlnomatte.gif”.
Ahora debes abrir la imagen que guardaste y la colocarás en la imagen “twocolorbkgd.psd”.

Selecciona el archivo “swimgirlnomatte.gif” de la lista de archivos.
Haz clic en “Abrir”. La imagen se abre.
Al igual que antes, necesitas convertir la imagen a modo de color RGB para poder arrastrarla en
la imagen “twocolorbkgd.psd”. Selecciona el menú Imagen Æ Modo Æ Color RGB.
Arrastra la imagen para que el borde derecho se extienda hasta el espacio en blanco de la
parte inferior de la imagen “twocolorbkgd.psd”. Esta versión de la imagen funcionará con
varios colores, porque Photoshop no trata de mezclar los bordes con ningún color de fondo. El
inconveniente de este enfoque es que la imagen tiene los bordes duros, en vez de calado o
suavizado.
La imagen calada que probaste con esta imagen demuestra los límites de la transparencia de un
nivel en GIF. Muchas imágenes que debas crear con transparencia tienen bordes distintos. Por
ejemplo, las imágenes que se crean a partir de texto con estilo y botones pequeños normalmente
no poseen bordes suavizados, que quiere decir que los píxeles del borde son semitransparentes
para que la imagen (o texto) se mezcla con el fondo. En estos casos, si la transparencia es
necesaria, podrías seleccionar un color mate para que combine con el fondo lo más posible y así
obtener una apariencia más uniforme. Si seleccionas “Ninguno” para el color mate, se crearán
bordes más irregulares. Guarda y cierra la imagen “twocolorbkgd”.
Cierra las imágenes restantes sin guardar los cambios. A partir de este experimento, puedes
generalizar lo siguiente:
Si una imagen estará situada sobre un área de color sólido, no necesita transparencia; puedes
utilizar un color mate con cualquiera de los formatos GIF o JPEG.
Las imágenes GIF son un poco más pequeñas con la transparencia que con un color mate, en el
lugar de la transparencia. Esto es útil so guardas texto formateado como imágenes para reducir el
tamaño del archivo lo más posible.
Es más difícil crear transparencia de forma efectiva en los bordes calados que el los bordes más
delimitados.
Página 52/157
Para la mayoría de las imágenes, es mejor seleccionar un color mate para mezclar la
transparencia porque se lograrán los bordes más uniformes.
Resumen
En esta lección aprendiste las fortalezas y debilidades de los tres principales formatos Web.
Aprendiste que en general, las imágenes fotográficas se guardan mejor en formato JPEG,
mientras que para los gráficos con colores planos e imágenes con transparencia resulta mejor el
formato GIF. También estudiaste el mejor formato para las imágenes con gradientes y aprendiste
a simular transparencias con colores mates para el fondo de una imagen.
2A ¿Por qué debes evitar abrir un archivo JPEG y guardarlo de nuevo en JPEG
después de editarlo?
Nombra dos razones por las cuales el formato PNG es mejor que los formatos GIF o JPEG
2B ¿Por qué el formato JPEG es mejor que el formato GIF para la mayoría de las
fotografías?
¿Por qué es mejor utilizar el formato GIF en vez del JPEG para la mayoría de las imágenes
con colores planos?
Página 53/157
Lección 3
Preparar para visualización en distintas plataformas
Introducción
El World Wide Web representa un gran reto al momento de preparar imágenes, ya que se tiene
muy poco control sobre el ambiente en que se visualizarán dichas imágenes. En esta lección,
aprenderás a calibrar la forma en que se muestra el color en tu sistema para crear imágenes Web
de forma confiable. También aprenderás sobre las diferencias de las principales plataformas de
computación (Windows y Macintosh) y cómo lograr un balance para crear imágenes atractivas
para ambos sistemas. También prepararás imágenes para usuarios de computadoras que sólo
posean 256 colores.
Objetivos
Para que puedas crear imágenes atractivas para la mayor cantidad posible de usuarios, debes:
3A Aplicar la gestión de color de Photoshop.
Debes calibrar el monitor para que no se muestre ni muy oscuro, ni muy claro o fuera del balance
de colores. Debes establecer las preferencias de Photoshop para guardar archivos Web y así
facilitar tu trabajo.
3B Ajustar las imágenes para que se muestren lo mejor posible tanto en sistemas
Windows como Macintosh.
Utilizarás las vistas previas para simular la forma en que los colores que aparecerán en
ambas plataformas. También ajustarás el brillo de las imágenes de forma uniforme.
3C Manejar el tramado en las imágenes.
Debes distinguir entre el tramado de una aplicación y del explorador. Aprenderás como
este elemento puede degradar o mejorar las imágenes. También verás diversas formas de cambiar
y crear colores para evitar el tramado desagradable cuando una imagen sólo se muestre en 256
colores.
Archivos de datos
Healthexpert.psd
Expgraph1.psd
Kidatdoc.psd
Hypodermic.ai
Página 54/157
Vtbanner.psd
Vtlogo.psd
Bikeguy.psd

90 minutos
Página 55/157
Tema 3A
Gestión del color para Web
Crear imágenes para su uso en Internet es bastante difícil, porque se verán en diversas
computadoras, con distintos ambientes. Todos los monitores muestran las imágenes en formas
distintas, mientras que las principales plataformas de computación (Windows y Macintosh)
tienen características de pantalla bastante diferentes. En esta sección aprenderás sobre el sistema
de manejo del color de Photoshop (CMS, por su nombre en inglés) que te podrá ayudar a lograr
imágenes que se vean lo mejor posible en todas las plataformas.
Sobre la gestión del color
Los sistemas de la gestión de color tratan de ajustar las diferencias del color de salida entre
dispositivos, asegurando que los colores que crees en uno se vean correctos en otros. Por
ejemplo, un típico uso de la gestión de color tratará de combinar los colores de la forma más
precisa posible entre un monitor y una impresora. Otra forma es lograr una imagen que se vea
similar en distintos monitores con diversas características.
La implementación completa del manejo del color requiere que cada dispositivo utilizado para
ver los colores esté calibrado y perfilado. La calibración es el proceso mediante el cual se ajusta
un dispositivo para que muestre las imágenes con un brillo específico, en vez de ajustar los
controles según sea necesario.
Calibración:
El proceso de ajustar las propiedades del color de un dispositivo a un estándar específico. Por
ejemplo, puedes calibrar un monitor a un valor gamma estándar, para asegurar que muestre
imágenes con el tono medio de brillo correcto.
Perfilar es el proceso mediante el cual se escriben los resultados de la calibración (el “espacio de
color” que representa las características del color del dispositivo) a un archivo. La información
del espacio del color en el archivo puede ser leída por cualquier software que emplee manejo del
color (por ejemplo, Photoshop).
Cuando todos los dispositivos se calibran y perfilan, el software de manejo del color puede
ajustar los colores de forma acorde. Por ejemplo, si perfilas el monitor, el sistema de la gestión
de color de Photoshop puede leer el perfil y guardar en cambio, la información del espacio del
color con los archivos de imágenes. Cuando la imagen pasa por diversos dispositivos (por
ejemplo, una impresora o cualquier computadora o monitor), el software de manejo del color
puede leer el perfil de la imagen que describe el espacio del color en la computadora y puede así,
“convertir” los colores para que el otro dispositivo los muestre lo más parecido posible a como
aparecen en el monitor.
Página 56/157
Espacio del color:

Las características que rigen la forma en que un dispositivo muestra los colores. Los parámetros
en el espacio del color determinan la apariencia de un color creado con valores específicos de
un componente (por ejemplo, el matiz de rojo que aparecerá cuando el color 180 Rojo, 30
Verde, 40 Azul se seleccione).
Perfilar:
El proceso de grabar información sobre el espacio de color de un dispositivo en un archivo.
Difiere de la calibración en que sólo almacena información sobre el espacio del color, no trata
de concordar un estándar específico.
Gestión del color y la Web
Mientras el manejo del color puede ser muy útil en ambientes controlados (por ejemplo, una
oficina con varias computadoras e impresoras), resulta imposible aplicarlo completamente a las
imágenes que se utilizarán en la Web por dos razones. En primer lugar, los monitores de los
usuarios generalmente no están calibrados o perfilados. En segundo lugar, aunque lo estuvieran,
la mayoría del software de navegación no contiene características de la gestión de color que
ajusten las imágenes para que se muestren igual a como se crearon. El único navegador que
puede leer perfiles de imágenes para ajustar como se mostrarán es Microsoft Internet Explorer
(versiones 4.01 y superiores) para Macintosh.
Sin embargo, hay cierto beneficio para aplicar algunos de los principios de manejo del color para
crear imágenes Web. Primero, debes calibrar y perfilar el monitor, de lo contrario, podrías
visualizar un monitor muy distinto al de la mayoría de los usuarios. La calibración ajusta el
monitor a un estándar, así que, entre otras cosas, no será mucho más brillante u opaco de lo que
debería ser.
En segundo lugar, si en el proceso de crear imágenes Web, abres imágenes guardadas por otras
personas que emplean correctamente el manejo del color, Photoshop te avisará que la imagen se
creó en un espacio diferente de color. Puedes seleccionar dos opciones, convertir la imagen para
que concuerde exactamente con la imagen original, o dejar los valores del color intactos. Esta
decisión es particularmente importante, en caso de que desees mantener la paleta de colores de
una imagen tal y como fue concebida (aprenderás más sobre este tema más adelante).
Puedes utilizar el Asistente para Manejo de color Gamma de Adobe para guiarte a lo largo del
proceso de calibración del monitor y configurar las opciones de manejo del color. También
puedes cambiar el espacio del color en Photoshop de forma separada editando la Configuración
del color.
Gamma:
Página 57/157
El brillo de una imagen o monitor a través de los tonos medios. El valor gamma representa cuan
oscuros se reproducirán los tonos medios, con relación al original. Mientras mayor sea el valor,
más oscuros serán los tonos medios.
Guía:
Una línea vertical u horizontal que no se imprime que puedes agregar a la imagen. Cuando
arrastras una imagen (normalmente una capa) cerca de una guía, la guía “magnetiza” el borde
del centro en sí, permitiéndote cambiar la posición de la imagen de forma más precisa.
Actividad 3A-1:
Aplicar la gestión del color
Objetivo: Calibrar el monitor y seleccionar la configuración de la gestión de color en

Photoshop que mejor se adapten a la creación de imágenes Web.
Preparación: Al comenzar esta lección, Photoshop debe estar activo. Si estás comenzando el
curso en esta lección y no has completado todavía las anteriores, sigue las indicaciones de
“Utilizar los datos” en la sección “Sobre este curso” al comienzo del manual.
El primer paso para aplicar el manejo del color es calibrar y perfilar el monitor. Debes utilizar
Adobe Gamma, que te permitirá acceder al panel de Control de Windows, para calibrar y perfilar
el monitor, porque afecta la computadora a nivel del sistema operativo. Se activará cuando la
computadora se inicie y afectará a todas las aplicaciones, no sólo para Photoshop. Haz clic en el
botón Inicio de Windows y selecciona el menú Configuración Æ Panel de control. Aparece
la ventana del Panel de control.
Haz doble clic en el icono “Adobe Gamma”. Se abre el panel de control Adobe Gamma.
Puedes utilizar un asistente o un solo diálogo para calibrar el monitor y guardar un perfil ICC.
Haz clic en el botón Paso a paso (Asistente).
Haz clic en “Siguiente”.
Aparece el primer paso de la calibración. Debes nombrar el perfil que deseas crear. El nombre
que escribas aquí aparecerá en los menús de las aplicaciones como Photoshop que permiten
seleccionar perfiles ICC. Al final de los pasos del Asistente para Adobe Gamma, debes escribir
un nombre, aunque no se mostrará en los menús, el que escribas ahora sí lo hará. Escribe
Monitor de [Tu nombre] en el campo “Descripción”.
Página 58/157
Primero debes lograr un brillo y contraste lo más correcto posible. Por ejemplo, si el monitor no
está ajustado correctamente, será imposible distinguir las diferencias entre el negro y gris oscuro
en una imagen. Ajusta el brillo y contraste como se indica en el diálogo (utiliza los controles
en el monitor).
Ahora puedes indicar qué fósforos utiliza tu monitor. Aunque pueden variar según el monitor, no
hará una gran diferencia si no colocas correctamente este parámetro; utiliza la configuración
predeterminada si no conoces este valor. Si conoces el valor de fósforos que tu monitor usa,
selecciónalo de la lista.
Haz clic en “Siguiente”. Aparece el paso Configuración gamma. Este es el que tendrá el efecto
más obvio en el monitor, porque configura el tono medio del brillo. Como se mencionó
anteriormente, Windows y Macintosh muestran las imágenes con brillos distintos.
Primero debes ver que el predeterminado de Macintosh es más brillante que el de Windows.
Selecciona “Predeterminado de Macintosh” de la lista “Gamma”, si aparece debajo del
regulador gamma.
Muchas tarjetas de video de Windows no pueden calibrarse en un valor gamma específico, de

modo que es posible que la lista no aparezca. Si esto te ocurre, la tarjeta de video enviará la señal
de la computadora directamente al monitor sin ajuste de gamma. La mayoría de los monitores
tienen un ajuste gamma de 2.2, un valor distinto al “Predeterminado de Windows”, cuando la
lista “Gamma” está disponible. Incluso si no puedes establecer el gamma destino, puedes
ajustarlo con el regulador para calibrar el predeterminado de 2.2. Si la lista “Gamma” no
aparece en el diálogo, pasa al siguiente paso y continua con lo siguiente.
Si pudieras cambiar el gamma destino, verás que el valor pasa a 1.8 y la pantalla se aclara.
Aunque este cambio logrará que las imágenes aparezcan de forma más o menos similar a cuando
se imprimen, causa un impacto en todas las aplicaciones, lo cual no es recomendable. Debes
retornar al valor gama de 2.2 para editar las imágenes Web. Selecciona la opción
“Predeterminada de Windows” de la lista desplegable “Gamma”.
El valor gamma regresa a 2.2. Sin embargo, el monitor en particular puede ser más brillante u
oscuro que el gamma de 2.2. Debes ajustar el regulador para estimar visualmente que el brillo es
correcto. Cuando comparas una casilla rellena de píxeles grises a un patrón de negro puro y
rayas blancas, puedes estar seguro que el monitor está cerca del gamma destino, porque el patrón
aparecerá más gris a cierta distancia. En caso de que sea posible, retrocede a una distancia
entre tus ojos y el monitor de un metro aproximadamente.
Marca la casilla “View Single Gamma Only”, en caso de que no lo esté.
Página 59/157
Motivo:
Un área rectangular que defines en Photoshop que puedes utilizar para rellenar un área grande.
Cuando utilizas un motivo, se rellena el área con el patrón, es decir, lo repite a lo largo y ancho
del área para llenarla completamente.
Arrastra el regulador gamma hasta que la casilla gris del centro tenga el mismo brillo que
el patrón de rayas que lo rodea. Te puede ayudar no ver directamente el patrón. El brillo del
tono medio concuerda aproximadamente con el estándar de 2.2.
Si crees que el balance entre los fósforos rojos, verdes y azules no está equilibrado en el
monitor, desmarca la casilla “View Single Gamma Only” y ajusta los tres reguladores
como se indica.
Ahora debes ajustar el punto blanco del monitor, el cual determina el color de los reflejos de las
imágenes. Si conoces el punto blanco de tu monitor, selecciónalo de la lista “Hardware
White Point”.
En caso contrario, haz clic en “Measure” y sigue las indicaciones en pantalla para estimar
visualmente el punto blanco.
Puedes sobreponer el punto blanco del monitor. Por ejemplo, si está en 9300º K, las áreas
blancas se verán rojizas. Si deseas verlas más neutras y que concuerden con un monitor normal,
puedes ajustar el punto blanco a 6500º K. Sin embargo, esto disminuirá el desempeño de uno o
dos fósforos que equilibran el color, haciendo los reflejos menos brillantes. Debes mantener el
punto blanco del monitor en el predeterminado, ya que el espacio del color que selecciones en
Photoshop ajusta este punto para editar las imágenes. En caso necesario, selecciona “Same as
Hardware” de la lista “Adjusted White Point”.
Ya terminaste de calibrar el monitor (ajuste de brillo y color). Haz clic en los botones “Before”
y “After” (Antes y Después) para ver el efecto de las opciones que selecciones.
Haz clic en el botón “After” de último.
Haz clic en “Finish” (Finalizar). Aparece el diálogo Save as (Guardar como), que te preguntará
si deseas guardar la información sobre el espacio del color del monitor en un perfil ICC.
Después, Photoshop podrá leer este perfil para saber el espacio de color del monitor y como
compensarlo de forma adecuada.
Página 60/157
Puedes escribir el nombre del perfil. Escribe Perfil de [Tu nombre].icm en el campo “File
Name” (Nombre del archivo). Aunque pueden haber varios perfiles almacenados en la
computadora (incluyendo otros para dispositivos como impresoras), éste se designará como el
predeterminado del monitor.
Las computadoras en ambiente Windows utilizan un sistema de nivel llamado ICM que ayuda en
el manejo del color. El ICM lee y escribe los perfiles ICC y puede utilizarse en cualquier
aplicación para ajustar y ver los colores. Cuando utilices el panel de control Adobe Gamma para
configurar el perfil predeterminado del monitor, estás configurando el perfil del sistema ICM.
Haz clic en “Save” (Guardar). Se crea el perfil ICC.
Debes cerrar la ventana del Panel de control. Haz clic en el botón Cerrar de la ventana del
Panel de control. Regresas a Photoshop.
Photoshop interpreta el manejo ICC del color que guardaste para el monitor. Adicionalmente,
pueden fijarse perfiles en las imágenes y puede leer perfiles fijados en las imágenes para
mostrarlos tal y como se concibieron. Debes examinar la configuración que rige la gestión de
colores en Photoshop. Selecciona el menú Edición Æ Configuración del color (Método
abreviado en el teclado: CTRL SHIFT K). Aparece el diálogo Configuración del color.
Existen varias configuraciones diseñadas según el uso, para imprentas en los Estados Unidos y
otros países. Como este curso se centra en los gráficos Web, debes utilizar la configuración
“Gráficos Web por defecto”. En caso necesario, selecciona “Gráficos Web por defecto” de la
lista “Configuración”.
La sección “Espacios de trabajo” te permite configurar Photoshop para que muestre las imágenes
de forma distinta a como lo haría normalmente el monitor. En otras palabras, puede mostrar las
imágenes en un espacio de color distinto que el del monitor. La configuración del diálogo
Configuración del color selecciona de forma automática el espacio del color “sRGB” para
“RGB” en Photoshop. Se simula la pantalla de una computadora Windows en un monitor
normalmente inexpresivo. Esto es probablemente similar al perfil del monitor que creaste,
aunque puede tener ciertas diferencias, de modo que la imagen aparecerá un poco distinta en
Photoshop a como lo haría en otras aplicaciones (por ejemplo, el explorador Web). La idea es
que a pesar de que la imagen no aparezca correcta en el explorador, debe verse bien en la
mayoría de los exploradores de los usuarios, porque sus monitores coinciden con el perfil sRGB.
La lista “Gris” indica que el gamma para las imágenes en escala de grises es de 2.2, que
concuerda con el gamma del espacio del color de sRGB y refleja de forma más cercana la forma
en que la mayoría de los monitores Windows muestran las escalas de grises. El resto de las
configuraciones de “Espacio de trabajo” para CMYK y Spot no son aplicables a gráficos Web,
de modo que no son relevantes para este curso.
Página 61/157
La sección Políticas de la gestión de color indican como Photoshop maneja las imágenes creadas
en un espacio distinto de color. Normalmente, el manejo del color recae en perfiles ICC
incrustados en imágenes para ajustar la forma en que se muestra el color cuando se ve en otros
dispositivos. Por ejemplo, si creas una imagen en una computadora Windows en un espacio de
color con un gamma de 2.2 y otra persona la ve en una computadora Macintosh con un gamma
de 1.8 (más brillante), la copia que tenga de Photoshop automáticamente oscurecerá la imagen
para que se vea tal y como se creó – en caso de que el archivo incluya un perfil ICC. Si no lo
incluye, la computadora Macintosh no podrá determinar la fuente de la imagen y en
consecuencia, será imposible ajustar el brillo.
La casilla “Preguntar al abrir” a la derecha de “Profile Mismatches” está marcada, que indica que
Photoshop iniciará un diálogo cuando abras un archivo que incluya un perfil ICC distinto al
espacio de color de Photoshop. El campo “RGB” dicta la configuración predeterminada para ese
diálogo. Con la opción “Web Graphics Defaults” de la lista “Configuración”, “RGB” está en
“Off”, indicando que Photoshop mantendrá los valores de color exactos en la imagen original
(aunque la apariencia puede variar un poco). La configuración de “Preserve Embedded Profiles”
no alterará los valores de los colores de la imagen sino que mantendrá el perfil incrustado de la
imagen y se mostrará en el espacio de color incrustado en vez de trabajar con el espacio
seleccionado en el diálogo. La configuración de “Convert to Working RGB” cambiará los
valores de color de la imagen en un espacio de color distinto. En general, “Off” es una buena
configuración para las imágenes Web, porque muchas veces es más importante utilizar ciertos
valores para colores específicos con el fin de obtener la mejor disposición en todas las
computadoras.
Adicionalmente, con la configuración “RGB” en “Off”, Photoshop no incrustará los perfiles ICC
en las nuevas imágenes que crees. Como aprendiste en la lección “Optimizar imágenes”, los
perfiles incrustados ICC aumentan el tamaño del archivo. Y, a pesar de que Photoshop puede
leer estos perfiles y ajustar la imagen de forma acorde, la mayoría de los exploradores Web no lo
pueden hacer. Por eso, cuando elijas la configuración “Web Graphics Defaults” en el diálogo
Color Settings, se configura Photoshop para que no incruste perfiles ICC en imágenes RGB y
Escala de grises (los dos espacios de color usados para imágenes Web).
Página 62/157
Debes mantener la configuración original de Configuración del color. Haz clic en “Aceptar”. Se
cierra el diálogo Configuración del color. El siguiente tema trata sobre la visualización de
imágenes para cada plataforma de manera más detallada.
Tema 3B
Compensar las diferencias entre las distintas plataformas
Es importante que sepas como aparecerán las imágenes que elabores en las computadoras de
otras personas. Como mencionaste anteriormente, es imposible simular como se mostrarán las
imágenes en todos los sistemas de forma acertada, pero es posible visualizar varias categorías.
En este tema, verás las imágenes tal y como aparecerían a los usuarios de cada plataforma
principal y ajustarlas correctamente.
Las imágenes en plataforma de Windows se muestran más oscuras que en la plataforma

Macintosh, debido las diferencias en los circuitos de la tarjeta de video y en el software. Hasta
que los navegadores empleen la gestión del color por defecto, no podrás crear una imagen que se
muestre perfectamente en ambas plataformas; lo mejor que puedes hacer es tratar de hacer que se
muestren lo mejor posible en los dos tipos de plataforma. Un buen balance puede ser una imagen
que se muestre ligeramente oscura en las computadoras Windows y ligeramente más clara en las
computadoras Macintosh.
En el tema anterior, ajustaste Photoshop para que mostrara las imágenes tal como aparecerían a
un usuario típico de Windows (sin importar en qué plataforma te encuentres). Por ello, si ajustas
el color de una imagen en Photoshop hasta que luzca perfecta para ti, puede aparecer muy
Página 63/157
brillante en los usuarios Macintosh cuando la vean en una página Web. Afortunadamente, tanto
Photoshop como ImageReady pueden simular las dos plataformas, para que puedas ajustar las
imágenes con el fin de lograr un balance razonable.
Actividad 3B-1:
Vista previa y ajuste de imágenes para mostrarlas en las dos plataformas
Objetivo: Ver las imágenes tal y como aparecerían en ambas plataformas y ajustarlas para
que se muestren lo mejor posible en los dos sistemas.
Debes abrir de nuevo “healthexpert.psd” para examinar su visualización en ambas plataformas.

Navega en la carpeta “Phtoshop 6.0 Web Data” y selecciona el archivo “healthexpert.psd”

(no selecciones “healthexpert.jpg”) de la lista.
Haz clic en “Abrir”. Se abre la imagen.
La configuración actual de Photoshop, que utiliza el espacio de color sRGB con un gamma de
2.2, permite reproducir las imágenes de forma similar a como se mostrarían en plataforma
Windows. Sin embargo, puedes ver la imagen como se vería en plataforma Macintosh.
Selecciona el menú Vista Æ Ajuste de prueba Æ RGB para Macintosh. La imagen se aclara
considerablemente.
La imagen resulta demasiado clara. Para evitar este problema, puedes utilizar la vista previa en
ambas plataformas cuando realices ajustes de imagen. Utilizarás una capa de Ajustes de nivel
para oscurecer la imagen y que no se vea tan pálida para los usuarios Macintosh. Selecciona el
menú Capas Æ Nueva capa de ajuste Æ Niveles. Aparece el diálogo Nueva capa.
Haz clic en “Aceptar”. Aparece el diálogo Niveles.
Debes arrastrar el tono medio hacia la derecha para oscurecer la imagen. Arrastra el triángulo
hacia la derecha hasta que se muestre “0.86” en el campo “Niveles de entrada”. Aunque la
imagen sigue bastante clara, resulta aceptable.
Página 64/157
Ahora debes visualizar la imagen en plataforma Windows antes de terminar el ajuste. Puedes
cambiar la vista previa sin salir del diálogo Niveles. Selecciona el menú Vista Æ Colores de
prueba (Método abreviado: CTRL Y). La opción Colores de prueba activa la visibilidad entre la
vista de prueba del diseñador y la vista predeterminada. En este caso, como la vista previa en
Macintosh estaba activa, se desactivó cuando presionaste la opción Colores de prueba y
regresaste al espacio de trabajo predeterminado, es decir, sRGB, que se aproxima a un monitor
Windows. La imagen se muestra ahora un poco más oscura, pero sigue siendo aceptable.
Deja que tus alumnos cambien entre las previsualizaciones para Macintosh y Windows
repetidamente presionando el método abreviado CTRL Y.
Creaste un ajuste que luce razonablemente bien en ambas plataformas. Haz clic en “Aceptar”.
Puedes verificar que la vista previa de Photoshop sea similar a la de Windows, tan solo
seleccionándola. Selecciona el menú Vista Æ Ajuste de prueba Æ RGB para Windows. La
imagen no cambia, indicando que el espacio de color sRGB es igual al de una computadora
Windows.
Igualmente, como calibraste el monitor en el gamma estándar de Windows, la vista previa de

Photoshop “Monitor RGB” (representa el espacio de color original del monitor) será muy similar
a la vista previa “Windows RGB”. Selecciona el menú Ver Æ Ajustes de prueba Monitor
RGB. La imagen que se muestra no cambia mucho (puede cambiar ligeramente según las
diferencias entre los fósforos del monitor y los fósforos “estándar” de Windows).
Si seleccionas Monitor RGB del submenú Ajustes de prueba en el menú Vista, te mostrará una
versión sin compensar de la imagen (o sin “gestión del color”). Algunos programas, como
Microsoft Power Point, no emplean gestión del color, de modo que una versión sin compensar
de la vista monitor RGB ofrece una previsualización acertada de la imagen tal como aparecería
en estos programas cuando se abra en pantalla. Sin embargo, si preparas archivos para
Página 65/157
mostrarlos en otra computadora, debes utilizar el espacio de color sRGB, porque es el más
cercano a un monitor “genérico”. Para utilizar la previsualización de Monitor RGB, selecciona
el menú Vista Æ Ajustes de prueba Æ Monitor RGB.
Debes desactivar todas las vistas previas antes de regresar a la de Photoshop. Selecciona el
menú Vista Æ Colores de prueba. La imagen permanece igual, porque la vista estándar de
Photoshop, Monitor RGB, y la de Windows son muy similares entre sí.
Debes guardar los cambios realizados a la imagen. Selecciona el menú Archivo Æ Guardar
(Método abreviado: CTRL S).
A diferencia de Photoshop, ImageReady muestra las imágenes de forma predeterminada sin

ninguna compensación. Haz clic en el botón Ir a ImageReady en la parte inferior de la caja
de herramientas. La imagen que se muestra puede cambiar un poco, aunque luce similar a la
versión Photoshop.
También puedes ver la imagen para cualquier plataforma en ImageReady. Selecciona el menú
Vista Æ Previsualizar Æ Color Windows estándar. La imagen que se muestra puede variar un
poco pero luce como la versión Photoshop.
Como ajustaste el brillo de esta imagen, ahora verás una nueva versión JPEG optimizada para
reemplazar la que creaste anteriormente. Esta vez, debes cambiar el tamaño y enfocarás la
imagen después, para mejorar la calidad en vez de redimensionarla al igual que lo hiciste en el
diálogo Guardar para web en Photoshop. Una vez más, la mayoría de las funciones de Photoshop
se duplican en ImageReady. Selecciona el menú Imagen Æ Tamaño de imagen. Aparece de
nuevo el diálogo Tamaño de imagen de ImageReady.
El diálogo Tamaño de imagen de ImageReady es muy similar al de Photoshop, pero incluye

algunas diferencias. Como se orienta a las imágenes Web, sólo utiliza píxeles, no píxeles por
pulgada (ppp) para las unidades.
Ahora escribirás el ancho de la imagen tal y como lo haces en Photoshop. Escribe 75 en el

campo “Ancho”.
Página 66/157
Haz clic en “OK”. La imagen se reduce.
Debes aplicar el filtro Máscara de enfoque a la capa de la imagen (no la puedes aplicar a una
capa de ajuste). Haz clic en la capa “Health Expert” en la paleta Capas.
Selecciona el menú Filtro Æ Enfocar Æ Máscara de enfoque. Aparece el diálogo Máscara de

enfoque.
Debes utilizar una gran cantidad de enfoque, pero con un radio bajo para evitar crear un borde
grande de píxeles brillantes o “halo” alrededor de la cara del señor. Arrastra el regulador
“Cantidad” hasta llegar a 130.
Arrastra el regulador “Radio” hasta llegar a 0,3. El halo alrededor de la cara del señor es
bastante delgada y no se exageran los detalles.
Arrastra el regulador “Umbral” hasta llegar a 0 si es necesario. Cualquier valor en este

campo evitará que la imagen se enfoque, un efecto indeseable para una imagen tan pequeña.
Haz clic en “OK”. Se aplica el filtro y la imagen aparece más clara que antes.
Ahora debes aplicar la misma configuración de optimización anterior. Haz clic en la pestaña
“Optimizado” (Método abreviado: CTRL Y). Visualizas la versión optimizada en este
momento.
Página 67/157
Selecciona en el menú “Ajustes” la opción “JPEG alta” en la paleta Optimizar.
Haz clic en la lista “Calidad” y luego arrastra el regulador hasta llegar a 50.
Desmarca la casilla “Progresivo” en caso de que esté marcada.
Estas son todos los ajustes que harás. Selecciona el menú Archivo Æ Guardar optimizada
(Método abreviado: CTRL ALT S). Aparece el diálogo Guardar optimizada.
Debes guardarla sobre la versión JPEG antes de utilizar el mismo nombre. Haz clic en
“Guardar”.
ImageReady pregunta si deseas reemplazar el archivo anterior. Haz clic en “Reemplazar”.

ImageReady sobrescribe la versión anterior de “healthexpert.jpg”.
Ahora debes guardar la versión más pequeña de la imagen con un nuevo nombre y cerrar todas
las copias. Selecciona el menú Archivo Æ Guardar como (Método abreviado: CTRL SHIFT
S).
Escribe healthexpertsmall.psd en el campo “Nombre del archivo”.
Haz clic en “Guardar”. La versión más pequeña de la imagen se guarda con un nuevo nombre.
Ya puedes cerrar las versiones de la imagen. Haz clic en el botón Cerrar en la ventana
“healthexpertsmall.psd”. Se cierra la imagen.
Haz clic en el botón “Adobe Photoshop” en la barra de tareas.
Haz clic en el botón Cerrar para la ventana “healthexpert.psd”. La imagen se cierra sin
preguntar nada, porque no la actualizaste en Photoshop.
Tema 3C
Manejar el tramado
Cuando una imagen se muestra u optimiza utilizando una paleta con menos colores que los
originales, la computadora puede aplicar tramado, es decir, aplica colores de la paleta para
simular los que no se encuentran. Por ejemplo, si optimizas una imagen fotográfica utilizando
una paleta de 16 colores, muchos colores en la imagen tienen que simularse a través del tramado.
Cuando se utiliza efectivamente, el tramado puede mejorar la apariencia de una imagen. Por
ejemplo, en la lección “Optimizar imágenes”, la imagen fotográfica optimizada con una paleta de
pocos colores lucía mejor cuando estaba tramada que cuando estaba compuesta por áreas sólidas
Página 68/157
de colores (aunque ambas lucían peor que el original que tenía muchos más colores). Igualmente,
el tramado ayuda a prevenir una apariencia de bandas en un gradiente de una imagen GIF con
pocos colores.
Sin embargo, el tramado también puede desmejorar la apariencia de una imagen. Por ejemplo, en
este tema verás como el tramado de colores sólidos en algunas áreas puede ser poco atractivo.
Aprenderás las dos causas de tramado y a controlarlo para obtener imágenes con la mayor
calidad posible.
Tramado de aplicación
Cuando optimizas una imagen utilizando los formatos GIF o PNG-8 y seleccionas una paleta con
menos colores que los que contiene la imagen original, puedes seleccionar el tramado para
simular los colores perdidos. En la lección “Optimizar imágenes” viste que puedes controlar el
tramado de aplicación desactivándolo o ajustando el campo “Tramado”. También puedes
controlar el tipo de motivo del tramado que Photoshop o ImageReady generan para crear la
apariencia más uniforme posible.
El tramado es causado por los ajustes que selecciones en la aplicación que utilizas para
optimizar una imagen. El tramado de aplicación es parte del archivo y se muestra a todos los
usuarios de la Web.
Tramado de navegador
Los navegadores Web también presentan tramado porque muchas computadoras que se utilizan
en la Internet muestran sólo 256 colores (conocido como color de 8 bits).
Aunque casi todas las computadoras fabricadas en los últimos años son capaces de mostrar al
menos miles de colores simultáneamente, muchas sólo muestran colores de 8 bits por algunas de
estas razones:
Muchas computadoras son viejas y no pueden mostrar más de 256 colores.

La tarjeta de video sólo puede mostrar más de 256 colores pero a baja resolución y el usuario
tiene la computadora configurada en alta resolución.
El usuario configuró intencionalmente la pantalla en 256 colores para mejorar el desempeño
porque cuando se muestran millones de colores, la computadora se hace más lenta.
El usuario configuró intencionalmente la pantalla en 256 colores, a pesar de que puede mostrar
más. Por ejemplo, algunas computadoras están configuradas para mostrar 256 colores de forma
predeterminada y el usuario no lo ha modificado.
El explorador por defecto de America Online filtra las imágenes a 256 colores incluso si la
computadora utiliza color de alta densidad (16,7 millones de colores).
Página 69/157
Aunque America Online (AOL) incluye su propio navegador que se utiliza por defecto para
navegar por la red, los usuarios pueden utilizar otros exploradores en “paralelo” con AOL. Los
usuarios pueden conectarse a AOL, iniciar otro explorador y utilizar AOL con su propio ISP.
Sin embargo, no es necesariamente seguro asumir que muchas personas nuevas en la Internet
conozcan esta opción o lo preferible que sea utilizar el explorador limitado de AOL.
Los navegadores de las computadoras con pantallas de 256 colores utilizan una paleta fija de
colores para mostrar la imagen – la paleta de colores disponibles no se adapta a los colores de la
imagen. Por eso, el explorador no puede mostrar a veces de forma correcta todos los colores en
una imagen, incluso si ésta sólo contiene unos cuantos dolores. En estos casos, el explorador
introducirá el tramado.
A diferencia del tramado de aplicación, el tramado de navegador es indeseable por lo general,

porque no lo puedes controlar directamente y puede aplicarse a algunas áreas que deberían
aparecer como colores sólidos.
Tramado de navegador:
El tramado de navegador que ocurre cuando una imagen que contiene una paleta de colores no
aptos para Web se visualiza en un navegador con la configuración de la pantalla en 256 colores.
El tramado de navegador sólo aparece en estas circunstancias, no es una parte permanente del
archivo de imagen en sí.
Para la creación de imágenes Web, es importante reconocer las siguientes diferencias entre el
tramado de explorador y el de aplicación:
Tramado de aplicación Tramado de navegador

Puedes controlar la cantidad o tipo de tramado, No tienes control sobre el uso de las
así como también el número de colores en la paleta paletas de los navegadores o como se
de la imagen, en Photoshop o ImageReady. T traman los colores en las
imágenes.
El tramado de aplicación se aplica permanentemente El tramado de navegador no

es una parte
a una imagen optimizada; se muestra a todos los permanente de la imagen, sólo se
muestra
usuarios. a quienes utilicen una configuración de 256 colores.
El tramado de aplicación mejora --a veces, no A veces, el tramado de navegador

siempre— la apariencia eliminando algunas áreas o empeora la apariencia de la
imagen
utilizando bandas. creando pequeños puntos en las zonas donde deberían haber colores
sólidos.
Página 70/157
Puedes visualizar tanto el tramado de aplicación como el de navegador seleccionando las

opciones de optimización en Photoshop o ImageReady. De hecho, a veces interactúan –una
imagen que tiene tramado de aplicación puede aparecer mucho peor cuando se presenta también
el tramado de navegador. Trabajarás con ambas formas de tramado en este tema.
La paleta Web
La paleta que los navegadores utilizan cuando muestran colores en una pantalla de 256 colores se
conoce como Paleta Web o también como “colores seguros para Web”. Cualquier color en una
imagen que se encuentre en la paleta Web aparecerá sin tramado.
La paleta Web contiene 216 colores que se encuentran en las “paletas del sistema” para
Windows y Macintosh – los colores que utilizan los sistemas operativos cuando entran en modo
256 colores. Cada paleta del sistema tiene 256 colores, pero sólo 216 entre sí. Por eso, si creas
imágenes Web con colores de la paleta Web, no mostrarán tramado cuando se abran en cualquier
plataforma.
Estas paletas de los sistemas mencionados anteriormente fueron diseñadas para representar una
amplia gama de colores utilizando valores espaciados de rojo, verde y azul. En otras palabras,
cualquier color de la paleta Web tiene uno de seis matices de rojo, seis matices de verde y seis de
azul. Esto se correlaciona en valores de brillo 0, 20, 40, 60, 80 y 100% para cada canal. Como
Photoshop representa los colores como niveles que van de 0 a 255, los incrementos de 20% en el
brillo corresponden a incrementos de 51 niveles en Photoshop o valores de 0, 51, 102, 153, 204 y
255, oscuros y claros. El número total de colores, 216, se iguala en 63, por eso es que esta paleta
se conoce como “color cúbico 6 x 6 x 6”.
Por eso, los colores como Rojo 102, Verde 51, Azul 153 (un color morado) y Rojo 204, Verde
255, Azul 0 (un color amarillo) están en la paleta Web, pero Rojo 115, Verde 48, Azul 159 y
Rojo 204, Verde 248, Azul 0 no se encuentran en esta paleta.
Paleta Web:
Una paleta de color específica con colores que no requieren tramado cuando se visualizan en
plataformas Windows o Macintosh.
Optimizar imágenes para evitar el tramado de navegador
Como mencionamos anteriormente, el tramado de navegador es en general poco atractivo,

porque puede presentar puntos en áreas de colores sólidas. Puedes evitar el tramado de
navegador haciendo lo siguiente:
Página 71/157
Utilizando el regulador “Web Snap” para cambiar colores cercanos a la paleta de colores Web y
convertirlos en colores compatibles. Este enfoque cambia los colores de la imagen en sí; una vez
más, es imposible cambiar la paleta Web que se utiliza en los exploradores.
Seleccionar colores individuales en una imagen y cambiar los colores a la paleta Web. Con este
enfoque, puedes seleccionar los colores individualmente en vez de tratar de hacer compatible
toda la imagen con la paleta Web.
Optimizar la imagen utilizando la paleta Web en vez de una de la propia imagen. Este no resulta
un buen enfoque, porque por lo general crea una imagen de baja calidad para quienes utilicen
pantallas con una alta profundidad del color, aunque puede mejorar ligeramente la apariencia de
imágenes en las pantallas de 256 colores.
Seleccionar colores de la paleta Web cuando se crean imágenes. Este enfoque evita que tengas
que trabajar para eliminar el tramado más adelante.
Utilizar el filtro DitherBox para crear un motivo de dos o más colores Web que simulen
mezclarse para crear un color sólido. Este filtro puede funcionarte en la limitada paleta Web,
simulando áreas sólidas de colores no compatibles con la Web sin obtener tramado.
Trabajarás con cada uno de estos enfoques para evitar el desagradable efecto de tramado de
navegador.
Página 72/157
Actividad 3C-1:
Tramado de aplicación y de navegador
Objetivo: Comparar el tramado que creas cuando se optimiza una imagen en tramado creado
cuando se ve una imagen en una pantalla de 256 colores.
Debes abrir la imagen “expgraph1.psd” para comparar el tramado de aplicación con el de

navegador. Debes abrir esta imagen en ImageReady. Haz clic en el botón “ImageReady” en la
barra de tareas.
Navega hasta la carpeta “Photoshop 6.0 Web Data” y selecciona el archivo

“expgraph1.psd” de la lista de archivos.
Haz clic en “Abrir”. Se abre la imagen.
Aunque ImageReady (y Photoshop) te permite ver el efecto del tramado de navegador, no lo

puedes hacer con la imagen original. Haz clic en el menú Vista y mueve el cursor sobre el
submenú Previsualización. El comando “Tramado de navegador” aparece, pero no está activo.
Haz clic fuera del menú para cerrarlo.
Debes ver una versión optimizada de la imagen para ver los efectos del tramado de navegador,
porque algunas imágenes muestran su propio tramado de aplicación además del tramado de
navegador. Haz clic en la pestaña “Optimizada” en la parte superior de la ventana.
Debes optimizar la imagen como un archivo GIF, porque es una imagen de color plano.
Selecciona la opción “Tramado GIF32” de la lista “Ajustes” en la paleta “Optimizar”.
Antes de previsualizar el tramado de navegador, debes probar el tramado de aplicación. Aunque

escojas un ajuste que cree tramado de aplicación en caso necesario (el campo Tramado está
configurado en un valor de 88%), no se muestra ningún tramado porque el número total de
colores en la imagen es menor que el que se permite en la paleta. Puedes ver el número real de
colores en la información de optimización en la parte inferior de la ventana. Selecciona
“Información optimizada” de la lista de la derecha en la parte inferior de la ventana. La
información que se muestra, de izquierda a derecha, incluye el formato de archivo, el tamaño del
archivo optimizado, el número real de colores y el porcentaje de tramado de aplicación.
En ImageReady puedes hacer clic en la flecha que apunta hacia abajo al lado de la lista
“Ajustes” en la paleta Optimizar para crear un archivo en el disco duro que se base en la
Página 73/157
configuración actual de optimización. Luego puedes arrastrar los archivos o carpetas

individuales al icono para que ImageReady optimice las imágenes automáticamente.
La imagen mostrará tramado si disminuyes el número de colores en forma significativa por

debajo de 9. Selecciona “4” de la lista “Colores” en la paleta “Optimizar”. Las columnas
“Male”, los lados de las columnas “Female” y la parte inferior del gráfico muestran tramado,
porque los colores originales no están ya en la paleta. A diferencia de las instancias del tramado
de aplicación que viste en la lección “Optimizar imágenes”, este tramado de aplicación resulta
poco atractivo.
Si tuvieras que reducir esta imagen a solo cuatro colores, es mejor no aplicar tramado.
Selecciona “Sin tramado” de la lista Algoritmos de tramado en la paleta Optimizar (la que
muestra en este momento “Difusión”). Las columnas no tienen sus colores originales, pero se
muestran sólidos en vez de tramados.
También experimentarás con los demás métodos de tramado para ver las diferencias entre ellos.
Con tan pocos colores, las diferencias entre los algoritmos serán muy claras, porque ImageReady
no puede reproducir de forma adecuada los colores originales. En la mayoría de los casos reales,
el tramado será mucho menos pronunciado. Selecciona “Motivo” de la lista Algoritmo de
tramado en la paleta Optimizado. El tramado de motivo produce un motivo de cuadros para
simular colores y es a veces más notorio que el tramado de difusión.
Selecciona “Ruido” de la lista Algoritmo de tramado en la paleta Optimizar. El tramado

Ruido crea el motivo más aleatorio de los tres. Es útil emplearlo en imágenes que dividas con
slicing; no mostrará el lugar donde se encuentran las dos imágenes. Los demás métodos sí lo
hacen.
Sectores:
Dividir una imagen en varias partes rectangulares que pueden agruparse con una tabla HTML
para que se muestren como una imagen grande en una página Web.
Selecciona “Difusión” de la lista Algoritmo de tramado en la paleta Optimizar. Aunque

generalmente luce como el más uniforme, si se aplica el tramado a partes adyacentes de una
imagen, puede crear una línea. Sin embargo, ImageReady permite “enlazar” estas líneas para que
el motivo del tramado de difusión aparezca uniforme a lo largo de ellos.
Si agregas colores, la apariencia del tramado mejora, porque ImageReady puede simular mejor
los colores perdidos. Haz clic en el botón Aumentar en la parte izquierda del campo Colores
en la paleta Optimizar cinco veces, examinando la imagen después de cada clic. Cada vez
que hagas clic en el botón para agregar un color, el tramado se hace cada vez menos evidente y
cuando llegues a nueve colores, el tramado desaparecerá por completo.
Página 74/157
Ahora debes contrastar el tramado de aplicación que forzaste en la imagen con el tramado de
navegador. Aunque la imagen sólo contiene nueve colores, si alguno de ellos no está en la paleta
Web, las áreas aparecerán tramadas cuando se visualiza en un navegador con una pantalla de 256
colores. Puedes verificar esto activando la Visualización en navegador, que está disponible ahora
que ves la versión optimizada de la imagen. Selecciona el menú Vista Æ Previsualizar Æ
Tramado de navegador (Método abreviado: CTRL SHIFT Y). El fondo del gráfico, las
columnas y la parte inferior del gráfico aparecen con un tramado.
El tramado de navegador es más sutil que el de aplicación que se creó anteriormente, porque los
colores mostrados tienen un tramado de 216 colores de la paleta Web. La imagen en sí sólo
contiene nueve colores sin tramado inherente, de modo que este efecto no se mostrará a los
usuarios con pantallas de alta profundidad del color. Sólo aparecerá en los usuarios de
exploradores en computadoras de pantallas de 256.
Eliminar el tramado de navegador

Ahora necesitas examinar algunos de los colores de imagen para determinar por qué presentan
tramado y utilizarás la opción ImageReady para cambiar automáticamente a los colores de la
paleta Web y eliminar el desagradable tramado de navegador.
Actividad 3C-2:
Eliminar el tramado de navegador utilizando colores compatibles con la Web
Objetivo: Eliminar el tramado causado por una pantalla de 256 colores alterando
ligeramente los colores de la imagen.
Haz clic en la herramienta Cuentagotas en la Caja de herramientas (Método abreviado: I).
Haz clic en el fondo color azul claro del gráfico. Aunque aparece tramado, el área completa es
un solo color en la imagen optimizada, de modo que se registrará el mismo color incluso si haces
clic en otro punto de distinto color en el motivo de tramado de navegador.
Haz clic en la paleta Color (puede estar oscurecida debajo de la paleta Optimizar).
Arrastra la barra de título del grupo que contiene la paleta de color hacia la izquierda para
que ambas se vean completamente.
Selecciona “Reguladores RGB” en la paleta Color, en caso de que sea necesario. El color de
muestra tiene los componentes 194 rojo, 189 verde y 255 azul. Como mencionamos
anteriormente, cualquier color que no incluya los valores 0, 51, 102, 153, 204 o 255 en sus tres
valores no se encuentra en la paleta Web. Los valores del rojo y verde lo excluyen de esta paleta.
Por ello, se muestra tramado en la imagen.
Página 75/157
El color Web más cercado aparece en la parte inferior izquierda de la paleta. Puedes
seleccionarlo haciendo clic en el color o en el icono de alerta de Color web a su izquierda. Haz
clic en el icono de advertencia de Color web a la izquierda del componente del color azul. El
color cambia a 204 rojo, 204 verde y 255 azul, que sí está en la paleta Web. El color no cambia
en la imagen, porque sólo se cambió el color de fondo, no todas las instancias del color de
muestra en la propia imagen.
Debes examinar un color más para ver porqué el explorador muestra el tramado. Haz clic en una
de las columnas amarillo claro con la herramienta Cuentagotas. El color de muestra aparece
como 237 rojo, 237 verde y 202 azul en la paleta Color, de modo que no está tampoco en la
paleta Web.
Los otros colores de la imagen no están en la paleta Web y por eso aparecen tramados. Debes
utilizar ahora una técnica para cambiarlos rápidamente a la paleta Web. Esto eliminará por
completo cualquier tramado de navegador. Haz clic en la lista “Web snap” en la paleta
Optimizar y arrastra el regulador hasta llegar a 100%. Todos los colores de la imagen se
convierten en colores Web. Desaparece el tramado de navegador de modo que todos los colores
en la imagen aparecen sólidos otra vez.
Debes examinar el efecto del cambio a Web en los dos colores que tomaste una muestra
anteriormente. Haz clic en el fondo azul claro en el gráfico. El color tiene los componentes 204
rojo, 204 verde, 255 azul, que está en la paleta Web.
Haz clic en una de las columnas amarillo claro con la herramienta Cuentagotas. El color
tiene los componentes 255 rojo, 255 verde, 204 azul, que también está en la paleta Web. Este
método para cambiar colores a la paleta Web es mucho más rápido que cambiar cada uno de los
colores con el problema de forma separada.
Página 76/157
Al cambiar todos los colores a los de la paleta Web, la imagen cambia de forma significativa. Por
ejemplo, tanto el fondo como las columnas amarillo claro se hicieron más claros. El cambio a
Web no modifica la imagen original; sólo cambia la versión optimizada, de modo que puedes ver
el efecto que la modificación tuvo en los colores. Haz clic en la pestaña “Original”. Los colores
originales de la imagen regresan.
Sin embargo, los colores resultan algo arbitrarios en una imagen como esta –el usuario no puede
saber como eran en principio los colores, a diferencia de las imágenes con colores discernibles
como la piel o los colores de un logo. Por ello, el efecto no es cuestionable y puedes guardar la
versión optimizada. No es necesario ver la versión optimizada para guardarla; los ajustes se
mantienen incluso si la ves en la imagen original. Selecciona el menú Archivo Æ Guardar
optimizada (Método abreviado: CTRL ALT S). Aparece el diálogo Guardar optimizada.
Utilizarás el nombre y opciones por defecto. Haz clic en “Guardar”.
Debes reemplazar la imagen GIF que creaste del archivo anteriormente, porque esta no mostrará
tramado de navegador. Haz clic en “Reemplazar”.
Ya puedes cerrar esta imagen. Selecciona el menú Archivo Æ Cerrar (Método abreviado:
CTRL W).
ImageReady te pregunta si deseas guardar la imagen. Haz clic en “Aceptar”.

Para imágenes más complejas, es posible que necesites ejercer mayor control en la forma en que
utilizas colores de la paleta Web. Debes abrir una ilustración con una sombra más compleja para
demostrar esta situación. Esta vez, utilizarás Photoshop para ver que ambas aplicaciones pueden
realizar las mismas funciones para utilizar la paleta Web. Haz clic en el botón “Adobe
Photoshop” en la barra de tareas.
Selecciona “kidatdoc.psd” de la lista de archivos.
Haz clic en “Abrir”. Aparece una ilustración de una madre con un niño en la oficina del doctor.
Las opciones de Photoshop Compatibilidad con Web se encuentran en el diálogo Guardar para
Web. Selecciona el menú Archivo Æ Guardar para Web (Método abreviado: CTRL ALT
SHIFT S). Aparece el diálogo Guardar para web.
Puedes optimizar esta imagen como un archivo JPEG o GIF, porque tiene una sombra suave.
Debes ver ambas formas. Haz clic en la vista de la esquina superior derecha.
Página 77/157
Selecciona “GIF 32 tramado” de la lista “Ajustes”. La imagen es similar en apariencia al

original.
Debes tratar de disminuir el número de colores para reducir el tamaño del archivo. Selecciona
“16” de la lista “Colores”. La mayoría de los colores en la imagen aparecen sin tramado.
Debes regresar al número de colores que evite en lo posible la aplicación del tramado.
Selecciona “32” de la lista “Colores”. La mayoría de los colores en la imagen aparecen sin
tramado.
Debes contrastar la versión GIF con la JPEG. Haz clic en la vista de la esquina inferior
izquierda.
Selecciona “JPEG Medio” de la lista “Ajustes”. Aparecen algunos detalles en la versión

JPEG, pero en general, la apariencia resulta bastante aceptable y el tamaño del archivo es un
poco menor.
Una ventaja de utilizar el formato GIF es que puedes cambiar fácilmente los colores para evitar
el tramado de navegador. Debes ver el tramado de navegador en ambas versiones. Selecciona la
opción “Tramado de navegador” en el menú Previsualizar en la parte superior de la vista.
Aparece el tramado de navegador en la versión JPEG en la parte inferior izquierda. No puedes
controlarlo, porque no puedes cambiar los colores específicos en la imagen en el formato JPEG
en el diálogo Guardar para web (aunque puedes regresar a Photoshop y cambiar los de la paleta
Web manualmente).
Haz clic en la vista de la esquina superior derecha.
Selecciona “Tramado de navegador” del menú Previsualizar en la parte superior de la vista

superior derecha. El tramado de navegador aparece en la versión GIF. Las áreas que debes
mejorar incluyen dos de los colores del banco donde se sienta el niño y el pelo del doctor.
Puedes alterar la tabla de colores en la versión GIF para hacerlos compatibles con la paleta Web.
Primero debes tratar de hacerlo con el regulador Web snap. Haz clic en la lista “Web snap” y
arrastra el regulador hasta llegar a 100%. El fondo y la chaqueta del doctor no incluyen el
gradiente uniforme que se encontraba en el original.
Debes usar pocos colores para tratar de mejorar la apariencia. Haz clic en la lista “Web snap” y
arrastra el regulador a 50%. Ahora, colo algunos de los colores en la imagen forman parte de
la paleta Web; se muestran con un rombo en el medio de la gama en la tabla de colores. Cuando
conviertes algunos de estos colores a compatibles con Web, la imagen no requerirá utilizar los 32
colores que permites. Por eso, se reduce el tamaño del archivo de 12.89K a 11.23K.
El fondo y la chaqueta mejoran, y el banco no se muestra tramado. Sin embargo, todavía queda
algo en la parte gris del banco y en el cabello del doctor.
Página 78/157
Debes seleccionar los colores individuales en la imagen y los configurarás para la paleta Web.
Haz clic en la herramienta Cuentagotas en el diálogo Guardar para web (Método abreviado:
I).
Mantén presionado el botón del mouse y mueve el cuentagotas sobre la parte gris tramada
del banco. Los valores del rojo, verde y azul aparecen en la parte inferior de la ventana, mientras
que se muestra un borde alrededor del color de muestra en la tabla. A diferencia de ImageReady,
los colores que lee el cuentagotas son tramados de navegador, no los originales. Mientras
arrastras el mouse, verás que los valores de color cambian entre unos pocos de la paleta web (por
ejemplo, R: 204, G: 153, B: 153 y R: 153, G: 204, B: 153) y se seleccionan los distintos colores
en la tabla de colores.
Debes seleccionar y cambiar el color original, por lo que deberás desactivar el tramado de
navegador. Selecciona “Tramado de navegador” en el menú Previsualizar para
desmarcarlo. El área gris del banco no muestra tramado.
Haz clic en la parte gris del banco. El color original, R: 171, G: 171, B: 172 se selecciona.
Puedes utilizar los botones debajo de la tabla de color para llevar colores a la paleta Web, fijarlos
en la tabla de color, agregar nuevos colores a la tabla o borrar colores.
Debes hacer compatible el color del banco a la paleta Web. El icono luce como un cubo, porque
como explicamos anteriormente, la paleta Web se deriva de un “cubo de color” 6 x 6 x 6. Haz
clic en el botón Ajustar a Web. El color del banco cambia y el tono presenta ahora un
rombo en el medio.
El color gris puede haberse movido en la paleta en caso de que esté clasificado por luminosidad
(brillo, esencialmente). Puedes también clasificar la tabla de colores de otras maneras.
Selecciona “Clasificar por popularidad” en la lista Paleta de colores, en caso necesario. El
color gris se convierte en el sexto color de la tabla, porque ocupa un área grande de la imagen.
También debes cambiar el color principal del cabello del doctor a un color de la paleta Web. Haz
clic en el color oscuro del cabello del doctor.
Haz clic en el botón de la paleta Snap to web. El color cambia al más cercano de la paleta
Web, que en este caso es más oscuro que el original.
Ahora puedes ver que evitaste que estas áreas mostraran tramado de navegador. Selecciona
“Tramado de navegador” del menú Previsualizar. Las áreas con los colores principales en la
imagen mejoran. El tamaño del archivo sigue siendo un poco más grande que la versión JPEG,
pero lucirá mejor en los usuarios que utilicen una pantalla de 256 colores.
Página 79/157
Algoritmos de reducción de color

Antes de guardar una imagen, debes terminar de trabajar con ella probando algunos algoritmos
de Photoshop para seleccionar colores en la tabla. Photoshop puede utilizar varios métodos o
algoritmos para decidir que colores deben estar en una tabla. El algoritmo que emplees tendrá
impacto en la apariencia y en el tamaño del archivo, porque cada uno selecciona diferentes
colores y los organiza en forma distinta. El algoritmo perceptual trata de seleccionar colores para
los cuales el ojo humano goza de una gran sensibilidad.
Actividad 3C-3:
Seleccionar algoritmos para reducción de color
Objetivo: Ver cómo la selección de una paleta impacta la apariencia de una imagen cuando
se optimiza en GIF o PNG-8.
Selecciona “Perceptual” de la lista Algoritmos de reducción de color (el que muestra en este
momento “Selectivo”). Para esta imagen, el algoritmo Perceptual no es efectivo, porque no
incluye los colores de la camisa del niño o de la madre. No obstante, en otras imágenes, el
algoritmo Perceptual puede crear una imagen más uniforme.
El algoritmo Adaptable selecciona colores basados en su frecuencia de aparición en la imagen,

sin importar la percepción humana. Selecciona “Adaptable” de la lista Algoritmos de
reducción de color. Todos los colores que aparecen en la imagen se incluyen en la tabla de
color, de modo que la apariencia mejora. Sin embargo, el tamaño del archivo aumenta a 12.31K,
porque este algoritmo emplea más de los 32 colores que especificaste como máximo a diferencia
de los demás algoritmos.
El algoritmo Selectivo es una especie de mezcla entre el perceptual y el adaptive –selecciona

colores basados en la sensibilidad humana, aunque es muy posible que se incluyan las áreas más
extensas de color. Adicionalmente, favorece la preservación de los colores Web en la imagen
original. Es el algoritmo predeterminado de Photoshop, porque crea un balance entre la
apariencia de la imagen y el tamaño del archivo. Selecciona “Selectivo” de la lista Algoritmos
de reducción de color. Los colores de la imagen lucen bien y el tamaño del archivo es menor
que en los otros algoritmos.
Los otros algoritmos del menú generalmente deben utilizarse para propósitos más especializados,
no para las imágenes que se utilizarán en la web. Por ejemplo, aunque puedes guardar imágenes
utilizando la paleta adecuada para la plataforma en que trabajas (Windows o MacOS), no se
mostrará bien en la otra plataforma. De igual forma, aunque utilices el algoritmo Web, forzará
todos los colores a la paleta Web, que como ya has visto, no siempre resulta atractiva. En
particular, no deberías utilizar la paleta Web para optimizar fotografías e imágenes con
gradaciones suaves, porque se mostrará muy pobre cuando no se vea a 256 colores.
Adicionalmente, cuando utilizas el algoritmo Web, aumenta el tamaño de los archivos en vez de
seleccionar algunos colores compatibles con el Web según sea necesario.
Página 80/157
Debes guardar la versión optimizada GIF con la paleta generada utilizando el algoritmo
Selectivo. Haz clic en “OK”. Aparece el diálogo Guardar optimizado.
Debes utilizar las opciones y el nombre predeterminados. Haz clic en “Guardar”. Photoshop
guarda el archivo con el nombre “kidatdoc.gif” en la carpeta “Photoshop 6.0 Web Data”.
Debes regresar a la imagen en Photoshop, que puedes cerrar ahora. Haz clic en el botón cerrar
de la ventana (Método abreviado: CTRL W).
Photoshop pregunta si deseas guardar la imagen. Haz clic en “Aceptar”. Se cierra la imagen.
Aunque el algoritmo Selectivo crea a veces la mejor tabla de colores de todos. Aunque a veces
hay excepciones. Por ejemplo, al principio del curso viste que la imagen “healthexpert.psd” lucía
mal cuando la optimizaste como GIF; esa imagen en particular lucirá mucho mejor si utilizas el
algoritmo Adaptive. Sin embargo, la guardaste como archivo JPEG, de modo que no necesitas
volverla a optimizar, porque el formato JPEG no reduce los colores a una pequeña tabla de
colores como lo hace el formato GIF.
Colores compatibles con el Web
A pesar de que es posible cambiar colores a la paleta Web en el proceso de optimización, resulta
mucho más eficiente seleccionar colores de la paleta Web cuando pintes áreas sólidas. Photoshop
ofrece varias formas de realizar esto más fácilmente. Aquí abrirás una ilustración creada en
Adobe Illustrator como una imagen vectorial (creada con formas geométricas en vez de píxeles).
Actividad 3C-4:
Seleccionar los colores de la paleta Web para pintar
Objetivo: Seleccionar colores de la paleta Web cuando pintes imágenes para evitar
el tramado del navegador.
Selecciona el archivo “hypodermic.ai” de la lista.
Haz clic en “Abrir”. Aparece el diálogo Rasterizando Generis EPS. Cada vez que abras una
imagen vectorial en Photoshop, el programa deberá rasterizarla para convertir las formas en una
cuadrícula de píxeles.
Puedes definir el ancho, alto, resolución y modo de color. También es posible especificar bordes
suavizados. Mantén la imagen en el tamaño original de 98 x 120 píxeles. Aunque la imagen está
Página 81/157
en blanco y negro, deberás abrirla en modo de color RGB, para añadirle más adelante el color. Si
es necesario, selecciona “Color RGB” en la lista “Modo”.
Cuadrícula:
Una serie de guías verticales y horizontales con un espaciado uniforme. Las cuadrículas pueden
activarse o desactivarse independientemente de otras guías.
En caso de ser necesario, marca la casilla “Suavizado”.
Haz clic en “OK”. Aparece una imagen de líneas negras en un espacio transparente. Cualquier
área en Illustrator que no tenga un color definido, aparecerá transparente. Por ello, si pintas en
una capa, el color se verá.
Debes agregar dos capas a la imagen; una para agregar un fondo blanco y la otra para colorear la
imagen. Es una buena idea que siempre pintes en capas separadas de las existentes, para que
puedas manipularlas fácilmente más adelante. Haz clic en el botón Crear nueva capa en la
paleta Capas dos veces.
Las nuevas capas deben estar debajo de la capa con el diseño, es decir, éste debe estar al frente.
Arrastra la “Capa 1” sobre las otras dos capas hasta que veas una línea negra. La “Capa 1”
es la superior ahora.
Debes rellenar la capa que está más abajo con color blanco. Haz clic en “Capa 2” en la paleta
“Capas”.
Haz clic en el icono Color frontal y Color de fondo por defecto en la Caja de herramientas
(Método abreviado: D). Aparecen los colores negro y blanco, respectivamente.
Presiona CTRL SUPRIMIR. Este método abreviado rellena la capa con el color de fondo, de
modo que la “Capa 2” se vuelve blanca.
Página 82/157
Ahora agregarás color a la “Capa 3”. Haz clic en “Capa 3” en la paleta “Capas”.
Antes de comenzar a pintar, debes utilizar el zoom lo más cerca que puedas. Mantén
presionada la tecla ALT y selecciona el menú Vista Æ Zoom tantas veces como sean
necesarias para aumentar el tamaño hasta 300%. Si mantienes presionada la tecla ALT
mientras seleccionas este comando, causará que la ventana aumente mientras muestra la imagen
lo más cerca posible.
En vez de pintar a mano, debes seleccionar un área para rellenarla. Utilizarás un comando para
rellenar la selección. La herramienta Lazo poligonal es una buena opción para hacer la selección
que necesitas en esta imagen. Mantén presionado el botón del mouse en la herramienta Lazo
y arrástralo hacia la derecha para seleccionar Lazo poligonal.
Haz clic en el orden que se indica en la ilustración para hacer una selección en la
inyectadota. El último punto donde debes hacer clic es en el mismo lugar que el primero. Si
la selección no se completa, haz doble clic.
Debes utilizar los reguladores de color RGB para seleccionar los colores. Selecciona
“Reguladores RGB” de la lista en el menú Color, en caso de que sea necesario.
Ahora debes seleccionar un color que se encuentre en la paleta Web. Debes seleccionar una
opción en la paleta Color que facilite esta selección. Selecciona “Hacer curva compatible con
Web” en la lista de la paleta Color. La curva de color en la parte inferior muestra colores
discretos en vez de ser continuos.
Mantén presionado el botón del mouse y arrastra el cursor sobre la curva de color en la
parte inferior de la paleta Color. Los colores que se muestran en el regulador de la paleta
tienen valores de 0, 51, 102, 153, 204 o 255, porque sólo puedes seleccionar colores compatibles
con Web.
Haz clic en un color naranja utilizando la curva Web.
Página 83/157
Utiliza un método abreviado para rellenar la selección con el color de fondo. Presiona ALT
SUPRIMIR. El polígono que creaste se rellena con el color naranja.
Debes hacer otra selección y escoger otro color de la paleta Web para agregar sombra. Haz clic
en el menú Selección Æ Deseleccionar (Método abreviado: CTRL D).
Haz clic en el orden que se indica en la ilustración (sigue los números) para hacer una
selección en la inyectadota. El último punto en donde debes hacer clic es el mismo que el
primero; si la selección no se completa, haz doble clic.
Ahora debes seleccionar un color que esté en la paleta Web. Selecciona una opción de la paleta
Color para facilitarlo. Selecciona “Reguladores de color Web” en la lista de la paleta Color.
Los reguladores Rojo, Verde y Azul se dividen en seis segmentos y los valores de colores se
muestran en la forma Hexadecimal, la notación utilizada en HTML para describir los colores.
Los valores Web de los colores Rojo, Verde y Azul son 00, 33, 66, 99, CC y FF cuando se
escriben en la notación Hexadecimal.
Puedes seleccionar una paleta no Web con los reguladores Color Web presionando la tecla ALT
mientras los arrastras.
Cuando utilices los Reguladores de color Web, los mismos se limitarán a los colores compatibles
con el Web, de modo que sólo podrás seleccionar este tipo de colores. Debes seleccionar un
color azul claro. Coloca el regulador Rojo en 99.
Arrastra el regulador Verde hasta CC.
Arrastra el regulador Azul hasta FF. Se selecciona el color azul claro.
Ahora, deberás rellenar la segunda selección del polígono con el mismo método abreviado que
utilizaste en la primera. Presiona ALT SUPRIMIR. La forma se rellena con el color azul que
seleccionaste.
Página 84/157
Por último, debes rellenar dos áreas rectangulares en la parte superior de la aguja con gris.
Puedes utilizar la herramienta Varita mágica para seleccionar las áreas. Haz clic en la
herramienta Varita mágica (Método abreviado: W).
Como seleccionaste espacio transparente rodeado por píxeles de colores, cualquier tolerancia de
la Varita mágica funcionará. Debes seleccionar sólo un área contigua en una capa para evitar
seleccionar más de lo debido. Marca la casilla “Contiguo” en la barra Opciones de
herramienta, en caso necesario.
Desmarca la casilla “Usar todas las capas” en caso necesario.
La selección debe tomar en cuenta la suavidad de los bordes del diseño. Marca la casilla
“Suavizado”, si es necesario.
Debes hacer clic en la capa que contiene el diseño de la aguja para poder realizar la selección con
la Varita mágica. Haz clic en “Capa 1” en la paleta Capas.
Coloca la parte superior de la herramienta Varita mágica en el rectángulo blanco en la

parte superior del rectángulo negro.
Haz clic para seleccionar el área dentro del rectángulo. Si se selecciona más de lo debido,
escoge SelecciónMDeselección, mueve el cursor ligeramente y haz clic de nuevo.
Puedes agregar a la selección presionando la tecla SHIFT y haciendo clic otra vez. Mantén
presionada la tecla SHIFT y coloca la parte superior de la herramienta Varita mágica en el
rectángulo que está arriba de donde seleccionaste.
Haz clic mientras presionas la tecla SHIFT, luego suéltala. Se seleccionan ambos rectángulos.
Página 85/157
Debes pintar el color en la capa del medio, no en la que contiene la imagen. Haz clic en “Capa
3” en la paleta Capas.
Esta vez, debes utilizar el Selector de colores. Haz clic en el color de frente en la caja de
herramientas. Aparece el diálogo Selector de colores.
Debes restringir la selección a colores de la paleta Web. Marca la casilla “Sólo colores Web”.
El campo de color se divide en áreas de colores sólidos. En cualquier lugar donde hagas clic, se
seleccionará un color Web.
Debes escoger un color gris. Los grises no tienen saturación, de modo que puedes aislarlos
rápidamente con el Selector de colores. Haz clic en el botón “S”.
Arrastra el regulador vertical hasta el final. El campo de colores muestra ahora sólo los
colores con saturación 0. Los grises tienen valores de Rojo, Verde y Azul similares, por eso sólo
hay seis niveles de gris (incluyendo el blanco y negro) en la paleta Web.
Haz clic en el gris de la parte superior (excluyendo el blanco). Los valores RGB que obtienes
son R: 204 G: 204 B: 204.
Página 86/157
Haz clic en “OK”. Se selecciona el color gris.
Una vez más, deberás utilizar el método abreviado para rellenar el área seleccionada. Presiona
ALT SUPRIMIR. Los rectángulos se rellenan con el color gris que seleccionaste.
Debes guardar la imagen en formato Photoshop y para Web. Selecciona el menú Archivo Æ
Guardar como (Método abreviado: CTRL SHIFT S). Aparece el diálogo Guardar como.
Escribe hypodermic.psd en el campo “Nombre del archivo”, en caso necesario.
Haz clic en “Guardar”. Se guarda el archivo.
Esta imagen debe guardarse en format GIF, porque sólo tiene unos pocos colores. Selecciona
“GIF 32 sin tramado” de la lista “Ajustes”.
Puedes reducir los colores a menos de 32 sin pérdida aparente de la calidad. Selecciona “16” de
la lista “Colores”.
Como empezaste con una imagen en blanco y negro y la rellenaste usando solamente colores de
la paleta Web, no debería mostrar tramado de navegador. Selecciona “Tramado de navegador”
Página 87/157
del menú de previsualización, en caso de que no esté seleccionado. Los colores sólidos de la
imagen no presentan tramado.
Ahora puedes guardar la imagen. Haz clic en “OK”. Aparece el diálogo Guardar optimizada
como.
Debes guardar la configuración actual. Haz clic en “Guardar”. La imagen se guarda como
“hypodermic.gif” en la carpeta “Photoshop 6.0 Web Data” y regresas a la ventana de la imagen.
Haz clic en el botón Cerrar de la imagen (Método abreviado: CTRL W).
Photoshop te pregunta si deseas guardar la imagen original. Haz clic en “Aceptar”.
El filtro DitherBox
Como has podido apreciar, la paleta Web está compuesta por colores que son iguales
matemáticamente, distribuidos en valores de rojo, verde y azul. Como se generan de forma
matemática y no según la percepción o los más usados, es posible que muchos colores que
quieras usar en una imagen no tengan equivalentes cercanos en la paleta Web. Por ejemplo, no
existen colores Web cercanos al típico color carne.
Sin embargo, es posible simular áreas coloreadas con colores que no forman parte de la paleta
Web, mientras evitas la apariencia tramada, creando un patrón de dos colores Web similares.
Cuando utilizas estos colores en un área de 2 x 2, el efecto de llenado será casi idéntico al relleno
con un color sólido. El filtro DitherBox, disponible en Photoshop e ImageReady, te pueden
ayudar a crear y aplicar dicho patrón.
Actividad 3C-5:
Rellenar áreas con el filtro DitherBox
Objetivo: Para evitar el tramado de navegador cuando rellenes áreas con colores que no
estén en la paleta Web.
Debes utilizar el filtro DitherBox para crear un color de fondo para una publicidad en banner
para el sitio vitalitytips.com. Debes aplicarlo en ImageReady porque es necesario que busques si
tiene tramado de navegador. Es más fácil ver la previsualización de una versión optimizada de la
imagen con tramado de navegador en ImageReady que en Photoshop (donde necesitas utilizar el
diálogo Guardar para web). Haz clic en el icono “Adobe ImageReady” en la barra de tareas.
Página 88/157
Si aparece un cuadro de advertencia que te indica que no tienes las fuentes necesarias en la
computadora, quiere decir que no instalaste la fuente Trebuschet MS, como se señaló en la
Preparación del curso. Debes detenerte por un momento e instalarla antes de continuar. Ve a la
dirección http://www.microsoft .com/truetype/fontpack/win.htm y descarga e instala la fuente
Trebuschet MS.
Selecciona “vtbanner.psd” de la lista de archivos.
Haz clic en “Abrir”. Este banner contiene varias capas ocultas, pero se utilizarán para animarlo.
Por ahora, sólo debes trabajar con el color de fondo.
El color de fondo se seleccionó según su apariencia, no por su compatibilidad con la Web. Debes
verificar los valores del color de fondo. Haz clic en la herramienta Cuentagotas (Método
abreviado: I).
Haz clic en el color de la imagen de fondo.
Selecciona “Web color sliders” de la lista de la paleta Color, en caso necesario. El color es
R: BB G: E1 B: A9, que no se encuentra en la paleta Web.
No todos los colores de la paleta Web crean tramado de navegador, de modo que puedes
previsualizar el tramado de navegador que ocurre en una versión optimizada. Haz clic en la
pestaña “Optimizada”.
Selecciona “GIF 32 con tramado” de la lista “Ajustes” en la paleta Optimizar.
Puedes bajar a 16 colores esta imagen sin pérdida significativa de la calidad. Selecciona “16” de
la lista “Colores” en la paleta Optimizar.
Selecciona Vista Æ Previsualizar Æ Tramado de navegador (Método abreviado: CTRL

SHIFT Y). El tramado de navegador resulta evidente para este color de fondo.
Debes regresar a la vista original para tratar de solucionar este proble,a. Haz clic en la pestaña
“Original”. El color original aparece de nuevo, sin la previsualización del tramado de
navegador.
Debes tratar de utilizar dos colores Web diferentes en vez del color acutal para ver cual cambia
significativamente del original. Para comparar la versión Web del color con el original, debes
duplicar la capa “Fondo”. Arrastra la capa “Fondo” hasta el botón Crear nueva capa en la
parte inferior de la paleta Capas. Aparece una capa “Fondo copia” en la parte superior.
Debes cambiar el nombre de la capa para mayor claridad. Haz doble clic en “Fondo copia” en
la paleta Capas. Aparece la casilla Opciones de capa.
Página 89/157
Escribe Color Web 1 en el campo “Nombre”.
Ahora debes usar la paleta Color para ubicar el color Web más parecido al actual. Haz clic en el
icono de advertencia de Color Web en la parte inferior izquierda de la paleta Color.
Cambia al color más cercano Web, el cual es un poco más beige.
Debes rellenar la capa con este color utilizando el método abreviado que empleaste
anteriormente en Photoshop. Presiona ALT SUPRIMIR. La capa se rellena con el nuevo color.
Debes probar otro color de la paleta Web para ver si es mejor. Una vez más, debes duplicar la
capa “Fondo”. Arrastra la capa “Fondo copia” en la paleta Capas. Aparece el diálogo
Opciones de capa.
Debes cambiar el nombre de la capa para mayor claridad. Haz doble clic en la capa “Fondo
copia” en la paleta Capas. Aparece el diálogo Opciones de capa.
Escribe Color Web 2 en el campo “Nombre”.
Necesitas ocultar la capa “Color Web 1” para ver este nuevo color. Haz clic en el icono del ojo
en la columna Visibilidad de capa a la izquierda de la capa “Color Web 1”. Desaparece el
color de la paleta Web y se muestra en la imagen la capa “Color Web 2”.
En caso de ser necesario, haz clic en la capa “Color Web 2” en la paleta Capas para
seleccionarlo.
Debes comenzar a partir del color original. Haz clic en el color de fondo en la imagen con el
cursor del Cuentagotas. El color original aparece en la paleta Web.
Esta vez, debes arrastrar los reguladores para seleccionar un color Web diferente. Arrastra el
regulador Rojo hasta “CC” en la paleta Color.
Arrastra el deslizador Verde hasta “FF” en la paleta Color.
Arrastra el deslizador Azul hasta “99” en la paleta Color. El color que resulta es más
brillante que el original.
Página 90/157
Debes rellenar la capa con este color utilizando el método abreviado. Presiona ALT
SUPRIMIR. La capa se rellena con el color más brillante. Ninguno de los colores Web se
asemeja al original.
Debes crear un duplicado más de la capa “Fondo” y utilizar el filtro DitherBox para generar un
motivo de 2 x 2 píxeles para simular el color original. Arrastra la capa “Fondo” hasta el botón
Crear nueva capa en la parte inferior de la paleta Capas. Aparece una capa “Fondo copia” en
la parte superior.
Debes cambiar el nombre de la capa para mayor claridad. Haz doble clic en la capa “Fondo
copia” en la paleta Capas. Aparece el diálogo Opciones de capa.
Escribe DitherBox en el campo “Nombre”.
Debes ocultar la capa “Color Web 2” para ver el nuevo color. Haz clic en el icono del ojo en la
columna Visibilidad de capa a la izquierda de la capa “Color Web 2”. El color más brillante
desaparece y se muestra la capa “DitherBox” en la imagen.
Si es necesario, haz clic en la capa “DitherBox” en la paleta Capas para seleccionarla.
Antes de aplicar el filtro debes hacer que el color de frente sea el que estás tratando de simular.
Haz clic en el color de fondo en la imagen con el cursor del Cuentagotas. El color de fondo
original aparece en la paleta Color.
Si deseas utilizar un filtro para rellenar un área específica, debes seleccionarla antes de escoger el
comando de filtro. Sin embargo, si deseas aplicar el filtro a la capa completa, no necesitas hacer
primero la selección. Selecciona el menú Filtro Æ Otro Æ DitherBox. Aparece el diálogo
DitherBox.
Si es la primera vez que utilizas un filtro, aparecerá un color, titulado “Motivo 1” en una lista a la
izquierda. Si ya has usado el filtro anteriormente, los otros colores pueden aparecer aquí también.
Igualmente, cuando utilizas el filtro, puedes hacer doble clic en los colores de la lista para
colocarles un nombre y puedes guardarlos en “colecciones” para su uso futuro. La colección por
defecto de colores se denomina “Colección”, la cual aparecerá en la lista desplegable en la lista
de colores.
El color de frente que estaba activo cuando abriste el diálogo de filtros aparece en la casilla
llamada “RGB”. Ahora harás que el filtro DitherBox cree un motivo para simular el color. Haz
clic en la flecha entre las casillas “Motivo” y “RGB”. La casilla “Motivo” muestra ahora un
patrón que simula el color en la casilla “RGB”. Parece ser un color sólido que es ligeramente
diferente al original. Sin embargo, es en realidad un motivo de dos de los colores de la paleta de
Página 91/157
la derecha. Por defecto, la paleta consiste en colores compatibles con Web, aunque puedes cargar
y guardar paletas.
El patrón en sí aparece aumentado en el centro superior del diálogo. Como los dos colores Web
(los mismos que probaste en ImageReady) son bastante similares, y el patrón es de sólo 2 x 2
píxeles, se mezclan entre sí para que no parezcan ser un motivo. Si lo deseas, puedes seleccionar
crear un patrón más grande, de hasta 8 x 8 píxeles, utilizando los botones. Sin embargo, puedes
seleccionar colores de la paleta de la derecha y utilizar la herramienta de Lápiz para pintar los
cuadrados del motivo. Debes utilizar el motivo de 2 x 2 que genera el filtro. Haz clic en
“Rellenar”. Se cierra el diálogo DitherBox y rellena la capa “DitherBox” con el motivo que se
generó.
El motivo crea una simulación de un color mucho más similar al original que los colores Web
que probaste. Puedes ver que es un motivo aumentando la lupa. Selecciona el menú Vista Æ
Zoom (Método abreviado: CTRL +). El motivo de 2 x 2 se hace visible cuando haces doble clic
en el aumento.
Selecciona el menú Vista Æ Zoom (Método abreviado: CTRL -). El motivo aparece como un
color sólido al 100% del aumento.
Debes compararlo al original para constatar que no sea muy distinto pero que evite el tramado de
navegador. Haz clic en el icono del ojo en la columna Visibilidad de capa a la izquierda de la
capa “DitherBox” para ocultarla. El color original aparece y la diferencia no es muy grande.
Haz clic en la pestaña “Optimizada”. El tramado de navegador en el color original es evidente.
Página 92/157
Haz clic en la columna del Ojo a la izquierda de la capa “DitherBox” para mostrarla. El
motivo no muestra tramado de navegador en lo absoluto, aparece como un color sólido.
El fondo mejorado está terminado. Selecciona el menú Archivo Æ Guardar (Método

abreviado: CTRL S).
Haz clic en el botón cerrar de la ventana (Método abreviado: CTRL W).
Resumen
En esta lección aprendiste a preparar de forma efectiva las imágenes para la mayor cantidad
posible de usuarios. Calibraste el monitor para asegurar que la vista de las imágenes concuerde
aproximadamente en el usuario promedio de Windows, pero también de Macintosh. Por eso,
ajustaste la imagen para que se muestre correctamente en ambas plataformas. También
aprendiste que el tramado puede mejorar o empeorar una imagen. Por último, empleaste la paleta
Web para asegurar que las áreas de colores sólidos no se tramen en pantallas de 256 colores.
Aplica tus conocimientos 3-1
Optimizar imágenes
Debes optimizar dos imágenes para practicar la creación de imágenes para que no muestren el
desagradable tramado de navegador.
Abre la imagen “vtlogo.psd” en Photoshop.
Optimiza la imagen en formato GIF con 16 colores y 88% de tramado.
Limita los colores a la paleta Web, luego guarda la imagen GIF.
Guarda y cierra la imagen original.
Abre la imagen “bikeguy.psd” en Photoshop.
Previsualiza la imagen con tramado de explorador, para que veas que el color de piel cambia
porque no se encuentra en la paleta web.
Estando en Photoshop (no en el diálogo Guardar para Web), haz clic en un área de la piel con el
Cuentagotas.
Utiliza la Varita mágica con las opciones “Contiguo” y “Suavizado” desmarcadas, para
seleccionar toda la piel.
Página 93/157
Utiliza el filtro DitherBox para reemplazar la piel con un motivo tramado de dos colores de la
paleta Web. (Pista: en el diálogo DitherBox, debes asegurarte de hacer clic en la flecha entre
“RGB” y el motivo para seleccionar el nuevo motivo).
Experimenta con la optimización de imágenes como archivos GIF (un número mayor de colores
crea transiciones más suaves, pero aumenta el tamaño del archivo). Selecciona el ajuste que
prefieras, luego guarda la imagen GIF.
Guarda y cierra la imagen original.
Cierra todas las imágenes que estén abiertas en Photoshop o en ImageReady, guardando los
cambios.
3A ¿Por qué se realiza parte del proceso de la gestión del color (Adobe Gamma) fuera
de Photoshop?
3B ¿En qué plataforma las imágenes aparecen más claras y cómo podrías ajustar las
imágenes utilizando la configuración de pantalla estándar de Photoshop (el espacio de color
sRGB) para que se compensen correctamente?
3C ¿Por qué a veces es importante asegurarse que algunos colores de las imágenes estén
en la paleta Web?
Nombra tres formas de asegurar que algunos de los colores formen parte de la
paleta Web.
Página 94/157
Lección 4
Diseño de página y sectores
Introducción
Photoshop e ImageReady pueden ser parte importante del proceso de diseño Web. En esta
lección, aprenderás cuatro formas de utilizar Photoshop para crear páginas Web terminadas.
Adicionalmente, utilizarás ImageReady para crear una página Web HTML que muestre una tabla
que contenga una imagen dividida en secciones.
Objetivos
Para que logres utilizar Photoshop e ImageReady efectivamente como parte del proceso de
esquematización y diseño de páginas Web, deberás:
4A Aprender varias formas en que puedes utilizar los editores de imágenes para
facilitar el proceso de diseño.
Aprenderás sobre la forma en que interactúa el trabajo que realizas en Photoshop con la
codificación de páginas Web y las cuatro formas en que Photoshop te asiste, desde el diseño de
páginas individuales hasta la creación de parte del código HTML.
4B Crear el diseño de una página Web con Photoshop.
Manipularás varias imágenes en una ventana de Photoshop para simular la apariencia de una
página Web. Alinearás los elementos de forma precisa utilizando una cuadrícula y guías y harás
que el texto se vea en forma similar a como lo haría en una página Web terminada.
4C Crear la imagen de fondo de una página Web.
Crearás una imagen pequeña que se cargará rápidamente y formará un mosaico para rellenar el
fondo de una página Web cuando ésta se visualice en un explorador. También utilizarás el
elemento de Motivo de Photoshop para simular la apariencia sin tener que crear una página Web
real.
4D Seccionar el área de una imagen grande para emplearla como barra de navegación.
Utilizarás ImageReady para seccionar un área con varios botones en componentes para simular
que carga más rápidamente y que responda al cursor del mouse cuando se vea en un navegador.
Cuando esté terminada, ImageReady generará automáticamente el código HTML para la página
Web real.
Página 95/157
Archivos de datos
Vtwebpage.psd
Healthexpert.psd
Applepearcarrot.psd
Swimgirl.psd

80 minutos
Página 96/157
Tema 4A
Uso de Photoshop y de ImageReady en el diseño Web
Una página Web es un archivo de texto con código HTML que coloca el texto en la página a
través de etiquetas que hacen referencia a archivos gráficos. Así, gran parte del diseño real de
una página Web se hace en general, por quienes crean el HTML. Normalmente, los diseñadores
Web utilizan o bien, un editor de texto o una aplicación dedicada al desarrollo de páginas Web
como Macromedia Dreamweaver, Adobe GoLive, Microsoft Front Page o Adobe PageMill.
Sin embargo, puedes utilizar Photoshop e ImageReady en cuatro aspectos importantes del
proceso de diseño:
Creación de gráficos individuales para las páginas. Hasta ahora has trabajado en esta parte,
cualquiera de los archivos que has guardado en formato GIF o JPEG pueden utilizarse en una
página Web.
Creación de un “modelo” para experimentar. Algunas personas encuentran más fácil de usar
Photoshop para hacer sus bocetos que editarla en HTML cuando diseñan páginas,
particularmente si lo están utilizando para crear parte de los gráficos individuales en las páginas.
Una vez que la apariencia general es aprobada, se puede escribir el HTML para emular el
aspecto que diseñaste en Photoshop. Algunas aplicaciones de edición HTML te permiten ver una
página que diseñaste en Photoshop como una “plantilla” de modo que puedas ser lo más preciso
en el diseño como sea posible.
Creación de fondos para páginas Web. Cada página Web que creas en HTML puede tener un
gráfico designado para el fondo. Cuando la página se ve en un explorador, la imagen de fondo
aparece en mosaico o se repite horizontal y verticalmente tantas veces como sea necesario para
rellenar la pantalla del explorador. Puedes crear la imagen de fondo y utilizar Photoshop para
visualizarla sin tener que escribir el código HTML.
Creación de una imagen dividida. Muchas páginas Web utilizan tablas invisibles escritas en
código HTML para alinear imágenes en una página. Aunque las tablas pueden utilizarse para
imágenes individuales, es posible seccionar un gráfico grande en varios componentes, donde
cada uno llena una celda de la tabla para así simular una unidad. Esto te permite crear varias
imágenes pequeñas en vez de una grande, que te permitirá optimizar cada área tan eficientemente
como sea posible. Asimismo, se reducirán los tiempos, porque el usuario no tendrá que esperar a
que el área completa se descargue antes de que comience a aparecer. También te permite asignar
efectos a cada parte de la imagen, como “imágenes de sustitución” (una imagen que cambia su
apariencia cuando se coloca encima el cursor del mouse) y vínculos URL que te llevarán a otras
páginas cuando el usuario haga clic en el área.
Los primeros tres usos de Photoshop e ImageReady en diseño Web crean archivos de imágenes
individuales, como has hecho hasta ahora. Sin embargo, cuando divides imágenes con
ImageReady, se crea el código HTML para mostrar la imagen en un explorador. También agrega
código JavaScript al HTML para realizar las funciones de imágenes de sustitución.
Página 97/157
Trabajarás en cada uno de estos aspectos del diseño Web en esta lección.
Imágenes de sustitución:
Un efecto que cambia parte de una página Web basado en que el usuario coloque el mouse
sobre un elemento.
JavaScript:
Un lenguaje creado por Netscape que puede controlar la funcionalidad de una página Web; por
ejemplo, puede crear efectos de sustitución para cambiar imágenes cuando el cursor del mouse
se mueva sobre un elemento de la página.
Tema 4B
Crear el diseño de una página Web
Ahora que has creado imágenes individuales para utilizarlas en páginas, trabajarás en el diseño
de una página completa. Como mencionamos en el tema anterior, el objetivo no es crear una
página Web terminada, generalmente esto lo puedes hacer escribiendo el código HTML. Sin
embargo, crearás el “look and feel” que estás buscando.
Diseño general de una página
Primero, debes comenzar el proceso de diseño de una página pensando como navegará el usuario
en el sitio Web. Debes determinar las categorías o áreas generales donde navegará el usuario y
diseñar la página siguiendo el esquema de navegación. Por ejemplo, si el sitio sólo tiene unas
pocas áreas principales, puedes hacer que cada parte se integre a la página de inicio. Si el sitio se
divide en varias categorías, se necesita un esquema de navegación más elaborado. Aunque
puedes pasar mucho tiempo diseñando la navegación del sitio, si diseñas un esquema primero te
ahorrará una gran cantidad de trabajo más adelante, si lo haces bien.
Una vez creados los componentes de navegación, puedes trabajar en el contenido – las imágenes
y texto que son diferentes en cada página. Para el diseño inicial de la página, no debes
preocuparte mucho por el texto exacto o incluso las imágenes exactas, porque cambiarán una vez
que la página real se diseñe.
En general, debes evitar crear muchas áreas con elementos solapados, como el texto en la parte
superior de las imágenes, porque los navegadores más antiguos no soportan el código del HTML
dinámico (DHTML) para crear tales efectos. Sin embargo, puedes crear texto o imágenes en la
parte superior de rectángulos de color sólido porque puede realizarse con una tabla estándar de
HTML.
Página 98/157
Por último, utilizarás Photoshop para simular el texto de una página Web, aunque no haya sido
diseñado para este fin. Photoshop permite subrayar el texto, para simular vínculos de texto.
También te permite crear columnas con texto alineado. Sin embargo, el texto no siempre aparece
suavizado en las páginas Web (dependiendo del sistema operativo), por lo que es necesario que
lo previsualices sin el suavizado.
Suavizado:
Fusionar un color de frente y sus bordes en un color de fondo; generalmente un píxel para el
borde. Con las capas, Photoshop admite esto a través de la disminución de la opacidad de los
píxeles del borde, permitiendo que el fondo se muestre ligeramente. En una imagen acoplada
(una sola capa) resulta difícil aislar y eliminar el efecto del suavizado en caso de que ya esté
implementado.
Actividad 4B-1:
Organizar elementos en una página Web
Objetivo: Utilizar Photoshop como una herramienta para lograr un “look and feel” para una
página Web.
esta lección y no has completado las anteriores, sigue las indicaciones en “Utilizar los datos
almacenados” de la sección “Sobre este curso” al comienzo de este manual.
Debes abrir el diseño de una página que se empezó para el sitio de vitalitytips.com. Selecciona
el menú Archivo Æ Abrir (método abreviado: CTRL O). Aparece el diálogo Abrir.
Navega hasta la carpeta “Photoshop 6.0 Web Data” y selecciona “vtwebpage.psd” de la

lista de archivos.
Haz clic en “Abrir”. La imagen se abre. Muchos elementos, pero no todos, están en su lugar.
Debes agregar algunas de las imágenes con las que has trabajado hasta ahora y afinarás el diseño,
ya que muchos de los elementos se colocaron a mano.
Como mencionamos arriba, el diseño de una página se basa en un esquema de navegación. En

este caso, existen cinco categorías principales en el sitio. Al igual que sucede con otras páginas
Web, aparecen de forma horizontal en una “barra de navegación” en la parte superior y se
muestran otros vínculos verticalmente en la parte izquierda del sitio. Aunque esta no es la única
manera de organizar un sitio, es la más común y la que resulta más funcional para el usuario.
El texto de la página se realiza con las etiquetas de texto, escritas con caracteres de salto de
párrafo al final de cada línea para simular la alineación automática de texto. En la página Web
real, el texto, conocido también como “Lorem ipsum” se reemplazará con artículos reales. Para
Página 99/157
efectos del curso, se incluyen en los datos del curso un archivo de texto llamado
“placeholder.txt” que contiene un texto de prueba.
Como cada elemento de la imagen está en una capa separada, esta imagen cuenta con 26 capas y
agregarás más. Por ello, es posible que tengas que desplazarte por la paleta Capas para verlas
completas. Como se trata de una tarea tediosa, debes cambiar la vista en miniatura de la paleta
Capas para que cada capa consuma menos espacio. Selecciona el menú “Opciones de paleta”
en la lista de la paleta Capas.
Aunque las vistas en miniatura de las capas son útiles, añaden altura a cada capa y por esta razón
las eliminarás. Haz clic en el botón “Ninguno”.
Haz clic en “OK”. Cada capa consume menos espacio para que puedas ver más al mismo
tiempo. Como cada capa tiene su propio nombre, puedes identificar las miniaturas.
Ahora agregarás tres de las imágenes con las que has trabajado en otras lecciones. Puedes
colocar las imágenes originales en la página en vez de las versiones optimizadas, porque no será
la página Web final (la sección de contenido se creará en otro momento con HTML). Incluso si
dividiste la imagen (como aprendiste en el tema “Dividir imágenes”), cada imagen puede
optimizarse de forma separada como parte del proceso. Selecciona el menú Archivo Æ Abrir
(Método abreviado: CTRL O). Aparece el diálogo abrir.
Selecciona el archivo “healthexpertsmall.psd” de la lista.
Haz clic en “Abrir”. La imagen aparece.
Haz clic en la herramienta Mover (Método abreviado: V).
Arrastra la imagen del doctor hasta colocarla debajo de las palabras “Sticking to Your
Plan” (Siguiendo tu plan) en la imagen “vtwebpage.psd”.
Página 100/157
Puedes cerrar la imagen “healthexpertsmall.psd”. Selecciona el menú Ventana Æ

healthexpertsmall.psd.
Haz clic en el botón Cerrar de la ventana (Método abreviado: CTRL W).
Debes agregar dos imágenes más. Selecciona el menú Archivo Æ Abrir (Método abreviado:
Selecciona el archivo “applepearcarrot.psd” de la lista de archivos.
Photoshop incluye herramientas para ayudarte a preparar una galería Web. El comando
Galería de fotos Web prepara los archivos HTML para una galería Web estándar generando
una vista en miniatura de cada imagen y enlazándola con la imagen en su tamaño completo. El
comando también agrega botones de “Adelante” (Forward), “Inicio” (Home) y “Atrás” (Back)
para navegar en la galería. También incluye varias opciones de diseño con marcos. Para
acceder al comando Galería, selecciona el menú Archivo Æ Automatizar Æ Galería de fotos
Web.
Arrastra la imagen debajo de las palabras “Fruits and Vegetables” (Frutas y Vegetales) en
la imagen “vtwebpage.psd”.
Página 101/157
Puedes cerrar la imagen “applepearcarrot.psd”. Selecciona el menú Ventana Æ

applepearcarrot.psd.
Haz clic en el botón Cerrar de la ventana (Método abreviado: CTRL W).
Debes agregar una imagen más. Selecciona el menú Archivo Æ Abrir (Método abreviado:
Arrastra la imagen hacia la izquierda de las palabras “Pool safety for kids” (Seguridad en
la piscina para niños) y el siguiente texto en la imagen “vtwebpage.psd”.
Puedes cerrar la imagen “swimgirl.psd”. Selecciona el menú Ventana Æ swimgirl.psd.
Página 102/157
Debes ver la imagen en su tamaño actual para ver el texto completo antes de editarlo. Selecciona
el menú Vista Æ Píxeles reales (Método abreviado: CTRL ALT 0). La imagen se muestra al
100%.
Arrastra la casilla de tamaño de la ventana para hacerla lo más grande posible.
Haz clic en la capa “Menu Text”.
Haz clic en la Herramienta Texto.
El texto en Photoshop 6 se edita directamente en la página. Para que puedas continuar el texto
que conforma el menú de la izquierda, debes seleccionar primero la última palabra del texto. Haz
doble clic en la palabra “Illness” (enfermedad), la última palabra en la lista del menú del
sitio Web. La palabra “Illness” de la frase “Managing illness” (Manejo de enfermedades) debe
estar seleccionada.
Presiona la tecla Æ. El cursor se mueve hasta la siguiente línea.
Debes agregar un vínculo más. Aunque pueden aparecer con sangría, debes hacerlo
manualmente. Presiona dos veces el espacio.
Escribe Alternative Medicine (Medicina alternativa) después de los espacios que escribiste.
Photoshop no puede crear vínculos reales de texto, pero como los textos en HTML aparecen con
un subrayado, puedes simular los enlaces utilizando este atributo para el texto. Selecciona el
texto que escribiste (no incluyas los espacios).
Haz clic en el botón “Paletas” en la parte superior de la ventana de documento. Aparecen

las paletas Carácter y Párrafo.
Sólo si es necesario, haz clic en la pestaña Carácter.
Selecciona “Subrayado” de la lista en la paleta Carácter, en la esquina superior derecha. El

texto aparece como un vínculo HTML.
Photoshop ofrece varios niveles para el suavizado del texto. Un texto pequeño como este no es
legible con el suavizado “Fuerte”, a diferencia de “Redondeado” o “Nítido”. Verás como cambia
el efecto según la configuración del suavizado. Selecciona “Redondeado” de la lista
“Suavizado” en la parte superior de la ventana de Photoshop. El texto aparece más delgado y
más fácil de leer. La configuración “Nítido” es muy similar a “Redondeado”, pero crea una
apariencia un poco más pesada, con los bordes más oscuros.
Página 103/157
Sólo las últimas versiones de los sistemas operativos Macintosh y Windows realizan el
suavizado del texto automáticamente en la pantalla. Puedes desactivarlo para saber cómo verían
el texto los usuarios de sistemas operativos más viejos. Selecciona “Ninguno” de la lista
“Suavizado”. Se elimina esta opción y se crea un texto redondeado, pero un poco irregular. Es
por ello que muchos diseñadores Web crean los vínculos como estos, en forma de gráficos
porque pueden estar seguros que el texto estará suavizado. Debes desactivar esta opción, porque
lucirá bien para los usuarios. Ya terminaste de modificar el contenido de la página.
Existen muchos elementos en la ventana de Photoshop que, según las circunstancias, pueden ser
útiles o complicar el proyecto. El submenú Mostrar agrupa la mayoría de estos elementos en un
solo menú y te permite mostrar u ocultarlos en forma individual o grupal. Por ejemplo,
mostraste la cuadrícula para visualizar la página Web sin el fondo que te distrae. Otros
elementos que pueden mostrarse y ocultarse incluyen Bordes de selección, Recorrido meta (los
bordes alrededor de los gráficos vectoriales), Guías, Sectores y Anotaciones. También puedes
mostrar todos estos elementos en forma simultánea seleccionando Todo, y ocultarlo con la
opción Ninguno. El comando Mostrar extras (Método abreviado: CTRL H) cambia entre
mostrar y ocultar todos estos elementos aunque puedes editar las opciones Mostrar extras para
que estos elementos adicionales sólo muestren y oculten ciertos elementos. Puedes acceder a las
diferentes opciones seleccionando el menú Vista Æ Mostrar.
Alinear elementos con las guías y la cuadrícula
Las guías y las cuadrículas son muy útiles para alinear elementos cuando se diseña una página
Web. La cuadrícula te permite lograr un espaciado y alineación consistente y mejora la
apariencia general de la página.
Adicionalmente, como el HTML frecuentemente emplea tablas para posicionar elementos,

puedes utilizar las guías para ayudarte a visualizar la estructura de la página y a alinear los
elementos en la página de la misma forma en que aparecerían en un explorador.
Resulta una buena idea basar el diseño con un ancho máximo de página en mente. Por ejemplo,
en un monitor de 640 x 480 píxeles, el contenido que sea más ancho que 600 píxeles requerirá
desplazamiento horizontal (porque los bordes de la ventana y otros elementos toman
aproximadamente 50 píxeles de la pantalla). Igualmente, debes contar sólo 750 píxeles para una
pantalla de 800 x 600 utilizable para contenido Web. Aunque muchos usuarios tienen monitores
configurados en resoluciones más altas, piensa que no son la mayoría; muchos diseñadores
continúan usando 640 píxeles como punto máximo.
Es posible tomar ambas resoluciones en cuenta. Por ejemplo, existen muchas páginas que
contienen la mayoría de su contenido importante dentro de 600 píxeles, pero también se incluye
una “barra lateral” a la derecha visible sin necesidad de desplazarse en un monitor de 800 x 600.
Página 104/157
Debes tomar lo anterior en consideración cuando se selecciona el espaciado de una cuadrícula.

Por ejemplo, si se diseña para ambos anchos (600 y 750 píxeles), es posible que quieras utilizar
una cuadrícula dentro de 600 píxeles y cinco dentro de 750).
Asimismo, puedes configurar el espacio de la cuadrícula dependiendo de como quieres seccionar

el espacio para agrupar los elementos que desees incluir. Por ejemplo, si necesitas seccionar una
página de 600 píxeles de ancho en cinco partes, puedes utilizar un intervalo de cuadrícula de 120
píxeles para seccionarla en forma uniforme.
Actividad 4B-2:
Utilizar una cuadrícula y guías para alinear elementos
Objetivo: Dividir el ancho en secciones para facilitar la alineación de elementos.
Debes visualizar la cuadrícula y utilizarla para alinear algunos de los elementos. Selecciona el
menú Vista Æ Mostrar Æ Cuadrícula (Método abreviado: CTRL ALT ‘). Aparece la
cuadrícula.
No puedes editar las preferencias de Photoshop mientras tengas activa una capa de texto. Haz
clic en la capa “Swimming Girl” en la paleta Capas.
El espacio por defecto es un cuadro por pulgada con cuatro subdivisiones, que no resulta muy
útil para esta actividad. Debes basar el espaciado según el ancho de la página y el número de
botones en la parte superior de la ventana. El espacio de una cuadrícula de 120 píxeles
seccionará el ancho de 600 píxeles de la página en cinco secciones de forma horizontal, que será
lo que utilizarás para alinear los cinco botones. Selecciona el menú Edición Æ Preferencias Æ
Guías y Cuadrícula. Aparece el diálogo asociado.
Escribe 120 en el campo “Gridline Every”.
Selecciona “Píxeles” de la lista desplegable en el campo a la derecha donde escribiste “120”.
Debes subseccionar la cuadrícula en 24 subdivisiones, para que aparezcan cada 5 píxeles (120/5
= 24). Escribe 24 en el campo “Subdivisiones”.
Página 105/157
Haz clic en “OK”. La cuadrícula aparece en la imagen. Cada uno de los botones y los paneles
detrás de los mismos encajan en un bloque de la cuadrícula, porque divide la página en cinco
secciones horizontales.
Debes mostrar las reglas para facilitar la alineación de los objetos. Selecciona Ver Æ Mostrar
reglas (Método abreviado: CTRL R). Aparecen las reglas verticales y horizontales. Las
subdivisiones se alinean con las marcas en las reglas, que se encuentran en un intervalo de cinco
píxeles.
Debes utilizar la cuadrícula para alinear mejor los paneles que están detrás de los botones.
Resulta conveniente agregar también una cuadrícula también, para que puedas indicar qué
subsector de la cuadrícula utilizarás. Debes alinear la parte superior de los paneles en la marca de
155 píxeles en la regla vertical. También puedes crear una guía arrastrándola desde una regla.
Coloca el cursor en la regla horizontal en la parte superior de la ventana.
Arrastra hacia abajo la marca de 155 píxeles en la regla vertical (alineándola con la parte
superior del panel que está más hacia la izquierda). La guía que arrastras se unirá a la
guía, de modo que no es necesario hacerlo perfectamente. Aparece una guía horizontal azul
claro.
Página 106/157
Ahora puedes utilizar la cuadrícula para alinear los elementos. Debes seleccionar la capa que
deseas mover antes de ajustarla. Selecciona la capa “Eating Right panel” (es posible que
necesites subir un poco la paleta Capas para visualizarla).
El color por defecto de las guías es azul claro y el estilo son líneas rectas sin segmentar, aunque
también puedes escoger diferentes colores para las guías. Puedes seleccionar de entre una gran
variedad de colores o con el selector de colores. También puedes cambiar el estilo, de una línea
sólida a una segmentada. Además, es posible cambiar los colores predeterminados para una
cuadrícula (gris) y seleccionar líneas rectas, segmentadas o puntos para el estilo. Puedes
cambiar el color o estilo para las guías y cuadrículas seleccionando el menú Edición Æ
Preferencias Æ Guías y Cuadrículas.
Haz clic en la herramienta Mover.
Debes hacer un pequeño ajuste para alinear el bloque de la cuadrícula. Arrastra el panel para
que la parte superior se alinee con la guía horizontal que colocaste en los 155 píxeles y esté
centrada en el primer bloque de la cuadrícula (debe aparecer una subsector a la izquierda
y derecha en el bloque). El cursor se vuelve blanco cuando se une a una guía o línea de la
cuadrícula. El panel se alinea con las subdivisiones de la cuadrícula.
Puedes seleccionar la capa que contiene el elemento que deseas mover rápidamente manteniendo
presionada la tecla CTRL y haciendo clic en la ventana de la imagen. Debes seleccionar la capa
“Exercise panel” con esta técnica. Mantén presionada la tecla CTRL y haz clic sobre la
palabra “Exercise” en el panel detrás de la ventana de la imagen (no en la palabra
“Exercise”). La capa “Exercise panel” se selecciona en la paleta Capas.
Arrastra el panel para que la parte superior se alinee con la guía horizontal que colocaste
en los 155 píxeles y que se centre en el segundo bloque de la izquierda (debe aparecer una
subsector a la izquierda y derecha del bloque).
También puedes seleccionar una capa marcando la casilla “Selección automática de capa” en
la barra Opciones de herramienta y haciendo clic en un píxel que pertenezca a la capa. No es
necesario mantener presionada la tecla CTRL, mientras haces clic en la imagen. Cuando la
casilla “Selección automática de capa” está marcada, puedes mantener presionada la tecla
CTRL para que cuando se haga clic no se seleccione una nueva capa.
Debes seleccionar cada panel y alinearlo dentro del bloque. Utiliza la técnica de CTRL para
seleccionar cada uno de los paneles restantes y arrastrarlo para que se alinee con la
cuadrícula tal y como hiciste con los dos primeros.
Página 107/157
Debes alinear los botones de los paneles utilizando la misma técnica. Utilizarás un método
abreviado para hacer un acercamiento para que puedas ver los botones y la cuadrícula más
claramente. Mantén presionada la tecla CTRL y la barra de espacio para acceder al cursor
Zoom. Haz clic en el icono “Eating Right” para lograr una magnificación de 200%, luego
suelta las teclas para regresar a la herramienta Mover.
Debes seleccionar primero el botón “Eating Right”. Mantén presionada la tecla CTRL y haz
clic en el botón “Eating Right”. Se selecciona la capa. El botón y el texto están en la misma
capa, por lo que se moverán como una unidad.
La ubicación del cursor mientras arrastras la capa afecta la línea de la cuadrícula o subsector a la
cual se une. Por ejemplo, si arrastras un elemento por el medio, tenderá a unir el centro a una
línea de la cuadrícula. Debes unir los bordes superior e inferior, para colocar el cursor en el
punto de intersección de los bordes superior e izquierdo. Coloca la punta del cursor sobre y
hacia la izquierda del botón redondo “Eating Right” (Comer bien) para que se alinee
aproximadamente con la intersección imaginaria de los bordes superior e izquierdo.
Aunque el cursor está en un espacio transparente, si lo arrastras moverá todo el contenido de la

capa. Arrástralo hacia la izquierda ligeramente para que el borde superior del botón se
alinee con la línea de subdivisión debajo del borde superior del panel y que el borde
izquierdo se alinee con la segunda línea de subdivisión a la derecha del borde izquierdo del
panel.
Existen otras formas de utilizar Photoshop para alinear y distribuir botones de forma uniforme
en una página Web, distinta de la cuadrícula. Puedes utilizar Photoshop para alinear y
distribuir capas enlazadas. Alinear capas te permite hacer que el contenido de la capa
concuerde vertical u horizontalmente a lo largo de una línea recta en un borde o en el centro de
las capas vinculadas. Si tienes tres o más capas enlazadas, puedes distribuir el espacio entre los
objetos de manera uniforme a lo largo del área utilizando el comando Distribuir capas
enlazadas. Como el panel Web está en su propia capa, puedes hacerlo con el boceto de la
página Web de vitalitytips.com. Una vez colocado el primer panel Web en su ubicación vertical
derecha, puedes distribuir los paneles restantes a lo largo del medio para lograr un espaciado
uniforme. Para acceder a los comandos Alinear enlazado y Distribuir enlazados, debes enlazar
Página 108/157
las capas primero. Una vez realizada esta tarea, selecciona el menú Capas Æ Alinear enlazado
o Capas Æ Distribuir enlazado.
Cuando se alinean cada uno de los botones una subdivisión y dos hacia la derecha en los bordes
del panel crearán una apariencia uniforme. Utiliza la técnica de la tecla CTRL para
seleccionar cada uno de los botones restantes y arrastrar cada uno para que se alineen con
la cuadrícula tal y como lo hiciste con “Eating Right”.
Por último, debes alinear el texto y la imagen del experto en salud en el texto “Sigue tu plan”.
Desplaza hacia abajo y a la izquierda, tanto como sea necesario para ver las palabras “This
Issue” (En esta edición), la imagen del experto en salud y parte del texto que está a
continuación, si es posible.
El texto se alinea con el píxel 140 horizontal; debes alinear los otros elementos. Mantén
presionada la tecla CTRL y haz clic en la letra “T” en “This” (en la letra de color, no en el
espacio que lo rodea).
Selecciona para ver la capa “This Issue: Sticking to Your Plan” en la paleta Capas. Si es
necesario, repite el paso anterior hasta que se seleccione.
Arrastra la esquina superior izquierda de la letra “T” para que se una con el píxel 140
horizontal y el 250 vertical (cuatro divisiones a la derecha y dos hacia abajo desde la línea
de cuadrícula más cercana).
Mantén presionada la tecla CTRL y haz clic en la imagen del experto en salud.
Arrastra la imagen para que su parte izquierda se una con el píxel 140 horizontal.
Selecciona el menú Ver Æ Píxeles actuales (Método abreviado: CTRL ALT 0).
Terminaste de alinear los elementos en la página. Selecciona el menú Archivo Æ Guardar

(Método abreviado: CTRL S).
Alinear el texto
El cuadro debajo la imagen del experto en salud debe tener una columna más ancha para que
aparezca más texto. Debes ajustar el ancho de la columna de texto.
Actividad 4B-3:
Ajustar el texto alineado
Objetivo: Cambiar las dimensiones de una casilla de texto alineado en Photoshop.
Página 109/157
Escribe 150 en el campo Magnificación.
Mantén presionada la barra de espacio y utiliza la herramienta Mano para desplazarte, de

modo que puedas ver el título del artículo “Sticking to your plan” y el contenido de la
casilla de texto. La columna es más estrecha que el título del artículo y hay espacio sobrante que
puede utilizarse para mostrar más texto. Debes aumentar la columna de texto para compensar.
Debes seleccionar el primer texto. Haz clic en la capa “150-pixel wide text” (texto de 150
píxeles de ancho) en la paleta Capas. Con la segunda capa seleccionada, puedes transformar la
capa.
Selecciona el comando Edición Æ Transformar Æ Escalar. Aparece una casilla alrededor de

los bordes del texto.
Arrastra la esquina superior derecha de la casilla hacia la derecha hasta que llegue a la
marca de 290 píxeles en la regla horizontal. La casilla se modifica y el texto se estira. No es
necesario distorsionar el texto, por lo que este método para aumentar la columna no es aceptable.
Debes tratar con un método distinto, pero primero debes salir de la transformación actual.
Presiona la tecla ESC. La transformación se deshace y el texto regresa a su tamaño y forma

original.
Si completaste la transformación presionando la tecla ENTER, puedes seleccionar el menú

Edición Æ Deshacer (Método abreviado: CTRL Z) para regresar el texto a su tamaño original
Para que puedas mantener el tamaño del texto mientras transformas el ancho de la columna, el
texto debe seleccionarse como columna. Haz doble clic en el icono de texto en la capa “150-
pixel wide text” en la paleta Capas. Aparece una casilla alrededor del texto, que aparece
resaltado.
El signo más en la esquina inferior derecha de la casilla indica que hay texto más allá de la
casilla de texto. Cuando hagas la casilla más grande, aparecerá más texto.
Puedes utilizar la casilla para cambiar la forma y redimensionar la columna sin modificar el
texto. Coloca el cursor en la manilla del lado derecho de la casilla. Cuando el cursor aparezca
como una flecha doble, indica que puedes transformar las dimensiones de la columna.
Página 110/157
Arrastra la parte derecha de la casilla hacia la derecha hasta que llegue a la marca de 290
en la regla horizontal. La transformación se completa. El texto rellena el espacio y la esquina
inferior derecha no tiene un signo de más, que indica que no hay más texto.
Para deseleccionar el texto y la casilla, puedes cambiar a otra capa en la paleta Capas. Haz clic
en la capa “75-pixel wide text” (texto de 75 píxeles de ancho) en la paleta Capas. La casilla
desaparece y el texto no está resaltado.
Haz clic en el menú Vista Æ Píxeles reales (Método abreviado: CTRL ALT 0).
Tema 4C
Crear fondos de página en mosaico
Las páginas Web creadas con HTML pueden tener uno de dos tipos de fondo, color sólido o una
imagen en mosaico. No necesitas crear colores de fondo sólidos en Photoshop porque éste puede
definirse con el código HTML. Sin embargo, si deseas crear un fondo con una imagen, debes
utilizar Photoshop.
Aunque puedes hacer que una imagen grande rellene el fondo de la página Web, generalmente
resulta una buena idea crear un pequeño archivo para el fondo. Al igual que con todas las
imágenes Web, mientras más grande sea el archivo, más largo será el tiempo de descarga. El
Página 111/157
archivo que creaste aparecerá en mosaico, de modo que incluso un pequeño archivo se repetirá
en toda la ventana.
Uno de los efectos de fondo más comunes es una barra vertical de color que va hacia la parte
izquierda de la página Web. Esta opción es útil porque el área de color en la izquierda puede
funcionar como una “barra de navegación”, donde se incluirá una lista de vínculos. El color
ayuda a separar la barra de navegación del contenido principal de la página.
Debes crear la apariencia de una sola barra vertical a la izquierda. Sin embargo, las imágenes de
fondo se alinearán vertical y horizontalmente, de modo que si haces la imagen de fondo muy
estrecha, se repetirá en la parte derecha de la página.
Figura 4-1: Una barra vertical que es muy estrecha se repetirá a la derecha en una ventana
amplia.
Por ello, debes tomar en consideración el tamaño más grande de ventana que esperas que la
gente utilice cuando visite la página. Los monitores de 15 pulgadas muestran 640 ó 800 píxeles
de ancho, pero los de 21 pulgadas pueden mostrar hasta 1600 píxeles de ancho. Por otra parte, la
mayoría de las páginas Web son diseñadas de tal forma que los usuarios promedio no tienen que
mucho desplazarse horizontalmente, mientras que los usuarios que tengan un monitor más
grande no tendrán que utilizar el ancho completo de la ventana del explorador. Por ello, no es
necesario hacer el mosaico de más de 1600 píxeles de ancho. El fondo de una barra vertical de
1300 píxeles reducirá el tamaño del archivo ligeramente aunque tendrá en cuenta el tamaño de la
ventana de cada usuario.
Puedes crear un efecto de barra de navegación rellenando las celdas de la tabla con color en
HTML o aplicando DHTML. Algunos diseñadores prefieren estos métodos porque ofrecen
mayor control; a diferencia del método de la imagen de fondo, la barra de navegación no
extiende automáticamente la altura completa de la página Web. Sin embargo, aprenderás el
método de la imagen de fondo para crear una barra de navegación. Más adelante, cubrirás partes
Página 112/157
de la barra con otras imágenes para hacer que luzca como si empezara a partir de la mitad
inferior de la página.
Actividad 4C-1:
Crear una barra vertical de color con una imagen de fondo
Objetivo: Preparar una imagen que se utilizará como fondo en una página Web.
Debes crear una imagen de fondo que servirá de barra de navegación en la parte izquierda de la
ventana del explorador. Debes crear una nueva imagen, porque utilizarás los valores del ancho y
alto para minimizar el tamaño del archivo mientras verificas que el fondo se muestre
correctamente. Selecciona el menú Archivo Æ Nuevo (Método abreviado: CTRL N). Aparece
el diálogo Nuevo.
Escribe navbar en el campo “Nombre”.
Escribe 1300 en el campo “Anchura”.
Este fondo no requiere ser muy alto, porque no tiene variaciones. Escribe 5 en el campo “Alto”.
El valor en el campo “Resolución” no es importante, porque sólo pertenece al tamaño impreso de
la imagen.
Selecciona “Color RGB” de la lista “Modo”.
Haz clic en el botón “Blanco” en la sección “Contenido”.
Página 113/157
Las propiedades de capa te permiten cambiar el nombre de una capa o aplicar un color
diferente a las dos primeras columnas de la capa en la paleta Capas. Existen varias formas de
acceder al diálogo Propiedades de capa:
Selecciona el menú Capa Æ Propiedades de capa.
Selecciona Propiedades de capa en la lista de la paleta Capas.
Haz clic en el botón derecho en la capa en la paleta Capas y selecciona la opción en el menú
contextual que aparece.
Mantén presionada la tecla ALT y haz doble clic en el nombre de la capa.
Haz clic en “OK”. Aparece la imagen.
Debes ver la imagen en una magnificación mucho mayor para que puedas apreciar el espacio en
blanco de la imagen. Escribe 400 en el campo Magnificación en la esquina inferior izquierda
de la ventana de aplicación.
Presiona ENTER. La imagen aumenta a 400%.
Arrastra la casilla de tamaño de la ventana para que se muestre la altura y el ancho total
tanto como sea posible.
Debes seleccionar el color para utilizar en la barra de navegación. Debes tomar una muestra del
color “vt” en el logo vitalitytips.com. Cuando tomes muestras de colores Web, debes asegurarte
que sólo tomas un píxel en vez del color promedio del área. Haz clic en la herramienta
Cuentagotas en la caja de herramientas (Método abreviado: I).
Página 114/157
Selecciona “De un punto” en la lista “Tamaño de muestra” en la barra Opciones de

herramienta, si es necesario.
Arrastra la barra de título “navbar” tanto como sea necesario para ver el logo en la
ventana “vtwebpage”.
Puedes tomar una muestra del color en una ventana de fondo sin activarla. Haz clic en el
carácter “vt” en el logo “vitalitytips.com” para mostrar el color dorado. El color R: CC
G:CC B:33 (que corresponde a R: 204 G: 204 B: 51), perteneciente a la paleta Web, se
selecciona. La ventana “navbar” permanece activa.
Puedes hacer que el color en la izquierda de la imagen se extienda 120 píxeles de ancho, el cual
debe ajustarse al espacio de cuadrícula que utilizas para el diseño de la página y tiene suficiente
espacio para colocar una lista de vínculos a otros sitios Web. Desplázate hacia la izquierda de
la imagen hasta que puedas ver la marca 0 en la regla horizontal.
Selecciona la herramienta Marco horizontal en la caja de herramientas (Método abreviado

del grupo: M).
Escribe 0 en el campo “Calado” en la barra Opciones de herramienta.
Arrastra un marco desde la esquina superior izquierda de la imagen hasta el final de la

marca de la regla 120 píxeles horizontal. La selección se encaja a la cuadrícula.
Puedes llenar el área utilizando un método abreviado. Presiona ALT SUPRIMIR. El área se
rellena con el color de fondo.
Puedes reducir la imagen a un solo píxel de alto para disminuir el tamaño del archivo
(comenzaste con cinco para facilitar la selección). Debes utilizar un tipo de marco especial.
Mantén presionado el botón del mouse en el grupo de la herramienta Marco y selecciona la
herramienta Marco fila sencilla en el menú que aparece.
Haz clic en el menú Selección Æ Deseleccionar (Método abreviado: CTRL D).
Haz clic en cualquier lugar de la imagen. Se selecciona una sola fila de píxeles.
Puedes recortar la imagen para incluir sólo el área seleccionada. Selecciona el menú Imagen Æ
Recortar. La imagen se reduce a una sola fila de píxeles.
Se completa la imagen original. Selecciona el menú Archivo Æ Guardar (Método abreviado:

CTRL S). Aparece el diálogo Guardar como porque no se ha guardado todavía la imagen.
Página 115/157
Haz clic en “Guardar”. La imagen se guarda como “navbar.psd” en la carpeta “Photoshop 6

Web Data”.
También es posible guardar una versión optimizada de la imagen. Selecciona el menú Archivo
Æ Guardar para Web (Método abreviado: CTRL ALT SHIFT S). Aparece el diálogo Guardar
para Web.
Selecciona “GIF 32 sin tramado” de la lista “Ajustes”. Aunque esta configuración permite 32
colores, la imagen sólo tiene dos, de manera que los ajustes están correctos. El tamaño del
archivo es de sólo 87 bytes aproximadamente y permitirá una carga bastante rápida.
Puedes utilizar la configuración por defecto. Haz clic en “Guardar”. La imagen optimizada se
guarda como “navbar.gif” en la carpeta “Photoshop 6.0 Web Data”.
Imágenes de fondo en mosaico
El archivo GIF que acabas de crear es el archivo final que debería especificarse en el código
HTML como el fondo. No es necesario colocar la imagen en mosaico para crear un fondo más
grande; la aplicación del explorador lo hará automáticamente. Sin embargo, es una buena idea
ver cómo aparecerá el mosaico, para asegurarte que se prepare el archivo correctamente. Puedes
utilizar la imagen para crear un motivo en Photoshop, el cual se utilizará para llenar una imagen
mucho más grande. Photoshop colocará el mosaico de la misma forma que lo hace la aplicación
del explorador Web.
Actividad 4C-2:
Probar una imagen de fondo colocando un mosaico como motivo en Photoshop
Objetivo: Ver el efecto que un archivo de fondo crea en un explorador.
Debes definir un motivo utilizando esta imagen de fondo, para que puedas aplicarlo a la imagen
de la página Web con la que vienes trabajando. Haz clic en el menú Selección Æ Todo (Método
abreviado: CTRL A). La página entera, una forma rectangular, se selecciona. Debes seleccionar
un área rectangular para poder definir un motivo, porque un mosaico en cualquier otra forma no
encajará uniformemente.
Selecciona el menú Edición Æ Definir motivo. El diálogo Nombre del motivo aparece.
Si alguna vez tratas de hacer un motivo seleccionado un área rectangular con la herramienta
Marco rectangular y el comando Motivo, pero el comando Motivo no aparece activo, busca en
la barra Opciones de herramienta para ver si hay una cantidad diferente a 0 en la opción
Página 116/157
Calado para la herramienta Marco rectangular. Photoshop no puede crear un motivo de

mosaico a partir de una selección feathered, sólo a partir de una de bordes rectos. Para
solucionar este problema, escribe un valor de 0, deselecciona y vuelve a seleccionar el área.
Debes utilizar el nombre por defecto que aparece para el motivo. Haz clic en “OK”.
Puedes rellenar áreas con este motivo. Debes crear una nueva capa en la imagen “vtwebpage”
para relleno y que aparezca el fondo como lo haría en una página Web. Haz clic en la ventana
de título de “vtwebpage.psd”.
Cuando crees una nueva capa, ésta aparecerá directamente sobre la capa activa. Puedes poner
este fondo justo en la parte superior de la capa “White Background” (Fondo blanco). Haz clic en
la capa “White Background” (la del final) en la paleta Capas.
Mantén presionada la tecla ALT y haz clic en el botón Crear nueva capa en la parte final
de la paleta Capas. Cuando mantienes presionada la tecla ALT en Photoshop (no en
ImageReady) mientras creas la capa se abre el diálogo Nueva capa.
Escribe Navbar en el campo “Nombre”.
Haz clic en “OK”. La nueva capa “Navbar” aparece sobre la capa “White Background” en la
paleta Capas.
Haz clic en la herramienta Mover (método abreviado: V).
Ahora puedes rellenar la capa con el motivo que creaste, el cual se mostrará en mosaico para
rellenar la ventana completa. Debes utilizar el comando Rellenar para aplicar el motivo.
Selecciona el menú Edición Æ Rellenar (Método abreviado: SHIFT RETROCEDER
ESPACIO). Aparece el diálogo asociado.
En vez de rellenar el área con el color de frente, utilizarás el motivo. Selecciona “Motivo” de la
lista “Usar”.
Aparece un motivo de nubes en la casilla “Motivo personalizado”, pero no es el motivo que vas a
utilizar. Haz clic en el triángulo en la derecha de la casilla “Motivo personalizado” para
abrir el Selector de motivo. Aparece un grupo de motivos debajo de la casilla “Motivo
personalizado”.
Haz clic en el motivo “navbar.psd”, el último en el grupo de motivo, luego vuelve a

seleccionar el triángulo para eliminar el Selector de motivo. Se selecciona ahora el motivo
correcto.
Página 117/157
El motivo aparecerá con la opacidad al 100% y el modo de fusión Normal para que luzca como
el original. Haz clic en “OK”.
El motivo se repite varias veces verticalmente, formando una barra dorada que va hacia el lado
izquierdo de la imagen. Como la imagen es más estrecha que el motivo original, no se mostrará
el mosaico horizontal. Esta imagen simula la apariencia del fondo en una ventana de explorador
menor a 1300 píxeles de ancho. Selecciona el menú Archivo Æ Guardar (Método abreviado:
CTRL S).
Como el motivo aparece correctamente, puedes guardar y cerrar la imagen de fondo original.
Selecciona el menú Ventana Æ navbar.psd.
Haz clic en el botón cerrar de la ventana “navbar.psd”, guarda los cambios cuando te
indique el programa. (Método abreviado: CTRL W).
Tema 4D
Dividir imágenes
Como mencionamos en el primer tema de la lección, ImageReady te permite seccionar una

imagen grande en secciones para tratar de alinearlas en una tabla de HTML. También puede
generar la tabla HTML, así como para crear efectos de sustitución en JavaScript.
Dibujar formas con Photoshop
Debes completar la apariencia del área que deseas seccionar antes de seccionarla; Photoshop
ahora incluye herramientas para dibujar formas y puedes especificar que cada forma que dibujes
Página 118/157
automáticamente se convierta en una nueva capa. Adicionalmente, algunas de las nuevas

herramientas de dibujo de Photoshop incluyen esquinas redondeadas.
Actividad 4D-1:
Utilizar las herramientas de dibujo de Photoshop
Objetivo: Terminar la apariencia de una página Web dibujando formas con Photoshop.
Ahora debes terminar la apariencia de la página Web de vitalitytips.com cubriendo las partes de
la imagen que se extienden en la parte superior de la página y agregando una barra horizontal
detrás de los cinco colores y paneles. Primero, debes agregar las guías que necesites para
organizar los paneles. Comienza moviendo la guía horizontal en 155 píxeles, cinco píxeles más
arriba para ubicar la parte superior de la barra horizontal que agregarás. Utiliza la herramienta
Mover para arrastrar la guía horizontal de 155 píxeles una subdivisión en la cuadrícula. La
guía se ajusta en 150 píxeles.
Esta imagen contiene capas que se han ocultado temporalmente. Debes ver una para entender su
función. Haz clic en la capa “Healing description” (Descripción de la cura) en la paleta
Capas. La capa aparece en la imagen como una línea de texto debajo de los paneles. Cada una de
estas categorías tiene una descripción similar. Más adelante configurarás las divisiones en
ImageReady para que cuando el usuario mueve el cursor del mouse sobre un botón, aparezca el
texto relacionado.
Ahora debes hacer que la barra horizontal que coloques detrás de los botones se ajuste a las
descripciones del texto, para que puedas colcar la guía debajo del texto. Arrastra una guía de la
regla horizontal a la línea de subdivisión en 255 píxeles (tres líneas de subdivisión sobre la
línea de la cuadrícula en 240 píxeles).
Ahora debes agregar una guía vertical. Arrastra una guía vertical de la regla vertical a la
línea de la cuadrícula en 120 píxeles. La guía se ajusta a la línea de la cuadrícula.
Debes crear tres guías verticales más que se ajusten con las tres otras líneas verticales de la
cuadrícula. Coloca el cursor en la regla vertical y dibuja una guía en la línea de los 480
píxeles (a la derecha). La guía se ajusta a la línea de la cuadrícula.
Repite el procedimiento y arrastra dos guías más hasta las dos líneas principales en 240 y
360 píxeles. Ahora tienes cuatro guías con espacios uniformes. Estas guías ayudan a seccionar la
ventana en cinco secciones. Estas guías son útiles para dibujar y seccionar imágenes.
Antes de dibujar la barra horizontal, debes borrar parte de la barra de navegación. Haz clic en la
capa “Navbar” en la paleta Capas.
Página 119/157
Selecciona el menú Ver Æ Encajar en pantalla (Método abreviado: CTRL 0).
Para facilitar el dibujo desde la esquina superior izquierda, debes aumentar el tamaño de la
ventana ligeramente. Arrastra la casilla de tamaño de la ventana hacia abajo y a la derecha
para que aparezca un poco de espacio gris alrededor de la imagen en la ventana.
Selecciona la herramienta Marco rectangular (Método abreviado del grupo: M).
Dibuja un marco rectangular desde el espacio sobre la esquina superior izquierda hasta el
borde derecho de la imagen en la guía horizontal que colocaste en la marca de 225 píxeles
(debajo de la descripción del texto).
Presiona SUPRIMIR. La parte superior de la barra de navegación se elimina.
Haz clic en el menú Selección Æ Deseleccionar (Método abreviado: CTRL D).
Debes seleccionar el color de frente para pintar la barra horizontal. Debe concordar con la barra
de navegación vertical. Haz clic en la herramienta Cuentagotas en la caja de herramientas.
(Método abreviado: I).
Haz clic en el color dorado en la barra de navegación. Se selecciona el color frontal.
Ahora debes utilizar las herramientas para dibujar objetos de Photoshop en vez de las
herramientas de selección para agregar la barra horizontal. A diferencia de las herramientas de
selección, las herramientas de dibujo pintan directamente en la imagen y puedes crear una nueva
capa para cada forma que dibujes. Debes agregar un rectángulo con los bordes redondeados.
Mantén presionado el botón del mouse en la herramienta Rectángulo en la caja de
herramientas y arrástralo para seleccionar la herramienta Rectángulo con bordes
redondeados.
Debes hacer que las esquinas redondeadas concuerden con las del panel detrás de los botones.
Escribe 15 en el campo “Radio” en la barra Opciones de herramienta. Se ajustan los radios
de las esquinas para los rectángulos que creaste.
Presiona ENTER. Se configura el radio.
En caso de que no esté seleccionado, haz clic en el botón “Crear nueva capa de forma”. Se
crea una capa automáticamente para incluir el rectángulo redondeado que dibujaste.
Dibuja desde la intersección de la guía en la marca de 150 píxeles y en el borde izquierdo de

la imagen hacia abajo y hacia la derecha de la intersección de la guía de 255 píxeles en el
Página 120/157
borde derecho. Photoshop crea una capa “Forma 1” justo sobre la capa “Navbar” y rellena el
área con el color dorado cuando termines de arrastrar.
Debes cambiar dos áreas pequeñas para completar la barra. Debes eliminar el espacio en blanco
en la parte inferior izquierda y debes redondear la esquina interna debajo de la palabra “Advice”
(Consejo). Afortunadamente, la configuración de la herramienta cambió automáticamente de
“Crear nueva capa de forma” a “Agregar área a forma +”, por lo que no será necesario agregar
nuevas capas mientras sigas dibujando. Arrastra el mouse para crear un rectángulo que
rodee completamente el espacio donde se cruzan las barras horizontal y vertical. El espacio
se cubre.
Para rodear la esquina interna, puedes crear un rectángulo que cubra bastante espacio y luego
borrar parte del mismo. Dibuja un rectángulo aproximadamente como se indica a
continuación.
Rellenaste un área grande con el color dorado. Ahora puedes borrar parte del área adicional con
la herramienta Rectángulo redondeado, dejando la esquina redondeada que desees. Haz clic en el
botón “Quitar área de forma” en la barra Opciones de herramienta.
Coloca el cursor en la intersección de la guía vertical en 120 píxeles y en la horizontal de

225 píxeles.
Dibuja hacia abajo y a la derecha un rectángulo con los bordes redondeados que rodee el
área que acabas de pintar. La esquina redondeada permanece.
Puedes combinar formas vectoriales de un objeto sencillo y eliminar los bordes de la forma.
Selecciona la herramienta Path Component en la caja de herramientas (Método abreviado
del grupo: A).
Página 121/157
Haz clic en la forma vectorial de la barra de navegación horizontal. Aparece una casilla
vectorial alrededor del objeto, que indica que ha sido seleccionado.
Mantén presionada la tecla SHIFT y haz clic en la forma que dibujaste para cubrir el
espacio en blanco y las dos figuras que conforman la esquina interior. Todas las formas
vectoriales que comprenden la barra de navegación y la esquina interior deben estar
seleccionadas.
Haz clic en el botón “Combinar” en la barra Opciones de herramienta. Las formas se

combinan y forman una figura vectorial sencilla. Puedes combinar también las formas
vectoriales tramando la capa. Si haces esto, los objetos no podrán editarse como formas
vectoriales y los datos de trama aumentarán el tamaño del archivo, a diferencia de las imágenes
vectoriales.
Ya terminaste de dibujar la barra de navegación horizontal. Selecciona el menú Archivo Æ

Guardar (Método abreviado: CTRL S).
Crear divisiones en ImageReady
ImageReady ofrece gran control en la división de imágenes. Para generar las guías inicialmente,
puedes permitir que ImageReady divida automáticamente la imagen basada en las guías que
incluye o también puedes crearlas manualmente con la herramienta Dividir. Las divisiones son
siempre editables, por lo que puedes cambiar el tamaño y forma tantas veces como sean
necesarias con la herramienta Seleccionar división para fraccionar la imagen en la forma que
desees.
Como todo el espacio en la imagen debe ser tomado en cuenta, ImageReady generará de forma
automática nuevas divisiones según sea necesario. Por ejemplo, la imagen comienza con una
división grande. Si utilizas la herramienta Dividir para crear una división en la esquina superior
izquierda, ImageReady generará otra división al lado y debajo para que la imagen se llene con
las divisiones. Así, incluso si sólo arrastraste una división, la imagen tendrá tres ahora.
Puedes designar que las divisiones específicas en la imagen no contengan una imagen.
Photoshop luego creará el área como una celda HTML vacía en vez de generar una imagen
optimizada en la ubicación. Si designas algunas divisiones como “Sin imagen” puede ayudar a
controlar el tamaño del archivo de la página completa, porque el espacio vacío en las tablas
HTML no agrega nada al tamaño del archivo, pero una imagen, incluso si es un color sólido, sí
lo hace.
Debes considerar si deseas seccionar el boceto de la página Web completo. Si es así, puedes
especificar que las áreas donde el contenido se colocará se almacenen como divisiones “Sin
imagen”. Por ejemplo, si especificaste que todo lo que se encuentre debajo y a la derecha de la
barra de navegación funcione como una gran celda vacía, la persona que se encarga del código
Página 122/157
HTML podría agregar contenido de la página en la celda (y subseccionarla en celdas adicionales

también).
Sin embargo, puedes seleccionar además recortar la imagen para incluir sólo el área de
navegación en la parte superior. Esto creará un archivo HTML que no incluirá el contenido de la
página; la persona que se encargue de escribir el código HTML podría agregar contenido en
cualquier forma que deseen en la parte inferior. Este método es útil si tratas de crear una barra de
navegación vertical como fondo, por ejemplo, porque el archivo dividido no incluye una barra
vertical en sí. También es preferible que los diseñadores HTML que utilicen DHTML, porque no
los restringirá a diseñar las páginas usando tablas.
Aunque Photoshop ha incluido muchas opciones de división en ImageReady, existen algunos

aspectos de la división (como configurar un esquema de optimización separado para divisiones
individuales) que sólo pueden realizarse en ImageReady.
También, puedes preparar la imagen lo más posible antes de seccionarla. Al agregar guías,
seleccionar un ajuste de optimización general y activando las capas “por defecto” antes de
seccionar, puedes ahorrar tiempo creando las divisiones y evitar tener que cambiar cada división
en forma separada luego.
Actividad 4D-2:
Crear y editar divisiones
Objetivo: Dividir una imagen para prepararla para crear un archivo HTML que las una
cuando se visualice en un explorador.
Debes agregar una guía más para seccionar los botones de categoría del mensaje descriptivo
debajo de la barra de navegación horizontal. Debes desactivar el comando Ajustar a cuadrícula
para que puedas colocar una guía en cualquier incremento. Selecciona el menú Vista Æ Ajustar
a Æ Cuadrícula para desmarcarla (Método abreviado: CTRL SHIFT ;).
Dibuja una guía desde la regla horizontal hasta los paneles que rodean los botones
(aproximadamente en la marca de 206 píxeles debajo de la regla vertical). La ubicación
exacta no es crucial siempre que la guía esté entre los paneles y el texto descriptivo.
Los objetos en Photoshop por defecto se ajustarán automáticamente a las guías, cuadrículas,
sectores y los bordes del documento. Sin embargo, puedes desactivar la opción de ajuste para
algunos o todos estos elementos utilizando el submenú Snap to debajo del menú Vista.
Página 123/157
Ahora debes seleccionar un ajuste de optimización por defecto, el cual debe realizarse en
ImageReady. Haz clic en el botón Ir a ImageReady en la caja de herramientas (Método
abreviado: CTRL SHIFT M).
Después de seccionar la imagen, puedes cambiar la optimización de cada división en forma

separada, aunque lo más fácil es colocar la optimización primero. Como lo que debes tomar en
cuenta es la apariencia de la barra de navegación y porque contendrá la mayor cantidad de
divisiones, debes basar la decisión en cómo aparecerán los botones. Haz clic en la pestaña
“Optimizada”.
Como la barra de navegación incluye colores planos, debes utilizar una optimización GIF. Haz
clic en la pestaña Optimizar.
Para mantener las sombras uniformes debajo de los botones, necesitarás utilizar un número
bastante grande de colores. Selecciona la opción “GIF 64 con tramado” de la lista “Ajustes”
en la paleta Optimizar. Los botones y sombras se ven bastante uniformes. Si colocas más
colores, las sombras mejorarán pero aumentará el tamaño del archivo.
Puedes regresar a la vista Original para que no tengas que esperar a que ImageReady dibuje de
nuevo la pantalla para optimizar la imagen cada vez que realices cambios. Haz clic en la
pestaña “Original”.
Para que puedas trabajar más rápido con la paleta Capas en ImageReady, puedes eliminar la vista
en miniatura de la capa tal y como lo hiciste en Photoshop. Selecciona “Opciones de paleta” de
la lista en la paleta Capas. Aparece el diálogo Opciones de paleta.
Haz clic en “Ninguno” en el botón de la casilla “Tamaño de miniatura”.
Haz clic en “OK”. Como no muestra la imagen en miniatura para cada capa, la paleta Capas se
muestra mucho más condensada.
Ahora debes preparar la imagen como debe aparecer al usuario cuando ésta se cargue en el
explorador. En vez de mostrar siempre los paneles detrás de cada botón, debes ocultarlos y luego
utilizarás “imágenes de sustitución” o “rollovers” para que aparezcan de forma individual cuando
el usuario pase el cursor del mouse sobre cada una. Igualmente, debes ocultar el texto
descriptivo, para que sólo aparezca cuando sea necesario. Por ejemplo, cuando el usuario mueva
el mouse sobre el botón “Exercice”, debes hacer que el panel detrás del botón y el texto
descriptivo específico de la sección aparezca.
Luego ocultarás temporalmente para ajustar la imagen como debe aparecer en principio. Haz clic
en el icono del ojo en la columna Visibilidad de capa a la izquierda de la capa “Healing
description” en la paleta Capas para ocultarla. La descripción desaparece.
Página 124/157
Haz clic en los iconos de los ojos en la columna Visibilidad de capa a la izquierda de capa
una de las siguientes capas en la paleta Capas para ocultarlas: panel Eating Right (Comer
bien), panel Exercice (Ejercicio), panel Lifestyle (Estilo de vida), panel Fitness News
(Noticias de Fitness) y panel Healing (Curar). La imagen aparece ahora como debería aparecer
cuando el usuario la abra en un explorador.
Puedes comenzar dividiendo la imagen. Primero debes comenzar mostrando las divisiones de la
imagen. La imagen completa es una sola división por defecto. Selecciona el menú Vista Æ
Mostrar Æ Divisiones. La primera división aparece como una “auto-división”, algo que genera
ImageReady. La imagen aparece ligeramente aclarada. Luego de seccionar esta imagen, la parte
que selecciones aparecerá sólida para que puedas saber cuál ha sido seleccionada.
Debes experimentar primero con la creación de divisiones basadas en las guías. Selecciona
División Æ Crear divisiones a partir de guías. Se han creado 20 divisiones en la imagen
basadas en la intersección de las guías. Aunque quieras modificar las divisiones, este es un buen
punto de partida.
Ahora deberás agregar divisiones manualmente utilizando la herramienta Dividir. Haz clic en la
herramienta Sector en la caja de herramienta (Método abreviado: K).
Debes comenzar agregando un sector para seccionar la publicidad y el logo vitalitytips.com en

dos celdas de tabla. Como la imagen completa siempre está rellena con las divisiones (incluso
antes de que comenzaras, sólo había una división), cuando arrastras para crear sectores,
sobrescribes los existentes. Arrastra el mouse de la esquina superior izquierda hacia el borde
de derecho de la imagen, sobre el logo vitalitytips.com. Cuando sueltes el botón del mouse,
habrás creado una nueva división. El resto de las divisiones se ajustan automáticamente. Ahora
hay 21 divisiones en la imagen.
Página 125/157
Debes agregar otra división para que rodee el logo de vitalitytips.com. Resulta una buena idea
hacer los sectores de un largo suficiente para que incluya la imagen, porque la celda tendrá un
tamaño de archivo más pequeño y puedes designar que la celda vecina no contenga ninguna
imagen también. Arrastra el mouse desde la esquina superior izquierda del sector 2 hacia la
parte inferior del sector existente, hacia la derecha del logo vitalitytips.com. La nueva
división 2 que creaste rodea el logo.
Los estilos de capa te permiten aplicar un efecto a una capa completa. En la producción Web,
los estilos de capa son especialmente útiles para crear estados de sustitución en ImageReady
para los botones de páginas Web que se incluyan en sus propias capas. Existen tres estilos de
capa populares para crear estados de sustitución: Sombra inferior, Brillo externo y Color
overlay.
La sombra inferior se aplica normalmente a botones en una página Web para hacer que luzcan
tridimensionales, incluso en su estado “normal” de sustitución. Si reduces el tamaño de la
sombra que ocurre durante una acción de sustitución (por ejemplo, cuando se hace clic), puedes
producir un efecto donde el botón pareciera que fue “presionado” momentáneamente.
Cuando aplicas un brillo externo como un estado de sustitución, el botón lucirá “encendido”
cuando se selecciona.
Un efecto de color overlay cambia el color de un objeto, de modo que el botón en un estado de
sustitución cambiará de gris a rojo, por ejemplo, para indicar que el botón fue seleccionado.
Puedes seleccionar y ajustar las divisiones en cualquier momento. Debes combinar las secciones
3, 4 y 5 en una misma división, porque las tres no son necesarias en ese espacio vacío. Mantén
presionado el botón del mouse en la herramienta Sector y arrástralo hasta que veas la
herramienta Seleccionar sector.
Haz clic en el sector 3. Cuando crees divisiones en esta forma, ImageReady “recordará” la
posición y tamaño original de la división, de modo que el borde alrededor de la división 3 se
extienda de su posición original entre las guías. Esto resulta conveniente para edición, porque
puedes regresar a un estado anterior de las divisiones si borras o editas una. Sin embargo, cuando
ImageReady genera la tabla HTML, lo hará según la configuración actual, para que no haya
solapamientos.
Página 126/157
Puedes seleccionar varios sectores al mismo tiempo. Mantén presionada la tecla SHIFT y haz
clic en los sectores 4 y 5. Los tres sectores se seleccionan al mismo tiempo.
Selecciona el menú Sectores Æ Combinar sectores. Los tres sectores se combinan y forman el
sector 3.
Puedes combinar los sectores que están en la parte superior de otro sector. Debes combinar los
sectores 9 y 14 de forma similar. Haz clic en el sector 9.
Mantén presionada la tecla SHIFT y haz clic en el sector 14. Los dos sectores se seleccionan.
Selecciona Sectores Æ Combinar sectores. Se combinan ambos sectores y forman una división
9 más grande.
Debes combinar desde el sector 10 al 13 en uno mismo. Puedes arrastrar un marco desde el
exterior de la imagen para seleccionar varios sectores rápidamente. Si es necesario, arrastra la
casilla de tamaño de la ventana para aumentar ligeramente el ancho de la ventana y que se
muestre espacio gris fuera de los bordes de la imagen.
Cuando comiences a crear estados de sustitución para los botones en una página Web, es
posible que debas volver a dibujar los sectores para acomodar el tamaño del gráfico de
sustitución o porque desees mover el botón. Sin embargo, puedes evitar tener que volver a
colocar los sectores creando un sector a partir de una capa. Cuando el sector se basa en la
capa, el área de selección incluirá siempre cualquier píxel de datos que agregues a la capa.
Incluso si mueves la capa, el área del sector se ajustará automáticamente para incluir los
píxeles que lo rodean. Para crear un sector basado en una capa, selecciona el menú Capa Æ
Sector basado en nueva capa.
Arrastra la herramienta Seleccionar sector desde el espacio gris hacia la derecha del sector
13 hacia la izquierda hasta que toque el sector 10. Se seleccionan los sectores 10 al 13.
Puedes seleccionar los comandos de división desde un menú contextual. Haz clic en uno de los
sectores seleccionados y elige “Combinar sectores” en el menú que aparece. Los sectores se
reemplazan por un solo sector 10.
Aunque el área debajo de la barra de navegación contiene texto, ImageReady no puede

convertirlo en texto editable; se crearía como una imagen como el resto de los sectores. Por ello,
todo el texto se reemplazará con código HTML en la página Web real.
Página 127/157
Debes designar que el área del contenido de la página actúe como un solo sector, el cual
designarás más adelante como “Sin imagen”. Arrastra la herramienta Seleccionar sector
desde el espacio gris en la derecha de la división 14 hacia la izquierda hasta que toque el
sector 11. Se seleccionan los sectores 11 al 14.
Haz clic en el botón derecho en uno de los sectores seleccionados y elige “Combinar
sectores” en el menú contextual que aparece. Los sectores se reemplazan con una sola división
11.
Como la esquina superior izquierda del sector 11 contiene la esquina redondeada que creaste, no
debe ser parte del área “Sin imagen”. Por eso, debes seleccionar un sector de “área de contenido”
con la herramienta Sector que no incluya la esquina redondeada. Selecciona la herramienta
Sector en la Caja de herramientas.
Dibuja un sector desde la esquina superior izquierda de la letra “T” en “This Issue” hacia
la esquina inferior derecha de la imagen. El sector aparece como 13; ImageReady generó
automáticamente nuevos sectores 11 y 12.
Cada estado de sustitución puede contener modificaciones para las capas. Si haces un cambio a
una capa, verás que no se aplica automáticamente a todos los estados de sustitución. Si deseas
aplicarlo a todos, selecciona la capa, luego “Match Layer across all rollovers” en la paleta
Rollover. Esta operación cambiará todos los rollovers de los sectores en una imagen.
Igualmente, puedes hacer que la capa aparezca igual en todos los estados de sustitución, para
un sector seleccionando “Match Layer Across States” de la paleta Rollover.
Página 128/157
La parte superior del tallo de la pera puede extenderse más allá del sector 13. Puedes ajustar el
tamaño de cualquier sector con la herramienta Seleccionar sector. Haz clic en la herramienta
Seleccionar sector.
Arrastra la manilla de la esquina superior izquierda del sector 13 hacia arriba y hacia la
izquierda ligeramente para que todo el contenido de la página se encierre en el área blanca.
Creaste todos los sectores de la imagen. Selecciona el menú Archivo Æ Guardar (Método
abreviado: CTRL S).
Modificar sectores individuales
Una de las ventajas de seccionar imágenes es el control que ejerces sobre cada división
individualmente. Con un solo sector seleccionado, puedes seleccionar la paleta Optimizar para
mejorar sus ajustes y crear la mejor apariencia y tamaño de archivo posibles para esa área de la
imagen.
Con un sector seleccionado, puedes utilizar la paleta Sector para especificar lo que no se incluirá
en la imagen, para que ImageReady genere una celda HTML vacía en su lugar. Cuando
especificas “Sin imagen” en un sector, puedes seleccionar un color para rellenar cada celda.
Puedes utilizar esta técnica para reemplazar áreas de color sólido en la imagen con código
HTML, reduciendo así el tamaño del archivo. También puedes utilizar la paleta Sector para
especificar un URL para el sector, y así ir a otra página Web cuando se haga clic en el mismo.
Por último, puedes utilizar la paleta Rollover para especificar estados de sustitución que
respondan a los movimientos y a los clics del mouse del usuario. El sector podría cambiar su
apariencia cuando el cursor se mueva dentro o fuera del mismo y cuando se haga clic dentro del
sector.
Actividad 4D-3:
Optimizar sectores y crear celdas de tablas vacías, vínculos y rollovers
Objetivo: Optimizar sectores específicos, convertir sectores a celdas HTML vacías y crear
vínculos URL y rollovers.
Debes modificar las celdas individuales. Primero, debes cambiar la optimización para el logo
porque no necesita tantos colores como las imágenes de la barra de navegación. Haz clic en el
logo vitalitytips.com con la herramienta Seleccionar sector. El sector 2 se selecciona y puede
optimizarse de forma separada.
Selecciona “16” de la lista “Colores” en la paleta Optimizar. El resto de los sectores se
optimizarán con 64 sectores, pero el logo utilizará menos.
Página 129/157
Debes especificar que algunos de los sectores no incluyan imágenes. Haz clic en el sector 3.
Debes comenzar viendo el tamaño del archivo del sector. Haz clic en la pestaña “Optimizada”.
La lista de optimización muestra una lista en la parte inferior de la ventana que indica que creará
una imagen GIF de aproximadamente 220 bytes (el tamaño exacto depende del tamaño en que se
creó el sector, por lo que es posible que varíe ligeramente). Aunque no es grande, no hay razones
para agregar tiempo de descarga creando una imagen en esa área.
Haz clic en la pestaña “Original”.
Haz clic en la paleta “Sector”.
Selecciona “Sin imagen” en la lista “Tipo” en la paleta Sector. El área se reemplaza con
espacio vacío.
Puedes elegir no usar imágenes que estén visibles en este momento. Debes reemplazar el
contenido de la página con espacio vacío. Haz clic en el sector 13.
Selecciona “Sin imagen” de la lista “Tipo” en la paleta Sector. El área se reemplazará con
espacio vacío.
Puedes utilizar la paleta Sector para agregar texto a la celda HTML para que aparezca en la
página Web. Escribe Web page contents go here (El contenido de la página Web va aquí) en
el campo “Texto” en la paleta Sector.
Puedes especificar que una celda “Sin imagen” se rellene con un color. Debes reemplazar el
contenido del sector 9 con un color sólido. Haz clic en el sector 9.
Selecciona “Sin imagen” de la lista “Tipo” en la paleta Sector.
Escribe Navbar links go here (Los vínculos de la barra de navegación van aquí) en el campo
“Texto” en la paleta Sector.
Haz clic en la herramienta Cuentagotas (Método abreviado: I).
Haz clic en el área amarilla de la barra de navegación para tomar una muestra del color. El
color de frente cambia a amarillo.
Selecciona “Color frontal” de la lista “BG” en la paleta Sector. La celda aparecerá como una
combinación de la barra de navegación, pero permitirá al programador de HTML agregar texto
verdadero en vez de una imagen.
Página 130/157
Cada sector puede incluir un enlace a otra página Web, de modo que si el usuario hace clic en el
sector, la otra página se abre. El vínculo o URL puede llevar a sitios exactos en la Internet
(vínculos que comiencen por http://), o un vínculo local a otra página en la misma carpeta que la
página HTML que contiene el sector. Debes vincularla a otras páginas en la carpeta “Photoshop
6 Web Data” por lo que no es necesario escribir la ruta completa del archivo. Utiliza la
herramienta Seleccionar sector para hacer clic en el sector 4 (“Eating Right”).
Escribe eatingright.html en el campo “URL” en la paleta Sector.
Haz clic en cada uno de los botones y escribe el nombre del botón seguido por ‘.html’ en el
campo “URL” (por ejemplo, utiliza “fitnessnews.html” para el sector 7).
Por último, debes crear un efecto de rollover para cada botón utilizando la paleta Rollover. Haz
clic en la pestaña Rollover.
Haz clic en el sector 4 (“Eating Right”).
Debes agregar un estado de sustitución para que el sector cambie dependiendo de la acción del
mouse del usuario. Haz clic en el botón Crear nuevo estado de rollover en la parte inferior
de la paleta Rollover. Aparece una nueva miniatura llamada “Sobre” en la paleta, que indica
que tendrá efecto cuando el cursor del mouse del usuario se pose sobre el sector. Puedes
seleccionar una acción diferente (por ejemplo, un clic del mouse) de la lista que contiene la
palabra “Sobre” aunque por ahora utilizarás este estado.
Cuando el estado “Sobre” esté seleccionado en la paleta Rollover, los cambios realizados a la
imagen sólo aparecerán al usuario cuando el mouse esté colocado sobre el sector seleccionado.
Debes activar las capas “Eating Right panel” y el “Eating Right description” en la paleta Capas,
mientras el estado está activo. Haz clic en la columna Visibilidad de capa a la izquierda de las
capas “Eating Right panel” y “Eating Right description”. Ambas capas aparecen en la
imagen. Aunque el texto descriptivo no está en el sector activo, JavaScript, que controla los
rollovers, puede reemplazar el contenido del sector 10 según sea necesario.
Debes confirmar que estas capas no estén visibles cuando el rollover no esté en efecto. Haz clic
en la miniatura “Normal” en la paleta Rollover. Las dos capas desaparecen.
Debes agregar un estado de rollover “Sobre” a cada botón. Haz clic en el sector 5 (“Exercice”).
Las páginas Web para cada categría de vitalitytips.com se crearon con etiquetas en HTML
dinámico (DHTML), el cual requiere una versión de navegador 4 o superior. Puedes descargar
las versiones más recientes del Communicator o de Internet Explorer en www.netscape.com o
www.microsoft.com respectivamente.
Haz clic en el botón Crear nuevo estado de rollover en la parte inferior de la paleta Rollover.
Página 131/157
Con el estado “Sobre” seleccionado, haz clic en el icono de la columna Visibilidad de capa a
la izquierda de las capas “Exercice panel” y “Exercice description”.
Repite los tres pasos anteriores con los botones restantes, activando el panel y la
descripción apropiados para cada uno.
Los sectores están completos. Selecciona el menú Archivo Æ Guardar (Método abreviado:
CTRL S).
Cuando guardes la imagen optimizada, ImageReady generará una imagen para cada uno de los
sectores. También puede generar HTML para alinear los sectores. Selecciona el menú Archivo
Æ Guardar optimizada como (Método abreviado: CTRL ALT SHIFT S). Aparece el diálogo
Guardar optimizada como.
Debes guardar tanto el archivo HTML como las imágenes. Si es necesario, selecciona la opción
“HTML e imágenes (*.html)” de la lista “Guardar como tipo”. De forma predeterminada,
ImageReady agrupa los sectores en una carpeta llamada “Images” dentro de la carpeta donde
guardas el archivo HTML.
Debes utilizar el nombre predeterminado del archivo. Haz clic en “Guardar”. ImageReady
guarda el archivo de la página Web como “vtwebpage.html” en la carpeta “Photoshop 6.0 Web
Data”.
Ahora puedes abrir la página terminada en un explorador para ver cómo agrupará todos los
sectores en una tabla y ver cómo funcionan los efectos de rollover. Haz clic en la ventana de
“Adobe ImageReady” para ocultar la aplicación.
Haz clic en el botón “Adobe Photoshop” en la barra de tareas, si es necesario.
Haz clic en el botón minimizar de la ventana “Adobe Photoshop” para ocultar la

aplicación.
Navega hasta la carpeta “Photoshop 6.0 Web Data” utilizando el Explorador de Windows o
Mi PC.
Haz doble clic en el archivo “vtwebpage.html”. El archivo se abre en un nuevo explorador. La

barra de navegación vertical y las áreas de contenido se muestran con un texto y la barra vertical
tiene un color que combina con la horizontal, tal y como especificaste mientras creabas la
página.
Si haces doble clic en el archivo “vtwebpage.html” y no se inicia el explorador Web, hazlo

manualmente. Si utilizas Netscape Communicator, selecciona el menú Archivo Æ Abrir página
Página 132/157
en Navegador, luego navega hasta el archivo “vtwebpage.html” para abrirlo. Si utilizas Internet
Explorer, selecciona el menú Archivo Æ Abrir, luego navega hasta el archivo “vtwebpage.html”
para abrirlo.
38. Debes probar los rollovers y los vínculos URL asignados a los botones. Mueve el cursor del
mouse sobre cada uno de los botones en la barra de navegación horizontal. El panel y la
descripción de cada uno aparece cuando el mouse se coloca sobre los mismos.
Haz clic en uno de los botones. El explorador carga la página Web asociada. Cada una de las
páginas Web correspondientes a los botones fue creada ligeramente distinta que la forma en que
creaste la página de inicio. Sólo la parte superior de la página que está debajo de la barra de
navegación fue dividida y se agregó HTML adicional para incluir el archivo “navbar.gif” que
creaste anteriormente como fondo. Igualmente, las imágenes usadas en las páginas son las que
elaboraste (a excepción del banner Web animado, que aprenderás en la lección “Animación”).
Regresa a ImageReady y cierra la imagen “vtwebpage.psd”, guardando los cambios.
Regresa a Photoshop, guarda y cierra la imagen.
Resumen
En esta lección, aprendiste a expandir el uso de Photoshop e ImageRead a partir de herramientas

para crear imágenes individuales a otras que pueden crear páginas Web completas. Creaste un
boceto para una página Web, alineaste cuidadosamente sus elementos con una cuadrícula, creaste
una imagen de fondo y por último, creaste sectores en componentes y generaste un archivo
HTML completo que puede ser editado para completar la página.
4A Nombra cuatro formas en que Photoshop e ImageReady pueden contribuir a

diseñar páginas Web.
4B ¿Cómo podrías seleccionar intervalos de cuadrícula para alinear elementos cuando

diseñas una página Web?
4C Cuando creas un tipo de fondo de “barra vertical”, ¿por qué deberías hacer la
imagen más ancha?
Página 133/157
4D Nombra tres aspectos útiles de utilizar sectores en una imagen.
Página 134/157
lección 5
Animación
Introducción
En esta lección, aprenderás a utilizar ImageReady como herramienta para crear animaciones.
Aprenderás a crear cuadros que aparecerán uno por uno en un tiempo determinado para cambiar
la imagen. También aprenderás a simular movimiento moviendo un poco un objeto en cada
cuadro y a utilizar un efecto de movimiento para simular realismo. Cuando esté completa la
animación, la guardarás en formato GIF, el cual puede visualizarse en una aplicación de
explorador Web.
Objetivos
Para que puedas crear animaciones pequeñas y efectivas, debes:
5A Planificar la secuencia básica antes de crear la animación.
Debes hacer un boceto de cómo quieres que la animación luzca antes de crearla en realidad para
asegurarte que el proceso se ejecute fácilmente.
5B Crear una animación y guardarla en formato GIF.
Debes agregar cuadros a la imagen para cambiarla y crear movimiento. Terminarás guardando
una versión optimizada de la imagen que pueda mostrarse en los exploradores del usuario.
Archivos de datos
Vtbanner.psd

45 minutos
Página 135/157
Tema 5A
Planificar animaciones
Una animación es una serie de cuadros o imágenes estáticas que se reproducen en una sucesión.
La palabra animación puede asociarse a películas, en donde cada cuadro se muestra tan rápido
que simula movimiento con los siguientes, formando así una cadena. Sin embargo, este es sólo
una función de la animación. Muchas animaciones para la Web se mueven por marcos más
lentamente, en forma pausada para que el usuario pueda ver cada una por un momento o leer el
texto en el cuadro. Y, a diferencia de los medios tradicionales como las películas, puedes
cambiar la “frecuencia de los cuadros” en una base de cuadro a cuadro, cuando creas
animaciones para la Web. Por ejemplo, un cuadro puede aparecer por unos pocos segundo,
mientras que el segundo puede aparecer muy rápido.
Utilizarás ImageReady para guardar animaciones Web en formato GIF animado. Al igual que los
archivos estándar GIF, los GIF animados se limitan a un máximo de 256 y utilizan el mismo
algoritmo de compresión para reducir el tamaño del archivo. Como cada cuadro aumenta el
tamaño del archivo, los GIF animados normalmente son más grandes que los normales. Por
fortuna, el formato GIF animado también permite formatos especiales para cada cuadro, para que
la información redundante (partes de la imagen que no han cambiado desde el último cuadro) no
requieran almacenarse repetidamente. ImageReady puede optimizar imágenes automáticamente
en esta forma, pero también permite controlar directamente estas opciones si deseas utilizarlas
para crear efectos especiales.
Cuando te prepares para crear una animación, es ideal que te plantees un esquema primero. Esto
puede ayudarte a lograr el producto final más rápidamente que si trabajas en una forma de
ensayo y error. Si cometes errores mientras trabajas, es posible que necesites verificar varios
cuadros para ver cuáles son los que tienen el problema y ver si el error creó cierta
“discontinuidad” (un objeto que debe ser estacionario cambia de posición de un cuadro a otro).
Aunque ImageReady puede ayudarte a aplicar los cambios a varios cuadros a la vez, puede tomar
un poco más de tiempo para resolver los problemas o cambios después de comenzar. Por eso,
planificar antes la animación puede ayudarte a solucionar problemas.
Planificar la animación también puede ayudarte a mantener reducido el tamaño del archivo.
Puedes sorprenderte cuantos cuadros puede necesitar tu idea. Como cada cuadro aumenta el
tamaño del archivo, podrías terminar con una animación demasiado grande. Si planificas antes
de elaborar, puedes decidir qué afecta lo que tratas de crear para tratar de disminuir el número de
cuadros.
También puedes encontrar útil hacer un esquema de la idea en papel, mostrando cada cuadro o
secuencia de movimiento en forma separada y anotando la duración aproximada que esperas de
cada cuadro. Puedes referirte a ese esquema mientras trabajes con la animación real en
ImageReady.
Página 136/157
En esta lección, crearás un banner animado para vitalitytips.com que se mostrará en otros sitios.
La publicidad en banners normalmente es corta. El tamaño normal de un banner es de 468
píxeles de ancho por 60 de alto. Un esquema de la idea puede ser algo como la siguiente:
Figura 5-1: Un esquema de la animación que deseas crear.
Este esquema no es una representación exacta cuadro a cuadro de la animación final, porque la
animación del logo moviéndose de un lado a otro de la imagen ocupará en verdad varios cuadros.
Sin embargo, ofrece una buena referencia para utilizar cuando elabores la animación.
Tema 5B
Crear un GIF animado
Un GIF animado comienza como un archivo con un solo cuadro, como los que has trabajado
hasta ahora. Utilizarás la paleta de animación de ImageReady para agregar cuadros y modificar
lo que aparece en cada uno.
Página 137/157
Un concepto importante del uso de ImageReady para la animación es que los cuadros (las
“imágenes” que cambian paulatinamente) son independientes de las capas de imágenes. Aunque
puedes crear una animación donde cada cuadro corresponda directamente a una capa, no es
necesario utilizarlo. En ImageReady, cada cuadro de la animación refleja un estado específico de
cada una de las capas. Por ejemplo, un cuadro animado puede tener dos capas mostrándose y en
el siguiente cuadro, cinco capas.
Adicionalmente, una capa no es “estática” una vez que comiences a agregar cuadros. Los datos
de píxeles en una capa no pueden cambiar de cuadro a cuadro, pero puedes cambiar la posición,
opacidad, modo de fusión, orden de apilamiento y efectos de una capa, en forma separada para
cada cuadro (así como también la visibilidad, como mencionamos en el último párrafo). Esto te
permite, por ejemplo, mover un objeto de un lado a otro de la imagen en el tiempo, o desvanecer
un objeto, sin tener que crear varias versiones del mismo.
ImageReady te permite seleccionar varios cuadros al mismo tiempo para editarlos y puede
insertar automáticamente una serie de cuadros entre los existentes para crear una fusión suave de
un cuadro a otro (se conoce como “intercalación”).
Una vez que se crean todos los cuadros, puedes especificar la duración de cada uno y cuántas
veces deseas que la animación se repita cuando se visualice en un explorador. Puedes seleccionar
un ajuste de optimización, previsualizar la imagen en un explorador y guardar la imagen
optimizada como un GIF animado (y también, como un archivo HTML para mostrarse en un
explorador). Si abres un GIF animado que hayas guardado, encontrarás que, a diferencia de la
imagen original que editaste, cada cuadro corresponde directamente a una capa. Como puede ser
difícil de editar, debes mantener siempre el archivo original en formato Phtoshop que utilizaste
para crear la animación, en caso que necesites hacer cambios más adelante.
Intercalación:
El proceso de crear cuadros adicionales en una animación que se mezcle automáticamente entre
dos cuadros existentes.
Actividad 5B-1:
Crear una animación básica
Objetivo: Crear una animación con unos cuantos cuadros que cambien en un período de
tiempo.
esta lección y no has completado las anteriores, sigue las indicaciones de “Utilizar los datos” en
la sección “Sobre este curso” al comienzo del manual.
Página 138/157
Debes crear un banner animado para el sitio vitalitytips.com. Debes utilizar ImageReady, no
Photoshop, para crear animaciones. Haz clic en el botón Ir a ImageReady para activar el
programa (Método abreviado: CTRL SHIFT M).
Debes abrir el banner para el que creaste un fondo en la lección “Preparación para visualización
en distintas plataformas”. Selecciona el menú Archivo Æ Abrir (Método abreviado: CTLR O).
Navega hasta la carpeta “Photoshop 6.0 Web Data” y selecciona el archivo “vtbanner.psd”
de la lista de archivos.
Haz clic en “Abrir”. El banner aparece. La mayoría del contenido del aviso está en el mismo
archivo en distintas capas. Como puedes ver a partir del esquema que viste en el tema “Planificar
animaciones”, la imagen tal y como aparece (con el logo de vitalitytips.com) se utilizará en otra
animación. Puedes organizar siempre los cuadros mientras trabajas con las animaciones por lo
que no es un problema.
Selecciona el menú Vista Æ Mostrar Æ Sectores para desmarcarla, en caso de que sea
necesario.
Debes comenzar a crear la animación con la paleta Animación. Haz clic en la pestaña de la
paleta Animación (o si es necesario, selecciona el menú Ventana Æ Mostrar animación). La
paleta Animación aparece con un cuadro.
Agregarás cuadros duplicando los existentes. Haz clic en el botón Duplicar el cuadro actual en
la paleta Animación. Aparece un segundo marco.
Ahora debes crear el último cuadro de la animación, el cual mostrará el logo junto con el texto,
simplemente visualizando una capa adicional. Haz clic en la columna visibilidad de capa a la
izquierda de la capa “Head to the best online resource…” para mostrarla. Aparece el texto.
El cambio que realizaste (mostrando la capa de texto) sólo afectó el segundo cuadro de la
animación. Si regresas al primer cuadro, el texto desaparecerá, porque no aparecía en la imagen
original. Haz clic en el Cuadro 1 en la paleta Animación. El texto en la izquierda de la imagen
desaparece.
Puedes reproducir la animación en ImageReady para ver más o menos como aparecería en un
explorador. Haz clic en el botón Ejecutar animación en la parte inferior de la paleta
Animación.
Página 139/157
El texto parpadea rápidamente. Continúa haciéndolo, porque la animación está ajustada para que
se reproduzca infinitamente en vez de hacerlo sólo una vez. Aunque más adelante cambiarás este
ajuste, normalmente es mejor dejarla así mientras trabajas, para que puedas verla varias veces en
una sucesión y asegurarte que funcione correctamente.
Haz clic en el botón Detener animación en la parte inferior de la paleta Animación. La

animación se detiene.
Puedes utilizar la paleta Animación para pasar por los cuadros de animación uno a la vez. Haz
clic en el botón Seleccionar primer cuadro (si aparecen en gris, quiere decir que ya estás en
el primer cuadro).
Haz clic dos veces en el botón Cuadro siguiente. Cuando llegues al último cuadro, este botón
te regresa al primero.
Ahora agregarás cuadros que utilizarás al comienzo de la animación. A diferencia de cuando

creas capas, cada cuadro que se crea se basa en el estado actual de la imagen, así que para una
mayor conveniencia, debes seleccionar el cuadro que más se acerque al que deseas hacer, porque
los demás no tendrán el texto a la izquierda de la imagen. Haz clic en Cuadro 1 en la paleta
Animación.
Haz clic en el botón Duplicar el cuadro actual en la paleta Animación. Aparece un tercer
cuadro.
Refiriéndose al esquema de animación que creaste antes de que empezaras a trabajar en

ImageReady, viste que las palabras “vitalitytips.com” no aparecen en el primer cuadro. Haz clic
en Cuadro 1 de la paleta Animación.
Haz clic en el icono de visibilidad a la izquierda de la capa “vitalitytips.com” para

ocultarlo. Las palabras “vitalitytips.com” desaparecen, pero se mantiene la “vt” porque está en
una capa separada.
Si mueves una capa, sólo afectará el cuadro seleccionado. Por ello, puedes mover la “vt” hacia la
parte izquierda de la imagen y no afectará su posición en los cuadros 2 y 3. Haz clic en la capa
“vt” en la paleta Capas.
Página 140/157
Haz clic en la herramienta Mover en la caja de herramientas. (Método abreviado: V).
Si las reglas no se muestran, haz clic en Vista Æ Mostrar reglas (Método abreviado: CTRL
R).
Mantén presionada la tecla SHIFT y arrastra el logo “vt” hacia la izquierda de la imagen,
soltando el botón del mouse antes de la tecla SHIFT. Si mantienes presionada la tecla SHIFT
mientras arrastras horizontalmente, se restringe el movimiento para que el logo no pueda
moverse hacia arriba o hacia abajo. Asegúrate de no arrastrar mucho el logo hacia la izquierda.
Debe quedar al menos a 10 píxeles del borde.
Si soltaste por error la tecla SHIFT primero y el logo cambió verticalmente (las letras
deben aparecer como en la guía), selecciona el menú Edición Æ Deshacer y repite el paso
anterior.
Puedes ver que la posición de la capa “vt” es distinta en este cuadro que en los otros,
visualizando el siguiente cuadro. Haz clic en Cuadro 2 en la paleta Animación. El logo “vt”
aparece en el medio de la imagen en vez del lado izquierdo. Sin la posibilidad de cambiar el
estado de una capa para cada cuadro, tendrías que haber creado varios duplicados de capas para
realizar algunas tareas como moverlos.
Debes completar el primer cuadro agregando otra capa. Haz clic en Cuadro 1 en la paleta
Animación.
Haz clic en la columna Visibilidad de capa hacia la izquierda de “Bored?” para mostrarla.
El texto aparece en el primer cuadro.
Como el segundo y tercer cuadros son similares al primero, puedes crearlos al mismo tiempo.
Haz dos clics en el botón Duplicar cuadro actual en la paleta Animación. Los cuadros 2 y 3
son duplicados del primero.
Debes cambiar la visibilidad de las capas para completar estos nuevos cuadros. Haz clic en el
Cuadro 2 en la paleta Animación.
Haz clic en la columna Visibilidad a la izquierda de la capa “Bored?” para ocultarla.
Página 141/157
Cada cuadro de animación puede contener modificaciones a las capas. Si haces un cambio en
una capa, verás que no se aplica automáticamente a todas los cuadros. Si deseas aplicar el
cambio a todos los cuadros, selecciona la capa y la opción “Aplicar capa a todos los cuadros”
del menú de la paleta Animación.
Haz clic en la columna Visibilidad a la izquierda de la capa “Tired?” para mostrarla.
Haz clic en el Cuadro 3 de la paleta Animación.
Haz clic en la columna Visibilidad a la izquierda de la capa “Tired?” para ocultarla.
Haz clic en Visibilidad a la izquierda de “Better get moving” para mostrarla.
La animación que creaste transmite un mensaje, pero los cuadros se mueven muy rápido para que
el usuario pueda leer. Haz clic en el botón Ejecutar animación en la parte inferior de la
paleta Animación. La animación se mueve rápido de cuadro a cuadro.
Haz clic en el botón Detener animación en la parte inferior de la paleta.
Debes ajustar la duración de los cuadros a tiempos más largos. Debes colocar que el cuadro 4 se
muestre por un segundo, en vez del ajuste actual de “0 segundos” (lo más rápido que puede
mostrar el explorador). Haz clic en el Cuadro 4 de la paleta Animación.
Selecciona “1.0” de la lista Seleccionar tiempo de retardo del cuadro, debajo del cuadro.
Aquí se selecciona cuanto tiempo se mostrará el cuadro (no cuanto tiempo se retarda antes de
que aparezca).
Debes hacer que el último cuadro tenga una pausa mayor antes de que la animación comience de
nuevo. Haz clic en el Cuadro 5 en la paleta Animación.
Selecciona “5.0” de la lista Tiempo de retardo del cuadro debajo del mismo.
Página 142/157
Debes ver el efecto de los cambios realizados. Haz clic en el botón Seleccionar el primer
cuadro en la paleta Animación.
Haz clic en el botón Reproducir animación en la parte inferior de la paleta Animación.

Como el cambio no afectó los primeros tres cambios, sigue reproduciéndose muy rápido, pero
los últimos dos tienen la duración correcta. La animación se detiene por cinco segundos en el
último cuadro antes de regresar al primero.
Haz clic en el botón Detener animación en la parte inferior de la paleta Animación después
de haber reproducido dos veces la misma.
Puedes seleccionar varios cuadros al mismo tiepo para cambiar algunos de sus atributos. La
duración de los tres primeros debe ser de dos segundos. Haz clic en el Cuadro 1 en la paleta
Animación.
Mantén presionada la tecla SHIFT y haz clic en el Cuadro 3 de la paleta Animación. Se

selecciona desde el cuadro 1 hasta el 3. Si deseas seleccionar marcos no consecutivos al mismo
tiempo, puedes mantener presionada la tecla CTRL y hacer clic en los mismos.
Selecciona “2.0” de la lista Tiempo de retardo de cuadros debajo de cualquiera de los

marcos seleccionados. El retardo cambia para todos.
La animación debe entenderse bien con las duraciones que estableciste. Antes de previsualizarla,
debes hacer un último cambio. Debes decidir si deseas que la animación muestre “Tired?” antes
de “Bored?” por lo que debes cambiar el orden de los tres primeros cuadros. Puedes reorganizar
los cuadros arrastrándolos hacia la paleta Animación o seleccionado varios cuadros y haciendo
clic en la opción “Revertir cuadros” de la paleta Animación. Como sólo debes cambiar estos dos,
sólo debes arrastrar un cuadro. Haz clic en el Cuadro 1 para que únicamente sea el único
cuadro seleccionado.
Arrastra el Cuadro 1 hacia la derecha del Cuadro 2 en la paleta Animación, soltando el

botón del mouse cuando aparezca una barra vertical a la derecha del cuadro 2. La
animación muestra ahora “Tired?” antes de “Bored?”.
Haz clic en el botón Ejecutar animación en la parte final de la paleta Animación. La

animación se reproduce más lentamente y en el orden deseado.
Haz clic en el botón Detener animación en la parte inferior de la paleta Animación después de
que se haya reproducido dos veces.
Creaste una animación básica y funcional. Selecciona el menú Archivo Æ Guardar (Método
abreviado: CTRL S).
Crear la ilusión de movimiento
Página 143/157
Ahora debes crear la ilusión de movimiento con el logo “vt”, que deberá viajar de izquierda al
centro en unos cuantos cuadros. Debes crear primero un cuadro con el logo en la izquierda y
luego con otro en el centro. Una vez más, la forma más sencilla de hacer esto es seleccionando
un cuadro similar al que tratas de crear.
Actividad 5B-2:
Simular movimiento con Intercalación y Desenfoque
Objetivo: Crear en forma efectiva la ilusión de un movimiento suave y continuo.
Haz clic en el Cuadro 3 en la paleta Animación.
Haz clic en el botón Duplicar cuadro actual en la paleta Animación. Aparece un nuevo
cuadro 4.
Haz clic en el icono de Visibilidad de capa a la izquierda de la capa “Better get moving” en
la paleta Animación.
Debes duplicar el cuadro 5 para crear un cuadro con el logo del centro. Haz clic en el Cuadro 5
en la paleta Animación.
Haz clic en el botón Duplicar cuadro actual en la paleta Animación. Aparece un nuevo
cuadro 6.
Debes cambiar el cuadro 5 para que sólo se muestre el logo precedido por el que tiene el nombre.
No cambies el cuadro 6. Haz clic en el Cuadro 5 en la paleta Animación.
Haz clic en la columna Visibilidad a la izquierda de “vitalitytips.com” para ocultarla. Los

cuadros 4 y 5 contienen ahora el logo en distintas posiciones.
Ahora “intercalar” las dos capas que muestran únicamente el logo para crear otras adicionales
entre ellas. Haz clic en el Cuadro 4 en la paleta Animación.
Mantén presionada la tecla SHIFT y haz clic en el Cuadro 5 en la paleta Animación. Se

seleccionan los dos cuadros.
Haz clic en el botón Intercalar en la parte final de la Animación.
El diálogo Intercalar aparece. Puedes seleccionar que afecte todas las capas o sólo las
seleccionadas. Aunque sólo deseas que la capa “vt” cambie, el comando “Intercalar” creará
nuevos cuadros que sólo contienen la capa, en caso de que hayas utilizado la opción “Capa
Página 144/157
seleccionada”. Si elijes intercalar todas las capas, las que estaban en el medio de cada cuadro no
se verán afectadas en los cuadros adicionales. Si es necesario, haz clic en el botón “Todas las
capas”.
El Intercalación puede afectar varios parámetros. Además de la posición de la capa, puede

afectar también la opacidad y los efectos de la capa. Así que, por ejemplo, podrías ajustar una
capa a baja opacidad en un cuadro, opacidad total en la siguiente y utilizar el intercalación para
crear un efecto de desvanecimiento.
Aunque la única diferencia entre los cuadros 4 y 5 es la posición de la capa “vt”, puedes permitir
que el comando Intercalar afecte todos los parámetros (posición, opacidad y efectos). En caso
necesario, marca las tres casillas a la derecha de “Parámetros”.
El Intercalación sólo puede realizarse entre dos o más cuadros consecutivos (si seleccionas más
de dos, el intercalación reemplazará las capas de adentro basadas en la primera y última). Si sólo
seleccionas un cuadro, tendrías que especificar si debe intercalar hacia el anterior o último
cuadro. Como sólo seleccionaste dos cuadros, la opción “Selección” ya está marcada en la lista
“Intercalar con”.
Debes evitar agregar muchos cuadros adicionales porque cada uno aumenta el tamaño del
archivo. Sin embargo, si utilizas pocos cuadros, el efecto no será tan suave. Debes agregar en
total tres marcos, que lograrán un buen balance entre calidad y tamaño de archivo. Escribe 3 en
el campo “Agregar cuadros”. Se completan los ajustes.
Haz clic en “OK”. ImageReady genera tres marcos adicionales entre los que seleccionaste.
Puedes ver el efecto del intercalación visualizando los cuadros individualmente. Haz clic en el
botón Seleccionar siguiente cuadro en la paleta Animación cinco veces. Cada uno de los
cuadros intercalar mueven el logo más cerca de la posición final (se encuentra ahora en el cuadro
8).
Página 145/157
A diferencia de la actividad anterior, debes establecer la duración de cada cuadro para que simule
movimiento en lo mínimo, para que el explorador las reproduzca lo más rápido posible. Esto
creará una mejor apariencia de movimiento. Haz clic en el Cuadro 4 en la paleta Animación.
Mantén presionada la tecla SHIFT y haz clic en el cuadro 8 en la paleta Animación.
Selecciona “Sin retardo” de la lista Tiempo de retardo del cuadro debajo de cualquiera de
los cuadros seleccionados. El tiempo de retardo cambia para todos.
Ahora debes reproducir la animación a partir del cuadro 3 para ver cómo luce el movimiento.
Haz clic en la paleta Animación en el cuadro 3.
Haz clic en el botón Ejecutar animación en la parte inferior de la paleta Animación luego
que llegue al fin.
Haz clic en el botón Detener animación en la parte final de la paleta Animación, después
que llegue al final.
ImageReady muestra los cuadros con “Sin retardo” más lentamente que en un explorador. Debes
previsualizar la animación en un explorador para ver cómo lucen los efectos de movimiento.
Selecciona el menú Archivo Æ Vista previa en Æ [Explorador]. El explorador se inicia y
reproduce la animación. El segmento de movimiento es más rápido pero todavía puedes ver los
cuadros individuales si ves muy de cerca. Esto ocurre porque el logo se mueve bastante en cada
cuadro, porque sólo agregaste tres.
Debes regresar a ImageReady y mejorarás la apariencia del movimiento del logo. Haz clic en el
botón “Adobe ImageReady” en la barra de tareas.
Aunque puedes agregar más cuadros para suavizar más el movimiento, aumentará el tamaño del
archivo. En cambio, debes simular el movimiento aplicando un efecto de desenfoque de
movimiento al logo.
A diferencia de los cuadros en la posición de una capa, los cambios en los píxeles de una capa
afectan todos los cuadros en ImageReady. Por ello, si desvaneces la capa “vt”, todas las
instancias del logo se ven difusas. No es necesario el efecto del logo en los cuadros del principio
y el final, por lo que debes duplicar la capa. Debes estar en el Cuadro 4 cuando dupliques la capa
“vt” para que se muestre en ese cuadro en particular. Haz clic en el Cuadro 4 en la paleta
Animación.
ImageReady agrega las nuevas capas que crees a los cuadros de la animación en forma
predeterminada. Debes crear un duplicado del logo VT haciendo una copia de la capa “vt”, pero
no debe aparecer el logo borroso en cada marco, por lo que debes deseleccionar esta opción.
Selecciona la opción “Nuevas capas visibles en todos los cuadros” de la lista Animación
Página 146/157
para desmarcarla. La opción anterior estaba marcada por defecto. Cuando la desmarcas, las
nuevas capas que se crean no se aplicarán a cada cuadro. Ya puedes copiar la capa “vt”.
Arrastra la capa “vt” al botón Crear nueva capa en la paleta Capas. Aparece una nueva
capa, “vt copiar”.
Debes cambiar el nombre de la capa para mayor claridad. Haz doble clic en la capa “vt
copiar”. Aparece el diálogo Opciones de capa.
Escribe vt desenfoque de movimiento en el campo “Nombre”.
Haz clic en “OK”. La capa cambia de nombre.
Debes ver el filtro que aplicarás. Haz clic en el menú Filtro y mueve el cursor en el submenú
Desenfocar. Aunque ImageReady y Photoshop comparten varios filtros, el filtro que deseas
aplicar, Desenfoque de movimiento sólo está disponible en Photoshop.
Haz clic fuera del menú para cerrarlo.
Debes cambiar temporalmente a Photoshop para aplicar el filtro. Haz clic en el botón Ir a
Photoshop en la parte final de las herramientas. (Método abreviado: CTRL SHIFT M).
La imagen se abre en Photoshop. Incluso si Photoshop no puede crear varias animaciones a

cuadros, editar y guardar la imagen en Photoshop no perderá los cuadros; estos aparecerán
cuando regreses a ImageReady. Photoshop retiene toda la información, como por ejemplo la
información de sector o el efecto de capas de ImageReady “Gradiente/Motivo”.
La capa “vt desenfoque de movimiento” está seleccionada, por lo que puedes aplicar el filtro.
Selecciona Filtro Æ Desenfocar Æ Desenfoque de movimiento. Aparece el diálogo asociado.
El filtro Desenfocar “expande” una imagen en la dirección indicada por el campo “Ángulo”.
Como el logo se moverá hacia los lados en la animación que creas, un ángulo de 0º es apropiada.
Si es necesario, escribe 0 en el campo “Ángulo”.
Debes aplicar una cantidad significativa de desenfoque de movimiento. Arrastra el regulador

“Distancia” hasta 12.
Página 147/157
Haz clic en “OK”. El logo “vt” se desvanece en dirección horizontal.
Ahora puedes guardar y cerrar la imagen en Photoshop antes de regresar a ImageReady.

Haz clic en el botón cerrar de la ventana (Método abreviado: CTRL W).
Puedes continuar trabajando en la imagen con ImageReady. Haz clic en el botón “Adobe
ImageReady” en la barra de tareas. Cuando regreses a ImageReady, la imagen se actualiza y
la capa “vt desenfoque de movimiento” tiene la versión difuminada del logo.
Debes eliminar todos menos el primer cuadro con el logo para que puedas reemplazarlo con las
versiones donde aplicaste el filtro. Haz clic en el Cuadro 5 en la paleta Animación.
Mantén presionada la tecla SHIFT y haz clic en el Cuadro 8 en la paleta Animación.
Haz clic en el botón Borrar cuadros seleccionados en la paleta Animación.
ImageReady pregunta si deseas borrar los cuadros seleccionados. Haz clic en “Aceptar”.
Debes regresar ahora al cuadro 4, el cual utilizarás como base para los otros cuadros de
movimiento. Haz clic en el Cuadro 4 en la paleta Animación.
El cuadro 4 tiene la capa “vt” original visible. Aunque está detrás de la copia con el efecto, debes
ocultarla de todas formas. Haz clic en el icono Visibilidad a la izquierda de la capa “vt” para
ocultarla. Los bordes lucen más borrosos sin la capa original “vt” a la vista.
Página 148/157
Además de colocar un efecto en el logo “vt”, debes hacer la animación más suave que antes
moviendo la versión con el efecto en una distancia más corta. En vez de comenzar en la primera
versión en la izquierda, puedes moverlo hacia el centro un poco. Mantén presionada la tecla
SHIFT y arrastrar el logo “vt desenfoque de movimiento” para que el borde izquierdo se
alinee con la marca de los 50 píxeles en la regla horizontal, soltando el botón del mouse
antes de la tecla SHIFT.
Si soltaste por error la tecla SHIFT y el logo rotó verticalmente (las letras deben ajustarse a
la guía), selecciona el menú Edición Æ Deshacer y repite el paso anterior.
Ahora necesitas crear un cuadro para la posición final del logo con el filtro. Haz clic en el botón
Duplicar cuadro actual en la paleta Animación. Aparece un nuevo cuadro 5.
Al igual que con el logo del efecto, no debes colocar la versión final del logo en la misma
posición. Debes colocarla hacia la izquierda de la que aparece en el cuadro 6, para que la versión
con el efecto no tenga que desplazarse tanto en cada paso. Esto ayudará a crear la ilusión de un
movimiento continuo. Debes ajustar el logo en la guía vertical. Selecciona el menú Vista Æ
Ajustar a Æ Guías, en caso de que no esté marcado. (Método abreviado: CTRL SHIFT ; ).
Mantén presionada la tecla SHIFT y arrastra el logo “vt desenfoque de movimiento” para
que la parte izquierda se ajuste cerca del centro de la imagen, soltando el botón del mouse
después de la tecla SHIFT. Como los bordes de la imagen son semitransparentes, el borde no se
ajustará; el primer píxel sólido cerca del borde lo hará.
Si accidentalmente soltaste la tecla SHIFT primero y el logo rotó verticalmente (las letras
deben estar ajustadas en la guía), selecciona el menú Edición Æ Deshacer y repetir el paso
anterior.
Ahora puedes intercalar los cuadros 4 y 5 para crear el movimiento. Haz clic en el Cuadro 4 en
la paleta Animación.
Página 149/157
Mantén presionada la tecla SHIFT y haz clic en el Cuadro 5 de la paleta Animación. Se

seleccionan los dos cuadros.
Haz clic en el botón Intercalar en la paleta Animación. Aparece el diálogo seleccionado.

Debes utilizar los ajustes que seleccionaste anteriormente para crear tres cuadros adicionales
entre los mismos.
Haz clic en “OK”. ImageReady genera tres cuadros adicionales entre los que seleccionaste.
Por último, debes hacer que la animación sólo se ejecute dos veces antes de detenerse.
Selecciona “Otro” de la lista Seleccionar opciones de reproducción (donde aparece ahora
Infinito) en la paleta Animación. Aparece el diálogo Configurar número de repeticiones.
Escribe 2 en el campo “Reproducir:”
La animación se completa. Selecciona el menú Archivo Æ Guardar (Método abreviado: CTRL

S).
Debes previsualizar la animación en un explorador para ver cómo luce para los usuarios.
Selecciona el menú Archivo Æ Vista previa en Æ [Explorador]. El explorador se inicia y
reproduce la animación, deteniéndose después de la segunda vez. La animación luce un poco
mejor, con el efecto de movimiento que crea la ilusión que el logo se “acerca” en la imagen
rápidamente.
Puedes regresar a ImageReady cuando termines de ver la animación en el explorador. Haz clic
en el botón “Adobe ImageReady” en la barra de tareas.
Optimizar y guardar una animación
Los últimos pasos para crear la animación final son optimizarla y guardarla. Con las imágenes de
cuadros sencillos, puedes ver la versión optimizada y seleccionar los ajustes de optimización.
Debes ver el cuadro con la mayor cantidad de detalles y colores posible para elegir la
optimización adecuada.
Actividad 5B-3:
Optimizar y guardar como un GIF animado
Objetivo: Completar la animación y guardarla para que pueda agregarse a la página Web.
Página 150/157
Haz clic en el cuadro 10. El último con el logo y texto, aparece.
Haz clic en la pestaña “Optimizada” en la ventana de imagen. ImageReady genera una vista
optimizada de la imagen.
Selecciona “GIF 32 con tramado” de la lista “Ajustes” en la paleta Optimizar.
Puedes reducir el tamaño de archivo utilizando menos colores. Esta imagen lucirá
razonablemente bien con sólo 16 colores. Selecciona “16” de la lista “Colores” en la paleta
Optimizar.
También puedes seleccionar los ajustes para optimizar específicamente la animación. Selecciona
“Optimizar animación” de la lista en la paleta Animación. Aparece de nuevo el diálogo
Optimizar animación.
Debes utilizar casi siempre ambos métodos de optimización que son los predeterminados. La
optimización Caja delimitadora recorta cada cuadro para preservar únicamente el área que
cambió desde el cuadro anterior. Si es necesario, marca la casilla “Caja delimitadora”.
La opción Eliminación de píxeles redundantes establece que todos los píxeles en un cuadro que
concuerden con el anterior se hagan transparentes. Si es necesario, haz clic en la casilla
“Eliminación de píxeles redundantes”. Con ambos métodos activados, una gran parte del
fondo de la mayoría de las animaciones GIF no deberán estar en más de un cuadro, por lo que se
reduce el tamaño del archivo.
Haz clic en “OK”. La imagen se optimiza efectivamente.
Ahora puedes guardar la versión optimizada del archivo para crear la imagen GIF animada.
Selecciona el menú Archivo Æ Guardar optimizada (Método abreviado: CTRL ALT S).
Aparece el diálogo Guardar optimizada.
Aunque puedes guardar un archivo HTML junto con el GIF animado, normalmente se colocaría
en una página existente, por eso no será necesario. En caso necesario, selecciona “Sólo
imágenes (*.gif)” de la lista “Tipo”.
Página 151/157
Debes guardar la imagen GIF animada con el nombre predeterminado y en la carpeta por
defecto. Haz clic en “Guardar”. Se guarda la imagen GIF como “vtbanner.gif” en la carpeta
“Photoshop 6.0 Web Data”. Así terminas de trabajar con las opciones de animación de
ImageReady.
Resumen
En esta lección aprendiste algunas técnicas para crear animaciones en ImageReady. Aprendiste
cómo las capas y cuadros trabajan en conjunto y creaste cambios de cuadro lentos y movimientos
rápidos también. También utilizaste el intercalación y el desenfoque de movimiento para crear la
ilusión de movimiento. Por último, optimizaste la imagen y la guardaste en formato GIF animado
para que pueda verse en una página Web.
5A Nombra dos ventajas de planificar una animación antes de comenzar a crearla.
5B Describe la relación que existe entre las capas y cuadros de una animación.
Nombra dos formas de mejorar la suavidad aparente de movimiento en una

animación.
Página 152/157
GLOSARIO
Archivo GIF
Un archivo guardado en Formato de Intercambio Gráfico. Puede almacenar hasta 256 colores y
utiliza compresión sin pérdida.
Archivo GIF89a
Un tipo específico de archivo GIF que puede designar un color para que actúe como
espacio transparente.
Archivo JPEG
Un archivo guardado en Joint Photographic Expert Group; puede tener imágenes RGB (millones
de colores) y utiliza compresión con pérdida.
Archivo PNG
Un archivo guardado en formato Portable Network Graphic, utiliza compresión sin pérdida. La
variación PNG-24 puede tener imágenes RGB; la variante PNG-8 puede tener imágenes de Color
indexado.
Calibración
El proceso mediante el cual se ajustan las propiedades de colores de un dispositivo a un estándar
específico. Por ejemplo, puedes calibrar un monitor con un valor gamma estándar, para
asegurarte que muestre imágenes con el brillo de los tonos medios correcto.
Compresión
La reducción del tamaño de un archivo simplificando los datos guardados en el disco (por
ejemplo, escribir “valor del color por 7” en vez de escribir de nuevo el mismo color siete veces
en una misma fila).
Compresión con pérdida

La compresión que cambia parte de los valores de color de una imagen para ahorrar espacio en
disco. Mientras mayor sea la compresión, más visibles serán los cambios de color de los píxeles,
con cantidades bajas, la compresión es casi imperceptible.
Color mate
Un color que designas en el diálogo Guardar para web que se utiliza para reemplazar espacio
transparente en las imágenes o como un color para mezclarse con espacios semitransparentes.
Puedes elegir cualquier color; normalmente lo ideal es que escojas uno que combine con el fondo
de la página Web.
Compresión sin pérdida

La compresión que reduce el tamaño de archivo de una imagen sin alterar los valores de los
colores de los píxeles.
Página 153/157
Cuadrícula
Una serie de guías verticales y horizontales con un espacio uniforme entre ellas. La cuadrícula
puede activarse o desactivarse en forma independiente de otras guías.
Espacio del color

Las características que gobiernan la forma en que un dispositivo muestra los colores. Los
parámetros en el espacio del color determinan la apariencia de un color creado con valores
específicos (por ejemplo, el matiz de rojo que aparece cuando se selecciona 180 Rojo, 30 Verde
y 40 Azul).
Fósforos
Los elementos del monitor que muestran rojo, verde y azul en la pantalla.
Gamma
El brillo de una imagen o pantalla a través de los tonos medios. El valor gamma representa lo
mucho que los tonos oscuros y medios se reproducen en relación al original; mientras mayor sea
el valor, más oscuros serán los tonos medios.
Gestión del color

Un sistema que trata de hacer que los colores en una imagen luzcan iguales cuando se visualice
la imagen con distintos dispositivos (por ejemplo, dos monitores distintos o un monitor y una
impresora).
GIF Animado
Un archivo GIF que comprende varias imágenes que se muestran en secuencia. A pesar de que
muchas animaciones GIF simulan movimiento, no tiene que ser siempre así (podrían ser
simplemente, una serie de imágenes que aparecen en sucesión, como puedes haber visto en
muchos anuncios en banners Web).
Guía
Una línea horizontal o vertical que no se imprime que puedes añadir a una imagen. Cuando
arrastras una imagen (normalmente una capa) cerca de una guía, ésta “magnetiza” el borde o
centro de la misma, permitiendo que coloques la imagen en forma precisa.
HTML
HyperText Markup Language. El código que se utiliza para crear páginas Web.
Imagen de sustitución
Un efecto que cambia parte de una imagen Web basada en que el usuario pase el cursor del
mouse sobre un elemento.
Intercalación
Página 154/157
El procedimiento mediante el cual se crean cuadros adicionales en una animación que se mezclan
automáticamente entre dos cuadros existentes.
JavaScript
Un lenguaje creado por Netscape que puede controlar la funcionalidad de una página Web; por
ejemplo, puede crear efectos para cambiar imágenes cuando el cursor del mouse se coloque
sobre un elemento de la página.
Paleta
El conjunto específico de colores utilizados en una imagen de Color indexado. Las imágenes
RGB no especifican una paleta, porque pueden almacenar hasta 16.7 millones de colores.
Paleta Colores seguros para Web

Ver “Paleta Web”.
Perfilar
El proceso de registrar información sobre el espacio de color de un dispositivo. Perfilar es
distinto a calibrar porque sólo registra información sobre el espacio del color; no trata de
combinar un estándar específico.
Perfil ICC
Un modo de color que puede tener hasta 256 colores pero pueden ser menos. Normalmente se
utiliza para imágenes GIF.
Profundidad del color

El número de colores en una imagen o pantalla. La profundidad del color se mide normalmente
en números de bits (por ejemplo, una profundidad de 8 bits puede albergar 256 colores).
Mascara de enfoque
Un filtro que enfoca imágenes; el nombre indica que puede enfocar áreas borrosas para mejorar
su apariencia.
Motivo
Un área rectangular que defines en Photoshop para rellenar un área bastante grande. Cuando
rellenes un área con un motivo, se repite (en forma de mosaico) para rellenar el área.
Paleta Web
Una paleta con colores específicos que no requieren tramado cuando se visualicen en
plataformas Macintosh y Windows.
Punto blanco
La temperatura del color, medida en grados K, que determina la “calidez” del punto blanco, de
blanco frío (un blanco azulado) a blanco cálido (un blanco rojizo).
Página 155/157
Remuestreo
Cambiar el número total de píxeles en la imagen sin recortarla, bien sea aumentando o
disminuyendo el número de píxeles.
Resolución
El número de píxeles por pulgada o el número de píxeles en cada dimensión (ancho y alto). Los
Píxeles por Pulgada (ppp) se usa normalmente para imágenes impresas; el conteo de píxeles (#
de píxeles de ancho por # de píxeles de alto, por ejemplo, 100 x 75) es el que se usa para las
imágenes Web.
Sectores
Dividir una imagen en varias partes que pueden juntarse con una tabla HTML para que luzca
como si fuese una imagen grande en una página Web.
Suavizar
La mezcla de un color de frente en sus bordes en el color de fondo; normalmente un píxel del
borde. Con las capas, Photoshop generalmente hace esto disminuyendo la opacidad de los
píxeles del borde, permitiendo que el fondo se muestre ligeramente. Sin embargo, en una imagen
acoplada (de una sola capa) es difícil de aislar y eliminar el efecto del suavizado en caso de que
esté establecido.
Tramado
Un patrón de píxeles de color intercalados que simulan un color sólido (por ejemplo, los rojos y
azules intercalados pueden lucir como morado).
El tramado es causado por los ajustes que seleccionas en una aplicación que utilizas para
optimizar una imagen. El tramado de aplicación forma parte del archivo en sí y se muestra a
todos los usuarios de la red.
Tramado de navegador
El tramado que ocurre cuando una imagen contiene colores que no pertenecen a la paleta Web se
ve en una aplicación de navegador con una computadora que sólo puede mostrar 256 colores. El
tramado de navegador sólo aparece en estas circunstancias; no forma parte en forma permanente
del archivo de imagen en sí.
Página 156/157
Página 157/157

Photoshop

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Photoshop

Загружено:

Авторское право:

Доступные форматы

BST Business Software Training, C.A.

PREPARACIÓN DE imágenes para WEB

1B Ajustar las preferencias de Photoshop para unidades de tamaño.

1C Aprender los factores que contribuyen en la reducción de archivos.

Tiempo destinado a la lección

HTML y archivos de imágenes

Unidades de resolución de imágenes Web

El término resolución, cuando se refiere a un monitor, indica el número de píxeles de ancho y

Cambiar las unidades de medida de Photoshop

Objetivo: Cambiar las unidades predeterminadas de Photoshop (pulgadas) a píxeles.

Navega e inicia la aplicación Adobe Photoshop 6.0.

Selecciona el menú Edición Æ Preferencias Æ Unidades y Reglas. Aparece el diálogo

Gestión del color:

Selecciona “Píxeles” de la lista “Reglas”. El tamaño de la imagen, las dimensiones y reglas se

Haz clic en “OK”.

Controlar el tamaño de archivo

Velocidad de conexión Tiempo normal de descarga

Factores que contribuyen al tamaño del archivo

seleccionando “Siempre”, “Nunca” y “Preguntar”. Puedes acceder al diálogo Opciones de flujo

Compresión con pérdida:

Compresión sin pérdida:

Información adicional almacenada en un archivo

se seleccione el archivo en el diálogo Abrir. Aunque esta información adicional no afecta el

Información Aumenta el archivo en Aumenta el archivo Como

Canales PNG-24 (solamente) PNG-24 (solamente) a, b, e

Profundidad del color:

Maximizar los colores de la pantalla

Haz doble clic en el icono “Pantalla”. Aparece el diálogo Propiedades de pantalla.

Haz clic en la pestaña “Configuración”.

Selecciona “Color verdadero” (Millones de colores) de la lista “Colores”.

Si cuando seleccionas “Color verdadero” no disminuye la resolución en la sección en “Área

Si cuando seleccionas “Color verdadero” disminuye la resolución en la sección “Área de

Se minimiza el número de colores disponibles en el monitor. Haz clic en “OK”.

Reducir el número de píxeles efectivamente

Comparar escaneados de alta y baja resolución

Navega hasta la carpeta “Photoshop 6.0 Web Data”.

Haz clic en “Abrir”. Aparece una versión más grande de la imagen.

Si marcas la casilla “Remuestrear la imagen”, puedes cambiar el número de píxeles en la imagen.

Mira la esquina superior derecha de la imagen, luego desmarca la casilla “Ver”. Si

Si es necesario, vuelve a marcar la casilla “Ver”. Regresa el borde claro.

Ya completaste el enfoque. Haz clic en “OK”. Cuando enfocas la imagen remuestreada,

Escribe swimgirl.psd en el campo “Nombre”.

Haz clic en la imagen “swimgirl32.psd” en la barra de título.

Haz clic en el botón Cerrar de la ventana de la imagen “swimgirl32.psd”.

Escribe Swimming girl en el campo “Como:”.

Haz clic en “OK”.

Coloca el cursor justo detrás de la oreja de la niña.

Presiona SUPRIMIR. El área alrededor de la elipse se reemplaza con espacio transparente.

Debes abrir una imagen de un gráfico. Selecciona “expgraph1.psd” de la lista.

Haz clic en “Abrir”. Aparece un gráfico sobre la expectativa de vida.

Selecciona el menú Archivo Æ Guardar (Método abreviado: CTRL S).

Guarda y cierra el archivo “swimgirl.psd”.

Una imagen Web se almacena normalmente en un formato de gráficos. Aprenderás algunos

2A Examinar las especificaciones de los formatos GIF, JPEG y PNG.

2B Contrastar los tres formatos para guardar distintos tipos de imágenes.

Tiempo destinado a la lección

Especificaciones del formato

Formato GIF de Compuserve

El Formato Compuserve de Intercambio de Gráficos (Compuserve Graphics Interchange Format)

El Joint Photographic Experts Group (JPEG, o JPG) es un formato comprimido normalmente

Compresión sin pérdidas:

El formato PNG-8 es similar al GIF en lo que a calidad de imágenes fotográficas se refiere; el

Optimizar imágenes fotográficas

Objetivo: Crear imágenes fotográficas con la mejor apariencia posible y un tamaño de