APUNTES MÓDULO PHOTOSHOPDISEÑ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 unatrama 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 ocurvas definidas por ecuaciones matemáticas. No dependen de la resolución, y podemos agrandarlos oencogerlos 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 esredondo.

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 tramade 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 densidadde 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 256valores de intensidad para cada uno de los colores que componen la imagen: Cian, Magenta, Amarillo yNegro.

❏ PROFUNDIDAD DE COLOR:Los monitores proyectan haces de luz roja, verde y azul (RGB) a través de una rejilla formando diminutospíxeles en la pantalla. La cantidad necesaria de datos (bits) para controlar los haces de luz determina lacomplejidad de cada píxel, y por tanto, el número total de colores que puede visualizarse. Este conceptorecibe el nombre de profundidad de color.

Las imágenes en blanco y negro (sin tonalidades de gris) por tanto, necesitan solamente una profundidadde 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 calidadinferior 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 decolores 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 unamejora 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.

- BilinealSe realiza un promedio de color que genera una calidad media.

- BicúbicaSe 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, eligiendoBicú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 sevuelve 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 delos 72 ppp que trae hasta 254 o 300 ppp, escogiendo la opción Bicúbica más enfocada, se realizan lasoperaciones que consideremos, que afectan a toda la imagen, de tono, variaciones de color, etc, en estetamañ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 PHOTOSHOPModos 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 disponibleslas paletas y la Caja de Herramientas. Para acceder a los distinto menús hay que clicar en la esquinasuperior 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áticamenteen la ventana de la aplicación, ajustándose a ella. Este es un modo rápido y productivo para teneruna 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ágenesabiertas.

❏ EL FORMATO .PSD (para trabajar: .psd)PSD es el formato nativo de Photoshop, que permite guardar todas las funciones de la aplicación y archivartodas 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, sobretodo 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 SECTORSe utiliza en la realización de páginas web. Estas herramientas se utilizan para dividir la imagen en áreasfuncionales y después realizar con ellas una página web en forma de tabla. Cuando se guarda la imagencomo 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 laimagen modificada, como selecciones y máscaras.

- TIFF. Formato de mapa de bits estándarAl 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 dedatos por otras más cortas para economizar espacio, por lo que se convierte en un sistema de compresiónsin pérdidas.

NOTA: la mayoría de los programas de dibujo (Freehand, Corel Draw) o de edición (QuarkXpress yPagemaker) 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ágenesen 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á avisualizarse 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ónque 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 siguardamos el archivo en la misma sesión (sin cerrarlo), pues JPEG trabaja a partir de la visualización quetengamos 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 seabre, 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, cuandotengamos rematado el trabajo y sepamos el uso o destino que le vamos a dar a la imagen, guardarlo en elformato 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 archivoscon predominio de estos tonos o con mucha información gráfica (contrastes, detalles, brillos, etc...) tendránun 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 yde imágenes rasterizadas, y para ilustraciones Postscript de alta resolución (líneas, formas y textos muydefinidos).

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

En Photoshop (EPS es un tipo de archivo muy común también en otros programas) podremos transferir losdatos 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 elintercambio o paso de imágenes, gráficos, texto, etc, entre los programas de su marca (Adobe CreativeSuite) 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 loscopio 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; lacompresió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 tratamientode 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 uotros 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 transferirarchivos entre aplicaciones. No es muy recomendable ya que, a veces, presentaincompatibilidades 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 aotro; 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 TIFFPara comprimir y transferir: JPEG y PDFPara 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 pormodo 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ínicospara 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, esdecir, 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 enel 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, elprimero 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 unaprofundidad 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áslento a la hora de trabajar con imágenes, debido a que Photoshop tiene que convertir los colores CMYK aRGB. No todos los filtros y efectos funcionan o pueden aplicarse en CMYKCon 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 puedenimprimirse no siempre son los mismos.

- Color indexado. Reduce la gama a 256 colores o menos. Se utiliza para transferencias o páginasweb.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ólopara 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 dotande 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 elpíxel en blanco o negro; si el píxel es más claro que un 50% de gris, lo convertirá en blanco; si esmá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ñadirtintas, cambiar la tinta negra por otra de color.

NOTAS: Algunos modos resultan incompatibles entre sí. La mejor manera de cambiar de modo de colores 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 alo 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 porotros, 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 yde 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 unalista de catálogos de color: ANPA, FOCOLTONE, PANTONE, etc. Son tintas ya compuestas. De este modolos 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 paraimprenta).

● Corrección de la paleta de colores.- Triángulo de alerta: aparece cuando seleccionamos un color brillante que Photoshop no puedeimprimir usando los colores estándar. El cuadro que aparece debajo corresponde al color CMYK máspróximo.

- Cubo de alerta de compatibilidad con la Web. Aparece si el color seleccionado no se encuentraen la paleta llamada Compatible con Web (256 colores). Al clicar sobre el cubo o la muestra queaparece 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 opcionespara 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 unmarco 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á uncuadro 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 losprogramas 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 ala 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 imagendesaparece. 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 oConvertir 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 convertirel texto en capa si queremos aplicar dichos comandos. Es conveniente que actuemos sobre el texto loque creamos necesario (tipo, atributos, escalas, etc...) antes de convertirlo en capa, ya que esta acción noes 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 detexto.

■ 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 lugarde 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 sombreadode los píxeles muestreados con los píxeles de origen. La zona corregida se fusiona con los píxelesde 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 algunamanera, “posterizando”. Conjugando esta herramienta con otras como brillo y contraste sepuede ampliar la resolución de una imagen.

- Dedo. Como su nombre indica actúa como un difuminador de bordes, colores y formas. Sepuede regular su intensidad. A veces, tarda en visualizarse su efecto, y nos podemos pasar con suuso, 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 detrazados, 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 unaselecció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 CalarCONCEPTO: 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, elespacio 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 ypulsar 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. Hayque 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 restringirel trazado a líneas verticales, horizontales y a 45º pulsando la tecla MAYÚS a la vez que movemosel ratón.

Lazo magnético: al arrastrar esta herramienta sobre la imagen, se crea una línea que se ajusta enlo posible a los píxeles más contrastados, por lo que lo es ideal para seleccionar, con ciertarapidez, 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 bordesque 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 clico 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 colory 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 elconcepto de Tolerancia. A menor valor de Tolerancia, la selección se restringirá a colores iguales o muysimilares 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 deselecció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 delmenú 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 queacostumbrarse a trabajar con él.

Seleccionar gama de colores. Además de la Varita mágica, existe en Photoshop otro mecanismopara 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 elcuentagotas 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 quedareducida 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 crearperímetros de selección más precisos que aquellos que podemos realizar con las herramientas deselecció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 sevisualizan, no se imprimen (no son Imprimibles)- Las trazados generales se dividen en subtrazados. Un subtrazado está constituido por una seriede 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 puedencontrolar 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 porla imagen, con lo que se irá definiendo el trazado. Si al clicar no arrastramos el ratón la unión entrelos puntos será una recta; si arrastramos levemente, aparecen automáticamente los dos tirantes delpunto que podemos mover según nos interese el trazado.

- Aún más directamente: Pluma de forma libre: podemos crear trazados a mano alzada, comocon la herramienta lazo. Si queremos restringir el trazado a rectas, basta con mantener pulsada latecla ALT mientras dibujamos.Para esta herramienta existe una opción: Encaje de curva (si introducimos valores bajos se creauna 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éticopara poder utilizarla. Esta pluma permite ceñirse a los bordes de las zonas a seleccionar. Hay queconfigurar 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 paletaTrazados, o Hacer trazado en uso del menú de la paleta. Para ceñirse mejor a los contornos hayque 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 losvalores de brillo, y otra vertical que alude al número de píxeles que se dan en la imagen con un valorde 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 dela misma. Si, por ejemplo, nos encontramos con una imagen que, en general, tiene una cantidadexcesiva 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 utilizaa 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, loutilizo muchísimo.Por lo general cuando se utiliza Tono/saturación, lo que se pretende es alterar una gama de colores dela 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 laimagen ocupa en la escala de grises. Los tonos más oscuros recibirán el color inicial de degradado ylos 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 lamanera 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 aplicarel 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 altosea 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 RangoDinámico) aunque también puede ser utilizado en imágenes de 8 y 16 bits. El rango dinámico es laproporció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áticos3.- 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 comoresultado 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 verqué 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 modificarestos valores cuantas veces se quiera, con la ventaja de poder eliminarla cuando lo deseemos sindañ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 OK3.- 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 auna independientemente del resto de capas. También se puede cambiar el orden de superposición ysu 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 elmenú 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 hacemosclic 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 dedestino.

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

Para crear un nuevo fondo, acceder al menú Capa y seleccionar la opción Nueva. Activar Fondo a partirde 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 enlazadasAlinear con la selecciónDistribuir enlazadas

Para alinear capas tomando como referencia una de ellas, hay que seleccionarla primero y con latecla 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 losde 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 superposicionesde 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 opacidaddel 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 escompleto, 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 ylas miniaturas de las capas superiores aparecen sangradas y con el icono de grupo de recorte (se trata deuna 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 lade imagen.2.- Mantenemos pulsada la tecla ALT y colocamos el puntero sobre la línea que divide las dos capasen la paleta Capas. El cursor tomará forma de dos círculos superpuestos. A continuación hacemosclic.3.- Aparecerá el nombre de la capa base (en este caso la de texto) subrrayado y la superior con elicono de la flecha quebrada.4.- Al haber escogido como capa base la capa de texto, el resultado es el interior de las letras deltexto 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 acolocar el puntero sobre la línea que divide las dos capas agrupadas. Si clicamos las dos capasserá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 reducimosel 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 lospíxeles de la imagen como pintar, clonar,etc... Para poder realizar estas operaciones hay que rasterizar lacapa.

● 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 CAPASMUY IMPORTANTE.Un modo de fusión es una manera de mezclar el color de los píxeles de una capa con el de las capassituadas 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 depintura 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 ciertamanera, 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 enblanco 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 oscuraen función de la correlación de los píxeles de la capa activa con la escala de grises: cuanto más seacerque 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 sison 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 clarasde la imagen.

- Superponer. Actúa más en los tonos medios. Este modo es ideal para dar color a imágenes engrises, 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 laoscurecerá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 delos superiores.

- Diferencia. el color de los píxeles inferiores será modificado en cuanto a su composición, pues sele sustrae el superior. La apariencia final es una imagen que parece estar en negativo, en cuanto abrillo y color.Si los píxeles inferiores son negros no se produce ningún cambio; si son blancos, loscolores 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 utilizaropciones 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 quematizar los bordes irregulares, hay que pulsar ALT en el teclado al mismo tiempo que se actúasobre 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 sifuese 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 OK3.- 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 / Alinearcapas 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 paraformar 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 omá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, allado de la miniatura de la capa se añade una máscara de capa fusionando donde se superponen lasimá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 RECTIFICAREl 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 deejecució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 alcomando Deshacer en las rectificaciones. Además podremos incluir otras instantáneas pertenecientes aotros niveles evolutivos del trabajo.Permite guardar, por defecto, los 20 últimos estados de la imagen. (Aunque se puede aumentar hasta 100pero “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 lasesió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 loslí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 interactivade 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 elCian, 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 degrises (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 valorespara 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 protegemosel resto de la imagen. A esta zona protegida la llamamos área enmascarada. Funciona de una manera muysimilar a las máscaras de aerógrafo o de rotulista que se utilizaban para cubrir zonas donde no se quiereque 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 alblanco 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. Todoslos 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 guardarla selección.

● Modificar un canal alfa:Cuando trabajamos con un canal alfa, una imagen en escala de grises puede actuar en él con todos losrecursos 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 lapaleta 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 propiasseparaciones en la imprenta.

Podemos convertir cualquier canal alfa en uno de tinta plana, o convertir un canal de color de la imagenduplicándolo primero, esto es, creando un canal alfa a partir de uno de color y convirtiéndolo en canal detinta 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 plana2.- Seleccionamos una tinta plana del catálogo de Selector de color / personalizar y pulsamos OK3.- 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áticaLos 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 lacreació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 laslí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, exceptoactivado 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 funcionabien 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 lasespecificaciones Alta, Media, Baja, etc,.. en el recuadro adjunto se muestra la calidad de compresión enuna 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 dereconocimiento.

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 oambos (si queremos guardar toda la página de forma que funcione en un navegador web,debemos usar laopció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 restode 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>GuardarSelección. Si queremos ver el canal alfa que acabamos de crear podemos clicar en la paleta Canales, quesuele 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 elcuadro de diálogo Modificar ajuste de calidad. Observamos la vista previa, en blanco y negro, del canalalfa 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 apartadoanterior.

❏ OPTIMIZAR GIF.-Los principios para reducir el tamaño de los GIF son casi los contrarios que para reducir el tamaño de losJPEG. 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 / GIFTras 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 queutilizar 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 diferentescolores para simular colores secundarios o suaves variaciones de color. Algunas imágenes deben contenergranulado (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 conel 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 quela imagen no contiene zonas transparentes.

- Entrelazado: Las imágenes entrelazadas parecerán formadas por pequeños bloques hasta queterminemos 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 decompresió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 lapaleta Restrictiva (Web). En el único caso en que debemos usar la paleta Restrictiva (Web) es cuandonecesitemos una forma rápida de convertir una imagen con colores que no son seguros para la Web enotra 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) loscolores 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 cuadradoindica que la muestra está bloqueada; y el candado significa que éste color se mantendrá en la tabla decolor, 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 paracontrolar la reducción de color, el tramado y la compresión con pérdida en diferentes zonas de la imagenseleccionadas previamente (selección>canal alfa).

El archivo GIF optimizado se guarda de manera análoga a como lo hacíamos para JPEG.

■ CREAR FONDOS WEBEl HTML estándar sólo puede mostrar dos capas: una capa de fondo y una capa en primer plano (una formade 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 deuna 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 delnavegador. 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 delcuadro 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 laparte 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 enGuardar para abrir el cuadro de diálogo Guardar optimizada como. Como en Image Ready, podemosguardar la imagen de fondo y el código HTML seleccionando HTML e imágenes en el menú emergente deformato.

● 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 grandeszonas 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 paletaOptimizar 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 unaimagen 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 (estaopción indica a Image Ready que queremos definir la imagen como imagen de primer plano y no comoimagen 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 laweb) o como fondo.

Paso 3.- En Archivo>Ajustes de salida>Fondo>Ver documento como imagenen 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 defondo 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 haloblanco 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ónGuardar 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 ImageReady, debemos tomar una muestra de color en el cuadro de diálogo Guardar para web, no en la ventanaprincipal de Photoshop CS.

Paso 2.- En la paleta de optimización de Guardar para web, seleccionamos Color de cuentagotas en elmenú 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 especificaruna 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 enaquellas zonas que queramos que se hagan transparentes (el Borrador Mágico funciona mejor en zonasde un solo color).

Simular transparencia con JPEGYa 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 WEBCuando 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 unaanimació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 cuadrosde la animación o cuadros a intercalar; ya sean variaciones de forma, de posición de algún elemento, deopacidad, 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 ventanade la imagen.

2.- Debemos añadir nuevos cuadros (pequeñas variaciones en la imagen) en la paleta Animación hastacrear 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 lashojas 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 lapaleta 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 paraactivar 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 navegadorpor defecto. Nota 1: Podemos cambiar el orden de los cuadros de la animación arrastrándolos hacia la derecha o haciala 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 deveces o “en bucle” (opción infinito).

Nota 2: Los vídeos y películas se reproducen a una frecuencia de fotogramas determinada (30 fotogramaspor segundo para vídeo, 24 fotogramas por segundo para la película). Por desgracia, los GIF animados sereproducen a diferentes velocidades dependiendo del ordenador en que se reproducen. Cuanto más lentosea 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 enphotoshop.

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) deun 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 lapaleta 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 dedichos elementos en cada cuadro que intercalemos en la animación.

● Animar con la posiciónConsiste en crear animaciones variando la posición de algunos elementos de la imagen (en la paletaCapas) 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 nonecesitan 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 GIFes 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.

■ SECTORESNos permiten cortar una sola imagen o composición en varias secciones, de forma que podamos volver aunirlas 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 imagenestática.

Cuando creamos secciones y guardamos imágenes en Photoshop o Image ready, el programa crea unaimagen 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 uniformementepara 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 (Cajageneral 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 pocasposibilidades de edición. Para conseguir la flexibilidad de los sectores de usuario, podemos convertir lossectores 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 laimagen. Si nos interesa, para conseguir la flexibilidad de los sectores de usuario, podemos convertir lossectores automáticos en sectores de usuario.

Subsectores.Son una forma de sectores automáticos que aparecen automáticamente cuando creamos 3 o más sectoresque 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; laslí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 senumeran 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 deWeb y Sector.

La paleta Contenido de Web muestra el número de sector, el símbolo del sector e información sobre lasimá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 esemomento.

● 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 sectorMenú 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 aser sectores de usuario. Automáticamente el programa rellenará el resto de la imagen con otros sectoresde color gris (sectores automáticos) y numerará según se ha descrito anteriormente, de forma que toda laimagen 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 crearo dibujar sectores de usuario en la paleta de herramientas (también tiene forma de cútter o cuchilla, perocon una flechita negra).

Para eliminar un sector, lo seleccionamos y clicamos en SUPR (Mac) o RETROCESO (Windows), o bienseleccionamos 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 encapas, 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ágenesde 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 seleccionadoVista>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 elnú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 sectorLa 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, nodebemos 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 opcionesde 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ñaOptimizada. Con la herramienta Seleccionar sector, vamos seleccionando sectores y dándoles diferentesconfiguraciones 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. Dadauna configuración para un sector, basta arrastrar dicho icono hasta cualquier otro sector para otorgarle lamisma configuración.

Para guardar (Image Ready):Archivo>Guardar optimizada comoy 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 cuandocolocamos 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 elque 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 nohay 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 deWeb.

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 decapa (Image Ready). Al igual que los anteriores, los conjuntos de sectores permiten tener organizada lapaleta Contenido de Web.

Podemos crear páginas web, activando y desactivando la visibilidad de los diferentes conjuntos de sectoresde la paleta Contenido de Web, junto a su correspondiente conjunto de capas de la paleta Capas.

■ IMÁGENES DE SUSTITUCIÓNUna imagen de sustitución es un tipo de gráfico Web que cambia cuando un usuario coloca el puntero delrató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 elcó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 unaimagen 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):NormalSobre Cuando se coloca el puntero del ratón sobre un sector o mapa de imagen sin clicarAbajo Cuando se clica en el sector o mapa de imagen.ClicFuera (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énalmacena 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 decapa, crean los estados de la imagen de sustitución, dividen la imagen en sectores y escriben el códigoJavascript 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 deWeb y Ventana>Estilos).

Seleccionamos Estilos de rollover de web en el menú de la paleta Estilos. Observaremos que todos losestilos 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 lapaleta Contenido Web podemos observar los cambios que el programa ha creado automáticamente paralos 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 paletaEstilos 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 unarchivo HTML. Tenemos que guardar un archivo HTML para el estado Normal, el original cuando abrimospor primera vez la página Web, y tenemos que guardar una página HTML por cada botón con estadoSeleccionado.

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 estadosSeleccionado (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 contieneimá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 desustitució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 imagende sustitución.

Paso 2.- En la parte inferior de la paleta Contenido de web, hacemos clic en el botón de Crear rollover apartir de capas. Image Ready creará automáticamente dos cosas: un sector basado en capas para lacapa original seleccionada y una imagen de sustitución en la paleta Contenido de web, con un estadoSobre. 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 lacapa original siga seleccionada en la paleta Capas. En dicha paleta Capas modificamos la configuracióndel 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 capahan dado como resultado el nuevo aspecto del estado Sobre (observaremos también que el estado Normalno ha variado su aspecto).

Paso 4.- Igual proceso (paso 3) lo repetimos con otros posibles estados, según queramos, dándole a cadauno 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 losdiferentes 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 opcionesIncluir 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 desustitució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 ydesactivamos 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 paletaContenido 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 yle otorgamos un nuevo estado de rollover a cada variación. Así vamos creando diferentes estados deimagen de sustitución (en este caso: texto).

El modo más sencillo de conseguir esto es duplicando capas (Capas>Duplicar Capas). En cada capaduplicada variamos las propiedades tipográficas del texto y le otorgamos un Nuevo estado de rollover enla paleta Contenido de Web. Duplicamos capa, variamos propiedades tipográficas y otorgamos un nuevoestado 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 estadosque deseemos.El procedimiento consiste en hacer corresponder cada estado de rollover con un nuevo cuadro de la paletaAnimación. Estos estados se han creado activando y desactivando la visibilidad, variando la posición delos elementos, etc.Cuando tenemos establecidos cuadros de animación correspondientes con estados de rollover, abrimos elcuadro 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 vezen 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 conbuen gusto ¡No conviene dejarse llevar!.

■ CREAR MAPAS DE IMÁGENESCon 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 delos 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 lascapas 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ágenesMenú 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ágenesplanas 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 queremosdelimitar.- 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 yfinalmente 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 creanpuntos sensibles del mismo tamaño que la capa. Es un procedimiento más sencillo que dibujarlos ya quelos 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 unamano a la derecha del nombre de la capa en la paleta Capas. El símbolo de la mano indica que la capatiene 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 Ajustesbasados en capa, en la paleta Mapa de Imágenes y seleccionamos Polígono en el menú emergenteForma. 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 deimá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ágenesbasado en capas se actualizan automáticamente cuando movemos o cambiamos de tamaño el contenidode 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íamoscon 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 elmapa 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 rellenarson muy similares a los correspondientes para Sectores.

Se pueden crear fácilmente imágenes de sustitución basadas en mapa de imágenes, utilizando lastécnicas aprendidas para imágenes de sustitución.

■ CREAR GALERÍAS FOTOGRÁFICAS WEBLa 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 elcó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álogoGalería de fotografías Web (también podemos usar otro camino: Archivo>Automatizar>Galería defotografías Web).

Rellenamos los distintos campos utilizando el sentido común en función de lo que nos piden u ofrecen (norequiere 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 uneditor 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, Colorespersonalizados, etc.

■ AUTOMATIZACIÓNACCIONES

Un eficaz instrumento para automatizar tareas.

Nociones generalesCon 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 operacionessobre otras imágenes.La paleta Acciones se estructura en carpetas. Las carpetas o grupos de acciones tienen su propio ordenjerá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 unaimagen, 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 onuevo.

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óncomienza a registrar cada acto modificador de la imagen ordenándolos por orden cronológico dentro de laacció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 laparte 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 auna 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 carpetade imágenes en un icono Droplet (o viceversa).Podemos usar un Droplet sin abrir Photoshop o Image Ready. La aplicación se iniciará automáticamentecuando arrastremos una carpeta o una serie de archivos al Droplet.Podemos compartir Droplets entre ordenadores Mac y Windows, ya que son multiplataforma (si creamos undroplet en Mac, debemos añadir la extensión de archivo .exe, para que los ordenadores con Windows puedanreconocerlo.

● Crear Droplets.Paleta Acciones, seleccionamos acción o acciones que queramos para el droplet y elegimos Crear dropleten el menú de la propia paleta Acciones. En el cuadro de diálogo Guardar acción como Droplet escribimosel 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 enlas que se encuentran las imágenes originales.