APUNTES MÓDULO PHOTOSHOP

DISEÑADOR WEB Y MULTIMEDIA

■ CONCEPTOS BÁSICOS.

Existen dos tipos de imágenes por ordenador:

- las imágenes en mapa de bits y
- las imágenes vectoriales.

- Los gráficos o imágenes en mapa de bits, también llamados rasterizados,están formados por una
trama de pequeños cuadraditos o píxeles, cada uno de ellos con una posición fija y un color asignado.

- Los gráficos o imágenes vectoriales no están formados por píxeles. Se construyen a partir de líneas o
curvas definidas por ecuaciones matemáticas. No dependen de la resolución, y podemos agrandarlos o
encogerlos sin pérdida de resolución de imagen.

❏ RESOLUCIÓN DE IMAGEN.

A más cantidad de píxeles, mayor información tiene la imagen, y por tanto, mayor resolución.
Resolución del monitor:La resolución del monitor también se mide en píxeles por pulgada.
En Photoshop, los píxeles de la imagen se traducen directamente a píxeles del monitor.

La resolución de salida se mide en puntos por pulgada.

Píxeles y puntos pueden coincidir en tamaño pero no en forma. El píxel siempre es cuadrado y el punto es
redondo.

Por lo tanto existen dos tipos de resolución distintos:

- Resolución de entrada (escáner, monitor,...) que se mide en píxeles por pulgada (ppp) y
- Resolución de salida (impresora, filmadora,...) que se mide en puntos por pulgada (dpi)

¡¡ojo!! las resoluciones de entrada y de salida no tienen una equivalencia 1 a 1.

En lenguaje Postscript (para imprentas, filmadoras, etc) las imágenes se reproducen mediante una trama
de semitonos, es decir, una trama de puntos con un tamaño determinado y colocados a una distancia con-
creta. Para medir la distancia entre estos pequeños puntos utilizamos el concepto de lineatura o densidad
de trama: número de líneas por pulgada lineal (lpi).

Resolución de entrada (ppp) = Lineatura (lpi) x 2

Los programas Postscript (entre los que se encuentra Photoshop) pueden reproducir un máximo de 256
valores de intensidad para cada uno de los colores que componen la imagen: Cian, Magenta, Amarillo y
Negro.
❏ PROFUNDIDAD DE COLOR:
Los monitores proyectan haces de luz roja, verde y azul (RGB) a través de una rejilla formando diminutos
píxeles en la pantalla. La cantidad necesaria de datos (bits) para controlar los haces de luz determina la
complejidad de cada píxel, y por tanto, el número total de colores que puede visualizarse. Este concepto
recibe el nombre de profundidad de color.

Las imágenes en blanco y negro (sin tonalidades de gris) por tanto, necesitan solamente una profundidad
de 1 bit/píxel.
Con 8 bits/píxel podemos conseguir 256 tonos diferentes.
Con 16 bits/píxel, conseguiremos lo que se llama color de alta densidad (65.536 colores) con una calidad
inferior a la del color real, pero bastante mejor que la de las imágenes de la paleta.
Con 24 bits/píxel, conseguimos imágenes de color real (más de 16,7 millones de colores). esta gama de
colores se denomina espacio de color RGB o modelo RGN.

❏ TAMAÑO DE LA IMAGEN.
En Photoshop el tamaño sí importa, y mucho.
El tamaño está íntimamente relacionado con el número de píxeles de una imagen y con la profundidad de color.

Aumentar la resolución después de haber escaneado una imagen no implica necesariamente una
mejora de la calidad, todo lo contrario, puesto que la misma información tendrá que repartirse por los nue-
vos píxeles y o será tomada de la imagen, sino interpretada por Photoshop.
La acción de remuestrear consiste en cambiar las dimensiones en píxeles de la imagen.
Existen varios métodos de remuestreo para cambiar o aumentar la resolución de una imagen:
- Por aproximación.
El más rápido, pero el menos preciso, pues la imagen puede presentar un aspecto dentado.
- Bilineal
Se realiza un promedio de color que genera una calidad media.
- Bicúbica
Se crean imágenes de mayor precisión y tránsitos de color más suaves.

***** TRUCOS PARA AMPLIARLA RESOLUCIÓN DE UNA IMAGEN:

- Se va aumentando en varios pasos, cada paso se aumenta un 10% de tamaño o resolución, eligiendo
Bicúbica más enfocada. Se pueden hacer 6, 7, 8 e incluso 10 pasos con lo que hemos acabado duplican-
do la resolución o el tamaño de la imagen. Cada 2 ó 3 pasos se pulsa en el filtro “Enfocar”. Finalmente se
vuelve a “Enfocar”.
Este sistema da unos resultados bastante buenos, siempre que la imagen de partida sea de cierta calidad.

- Otro truco es: directamente abrir la imagen procedente de una cámara digital y ampliar la resolución de
los 72 ppp que trae hasta 254 o 300 ppp, escogiendo la opción Bicúbica más enfocada, se realizan las
operaciones que consideremos, que afectan a toda la imagen, de tono, variaciones de color, etc, en este
tamaño y luego reducimos hasta el tamaño de salida que queramos. En ese tamaño ya finalmente trabaja-
mos selecciones, capas, etc...

❏ LA VISUALIZACIÓN EN PHOTOSHOP
Modos de visualización:
Podemos aumentar o reducir desde el menú Vista o mediante la herramienta lupa o desde el teclado.

- Encajar en ventana hace que la imagen se adapte a la ventana de la aplicación (este es un con-
cepto válido para multitud de programas diversos y para todos los de Adobe).
NOTA DE USUARIO: Una función que ahorra mucho tiempo en este y otros programas es:
Control (comando) 0 (cero) ó Control (comando) punto según el programa utilizado.

- Píxeles Reales del menú Vista muestra la imagen al 100%.

Los píxeles de pantalla coinciden con los píxeles de la imagen.

- Tamaño de impresión: para que la imagen se muestre en pantalla con un tamaño aproximado al real.
❏ MODOS DE PANTALLA:
El modo que aparece por defecto en Photoshop es el Modo de pantalla estándar.
(...)
El modo de pantalla completa, permite visualizar la imagen sobre un fondo negro. Sólo están disponibles
las paletas y la Caja de Herramientas. Para acceder a los distinto menús hay que clicar en la esquina
superior derecha de la Caja de Herramientas.

● Organizar las ventanas.

(Ventana / Organizar)
Habrá ocasiones en que haya que trabajar con varias imágenes a la vez.
- El comando Mosaico (Ventana/Organizar/Mosaico): con esta opción se organizan automáticamente
en la ventana de la aplicación, ajustándose a ella. Este es un modo rápido y productivo para tener
una panorámica de las ventanas que se tengan abiertas.

- Igualar zoom: establece el mismo nivel de zoom de la imagen seleccionada en todas las imágenes
abiertas.

❏ EL FORMATO .PSD (para trabajar: .psd)

PSD es el formato nativo de Photoshop, que permite guardar todas las funciones de la aplicación y archivar
todas las imágenes sin problemas. Es con el que debemos trabajar durante todo el proceso.

El formato .psd lo creó Adobe con la finalidad de aprovechar al máximo las funciones y operaciones espe-
cíficas de Photoshop. Puede guardar trazados, capas, canales y cualquier modo de color, además de reali-
zar esta gestión con mayor rapidez que otro formato.

❏ MEDIDAS DEL DOCUMENTO

● Reglas y guías.
Las reglas aparecen en los bordes superior e izquierdo del documento y son útiles como referencia, sobre
todo cuando se trabaja con varias capas.
Las guías se generan pinchando en las reglas y arrastrando hacia el interior del documento. Son bastante
útiles y no modifican en nada el documento.

● Cuadrícula.
Es una malla de pequeños cuadraditos que se incorpora sobre la imagen como referencia para ciertas ope-
raciones.

❏ HERRAMIENTAS SECTOR Y SELECCIONAR SECTOR

Se utiliza en la realización de páginas web. Estas herramientas se utilizan para dividir la imagen en áreas
funcionales y después realizar con ellas una página web en forma de tabla. Cuando se guarda la imagen
como página web, cada sector se guarda como un archivo independiente que contiene sus propios ajustes.
Se desarrolla más ampliamente en páginas posteriores en el capítulo SECTORES.
■ FORMATOS GRÁFICOS

Formatos de uso más frecuente

- PSD. Formato genuino de Photoshop que permite guardar cualquier función del programa, además de la
imagen modificada, como selecciones y máscaras.

- TIFF. Formato de mapa de bits estándar

Al guardar una imagen en formato TIFF podemos optar por utilizar el sistema de Compresión LZW.
Los archivos TIFF de PC y Macintosh se diferencian en el orden de bytes de la cabecera del formato.
Aunque se pueden abrir en uno u otro ordenador. El método de compresión LZW, sustituye cadenas de
datos por otras más cortas para economizar espacio, por lo que se convierte en un sistema de compresión
sin pérdidas.
NOTA: la mayoría de los programas de dibujo (Freehand, Corel Draw) o de edición (QuarkXpress y
Pagemaker) son capaces de interpretar las imágenes TIFF con Compresión LZW, aunque no todos.

- BMP. Tiene también un tipo de compresión optativo llamado Comprimir (RLE) que no produce pérdidas,
es decir no sacrifica información al comprimirla.

- GIF. Compuserve diseñó el formato GIF para que los usuarios pudieran transferir más rápidamente foto-
grafías a través del módem. En la actualidad se usa exclusivamente para guardar imágenes para la Web.
Sólo puede manejar un máximo de 256 colores. Por lo tanto sólo podemos guardar como GIF imágenes
en modo de color Indexado, en Mapa de Bits y en Escala de grises.
Podemos guardarlo con la opción Normal o Entrelazado. Entrelazado significa que la imagen empezará a
visualizarse en el monitor del PC receptor, tan pronto como el PC emisor empiece a mandar información,
de este modo, el PC no queda bloqueado en espera de incorporar totalmente la imagen.
GIF intenta sacar el máximo rendimiento en el mínimo espacio posible.

- JPEG (o JPG). El sistema de compresión más utilizado.

JPEG usa un algoritmo de compresión con pérdidas, descartando los datos extras, es decir, la información
que el ojo humano no puede apreciar. Aplica una técnica que consiste en realizar una media con los valo-
res de color, para eliminar información que no considera imprescindible, dando colores iguales o muy simi-
lares a los píxeles de la matriz.
La ventaja del sistema es que el usuario puede decidir el nivel de compresión.
JPEG utiliza un algoritmo de compresión acumulativa (progresiva). Esto no supone ningún problema si
guardamos el archivo en la misma sesión (sin cerrarlo), pues JPEG trabaja a partir de la visualización que
tengamos en pantalla.
Pero: si cerramos la imagen y más tarde volvemos a abrirla y volverla a guardar con este formato, compri-
miremos varias veces, por lo que se puede ir rebajando ligera y paulatinamente la calidad de la imagen.
Nota 1: si se abre y guarda unas pocas veces no hay problema de pérdida de calidad de imagen; si se
abre, manipula y guarda varias veces, sí puede haber una pérdida progresiva de calidad de la imagen.

Nota 2: Lo ideal es trabajar con formatos de archivo sin pérdidas y sin compresión y finalmente, cuando
tengamos rematado el trabajo y sepamos el uso o destino que le vamos a dar a la imagen, guardarlo en el
formato que mejor nos convenga.
JPEG, se utiliza muchísimo en páginas web, para mostrar fotos o ilustarciones con transición de tonos.

Se puede guardar como:

- Línea de base Estándar (habitual)
- Línea de base Optimizada: permitirá una mejor calidad del color, aunque pudiera presentar
algunas dificultades en la Web.
 - Línea de base Progresiva: la imagen se verá gradualmente a medida que se carga en pantalla, a
la manera de la opción Entrelazado en GIF. De esta forma el archivo será algo más grande.

Nota: según mi experiencia, a JPEG le cuesta más guardar los archivos con rojos, por lo que los archivos
con predominio de estos tonos o con mucha información gráfica (contrastes, detalles, brillos, etc...) tendrán
un tamaño mayor que los de otros tonos o menos información una vez comprimidos.

- EPS (Photoshop EPS).

Creado por Adobe Systems, Apple y Linotype a mediados de los 80.
PostScript encapsulado (EPS) se utiliza para intercambiar gráficos entre aplicaciones de dibujo vectorial y
de imágenes rasterizadas, y para ilustraciones Postscript de alta resolución (líneas, formas y textos muy
definidos).

La Codificación en EPS puede ser de varios tipos: codificación ASCII (que es la definición técnica de sólo
texto), y la Binaria, que comprime algo el documento, sustituyendo los caracteres por otros más cortos que
en ASCII.

En Photoshop (EPS es un tipo de archivo muy común también en otros programas) podremos transferir los
datos de la imagen al color de una impresora Postscript si activamos Gestión de color PostScript.

Nota 1: cualquier trabajo que realicemos en programas de dibujo vectorial (Adobe Illustrator, Freehand,
Corel, etc) podremos abrirlo (habitualmente rasterizado) en Photoshop si viene guardado en EPS.

Nota 2: Adobe Systems (Adobe Illustrator, Indesign, Adobe Photoshop, Adobe Acrobat, etc...) facilita el
intercambio o paso de imágenes, gráficos, texto, etc, entre los programas de su marca (Adobe Creative
Suite) con el simple copiar en un programa y pegar en otro.
De hecho, para los textos en Photoshop, yo particularmente, primero los resuelvo en Illustrator y luego los
copio y los pego en Photoshop.

- PDF. Un formato “universal” cada vez más extendido.

PDF permite una óptima compresión; es un formato de uso frecuente para la Web.

Al guardar u archivo en este formato en Photoshop, podrá seleccionar una compresión JPEG o ZIP; la
compresión ZIP no registra pérdidas y es más efectiva ante imágenes que no presenten una gama de colo-
res muy amplia. Yo, particularmente, utilizo la compresión JPEG pues me permite regularla para según qué
usos.

Nota: PDF es un formato “de impresión”, por lo que desde casi cualquier programa, incluso de tratamiento
de textos, se pueden guardar los archivos en PDF, ya sea directamente o través de la función Imprimir.
Habitualmente en los distintos programas, Imprimir tiene la opción de “guardar”, “crear” o “generar” PDF.
En Phososhop se pueden abrir documentos PDF, incluso páginas enteras ya maqueadas de revistas, docu-
mentos, etc. Eso sí cada página la “rasteriza”, es decir, la convierte en imagen.
PDF es formato utilísimo para transferir archivos de varias páginas, maquetaciones, libros, y también gráfi-
cos o diseños realizados con programas vectoriales; y, por supuesto imágenes generadas con Photoshop u
otros programas de tratamiento de imágenes.

● Otros Formatos de archivos poco utilizados en Photoshop:

- Pixar. Se utiliza en animaciones (“Toy Story”) y representaciones ·D.

Sólo admite imágenes en escala de grises y RGB

- TGA, también llamado Targa. se utiliza para imágenes de vídeo y animaciones.

- FLM. El formato Filmstrip se emplea para animación o para películas creadas por Adobe
Premiere.
 - RAW. Viene habitualmente con las cámaras digitales. Es un formato flexible para transferir
archivos entre aplicaciones. No es muy recomendable ya que, a veces, presenta
incompatibilidades y daña la imagen.

Nota importante: Debemos acostumbrarnos a utilizar formatos de archivo que yo denomino “universales”
es decir, que pueden transferirse con facilidad de un sistema a otro (Mac, PC, Linux); de un programa a
otro; que pueden abrirse, insertarse, colocarse o manipularse en la mayoría de los programas; y que pue-
den visualizarse en cualquier pantalla y con cualquier navegador. Estos archivos cubren más que suficien-
temente las necesidades de cualquier tipo de cualquier usuario, incluidos los diseñadores. Hay que acos-
tumbrarse a trabajar con:
Para trabajar: PSD (en Photoshop) y TIFF
Para comprimir y transferir: JPEG y PDF
Para Web: JPEG (fotos) y GIF (gráficos e ilustraciones con colores planos)
¡¡OJO!! para la Web y e-mails siempre hay que guardar los archivos en RGB
(si se guardan en CMYK no se visualizarán)

(FORMATOS GRÁFICOS)
● Hacer Imágenes GIF. Intentaremos configurar una imagen en formato GIF para sacarle el máximo rendi-
miento en el mínimo espacio posible con Photoshop.

- Primero debemos convertir la imagen a Color Indexado. Para ello deberemos “pasar” obligatoriamente por
modo RGB si hemos estado trabajando en otros modos (CMYK o Lab).

Al seleccionar color indexado, aparecerá un cuadro de diálogo.

Dentro del menú desplegable Paleta nos encontramos, entre otros, con:
- Exacta: esta opción aparecerá si lla imagen tiene menos de 256 colores.
- Web: pulsándola, aparece la paleta con todos los colores Web. esto garantiza que lo que vemos
en pantalla será exactamente lo que verán los demás en la Web.
- Adaptable: Es la mejor elección para crear gráficos para la Web.

En la casilla Colores, podemos introducir el número exacto de colores que queremos en nuestra imagen.
Cuantos menos colores se utilicen, menos ocupará el archivo GIF.
■ EL COLOR EN PHOTOSHOP

❏ MODOS DE COLOR.

- RGB.
Se basa en criterios de luz y no matéricos (o de tinta). Dado que RGB utiliza los valores lumínicos
para la creación del color, es el modo que utilizan los monitores, escáneres, televisores y, en definiti-
va, todos los dispositivos de proyección.

NOTA: RGB muestra algunos colores en pantalla que no pueden ser representados en papel, es
decir, no pueden imprimirse con la intensidad con la que los vemos en nuestro monitor.
RGB puede reproducir millones de colores y tiene 24 bits por píxel.

- CMYK.
Utiliza un mecanismo de composición del color basado en las mezclas de las tintas y se sustenta en
el comportamiento de la materia. Este sistema se conoce como sustractivo.
En imprenta se imprime en “cuatricromía”: Cian, Magenta, Amarillo y Negro.
Las imágenes en CMYK contienen 32 bits por píxel. Al pasar de RGB a CMYK lógicamente aumen-
tamos el tamaño del archivo.

- Lab.
El modo Lab es independiente de la luz y de la pigmentación.
Para este modelo se utilizan tres parámetros: luminosidad (L) y dos intervalos de color, a y b, el
primero va desde el verde oscuro al rosa vivo y el segundo, del azul brillante hasta el amarillo fuego.
Lab es el modelo que puede representar mayor número de colores. Abarca RGB y CMYK. Tiene una
profundidad de 24 bits/píxel.

NOTAS: CMYK mostrará la gama de colores más limitada de los tres y resultará a la vez un sistema más
lento a la hora de trabajar con imágenes, debido a que Photoshop tiene que convertir los colores CMYK a
RGB. No todos los filtros y efectos funcionan o pueden aplicarse en CMYK
Con Lab, aunque presente el espectro de colores más amplio de todos, sólo se podrán visualizar en panta-
lla los que entren en la gama RGB (Monitor).

CONCLUSIÓN: los colores que podemos ver, los que pueden representarse en pantalla y los que pueden
imprimirse no siempre son los mismos.

- Color indexado. Reduce la gama a 256 colores o menos. Se utiliza para transferencias o páginas
web.Lo mejor es realizar las operaciones en otro modo de color (RGB) y finalmente convertir la ima-
gen a color indexado. Una vez cambiado el modo a color indexado (que se utiliza prácticamente sólo
para web), lo mejor es escoger las opciones Web y Adaptable. Posteriormente en el submenú
Tramado escoger Difusión, pues los colores se dispersan aleatoriamente por la imagen y la dotan
de mayor naturalidad.

- Escala de grises

- Mapa de bits. Son imágenes que no contienen grises, tan sólo píxeles blancos y negros.
Lógicamente sólo tienen un bit de profundidad.
En las opciones que aparecen, 50% de umbral emplea un criterio bastante simple para convertir el
píxel en blanco o negro; si el píxel es más claro que un 50% de gris, lo convertirá en blanco; si es
más oscuro, en negro.
En Trama de semitonos, podemos especificar Lineatura, Ángulo y Forma

- Duotono. Este modo nos permite imprimir imágenes en escala de grises con varias tintas, añadir
tintas, cambiar la tinta negra por otra de color.

NOTAS: Algunos modos resultan incompatibles entre sí. La mejor manera de cambiar de modo de color
es pasando a través de RGB.
● Previsualizar colores en CMYK.
Uno de los retos mayores es conseguir que aquello que se ve en pantalla se parezca todo lo posible a
lo que se imprime.
Si se utiliza reiteradas veces y en varias sesiones los cambios de modo, es posible que vayamos perdien-
do información y calidad de imagen. Cada vez que lo hacemos, Photoshop sustituye unos colores por
otros, lo que supone un desgaste de información.

Lo ideal es trabajar en RGB de salida (modo en el que se aceptan todos los filtros y scripts) y para cono-
cer aproximadamente qué apariencia tendría la imagen en CMYK podemos utilizar el Ajuste de prueba:
(Vista / Ajuste de prueba / Espacio de trabajo CMYK).

● El Selector de color (PANTONE, FOLCOTONE, ...).

El cuadro de diálogo Selector de Color, aparece cuando pinchamos en cualquiera de los colores (frontal y
de fondo) o con el cuentagotas.
El Selector de color dispone de distintos sistemas de color. Por defecto aparecen equivalencias en HSB,
RGB, Lab y CMYK, pero si pinchamos en Personalizar, se abre otra vía de selección de color, con una
lista de catálogos de color: ANPA, FOCOLTONE, PANTONE, etc. Son tintas ya compuestas. De este modo
los diseñadores pueden elegir un color de estos catálogos, denominado tinta plana, para imprimir sin sepa-
raciones de cuatricromía (muy válido para serigrafía, para preparación de fotolitos para grabado, o para
imprenta).

● Corrección de la paleta de colores.

- Triángulo de alerta: aparece cuando seleccionamos un color brillante que Photoshop no puede
imprimir usando los colores estándar. El cuadro que aparece debajo corresponde al color CMYK más
próximo.

- Cubo de alerta de compatibilidad con la Web. Aparece si el color seleccionado no se encuentra

en la paleta llamada Compatible con Web (256 colores). Al clicar sobre el cubo o la muestra que
aparece debajo, Photoshop selecciona el color más próximo compatible con la Web.

- Valor Hexadecimal: código HTML que se utiliza en la Web.

- Sólo colores web: compatibles con la Web son los 216 colores que utilizan los navegadores inde-
pendientemente de la plataforma.
■ HERRAMIENTAS DE PINTURA

(Lo mejor es probar y probar y aplicar sentido común)

ALGUNAS NOTAS:
Por defecto, los pinceles son circulares.
- La opción espaciado alude a la frecuencia con la que se inserta el pincel en la imagen.
- Para crear pinceles personalizados, hay que activar Definir valor de pincel, del menú Edición.
Luego hay que Guardar pinceles. Para utilizar estos pinceles: Cargar pinceles.

● Barra de opciones del pincel.

- Modo: Gestiona la forma en que el pincel se fusionará con las capas subyacentes.
- Opacidad: el 100% corresponde a la máxima opacidad y el 0% a la total transparencia.
Aquí y en todos los sitios donde nos aparezca esta opción de Opacidad.
- Flujo: A mayor porcentaje más tinta y viceversa.

Hay más opciones pulsando F5 o activando el comando Pinceles de la paleta Ventana.

● Efectos adicionales.
- Ruido: Trama aleatoria de puntitos diminutos. Da al trazo un aspecto disperso en los bordes.
- Bordes húmedos.Confiere al trazo un aspecto mojado y ligeramente transparente.
- Aerógrafo (aplicar sentido común). Muy útil para retoques fotográficos.
- Proteger textura...

Pincel, Aerógrafo y Lápiz se diferencian especialmente por la textura que ofrecen, ya que las opciones
para estas herramientas son prácticamente las mismas.

■ HERRAMIENTAS DE TEXTO

(También lo mejor es probar y probar y aplicar sentido común)

Los textos se pueden importar (copiar en programa origen y copiar en Photoshop) desde distintos progra-
mas, sobre todo de Adobe. Los textos copiados desde Adobe Illustrator conservan todos sus atribu-
tos originarios y se pegan como una nueva capa.

Se puede crear un párrafo de texto si arrastramos la herramienta Texto por la imagen dibujando un
marco al que denominamos cuadro delimitador. Este cuadro contendrá el texto que vayamos a escribir.
A este texto se le pueden atribuir caracteres propios, como justificación, espaciado, etc... También pode-
mos crear un cuadro delimitador, pulsando ALT y haciendo clic con la herramienta Texto; aparecerá un
cuadro de diálogo en el que podremos especificar distintas opciones.

NOTA: Photoshop no es un programa específico de tratamiento de texto. Para esto son más adecuados los
programas genuinos de tratamiento de texto, desde Word a QuarkXpress o Indesign, o los de gráficos vec-
toriales como Adobe Illustrator, Freehand, etc.
Photoshop es válido para titulares y efectos especiales en textos no muy extensos; sin embargo, debido a
la rasterización de la imagen, los textos compuestos no tienen la nitidez de los programas antes citados.

● Máscara de texto.
Con esta herramienta se pueden crear contornos de selección en forma de texto
(texto contorneado o dibujado).
1.- Menú Texto, seleccionamos Máscara de texto...
2.- Clicamos sobre la imagen y escribimos.
3.- Si clicamos sobre cualquier herramienta de la Caja de Herramientas, el color que cubre la imagen
desaparece. De este modo, habremos creado un contorno de selección en forma de texto.
 También podemos Convertir texto en forma, con sus puntos de anclaje para modificar el trazado o
Convertir texto en trazado. (Más adelante se verán Trazados y Selecciones)

Muchos comandos disponibles para las capas no lo están para el texto. Por ello debemos convertir
el texto en capa si queremos aplicar dichos comandos. Es conveniente que actuemos sobre el texto lo
que creamos necesario (tipo, atributos, escalas, etc...) antes de convertirlo en capa, ya que esta acción no
es reversible y no podremos volver a editarlo como texto.
Una vez “rasterizado”, ya es una capa más. Al clicar en ella, aparecerán las opciones de capa y no las de
texto.

■ HERRAMIENTAS DE MODIFICACIÓN

- Herramienta Tampón.
(lo más de lo más para el retoque fotográfico)
Para “clonar” áreas de imagen, usamos la herramienta Tampón. Colocamos el cursor en el lugar
de la imagen que deseamos copiar, pulsamos ALT para fijar este origen y los parámetros de clona-
ción, y arrastramos con el ratón clicado.
Una opción fundamental para el retoque fotográfico es regular la opacidad del Tampón para clonar.

- Pincel corrector, Pincel corrector puntual, Parche y Pincel de ojos rojos.

(muy útiles para el retoque fotográfico)

- Pincel corrector. Como la herramienta Tampón, hace coincidir la textura, iluminación y sombreado
de los píxeles muestreados con los píxeles de origen. La zona corregida se fusiona con los píxeles
de alrededor. Funciona igual que el Tampón.

- Pincel corrector puntual, no necesita especificar el punto de la muestra, ya que muestrea auto-
máticamente el área que hay alrededor del punto retocado.

- Parche. Funciona de manera análoga al Tampón.

- Pincel de ojos rojos (lo que su propio nombre indica)

- Desenfocar, Enfocar y Dedo.

(muy útiles también para el retoque fotográfico)

- Enfocar. Aporta nitidez a la imagen. Si se abusa de ella, la imagen se va “dentando” y, de alguna

manera, “posterizando”. Conjugando esta herramienta con otras como brillo y contraste se
puede ampliar la resolución de una imagen.

- Dedo. Como su nombre indica actúa como un difuminador de bordes, colores y formas. Se
puede regular su intensidad. A veces, tarda en visualizarse su efecto, y nos podemos pasar con su
uso, por lo que hay que dosificar en pequeñas acciones su aplicación.
■ CREAR SELECCIONES
(el trabajo con selecciones es uno de los fundamentos básicos de Photoshop)

La selección es el área de una imagen en la que queremos intervenir que está dentro del contorno des-
crito con cualquiera de las herramientas que para ello ofrece Photoshop (lazos, varita mágica, a partir de
trazados, rectángulos, óvalos, etc. que están en la Caja de herramientas, dibujos importados, etc...)

Las selecciones se pueden añadir, restar o intersecar.

Aparece sobre la imagen como una línea de rayitas activas. Para ocultar temporalmente el borde de una
selección pulsar CTRL+H y las mismas teclas para hacerlo de nuevo visible.

Una manera muy útil para añadir o restar selecciones es el comando (...Invertir selección) .

● Desvanecer o Calar
CONCEPTO: Desvanecer una selección es difuminar sus bordes.
Para aplicar una calado primero hay que introducir un valor de calado. Este valor es, en realidad, el
espacio en píxeles a ambos lados del perímetro de la selección que se va a degradar.

1.- Selecciones desde la Caja de Herramientas (rectángulo, elipse, etc.):

- Para hacer una selección desde un centro debemos pinchar la imagen en el centro deseado y
pulsar a la vez la tecla ALT (esto es válido también para otros programas)
- Si queremos restringir los formatos de selección a cuadrados (herramienta rectángulo) o a círculos
(herramienta elipses) hay que pulsar a la vez la tecla MAYÚS.
- La combinación de ALT y MAYÚS crea selecciones circulares o cuadradas desde un centro.
- La herramienta Marco fila única permite la selección de una fila ancho 1 píxel de la imagen.
- La herramienta Columna única permite la selección de una columna de ancho 1 píxel de la imagen.

2.- La herramienta lazo:

(Una herramienta fundamental en Photoshop)
Las opciones para la herramienta lazo permiten establecer niveles de calado o suavizar la selección. Hay
que recordar que estas alternativas deben establecerse antes de dibujar la selección.

Lazo poligonal: realiza una selección mediante líneas rectas.

También se consigue utilizando la herramienta lazo normal y pulsando ALT.
Recordar (para este programa y muchos otros programas, sobre todo de Adobe): Podemos restringir
el trazado a líneas verticales, horizontales y a 45º pulsando la tecla MAYÚS a la vez que movemos
el ratón.

Lazo magnético: al arrastrar esta herramienta sobre la imagen, se crea una línea que se ajusta en
lo posible a los píxeles más contrastados, por lo que lo es ideal para seleccionar, con cierta
rapidez, objetos de bordes dificultosos fijados a fondos de alto contraste.

La opción Anchura del lazo actúa como un valor de tolerancia.

Contraste: Si fijamos un margen alto, obliga a la herramienta Lazo Magnético a que detecte sólo bordes
que contrasten notablemente con las áreas periféricas.
Lineatura: determina la frecuencia con que se insertarán puntos de control o sujección a lo largo del traza-
do que dibuja el lazo.

El lazo normal ayudado con tecla ALT (líneas rectas) es más preciso, aunque requiere mayor tiempo,
que el lazo magnético (útil cuando se quieren hacer operaciones o retoques de imágenes en serie).

Para cerrar una selección, hay que volver, tras hacer el trazado, al punto de origen o haciendo doble clic
o pulsando la tecla INTRO.
3.- Herramienta varita mágica.
Permite seleccionar áreas sin tener que dibujar un borde de selección. Se basa en la similitud de color
y tono de los píxeles circundantes al lugar donde se clica.
(Una herramienta muy útil y muy utilizada en Photoshop).

- Podemos añadir nuevas selecciones con la varita pulsando la tecla MAYÚS

- Podemos restar áreas a la selección pulsando la tecla ALT.

En el uso de la varita (y en general en todo lo que afecta a trazados, selecciones, etc...) es fundamental el
concepto de Tolerancia. A menor valor de Tolerancia, la selección se restringirá a colores iguales o muy
similares al que se ha escogido en el punto en que se clica; a mayores valores de Tolerancia se seleccio-
narán los anteriores y además píxeles de tono o color más alejado del escogido.

La opción Contiguo selecciona las áreas que están conectadas entre sí.

4.- La herramienta selección rápida.

Esta herramienta permite seleccionar, como si se tratase de un pincel: sólo hay que arrastrar la herra-
mienta por la imagen y la selección se va añadiendo o restando (según la opción seleccionada). La selec-
ción se expande y sigue automáticamente los bordes definidos en la imagen.

Importante:
- Muestrear todas las capas permite seleccionar píxeles de toda la imagen aunque ésta tenga más
de una capa.
- Mejorar automáticamente reduce la rugosidad y solidez del límite de la selección.
- Perfeccionar bordes: este botón aparece en la Barra de opciones de todas las herramientas de
selección, haciendo clic sobre él podemos mejorar los bordes y ver la selección con diferentes fon-
dos para facilitar su edición.

❏ GESTIÓN CON SELECCIONES

RECORDAR:
- Sumar selecciones..... tecla MAYÚS (mantener presionada)
- Restar selecciones..... tecla ALT (mantener presionada)

Desplazar selecciones con su contenido es lo que se conoce como flotar selecciones.

(Tomar herramienta Mover)

LAS SELECCIONES SE PUEDEN TRANSFORMAR CON DIVERSAS HERRAMIENTAS

(Edición / Transformar / ...):

- Escalar - Rotar - Sesgar - Distorsionar - Perspectiva

- Deformar - Rotar180º, 90º AC, 90ºACD - Voltear horizontal y vertical

(Edición / Transformación libre): permite aplicar escalados y giros a la vez. Pulsando CTRL se puede distor-
sionar la selección y presionando ALT podemos sesgarla. Su funcionamiento es similar al de Transformar.

Las selecciones se pueden (y deben) guardar ya que suponen una buena parte del trabajo a hacer.
Un Canal es el lugar donde se guardan selecciones. Se le suele dar un nombre (al canal) suficiente-
mente descriptivo para facilitar su reconocimiento.
Para volver a mostrar las selecciones guardadas, hay que pulsar el comando Cargar selección del
menú Selección.
❏ MANIPULAR SELECCIONES.
Invertir (comando Invertir del menú Selección) es uno de los comandos más útiles de Photoshop.
Para fondos lisos o hasta cierto punto monocromáticos es un complemento perfecto de la varita mágica.
Es un comando que habitualmente pasa desapercibido y, sin embargo, es de una gran utilidad. Hay que
acostumbrarse a trabajar con él.

Seleccionar gama de colores. Además de la Varita mágica, existe en Photoshop otro mecanismo
para diferenciar zonas mediante analogías de color; es el comando Gama de colores del menú
Selección.
Este comando incorpora distintos modos de seleccionar colores en una imagen.

Seleccionar muestreados (Selección / Gama de colores / Muestreados)

(Un comando utilísimo). La selección se hace en función de la similitud del color de los píxeles periféri-
cos a los seleccionados. Al igual que en la Varita Mágica, este comando incorpora un margen de tole-
rancia que permite regular la amplitud de la selección en la imagen.

El uso de Muestreados permite también añadir o restar más áreas de selección sin necesidad de utili-
zar el teclado.
El cuentagotas Añadir a ejemplo posibilita seguir sumando selecciones de colores, mientras que el
cuentagotas Restar del ejemplo permite restar.

● Comando Modificar del menú Selección:

- Borde crea una selección con un grosor determinado en el contorno, de manera que ésta queda
reducida a un reborde alrededor del área que estaba seleccionada
- Redondear es una manera de capturar píxeles perdidos dentro o fuera de una selección
- Expandir permite agrandar el perímetro de la selección entre 1 y 16 píxeles.
- Contraer reduce el perímetro de la selección entre 1 y 16 píxeles
- Desvanecer permite aplicar un calado a una selección que ya existe sobre la imagen.
■ TRAZADOS EN PHOTOSHOP

Photoshop incorpora una serie de herramientas de dibujo vectorial. Se utilizan principalmente para crear
perímetros de selección más precisos que aquellos que podemos realizar con las herramientas de
selección tradicionales, ya que las selecciones no se pueden editar, pero sí las líneas de dibujo.

Conceptos básicos:
- Los trazados son objetos vectoriales, líneas de dibujo, y, por tanto, no contienen píxeles.
- Los trazados se colocan sobre la imagen, sin afectarla; no forman parte de ella y, aunque se
visualizan, no se imprimen (no son Imprimibles)
- Las trazados generales se dividen en subtrazados. Un subtrazado está constituido por una serie
de puntos de generación o conexión y unas líneas (rectas o curvas) que los unen.
- Los puntos (Puntos de ancla) marcan conexiones de la línea de dibujo a la imagen y se pueden
controlar mediante un par de tirantes o manejadores. Actuando con ellos, a la manera de tenso-
res, modificamos las líneas adyacentes del subtrazado.
- Los manejadores o tirantes, parten de cada punto y definen la dirección y sentido de los dos
extremos de líneas del subtrazado adyacentes a él.

● Para crear trazados:

- Directamente (a huevo): utilizamos la herramienta pluma y vamos clicando punto a punto por
la imagen, con lo que se irá definiendo el trazado. Si al clicar no arrastramos el ratón la unión entre
los puntos será una recta; si arrastramos levemente, aparecen automáticamente los dos tirantes del
punto que podemos mover según nos interese el trazado.

- Aún más directamente: Pluma de forma libre: podemos crear trazados a mano alzada, como
con la herramienta lazo. Si queremos restringir el trazado a rectas, basta con mantener pulsada la
tecla ALT mientras dibujamos.
Para esta herramienta existe una opción: Encaje de curva (si introducimos valores bajos se crea
una línea más fiel a nuestros movimientos con el ratón, a nuestra “mano alzada).

- Aún más libre, pero más imprecisa es la Pluma magnética (seleccionar la casilla Magnético
para poder utilizarla. Esta pluma permite ceñirse a los bordes de las zonas a seleccionar. Hay que
configurar Anchura, Contraste y Lineatura según queramos adaptar el trazo.

- Se pueden añadir y eliminar puntos de ancla en el trazado con las herramientas pluma+ y pluma-.

MUY IMPORTANTE y MUY UTILIZADO:

- Los trazados se pueden convertir en selecciones (Cargar el trazado como selección),
o seleccionando Hacer selección del menú contextual de la paleta
- Las selecciones se pueden hacer trazados: Hacer trazado desde selección de la paleta
Trazados, o Hacer trazado en uso del menú de la paleta. Para ceñirse mejor a los contornos hay
que poner una Tolerancia baja, o la mínima: 0,5 píxel.
■ AJUSTES EN LA IMAGEN

Histograma.
Facilita información sobre los niveles de brillo de una imagen.
(Menú Ventana / Histograma)
Este Histograma de luminosidad se compone de una coordenada horizontal que hace referencia a los
valores de brillo, y otra vertical que alude al número de píxeles que se dan en la imagen con un valor
de brillo específico.
Es una vía de información muy útil para conocer el equilibrio de brillo de una imagen.

Equilibrio de color.
(Imagen / Ajustes / Equilibrio de color)
Equilibrar el color de una imagen es dosificar la cantidad de cada color primario en la totalidad de
la misma. Si, por ejemplo, nos encontramos con una imagen que, en general, tiene una cantidad
excesiva de azul, con este comando se puede disminuir el azul sin dañar la luminosidad de la imagen.
La casilla Preservar luminosidad mantiene la uniformidad en los valores lumínicos de la imagen.
Algo muy similar también se puede hacer desde Curvas (Imagen / Ajustes / Curvas).

Brillo/contraste.
(Imagen / Ajustes / Brillo/contraste)
No sólo se utiliza para regular la cantidad de brillo o contraste de una imagen. También se utiliza
a menudo para “enfocar” o dar mayor nitidez a imágenes aumentadas de tamaño (de resolución).

Tono/saturación.
(Imagen / Ajustes / Tono/saturación)
Es un comando utilísimo para variar ligeramente de una sola operación el tono de una imagen,
así como establecer distintos niveles de saturación de color y de luminosidad. Yo, particularmente, lo
utilizo muchísimo.
Por lo general cuando se utiliza Tono/saturación, lo que se pretende es alterar una gama de colores de
la imagen y no un único color.

Reemplazar color.
(Imagen / Ajustes / Reemplazar color)
Este comando escoge una gama de colores para cambiarla por otra.
No realiza una selección de contornos, sino de colores.

Mapa de degradado.
(Imagen / Ajustes / Mapa de degradado)
permite aplicar un degradado de colores tomando como referencia el lugar que cada color de la
imagen ocupa en la escala de grises. Los tonos más oscuros recibirán el color inicial de degradado y
los más claros el final. Los medios tonos adoptarán las posiciones intermedias de la escala de grises.

Filtro de fotografía.
(Imagen / Ajustes / Filtro de fotografía)
Consiste en aplicar un filtro, de un color determinado que seleccionamos, a una fotografía a la
manera de los fotógrafos profesionales para crear ambientes, efectos, acentuar colores, etc.
El regulador Densidad permite dosificar la incidencia del filtro sobre la imagen.
Si activamos la casilla Conservar luminosidad, evitaremos que la imagen se vea oscurecida al aplicar
el filtro.
Sombras/iluminaciones.
(Imagen / Ajustes / Sombra/iluminación)
Para solucionar problemas típicos de la fotografía como contraluces, sombras, luces, etc.
El cuadro de diálogo tiene varios reguladores para corregir los niveles de luz.
A través del regulador Anchura tonal indicamos qué valores de la gama se verán afectados. El regula-
dor Radio selecciona el diámetro de la aplicación del efecto desde el píxel afectado. Cuanto más alto
sea el valor, más píxeles circundantes se verán afectados.

Exposición.
(Imagen / Ajustes / Exposición)
Está diseñado para ajustar los tonos en imágenes de 32 bits, son imágenes HDR (Alto Rango
Dinámico) aunque también puede ser utilizado en imágenes de 8 y 16 bits. El rango dinámico es la
proporción entre las áreas oscuras y claras.

Invertir.
(Imagen / Ajustes / Invertir)
Se ejecuta automáticamente, sin reguladores. Cambia cada color por su opuesto o complementario.
A veces se obtienen imágenes sorprendentes.
EJERCICIO: POSITIVADO DIGITAL DE UN NEGATIVO ESCANEADO:
1.- Imagen / Ajustes / Invertir (CTRL+I)
2.- Imagen / Ajustes / Niveles automáticos
3.- Imagen / Ajustes / Corrección selectiva
Hay otros caminos para hacer esto mismo.

Ecualizar.
(Imagen / Ajustes / Ecualizar)
Ecualizar una imagen es volver a gestionar los niveles de brillo siguiendo unas pautas que dan como
resultado una imagen mucho más contrastada, y por ello lógicamente más “dibujada” y con colo-
res un tanto más saturados.
Se ejecuta automáticamente, sin reguladores, y da resultados sorprendentes, sobre todo en foto-
grafías procedentes de cámaras digitales.
Se puede ecualizar la imagen entera o sólo áreas seleccionadas de la misma.

Umbral.
(Imagen / Ajustes / Umbral)

NOTA: Desaturar, Umbral y Posterizar son efectos cuyos resultados son similares a los que se consi-
guen cambiando a los modos Escala de grises, Mapa de bits o Color indexado.

Posterizar.
(Imagen / Ajustes / Posterizar)
Este comando reduce el número de colores según indiquemos, haciendo coincidir los píxeles origi-
nales con el nivel de brillo y tono más cercano a los nuevos valores.
Se varía la imagen hacia pocos colores casi planos.
Yo lo utilizo también para “limpiar” y enfocar imágenes que aparecen sucias o turbias o desenfocadas.

Variaciones.
(Imagen / Ajustes / Variaciones)
Es un comando muy completo y utilizadísimo. En cualquier caso conviene pasar por él, para ver
qué nos ofrece antes de desecharlo. Posibilita correcciones de tono y ajustes de la imagen,
pudiendo intervenir en las sombras, los medios tonos, la iluminación y la saturación.
● CAPA DE RELLENO O AJUSTE.
(Imagen / Ajustes / capa de relleno o ajuste)
Para que las modificaciones no afecten a la imagen original Photoshop permite introducir ajus-
tes en forma de capa, actuando como un filtro sobre todas las capas subyacentes. Por ejemplo,
podemos crear una capa con el comando Brillo/saturación y regresar a ella para volver a modificar
estos valores cuantas veces se quiera, con la ventaja de poder eliminarla cuando lo deseemos sin
dañar la imagen, cambiarla de posición para que afecte a otras capas, etc.

Para crear una capa de relleno o ajuste:

1.- Seleccionar la opción Nueva capa de ajuste o Nueva capa de relleno en el menú Capa, o
bien podemos clicar en el icono Crear nueva capa de relleno o ajuste.
2.- Se especifican los atributos de la capa y pulsamos OK
3.- Automáticamente se abrirá un cuadro de diálogo. Se realizan las correcciones pertinentes y
pulsamos OK.
4.- La capa de relleno afectará a todas las subyacentes.

Este comando se entenderá mejor después de leer el siguiente capítulo.

■ LAS CAPAS EN PHOTOSHOP

Las capas son láminas o páginas que contienen imágenes y que, apiladas o superpuestas, confor-
man el resultado final de una composición o una imagen. Se pueden manipular e intervenir una a
una independientemente del resto de capas. También se puede cambiar el orden de superposición y
su opacidad o transparencia.

Las capas pueden agruparse en grupos.

Por defecto, el modo de fusión de un conjunto de capas es Pass Trough.

Para crear un grupo de capas: enlazamos las capas que queramos incluir en el grupo; seleccionamos el
menú Capa, a continuación Nueva y activamos Grupo a partir de capa.

Para enlazar capas, seleccionamos las capas que queramos enlazar utilizando la tecla CTRL y hacemos
clic sobre el icono Enlazar Capas que se encuentra en la parte inferior de la paleta Capas.

Parar trasladar capas, tomamos la capa en la imagen de origen con el ratón y la llevamos a la imagen de
destino.

Lo mejor es crear capas mediante el sistema de Copiar y pegar. Cada vez que hagamos esto, se
generará automáticamente una nueva capa.

Para crear un nuevo fondo, acceder al menú Capa y seleccionar la opción Nueva. Activar Fondo a partir
de capa en el submenú.

IMPORTANTE: Para seleccionar el contenido de una capa, pulsamos CTRL y clicamos en la capa que que-
ramos de la paleta Capas. Si contiene zonas transparentes, éstas no se incluirán en la selección y el con-
torno permanecerá fiel a las zonas opacas.

●Alinear contenidos de capas.

Comandos que nos permitirán ubicar con exactitud el contenido de las capas.
Alinear enlazadas
Alinear con la selección
Distribuir enlazadas

Para alinear capas tomando como referencia una de ellas, hay que seleccionarla primero y con la
tecla CTRL pulsada clicar en las siguientes:

- Bordes superiores, los bordes de los contenidos de las capas se alinean con la superior de la
capa activa

- Centros verticales, se alinean por el centro geométrico horizontal de cada uno de los contenidos
de las capas.

- Centros horizontales, alinea los centros de cada capa en un eje vertical centrado.

- Bordes inferiores (contrario de Bordes superiores)

● Alternar el orden de capas.

Comando Organizar y :
- Hacia atrás
- Traer al frente
- Enviar detrás
- Invertir, (opción que nos cambia el orden de las capas)
● Quitar halos.
Al final del menú Capa (Capa / Halos / Eliminar halos...)
Para eliminar imperfecciones en el recorte del área seleccionada.
Resuelve el problema de los recortes a menos que sean excesivos.
Eliminar halos, aunque se llame eliminar, transforma los colores de los píxeles de contorno por los
de los más interiores.

RECORDATORIO ÚTIL: las zonas vacías de imagen no contienen información y, por lo tanto, tampoco píxe-
les, por lo que no hay en ellas intervención ni manipulación posible.

● Regular la opacidad.
Muy útil para montaje fotográfico, efectos fotográficos, collages digitales y superposiciones
de imágenes. (Particularmente lo utilizo mucho).
Simplemente se desplaza el cursor o se mete un valor entre 0 y 100% según la versión del programa.
Cada vez que se genera o se crea una capa nueva, ésta viene por defecto con un valor de opacidad
del 100%. Es sencillísimo regular la opacidad y facilita mucho los fotomontajes.

● Bloquear capas.
Aparece un candado a la derecha del nombre de la capa. Si está relleno de color, el bloqueo es
completo, de modo que será imposible editarla (intervenir en ella). Si está hueco, el bloqueo será
parcial, de forma que su contenido no puede editarse con Mover.

❏ CREAR MÁSCARAS DE RECORTE

En un grupo de recorte, la capa inferior actúa como una máscara para todo el grupo.
Las capas de un grupo de recorte deben ir consecutivas. El nombre de la capa base aparece subrayado y
las miniaturas de las capas superiores aparecen sangradas y con el icono de grupo de recorte (se trata de
una flecha quebrada señalando la capa inferior).

EJEMPLO:
1.- Tenemos dos capas, una de formas y otra de texto. La capa de texto se encuentra debajo de la
de imagen.
2.- Mantenemos pulsada la tecla ALT y colocamos el puntero sobre la línea que divide las dos capas
en la paleta Capas. El cursor tomará forma de dos círculos superpuestos. A continuación hacemos
clic.
3.- Aparecerá el nombre de la capa base (en este caso la de texto) subrrayado y la superior con el
icono de la flecha quebrada.
4.- Al haber escogido como capa base la capa de texto, el resultado es el interior de las letras del
texto relleno con la parte correspondiente de la imagen de la capa superior.
5.- Para eliminar una capa de un grupo de recorte, mantenemos pulsada la tecla ALT y volvemos a
colocar el puntero sobre la línea que divide las dos capas agrupadas. Si clicamos las dos capas
serán independientes otra vez.

❏ OBJETOS INTELIGENTES (A partir de Photoshop CS2)

(Como todo lo inteligente, algo poco valorado y, sin embargo, interesante y práctico).

La opción Objetos inteligentes permite escalar y deformar los objetos sin que pierdan resolución.
Si tenemos dos objetos (imágenes) iguales, uno convertido en objeto inteligente y el otro no, si reducimos
el tamaño de ambos y volvemos a aumentarlos vemos como la imagen que no estaba convertida en objeto
inteligente pierde resolución, mientras que la imagen convertida en objeto inteligente mantiene sus propie-
dades y no se ve alterada por el aumento de tamaño.

Una vez trasformada una imagen en objeto inteligente no es posible realizar operaciones que alteren los
píxeles de la imagen como pintar, clonar,etc... Para poder realizar estas operaciones hay que rasterizar la
capa.

● Crear objetos inteligentes.

Opciones:
- Archivo / Abrir como objeto inteligente
- Archivo/ Colocar, se creará una nueva capa como objeto inteligente
- Copiar y pegar desde otro programa y elegir la opción Pegar como Objeto inteligente.

❏ MODOS DE FUSIÓN DE CAPAS

MUY IMPORTANTE.
Un modo de fusión es una manera de mezclar el color de los píxeles de una capa con el de las capas
situadas bajo ésta. Estos modos pueden utilizarse también con todas las herramientas de pintura.

HAY QUE TENER CLAROS LOS SIGUIENTES CONCEPTOS:

El color base es el color original de la imagen. El color de fusión es el color aplicado con la herramienta de
pintura o de edición. El color resultante es el color obtenido de la fusión.

- Disolver: sustituye los colores superiores por los inferiores de manera aleatoria.
El efecto se potencia más si aplicamos menos opacidad.

- Oscurecer: es otra forma de conseguir que las imágenes muestren sus zonas más oscuras;
prevalecerán los píxeles más oscuros de todos.

- Aclarar: la inversa de oscurecer

- Multiplicar. Tanto el modo Normal como el modo Disolver no son modos de fusión, en cierta
manera, puesto que no se da una mezcla de colores, sino una sustitución.
NOTA: todos los colores tienen una correlación con la escala de grises, por lo que un rojo visto en
blanco y negro daría un gris oscuro, y un amarillo, sin embargo, daría un gris claro. Pues bien,
fusionar con Multiplicar genera una imagen de colores mezclados que será más o menos oscura
en función de la correlación de los píxeles de la capa activa con la escala de grises: cuanto más se
acerque ese píxel al negro, más oscuro será el resultado, y cuanto más se aleje, menos se oscure-
cerá.De hecho, si los píxeles son blancos no se producirá ninguna modificación; mientras que si
son oscuros o negros, el resultado será un negro puro.

- Trama. Mecanismo de modo de fusión inverso al que utiliza Multiplicar.

Si el píxel es negro, no se producirá variación alguna.

- Subexponer: resultará una imagen más oscura cuanto más lo sea el píxel superior; y menos,
cuanto más claro, de manera que el blanco no produce cambios.

- Sobreexponer. Los píxeles superiores se aclararán en general. El negro no modifica la imagen,

mientras los blancos generan blanco puro. También respetará las partes más oscuras y más claras
de la imagen.

- Superponer. Actúa más en los tonos medios. Este modo es ideal para dar color a imágenes en
grises, o para que la capa actúe como un velo parcialmente transparente.
 - Luz suave. Los píxeles de menos de un 50% de gris, aclararán la imagen, los más oscuros la
oscurecerán.

- Luz fuerte. Resulta útil para añadir sombras a la imagen.

- Luz intensa. Los píxeles inferiores se aclaran u oscurecen en función del grado de oscuridad de
los superiores.

- Diferencia. el color de los píxeles inferiores será modificado en cuanto a su composición, pues se
le sustrae el superior. La apariencia final es una imagen que parece estar en negativo, en cuanto a
brillo y color.Si los píxeles inferiores son negros no se produce ningún cambio; si son blancos, los
colores de los píxeles superiores quedarán invertidos.

❏ OPCIONES DE FUSIÓN DE CAPAS.

(Capa / Estilo de capa / Opciones de fusión...)
(Algunas notas)...

● FUSIÓN AVANZADA:
- Opacidad de relleno: sólo afecta a los píxeles pintados de una capa.
Seleccionar los colores de los píxeles que se verán afectados marcando la casilla R para los píxe-
les color rojo, G para los verdes y B para los de color azul.

- Cobertura, permite especificar las capas a atravesar para mostrar el contenido de otras. Al utilizar
opciones de Cobertura, elegir Pass Trough como modo de fusión del conjunto de capas.

- Fusionar si es, ofrece distintas gamas sobre las que actuar.

- Capa subyacente. (su propio nombre lo indica). Si queremos crear una leve transición con la que
matizar los bordes irregulares, hay que pulsar ALT en el teclado al mismo tiempo que se actúa
sobre cualquiera de los dos reguladores; a continuación, arrastrar.

- Acoplar imagen es un comando que combina automáticamente todas las capas visibles.
Es, finalmente, el comando más utilizado para fusionar todas las capas.

- Fusionar capas automáticamente. Cuando pretendemos crear una composición con varias imá-
genes es posible que las diferencias de exposición entre ellas haga que la unión se note como si
fuese una costura. Fusionar Capas automáticamente hace que esa superposición entre imáge-
nes se haga de manera suave y pase casi inadvertida.

Ejemplo: VAMOS A CREAR UNA FOTO PANORÁMICA CON TRES IMÁGENES.

Opción 1
1.- Cargamos o importamos las imágenes (Archivo /Secuencia de comandos / Cargar archivos en pila)
2.- Seleccionamos las 3 imágenes desde Explorar y clicamos OK
3.- Las imágenes se abrirán en distintas capas de un mismo archivo.
4.- Seleccionamos todas las capas (haciendo uso de la tecla CTRL) y elegimos Edición / Alinear
capas automáticamente, optando por alguna de las opciones que aparecen (Automático,
Perspectiva, Cilíndrico, Sólo cambiar posición). Automáticamente las imágenes se alinearán para
formar una sola.
5.- Las tres imágenes se han unido por donde se superponen pero el corte entre ellas se nota dema-
siado. Entonces seleccionamos el comando Fusionar automáticamente del menú Edición. Se creará
una máscara en cada capa dando como resultado una composición uniforme.
6.- Aumentando con el zoom, si se quiere se puede repasar las superposiciones e intervenir con cual-
quiera de las herramientas de retoque.
7.- Finalmente se recorta la imagen.
Aunque hay otra Opción 2 totalmente diferente: Utilización de PHOTOEMERGE

Photoemerge (Archivo / Automatizar / Photoemerge) es una pequeña aplicación que permite unir dos o
más fotografías que, unidas, forman una sola o una panorámica.

1.- Escogemos Photoemerge (Archivo / Automatizar / Photoemerge).

2.- En la lista de archivos seleccionamos las imágenes que van a ser unidas. Si ya están abiertas,
seleccionamos Archivos abiertos.
3.- Seleccionamos una de las opciones de Composición que aparecen en el cuadro Photoemerge:
Automático, Perspectiva, Cilíndrica, Sólo cambiar posición y Composición interactiva.
4.- Pulsamos Ok y Photoshop crea una imagen con varias capas desde las imágenes de origen, al
lado de la miniatura de la capa se añade una máscara de capa fusionando donde se superponen las
imágenes.
5.- Con la herramienta recortar, recuadramos la imagen y eliminamos márgenes sobrantes.
6.- A un buen diseñador o fotógrafo, nadie le quita “repasar”con el zoom y retocar las uniones, aun-
que a veces no sea estrictamente necesario, pues puede parecerle “sospechosamente fácil”.
■ DESHACER ACCIONES Y RECTIFICAR
El comando más utilizado en Photoshop y en la mayoría de los programas es Deshacer (cmd Z), que per-
mite volver un paso atrás en caso de errores o rectificaciones.

■ LA PALETA HISTORIA
(Una herramienta a la que, poco a poco, nos debemos acostumbrar por su gran utilidad).
La paleta Historia almacena las imágenes en diferentes estados de modificación.
Cada una de las operaciones realizadas en un archivo (imagen) se fija en la paleta Historia por orden de
ejecución, con una frase o nombre de la acción realizada.
Esta paleta sólo tiene en cuenta los actos que modifiquen la imagen.
Con esta paleta podemos volver a un estado concreto de la imagen, con lo que ya no estamos limitados al
comando Deshacer en las rectificaciones. Además podremos incluir otras instantáneas pertenecientes a
otros niveles evolutivos del trabajo.
Permite guardar, por defecto, los 20 últimos estados de la imagen. (Aunque se puede aumentar hasta 100
pero “come” mucha memoria).
Lo más acertado es realizar algunas “instantáneas” a lo largo del proceso.
Los estados e instantáneas de la paleta Historia son temporales, es decir, se eliminan cuando termina la
sesión guardando y cerrando el archivo. Estos estados pueden convertirse en archivos, las instantáneas
(Crear instantánea nueva), por lo que siempre podemos optar por conservarlos. También se pueden elimi-
nar: Eliminar estado actual.

■ EL BORRADOR.
Realmente lo que hace es pintar con el color de fondo.

■ EL BORRADOR DE FONDOS.
Con las opciones Tolerancia y Muestras, se puede controlar el rango de transparencia y la nitidez de los
límites.
También se encarga de extraer color de los bordes de un objeto por lo que los halos de color desaparece-
rán al pegar el objeto sobre otra imagen.

-Tolerancia.- Con una tolerancia baja, el pincel de muestreo está limitado y borra áreas muy pare-
cidas al color muestreado. Una tolerancia alta borra un campo de colores más extenso.

- Continuo, para muestrear colores continuamente mientras arrastramos.

- Una vez, para borrar sólo las áreas que contienen el color en el que hemos hecho clic primero.

Para borrar con el Borrador de fondos, hay que deslizar la herramienta por el área que deseamos elimi-
nar. El puntero Borrador de fondos aparece en forma de pincel con una cruz que indica la zona interactiva
de la herramienta.

- Comando volver. El último recurso.

F12... Volvemos a la última versión guardada de la imagen.
■ CANALES

Un canal de color es una vía de información de un solo color primario.

En CMYK se hace corresponder cada canal de color con un fotolito en la imprenta. Habrá un canal para el
Cian, otro para el Magenta, otro para el amarillo, y otro para el negro.

Cada píxel de un canal tiene una profundidad de 8 bits, ya que los canales se representan en escala de
grises (hasta 256 niveles de gris).

- Las imágenes RGB (VA) y Lab tienen tres canales, por lo tienen una profundidad de 24 bits (8x3)
- Las imágenes en Escala de grises, Duotono e Indexado tienen un único canal, son imágenes de 8 bits.
- Las imágenes en CMYK tendrán 32 bits (8x4)

Una imagen puede llegar a almacenar hasta 24 canales.

Si la imagen está compuesta por varias capas, cada una de ellas tendrá su propio canal.

El comando Curvas.
El más utilizado por los preparadores de imprenta.
Este comando tiene una gran similitud con el comando niveles. La coordenada vertical contiene los valores
para los niveles de Salida y la coordenada horizontal contiene los valores para los niveles de Entrada.

❏ LAS MÁSCARAS

Cuando realizamos una selección en la imagen, obtenemos una zona “de acción” a la vez que protegemos
el resto de la imagen. A esta zona protegida la llamamos área enmascarada. Funciona de una manera muy
similar a las máscaras de aerógrafo o de rotulista que se utilizaban para cubrir zonas donde no se quiere
que caiga pintura.

Hay tres formas de generar máscaras:

- Máscaras de capa
- Canales alfa
- Máscara rápida

Con las máscaras, entendemos que las zonas de selección y las zonas de máscaras forman parte de un
área en escala de grises, donde el blanco y el negro representan zonas de selección y de máscara respec-
tivamente. Los grises representarán zonas más o menos enmascaradas en función de su aproximación al
blanco o al negro.

❏ LOS CANALES ALFA. Un canal alfa es un canal que se añade a la paleta Canales y que NO CONTIENE
INFORMACIÓN DE COLOR, SINO LA SELECCIÓN GUARDADA CON SUS CORRESPONDIENTES ZONAS ENMASCARADAS. Todos
los canales extras que se adosan a una imagen son entendidos por Photoshop como canales alfa.
No podrán sobrepasar la cantidad de 56.

● Cómo se crea un canal alfa:

- Guardando una selección en un canal nuevo
- Creando dicho canal directamente en la paleta Canales, utilizando el icono Guardar selección
como canal.

Nota: cada vez que utilicemos el comando Guardar selección, debemos especificar un canal donde guardar
la selección.

● Modificar un canal alfa:

Cuando trabajamos con un canal alfa, una imagen en escala de grises puede actuar en él con todos los
recursos disponibles para tratar una imagen con este modo y modificar o generar una máscara.
De este modo, si pintamos en el canal con blanco, estaremos estableciendo zonas de selección; si pinta-
mos con grises, zonas parcialmente seleccionadas, y si lo hacemos con negro, zonas de máscara.

Las opciones para los canales sólo están disponibles para los canales alfa y no para los canales de color;
no debemos confundirlos. Los primeros dotan a la imagen de información de color; los segundos -los cana-
les alfa- son canales de máscaras.

- Máscara rápida.
Crea un canal temporal, es decir, que aunque se utilice igualmente para generar y modificar selecciones,
éste no quedará almacenado indefinidamente en la paleta Canales.

- Máscara de capa.
Es una forma muy práctica de aplicar una Máscara a una capa y no a la totalidad de la imagen.
Una Máscara de capa se adosa también como un canal extra en escala de grises, y se modifica con distin-
tos niveles de tinta negra, pero con una particularidad, además se incorpora junto a la capa activa en la
paleta Capas.

Las máscaras de capa se utilizan básicamente para ocultar o modificar parcialmente una capa.

❏ CANALES DE TINTA PLANA

Fundamental para preparar fotolitos para pantallas de serigrafía, o imprenta con colores directos, etc...

Los canales de tinta plana se incorporan a la imagen como canales anexos y necesitan se sus propias
separaciones en la imprenta.

Podemos convertir cualquier canal alfa en uno de tinta plana, o convertir un canal de color de la imagen
duplicándolo primero, esto es, creando un canal alfa a partir de uno de color y convirtiéndolo en canal de
tinta plana.
También podemos combinarlos con la imagen a través de la opción Combinar canal de tinta plana.

● Para crear un canal de tinta plana:

1.- Paleta Canales...seleccionar Nuevo canal de tinta plana
2.- Seleccionamos una tinta plana del catálogo de Selector de color / personalizar y pulsamos OK
3.- Tras la selección de la tinta plana introducimos un valor de 0 % a 100% en la casilla Solidez. y
pulsamos OK.
4.- Activamos el canal de tinta plana, que por defecto aparece vacío, y pintamos o intervenimos en
él. Esta acción se transcribe en escala de grises.
5.- Para convertir un canal alfa (una selección) en uno de tinta plana, clicamos en Opciones de
canal; en el campo El color indica del cuadro de diálogo, seleccionamos Tinta plana. Una vez
más, clicamos en la casilla de color y seleccionamos la tinta plana para el canal.
6.- Tras elegir color concretamos un grado de opacidad en el campo Solidez y pulsamos OK

● Modo multicanal.
(Imagen / modo / Multicanal)
Es un sistema de color sustractivo.
Una imagen multicanal carece de canal compuesto y puede tener un número elevado de canales de color.
Por otra parte, cada uno de los canales se convierte en canal de tinta plana.

Con el modo Multicanal, podremos seleccionar las tintas planas para cada canal si disponemos de un catá-
logo y, de este modo, tener una aproximación mayor a los colores impresos.

Las imágenes en modo de bits e indexado no pueden convertirse a modo Multicanal, ni una imagen multi-
canal puede ser convertida a modo Indexado o Duotono, aunque sí a modo Mapa de bits.
● Para cambiar de sistema de color:
1.- Seleccionamos la orden Multicanal del submenú Modo en el menú Imagen.
2.- En la paleta Canales, ha desaparecido el canal compuesto y cada canal de color se ha
convertido en uno de tinta plana.
3.- Para cambiar la tinta de un canal, hacemos doble clic sobre él y en la casilla de color regulamos
el nivel de Solidez y pulsamos OK.

■ FILTROS Y OPCIONES DE FUSIÓN

(Capa / Estilo de capa / Opciones de fusión / ...)

Opciones de fusión más utilizadas (con sus reguladores de intensidad, ángulo de luz, etc.)
- Sombra paralela
- Sombra interior
- Bisel y relieve
- Superposición de colores, degradado o motivo

FILTROS.
Son efectos especiales que se pueden aplicar a una imagen de manera casi automática
Los filtros pueden pertenecer a Photoshop o provenir de fuentes externas y se instalan en la carpeta Plug-
Ins de Photoshop.
Lo mejor es probar con cada uno de ellos. La mayoría tienen reguladores para especificar cómo se apli-
ca el filtro.
Son de efectos espectaculares, aunque finalmente muy poco utilizados en le retoque fotográfico y en la
creación artística.
Los más útiles con diferencia para estos campos de creatividad son:
- Enfocar. Logran este tipo de efectos aumentando el contraste de color entre piñales.
- Desenfocar ( y dentro de éste el desenfoque Gaussiano)
- Máscara de enfoque.
y los que afectan a distorsiones o variaciones de forma.

Para efectos especiales, sobre todo si se trata de rostros se usa Filtro/Licuar.

En este filtro las modificaciones se realizan a partir de una malla o rejilla. Al alterar las distancias entre las
líneas que la componen, la imagen desplaza los píxeles para adaptarlos a ella.

Otro filtro muy utilizado es Filtro/Punto de fuga.

■ OPTIMIZAR IMÁGENES PARA WEB.

Algunos Términos de Transparencia

- Los formatos GIF y SWF pueden hacer algunas cosas que no puede hacer el formato JPEG, como trans-
parencias y animaciones.

- Como el formato de archivo GIF sólo admite transparencia de 1 bit, no hay grados de opacidad, excepto
activado y desactivado (visible o no visible para cada píxel).

❏ OPTIMIZAR JPEG
- Se trata de buscar el equilibrio entre hacer el archivo pequeño y a la vez que la imagen sea buena.
El formato JPEG busca el tipo de datos que mejor comprime: áreas con poco contraste, pequeñas variacio-
nes y ligeros cambios de tono. No puede comprimir con eficiencia zonas de un solo color y no funciona
bien con dibujos planos en blanco y negro.

Trucos.: - reducir la saturación suele producir archivos JPEG de menor tamaño

- reducir el contraste suele producir también JPEG de menor tamaño
- usar un canal alfa, para comprimir más aquellas zonas de fondo menos visibles
(compresión por partes)

Para optimizar imágenes como JPEG, seleccionamos: Archivo / Guardar para Web
(En Guardar para web de Photoshop CS y la paleta Optimizar de Image Ready encontraremos las mis-
mas opciones).

Hay 4 pestañas:
- Original, que es la imagen tal cual la vemos
- Optimizada, es la imagen tal y como se vería con los ajustes de optimización actuales
y por último
- 2 copias que sirven para comparar distintos ajustes a la vez
- 4 copias

Por defecto Photoshop recuerda la última configuración usada.

En la paleta de Guardar para web:

- Seleccionamos JPEG en el menú emergente de formato de archivo.
- Optimizado: optimiza la compresión de una imagen JPEG, sin repercutir en el tamaño de la misma.
- En Calidad de compresión, seleccionamos mayor o menor compresión de archivo. Paralelamente a las
especificaciones Alta, Media, Baja, etc,.. en el recuadro adjunto se muestra la calidad de compresión en
una estimación de 0 a 100 (Cuanto mayor sea la calidad de la compresión, mayor será el tamaño del archi-
vo. Cuanto más baja sea la calidad, podremos apreciar más defectos en la imagen).
- Repoblar vistas hará que las otras dos vistas de los marcos inferiores tengan el mismo formato de archi-
vo que la vista previa seleccionada.
- Otra forma de ayudarnos a reducir el tamaño de los JPEG es aplicar un ligero desenfoque (un ligero des-
enfoque de 0,2 no afecta prácticamente a la imagen; en cualquier caso no conviene pasar de 0,5).
Tras la “ruta” anterior, aparece un cuadro de diálogo, del que nos interesa fundamentalmente:
- Perfil ICC: esta casilla nos permite adaptar la imagen a un estándar internacional de perfiles de color
(ICC) de forma que sean reconocidos por todos los equipos y pantallas que dispongan de este sistema de
reconocimiento.

Cuando estemos satisfechos con los valores de optimización, hacemos clic en Guardar
para abrir el cuadro de diálogo Guardar optimizada como.
Donde puede especificarse si deseamos que Photoshop cree el archivo HTML, el de las imágenes o
ambos (si queremos guardar toda la página de forma que funcione en un navegador web,debemos usar la
opción Imágenes y HTML).
● Optimización JPEG selectiva con Canales Alfa.-

Podemos usar un Canal Alfa (canales que se generan a partir de una selección), que es un tipo de másca-
ra, para especificar diferentes configuraciones de compresión para la zona enmascarada que para el resto
de la imagen. Esta técnica de optimización selectiva nos ayuda a reducir de manera considerable el tama-
ño general de un archivo JPEG.

- Se crea una selección de la zona a comprimir. Se guarda la selección >Elegimos Selección>Guardar

Selección. Si queremos ver el canal alfa que acabamos de crear podemos clicar en la paleta Canales, que
suele estar junto a la paleta Capas.

Vamos a: Archivo>Guardar para web y clicamos en la pestaña 2 copias (p. ej.)

Optimizamos la imagen como ya sabemos.
Importante: Clicamos en el botón de canal alfa (a la derecha del control deslizante Calidad) para abrir el
cuadro de diálogo Modificar ajuste de calidad. Observamos la vista previa, en blanco y negro, del canal
alfa y los dos controles deslizantes de la zona Calidad:
- El control deslizante blanco (a la derecha) establece la calidad del contenido de la zona en blanco
del canal alfa.
- El control deslizante negro establece el nivel de calidad del contenido de la zona en blanco
del canal alfa.
De esta forma podemos asignar dos compresiones con distintas calidades a dos zonas de la imagen (p.ej.:
motivo y fondo; primer plano y plano de fondo, etc.).

Después, ya el proceso para guardar las configuraciones de optimización están descritas en el apartado
anterior.

❏ OPTIMIZAR GIF.-
Los principios para reducir el tamaño de los GIF son casi los contrarios que para reducir el tamaño de los
JPEG. El formato de archivo GIF funciona mejor con zonas de un solo color (por lo que es mejor para dibu-
jos en blanco y negro, planos, logotipos, ilustraciones y dibujos animados.

● Archivo / Guardar para Web / GIF

Tras la “ruta” anterior, aparece un cuadro de diálogo, del que nos interesa fundamentalmente:
- Pérdida. Añadir una pequeña cantidad de compresión con pérdida a un GIF a menudo reducirá
su tamaño. Si introducimos el valor 30 en esta opción, el archivo se reduce y no se producen muchos cam-
bios en la imagen. Si introducimos valores más altos, puede que la imagen sufra mayores daños; hay que
utilizar esta opción con prudencia y siempre observando la imagen de la previsualización.
Esto funciona mejor con archivos GIF con tono continuo, como fotografías.
- Colores. - Reducir el número de colores de una imagen GIF reducirá considerablemente el tama-
ño del archivo. El objetivo es encontrar un equilibrio entre el buen aspecto de la imagen, pero con el míni-
mo número de colores. Las zonas en las que cambia el color producen archivos de mayor tamaño.
- Tramado: Seleccionamos la cantidad de “granulado”. El “granulado” añade píxeles de diferentes
colores para simular colores secundarios o suaves variaciones de color. Algunas imágenes deben contener
granulado (fotos p.ej.) para tener un buen aspecto, pero es mejor usar la menor cantidad posible de granu-
lado para que el tamaño no aumente.
- Mate: Cambia el color “mate” de una imagen por zonas transparentes para fusionar la imagen con
el fondo de una página Web.
- Ajuste a Web: Reemplaza los colores de la imagen por los de la paleta compatible con Web.
- Transparencia: Activamos la casilla de verificación Transparencia para hacer que las imágenes
GIF sean transparentes. Puede ocurrir que la casilla de verificación no esté disponible, lo que significa que
la imagen no contiene zonas transparentes.
- Entrelazado: Las imágenes entrelazadas parecerán formadas por pequeños bloques hasta que
terminemos de descargarlas. Yo aconsejo no usar el entrelazado en imágenes con texto.
- Aquí también se puede usar un canal alfa para optimizar distintas zonas con diferentes grados de
compresión.
● Seleccionar la paleta de reducción de color adecuada.-
Para optimizar GIF casi siempre usaremos la paleta Adaptable, Perceptual o Selectiva, en lugar de la
paleta Restrictiva (Web). En el único caso en que debemos usar la paleta Restrictiva (Web) es cuando
necesitemos una forma rápida de convertir una imagen con colores que no son seguros para la Web en
otra con colores que sí lo sean.

¡¡OJO!!: En la parte inferior de la tabla de colores está el icono (cubo) que convierte (clicando en él) los
colores seleccionados (con el cuentagotas) en colores seguros para la web.
Pueden aparecer otros iconos: el diamante indica que la muestra es un color seguro para web; el cuadrado
indica que la muestra está bloqueada; y el candado significa que éste color se mantendrá en la tabla de
color, incluso si reducimos el número de colores de la imagen.

● Optimización GIF selectiva con canales alfa.-

También con GIF podemos aplicar la optimización selectiva usando canales alfa, que nos servirán para
controlar la reducción de color, el tramado y la compresión con pérdida en diferentes zonas de la imagen
seleccionadas previamente (selección>canal alfa).

El archivo GIF optimizado se guarda de manera análoga a como lo hacíamos para JPEG.
■ CREAR FONDOS WEB
El HTML estándar sólo puede mostrar dos capas: una capa de fondo y una capa en primer plano (una forma
de solventar la limitación de dos capas del HTML es usar hojas de estilo, en lugar del HTML estándar).
Aún así, aquí, desde Photoshop CS, se dan unas pautas para crear imágenes de fondo efectivas, que funcio-
nen con el HTML estándar.

Por defecto, las imágenes de fondo se repiten hasta llenar toda la ventana activa del navegador Web.
Podemos restringir la repetición por defecto de las imágenes de fondo, usando hojas de estilo de cascada
(CSS), pero ya es un tema de programación alejado o ajeno a este curso de Photoshop.
Independientemente del número de veces que se repita el motivo de fondo en la ventana del navegador,
sólo se descargará una vez en el ordenador del espectador. Así, podemos obtener un gran rendimiento de
una pequeña imagen de fondo.
Lo que diferencia a las imágenes de fondo de las imágenes en código HTML es la etiqueta <body>

El tamaño de una muestra de fondo determinará el número de veces que se repetirá en la ventana del
navegador. También podemos crear imágenes extra grandes para que sólo se repitan una vez en la venta-
na del navegador estándar.

● Definir y previsualizar imágenes de fondo.

Image Ready CS nos permite definir cualquier imagen como imagen de fondo usando las opciones del
cuadro de diálogo Ajustes de salida.
1.- Seleccionamos Archivo>Ajustes de salida>Fondo para abrir el cuadro de diálogo Ajustes de salida.
2.- En dicho cuadro seleccionamos Imagen de fondo en el menú emergente Valor.
3.- Seleccionamos Ver documento como: Fondo para identificar la imagen como fondo HTML.
4.- Clicamos en OK

Para que una imagen de fondo funcione correctamente en un navegador Web, debemos hacer dos cosas:
- Guardar la imagen como archivo JPEG o GIF optimizado.
- Guardar el código HTML que indique al navegador Web que la imagen es una muestra de fondo.

Nota: También podemos definir imágenes como imágenes de fondo en el cuadro de diálogo Guardar opti-
mizada como, seleccionando Imagen de fondo en el menú emergente Ajustes.

● Definir y guardar imágenes de fondo en Photoshop CS.

1.- En el cuadro de diálogo Guardar para web, seleccionamos Editar ajustes de salida, en el menú de
optimizar.
2.- En el cuadro de diálogo Ajustes de salida, seleccionamos Fondo en el menú emergente.
3.- Seleccionamos Ver documento como: Fondo.
4.- Hacemos clic en OK.

Podemos previsualizar el fondo en el navegador por defecto, clicando en el botón de previsualizar de la

parte inferior del cuadro de diálogo Guardar para Web.

Si queremos guardar la imagen de fondo, en el cuadro de diálogo Guardar para Web, hacemos clic en
Guardar para abrir el cuadro de diálogo Guardar optimizada como. Como en Image Ready, podemos
guardar la imagen de fondo y el código HTML seleccionando HTML e imágenes en el menú emergente de
formato.

● Crear imágenes de fondo a pantalla completa.

La clave para crear imágenes de fondo que se carguen rápidamente es limitar los colores y usar grandes
zonas de color plano.

Si creamos una imagen de fondo a 880x600 y la página Web se ve a 1024x768, el navegador repetirá
automáticamente (o convertirá en mosaico) la imagen de fondo para que llene toda la pantalla del navega-
dor. Lo óptimo es crearla a 1024x768 y optimizarla correctamente.
■ CREAR GRÁFICOS TRANSPARENTES

GIF es el formato que debemos usar si queremos incluir zonas transparentes en nuestros gráficos web.
Podemos activar la transparencia GIF en la ventana Guardar para web de Photoshop CS y en la paleta
Optimizar de Image Ready CS. Los archivos JPEG no admiten transparencia para web.

GIF sólo admite enmascaramiento de 1 bit, lo que significa que los píxeles de un archivo GIF son comple-
tamente transparentes o completamente opacos (visibles o no visibles).

Las zonas transparentes están definidas por un fondo ajedrezado.

Para crear y previsualizar GIF transparentes usaremos Image Ready porque es más sencillo definir una
imagen de fondo y de primer plano y ver los resultados en un navegador Web en éste que en Photoshop.

Para crear y previsualizar GIF transparentes, abriremos la paleta Optimizar y la paleta Tabla de colores.
Ventana>Optimizar y Ventana>Tabla de colores.

Paso 1.- En Optimizar nos aseguramos de desplegar la opción Transparencia (esta opción define la ima-
gen como transparente al guardarla como GIF).

Paso 2.- En Archivo>Ajustes de salida>Fondo seleccionamos Ver documento como imagen (esta
opción indica a Image Ready que queremos definir la imagen como imagen de primer plano y no como
imagen de fondo).

¡¡¡OJO!!! porque esto ocurrirá también en otros archivos para web y hay cierta confusión con ello.
Es en Archivo>Ajustes de salida>Fondo donde se definen los archivos como imagen (imagen de primer plano en la
web) o como fondo.

Paso 3.- En Archivo>Ajustes de salida>Fondo>Ver documento como imagen

en el recuadro inferior Imagen de fondo> Ruta, escribimos o pegamos la ruta (o camino de búsqueda)
hasta la imagen de fondo.

● Reparar los bordes de GIF transparentes.

- Básicamente consiste en tomar una muestra de color de la imagen de fondo con el cuentagotas y aplicar-
la en el borde de la imagen de la siguiente manera:

- Una vez tomada la muestra de color, en la paleta Optimizar, en la parte de abajo figura Transparencia.
Ahí seleccionamos Color frontal en el menú emergente Mate (el color que seleccionamos en la imagen de
fondo debería aparecer en el campo Mate de la sección Transparencia, de la paleta Optimizar).

Conclusión: Cambiar el color mate, para que coincida con el color de la imagen de fondo, elimina el halo
blanco de una simple imagen suavizada en primer plano.
Guardar GIF transparentes optimizados.
Guardar un GIF transparente optimizado con su correspondiente imagen de fondo, usando la función
Guardar optimizada como de Image Ready.

>Archivo>Guardar optimizada como... seleccionamos Sólo imágenes en el menú desplegable Formato.

Al seleccionar Sólo imágenes, guardaremos la imagen frontal y la de fondo. Si queremos guardar el códi-
go HTML necesario además de las imágenes, seleccionaremos HTML e imágenes.
● Crear y guardar GIF transparentes en Photoshop CS.
El proceso es similar al que utilizamos usando Image Ready.

Paso 1.- seleccionamos la herramienta cuentagotas en el cuadro de herramientas de Guardar para web.
Tomamos una muestra de color de la imagen de fondo y hacemos clic en Listo. (A diferencia de Image
Ready, debemos tomar una muestra de color en el cuadro de diálogo Guardar para web, no en la ventana
principal de Photoshop CS.

Paso 2.- En la paleta de optimización de Guardar para web, seleccionamos Color de cuentagotas en el
menú emergente Mate.

Paso 3.- En el cuadro de diálogo Guardar para web, seleccionamos Editar ajustes de salida, en el menú
Optimizada.

Paso 4.- En el cuadro de diálogo Ajustes de salida, seleccionamos Fondo, en el menú emergente.
Seleccionamos Ver documento como: Imagen. En el campo Trazado indicamos (escribimos o copiamos)
la “ruta” hasta el archivo de la imagen de fondo.

Para guardar, Guardar para web>Guardar> cuadro de diálogo Guardar optimizada como, en el menú
emergente Formato, elegimos entre Sólo imágenes (para guardar sólo las imágenes) o HTML e imáge-
nes (para guardar las imágenes y el código HTML).

●Crear GIF transparentes a partir de imágenes no transparentes.

En Photoshop CS, lo mejor es asignar colores a transparentes

Seleccionamos la herramienta Cuentagotas en el cuadro de herramientas de Guardar par Web.

Con el cuentagotas seleccionado clicamos en el/los colores que queremos cambiar a transparentes.
En la parte inferior de la Tabla de colores, hacemos clic en el botón de asignar los colores selecciona-
dos a transparente.
Una vez hecho un GIF transparente, podemos usar las técnicas aprendidas anteriormente para especificar
una imagen de fondo, aplicar un color mate al borde y guardar el GIF transparente optimizado.

**** Con el Borrador Mágico también se pueden crear zonas transparentes de una manera muy sencilla.
Basta seleccionar la herramienta Borrador Mágico en el cuadro general de herramientas y clicar con él en
aquellas zonas que queramos que se hagan transparentes (el Borrador Mágico funciona mejor en zonas
de un solo color).

Simular transparencia con JPEG

Ya que un JPEG no puede ser transparente, podemos intentar simular la apariencia de transparencia usan-
do un color “mate” que coincida con el color del fondo. (Ventana Optimizar> Transparencia> Mate)
■ CREAR ANIMACIONES SENCILLAS PARA WEB
Cuando creamos animaciones en Photoshop o Image Ready usamos la paleta Animación, que es prácti-
camente igual en ambas aplicaciones.

Desde Photoshop e Image ready podemos guardar las animaciones en dos formatos: GIF y SWF
(Macromedia Flash). El formato Gif es muy utilizado en animación para Web, ya que no necesita comple-
mentos (todos los navegadores Web pueden leer este formato).

● Nociones generales para crear un GIF animado.

Todo lo que podamos hacer en Photoshop o en Image Ready con una imagen, puede convertirse en una
animación estableciendo las variaciones o efectos que hagamos como nuevos cuadros de la animación.
En el fondo el proceso consiste en generar variaciones sobre una imagen y fijarlas como nuevos cuadros
de la animación o cuadros a intercalar; ya sean variaciones de forma, de posición de algún elemento, de
opacidad, tono, efectos a través de los estilos de capa, etc.

Abrir la ventana Animación del menú Ventana (Image Ready).

1.- Para realizar una animación debemos tener abierta la paleta Capas, la paleta Animación y la ventana
de la imagen.

2.- Debemos añadir nuevos cuadros (pequeñas variaciones en la imagen) en la paleta Animación hasta
crear un movimiento. Cada cuadro, por ejemplo, puede ser una capa independiente de la paleta Capas.
Nota: funciona conceptualmente como cuando hacemos varios dibujos en un cuaderno y pasamos las
hojas rápidamente para hacer el efecto de un dibujo animado.
3.-Para añadir otro cuadro, clicar en el icono Duplica los cuadros seleccionados, en la parte inferior de la
paleta Animación.
5.- Añadimos una capa en la paleta Capas y pintamos o hacemos las modificaciones que deseemos.

Con varios cuadros ya podemos hacer una animación. Pulsamos Reproduce/Detiene la animación para
activar o detener la animación.
Para ver mejor el efecto podemos hacerlo a través de un navegador web.

6.- Abrir el cuadro de diálogo Guardar para Web y dispositivos y clicar en Previsualizar en el navegador
por defecto.
Nota 1: Podemos cambiar el orden de los cuadros de la animación arrastrándolos hacia la derecha o hacia
la izquierda. También podemos intercalar cuadros (Intercalar).
Finalmente podemos especificar el tiempo en que debe transcurrir la animación.

- También podemos especificar si queremos que se reproduzca una sola vez, un número determinado de
veces o “en bucle” (opción infinito).

Nota 2: Los vídeos y películas se reproducen a una frecuencia de fotogramas determinada (30 fotogramas
por segundo para vídeo, 24 fotogramas por segundo para la película). Por desgracia, los GIF animados se
reproducen a diferentes velocidades dependiendo del ordenador en que se reproducen. Cuanto más lento
sea el procesador, más lentamente se reproducirá la animación.

En general observaremos que una animación se reproduce más rápidamente en un navegador Web que en
photoshop.

A continuación exponemos algunas formas eficaces para crear animaciones.

● Crear animaciones usando la visibilidad de capa.

Consiste en crear animaciones activando y desactivando la visibilidad de las capas (en la paleta Capas) de
un archivo con el que hemos trabajado a propósito con pequeñas variaciones (de forma, tono, color, texto,
etc..) sobre una misma imagen de base.
Podemos mostrar (u ocultar) la visibilidad de las variaciones como cuadros nuevos de la animación en la
paleta Animación.
● Animar con opacidad.
Consiste en crear animaciones variando la opacidad de algunos elementos (en la paleta Capas) como for-
mas o textos, que pueden “aparecer” o “desaparecer” en la animación según establezcamos la opacidad de
dichos elementos en cada cuadro que intercalemos en la animación.

● Animar con la posición

Consiste en crear animaciones variando la posición de algunos elementos de la imagen (en la paleta
Capas) como formas o textos. Photoshop o Image Ready realizarán los pasos intermedios (según el núme-
ro de pasos que establezcamos) para hacer el efecto de movimiento (animación).

● Animar con los estilos de capa.

Las variaciones las hacemos a través de los posibles efectos de los estilos de capa.

● Guardar una animación como GIF.

Seleccionar Archivo>Guardar para Web>GIF.

Clicar en Guardar y se abrirá un cuadro de diálogo con las siguientes opciones:
- HTML e imágenes (*.html)
- Sólo imágenes (*.gif)
- Sólo HTML (*.html)

En general escogeremos Sólo imágenes, en lugar de HTML e imágenes, ya que los GIF animados no
necesitan código HTML adicional para funcionar en un navegador Web.

Podemos también optimizar la animación en Optimizar. Una de las limitaciones del formato de archivo GIF
es que tenemos que usar la misma configuración para todos los cuadros, es decir, sólo podemos especifi-
car una configuración de optimización para todos los cuadros.
■ SECTORES
Nos permiten cortar una sola imagen o composición en varias secciones, de forma que podamos volver a
unirlas en una tabla HTML. Esto también nos permite optimizar diferentes partes de una imagen con dife-
rentes configuraciones de compresión y formatos de archivo, para reducir el tamaño del archivo; además,
podemos usar sectores para crear imágenes de sustitución o secciones animadas a partir de una imagen
estática.

Cuando creamos secciones y guardamos imágenes en Photoshop o Image ready, el programa crea una
imagen para cada sector, con el código de la tabla HTML.
El código de tabla HTML permite que los navegadores Web vuelvan a unir las imágenes uniformemente
para que parezcan una sola imagen.

Es más sencillo hacerlo en Image Ready porque tiene más funciones para ello.

● Tipos de sectores.

Sector de usuario. El más utilizado. Podemos crear sectores de usuario con la herramienta Sector (Caja
general de herramientas) o a partir de guías o selecciones.
Los sectores de usuario son los más flexibles, ya que permiten diferentes opciones de edición: mover,
duplicar, combinar, dividir, cambiar de tamaño, eliminar, alinear y distribuir. También podemos aplicar dife-
rentes configuraciones de optimización a los sectores de usuario de una misma imagen.

Sectores basados en capas. Se crean a partir del contenido de una determinada capa. Ofrecen pocas
posibilidades de edición. Para conseguir la flexibilidad de los sectores de usuario, podemos convertir los
sectores basados en capas en sectores de usuario.

Sectores automáticos.
El programa crea automáticamente sectores automáticos (grises) para completar (rellenar) el resto de la
imagen. Si nos interesa, para conseguir la flexibilidad de los sectores de usuario, podemos convertir los
sectores automáticos en sectores de usuario.

Subsectores.
Son una forma de sectores automáticos que aparecen automáticamente cuando creamos 3 o más sectores
que se solapan.

● Líneas de sector, número de sector, símbolo del sector y colores de sector.

Conviene comprender los componentes visuales que identifican a los sectores:

Líneas de sector. Definen el perímetro del sector. Las líneas contínuas indican sectores de usuario; las
líneas de puntos indican sectores automáticos.

Números de sector. A cada sector se le asigna automáticamente un número de sector. Los sectores se
numeran automáticamente de izquierda a derecha y de la parte superior a la inferior. Cuando añadimos,
eliminamos o modificamos sectores, los números de sector se actualizan automáticamente.

Símbolos y colores de sector.

Azul recuadro parecido a sobre: sector de usuario.
Azul con dos símbolos como capas: sector basado en capa.
Gris: sector automático.
Azul con símbolo estrella: indica que el sector incluye una imagen de sustitución.
Recuadrito rojo/anaranjado y símbolo de 8: indica un sector entrelazado.
● Paletas contenido de web y sector.
Cuando trabajemos con sectores en Image Ready, tendremos que acceder a las paletas Contenido de
Web y Sector.

La paleta Contenido de Web muestra el número de sector, el símbolo del sector e información sobre las
imágenes de sustitución y los mapas de imágenes (se exponen más adelante). También nos permite previ-
sualizar los sectores de usuario de una imagen.

La paleta Sector detecta el contexto y cambia dependiendo del sector que esté seleccionado en ese
momento.

● Controles de la paleta Sectores:

(los más importantes)

Menú emergente Tipo: Selecciona uno de los siguientes tipos de contenido: Imagen, Sin imagen o Tabla.
Campo Nombre: Especifica un nombre para el sector seleccionado.
Menú emergente URL: Especifica la URL a la que queremos vincular el sector seleccionado.
Menú Destino: Especifica tipo de destino cuando especificamos una URL(_blank, _self,_top,...)
Campo Alt: Especifica el texto que queremos que aparezca cuando estén desactivadas
las imágenes en el navegador.
Campos An y Al: Anchura y altura de un sector
Menú Color de fondo: Define un color de fondo para las secciones transparentes del sector.
Mensaje barra de estado: Especifica el mensaje que queremos que aparezca en la barra de estado del
navegador Web cuando colocamos el puntero sobre un sector.

● Crear Sectores de Usuario.

Para crear sectores de usuario utilizamos la herramienta sector de la paleta general de herramientas
(tiene forma de cútter, de cuchilla triangular).
Una vez seleccionada, arrastramos o dibujamos, ayudándonos de las guías, para definir áreas que van a
ser sectores de usuario. Automáticamente el programa rellenará el resto de la imagen con otros sectores
de color gris (sectores automáticos) y numerará según se ha descrito anteriormente, de forma que toda la
imagen esté dividida en sectores.
Los sectores automáticos podemos hacerlos sectores de usuario mediante:
Sectores>Ascender a sector de usuario.

Para seleccionar sectores usamos la herramienta de selección de sectores colocada junto a la de crear
o dibujar sectores de usuario en la paleta de herramientas (también tiene forma de cútter o cuchilla, pero
con una flechita negra).

Para eliminar un sector, lo seleccionamos y clicamos en SUPR (Mac) o RETROCESO (Windows), o bien
seleccionamos Sectores>Eliminar sectores.

● Crear Sectores basados en capas.

Son una forma estupenda de dividir en sectores imágenes que contienen varias capas, ya que crean secto-
res del mismo tamaño que la capa.
Si cambiamos el contenido de una capa o la movemos, el sector correspondiente se actualizará automáti-
camente; esto hace que ofrezcan una gran flexibilidad. También podemos mover sectores basados en
capas, algo que no podemos hacer con sectores de usuario.

Es muy sencillo crear un sector basado en capas:

Seleccionamos Capa>Sector nuevo basado en capas.

Los sectores basados en capas podemos hacerlos sectores de usuario mediante:

Sectores>Ascender a sector de usuario.
● La Paleta contenido de web.
sólo muestra los sectores de usuario y los sectores basados en capas. Ahí es donde asignamos imágenes
de sustitución y opciones de animación a los sectores basados en capas.

Para facilitar ajustar los sectores a los bordes de los otros sectores, debemos tener seleccionado
Vista>Ajustar a>Sectores (Image Ready lo suele tener seleccionado por defecto).

● Cambiar de nombre a los sectores.

Los nombres de sectores se crean automáticamente basándose en el nombre de archivo original y en el
número de sector.
La forma predeterminada de dar nombre a los sectores de usuario es la siguiente:
nombre de archivo+guión bajo+número de sector
La forma predeterminada de dar nombre a los sectores basados en capas es la siguiente:
nombre de archivo+guión bajo+nombre de la capa.

Podemos cambiar el nombre de los sectores haciendo doble clic en el nombre del sector.

Como estos nombres de sector se convertirán en nombres de archivo cuando guardemos los sectores, no
debemos usar espacios en el nombre, ya que los servidores Web suelen tener problemas para leer los nom-
bres de archivo con espacios. El guión bajo (_) es un buen sustituto de los espacios.

❏ OPTIMIZAR Y GUARDAR SECTORES.

Una de las ventajas de dividir las imágenes en sectores es su capacidad para aplicar diferentes opciones
de optimización a cada sector.

Para optimizar:
Ventana>Optimizar (debe verse la paleta Optimizar)

Al igual que se ha descrito anteriormente , en la ventana del documento, hacemos clic en la pestaña
Optimizada. Con la herramienta Seleccionar sector, vamos seleccionando sectores y dándoles diferentes
configuraciones de optimización.
Cuando varios sectores pueden tener una configuración de optimización similar (botones, menús, etc)
podemos vincularlos mediante: Sectores>Vincular sectores para optimización.

Asimismo existe un icono de crear droplet en la esquina superior derecha de la paleta Optimizar. Dada
una configuración para un sector, basta arrastrar dicho icono hasta cualquier otro sector para otorgarle la
misma configuración.

Para guardar (Image Ready):

Archivo>Guardar optimizada como
y seleccionamos HTML e imágenes en el menú Tipo. Elegimos Todos los sectores en el menú emergen-
te Sectores y hacemos clic en Guardar.

● Aplicar texto alternativo y mensajes de barra de estado.

El texto alternativo será visible en un navegador Web, si el usuario desactiva las imágenes en las preferen-
cias de su navegador o si accede a la página Web con un navegador Web sólo de texto.

Texto alternativo: en el campo Alt de la paleta Sector (Ventana>Sectores).

Mensaje en barra de estado: en el campo Mensaje de barra de estado en la paleta Sector.

Los mensajes de barra de estado aparecen en la parte inferior de la ventana del navegador Web cuando
colocamos el puntero sobre el sector.
● Asignar URL a sectores.
Cuando asignamos un URL a u sector, el sector se convierte automáticamente en un punto sensible en el
que podemos clicar y dirigirnos a un determinado URL.
Es muy sencillo: En la paleta Sector, escribimos una dirección http://www... en el campo URL. Pulsamos intro.

Nota: para probar los vínculos, debemos previsualizar o abrir el archivo en un navegador Web, porque no
hay forma de probar los vínculos en Image ready.

●Usar conjuntos de sectores.

Un conjunto de sectores es un grupo de sectores almacenados en una carpeta de la paleta Contenido de
Web.

Para crearlos, basta seleccionar varios manteniendo pulsada la tecla Mayús. En la parte inferior de la pale-
ta Contenido de Web, hacemos clic en el botón Nuevo conjunto de sectores.

Los conjuntos de sectores funcionan casi igual que los grupos de capas (Photoshop CS) y los conjuntos de
capa (Image Ready). Al igual que los anteriores, los conjuntos de sectores permiten tener organizada la
paleta Contenido de Web.

Podemos crear páginas web, activando y desactivando la visibilidad de los diferentes conjuntos de sectores
de la paleta Contenido de Web, junto a su correspondiente conjunto de capas de la paleta Capas.
■ IMÁGENES DE SUSTITUCIÓN
Una imagen de sustitución es un tipo de gráfico Web que cambia cuando un usuario coloca el puntero del
ratón sobre ella o cuando se hace clic en ella.
Para crear una imagen de sustitución, tenemos que crear los diferentes estados de la imagen, y además el
código Javascript y HTML, necesarios para que la imagen de sustitución funcione en una página Web.

Cada apariencia de la imagen de sustitución (o estado, en la jerga de diseño Web) se guarda como una
imagen separada.

Nota: No podemos crear imágenes de sustitución en Photoshop CS (al menos hasta Photoshop CS2), aun-
que sí podemos abrirlas y mantener la información de imagen de sustitución.

Diferentes posibles “estados” de la imagen de sustitución (remarcamos los más utilizados):

Normal
Sobre Cuando se coloca el puntero del ratón sobre un sector o mapa de imagen sin clicar
Abajo Cuando se clica en el sector o mapa de imagen.
Clic
Fuera (Si no hay un estado Fuera definido, la imagen vuelve automáticamente al estado Normal.
Arriba (Si no hay un estado Fuera definido, la imagen vuelve automáticamente al estado Normal.
Seleccionado Cuando hacemos clic en un sector o en una zona de un mapa de imagen, el estado
seleccionado aparecerá hasta que se elija otro estado de imagen de sustitución.

Todos los estados se crean y quedan almacenados en la paleta Contenido de Web.

La paleta Contenido de Web no sólo almacena información sobre las imágenes de sustitución, también
almacena información sobre sectores y mapas de imagen.

❏ USAR ESTILOS DE IMAGEN DE SUSTITUCIÓN PREDEFINIDOS.

La paleta Estilos de Image Ready contiene “estilos de imagen de sustitución”, que aplican un estilo de
capa, crean los estados de la imagen de sustitución, dividen la imagen en sectores y escriben el código
Javascript necesario. Como resultado, podemos crear imágenes de sustitución en un momento.

Deben verse las paletas Capas, Contenido de Web y Estilos (Ventana>Capas, Ventana>Contenido de
Web y Ventana>Estilos).

Seleccionamos Estilos de rollover de web en el menú de la paleta Estilos. Observaremos que todos los
estilos de imagen de sustitución tienen un triángulo negro en la esquina superior izquierda.

Podemos seleccionar un sector o un conjunto de sectores y aplicarle un estilo de rollover de web. En la

paleta Contenido Web podemos observar los cambios que el programa ha creado automáticamente para
los estados Sobre y Seleccionado. Si clicamos sobre ellos podemos ver la apariencia de los diferentes
“estados”. El estilo de imagen de sustitución crea una imagen según la muestra escogida de la paleta
Estilos y diferentes tonos y variaciones para los estados Normal, Sobre y Seleccionado.

❏ OPTIMIZAR Y GUARDAR IMÁGENES DE SUSTITUCIÓN.

Debemos ver las paletas Contenido de Web y Optimizar.

Elegimos la herramienta Seleccionar sector en el cuadro de herramientas.

Si queremos optimizar un grupo de sectores, seleccionamos varios con ayuda de la tecla Mayús y selec-
cionamos: Sectores>Vincular sectores para optimización.

En la paleta Contenido de Web clicamos en estado Normal y le damos una configuración de optimización,
estos valores se aplicarán automáticamente a los otros estados (Sobre, Seleccionado,...).
Image Ready usa la misma configuración de optimización en todos los estados de la imagen de sustitución,
independientemente del contenido de cada estado.
Nota: cuando guardamos imágenes de sustitución con el estado Seleccionado, hay que guardar más de un
archivo HTML. Tenemos que guardar un archivo HTML para el estado Normal, el original cuando abrimos
por primera vez la página Web, y tenemos que guardar una página HTML por cada botón con estado
Seleccionado.

La manera de hacerlo semiautomáticamente es:

Seleccionamos Archivo>Ajustes de salida>Guardar HTML. En el cuadro de diálogo Ajustes de salida,
activamos la opción Archivos HTML múltiples de salida y hacemos clic en OK.
Esta opción indicará a Image Ready que debe guardar un archivo HTML por cada uno de los estados
Seleccionado (de menús, botones, etc...). Image Ready ha creado varias páginas HTML (una para el esta-
do Normal y una por cada uno de los estados Seleccionado), y una carpeta llamada Images que contiene
imágenes para los estados de imagen de sustitución.

❏ CREAR IMÁGENES DE SUSTITUCIÓN.

Exponemos las maneras maneras más sencillas de crear y guardar nuestro propio estilo para imágenes de
sustitución (sin utilizar las opciones “semi-automáticas” que Image Ready ofrece en la paleta Estilos.)

●Crear imágenes de sustitución a partir de estilos de capa.

Deben verse las paletas Capas, Contenido de web, Estilos y Optimizar.

Paso 1.- En la paleta Capas, seleccionamos la capa correspondiente que queremos convertir en imagen
de sustitución.

Paso 2.- En la parte inferior de la paleta Contenido de web, hacemos clic en el botón de Crear rollover a
partir de capas. Image Ready creará automáticamente dos cosas: un sector basado en capas para la
capa original seleccionada y una imagen de sustitución en la paleta Contenido de web, con un estado
Sobre. En ese momento, el estado Sobre es idéntico al estado Normal.

Paso 3.- Nos aseguramos de tener seleccionado el estado Sobre en la paleta Contenido de Web y que la
capa original siga seleccionada en la paleta Capas. En dicha paleta Capas modificamos la configuración
del cuadro de diálogo Estilo de Capa, para dar otro aspecto que nos interese para el estado Sobre (som-
bras, resplandores, variaciones de tono, color, etc...). Hacemos clic en OK.
En la paleta Contenido de Web, podemos observar que los cambios aplicados mediante Estilos de capa
han dado como resultado el nuevo aspecto del estado Sobre (observaremos también que el estado Normal
no ha variado su aspecto).

Paso 4.- Igual proceso (paso 3) lo repetimos con otros posibles estados, según queramos, dándole a cada
uno de ellos un aspecto diferente según la configuración de los estilos de capa que les apliquemos.

Para previsualizar resultados, podemos clicar alternativamente en los estados que hemos creado (Normal,
Sobre, Abajo, Seleccionado,...) de la paleta Contenido de web para ver las imágenes de sustitución en los
diferentes estados.

Para guardar el estilo que hemos creado, con la capa original todavía seleccionada en la paleta Capas,
hacemos clic en el botón Crear nuevo estilo de la parte inferior de la paleta Estilos. En el cuadro de diá-
logo Opciones de estilo, escribimos el nombre de rollover en el campo Nombre y activamos las opciones
Incluir efectos de capa, Incluir opciones de fusión e Incluir estados de rollover. Clicamos en Aceptar.
Las opciones Incluir efectos de capa e Incluir estados de rollover son muy importantes porque se ase-
guran de que los estados de imagen de sustitución que creamos se guarden con el estilo de imagen de
sustitución. Hacemos clic en OK.
●Crear imágenes de sustitución usando la visibilidad de capa.
Deben verse las paletas Capas y Contenido de Web.

El procedimiento consiste en trabajar sobre una imagen compuesta por diferentes capas. Si activamos y
desactivamos la visibilidad de las distintas capas, variamos el aspecto de la imagen original. A estas varian-
tes de aspecto de la imagen les hacemos corresponder un Nuevo estado de rollover de la paleta
Contenido de Web (tal y como hemos visto anteriormente), para crear los estados que queramos (Sobre,
Abajo, Seleccionado,...).

El resultado funciona como un pequeña animación en la que aparecen y desaparecen elementos (objetos,
textos, etc) según cliquemos en los diferentes estados de la imagen de sustitución.
Es un procedimiento sencillo y rápido.

● Crear imágenes de sustitución usando texto.

Consiste básicamente en cambiar las propiedades del tipo de letra (cursiva, negrita, cursiva con negrita,...)
para indicar los estados de imagen de sustitución.

Sobre una imagen original correspondiente con el estado Normal, variamos sus propiedades tipográficas y
le otorgamos un nuevo estado de rollover a cada variación. Así vamos creando diferentes estados de
imagen de sustitución (en este caso: texto).

El modo más sencillo de conseguir esto es duplicando capas (Capas>Duplicar Capas). En cada capa
duplicada variamos las propiedades tipográficas del texto y le otorgamos un Nuevo estado de rollover en
la paleta Contenido de Web. Duplicamos capa, variamos propiedades tipográficas y otorgamos un nuevo
estado de rollover para cada estado de imagen de sustitución que queramos crear.

●Crear imágenes de sustitución animadas.

Se deben ver las paletas Capas, Contenido de Web y Animación.

Se selecciona el sector sobre el que se quiere actuar.

En la parte inferior de Contenido de Web clicamos en crear estado de rollover para generar los estados
que deseemos.
El procedimiento consiste en hacer corresponder cada estado de rollover con un nuevo cuadro de la paleta
Animación. Estos estados se han creado activando y desactivando la visibilidad, variando la posición de
los elementos, etc.
Cuando tenemos establecidos cuadros de animación correspondientes con estados de rollover, abrimos el
cuadro de diálogo Intercalar para establecer el número de cuadros intermedios que queremos que el pro-
grama nos genere para crear la transición entre imágenes (entre estados). Luego seleccionamos Una vez
en el menú emergente de opciones de repetición.

Hay que tener en cuenta que, cuando diseñamos páginas Web, la animación se debe usar muy poco y con
buen gusto ¡No conviene dejarse llevar!.
■ CREAR MAPAS DE IMÁGENES
Con los mapas de imágenes podemos crear varios vínculos a partir de un sólo gráfico.

No podemos crear imágenes de sustitución en Photoshop (al menos hasta Photoshop CS2), aunque sí
podemos abrir un mapa de image creado con Image Ready y mantener la información del mapa de imagen.

El código HTML para los mapas de imagen del lado cliente contiene etiquetas map y usemap.
Las coordenadas trazan las dimensiones y ubicación de los puntos sensibles en un mapa de imágenes.
En el código HTML podemos ver dos tipos de elementos de area shape (poly (polígono) y circle), coords
(coordenadas) y una serie de números separados por comas. Los números describen las coordenadas de
los puntos sensibles de cada forma.

Hay dos formas muy sencillas de crear mapas de imágenes en Image Ready:
- Usando las herramientas de mapa de imágenes del cuadro de herramientas (mano y dedo extendido).
- Creando mapas de imágenes a partir de capas.

En Image Ready hay cuatro herramientas de maspas de imágenes:

- De rectángulo (mano sobre rectángulo)
- De círculo (mano sobre círculo)
- Poligonal (mano sobre polígono irregular)
- Herramienta de selección de mapa de imágenes (mano y flechita negra)

●Sobre las paletas Contenido de Web y Mapa de imágenes.

Cuando trabajemos con mapas de imágenes, tenemos que tener abiertas ambas paletas.

En la paleta Mapa de imágenes podemos especificar diferentes opciones para mapas de imágenes.
Si trabajamos con un mapa de imágenes basado en herramientas, la paleta mostrará sus dimensiones.
Si estamos trabajando con un mapa de imágenes basado en capas, la paleta mostrará información de las
capas en que se basa.

Controles de la paleta Mapa de Imágenes:

(Son muy parecidos a las opciones de la paleta Sectores)

Campo Nombre: Especifica un nombre para el mapa de imágenes seleccionado.

Menú emergente URL: Especifica la URL a la que queremos vincular el mapa de imágenes seleccionado.
Menú Destino: Especifica tipo de destino cuando especificamos una URL(_blank, _self,_top,...)
Campo Alt: Especifica el texto que queremos que aparezca cuando estén desactivadas
las imágenes en el navegador.
Campos X e Y: Especifica el borde izquierdo(X) y superior (Y) de un mapa de imágenes.
Campos anchura y altura: Especifica la anchura y altura de un mapa de imágenes.
Campo Radio: Especifica el radio de una zona de mapa de imágenes
Menú emergente Forma: Especifica el radio de una zona de mapa de imágenes(rectángulo, círculo o polígono)
Menú emergente Calidad: Especifica la precisión de los vértices poligonales.

❏ CREAR UN MAPA DE IMÁGENES CON LAS HERRAMIENTAS DE MAPA DE IMÁGENES.

Utilizar las herramientas es la mejor forma de crear mapas de imágenes cuando trabajemos con imágenes
planas o imágenes en una sola capa.

Siempre hay que tener abiertas las paletas Contenido de Web y Mapa de imágenes.

La forma de dibujar mapas de imágenes es muy similar a como se hace con la herramienta de crear traza-
dos (con nodos y tensores) de Photoshop:
- Utilizaremos las herramientas de formas predefinidas si éstas se ajustan bien a las áreas que queremos
delimitar.
- Utilizaremos la herramienta poligonal cuando tengamos que delimitar algún área de contorno irregular.
Aunque no dibujemos la forma perfectamente, podemos ajustarnos moviendo los nodos con los cursores y
finalmente usando el control deslizante Calidad de la paleta Mapa de Imágenes y dándole el valor 100%.

❏ CREAR UN MAPA DE IMÁGENES A PARTIR DE CAPAS.

Procedimientos y criterios similares a cómo se creaban sectores basados en capas.

Las imágenes basadas en capas son una forma estupenda de crear mapas de imágenes porque crean
puntos sensibles del mismo tamaño que la capa. Es un procedimiento más sencillo que dibujarlos ya que
los mapas de imágenes basados en capas tienen exactamente el mismo tamaño y forma que la capa.

El proceso es muy sencillo: se selecciona previamente la capa y seleccionamos en el menú Capa>Nueva

área de mapa de imágenes creada a partir de capas. Observaremos que aparece el símbolo de una
mano a la derecha del nombre de la capa en la paleta Capas. El símbolo de la mano indica que la capa
tiene un mapa de imágenes asociado.

Por defecto los mapas de imágenes basados en capas son rectangulares, lo que a veces genera proble-
mas de solapamientos o superposiciones de mapas. Para solucionar esto podemos ir a la sección Ajustes
basados en capa, en la paleta Mapa de Imágenes y seleccionamos Polígono en el menú emergente
Forma. Observaremos que los bordes del mapa de imágenes automáticamente toman la forma de la capa.
Luego, al igual que hacíamos en los mapas generados con las herramientas, vamos a la paleta Mapa de
imágenes y establecemos una calidad de 100 en el control deslizante Calidad.

Nota importante: al igual que pasaba con los sectores basados en capas, las zonas del mapa de imágenes
basado en capas se actualizan automáticamente cuando movemos o cambiamos de tamaño el contenido
de una capa.

❏ CAMBIAR DE NOMBRE, OPTIMIZAR Y GUARDAR MAPAS DE IMÁGENES.

Se deben ver las paletas Contenido de web, Mapa de imágenes y Optimizar.

Para cambiar el nombre de un mapa hacemos doble clic en el mismo y escribimos, al igual que hacíamos
con los sectores.

Para optimizar se usa el mismo procedimiento que en los sectores, dando unos valores o una configura-
ción en la paleta Optimizar.
Nota: sólo podemos especificar una configuración de optimización para todo el mapa de imágenes.

Para guardar: seleccionamos Archivo>Guardar optimizada como. En el cuadro de diálogo Guardar opti-
mizada como seleccionamos HTML e imágenes en el menú emergente Tipo, o sólo imágenes si preferi-
mos crear el código HTML en un editor como Adobe Golive o Dreamweaver.

Nota: aunque un mapa de imágenes se divida en varias zonas, sólo es necesaria una imagen para que el
mapa de imágenes funcione en un navegador Web.

Asignar URL y aplicar texto alternativo a mapas de imágenes:el procedimiento y los campos a rellenar
son muy similares a los correspondientes para Sectores.

Se pueden crear fácilmente imágenes de sustitución basadas en mapa de imágenes, utilizando las
técnicas aprendidas para imágenes de sustitución.
■ CREAR GALERÍAS FOTOGRÁFICAS WEB
La función de galería fotográfica de Photoshop CS nos permitirá tomar una carpeta de imágenes y publi-
carlas fácilmente como una página web. Esta función optimiza automáticamentelas imágenes y escribe el
código HTML, sin que tengamos que escribir una sola línea del código.

Para crear una galería de fotografías web:

En Photoshop seleccionamos Archivo>Explorar.
Seleccionamos Herramientas>Photoshop>Galería de fotografías Web para abrir el cuadro de diálogo
Galería de fotografías Web (también podemos usar otro camino: Archivo>Automatizar>Galería de
fotografías Web).

Rellenamos los distintos campos utilizando el sentido común en función de lo que nos piden u ofrecen (no
requiere más) y clicamos en OK.
Photoshop automáticamente:
- Copia, cambia de tamaño y optimiza las imágenes.
- Crea vistas en miniatura de las imágenes.
- Escribe el código HTML para la página Web.
- Incluye información del archivo que especifiquemos
- Genera botones: Siguiente, Anterior e Inicio que nos ayuden a navegar por la página Web.

Puede tardar segundos o minutos.

Si queremos realizar más modificaciones a la galería fotográfica Web, podemos editar los archivos con un
editor de HTML, como Adobe Golive o Dreamweaver.

Podemos personalizar una galería de fotografías web, alterando o variando los valores del cuadro de diálo-
go Galería de fotografías Web, en los distintos menús emergentes como Estilos, Opciones, Colores
personalizados, etc.
■ AUTOMATIZACIÓN
ACCIONES
Un eficaz instrumento para automatizar tareas.

Nociones generales
Con la paleta Acciones, podremos ahorrar mucho tiempo ya que su función es grabar cada actuación que
realicemos en la imagen en un orden de ejecución; así podremos reproducir más tarde dichas operaciones
sobre otras imágenes.
La paleta Acciones se estructura en carpetas. Las carpetas o grupos de acciones tienen su propio orden
jerárquico: el grupo contiene acciones y cada acción, una serie de operaciones o comandos.

Las acciones de un mismo grupo están vinculadas entre sí. Cuando aplicamos un grupo de acciones a una
imagen, se ejecuta la dispuesta en primer lugar; a continuación, aún cuando los comandos que la confor-
man contengan cuadros de diálogo, o éstos no estén disponibles para la imagen, la aplicación pasa a reali-
zar la siguiente acción dispuesta en el grupo.

❏ FUNCIONAMIENTO DE LA PALETA ACCIONES.

Se trata de manipular los controles para grabar, detener y reproducir como lo haría una grabadora común.

¡¡Ojo!! Un acción no puede incluirse dentro de la paleta si no se inserta dentro de un grupo ya existente o
nuevo.

Nota: Conviene diferenciar las acciones con diferentes colores.

A partir del momento en el que pulsamos el botón Iniciar Grabación de la paleta Acciones, la aplicación
comienza a registrar cada acto modificador de la imagen ordenándolos por orden cronológico dentro de la
acción.
Cuando finalicemos la grabación pulsando el botón Detener ejecución / grabación, la acción quedará
finalmente incorporada a la paleta, lista para ser aplicada a otra imagen con el botón Ejecutar selección.

❏ CÓMO CREAR UNA ACCIÓN.

1.- Para crear un grupo de acciones, clicar en el icono Crear grupo nuevo (Paleta Acciones)
2.- Para grabar una acción, clicar sobre Crear acción nueva.
3.- Clicar en Iniciar grabación.
4.- Realizar las operaciones oportunas. Cuando hayamos finalizado, clicar en Detener
ejecución/grabación.
5.- Para aplicar una acción, grupo u operación a otra imagen, activar la paleta de la imagen,
seleccionar la acción a realizar y clicar en el icono Ejecutar selección.

Photoshop e Image Ready incluyen acciones predefinidas, a las que podemos acceder en la paleta Acciones.

Si queremos aplicar una acción a una sola imagen, hacemos clic en el botón de ejecutar selección, en la
parte inferior de la paleta Acciones. Si queremos aplicar la acción a una serie de imágenes, podemos guar-
dar la acción como DROPLET.
❏ DROPLETS.
Un Droplet es una pequeña aplicación creada por Photoshop o por Image Ready, que aplica una acción a
una carpeta de imágenes o a una serie de imágenes seleccionadas.

Para aplicar el Droplet, arrastramos y soltamos una imagen, una serie de imágenes seleccionadas, o carpeta
de imágenes en un icono Droplet (o viceversa).
Podemos usar un Droplet sin abrir Photoshop o Image Ready. La aplicación se iniciará automáticamente
cuando arrastremos una carpeta o una serie de archivos al Droplet.
Podemos compartir Droplets entre ordenadores Mac y Windows, ya que son multiplataforma (si creamos un
droplet en Mac, debemos añadir la extensión de archivo .exe, para que los ordenadores con Windows puedan
reconocerlo.

● Crear Droplets.
Paleta Acciones, seleccionamos acción o acciones que queramos para el droplet y elegimos Crear droplet
en el menú de la propia paleta Acciones. En el cuadro de diálogo Guardar acción como Droplet escribimos
el nombre que queramos darle y la extensión .exe en el campo Nombre.

También podemos crearlos por otro camino:

Archivo>Automatizar>Crear Droplet de Photoshop.

Nota: por defecto, los droplets creados en Image Ready guardan las imágenes optimizadas en la carpeta en
las que se encuentran las imágenes originales.