Diseñar Webs Con Photoshop

GRACIAS A TODOS LOS LECTORES QUE CONF~AN
EN LO QUE LES APORTARÁ EL LIBRO.

GRACIAS POR EL APOYO RECIBIDO, MANSOUR.
INTRODUCCION ..........................................................................11
~ C Ó M OESTÁ ESTRUCTURADO EL LIBRO?................................13
Capitulo 1.
CONCEPTOS BÁSICOS EN LA COMUNICACI~NDE DATOS ............
17
COMLINICACIÓNDE DATOS CON TCPIIP.................................... 19
DIFERENCIAS ENTRE LAS REDES LAN.
REDES MAN Y REDES WAN .................................................... 20
INTERNET E INTRANET.................................................................... 23
PROTOCOLOS IMPLEMENTADOS EN TCPIIP................................ 26
PROTOCOLO DE TRANSFERENCIA
DE HIPERTEXTOS HTTP....................................................................... 27
TERMINOLOGIA ................................................................................ 28
.Ansi................................................................................ 28
.Anonymous FTP..............................................................28
.Ansnet............................................................................. 28
Webs con Photoshop
.ARP................................................................................ 28
.ARPA.............................................................................. 29
ARPANET....................................................................... 29
a
Assigned numbers............................................................. 29
e
.ATM................................................................................ 29
.Autonomous system.......................................................... 29
.Backbone network............................................................. 29
.Bastion host.................................................................... 30
.Bridge.............................................................................. 30
Class of adress................................................................ 30
Cliente-Setvidor............................................................... -30
.Domain............................................................................ 30
.Encapsulation.................................................................. 30
.Firewall............................................................................ 30
Flow control..................................................................... 31
e
.Fragmentation.................................................................. 31
.Hierarchical routing............................................................ 31
ICMP................................................................................ 31
e
Internet............................................................................. 31
.IP Datagram.................................................................... 32
.Packet.............................................................................. 32
. Protocol............................................................................ 32
PARA SABER MAS........................................................................... -32
?
Capítulo 2.
OPTlMlZAR LA IMAGEN PARA INTERNET..........................................33
LA IMAGEN DIGITAL...................................................................... -34
TAMAÑO DE IMAGEN Y RESOLUCIÓN
EN DOCUMENTOS PARA LA WEB...................................................... 37
TAMAÑO DE ARCHIVO EN DOCUMENTOS PARA LA WEB............... 44
RAPIDEZ DE TRANSMISIÓN EN LA RED
Y LA CALIDAD DE REPRESENTACI~N...............................................44
Capítulo 3.
FORMATOS Y COMPRESIÓN DE ARCHIVO ........................................49
LQUÉ FORMATO ELEGIR?............................................................. 50
Índice
ARCHIVO GIF............................................................................... 50
.GIF89a............................................................................. 51
Elección de paleta y compresión GIF................................... 55
a
La opción Entrelazado ...................................................... 59

e
ARCHIVO JPEG........................................................................... 61
.Compresión JPEG y calidad de imagen............................... 62
-La opción Progresiva........................................................63
ARCHIVO PNG ............................................................................ 64
.Compresión sin pérdidas....................................................... 64
.La opción Adam7.............................................................. 82
ANÁLISIS GLOBAL.......................................................................... 83
Capitulo 4.
TRATAR IMÁGENES PARA LA WEB ....................................................85
REDUCIR EL TAMAÑO DEL ARCHIVO.......................................... 86
.Proyectos ......................................................................... -86
REDUCCIÓN DE COLORES........................................................... 92
LINOS CUANTOS E. IEMPLOS......................................................... 96
IMÁGENES DE GRAN TAMAÑO................................................... 100
Bapftulo 5.
PREPARAR FONDOS Y TEXTURAS ...................................................103
FONDOS CON COLOR SÓLIDO ................................................... 105
.Definir el atributo BGCOLOR
para un fondo de color sólido .................................................... 107
FONDOS TEXTURADOS............................................................... 108
Fusionar los motivos definidos ................................................. 109
e
.Diseñar texturas para fondos ..................................................... 113

.Crear efecto de nubes.................................................. 113
Submenú Textura.......................................................... 114
a
.Otros filtros otras texturas............................................. 117

Realizar transformaciones ........................................................ 119
.Defiriir el atributo BACKGROUIVD
para un fondo texturado............................................................ 120
.Proyectos........................................................................ 121
FONDOS CON COLOR SÓLIDO Y TEXTURA A LA PAR................. 125
8 Webs con Photoshop
.Definir la etiqueta BORDER

para un fondo con tablas........................................................... 126
DEGRADADOS PARA FONDOS......................................................... 129
.Definir las etiquetas FRAMESET y FRAME
para un fondo cortina................................................................ 132
FONDOS CONSTITUIDOS POR IMÁGENES .................................. 135
Imagemaps o vínculos como fondo......................................... 139
e
Definir las etiquetas FRAMESET y FRAME

para un fondo múltiple............................................................... 141
Capitulo 6.
TRANSPARENCIAS EN IMÁGENES PARA LA WEB.........................145
APLICAR UN COLOR SÓLIDO EN
LAS ZONAS TRANSPARENTES DE LA IMAGEN............................ 146
APLICAR UNA TEXTURA EN
LAS ZONAS TRANSPARENTES DE LA IMAGEN............................ 150
Remodelar la tabla de colores .................................................. 155
a
ENMASCARAR LAS ZONAS TRANSPARENTES.............................160

TRAIVSPARENCIAS CON PNG......................................................... 163
UNOS CUANTOS EJEMPLOS....................................................... 164
a
Capitulo T
DISEÑAR MARCOS. BARRAS Y BOTONES.........................................165
DISENAR MARCOS........................................................................... 166
.Determinar la forma.................................................................. 166
.Rellenar y producir efectos en el marco ................................... 170
.Definir la etiqueta TABLE
para producir marcos ................................................................ 204
DISENAR BARRAS............................................................................ 222
Dibujar la forma ........................................................................ 222
e
Rellenar y producir efectos en la barra ....................................225

e
.La etiqueta HR para incorporar barras horizontales................230

DISEÑAR BOTOhlES Y S~MBOLOSPARA LISTAS..........................234
.Determinar la forma.................................................................. 235
Índice
.Rellenar y producir efectos

en los botones o viñetas gráficas.............................................. 237
.La etiqueta UL para crear listas desordenadas....................... 251
La etiqueta IMG para añadir
viñetas gráficas en las listas ....................................................... 251
La etiqueta IMG para agregar botones
y la etiqueta A para que sean vínculos..................................... 259
PROYECTOS ....................................................................................... 268
UNOS CUANTOS EJEMPLOS........................................................ 270
Capitulo 8.
EFECTOS EN EL TEXTO .....................................................................271
¿SUAVIZAMOS EL TEXTO? .............................................................. 273
COLOREARLO................................................................................. -276
EFECTOS ESPECIALES...................................................................... 281
.Técnicas de manipulación........................................................ 282
-Alterando el color...................................................................... 288
Técnicas de distorsión y transformación.................................. 291
a
Más sobre relieve e iluminación............................................... 296

a
MORFOLOG~ADEL TEXTO GRÁFICO EN HTML.............................. 299

EL TEXTO. ALGUNAS ETIQUETAS Y A-TRIBUTOS........................... 304
PROYECTOS ....................................................................................... 318
UNOS CUANTOS EJEMPLOS ........................................................ 320
capitulo 9.
TODO SOBRE MAPAS DE IMAGEN ................................................. 321
DETERMINAR COORDENADAS ......................................................... 328
.Las etiquetas MAP y AREA
para introducir las coordenadas................................................ 330
PROYECTOS ....................................................................................... 331
UNOS CUANTOS EJEMPLOS........................................................ 334
Capitulo
. 10.
DISENANDO ANIMACIONES...............................................................335
PROCEDENCIA DE LAS ANIMACIONES.......................................... 336
CONCEPTOS BÁSICOS.....................................................................337
PREPARANDO ANIMACIONES GIF COI1 PHOTOSHOP.................340
La etiqueta APPLET de Java
para colocar GlFs animados en una página HTML..................343
UNOS CUANTOS EJEMPLOS ........................................................346
Apéndice.
INDICE ANALITICO .............................................................................. 347
La implantación del diseño de páginas Web en nuestros días se está
onvirtiendo en algo habitual y cotidiano. Dado que la comunicación de
información por red, ya sea a nivel comercial, didáctica, lucrativa, cultural o
informativa, es hoy por hoy uno de los medios que más está proliferando. Es
lógico, pues este medio de comunicación tiene la particularidad de almacenar un
cúmulo casi infinito de información, pudiendo ser ésta tan amplia e inmediata
como requiere nuestra sociedad.
Esto hace que los códigos infracornunicativos gráficos de representación:

códigos compositivos, códigos fotográficos, códigos cromáticos, códigos verbales
y paralingüísticos; los códigos infracomunicativos antropológicos culturales e,
incluso los códigos que hacen referencia a la conexión y al montaje sean
extrapolados de los medios habituales donde han sido utilizados para incorporarlos
en la elaboración y diseño de páginas Web. Si no fuese de este modo, lás páginas
Web podrían convertirse en algo realmente aburrido y monótono y, todas las
cualidades comunicativas que poseen, anteriormente mencionadas, no surtirían
efecto. Pues, siempre es importante utilizar los códigos con los que se mueve una
cultura para que el mensaje y la información sean transmitidos plenamente.
Webs con Photoshop
A la hora de elaborar una página Web siempre habrán de tenerse en

consideración los fines específicos de la misma, es decir, si es una página
publicitaria, los requerimientos no serán, posiblemente los mismos que si es una
página informativa y, como es lógico, el diseño utilizado para su confección puede
tener pocos nexos en común. Ahora bien, lo que si tendrán en común será la
herramienta o herramientas con las cuales han sido diseñados. En este caso el
medio que vamos a utilizar para el diseño de páginas Web va a centrarse en el
programa Photoshop sin olvidar el lenguaje HTML, el cual ha sido remodificado,
para entre otras cosas, dar salida a páginas Web, bajo un criterio ciertamente
profesional. Ahora bien, la confección de páginas Web puede diversificarse en
infinidad de aspectos, por lo que, habremos de recumr a otros programas con
fines específicos, como por ejemplo, la incorporación de hojas de cálculo en una
página. Resultará más factible elaborarlas en un programa diseñado para tal fin y,
a continuación, incorporar el resto de elementos que compongan la página. No
obstante, en el capítulo correspondiente expecificaremos los tipos de etiquetas
necesarias para incorporar estos elementos en una página.
Siguiendo los pasos del párrafo anterior añadiremos que cada vez es más
habitual la incorporación de efectos especiales de sonido en las páginas Web. Si
proviene del mundo multimedia no tendrá dificultades en incorporar este tipo de
efectos en la Web y, con este fin haremos un breve inciso sobre este tipo de
etiquetas para que pueda, si lo desea, incorporar sonidos a sus páginas o en su
?
sitio Web.
Esperamos que una vez haya finalizado la lectura completa del libro cree
y programe sus mejores y más profesionales páginas Web mediante este
indispensable programa para dicha tarea.
La ultima versión de Photoshop(4) está preparada para dar salida a
documentos que han de ser incorporados a páginas Web. Pero ya no tan sólo esto,
sino que además incorpora nuevas herramientas y actualiza otras tantas para
conseguir mediante este potente programa desde las más simples imágenes a los
más sofisticados diseños para la Web. De este modo, trataremos los aspectos más
relevantes e importantes para la incorporación de dichos documentos a la Web.
Como es lógico, no podemos explicar aspectos ajenos al programa que

estamos tratando. Sin embargo, si que nos adentraremos en la comprensión casi
necesaria de cómo se articula una página Web. Pero vayamos por partes,
empezaremos por conocer cómo funciona la World Wide Web, el hardware y el
software que se utiliza en Intemet, los protocolos empleados, centrándonos en el
grupo de protocolos TCPíIP y HTTP, informar de los lenguajes que hacen posible
colocar documentos en la Web y que sirvan de enlaces a otros documentos, etc.
Seguiremos por conocer las características que contiene un documento

que ha de ser incrustado en una página Web, al mismo tiempo que aprenderá a
prepararlo y a discernir entre las diferentes posibilidades que se ofrecen, la más
adecuada en cada caso según las características del proyecto en cuestión que ha
de ser publicado en Internet. Es decir, la resoluciones con las que se trabaja en las
diferentes plataformas, reducción de colores, el número de colores que puede
contener, cuántos colores nos conviene incluir según el fin último del documento
en la página, tipos de paletas que han de utilizarse o la armonización de la paleta
en la totalidad de documentos a incluir en la página. Y en relación a los puntos
que acabamos de enumerar son desarrollados en el libro aspectos sobre tipos de
conversiones que han de realizarse a nivel de modo de color, conversión a color
indexado (8 bits), documentos de 8 bits en escala de grises, imágenes de 7 bits, 6
bits, 5 bits, 4 bits, 3 bits, 2 bits y 1 bit.
Siguiendo con tipos de conversiones nos centraremos en los tipos de

formatos que son soportados en los navegadores tales como GIF Graphics
Interchange Fonnat, el más popularizado; JPEG o JPG Joint Photographic Experts
Group, más utilizado para la incorporación de fotografías en la Web o, el nuevo
formato PNG Portable Network Graphics, orientado para la incrustación de
gráficos.
La parte central del libro desarrolla el proceso y técnicas de creación de

los diferentes componentes de una página Web. Es decir, la elección y diseño de
fondos, botones, marcos, la creación de efectos especiales, texturas, efectos
tridimensionales o de iluminación, así como la selección y confección de
tipografías específicas utilizadas como componente artístico, sin olvidar la vertiente
comunicativa. Con el mismo fin desarrollaremos la confección y diseño de páginas
webs creadas en su totalidad en Photoshop y analizaremos páginas de la Web que
muestren la gran variedad y diversidad de diseños que pueden lograrse. Todo ello
con proyectos continuos que iremos desarrollando capítulo tras capítulo.
Dentro de este último bloque incluimos la elaboración de documentos

para la creación de animaciones, haciendo hincapié en las nociones básicas de la
morfología del montaje para la creación de secuencias, por lo que se lleva a cabo
una breve introducción en animación básica y en técnicas de animación. Por otro
lado, reseñaremos los formatos más adecuados para animaciones y la compresión
idónea para una animación. Aunque existen una gran variedad de programas que
permiten crear animaciones como pueden ser Director, Premiere, Virtual Reality,
nos detendremos en la creación de GIFs Animados que es para lo que mejor está
preparado Photoshop, además de ser los documentos GIF los más recurridos para
crear animaciones en la Web. También comentaremos algunos de los programas
de ensamblaje de reconocido uso para montar las imágenes.
¿CSmo está estructurado el libro?
Por último, comentar que el libro desarrolla de un modo progresivo en

complejidad y relacionándolo con los temas tratados, comentarios de cómo y con
qué etiquetas y atributos insertar los gráficos creados en Photoshop, además da
ideas para elaborar diseños específicos que produzcan en efectos más sofisticados
y curiosos en nuestras páginas. En cada capítulo se crea una relación intuitiva y
objetiva al mismo tiempo entre el documento diseñado y su equivalente en lenguaje
HTML con el fin de colocarlo en la Web, proceso que puede comprobar con
cualquier editor HTML profesional que utilice normalmente abriendo sus diseños
y páginas en su navegador.
Photoshop no cuenta con ningún menú o grupo de comandos que permitan

crear documentos HTML, ya que no trabaja con este tipo de etiquetas. HTML
HyperText Markup Language puede generarse con un simple procesador de textos
convirtiendo el documento en formato ASCII Arnerican Standard Code for
Inforrnation Interchange. Pero habremos de tener en consideración las
características de nuestros proyectos y seleccionar el editor HTML más adecuado,
como ya detallaremos en el capítulo correspondiente. Para que la comprensión
sea completa aunque no exhaustiva explicaremos qué es HTML y qué es lo que
puede realizar con este lenguaje para la creación de una página Web. Además
detallaremos la sintaxis que ha de utilizarse para su elaboración, deteniéndonos
en mayor medida en las etiquetas que más nos interesan, es decir, etiquetas para
incluir imágenes, para la creación de marcos, para la creación de tablas, para la
creación de mapas de imagen y etiquetas para la creación de enlaces, entre otros.
sin embargo, también serán mencionadas otras etiquetas HTML que no tienen
por qué utilizarse con documentos creados en Photoshop, pero que sí pueden ser
de su interés para la creación de sus páginas webs o de su sitio Web.
La programación de documentos HTML puede parecer a simple vista

algo complicado para lo cual no nos sintamos preparados. Sin embargo,
comprobará que es muy accesible y que simplemente se requiere paciencia y
cierta experiencia que irá adquiriendo con el tiempo. Además, una vez haya
confeccionado unos cuantos documentos podrá utilizarlos como plantillas para la
elaboración de otros documentos variando ciertos aspectos de los mismos.
Si ya ha trabajado en desarrollos de webs el libro le reportará un mayor

conocimiento en la preparación de documentos en Photoshop para la Web, al
mismo tiempo descubrirá nuevas maneras de diseñar páginas partiendo de un
mayor conocimiento en ciertos usos específicos de etiquetas HTML empleadas
inicialmente para otros fines, pero que aquí les descubriremos otros usos posibles.
La Web o la WorM Wiúe Web o Telaraña Global es un conjunto de
protocolos que se articulan para crear un telaraña mcindial de información. De tal
modo, que permite comunicar datos ordenados por grupos. Esta recopilación de
datos ubicada en grandes ordenadores pertenecientes a entidades independientes
facilitan la búsqueda de información de temas bien diversos, al mismo tiempo
que permite comunicar información con ordenadores de otros ususarios. Este
novedoso aspecto de intercomunicación tiene su origen en la CERN (Consejo
E~iropeode Investigación Nuclear) que surgió bajo la necesidad de ciertos
científicos de contrastar los datos de investigaciones relacionadas.
Esta fantástica herramienta comunicativa tiene su origen en la tecnología

ARPA (Agencia de Proyectos de Investigación Avanzada), la cual desarrolló el
uso de redes para la comunicación de datos. Con el tiempo los protocolos utilizados
para la transmisión de información en la red se han estandarizado en el llamado
protocolo TCP/ZP. Esta necesidad de estandarización surge bajo la necesidad de
articular la información en Internet que ha de transmitirse a multitud de
ordenadores que trabajan con sistemas operativos diferentes. Así los protocolos
de comunicaciones permiten especificar o entender la comunicación de datos, sin
Webs con Photoshop
necesidad de conocer o depender de un conocimiento previo de una marca en

particular de hardware de red. La independencia de este tipo de protocolos con
respecto al hardware subyacente en el ordenador facilita la comunicación de datos
entre ordenadores, además de agilizar el trabajo de los programadores evitando
tener que crear softwares limitados o versiones especiales para mover y traducir
datos entre ordenadores. Sin embargo, hay que añadir, que el uso de los protocolos
TCP (Protocolo de Control de Transmisión) y ZP (Protocolo Internet) no está
restringido a Internet, sino que es igualmente utilizado en redes locales LAN
(Redes de Área Local) y redes internas o Intranet. En este tipo de redes internas
también son publicadas páginas informativas, que nosotros denominamos páginas
Web, por lo que será de interés tomarlas en consideración.
Los protocolos TCP y IP son los que articulan las reglas, mediante una
serie de convenios, para que podamos comunicarnos en la Web. Éstos contienen
los datos que hacen referencia a los formatos de los mensajes, detallan cómo ha
de responder el ordenador cuando llega un mensaje, precisar cómo ha de actuar el
ordenador cuando advierte un error u otras anomalías así como la sintonización
de velocidades y la secuencialización. Es decir, los protocolos, cualquier tipo de
protocolos, son un conjunto de reglas que gobiernan el intercambio de información
entre dos entidades, que podemos estructurar y articular bajo una sintaxis,
semántica y temporalización. Las entidades podemos identificarlas como los
programas de aplicación utilizados por los usuarios, sistemas de gestión de bases
- de datos, programas para la transferencia de ficheros o gestores de correo
electrónico, entre otros.
--
Protocolo de transporte
APLICACI~N8 n n n n n n n n n n n n n n n =nn1 APLICACIÓN
Mensajes y árdenes para la transferencia
Protocolo de transporte TCP

TRANSPORTE u m m m m m m nm m m m m m m m m m m m n TRANSPORTE
Mensajes del servicio de comunicaciones
Protocolo de acceso a la red IP

ACCESO A RED DE ACCESO A
LA RED COMUNICACIONES LA RED
F~SICO u.~mmmmmmmm~.mmmmm..I F~SICO

Comunicación de datos
COMUNICACIÓN DE DATOS CON TCP/IP

Observe el esquema de la página anterior. Representa la estructura o
arquitectura de protocolos TCP/ZPsencilla que nos ayuda a comprender el proceso
interno cuando procedemos a comunicarnos en una red. Unos ejemplos de
Aplicación serían la transferencia de documentos o el correo electrónico. El módulo
de la aplicación para la transferencia de archivos contiene la estructura que permite
transmitir con seguridad una palabra clave, registros de ficheros u órdenes de
ficheros; todo ello ejecutado mediante el protocolo de aplicación. Observe que
este tipo de protocolo es utilizado por aplicaciones bien diversas, además de los
dos ejemplos mencionados. Este motivo hace que el módulo haya de encontrarse
separado del servicio de comunicaciones con el fin de que no se produzcan
conflictos entre las diferentes aplicaciones que han de utilizarlo.
El Transporte responde al servicio de comunicaciones que ha de asegurar

que los ordenadores estén activos, al mismo tiempo de preparados para la
transferencia de información. Por este motivo es el encargado de asegurar el envío
de los archivos, siguiendo la pista de los datos que se intercambia en el proceso
de transporte mediante el protocolo de transporte. En este caso viene definido por
el grupo de protocolos TCP (Protocolode Control de Transmisión) y ZP (Protocolo
Intemet).
2
El Acceso a la red está organizado por los protocolos de acceso a la red.
Esta lógica de interface de red se encarga del intercambio de información entre su
ordenador y la red en la cual esté conectado. El ordenador emisor es el que debe
proporcionar a la red la dirección destino a la cual van dirigidos los datos que
desea enviar. El software utilizado para el acceso a la red dependerá del tipo de
red a la cual esté conectado, por ejemplo, redes de área local LAN y redes de
área amplia WAN. En el mercado encontramos diversos estándares de software
para el acceso a la red. Sin embargo, ha de observar que éstos softwares de acceso
funcionan con independencia a la red a la cual esté usted conectado. Además, los
sotfwares utilizados en la aplicación y en el transporte funcionan, deben funcio-
nar, con independencia del software utilizado para el acceso a la red e indepen-
dientemente a la red a la que el ordenador esté conectado.
Cuando, como en nuestro caso, enviando información en Internet, los

datos han de ser transmitidos en redes interconectadas, es decir, que los dos
dispositivos, el de salida y el de llegada, estén conectados a redes diferentes, se
Webs con Photoshop
hace necesario un protocolo transporte y de acceso a la red específico, en este

caso el protocolo internet o ZP. Este protocolo se encarga de encaminar la
información por las diversas redes y routers hasta el destino final. Los ruteadores
o routers son dispositivos que conectan dos redes y cuya función prioritaria
consiste en retransmitir, los datos enviados desde la aplicacion de origen, de una
red a otra encaminando la información hasta llegar a la aplicación de destino.
Por otro lado, es importante comprender que los datos transmitidos en

Znternet o Zntranet han de estar sometidos a otro tipo de protocolos que aseguren
el correcto intercambio de información, es decir, en el mismo orden y sin pérdida
de información, dado que si no fuese de este modo los datos que pudiesen aparecer
en la aplicación de destino prodrían estar completamente modificados y por lo
tanto la información transmitida resultaría irreconocible. Con el fin de que esto
no ocurra se somete, en nuestro caso, la información enviada al protocolo de
control de transmisión TCP (protocolo de transporte). Éste, independientemente
de la naturaleza de las aplicaciones de origen y destino, asegura que los datos se
intercambien de forma segura.
El módulo Física representa el interface físico utilizado entre el dispositivo

de salida, que podría ser por ejemplo nuestro ordenador y el medio de transmisión,
que sería la red. Este módulo es el encargado de estructurar las características del
medio de transmisión, la velocidad de transmisión de los datos o la naturaleza de
7 las señales, entre otras cuestiones.
Existen otro tipo de arquitecturas de comunicación de datos, como puede

ser la seguida por el modelo OSZ (Sistema Abierto de Interconexión).Sin embargo,
por no tener relación con el tema que deseamos no los trataremos.
DIFERENCIAS ENTRE LAS REDES LAN,

REDES MAN Y REDES WAN
Las redes locales LAN (Redes de Área Local) no suelen exceder distancias
de unos 400 metros y acostumbran a utilizarse para difundir información en
edificios de oficinas, campus, almacenes, etc. Las redes LAN normalmente son
usadas y gestionadas por un único organismo. Hay que añadir que este tipo de re-
des están diseñadas para cubrir distancias cortas, esto hace que la velocidad en la
Comunicación de datos ,
comunicación de datos sea mayor, operando a velocidades que van de diez rnillo-
nes de megabits por segundo a varios gigabits por segundo, aspecto a tener en
consideración en la creación de páginas Web. Algunos ejemplos de redes LAN
son la red Ethernet y la red FDDI.
Existe una red intermedia entre las redes de área local LAN y las redes de
gran alcance WAN. Son las denominadas MAN o Redes de Área Metropolitana.
h e d e n alcanzar las distancias que abarquen un área metropolitana, incluyendo
varios edificios ubicados en una misma ciudad. Las redes MAN pueden ser ges-
tionadas por organismos, usuarios particulares y privados o pueden ser propiedad
y estar gestionadas por organismos públicos. En este tipo de red las velocidades
de transmisión de datos son igualmente altas, alcanzando velocidades que pueden
oscilar de cientos de megabits a gigabits por segundo. Pudiendo ser utilizada
como medio de interconexión entre redes de área local.
Las redes LAN y MAN comparten las características de ser redes de

difusión de paquetes (no contienen nodos de conmutación intermedios), donde
cada estación está conectada a un medio de transmisión que es compartido por
otras estaciones. Por lo que cuando se transmite información desde una estación
la información es recibida y difundida al resto de estaciones conectadas.
-
Esquema simplificado de red de área local o metropolitana
1 SISTEMA DE
TRANSMISI~N 1
Webs con Photoshop
Por su parte las redes WAN abarcan distancias geográficas extensas, por
lo que requieren utilizar rutas de acceso público y circuitos proporcionados por
una entidad proveedora de servicios de telecomunicación. Las velocidades de
transferencia de datos resultan significativamente más lentas. La transmisión de
información en una WAN se realiza mediante una serie de dispositivos de
conmutación interconectada. Los datos generados en cualquier dispositivo de salida
serán encaminados a través de una ruta cruzando los nodos internos (se encargan
de proporcionar el servicio de conmutación que transmitirá los datos de nodo a
nodo) necesarios hasta llegar al dispositivo final.
Esquema simplificado de red de área ampli,
Y--
Nodo de
conmutación
Precisamente con el fin de solventar este importante problema, durante

los últimos veinticinco años se ha estado estudiando el método que permitiese
reducir al máximo el tiempo de transmisión y el control de errores. Hasta el
momento el modelo más eficaz es el Modo de Transferencia Asíncrono o ATM,
el cual prodríamos decir, que surge de la ampliación de la conmutación de circuitos
y de conmutación de paquetes. Dicho de otro modo, las redes que trabajan con
conmutación de circuitos establecen el camino a través de los denominados nodos
de la red que interconexionan dos estaciones. Por lo tanto, el camino de
transferencia se crea mediante una secuencia de nodos que van conectando
estaciones. En cada nodo los datos son encaminados hasta la estación de salida u
ordenador destino sin retención ni pérdida de tiempo. Cuando una red trabaja por
conmutación de paquetes los datos se envían igualmente en secuencias a través
de nodos. Sin embargo, en este caso los datos son retenidos en el nodo durante un
breve espacio de tiempo y, a continuación, son enviados siguiendo algún camino
hasta la estación destino. No obstante, este método de transferencia fue mejorado
debido a que constantemente se sufrían errores en la transmisión de datos. El
método seguido consistió en eliminar la información redundante en cada paquete
enviado y el procesamiento asociado de la información lo que permitió un mayor
control de errores durante el envío, así como unas mayores velocidades de
transferencia. Este tipo de transmisión de datos se conoce con el nombre de
Retransmisión de tramas (Frame Relay). La diferencia sustancial entre la
Retransmisión por tramas y ATM consiste en que el primero usa paquetes de
longitud variable denominados tramas, mientras que el segundo usa paquetes de
longitud fija denominados celdas. Al trabajar con paquetes de longitud fija el
procesamiento de la información se reduce sustancialmente.
INTERNET E INTRANET
Como ya se ha dicho el uso de los protocolos TCP (Protocolo de Control
de Transmisión) y ZP (Protocolo Internet) no está restringido a Internet, sino
q%ees igualmente utilizado en redes locales y metropolitanas. Las redes de corto
alcance que funcionan con el protocolo TCP/ZP son llamadas Intranets. Esto no
quiere decir que todas las redes locales o metropolitanas han de ser necesariamente
Intranets, sino que se denominan bajo este nombre las que utilizan este grupo de
protocolos. Esto hace que las redes locales que transmiten información con este
protocolo puedan estar conectadas a Intemet. En otras palabras una Intranet puede
estar conectada a Internet.
Aunque el origen de Intemet surge como necesidad de interconectar varias

redes locales, lo que provoca que las diferencias entre un término y otro estén
confusas, existen diferencias sustanciales entre uno y otro. La diferencia más
relevante entre Internet e Intranet radica en que el primero es una red
descentralizada y, que como ya hemos dicho emplea diferentes nodos para enviar
la información desde el lugar de origen hasta el lugar de destino. Su estructura
como ya se ha dicho asemeja a la forma de una gran tela de araña que comunica
infinitos puntos de destino a través de infinitos nodos intermedios, por lo que la
ruta que puedan seguir los datos transmitidos es imposible de determinar. En

cambio, la topología de una Intranet es mucho más variada y va en función de las
necesidades y la estructura de la empresa o institución que la utilice. Los modelos
más comunes son el modelo BusCfig. a ) , el modeloÁrbol Cfig. b), el modelo Anillo
Cfis. c) y el modelo Estrella (fig. d) que como bien indican sus nombres su topología
se asemeja a la forma mencionada. Como es lógico las empresas que tienen
implantada una Intranet disponen de unprotocolo TCP/IP restringido, instalando
un firewall que limita el acceso a la red local a las páginas deseadas, a diferencia
del que encontramos en Internet.
a) Modelo Bus
b) Modelo Arbol
c) Modelo Anillo d) Modelo Estrella

Ahora veamos mediante un ejemplo gráfico un esquema que represente

el esquema de una WAN y el acceso a Internet de un usuario cualquiera, la conexión
a Internet de una red local y la conexión a Internet de una Intranet.
ESQUEMA MORFOLÓGICO DE INTERNET INCLUYENDO

LOS DIVERSOS TIPOS DE USUSARIOS Y REDES QUE SE
CONECTAN A LA RED DE REDES.
conexión normal
routers .....
. ................. conexión TCPnP
Usuario con conexión TCPnP
Nodo o router
Firewall filtro de
acceso a usuarios
Red LAN con

conexión TCPllP
Red LAN sin
conexión TCPllP
Webs con Photoshop
PROTOCOLOS IMPLEMENTIADQS
Cuando trabajamos con los protocolos TCP/IP utilizamos otros protocolos

para las aplicaciones en las cuales estemos trabajando. Lógicamente, podemos
conectar con otras aplicaciones a través de otro protocolo de transporte que no
sea TCP, como por ejemplo a través del protocolo de transporte conocido por
UDP (Protocolo de datagrama de usuario) el cual permite comunicar de
ordenador a ordenador mediante el protocolo simple de gestión de red o SNMP.
Sin embargo, en este caso nos limitaremos a comentar los protocolos de
transferencia vinculados al protocolo TCP, los cuales son necesarios para la
comunicación de datos para aplicaciones específicas.
Los más importantes y empleados, que tienen su origen y fueron diseñados

como estándares militares, son SMTP (Protocolo Simple de Transferencia de
correo), FTP (Protocolo de Transferencia de fiheros) y TELNET. Por otro
lado, el que más nos interesa en nuestro caso es el Protocolo de Transferencia de
hipertexto o HTTP que es la base de la World Wide Web o WWW y puede utilizarse
en cualquier aplicación cliente-servidor que requiera del uso de hipertextos para
la transacción de datos.
MINE
- -
HlTP BGP FTP SMTP TELNET SNMP
I
TCP UDP
ICMP OSPF
I I
IP
Comunicación d e datos 27
El envío de correo electrónico multimedia en Internet combina los

protocolos SMTP (Protocolo Simple de Transferencia de correo) y MIME
(Protocolo de correo Internet multiobjetivo). El primero proporciona un meca-
nismo para transferir mensajes entre ordenadores independientes. Se requiere de
un editor o un programa de correo electrónico donde detallar los datos a enviar.
Esto es debido a que no especifica la forma en que se crearon los mensajes. Los
datos son transferidos a través de una conexión TCRSMTP desde el programa de
correo electrónico del ordenador origen hasta el programa de correo electrónico
del ordenador destino. El protocolo MIME surge por la necesidad de resolver
ciertos errores que se dan con la utilización exclusiva delSMTP, como por ejemplo,
el rechazo de mensajes de gran tamaño o rellenar líneas en un mensaje con el fin
de conseguir una longitud igual para todas las líneas que componen el documento.
Al mismo tiempo, facilita y proporciona formas normalizadas de tratar una gran
variedad de representaciones de información en un entorno multimedia.
El protocolo de transferencia de ficheros o FTP se utiliza para enviar

ficheros de un ordenador a otro según las órdenes requeridas por el usuario. Estos
ficheros pueden ser binarios, como de texto. El ususario, en primer lugar ha de
transmitir un identificador y la contraseña requerida (la suya), para que la
transferencia de datos pueda llevarse a cabo. Por lo que se realiza una primera
conexión vía TCP para el envío de identificador, contraseña, fichero y
especificaciones del mismo y, posteriormente es transferido el fichero.
PROTOCOLO DE TRANSFERENCIA
DE HIPERTEXTOS HTTP
El protocolo de transmisión de hipertextos o HTTP es el protocolo cliente1
servidor que define como han de ser transferidos los documentos de la Word Wide
Web o WWW. Los datos enviados por el protocoloHTTP pueden tener una variada
naturaleza; puede ser texto, imágenes, sonido, hipertexto y cualquier tipo de datos
que sea imposible enviar vía Internet. Además hemos de tener en consideración
que dependiendo de la naturaleza del emisor, es decir, del cliente, enviará la
información solicitada exclusivamente en los formatos que sean soportados por
el sistema que utilice el cliente. Pongamos un ejemplo, si su sistema no admite la
transferencia y visualización de imágenes, el servidor, simplemente enviará los
datos soportados por su sistema excluyendo, en este caso, toda la información en
Webs con Photoshop
formato GIF o JPEG (gráficos o imágenes). Esto hace que el protocolo H7TP sea
el más adecuado y más flexible en los formatos que puede tratar.
El uso más común de este protocolo es la transmisión de información de

un cliente web a un servidor web. Como es lógico, la diversa información solicitada
a través de la red (en este caso una red WAN) puede estar localizada en páginas o
documentos distribuidos por distintos servidores emplazados en cualquier lugar
del mundo. La naturaleza de este protocolo es la más adecuada para este tipo de
transferencia de datos, dado que es unprotocolo sin estados los datos son tratados
independientemente. Es decir, una vez la información es recibida por el cliente
ésta es cerrada, si el cliente vuelve de nuevo a demandar información de otra
página, ésta será tratada independienteme a la anterior y será cerrada por el servidor
una vez el cliente haya recibido la información solicitada. Esto quiere decir que el
procesado de la información requerida se produce en nuestro ordenador y no en el
servidor lo que acelera el tiempo de transmisión agilizando el proceso.
ANSI
Grupo que define los estándares de Estados Unidos para la industria del
procesamiento de información. ANSI participa en la definición de los estándares
7 de protocolos de red.
ANONYMOUS FTP (FTP anónimo)

Sesión FTP que utiliza el nombre de identificación anónimo para acceder
a archivos públicos. Un servidor que permite FTP anónimo por lo general acepta
la clave de acceso guest (visitante).
ANSNET
Red de área amplia que formaba la red de columna vertebral de Internet
en 1995.
ARP
Protocolo de resolución de dirección. Protocolo TCPIIP utilizado para
asignar una dirección IP de alto nivel a una dirección de hardware físico de bajo
nivel. ARP se utiliza a través de una sola red física y está limitada a redes que
soportan difusión de hardware.
Comunicación de datos 29
ARPA
Agencia de proyectos avanzados perteneciente a una institución
gubernamental que fundó la ARPANET y, después, la red global de Internet. El
grupo detro de ARPA responsable de ARPANET fue la IPTO (Oficina de
Información de Procesos Técnicos), llamada más tarde ISTO (Oficina de
Información de Sistemas Tecnológicos). ARPA se conoció como DARPA por
varios años.
ARPANET
Red pionera de gran alcance fundada por ARPA (después de DARPA) y
constituida por BBN. Sirvió de 1969 a 1990 como base para las primeras
investigaciones de red y como columna vertebral de red durante el desarrollo de
Internet. ARPANET consiste en nodos individuales conmutadores de paquetes
conectados por líneas arrendadas.
ASSIGNED NUMBERS (números asignados)

Documentos RFC que especifica, por lo general de forma numérica, los
valores utilizados por los protocolos TCPIIP.
ATM
Modo de transferencia asíncrono. Tecnología de red orientada a la
conexión que utiliza pequeñas celdas de tamaño fijo en la capa de nivel inferior.
W M tiene la ventaja potencial de ser capaz de soportar voz, vídeo y datos con
una sola tecnología subyacente.
AUTONOMOUS SYSTEM (sistema autónomo)

Grupo de ruteadores y redes bajo una entidad administrativa que cooperan
de cerca para ampliar la accesibilidad de la red y el ruteo, comunicándose entre sí
mediante el protocolo de contrapuerta interior de su elección. Los ruteadores
dentro de un sistema autónomo tienen un alto grado de confiabilidad. Antes de
que dos sistemas autónomos se puedan comunicar, un ruteador en cada sistema
. envía información de accesibilidad de un ruteador a otro.
BACKBONE NETWORK (red de columna vertebral de la red)

Cualquier red que forme la interconexión central para una red de redes.
Una columna vertebral de red nacional es una WAN; una columna vertebral de
red corporativa puede ser una LAN.
Webs con Photoshop
BASTION HOST (anfitrión baluarte)

Ordenador seguro que forma parte de un sistema de muro de seguridad y
corre aplicaciones que se comunican con el exterior de una organización.
BRIDGE (puente)
Ordenador que conecta dos o más redes y envían paquetes de datos entre
ellas. Los puentes operan a nivel de red física. Los puentes difieren de los
repetidores pues almacenan y envían paquetes completos, mientras que los
repetidores envían todas las señales eléctricas. Los puentes también difieren de
los ruteadores ya que se valen de direcciones físicas, mientras que los ruteadores
utilizan direcciones IP.
CLASS OF ADRESS (clase de dirección)

Categoría de una dirección IP. La clase de dirección determina la
localización de la frontera entre el prefijo de red y el sufijo anfitrión.
CLIENTE-SERVIDOR
Modelo de interacción en un sistema distribuido en el que un programa,
en una localidad, envía una solicitud a otro programa en otra localidad y espera
una respuesta. El programa solicitante se conoce como cliente, el programa que
atiende la solicitud como servidor. Es común que se estructure primero el software
cliente y después el servidor.
7
DOMAIN (dominio)
Parte de una jerarquía de nombres. Sintácticamente, un nombre de dominio
consiste en una secuencia de nombres (etiquetas) separadas por puntos.
ENCAPSULATION (encapsulación)
Técnica utilizada por los protocolos estratificados por capas en la cual un
protocolo de nivel inferior acepta un mensaje de un protocolo de nivel superior y
lo coloca en la sección de datos de su trama de bajo nivel. La encapsulación
implica que los datagramas que viajan a través de la red física cuentan con una
secuencia de encabezados de los que el primero proviene de la trama y red física,
el siguiente del Protocolo Internet (IP), el siguiente del protocolo de transporte, y
así sucesivamente.
FIREWALL (muro de seguridad)

Configuración de ruteadores y redes colocados entre la organización
interna de una red de redes y su conexión con redes de redes externas, con el fin
de proporcionar seguridad.
FLOW CONTROL (control de flujo)

Control de la razón de transferencia a la que introducen los anfitriones y
los ruteadores paquetes de datos en una red de redes, por lo general para evitar
congestionamientos.
FRAGMENTATION (fragmentación)
Proceso de dividir un datagrama IP en pequeñas piezas cuando deben
viajar a través de una red que no puede manejar el tamaño del datagrama; los
campos en el emcabezamiento IP especifican si el datagrama es un fragmento y,
de ser así, el desplazamiento del fragmento con respecto al datagrama original. El
software IP en el receptor final debe reemsamblar los fragmentos para obtener el
datagrama original.
HIERARCHICAL ROUTING (ruteo jerárquico)

Ruteo que se basa en un esquema de direccionarniento jerárquico. La
mayor parte del ruteo del TCPíIP se basa en una jerarquía de dos niveles en la que
una dirección IP se divide una parte de red y otra parte de anfitrión. Los ruteadores
utilizan sólo la parte de red hasta que los datagramas alcanzan un ruteador que los
pueda entregar directamente. Las subredes introducen niveles adicionales de ruteo
prárquico.
ICMP
Protocolo de Control de Mensajes de Internet. Parte integral de protocolo
de Internet (IP) que resuelve errores y controla los mensajes. Específicamente,
los anfitriones y los ruteadores utilizan el ICMP para enviar reportes de problemas
relacionados con datagramas que se devuelven a la fuente original que envía el
datagrama. El ICMP también incluye la solicitudréplica de eco utilizada para
probar si un destino es accesible y responde.
INTERNET
Físicamente, una conexión de redes de conmutación de paquetes
interconectadas por ruteadores, junto con los protocolos TCPíIP permite que la
red funcione como una sola red virtual extensa. Cuando se escribe con mayúscula
se refiere específicamente a la red global de Internet, conjunto de redes y ruteadores
que abarcan 61 países y utiliza TCPíIP para formar una sola red virtual cooperativa.
Webs con Photoshop
IP DATAGRAM (datagrama IP)

Unidad básica de información que pasa a través de una red de redes TCPI
IP. Una datagrama IP es a una red de redes lo que un paquete de hardware es a una
red física. Contiene las direcciones de fuente y destino juntos, así como los datos.
PACKET (paquete)
Se trata, en términos generales, de cualquier bloque pequeño de datos
enviado a través de una red de conmutación de paquetes.
PROTOCOL (protocolo)
Descripción formal de formatos de mensajes y reglas que dos o más
máquinas deben seguir para intercambiar mensajes. Los protocolos pueden
describir detalles de bajo nivel de las interfaces de ordenador a ordenador o del
intercambio entre programas de aplicación. La mayor parte de los protocolos
incluye descripciones intuitivas de las interacciones esperadas así como especifi-
caciones más formales, utilizando modelos de máquinas de estado final.
PARA SABER MÁs

Lo desarrollado en este capítulo se ha centrado en explicar los datos
necesarios para comprender cómo se produce la comunicación de datos en una
red sea cual sea las características de ésta. Sin embargo, la información aportada
ha sido considerablemente reducida a las necesidades requeridas dado las
características del libro. Por este motivo le invito a que consulte los libros que a
continuación procedo a detallarle, ya que la información aportada por éstos está
en mayor medida centrada en los temas que ha aquí se han tratado.
-SANCHEZ D. y CRESPO D.- Internet. Curso de iniciación.

Ed. Inforbook's. Barcelona.
-SANCHEZ D. y CRESPO D.- Irzternet en la empresa.

G u h profesional. Ed. Inforbook's. Barcelona.
La imagen tratada para incorporarla en una página Web ha de cumplir
ciertos requisitos. Ya sabemos lo que puede tardar en cargarse una imagen en el
vysualizador de nuestro navegador. Esto es debido a que un documento GZF
(Graphics Interchange F o m t ) , JPEG (Joint Photographic Experts Group) o
PNG (Portable Network Graphics) es y suele ser de mayor tamaño que cualquier
otro documento incorporado en una página Web. Como vemos, el sino que vive
una página Web viene determinado por la importancia que tiene la incorporación
de imágenes en una página, ya sabemos la gran información que puede contener
una imagen, y el tiempo que puede tardar en cargarse la misma, cuya visualiza-
ción puede llegar a ser el desespero del navegante que desea verla. Además del
tamaño del documento existen otros aspectos que han de tenerse en considera-
ción, como puede ser la compresión realizada en el archivo, la paleta selecciona-
da, incluso el diseño mismo de la página Web al igual que las imágenes y gráficos
que la contienen, pero esto ya lo trataremos en sus capítulos respectivos. En este
capítulo desarrollaremos todo lo relacionado a las características intrínsecas de
una imagen digital, de qué está constituida, la resolución, el tamaño de imagen, la
resolución de bits, etc. Y trataremos la relación de amor y odio existente entre
estos conceptos y la transmisión de datos, en este caso imágenes para la Web con
Webs con Photoshop
el fin de que seamos capaces de discernir el mejor tamaño de archivo, el mejor

tamaño de imagen, la resolución más adecuada e incluso el mejor diseño en relación
a las necesidades de rapidez de visualización que son requeridas en la red, sin que
por ello tenga que quedar menguada la calidad de los gráficos, imágenes e, incluso
la calidad del diseño. Todo ello lo conseguiremos combinando todos estos atributos
en su justo punto de equilibrio.
Consejo ...
Es recomendable que antes de leer esta capítulo haya leído el capítu-
lo anterior dado que lo aquí explicado está intimamente relacionado con las
transferencia de datos en la red y el funcionamiento de la misma.
IMAGEN DIGITAL
Es posible, sino más que probable que ya tenga conocimientos sobre las
características de la imagen digital. Sin embargo, creemos necesario realizar un
repaso a ciertos conceptos relacionados con las características que ésta posee.
Photoshop, como cualquier otro programa de tratamiento digital de imá-

genes describe el plano como una reticula de puntos, a cada uno de los cuales se
les denomina pikeles. Éstos asumen un valor tonal y se disponen a modo de
mosaico definiendo áreas cromáticas: las imágenes. Esta concepción determina
la manera de crear y representar la imagen.
Cadapíxel (abreviatura depicture element) viene determinado por lapro-

fundiúad de píxeles o resolución de bits, sea cual sea el modo en que desee
denominarlo. Es decir, el número de bits de información almacenados en cada
píxel. La profundidad de píxeles determina cuánta información de color existe
para cada píxel de archivo. Un píxel con una profundidad de bits de 1 tiene dos
valores posibles: sí y no. Traducido a colores sería blanco y negro. Con una
profundidad de 8 tiene de 28 a 256 valores posibles. Con una profundidad de 24
bits tiene de 224 a 16'7 millones de valores posibles.
Optimizar la imagen para Internet 35
Este modo de representación se extiende, también, a los dispositivos físi-

cos como el monitor, el escáner o el vídeo, por ello la calidad y la naturaleza de
éstos medios físicos y lógicos determinarán la representación. Cuanto mayor sea
el número de bits por píxel, mayores son las posibilidades de obtener los valores
deseados.
Aunque estos valores habrán de ser reducidos a una gama de 256 colores,
como máximo, una vez haya de ser exportada la imagen a la red. La determina-
ción del número irá en función de las características del documento en cuestión.
Por ejemplo, si debemos exportar una fotografía habremos de considerar como
prioritario que la imagen conserve la mayor cantidad de valores tonales posibles
(256 colores) y que ocupe el menor tamaño (reduciremos el mismo comprimien-
do el tamaño de archivo durante el proceso de conversión a la extensión JPEG,
por ejemplo), mientras que si se trata de un gráfico o imagen caracterizada por
amplias zonas de colores planos, no requerirá de un gran número de colores, por
lo que podremos reducir la resolución de bits tanto como sea posible.
Comprobamos lo importante que es adecuar la profundidad de pkeles

en un documento que ha de ser exportado a Internet. Ya que es un factor deterrni-
nante en el tamaño de archivo final y, por lo tanto, influirá sobre el mayor o
menor tiempo que éste requerirá para ser descargado en el navegador. Aunque a
esto hay que sumar lo congestionada que esté la red en el momento de ser
Wsualizado. No obstante, si el documento va dirigido a una red LAN este proble-
ma quedará en gran medida reducido.
nota ...
No hemos de confundir los bits con los bytes. Un bit (de la contracción
de la palabra inglesa binary unit, que quiere decir cifra binaria) es la unidad
de información que puede tomar uno de los valores: O o l . En los
microordenadores, los bits están agrupados de 8 en 8 para formar ~palabras~,
también llamadas bytes u octetos. Los microprocesadores que utilizan
«palabras»de 8, 16 o 32 bits son llamados microprocesadores de 8 bits, 16
bits y 32 bits respectivamente. Un byte es un grupo de 8 bits y representa
un carácter, en este caso se le llama igualmente octeto.
hay que saber..

Photoshop funciona con mapa de bits o bitrnaps. Los bitrnaps
son imágenes formadas por un número determinado de píxeles. Es decir, la
imagen está compuesta por infinidad de cuadrículas rectangulares, cada
una de las cuales con su valor tonal, de brillo, de color, de luminosidad, etc.,
son. en su agrupación, las que dan idea de una imagen visual.
El número de píxeles por pulgada

(ppi) determina la resolución de la
imagen. A mayor número de píxeles
por pulgada mayor resolución posee la imagen y en consecuencia mayor

calidad, pero, al mismo tiempo, mayor espacio ocupa en el disco duro. Aun-
que este aspecto no ha de preocuparnos en exceso dado que las resolucio-
nes que se utilizan en red son estándares y responden a las resoluciones de
los monitores (Macintosh la resolución es de 72 ppi con Windows la
resolución es de 96 ppi). Sin embargo. es aconsejable que diseñe sus pági-
nas Web con una resolución de 72 ppi con el fin de que todos los nave-
gantes, sean de Mac o de PC, visualicen los gráficos adecuadamente.
TAMAÑO DE IMAGEN Y RESOLUCIÓN

E N DOCUMENTOS PARA LA WEB
En este tipo de programas de mapa de bits el tamaño de la imagen y la
resolución está íntimamente ligado al número de píxeles. Sabemos que el tama-
ño de una imagen describe sus dimensiones físicas y que su tamaño se determi-
na enpheles, por lo tanto, su tamaño es fijo, lo cual nos permite saber aproxima-
damente las dimensiones de la imagen. La resolución es, como ya sabemos, la
densidad de píxeles por pulgada que forma una imagen, por lo tanto, el espaciado
de los píxeles afecta al tamaño de la imagen y los detalles de la misma.
Aquí mostramos unos ejemplos ilustrativos de cómo varía el tamaño de

la imagen cuando son modificados ciertos valores en el cuadro de diálogo Tama-
ño de imagen.
La ilustración
posee, según
los valores de-
terminados en
Tamaño de la
imagen unas
Dimensiones
de píxeles: 890
K; una Anchu-
ra: 425 p. y al-
tura 714 p. Y
una Resolución
de 72 ppi. La
Anchura es de
14'99 cm y la
Altura es de
25'18 cm. Ob-
Figura 1. serve en que
Ilustración, cuadro tamaño apare-
de dialogo Tamaño ce visualizada
de imagen y escritorio la imagen en el
de Photoshop. escritorio de
Photoshop.
Observe que si aumentamos o reducimos la resolución del documento en

cuestión, los valores de las dimensiones de los píxeles varían. Esto hace que la
imagen aparezca aumentada en el monitor, puesto que hemos aumentado sus
dimensiones de píxeles de la imagen y la resolución del monitor es invariable,

esto hace que aparezca aumentada. Sin embargo, a nivel de impresión este au-
mento se relativiza al tamaño que ocupa el documento en el disco duro. Aspecto
éste realmente importante y que debemos tener en consideración para documen-
tos que vayamos a exportar a la Web. Para solventar en cierto modo este inconve-
niente podemos en algunas imágenes recurrir a modificar la resolución sin alterar
las dimensiones de impresión. Esta variante produce un aumento en el documen-
to de impresión, pero no modifica las dimensiones en píxeles del documento y, lo
que es más importante no hace que varíe el tamaño de archivo o, dicho de otro
modo, las dimensiones de píxeles del documento. Este último proceso puede
resultar realmente interesante cuando tenemos documentos en los que la resolu-
ción de la imagen es inferior a los estándares utilizados en la Web, es decir 96 ppi
(Windows) y 72 ppi (Macintosh),
De lo dicho podemos deducir que tendremos que saber adecuar las di-
mensiones de los documentos para optimizar al máximo el tamaño de archivo,
sin perder definición y detalle en la imagen y al mismo tiempo someterlo a las
rigurosidades de tamaño impuestas por el monitor para una correcta presentación
en el visualizador de nuestro navegador.
Variando la Re-
solución de 72
ppi a 92 ppi
manteniendo
Tartbobmpranui las proporcio-
nes no altera el
A ~ - 1. 19 tamaño de im-
LW.LF,,. -1 m presión tal co-
A &,mr w;mrrn
mo muestra la
U yo)c a m i i t a bmi ilustración. Sin
embargo, apa-
. %L* . - . - ..
..-
=. .
.=. ."
i
1
..
1.7: j
1
F , . .
.
:A
'
rece modifica-
do el tamaño
1 ,:;i.i de archivo que
pasa a ser de
lf-:
E-1, 890 K a 1'42 M.
.l'
.'. Esto hace que
-1 \
Figura 2.
.i; el tamaño de
--
-. - visualización la Cuadro de diálogo
- i
Tamaño de imagen,
escritorio de escritorio de Photoshop
Photoshop va- e Imagen.
- -
En este caso he-

mos variado l a
resolución igual-
mente de 72 ppi a
92 ppi. En este
caso hemos vin-
culado exclusiva-
mente el cambio
de resolución al
tamaño de impre-
sión. Esto hace
que se no altere
el tamaño de ar-
chivo, por lo que
permanece en
890 k,pero si que
modifique el ta-
Figura 3. maño de impre-
Imagen, cuadro de sión. Observe co-
diálogo Tamaño de mo se mantiene
imagen y escritorio el tamaño de vi-
de Photoshop. sualización en el
escritorio.
Es importante que el detalle de la imagen no quede menguado, puesto

gue para incluir el documento con posterioridad a la Web deberá ser indexado, lo
que provocará una reducción drástica de colores y, en consecuencia, una perdida
del detalle. Este consejo es importante que lo tenga presente si ha de exportar
fotografías más que gráficos o imágenes que contengan poca información ya que
es en éstas donde se acentúa el efecto de pérdida del detalle.
Como ya se ha indicado trabajando con imágenes para Internet no intere-

sa tanto el tamaño de impresión como las dimensiones de píxeles del documento,
aunque, como es lógico, uno dependerá del otro. Sin embargo, y lo que es real-
mente importante es que los documentos deben estar en consonancia con las
resoluciones del monitor dado que es en éste donde se va a visualizar el docu-
mento y si posee unas dimensiones de píxeles o una resolución inadecuada a la a
la resolución del monitor se pueden producir deformaciones inesperadas. Por
este motivo es realmente importante que adecúe sus imágenes o gráficos a los
estándares que hay en el mercado. El tamaño de visualización en monitores 12"
y 14" es de 640 por 480 píxeles, de 800 por 600 píxeles para monitores de 15" y
17" y 1024 por 768 píxeles en monitores de 17"-21" como norma.
Estos tamaños de visualización están relacionados con los estándares grá-

ficos soportados por los monitores. Cada monitor acepta un rango determinado.
Por ejemplo, un monitor Nec MultiSync 3V puede aceptar las siguientes rasgos
gráficos: VGA 640 por 480 a 60,72 y 75 Hz; Super VGA 800 por 600 a 56,60 y
72 Hz; MAC 11 y Quadra 640 por 480 a 67 Hz; 8514/A y XGA a 1024 por 768
entrelado; XGA-2 a 1024 por 768 y 60 Hz y 1024 por 768 en no entrelazado a
60Hz. Hoy por hoy podemos elegir entre una amplia variedad. Como es lógico,
cuanto mayor sea el rango que admita el monitor más resoluciones podemos
visualizar en la pantalla. La selección de una resolución irá en función de las
necesidades del momento.
Las resoluciones de los monitores han de tenerse en consideración a la

hora de diseñar una página Web. mies, no todo los navegantes verán la página tal
como la vemos nosotros. Por este motivo, es de esencial importancia tener en
cuenta las resoluciones en la cuales trabajamos. Por ejemplo, si su monitor está
adaptado a unas resoluciones de 1024 por 768 píxeles su página Web vista por un
navegante con un monitor adaptado a unas resoluciones de 640 por 480 píxeles
será ampliada en tamaño, es decir aparece mucho más grande, por lo que parte de
la información de la misma puede desaparecer del campo de visión.
-.X
).
b c h m L&dn &I 118 Earorlor A&
8 C
sud^ Fa 11 Visor de Microsoft l.
Figura 4m
Explorer, recuadro de
",- Lu "- - -- M .l~hYw. m "la m ~ & i a rw w w ~9

r.- mi w u c ur WWLUO
,
previsualizaciónde re-
solución del monitor y
Área de escritorio.
25 de Diciembre de 1997 8 34 P M
y&z&q!&-
fEUCW f- 1 b p k d e l día,
f
-
-
-- *
- .,
LT
34"- Jl 2. J
Tarifas D R f ?
-- 1
Notlclns
2 -? .d. F. 2.
-
'1
La resolución seleccionada para el monitor es de 640

dd sscritw,n I
por 480 píxeles. Observe que cuando elegimos este
tipo de resolución las imágenes son ampliadas en la
Menos ; j' ''
......U .
:
'.' .'; . Más
,,............... .
pantalla. Para verla en su totalidad deberemos recu- 640 por 480 píxdm
rrir a mover los reguladores.
Optimizar la imagen para Internet ,
Figura 5.
Visor de Microsoft l.
Explorer, recuadro de
] previsualizaciónde re-
- -
solución del monitor
25 de Diciembre de 1997 8:28 P.M
\ y Área de escritorio.
Con una resolución de 800 por 600 píxeles las imáge- A,g, I
nes aparecen centradas y en su totalidad. Es el más Memis - ' Más
idóneo para trabajar, pues nos sitúa entre los dos tipos ,
de resolución estándares utilizados. Para verla en su 800 por 6m pixeles
-
totalidad no es necesario mover los reguladores.
Figura 6. I-.~ . Ir*.

,.-. ,... y --
*m- Ve up
'J
Visor de Micro: -
L-A.
7
Li
,.., ,.,, -). ir-- +
,:,:.
'-
: ; 1
E
- ..
.P
.
Explorer, recuad . ..... . .. ... . A ,Sr,M .?S- .h.4 íi'inri-r ':iq.i.r
previsualización clc ,=- d
solución del monitor ~ ~ ~ t . b F ' l.' d r DiriiJlr <Ir "],. 8 19 P SI
y Área de escritorio. - --
lELlCLF IILFTM kl2._iA 4
34M'rJ
Terpr
Sd&r
or*m
m
i.,,, 41Ai
I 1
Si configuramos el monitor a una resolución de 1024

Area dei escritorio 1 por 768 píxeles las imágenes aparecen reducidas y
Menos Más
, S en su totalidad. Se hace difícil la lectura de letras de
1024 p a 768 p i d e s cuerpo pequeño y normal. El conjunto de la compo-
!
sición nos aparece descentrado hacia la izquierda.
hay que sabor...

Recuerde que debe adecuar las resoluciones de sus proyectos para la
Web en función de las resoluciones establecidas (72 ppi o 96 ppi respecti-
vamente) y las configuradas en su monitor: 640 por 480 píxeles, 800 por
600 píxeles o 1024 por 768 píxeles.
U En este caso hemos

Drnsiisiunss de pixel 1 371ul (era 89OKJ
A m b a 1 11 m modificado los valo-

res de Anchura: 800
~ I X ~ I S
Cancelar 1
Altura 1 1 pixair A píxeles y Altura:
1 600 píxeles en el
Tamak de epresion apartado de Dimen-
Anchura siones de píxeles.
11- Con estos valores la
Et. ollr'lolt
r Mantener propnrcmn
( pixelr/prilgada 1]
I imagen ocupará en
su totalidad el cam-
PO de visión del mo-
R yolver a rno:trar lo imagen. 1 Bicubica I]
nitor, ya que hemos
establecido los mismos valores con los que tenemos configurado el

monitor, es decir, 800 por 600 píxeles. Por otro lado. la resolución esta-
blecida para el documento es de 72 píxeles por pulgada, tal y como se
establece. Este aumento de las dimensiones se realiza mediante una
interpolación. es decir. se crean píxeles que contienen información relativc
a dos píxeles consecutivos.
Si en el documento ha de modificar la resolución y las dimensio-

nes de píxeles, proceda a introducir en primer lugar la resolución y, en
segundo lugar, las dimensiones de píxeles del documento. Si no lo hace en
este orden al cambiar la resolución las dimensiones del documento serán
modificadas de nuevo. En este caso, /a imagen será transformada al no man-
tener las proporciones del documento.
Para saber las resoluciones a las que puede adecuar su monitor

simplemente léase el folleto proporcionado por el fabricante. Del mismo
modo asegúrese de las características de su tarjeta gráfica. Para modificar
las resoluciones del monitor diríjase a l Panel de control y de éste seleccione
el icono Pantalla.
Ya hemos dicho que la resolución de una imagen define la cantidad de

píxeles por pulgada @pi).Ésta es la medida con la cual nos hemos de acostum-
brar a trabajar desde ahora para realizar diseños para la Web junto con la resolu-
ción del monitor. Esta Última define el número de puntos o píxeles por unidad de
salida. Se mide en puntos por pulgada (dpi)o píxeles por pulgada @pi). La reso-
lución del monitor determina el tamaño de la imagen en pantalla. Por ejemplo,
una imagen con una resolución de 144 ppi se visualizará a un tamaño doble de su
tamaño real en un monitor de 72 dpi. Esto quiere decir, que si usted está trabajan-
d o con un monitor de 96 dpi, en un monitor de 72 dpi se verá más grande.
Figura 7.
Escritorio de
Photoshop.
Este tipo de reglas nos

permiten saber las di-
mensiones en píxeles
del documento. Gene-
ralmente son móviles,
esto quiere decir que
no se incrustan en el
documento, por lo que
si lo ampliamos o lo re-
ducimos éstas se man-
tienen invariables.
Webs con Photoshop
Como puede apreciar diseñando para la Web no ha de hacer gran caso a

las dimensiones en cm de la imagen, por lo que las reglas que dispone el progra-
ma no nos serán de gran utilidad. En el mercado existen reglas, que podemos
incorporar al escritorio de Photoshop, para medir los documentos por píxeles.
Resultan de una gran utilidad para controlar las dimensiones en píxeles del docu-
mento, sobre todo cuando aún no estamos lo suficientemente familiarizados con
este tipo de medidas.
EN DOCUNENTOS PARA LA WEB

El tamaño de archivo de una imagen es proporcional a su resolución. Ésta
determina la información que ha de ser almacenada. Las imágenes con más deta-
lle (mayor resolución) ocupan un mayor espacio en el disco duro. Otro aspecto
que incrementa el tamaño del archivo es el tamaño real del documento. Cuando
éstos son tratados para ser colocados en red hemos de tener en consideración el
tiempo de transmisión de la información y el tiempo que se requiere para descar-
gar un gráfico en el browser. Así observamos que a medida que el documento
aumenta de tamaño, mayor es el tiempo que requiere para ser descargado. El
método utilizado para disminuir el tamaño de un archivo consiste en reducir el
7 número de colores contenidos en la imagen, es decir, convertir el documento a
imagen de 8 bits. Por otro lado podemos comprimirlo moderando sustancialmente
el tamaño del mismo. No todos los formatos de archivo son capaces de compri-
mir la información. Además no todos los navegantes disponen de módems rápi-
dos, esto provoca que un gran número de ususarios visualicen los gráficos conte-
nidos en las páginas lentamente. Así que ya sabe, lo realmente importante es que
optimice el tamaño del archivo al máximo, no excediendo de 40K, para que resul-
te lo más efectivo posible.
RAPIDEZ DE TRANSMISIÓN EN LA RED

Y LA CALIDAD REPRESENTACI~N
Los módems actuales pueden transferir información a velocidades de 9600
bits por segundo, 14400 bps, 28800 bps y 33600 bps entre otros. Si se posee un
Optimizar la imagen para Internet 4,
módem que transmite información a una velocidad de 9600 bps la información

será transferida en el triple de tiempo que con un módem que transfiere la infor-
mación a 33600 bps. La mayor o menor velocidad de transmisión de datos depen-
de del ancho de banda, aunque también está condicionada por la banda limitada
de frecuencias que pueden transmitirse. Por ejemplo, si transferimos información
con un ancho de banda de 4 MHz podemos enviar información a una velocidad
de 2 Mbps. Si el ancho de banda es de 8 MHz la velocidad de transferencia es de
4 Mbps y así sucesivamente.
Los módems convierten señales digitales (hileras de bits) en señales

analógicas (las utilizadas por las líneas telefónicas) para ser transmitidas
por un canal de comunicaciones y, de nuevo retransformar las señales
analógicas en digitales. Mediante un microprocesador podemos comunicar-
nos con otros ordenadores, intercambiar información o consultar bases de
datos.
Una señal analógica es una onda electromagnética que varía conti-

nuamente. Dependiendo del espectro, la señal se podrá propagar por una
serie de medios. Una señal digital es una secuencia de pulsos de tensión
que se pueden transmitir a través de un cable; por ejemplo, un nivel de
tensión positiva constante puede representar un 1 binario y un nivel de ten-
sión negativa constante puede representar un O.
Kilobyte o Kbyte corresponde a 21°= 1 .O24 bytes. Designa la capa-

cidad o potencia de almacenamiento de la memoria central de un ordena-
dor. En código ASCll el número máximo que puede almacenar en memoria
es de 8 bits. ASCll es el código estándar americano para el intercambio de
información. Permite definir todos b s caracteres alfanuméricos utilizados
en inglés y ciertos caracteres gráficos.
Webs con Photoshop
1 bit = puede tomar el valor 1 o el valor O

1byte= 8 bits
Kilobyte (Kb)= 1024 bytes
Megabyte ( M b )= 1024 Kb
Giga byte (Gb)= 1024 M b
l
Con una velocidad de transmisión de 2000 bits por segundo y
un ancho de banda de 1700 a 2500 Hz la representación es bastante
buena. Si el ancho de banda es de 4000 Hz la representación es buena.
A lo dicho hasta el momento hay que añadir que las líneas de transmisión
utilizadas en Internet en la actualidad soportan velocidades de 54 Mbps (54000
bps). Como es lógico las velocidades de las líneas de transmisión (capacidad de
canal) y las velocidades de conversión de los módems han de ir a la par con el fin
de aprovechar al máximo las cualidades de ambas. No obstante, y, aunque a me-
dida que transcurre el tiempo se van adecuando las velocidades de ambos a las
necesidades requeridas por los navegantes, siempre corremos el riesgo de que la
calidad de representación no sea lo todo óptima que deseemos. Esto se debe a
diversos factores, entre ellos está el ruido generado durante la transferencia, es
decir, incluir señales no generadas por el emisor; otro factor importante es el
denominado efecto de distorsión de retardo, el cual genera que los distintos com-
ponentes en frecuencia de señal lleguen al receptor en instantes diferentes.
Con el tiempo se va perfeccionando e incrementando la capacidad del

canal por lo que los datos pueden ser transmitidos a velocidades mucho mayores.
Esto se debe a que se aumenta la velocidad de envío de datos, el aumento del

ancho de banda, la reducción del ruido y de la tasa de errores generados durante
la transmisión. Varios de estos factores son especialmente importantes a la hora
de elaborar una página o documentos para la Web, ya que permiten una mayor
complejidad en el diseño y un incremento sustancial en elementos gráficos, un
mayor número de mapas de imagen, sonidos, etc. El gran inconveniente todavía
a resolver es la creación de animaciones complejas. Hoy por hoy han de estar
compuestas por muy pocos frarnes lo que limita las posibilidades creativas de un
buen diseño.
nota ...
Para saber a las velocidades de transferencia a las que funciona su
módem simplemente consulte el manual aportado por el fabricante.
Figura 8. s., " . -" .F .

Visores de Microsoft ,
,
A: . 9
lnternet Explorer
respectivamente.
Estas ilustraciones son lo suficientemente

representativas como para comprender
la importancia de las imágenes en una
página Web. Observe, los recuadros va-
cíos son gráficos que han de visualizarse.
Esta página consta de un qran número
por la visión global de-la página se
retarda sustancialmente en el tiempo.
Uno de los factores posibles en el retar-
do sea el tamaño de archivo de los gráfi-
cos. La gran mayoría de las imágenes
son vínculos que nos trasladan a otros
documentos enlazados con la página
principal. El tiempo transcurrido en apa-
recer por completo la página ha oscilado
entre los 10 y 12 segundos, siendo des-
cargados los gráficos progresivamente.
La primera en aparecer ha sido la que
contiene el logotipo de la Warner Bros.
'm
i
-
r -
,'
Lrn
-F
i . )*
.o
F.d.
- ,J .-
- .........&.A. 2-., ,-,-.,-. a' En la Web encontramos infinidad
de vínculos que nos envían a
otros documentos relacionados.
En muchos casos estos son tex-
tos que expecifican lo incluido.
Optar por mapas de imagen para
estos fines incrementa el tiempo
de presentación aunque enrique-
ce el diseño de la misma. Si el
diseño es bueno podemos jugar
con el tiempo de descarga como
si se tratase de una animación o
. .+ ... ' un fundido haciendo aparecer es-
tratégicamente las imágenes.
Figura 9.
Visores de Microsoít
lnternet Explorer
respectivamente.
- El tiempo requerido para descargar la

página de Cornpusen/eha sido menor.
En parte debido a que la mayoría de la
información del documento principal
está contenido en el texto. La anima-
ción enmarcada sirve como foco de . . ".--
ni, <nI I . 4 ,
atención para trasladar la atención al -,ilr,,.n
texto circundante, al tiempo que sirve

de vínculo y nos traslada a un documen-
to enlazado.
Es lógico que la página de la Warner
cuide más el contenido visual -presen-
tando personajes sobradamente cono-
cidos y populares- ya que se trata de
una empresa dedicada a la creación de
documentos visuales. Mientras que
Cornpuserveestá en un sector comple-
tamente distinto por lo que el diseño se
centra en aspectos más técnicos y en
realzar las últimas novedades.
Las imágenes que han de incluirse en la Web deben presentar varios
requisitos, algunos de eHos han sido ampliamente detallados en el capítulo anterior.
%n estas páginas hablaremos de los diferentes formatos de archivo más comunes
utilizados en la Web como son GIF, JPEG o PNG y, por otro lado, concluiremos
con la elección de una paleta de color adecuada según las necesidades del momento.
Los archivos más comunes empleados en la World Wide Web son el

Formato de Intercambio de Gráfios o también llamado GIF y el formato JPEG
que debe sus siglas a sus creadores Grupo unido de Expertos en Fotografía.
Aunque hoy en día está siendo muy utilizado el formato PNG que surge como
alternativa al fsimato GZF. Éste a diferencia del anterior no limita el número de
colores a 256, además de realizar un tipo de compresión que no provoca pérdidas
en la calidad de la imagen.
Que los formatos utilizados para la Web dispongan de algún tipo de

compresión no responde a una coincidencia casual. Estos archivos son los más
idóneos y los que son aceptados por los navegadores más importantes y recurridos
en la actualidad como son Explorer y Netscape. Sin embargo, todavía existen en
Webs con Photoshop
el mercado programas de navegación que no admiten la visualización de gráficos,

por lo que deberemos tener presente en nuestros diseños a los usuarios que usen
este tipo de software, detallando la información fundamental en forma de texto.
FORMATO ELEGIR?
La elección del formato adecuado siempre nos proporcionará mejoras en
la calidad de la imagen y un tamaño de archivo concordante con las característi-
cas del documento. Como ya se ha dicho, cada uno de los formatos surge para ser
aplicado a un tipo de documentos específico, por lo que siempre será bueno te-
nerlos en cuenta.
Archivo GIF
Aunque es el formato más comúnmente empleado para dar salida a imá-
genes que han de ser incluidas en páginas para la Web no siempre resulta el más
idóneo. El formato adoptado por CompuServe como estándar para la compresión
de imágenes de 8 bits resulta realmente interesante en proyectos en los que las
imágenes consten de zonas amplías de color y reducidas degradaciones. Resulta
especialmente útil en gráficos y dibujos en blanco y negro, en imágenes que
contengan una paleta reducida de colores o en logotipos e iconos que cuya carac-
terística principal sea un alto contraste.
: . . i i < . I . ,,,.
a Figura 10.
.- -.-.... ,;: ,',. a
L . ;
C? ; ] í.3 <')
Visor de Microsoft
:,Y
+.A -- , ',
L,, .,.1,: 8. ,n, i- re,. rr.;
=. r r - . p-
Q,h
, =,*. ; Y.. L.- .I,X .,., ,.-, .).;-.l.i :ll. . .

<a1. .>V. n
7 lnternet Explorer.
La página de Disney está crea-

da esencialmente por imágenes
con amplias zonas constituidas
por un solo color, siendo la
.-
?-
i -' gama utilizada considerable-

i4
, <
.-,
L
-.
A
mente reducida. En este caso,

-wrnsF - HIGHLIGHTS FOR JANUARY 7 , 1 9 9 8
TODAY mISN€Y POOH OICITAL POSTCARDSI

" 7
el formato elegido es, con toda

-+ % , ' probabilidad GIF
Formatos de archivo
... .d.,"i
,,-. ,,.3 3 . ,:-t-,
Figura 11. Llmr ?m ,,. ti
ta
(-m S*
..-
Visor de Microsoft ' 7 A, ,O ,-*.
! )
E =
,a
,
'>
ín; % --
tin.*i;.m
lnternet Explorer. -m%,...-.
i
La página de Pedólogues está

constituida por un número muy
reducido de colores. En este
caso se ha utilizado con toda
probabilidad formato GIF, con
una paleta de 2 bits, es decir, 4
colores: negro, verde, azul, na-
ranja. Lo que facilita su rápida
presentación.
Una de las cualidades más ventajosas de este tipo de archivo a diferencia

de JPEG y PNG radica en la posibilidad de controlar las zonas transparentes de
la imagen e incluso crear documentos GZF transparentes, animaciones GZF y
entrelazados. Este tipo responde al tipo de GZF89a a diferencia de su hermano
GZF87a conocido como CompuServe GZF. Photoshop incorpora un comando
que permite llevar a cabo este tipo de archivos, sin embargo, para guardar o car-
gar cualquiera de los dos archivos ha de hacerlo mediante la extensión GIF.
Ciertamente, en muchas ocasiones habrá de incorporar gráficos a una

página Web que deban mantener ciertas áreas que no contienen píxeles como
transparentes con el fin de ver a través de ellas lo contenido en el fondo. Esto
suele suceder con tipografías en formato gráfico y creadas para la ocasión, logotipos
o en según que tipo de animaciones; aunque su utilidad puede ser de lo más
variada, como por ejemplo la creación de sangrados. El método más extendido es
incorporar un documento GZF completamente transparente de 1 phel y variar el
tamaño en píxeles según sean las necesidades.
En Photoshop dispone del comando GZF89a Export ubicado en el

submenú Exportar del menú Archivo. El cual le permite de un modo rápido y
eficaz convertir documentos RVA en archivos de color indexado GZF, pudiendo
especificar las zonas transparentes del mismo, si es el caso.
Consejo ...
Para crear un documento completamente transparente y utilizarlo
como sangría de otros documentos contenidos en la página. Éste siem-
pre ha de aparecer después de la imagen en cuestión. Incluya en los atribu-
tos de altura y anchura de la imagen, cuando esté trabajando con HTML en
la etiqueta <IMG>, el número de píxeles que desee que ocupe. Los valores
pueder ir modificándolos. Por ejemplo, puede programarlo en un principio
con un valor de 1 píxel para que sea imperceptible y, posteriormente añadir
el número de pixeles necesarios para realizar el sangrado.
- Siempre que tenga que incluir transparencias en un documento para

la Web, éste ha de tener el fondo transparente. Recuerde activar la
opción Tranparente cuando configure un nuevo documento.
I
Siempre es más aconsejable que para estos casos utilice documentos
nuevos UVA con fondo transparente.
Recurriremos un canal alfa, una transparencia de capa o el Cuentago-

tas para incluir transparencias en el documento RVA. Seleccionaremos las partes
del documento que deseamos excluir enmascarándolas. Si el color que ha de
aparecer es un color plano, puede cargarlo como máscara especificando sus valo-
res en el Selector de color de Photoshop en el cuadro de diálogo de Opciones de
Exportar GZF89a. De este modo podemos hacer que ciertos colores contenidos
en un documento aparezcan como transparentes al ser colocados en la Web.
Formatos de archivo 53
Figura 12.
.....; 0
n de Photoshop, paleta
Canales y cuadro de
diálogo Opciones de
exportar GIF89a.
Transparencia desde máscara
(Por defecto]
Color de índice de
1
Despues del proceso de
enmascaramiento, me-
transparencia diante una selección previa
Cargar de las zonas deseadas,
previs"zarl
aparecerá como máscara
especificado en la paleta
Paleta: - Canales o en la paleta
Colores: E r I Capas según el sistema
utilizado. A continuación,
guardamos el documento
[J Entrelazado r
- como GIF89a con el fin de
, conservar los datos relacio-
El color que parece por defecto es el gris del Nestcape: nados la Vancm
192 rojo, 192 verde y 192 azul. parentes de la imagen.
~1 .~.
I II I . I I
En este caso, queremos
que parezca el color del
fondo por lo que pulsamos
sobre el recuadro de color
para incluirlo indicando los
valores correspondientes.
En el documento GIF apa-
rece el color que se verá
como transparencia en el
documento Web.
Si se trata de un documento indexado en el cual desea crear zonas

transparentes simplemente hemos de pulsar el comando GIF89a Export y, en el
cuadro de diálogo Opciones de Exportar GIF89a, activar los colores que desea
Webs con Photoshop
que sean sustituidos por el color de transparencia, o bien mediante el Cuentagotas

seleccionarlos directamente en la previsualización de la imagen.
0
1. 1
-
Fiaura 13.0
Nivel de cuadro de diálogo

Opciones de Exportar
GIF89a.
En la paleta que aparece en la parte in-

ferior del cuadro hemos marcados los
colores que deseamos sean sustituidos
por el color de transparencia elegido.
Cobres m l pakllU-
Otro método puede ser pulsar sobre la
1 imagen y seleccionar directamente de
En algunos proyectos deberá trabajar con una paleta muy reducida de

colores, por ejemplo de 3 bits (8 colores) e incluso de 2 bits (4 colores). En la
mayoría de casos lo más recomendable es que no active, mientras realiza el traba-
*
jo, la opciónSuavizado. Ésta está presente en la mayoría de las herarnientas como
opción a activar en su paleta Opciones correspondiente. Cuando suavizamos los
bordes de una selección o capa, Photoshop crea una transición gradual evitando
un cambio brusco constituido por los colores de la imagen.
Aquí mostramos dos ejem- Figura 14.
plo significativos de lo ex- Documentos
plicado. En la ilustración de Photoshop
superior no se ha activado respectivamente.
la opción Suavizado inclui-
dos en el cuadro de diálo-
go de Texto, mientras que
el
; en la ilustración inferior si
hemos activado dicha op-
ción. Cuando las imágenes
finales hayan de contener
1 ,
POCOS colores es aconse-
jable que no la active.
Formatos de archivo
Esto es importante que lo tenga presente, pues al convertir el documento

a indexado reducimos la paleta, si la reducción es drástica los colores utilizados
para evitar los bordes dentados pueden no estar incluidos en la paleta creada
produciendo una distorsión y un evidente empobrecimiento de la imagen.
Elección de paleta y compresion GIF

La elección de una paleta acotada va en consonancia, con una adecuada
calidad de imagen. Como ya sabemos, el formato GIF nos obliga a reducir la
imagen a 256 colores. Sin embargo, es aconsejable seleccionar una profundidad
de color idónea para cada trabajo. Esto reducirá considerablemente la información
contenida en el documento evitando tamaños de archivo altos y un retardo
innecesario en la visualización de las imágenes en el visor de cualquier navegador.
nota ...
Si trabaja con las paletas de los exploradores Explorer o Nestcape
sus proyectos constarán como máximo de 2 16 colores.
1.
Photoshop dispone de un amplio surtido de paletas con las cuales puede

reducir los colores del documento en cuestión. Aunque como es lógico lo más
aconsejable es proceder a disminuir los colores que contiene la propia imagen
reduciendo los mismos al menor número posible dentro de los 256 colores que
puede albergar. En este caso, elija Adaptable. También es probable que la imagen
tenga 256 colores o incluso menos tras haber aplicado algún tipo de efecto, como
por ejemplo posterizar la imagen reduciendo significativamente los tonos. En
este caso puede seleccionar la opción Exacta, la cual aparecerá activa. La paleta
Web trabaja con 216 colores, siendo éste número el mismo que el de las paletas
del Explorer y Nestcape. Ésta es la paleta más utilizada en las páginas de Internet.
Sin embargo, según las características de su proyecto la imagen puede quedar
significativamente alterada. Si ha estado tratando la imagen empleando la paleta
del sistema (Windows o Macintosh) lo más recomendable es que seleccione la
opción Sistema (Macintosh) o Sistema (Windows) respectivamente.
Webs con Photoshop
Por otro lado, la paleta Ungorme le proporciona una paleta que contiene
una apurada y uniforme selección espectral de colores. Puede dar buenos resultados
si la imagen de la que se parte contiene una rica y variada información en color.
Si por el contrario se trata de una imagen pobre de color puede sufrir importantes
alteraciones de tono.
Si está convirtiendo una serie de imágenes las cuales han de contener la

misma paleta de color, porque están todas ellas contenidas en una misma página
Web, por ejemplo. Puede utilizar la opción Anterior para agilizar el proceso,
sobre todo cuando se trata de paletas creadas a medida. Por último, puede crear
sus paletas conA medida. Uno de los métodos para crear la propia paleta es haber
rastreado previamente la imagen e ir seleccionando los colores más representativos
de la misma y tomar nota de sus características para poder incluirlos en la paleta
A medida. O bien, si ha estado trabajando con las muestras de color incluidas en
la paleta Muestras tomar nota de las características de dichos colores.
Normalmente, esta opción es muy útil cuando los trabajos están acomodados a
colores especificados por nosotros mismos o tendemos a trabajar con muestras
de color determinados debido a que permite mantener los rasgos cromáticos de
los mismos. Sobre todo si se ha estado trabajando con una escala no superior a los
256 colores.
Observe que ciertas paletas permiten variar la profundidad de color y

especificar el número de bits por píxel que contendrá la imagen. A mayor número
2
de bits, mayor número de colores que puede contener la paleta en este caso, para
ser visualizados. Al trabajar en imágenes de 8 bits, los tres canales de color están
unificados en un sólo canal, por lo que el máximo de colores que se obtienen es
256 colores. Si selecciona una profundidad de 3bits/phel (23=8)el máximo de
colores que podrá contener la paleta será de 8. Si por ejemplo selecciona 7bits/
phel (27=128)el máximo de colores que podrá contener la paleta será 128. Sin
embargo, observe que las características de configuración de cada paleta restringe
la profundidad de color a las que en cada caso permanecen activas. Determine en
Profundidad de color y en Colores las características cromáticas de la imagen.
Los tipos de tramados existentes nos ayudan a suavizar las zonas donde
se han producido pérdidas de color para imitar mediante los colores de la paleta
los colores sustituidos en la reducción. El cuadro de diálogo Color indexado
consta de tres opciones donde poder elegir. Difusión calcula el valor cercano
difuminándolo en la trama, siendo este método menos preciso que Motivo,
el cual reconstruye los motivos mediante píxeles generados aleatoriamente
simulando de este modo los colores eliminados en la conversión. Por último,

puede optar por Ninguno para no realizar tramado, lo que ocasiona áreas de
colores planos con transiciones bruscas en la imagen a modo de postenzación.
Sin embargo, acertar el número de colores en muchas ocasiones puede

resultar una ardua tarea. Por este motivo en esta apartado nos detendremos en
crear una tabla ilustrativa que nos sirva para examinar como se visualizan imágenes
fotográficas, dibujos y colores planos variando el número de colores seleccionados
con el fin de comprobar las alteraciones que sufren y el tamaño que ocupan.
Los cambios producidos en un documento G I F siempre vienen

determinados por una inadecuada reducción de colores, ya que la compresión
LZW no provoca pérdicas de calidad en la imagen. No obstante, resulta más
adecuado en documentos que contengan amplias zonas de colores planos, ya que
la variante del algoritmo LZWresulta idónea en la compresión de datos repetitivos.
Por lo que en una imagen que contenga una gran variedad de matices en zonas
reducidas, éstas puedan aparecer perceptiblemente alteradas.
Según el sistema que utilice para

indexar la imagen el cuadro de diálo-
- go le proporcionará un tipo determi-
nado de opciones de paleta. Si lo lleva
a cabo mediante el comando Color
indexado de submenú Modo las
paletas presentes son más variadas
que si recurre al comando GIF89a
Export del submenú Exportar.
Si ha de incluir un color de trans-
parencia, lo más razonable es que
cargue su propia paleta. Esto pue-
de hacerlo utilizando el comando
Cargar visible en el cuadro de diá-
logo GIF89a Export. Le permite
cargar tablas color y muestras
existentes o creadas por usted.
Webs con Photoshop
Observe como los resultados que se obtienen con una paleta adaptable
son relativamente mejores que con una paleta uniforme. Por contra los tamaños
de archivo son un tanto mayores con la primera opción. Así nos encontramos que
unapaleta adaptativa de 8 bits (pág. 60) con tramado de difusión el tamaño es de
14,3 KB en el primer ejemplo y de 13,s KB en el segundo; mientras que con la
opción paleta uniforme de 8 bits (pág. 65) con tramado de difusión es de 10,s
KB en el primer caso y de 8,15 KB en el segundo. Observando que afecta en
mayor medida la pérdida de calidad a la fotográfica que al dibujo, acentuándose
en las zonas de mayor detalle del fondo marino y no siendo tan perceptible en la
gran masa de color azul correspondiente al agua. Si comparamos estas dos pale-
tas con los resultados obtenidos con la paleta web (pág. 65) con tramado de
difusión comprobamos que la calidad obtenida en sendos ejemplos resulta ser un
intermedio entre las paletas adaptable y uniforme y, como es lógico, el tamaño de
archivo resulta ser un intermedio, siendo para la el dibujo de 9,56 KB y para la
fotografia de 10,6 KB.
En el caso de no utilizar tramado con la paleta adaptable de 8 bits (pág.

69) los cambios no son excesivamente significativos con relación a los obtenidos
con tramado, aunque se observa un mayor recorte de las figuras sin tramado de
difusión. Por lo que resultará más interesante su uso en imágenes que no conten-
gan exceso de detalle. Además resulta interesante la reducción del tamaño de
archivo en ambos ejemplos, pasando a ser de 13,9 KB, en el primer caso y de
12,6 KB en el segundo. Sin embargo, hay que remarcar que los cambios entre
seleccionar tramado de difusión a no seleccionar tramado comporta una pérdida
sustancial de calidad de las imágenes a medida que vamos reduciendo el número
de colores, tal y como podemos observar comparando las imágenes obtenidas
utilizando la paleta adaptable de 8 bits (pág. 69) con y sin tramado de difusión
y las que hemos obtenido con una profundidad de color de 4 bits (pág. 71). En
este caso observamos que la disminución de colores ha afectado a la fotografía ya
que el número de colores que contenía ésta era mayor. En cambio el dibujo no ha
sido gravemente alterado y comprobamos que con una profundidad de color de
6 bits (pág. 70) los colores de la imagen se mantienen al igual que su calidad.
Para completar la observación comparamos los resultados entre las foto-

grafías y los dibujos de la paleta uniforme, con y sin tramado de difusión, de 8
bits (pág. 65) con los de 4 bits (pág. 67) en relación a los obtenidos con la paleta
adaptable.Con esta paleta los resultados aparecen más enriquecidos con la op-
ción tramado de difusión si nos referimos a las imágenes de 8 bits. Con esta
paleta sendas imágenes aparecen distorsionadas trabajando con 16 colores (4 bits).
Formatos de archivo ,9
Por último, comentar las imágenes en las que hemos utilizado la paleta
del sistema. En éstas destaca una mayor cercanía los resultados obtenidos con la
paleta uniforme de 8 bits (pág. 65) que con la paleta adaptable de 8 bits (pág.
69), si nos referimos a la fotografía. No obstante, reseñar que los colores sufren
una mayor distorsión con lapaleta del sistema Windows (pág. 73) que con la del
sistema Mancintosh @ág. 74). Si nos referimos al dibujo los resultados obteni-
dos con la paleta adaptable de 4 bits (pág. 71) tanto con difusión como sin
difusión son parecidos. Sin embargo, comparándolos con la paleta uniforme los
resultados más cercanos los obtenemos con una profundidad de color de 8 bits
(pág. 65), si nos referimos a la paleta del sistema Macintosh (pág. 74), si nos
referimos a la paleta del sistema Windows (pág. 73) la calidad, con respecto a la
paleta uniforme de 8 bits es menor. En lo referente a tamaños de archivo los
valores comparativos muestran que la paleta uniforme de 8 bits y las paletas de
los respectivos sistemas son similares, mientras que con respecto a lapaleta adap-
table de 8 bits sus tamaños son menores.
Si desea ver como quedan en pantalla ciertas opciones puede recurrir

a la siguiente dirección:
http:llwww.infohiway.c~ml~aylfasterlsimulator.cgi
La opción Entrelazado
La opción de enlace es una cualidad del formato GIF89a. Ésta aparece
como predeterminada en uno de los cuadros de diálogo Opciones de exportar
GIF89a. Si la activamos la imagen se irá descargando en el explorador progresi-
vamente, es decir, de menor a mayor detalle hasta su total visualización. Mientras
que si optamos por desactivarla o por seleccionar Normal la imagen aparecerá en
el visor del explorador una vez hayan llegado la totalidad de los datos referentes
al documento. Esto es así porque la imagen es guardada en cuatro pasadas. A
diferencia de la técnica utilizada en los televisores que leen la imagen de arriba
abajo y de derecha a izquierda, los monitores redibujan la imagen línea por línea
y exclusivamente de arriba abajo. Por lo que al descargarla de forma entrelazada,
cada una de las cuatro pasadas incluyen parte de la información de la imagen,
esto hace que pueda visualizarse mucho antes en el explorador sin pérdica de
calidad.
Webs con Photoshop
hay que sabor...

TIPOS DE PALETAS
Exacta.- Utiliza para la elaboración de la paleta los colores disponibles en la ima-

gen que no exceden de 256 colores.
Sistema (Macintosh).- Contiene los 256 colores RVA que confirman la paleta del
sistema Apple.
Sistema (Windows).- Contiene los 256 colores RVA que confirman la paleta del
sistema Windows.
Web.- Contiene los 2 16 colores más usados para la elaboración de páginas Web.
Uniforme.- Según las especificaciones en Profundidad d e bits y Colores extrae
una relación homogénea de cada grupo de calor del espectro preparando una pale-
ta que contenga proporciones iguales de rojos, de verdes y de azules.
Adaptable.- Rastrea la imagen y contruye una paleta de 256 con los colores que en
mayores porcentajes aparecen en la imagen. Por lo que las paletas adaptables de
cada imagen pueden diferir sustancialmente.
. A medida.-Crea paletas personalizadas. Siempre que se elige esta opción aparecen

una vez pulsado el botón OS< el cuadro de diálogo Tabla de colores. Del cual
deberá seleccionar una de las tablas que aparecen en la sección Tabla, o bien
Cargar tablas previamente creadas y guardadas.
Anterior.- Utiliza la paleta utilizada en la conversión anterior.
TIPOS DE TRAMADOS
Ninguno.- Simula el color eliminado por el más cercano dentro de la gama de 256
colores. Sin embargo, no utiliza tramado para suavizar las zonas donde se han ex-
cluido gamas de color. por lo que las transiciones entre matices y tonos son bruscas
y toscas.
Difusión.- Calcula el valor cercano difuminundolo en la trama consiguiendo suavi-
zar las diferencias de tono y matices creados por la eliminación de gran parte de los
colores de la imagen.
Motivo.- Reconstruye los motivos mediante píxeles generados aleatoriamente si-
mulando de este modo los colores eliminados en la conversión.
Formatosdearchiva 61
Archivo JPEG
Formato creado por fotógrafos especialistas, resulta realmente idóneo su
uso en documentos que contengan millones de colores, documentos escaneados,
tal es el caso de fotografías de grandes degraciones de matiz. Igualmente resulta
efectivo en documentos en escala de grises. Es adecuado su empleo en imágenes
de tono continuo y suaves transiciones de color. Por el contrario los resultados
pueden ser insatisfactorios si los documentos son indexados.
l.
.- .. , .,:<
m' Figura 15.
< Ci t+." m.: ir <
LnC
c,
Li---
-1
-u+..
c9
ilri R., r 4
1;
l.-
. .". N-
;?
I
,;:
.* 7,- n Visor de Microsoft
..
* * Y -L..
lnternet Explorer.
Figura 16.
L.: [;- -, .
.!:.
I.. rr.-,. Iii....
" -: !,'e ,d -:;

. &j ,!.:
Visor de Microsoft - ,
lnternet Explorer.
1 1 1,
!,11, 1-, -,7-...i- ..- L..

l. u
*
.
,
. ,8
...
d
i - I.
. 4 l . .a
"
.‘d -2 ii*". ;i,., n-3 *id,, . t-: . h'...b ;)ci,-, -r. '4"..
M . C P ? ~ r ~ r i r i@L&%L
En la página de geoloties, la uti- s w e c p r t o k e i ?a
F - t r ~ r - t l t
lización del formato JPEGno re-
sulta tan evidente. Sin embar- 1 - ' d
qo, una observación atenta de
ducido número de colores que -m-!

aparecen hacen pensar que se f Lkk ,': !":?"';i
ha utilizado el formato GIF. u - m + m as +, Pll"* 1
-
En ambos casos las imágenes aparecen descentradas hacia la izquierda del monitor.
Probablemente la configuración del monitor era de 1024 por 768 píxeles
Webs con Photoshop
Compresión JPEG y calidad de imagen

Este tipo de archivo, al igual que el formato GIF, realiza un proceso de
compresión en la imagen, con el fin de que ocupe un menor tamaño de archivo. A
diferencia de GIF su proceso de compresión no es predeterminado, sino que el
usuario puede comprimir el archivo tanto como lo desee. Sin embargo, tiene como
contrapartida que la compresión del documento siempre genera pérdidas en la
calidad de la imagen. Esta pérdida es siempre inversamente proporcional a la
mayor o menor compresión ejercida en el archivo. Así nos encontramos que a
mayor compresión de archivo menor calidad poseerá la imagen y viceversa.
En el cuadro de diálogo Opciones JPEG estas características vienen

determinadas por los valores especificados en calidad de imagen y el tamaño del
archivo. Siempre resultará más efectivo incluir, en primer lugar el tipo de calidad
de imagen y, a continuación comprobar el tamaño que tendrá el documento. Si
este no le satisface vuelva a realizar la operación duplicando previamente la
imagen. Recuerde que una imagen con la opción de calidad Máuima estará poco
comprimida, pero la pérdida de información será mínima. Generalmente los valores
intermedios proporcinan buenos resultados. No obstante, todo va en función de
las características del proyecto, pero recuerde que es recomendable que el
documento no exceda de los 40 KB, ya que esto retardan'a su aparición en el visor
1C
de cualquier navegador.
Por último, añadir que este tipo de archivo da opción a optirnizar el color
de la imagen para que ésta presente una calidad fotográfica impecable. Con este
fin seleccione Línea base optimizada.
..
t JPEG utiliza un tipo de com-
Opciones de imagen presión acumulativo, por 10 que
Cakdad 1
8 m cada vez que guarde el archivo
archivo pepe60 archivo qrande
L
éste será comprimido. Convier-
I
t a el documento a JPEG una
Opcionos de formato
r Línea de base fEriandar1 vez haya concluido 10s cambios
r Linea de base opimrada oportunos, con e/ fin de no eli-
R Progrmiva
lectira 18-A minar información necesaria
durante el proceso y pérdida de
Guarda hayectoria
calidad en la imagen.
Los resultados obtenidos con el dibujo son parecidos a los experimenta-

dos tras indexar la imagen y convertirla a GZF. En este caso, diríamos que su
utilización no resulta satisfactoria dado que la misma imagen con resultados si-
milares requiere de un archivo mayor. Comparemos las imágenes obtenidas con
la paleta adaptable de 8 bits (pág. 72) con y sin tramado de difusión con las
imágenes JPEG de calida máxima 10 (pág. 75). En las primeras su tamaño co-
rresponde a 12,2 KB y 13,9 KB respectivamente; mientras que en las segundas
requieren de 35,2 KB y 36,2 KB, dos veces más de tamaño, que para la imagen
resultante es prescindible. Si para reducir el tamaño del archivo recurrimos a una
calidad baja, para amortiguar el tamaño, ciertas zonas de color plano pueden
sufrir alteraciones. Para este ejemplo cotejamos las imágenes obtenidas con la
paleta adaptable de 8 bits (pág. 69) con y sin tramado de difusión con las imá-
genes JPEG de calidad baja 1 (pág. 75). De 12,2 KB y 13,9 KB de tamaño que
ocupan las primeras pasamos a documentos que requieren de 12,lKB los segun-
dos en ambos casos. Los tamaños de archivo son prácticamente iguales. Con
acierto podemos en ambos casos concluir que el uso del formato JPEG no es
recomendable para documentos en los que predominen colores planos, salva-
guardando ciertas excepciones en las que estén mezcladas zonas planas con zo-
nas de suaves degradaciones de color. En estos casos realizaremos una serie de
pruebas para estudiar cuál de los formatos es el más idóneo.
En la imagen fotográfica por el contrario observamos que siempre obte-

q m o s buenos resultados utilizando cualquier valor de calidad, aunque es reco-
mendable optar por valores altos cuando la imagen sea de gran tamaño físico.
La opción Progresiva
Cuando trabajamos con JPEG los documentos tienden a ser más grandes
que cuando trabajamos con documentos GZF, teniendo los mismos tamaños de
archivo, de resolución y dimensiones. Este motivo hace recomendable que active
la opción Progresiva en el cuadro de diálogo Opciones JPEG. Ésta viene a rea-
lizar la misma acción que entrelazado del formato GZF, pues permite descargar la
imagen progresivamente en el explorador, pudiendo variar el número de lecturas
de la imagen a 3,4 y 5 veces si es necesario. Así, si seleccionamos 5, por ejemplo,
la imagen aparecerá antes en el explorador, aunque tendrá que realizar cinco lec-
turas consecutivas de la misma con el fin de completarla y de descargarla en su
totalidad.
Webs con Photoshop
Archivo PNG
Al igual que JPEG, este novedoso formato creado por CompuServe y
Unisys permite trabajar con documentos que contengan millones de colores de
alta resolución al mismo tiempo que reduce la pérdida de información de la ima-
gen. Diseñado para imágenes y fotografías tiene la particularidad de conservar
todos los valores referentes al color y canales alfa que posea el documento, per-
mitiendo de este modo crear transparencias en los documentos al modo que lo
realiza GIF89a. Por lo que resulta efectivo en documentos escaneados, en imá-
genes en escala de grises y en imágenes de tono continuo y suaves transiciones de
color, aunque puede ser igualmente utilizado en documentos indexados. Como
podemos comprobar reúne las ventajas que poseen los dos formatos anteriormen-
te comentados, además de contar con un tipo de compresión sin pérdidas..
El formatoPNG está basado en la tecnología que tendrá el formato GZF24

llamado a ser el sucesor del formato GIF87a e incluso de GZF89a. Mejora las
capacidades gráficas del GZF clásico pudiendo trabajar igualmente con imáge-
nes de 24 bits (más de 16 millones de colores) sin pérdida de calidad de imagen
debido al tipo de compresión LZ77 que utiliza. Además, resuelve el problema de
las diferentes visualizaciones de la imagen según la plataforma en la que se traba-
je, debido a las diferentes cromaticidades y valores gamma existentes. No obs-
tante, tiene como contrapartida no dar soporte para la creación de animaciones a
" diferencia del formato GIF89a.
Los más importantes programas de tratamiento digital de imágenes lo

traen incorporado en sus últimas versiones. También encontramos soporte para
este formato en xRes 3.0, DeBabelizer Pro y Hijaak 95, entre otros.
Compresión sin pérdidas

El sistema de compresión LZ77 sin pérdidas reduce el tamaño del archi-
vo sin menguar la calidad de la imagen. La compresión denominada deficción
utilizada por PNG y desarrollada por Jean-Loup Gailly viene determinada por el
tipo de algoritmo utilizado. Basada en un tipo de compresión que emplea un gran
número de programas de dominio público Info-Zip: zip, gzip, pkzip; lo que hace
que esté libre de derechos de autor o de patentes.
El filtro método O PNG está definido por 5 opciones de filtros básicas;

sin embargo en Photoshop contamos con 6 tipos de filtros algoritmicos. El filtro
algorítmico es aplicado en las líneas básicas y línea por línea. Los datos de la
imagen son a su vez enviados de forma gradual para su compresión, cada línea
escaneada es precedida por un tipo defiltro byte que especifica el tipo de algorit-
mo usado. Vemos, pues, que losfiltros algonímicos son aplicados a bytes y no a
pkeles, sin considerar la profundidad de bits o el tipo de color de la imagen. Si
en el documento existen canales alfa los datos relativos a éstos son filtrados
como datos pertenecientes a la imagen.
Cuando la imagen se entrelaza, cada bloque de lectura de la imagen rea-

lizada en cada pasada es considerada como una imagen independiente. Así cada
subimagen es enviada secuencialmente hasta descargarse en su totalidad.
PNG no impone restricciones a la hora de utilizar los filtros. Sin embar-

go, los filtros no son igualmente efectivos para todo tipo de datos por lo que será
importante que observe los resultados ilustrativos que aparecen en las páginas
siguientes con el fin de compararlos objetivamente.
Un aspecto a tener en consideración cuando trabajamos con el formato

PNG son los grandes tamaños de archivo que proporcionan, que vienen determi-
nados por trabajar con imágenes de 24 bits, poder mantener información no rela-
c~onadadirectamente con la imagen y el tipo de compresión LZ77 que utiliza. De
este modo, encontramos que los más precisos resultan ser Promedio y Superior
y los tamaños más pequeños los dan Inferior y Adaptativo.
1, . u . '
"4 Los altos tamaños de archivo aue, ,Dro- 1
porciona P N G , más elevados que los
1 obtenidos con)PEG con el mismo do-
Cancelar 1 cumento, vienen igualmente determi-
nados por la posibilidad que ofrece este
tipo de formato de mantener todos los
canales alfa del documento.
Para saber más sobre este interesan-
te formato diríjase a:
Webs con Photoshop
En la imagen fotográfica se han obtenido buenos resultados utilizando

cualquiera de los filtros, esto hace recomendable el uso de los filtros que propor-
cionan los tamaños de archivos menores como es el caso de filtro Adaptativo
opción Ninguno (pág. 77) que nos da un archivo de 35,6 KB, el mismo tamaño
que Promedio opción Ninguno (pág. 78).
Refiriéndonos al dibujo las ilustraciones no muestran cambios evidentes.

En este caso, los archivos con menor tamaño han correspondido al filtroAdaptativo
opción Ninguno (pág. 77) que nos da un archivo de 45,6 KB y el filtro Trazado
opción Ninguno (pág. 77) con un tamaño de archivo de 45,9 KB.
nota ...
3
Utilizando el formato P N G e incluso elformatoJPEG puede recurrir
en algunas ocasiones a posterizar l a imagen p a r a reducir. si lo cree
necesario, el t a m a ñ o del archivo. Este método puede resultar útil cuando
queremos disminuir el número de colores de una imagen sin tener que llegar
al extremo de 256 colores consiguiendo muy buenos resultados.
La opción Adam?
Del mismo modo que los formatos anteriores PNG dispone de una op-
ción de entrelazado en este caso denominada Adam7, que puede utilizar para
mostrar la imagen con mayor detalle a medida que se descarga. Active un tipo de
algoritmo, para preparar la imagen para la compresión en Filtro.
Cuando la imagen se entrelaza, cada bloque de lectura de la imagen rea-

lizada en cada pasada es considerada como una imagen independiente. Así cada
subimagen es enviada secuencialmente hasta descargarse en su totalidad, una vez
concluidas todas las lecturas. Cada subimagen trasmitida en cada lectura descar-
gada es siempre rectangular y de menor tamaño en altura y10 anchura que la
imagen completa. El filtro de compresión seleccionado no es aplicado cuando
la subimagen es descargada.
ANÁLISISGLOBAL
Hay ciertos tipos de documentos que aquí no han sido mostrados de for-
ma ilustrativa. Con el fin de que tenga una idea de cómo quedan éstos según el
formato seleccionado, desarrollamos este breve apartado.
En exámenes realizados a imágenes que contenhn elementos en tres

dimensiones y pocos tonos de color se ha observado que dan buenos resultados
las opciones GZF de 8 bits (256 colores), 7 bits (128 colores), 6 bits (64 colores)
y 5 bits (32 colores). Sin embargo, aunque parezca paradógico, los tamaños de
archivo obtenidos son superiores a los que pueden darse con el formato JPEG
tanto con la opción Optimizada como Progresiva y una calidad baja. Dando
valores mayores con la primera opción mencionada. Los resultados han de consi-
derarse cuando las imágenes son de gran tamaño, ya que con JPEG su visualiza-
ción será de mayor calidad además de tener un tamaño de archivo menor. Si el
tamaño físico es menor elija el que más le satisfaga.
Una imagen integrada por dos colores planos sin ningún tipo de degra-
dación da como resultado el caso contrario; se obtienen buenos resultados con
ambos formatos y con casi todas las opciones posibles, excepto GZF de 1 bit, si la
imagen es color. Sin embargo, los tamaños de archivo resultan ser mayores utili-
zando el formato JPEG.
?
En una degradación tonal, como por ejemplo, la que puede constituir un

fondo de página Web, los resultados son satisfactorios cuando trabajamos con las
opciones GZF de 8 bits (256 colores), 7 bits (128 colores), 6 bits (64 colores) y 5
bits (32 colores) con menor número de bits el degradado comienza a sufrir altera-
ciones de color. Aunque parezca incomprensible solamente obtenemos un resultdo
óptimo con JPEG Calidad 8 Optimizado. A partir de estos valores ciertos colo-
res del degradado sufren alteraciones de tono, aunque éste en sí muestra una
degradación contínua en cada una de las opciones posibles con este formato. Por
lo que respecta a los tamaños de archivo comparando los valores más altos de
ambos obtenemos que con JPEG Calidad 8 Optimizado da un tamaño tres veces
menor que con GZF de 8 bits con tramado de difusión.
Tipografía a un sólo tono sobre un fondo formado por un color plano

observamos que las letras aparecen más suavizadas con respecto al fondo utili-
zando el formato JPEG. Con GZF la transición entre ambos es más abrupta. La
Webs con Photoshop
elección dependerá del efecto que desee conseguir. En lo referente a los tamaños
de archivo resultan ser dos veces más grandes los obtenidos con JPEG que con el
formato GZF comparando las opciones de mayor calidad.
En fotografías en escala de grises o compuestaspor un numero reduci-

do de colores, pero de gran riqueza en matices los resultados son satisfactorios,
siempre y cuando la imagen a visualizar en el visor del navegador sea de dimen-
siones físicas reducidas, con las opciones GZF de 8 bits (256 colores), 7 bits (128
colores), 6 bits (64 colores) y 5 bits (32 colores). A partir de aquí las imágenes
sufren alteraciones generalizadas de tono. Si las imágenes son de gran formato
recomendamos utilizar JPEG tanto con la opción Optimizada como Progresi-
va. La mayoría dan buenos resultados a excepción de las opciones de calidad
baja, que aún así siguen siendo aceptables. Dando valores mayores con la prime-
ra opción mencionada. Con tamaños semejantes JPEG da unos tamaños de ar-
chivo relativamente mayores. Si ha de incorporar documentos de gran tamaño
físico en JPEG es aconsejable que realice previamente ciertas pruebas compa-
rando diferentes calidades. Se recomienda incluir dentro del grupo comparativo
un GZF de 8 bits con y sin tramado de difusión.
Elementos de poco detalle y color sobre un fondo texturizado se obser-

van buenos resultados con GZF de 8 bits con tramado de difusión (256 colores),
7 bits (128 colores), 6 bits (64 colores) 5 bits (32 colores) y 4 bits (16 colores) y
3 con GZF de 8 bits sin tramado (256 colores) a partir de éste la imagen sufre
alteraciones como sucede utilizando GZF paleta Web (216 colores). Sin embar-
go, utilizando JPEG de calidad 1 tanto con la opción Optimizada como con
Progresiva se obtienen muy buenos resultados y unos tamaños de archivo dos
veces más pequeños que con la mejor opción de GZF.
En este capítulo iniciamos la creación de ciertas páginas Web que vamos
a j r desarrollando a lo largo de los próximos capítulos en los que nos centraremos
en los aspectos a tener en cuenta a la hora de realizar proyectos para la Web.
Las páginas Web están constituidas básicamente por una serie de elementos
comunes como son: el fondo, imágenes tratadas, tipografias bitmaps, texto,
botones, marcos y algún que otro elemento. A éstos se unen la preparación de
creación de texturas con diferentesfines,preparaciónde íransparencias, diseño
de tipografias especijicas, efectos especiales, creación de mapas de imagen,
animaciones GIF u otro tipo de animación, incorporación de sonidos o efectos
acústicos, vídeo, etc.
El primer paso consiste en preparar los documentos que vamos a incluir

en nuestras páginas, ya sean imágenes, fotografías, dibujos o nuevos archivos.
Con este fin hemos de tener en consideración antes de iniciar cualquier tipo de
cambio ciertos aspectos como son: todos los elementos que hemos de incluir en
una página deben contener los mismos colores cuando se trabaja con documentos
indexados, ya que la paleta de color es muy reducida, deben tener la misma
Webs con Photoshop
resolución y preparar el fondo para que sea transparente si tenemos previsto trabajar
con transparencias.
Con el fin de que compruebe la versatilidad que confiere Photoshop a la

creación de páginas Web, los proyectos creados parten de necesidades comerciales
y creativas bien dispares; además los ejemplos específicos para cada ocasión
mostrarán otras tantas posibilidades creativas.
REDUCIR ARCHIVO
La reducción de los tamaños es hoy por hoy casi esencial y aunque la
mayor parte de ususarios de Znternet todavía tiene módems que no funcionan a
velocidades superiores de 14,4 o 28,8 bps; si que exigen con entusiasmo una
calidad de gráficos y de contenido en las páginas Web mayores y más sofisticadas.
A lo dicho hay que añadir que las velocidades de transmisión actuales con los
protocolos TCP/IP todavía nos obligan a tener en cuenta el tiempo de espera en
la visualización de las páginas, relativamente paliado con las opciones de descar-
ga progresiva incorporada en todos los formatos más utilizados en la Web. Sin
embargo, y, aunque los cambios cada día son más evidentes, el formato rey de la
Web sigue siendo GIF.
-?
Disminuir el tamaño del archivo supone reducir las dimensiones del do-
cumento. Esto hace que debamos considerar las dimensiones con las cuales que-
ramos que aparezcan las imágenes a tratar. Además, deberemos reducir igual-
mente la resolución si ésta es superior a la establecida. Además de contar con la
compresión realizada por el formato seleccionado.
Proyectos
Los documentos que hemos de utilizar para incorporar a la página Web
de la boutique de ropa son imágenes importadas desde un CD-ROM. Presentan
unos altos tamaños de archivo y sus dimensiones físicas son elevadas, por otro
lado, presentan una resolución correcta de 72ppi. En este caso hemos considera-
do trabajar con formato JPEG debido a las características del proyecto y que su
tamaño será 200 por 300 pkeles aproximadamente.
Tratar imágenes para la Web 87
&k" Ir.-1 m,
1 1 ' [cm
71 p*rsrp@i. L]
P -*7irn vvlriI1
p,,i,!3 Y
,. Ll ma* 1 R<"%!.i rl
En la ilustración 1 -
que nos sirve de
1 yecto. observa-
mos que la reduc-
ción de las di-
P mensiones de
píxeles de 1024
por 1536a 200
F
por 300 píxeles
ha reducido drásticamente el
tamaño del archivo pasando
Figura 17. de 4,5 M a 175 KB. La resolu-
Documentos ción ha permanecido en 72ppi
Photoshop y Observe en la barra de título la
*
cuadro de diálogo visualización de ambos siendo:
Tamaño de imagen. 36,12 por 54,18 cm y 7,06 y
10,59 cm respectivamente -
Después de realizar los ajustes de imagen oportunos y las transformacio-

nes pertinentes en la imagen, procedemos a realizar una serie de pruebas para
determinar el tipo de compresión que mejor se ajusta al tamaño de archivo desea-
do, manteniendo una calidad de imagen óptima.
En la página siguiente observamos los resultados obtenidos con una com-

presión JPEG de Calidad: 3 Media con la opción Progresiva lectura: 3. Ésta nos
da como resultado un tamaño de archivo 14,8 KB. La siguiente imagen está con-
figurada con una Calidad: 5 Media con la opción Progresiva lectura: 3. El ta-
maño de archivo es 21,9 KB y, por último, una tercera imagen con una Calidad: 7
Media con la opción Progresiva lecbra: 3 . Da como resultado un tamaño de
archivo 37,5KB. Comparativamente resulta evidente en la ampliación efectuada,
los cambios de calidad provocados en la imagen, sin embargo, la vestimenta que
es lo que hemos de destacar aparece muy bien visualizada con un tamaño de

archivo bajo (14,8 KB). Aún nos queda por decidir que" formato elegir.
Figura 18. Después de seleccionar la opción de calidad más baja he-

Documentos mos realizado una última prueba indexando la imagen a
JPEG de 256 colores y convirtiéndola a GIF opción Entrelazado. El
Photoshop resultado ha sido una imagen de inferior calidad con un
respectivamente. tamaño de archivo de 37,3KB.
En la página Web de la agencia de viajes hemos de incorporar un gran

número de imágenes. Este motivo hace recomendable trabajar igualmente con el
formato JPEG. No obstante, la gran mayoría constan de amplias zonas de colo-
res pIanos, como es caso del mar o del cielo. Además han de visualizarse en
formato pequeño. Esto hace que debamos realizar una serie de pruebas antes de
decidimos qué formato utilizar.
Un análisis comparativo muestra que será más efectivo el formato JPEG

utilizando una calidad baja. La limitación a una paleta de 8 bits desvirtúa ciertas
imágenes. Al realizar una prueba de color aplicando en una de las fotografías que
contiene, colores alejados de la paleta patrón establecida, nos encontramos con
un tamaño de archivo mucho mayor al utilizar el formato GZF, además de limitar-
nos la selección de fotografías a mostrar o, sino deberemos optar por desvirtuar
los colores.
Pero veamos como quedan con uno y otro formato algunas de las imige-
nes incluidas en la página Web.
9 di
Las ilustraciones de la izquierda de ambos ejemplos perte- Figura 19.

necen a GIF 8 bits opción Entrelazado.Mientras que las de Documentos
la derecha a JPEG calidad3. A simple vista los cambios de GIF y JPEG
" calidad no son evidentes, por lo que podriamos elegir cual- de Photoshop
quiera de los dos formatos. Sin embargo, los reducidos ta- respectivamente.
maños de archivo de JPEG nos hace decantar por este.
La ilustracion d e la izquierda muestra iin JPEG calidad 1. Los resultados son

visualmente buenos, además nos hace reducir el archivo a 15,6 KB de los 19,3 KB
que nos daba con una calidad 3. Para comprobar como nos quedarian las imágenes
con GIF hemos aplicado en la imagen de la derecha la paleta patrón. En esta no es
visible, sin embargo, los tonos rojos-anaranjados de )a vestimenta han sido cambia-
dos por unos tonos granates al igual que ciertos colores del fondo.
Aunque como hemos comprobado el formato JPEG es el más adecuado

para este trabajo descartamos su aplicación, ya que en este proyecto para la Web
hemos de incorporar una animación GZF. Esto nos llevará a un examen más
minucioso de las imágenes a incluir en la página y las imágenes a descartar,
siempre comprobando que los cambios de color no proporcionan alteraciones
anormales, por ejemplo, que partes de cielo aparezcan en un tono amarillo o rojo.
En la página Web de una galería de arte hemos de incorporar un gran

número de imágenes. Éstas no han de sufrir alteraciones de color, ya que deben
presentar las obras tal como son. Teniendo en cuenta este aspecto así como una
buena visualización de las mismas hace ya casi evidente la utilización del forma-
to JPEG o PNG, por encima de las diferencias de tamaño de archivo que poda-
mos obtener con ambos o comparativamente con el formato GZF. Comprobamos
los resultados que podemos obtener con distintas compresiones de JPEG y PNG.
Figura 20. Las ilustraciones superiores muestran los resultados que se

Documentos obtienen con JPEG calidad 3 y JPEG calidad 5 respectiva-
JPEG y PNG mente. Las inferiores muestran los resultados que se obtie-
de Photoshop nen con JPEG calidad 3 y PNG filtro Adaptativo respecti-
respectivamente. vamente. Hemos seleccionado JPEG calidad 3 por darnos
archivos más pequeños al tiempo que buenos resultados.
,!- ',, :*.. Figura 21.

+,:t., E+d,,
..-
<.,*
-
!,,,+,
9 .'. -.
Ir,.r. ,-.-.-
1 ,*5' :,T
;a
E<-I,
.:,-
F.+rr,.
25
y-m
,:
-T. a Visor del navegador
1 Microsoft lnternet
.*,u*, '>+#,'*!A,,. :afi.m.*w* l:)*.',-",.
Ex~lorercon
I doci lmento abierto.
El documento P2c3pl en for-

mato JPEG calidad 3 está
visualizado en el navegador
Explorercon unas dimensio-
nes de 302 píxeles de an-
chora por 227 píxeles de al-
tura. Con un tamaño de ar-
chivo de 20,6 KB, lo cual es
relativamente alto.
REDUCCIÓN DE COLORES
Disminuir el número de colores que puede contener un documento o to-
dos los documentos a incluir en una página puede ser un buen método para redu-
cir el exceso de tamaños del archivo. Esto puede resultar casi necesario en docu-
mentos de gran tamaño o en imágeizes captadas con el fin de utilizarlas como
. fondo, cosa poco habitual debido a los altos tamaños de archivo que ocupan. Sin
embargo, podemos crear virajes o duotonos e incluso convertirlas a escala de
grises desempeñando el cometido para el que han sido creadas, como fondo y en
un segundo plano. De este modo se pueden crear fondos llamativos con tamaños
de archivo relativamente pequeños.
Para convertir una imagen a duotono recuerde que antes ha de

convertirla a escala de grises y posteriormente volverla a convertir a RVA
para que la acepte el formato JPEG o en formato PNG. Para convertir
una imagen a duotono o escala de grises o realizar un viraje dirtase al
submenú Modo en los dos primeros casos y al submenú Ajustar en el tercer
caso. Los dos submenús se encuentran en el menú Imagen.
Tratar imágenes para la Web
UU-
Colores de superpuesto. (7 -
Figura 22. Esta imagen de 240 píxeles de anchura por 363 píxeles de
Cuadro de diálogo altura (8,47por 12,81 cm.) presenta un tamaño de archivo
Opciones de duotono en formato JPEG calidad 3 de 23,2KB. Reducimos el tama-
y documentos JPEG ño creando un duotono. Con esta operación conseguimos
respectivamente. disminuir el tamaño a 21,5KB sin afectar a la calidad de la
imagen, excepto en la pérdida de color. Volvemos a aplicar
una calidad de imagen inferior, en concreto de valor 1, dan-
do unos resultados satisfactorios y un tamaño de archivo de
17,lKB, lo cual nos parece aceptable para las dimensiones
del documento.
De forma comparativa hemos creado un documento a escala de grises y

lo hemos comparado con el documento duotono JPEG de calidad 1 observando
que la imagen a escala de grises JPEG calidad 1 ocupa 17,8KB, mientras que la
imagen en duotono JPEG calidad 1 ocupa 17,l KB lo que nos da un tamaño de
archivo menor que a escala de grises conteniendo color.
C? -
7-
-
Webs con Photoshop
4
- -
7 Figura 23.
Docilmento JPEG.
En est e caso hemos transfor-

mado la imagen creando una
textura y, a continuación he-
mos ampliado sus dimensio-
nes a 800 por 400 píxeles.
El proceso siguiente ha con-
sistido en indexar la imagen
reduciendo los colores a 128.
La hemos convertido a RVA
aplicando el filtro Desenfocar
más y por último, ha sido
guarda en JPEG calidad 1
*¡ ocupando 13,7 KB.
Si está trabajando con fondos puede indexar la imagen y, a con-

tinuación convertir a RVA y aplicar varias veces filtros de desenfoque, los
colores aparecerán más unificados y conseguimos reducir sustancialmente
el tamaño del archivo. Duplique el fondo en diferentes profundidades de
bits con el fin de obtener una calidad óptima y un tamaño reducido.
Si trabaja con fotogrcifías utilice GIF con tramado de difusión si
tiene previsto posterizarlas. ya que da más buenos resultados que si opta
por activar la opción ninguna trama de difusión.
Otros métodos que podemos utilizar para disminuir el número de colores

más recurridos consisten en posterizar las imágenes o colorear ciertas partes de
las mismas. Con ello conseguimos limitar el número de información contenida
en el documento mediante una reducción de la información de color, por un lado
y, por otro, restringir el número de colores que haya de contener la paleta. Este
último recurso puede resultar muy interesante en páginas Web que han de reunir
un gran número de imágenes, pues se consigue incluir todos los colores de las
imágenes en una paleta reducida como puede ser 256 colores e incluso menos.
Tratar imágenes para la Web 9,
1
T-o m-
Zatl.iraci6n: ,W'
~.3ncelar [ Figura 24.
I h
W - Cargar... 1 Cuadros de diálogo
Tono/saturación y
Posterizar y
documentos JPEG
respectivamente.
I
- --
-
En este ejemplo ilustrativo '"
1 <
se ha coloreado el fondo
con un tono azulado acer-
cándose al de la pancarta
no seleccionada. Conside-
rando que sus dimensiones ,
son: 165 por 247 píxeles
nos parece sustanciosa
una reducción del tamaño
de 19,2 KB a 18,1 KB. Con
el formato JPEG calidad 3.
El comando Tono/satura-
ción está ubicado en el
submenú Ajustardel menú :
Imagen. :-u wY
F Pt-evisualiza~i<~ri
posterización con un valor: 19. Paradójica-

mente se da el caso, por la características de
la imagen, que con la posterización consegui-
mos un tamaño de archivo de 26,2 KB mien-
. :. .. (397por 269 píxeles),no nos parece adecua-

: do su uso en este caso. Posterizar está ubica-
.- m do en el submenú Ajustar del menú Imagen.
Webs con Photoshop
UNOS CUANTOS EJEMPLOS

En este apartado trataremos de desglosar y analizar los aspectos desarro-
llados en este tema, además de ver unas muestras de páginas Web que presentan
otros aspectos que vamos a desarrollar a lo largo del libro.
. <
Figura 25.
Visores de Microsoíí lnternet Ex~lorer
respectivamente.
En la página de Alias se hace percepti-

ble la reducción del color, sobre todo
en el globo mundial, donde se descubre
que se han utilizado GIF con tramado o
de difusión,probablemente de 5 bits e
incluso de 4 bits. El cilobo
- ha sido fraci- .
mentado en tres imágenes, en parte para

reducir el tiempo de presentación y otro
motivo importante es que la parte de la
derecha es un mapa de imagen. La ma-
yor parte de zonas marcadas son vín-
culos, las cuales no trasladan a otros
documentos. Veamos un ejemplo, he-
-
mos pulsado sobre el mapa de imagen
Maya, la ilustración superior-derechanos
muestra que la totalidad de la página está
constituida por imágenes probablemen-
te tratadas con Photosho~ como se com-
Tratar imágenes para la Web ,,
e-- ,u . i. 7- .- . - Figura 26.
-... :,
?-.-
- -- O Visores de Microsofi lnternet Explorer
respectivamente.
.- --
amplias zonas de color sólido lo que evidencía la utilización de GIFS sin tramado de
difusión, probablemente de 5 bits e incluso de 4 bits dando tamaños de archivo
menores que con tramado de difusión. El logotipo de la empresa ha sido separado
del fondo azulado con el fin de agilizar la presentación. Este aspecto hace pensar que
han utilizado GlF89a para llenar las zonas transparentes con el color del fondo.
Como mapas de imagen encontramos los botones de la zona derecha de la página y
la imagen inmediatamente inferior a éstas. Las letras subrayadas, para diferenciar-
las del resto, son enlaces que nos trasladan a otras páginas del documento. Esto
agiliza la presentación, pero al mismo tiempo, mengua el atractivo de la misma. Sin
embargo, en este caso han sido muy bien distribuidos relacionando el azul de las
letras con el azul que aparece en la imágenes unificando todo el conjunto.
.. .
.- > .
.. . -O
l Figura 27.
Visores de Microsoft lnternet Exptoier
- -
respectivamente.
-m
Womenl n< Emlrildemd DHtlm SliM

Las páginas de Designers Direct son senci-
Ilas en su diseño. La inclusión de imágenes
se reduce a unos cuantos botones y unas fo- -=
tografías que visualicen lo que se vende.
El ruido existente en los botones y en la fotografía hace pensar que se ha trabajado
con GIFS con tramado de difusión, probablemente de 7 bits o 6 bits. El logotipo
central está incorporado al fondo. Los botones de la parte superior son mapas de
imagen y las letras subrayadas son enlaces que nos trasladan igualmente a otras
páginas del documento. La presentación al igual que las imágenes no son de gran
atractivo, lo mismo sucede con el diseño de los botones, todo ello creado probable-
mente en Photoshop debido a sus características. El estudio de la imagen nos hace
sospechar que el fondo ha sido tratado previamente reduciendo el número de colores,
pues éste presenta una menor calidad que la figura de la chica, la cual aparece más
definida y con mayor detalle.
Figura 28.
Visores de Microsoft lnternet Explorer
respectivamente.
1
-
En la página de Aflmfmerchantse ha aña-
dido de forma mesurada las imágenes. / ...7 N ,.T hr
Debido a que este tipo de páginas re-

quieren de una definición más o menos
apurada se ha procedido a incluir pocos .. t_ -..., :, . . . ....
- u
documentos gráficos, éstos son: el fon- 1- b
L
7
do, el logotipo, la fotografía de artista, la

ilustración de la obra y unos cuantos
botones que son mapas de imagen. La
alta calidad de los documentos nos hace
pensar que se ha trabajado con formato
JPEG; sin embargo, la colocación del
logotipo sobre el fondo nos descubre que
se han utilizado GIF89a con tramado . . m,.,... ,111
de difusión, probablemente de 8 bits.

Tratadas con Photoshop como se com-
prueba en la ilustración inmediatamente
0
v.---- -,
inferior. Las ilustraciones superiores ':G-~.j:i
muestran parte de la primera página. El
texto tiene repartido el protagonismo jun-
to con las imágenes. Los botones indi-
can las galerías que se pueden visitar.
La Gallery 111 nos muestra una fotogra- I I
fía en blanco y negro del artista así
como una obra suya representativa. .-- ~
l .. A L-. ,- - A ..,..,,-A >.-
A c.-*= jm~ l a agua ~ p ! n / ~mu s! a plaqap X a2
v> s ~ ~ a n b !sol
-gula# 01 Joplruas la !S010s ' d ~ O g J ~ ~ ! la
JJD ! ~ Dsouialaqap
~D ua%~ur! ap
D#DW un sa oJualunDopla !S i!npu! D ua%. DI ap JO~DZ!IDDOI la D D ! ~ U ! mn
apuop < , , ~ ( ) , , =3~
w3p~: ~ J a n b ! i aDI Dsn as saua%~w!~ ! n p u D! J D ~
~
w 8 1 t uanqos 0 6 1 ~
.alueuodui! uo!:,ew~o~u!el ap oisal la owo:, 'a:,elua ap oixai owo:, ñ sauoloq
ap e w ~ oua
j uaBew! ap sedeui ap opow e ua:,a~edeawoH A slnol anb ahiasqo .ep
-euo!:,e(a~uo!:,ew~o)u! uaua!luo:, seu!Bpd se1 ap olsaJ la ua owo3 .soluaun:,op so~io
e aDe/uaap ahi!s opeñe~qnsolxa) 13 .sauoueu ñ sope~op'salnze sol aJlua saJolo3 sol
aluaue!~el!~oñeu asopua!ueda~'o!pu!oldual un ap aha!laJ un eJlsanw anb e!ge~60104 el
tí ~ O ap
H ose:, la sa a1s3 .saua6pw!se1 sepoi ua saunwo3 syw sa~olo:,sol uebuaiuo:,
anb opua!3ey sepeieJi op!s uey sauaBpw! seiia!3 'SJ!VLap osnpu! a sj!q 8 ap aiuaw
- -
-alqeqoJd 'uesn/!pap opeure~lu03 e68j/9
opez!l!ln e4 as anb pep!lnBas u03 43ap sou
anb A sa~olo:,ap oppnpaJ oJawnu un ehias
-qo as spwape loqol6 lap uaBew! el uo:, apa:,
-ns o u s ! u 01 'se!:,ualedsue~l
ap uaJa!nbaJsau
-abpu! ap ej~oñeuel anb e/( ' j l 9 sauo!Deur
-!ue aiuawa~qeqo~d 1 0 ua6ew!
~ el ñ oqol6
la uos selsa 'sauo!:,ew!uesop ua3aJede led!:,
, , -uyd eu!6pd el u3 'as~ez!lea~ uapand anb sop
m- ...---,-
. I
i ;* -egos so3!ioxa s a í e ! ~opuelouap soqol6 ua
" ;
-.?, ,,, .,
ua:,a~edeso:,e!s!pe~edsa~e6nlap sauabpw!
se1 'esa~duiael ap od1lo6ol (a a:,a~edeaisa
aJqos o:,uelq sa opuo) 13 .epal!p ñ elan3sa
1 'ell!:,uassa sñep!lo~ 01
u
. 819 ap eu!6pd e l
Webs con Photoshop
IMÁGENES DE GRAN TAMAÑO

En el primer ejemplo mostrado (fig. 25 y 30) el logotipo de la página
principal ha sido fragmentado en tres partes, como ya se ha comentado. Est'o es
posible mediante el lenguaje HTML. En muchas ocasiones comprobamos que
una imagen sea ensamblada en la página Web y que aparezca descargada
fraccionadamente. Normalmente, este proceso se lleva a cabo cuando los docu-
mentos ocupan altos tamaños de archivo o, como en el caso de la figura 25,
además por tratarse parte de la imagen en un vínculo.
El método que se utiliza para ensamblar fragmentos de imágenes y re-

componerlas en la imagen completa consiste en utilizar las etiquetas que permi-
ten crear tablas. En este caso, no interesa crear bordes ni separaciones entre las
celdas que, en esta ocasión corresponden a fragmentos de imágenes a insertar. Es
muy importante que recuerde que los valores que han de darse en la etiqueta han
de ser de O, ya que si no fuese éste el valor los fragmentos de imagen no aparece-
rían perfectamente encajados.
Para realizar el proceso deberemos especificar en la etiqueta TABLE

BORDER un tamaño de borde de valor O, quedará especificado como <TABLE
BORDER=O>), del mismo modo la caníidad de espacio entre las celdas deberá
- asumir un valor de O, el atributo quedará detallado del siguiente modo cTABLE

CELLSPACING=O> y, por último, la cantidad de espacio entre el contenido
de una celda y el borde tendrá un valor de O , y su atributo se especificará del
siguiente modo <TABLE CELLPADDING=O>.De este modo conseguimos que
todas las partes queden unificadas sin apreciarse su fragmentación, siendo pre-
sentadas con mayor rapidez que si hubíesemos descargado la imagen completa.
. . "-,' m"
.,
-
-*.
.. - *.
-
,J >:
-. ,-.
-
'.
-
--
Figura 30.
Visor de Microcoft lnternet Explorer.
Tratar imágenes para la Web ,,
Por último las características del documento aparecerán especificadas en
los atributos respectivos a la imagen, anchura y altura de la misma, así como el
documento de procedencia, como por ejemplo: <IMG SCR=MODAl.JPG
WIDTH=200 HEIGHT=300 >. A esto podemos añadir el atributo ALT, para los
usuarios que disponen de navegadores que no visualicen imágenes. Pondríamos
en este ejemplo y después de último atributo añadido: ALT= «imagen de vestido
a cuadros vichy catalogado como no 15»>
nota ...
Diseñe sus páginas con archivos reducidos, pues el tiempo estimado
que un navegante resiste en la inevitable espera es de medio minuto.
a l g o sobre html ...

I
Para aplicar un valor O a fragmentos de imágenes tratadas como ta-
- blas la etiqueta queda especificada del siguiente modo:
I c TABLE BORDER=O CELLPADDING=O CELLSPACING=O>
nota...
Las tablas además de ser un buen recurso para disminuir el tiempo
de espera,tamaños de archivo altos o añadir mapas de imagen son utilizadas
igualmente para aplicar ingeniosas animaciones GIF. Realmente pueden
crearse animaciones y diseños muy interesantes.
La creación de texturas, utilizar imágenes como mosaico o rellenar el
fondo con colores sólidos resulta ser algo habitual en proyectos de páginas Web.
El fondo es un elemento esencial en un proyecto, puede dar un aspecto realmente
profesional al diseño o, todo lo contrario. Un fondo inadecuado provocará una
mala visualización del texto, que se hará ilegible. El fondo es el elemento sobre el
cual colocamos el resto de elementos que componen la página. Esto es importante
recordarlo, ya que podemos hacer que resalten o que sean neutralizados por el
mismo. De este modo debemos considerar en cada caso las características de la
página y en consecuencia seleccionar el fondo más adecuado.
Pero como ya indicábamos en el capítulo anterior incluir imágenes como

fondo resulta ser una tarea algo compleja, además de aumentar el tiempo de pre-
sentación -relacionado con el ancho de banda y la velocidad de transferencia en
la red- puede provocar una falta de legibilidad del texto, por lo que su diseño
debe estar realmente estudiado. Lo que es más común es utilizar como fondo
ciertas imágenes tratadas o texturas creadas e incorporarlas a modo de mosaico
sin que se aprecie la subdivisión existente. Aunque lo más habitual es que no se
busque un efecto de fragmentación del fondo a modo de azulejos, también puede
104 Webs c o n Photoshop
resultar interesante conseguir cierto ritmo visual. Con este fin provocaremos un
desfase y una diferenciación acusada en los bordes de las imágenes, de este modo
el efecto mosaico quedará acentuado.
.,,., *." .- . ,.,.
b*.,~
Figura 31.
- (3 > ; l.--_.*,-5-.
:1
. ."
-~
.
.L. L . >X
:i I 8. I
,,:
,.
..*
- ,..
3-
.->
--10 J
Visor de Microsoft
lnternet Explorer.
Hemos utilizado una imagen en es-

cala de grises a modo de mosaico.
Observamos que este gráfico como
fondo dificulta la lectura de textos Sin
embargo, con cuerpo mayor y una
elección de color adecuado para la
letra puede resultar interesante Las
imágenes deberán ser incorporadas
- - -
Figura 32.
Visor de Microsoft
- - - -
-
I de forma fraamentada
" Dara aue resul-
te efectiva su presentacion.
- --
.
- .
-
-m
lnternet Explorer. . .. + ....,. . . + . -. . -- ,
Se ha creado un texto con va- ,
..* . - -..*
L _ <
l
rios filtros de Photoshop. A lo lar- +. . '
3 ,*
, , , , .* - .. 4
_
j d C
- i .
go de este capítulo se muestran

diferentes técnicas para crear 4
.:; . - .
. .
r -
_,_
' - I - - - > . ,
infinidad de texturas para fon- .. <': <

.
. . .- r
*
+ 'LV
- .
LL
dos Es un tipo de textura que

,<:
.-' e - " ,,, > . 8 -
,-
no centra la vista en ningún pun- '
,
'.lo d .
- , .
.
. A
i
to en especial; sin embargo, si , , ,' "; . . *

*
,> 3 . - < '
la miramos durante un tiemoo . . , -

.' ,- : ,
. ? .
N
~~~~~~
produce fatiga ocular.

Figura 33.
Visor de Microsoft
P.
. . -..," .n :- > " , .. i< i i . r- , i"
i
i
lnternet Explorer.
<*TI**YiO". Y. L.c&aII
.
.. . r*ruiow*opu pul
*x. r i m m ~ r r c c ~ i a a r m '. . 1.. . . '
I r . ,
!
. Este fondo gráfico resulta inadecua-

, - . - \
% ?,
do en una página Web con texto en
\ .
.. '
- ., IHT&SA &E SEA 1,&6~6 ' ' ' m-
. .
- t4 r
' .' S ~ E C ~ I O ~~ ' N

O T LE ,
,~ ' , : :, .. cuerpo pequeño, ya que dispersa la
~ O E C V ~ .~,.B. - .. letra y fatiga la vista.
c
,piramn,mv ELCPCOR ..
+
. - .I ,'
* .
>
, ,
Ifir*isa; LÉo&P .-
...". , $ E L E c G ~ o $ ~
8
4.~ ~
d W !
FUFNT€, , \
. ac:rAivin&o'Y ~ aeo~~g;Ao$cuclbo
:
A-
Preparar fondos y texturas
FONDOS CON COLOR

Utilizar un color sólido como fondo resulta ser unos de los métodos más
recurridos y, ciertamente pueden lograrse webs profesionales y de aspecto impe-
cable. Los colores sólidos resultan interesantes cuando en la página hemos inclui-
do considerables cantidades de texto. Sin embargo, el color de uno con respecto
al otro deben estar en consonancia, ya que se pueden producir efectos ópticos lo
que provocará ilegibilidad, una falta de interés o cualquier otro efecto psicológi-
co en el receptor, como todos sabemos muy bien.
El poco tiempo que tardan en descargarse es uno de los mayores atractivos

que ofrecen los fondos de color sólido, la rapidez de creación es el segundo; ya
que simplemente tenemos que apuntar el número hexadecimal correspondiente al
color seleccionado e incluirlo en la etiqueta de fondo para que aparezca en el
documento HTML especificado. Otro método más rápico consiste en recurrir a
programas de creación de páginas HTML y aplicarlo en el fondo para que sea
creada la etiqueta automáticamente a modo de PageMill.
Para seleccionar un color en Photoshop simplemente puede recurrir a

determinarlo con cualquiera de las herramientas que el programa proporciona,
como puede ser la paleta Muestras, o el Selector de color o, incluso elegirlo de
las paletas de los respectivos sistemas si lo desea. Activamos el documento en
A
cuestión y lo cubrimos con el color seleccionado para ver el efecto que produce.
Figura 34.
Visor de Microsofi
lnternet Explorer.
En este caso hemos aplicado

con la herramienta Bote de pin-
tura un azul de la paleta Mues-
tras que aparece por defecto y
que en número hexadecimal
corresponde a un número
8888FF.
Como es lógico debemos conocer el código que corresponde a cada color.

En los accesorios incorporados en nuestro ordenador podemos encontrar una
calculadora cientqica que nos muestra el valor asignado a cada color en
Webs con Photoshop
su respectivo número hexadecimal. Para determinar su valor en dicho código

han de saberse las proporciones de cada uno de los colores que los componen, sin
olvidar que deben estar en modo RGB. Los dos primeros valores corresponden al
tanto por ciento del rojo, los valores intermedios corresponden al tanto por ciento
del verde constitutivo del color y, por último, los dos ultimos valores corresponden
al tanto por ciento de azul del color. Por ejemplo, un naranja definido en código
hexadecimal como FF8000, podemos desglosarlo del siguiente modo: rojo: 255
corresponde a FF, verde: 128 corresponde a 80 y el azul: O corresponde al valor
hexadecimal 00.
-, I X
1
m r Ocl r Bin r Dep r R*, P G,&
r HVP rr Back 1 CE J c 1,
Slol FFEI 1 11 4
[
7 ( 8 1 9 I d ~ n d l h n d (
C-. 1 ~~~l EXP1 ln

tir+I'i~ 1 MR] i 1 5 1 fi1 1 11, 1 Y ~ ~ ~ ]
Figura 35.
~ " r n l srn 1 ( liql 1
Vy M'; 1 1 2 1 3 1 -1 1 1
t '3%? l < b \
Paleta Color de Photoshop y s 1 ril.: 1 1 1 1

x'3 n! 0 1 +t 1 .1 + ! - 1 1
Calculadora de Windows 95. oat 1 1 1 ltX J ~1 1
x,? A 1 B 1 c 1 D 1 I 1 1 F
Los porcentajes del color seleccio- 1

nados los hemos visualizado, en E,,rl2q yer -- x
este caso, a través de la paleta

Color de Photoshop.
ro correspondiente al verde de Back 1 CE ( C 1

valor 128, dándonos su corres- 1 1 1 1 1 4 7)819)d)(Pnld
pondiente hexadecimal80. Intro- 1 FXP
,lrnq1 1 14 1 1 1 1 1
11, 4 5 6 a iu ,drNr1
ducimOSel va'or y* a 'On-

tinuación, pulsamos sobre la op-
sin 1 l,( 4 1 1 1 1 1 1
ion( 1 2 3 - l - ! ~ NNN*
ción hexadecimal. Así de sencillo. _sJ rri- [ 1 n! 1 4 1 +-, 1 . 1 + 1 1 1

z.3 O : 131i
tan( >C?I PI 1 1 1 c 1 D 1 1 F ]
ikl A E E
También hay en el mercadopaletas de colorpara la web. Pueden resultar

muy útiles porque facilitan todo el proceso contando con un cuadro espectral del
cual podemos seleccionar el color que nos satisfaga y obtemer al instante el nú-
mero hexadecimal de dicho color, pudiendo elegir una gama reducida y compro-
bar como queda cada uno de los colores sólidos como fondo de la página Web de
un modo efectivo y rápido. Aquí mostramos un ejemplo de este tipo de software.
,
-
Preparar fondos y texturas 07
Figura 36.
<FO.
Cuadro de diálogo
Color y de Web color.
-, r m m r i i
irimmmmm
m i i r i i i i r
nrrrrrir
- ,.Mab-dw
B g w u a Li colgcr w i
Definir el atributo BGCOLOR

para un fondo de color sólido
Este atributo es el que nos permite definir el color en el cual irá cubierto
el fondo. En lenguaje HTML cada color corresponde a un número hexadecimal.
De este modo debemos especificar cada color con su respectivo número
identificativo. Por ejemplo, si queremos que el fondo aparezca de color blanco
debemos escribirlo del siguiente modo: <BGCOLOR=FFFFFF>;si selecciona-
mos el negro como color de fondo debemos especificarlo como: <BGCOLOR=
000000> y así todos los colores que deseemos.
negro = 000000 morado = FFOOFF

gris medio =808080 violeta =800080
blanco =FFFFFF verde brillante = 88FF88
amarillo claro = FFFF8O verde turquesa = 408080
amarillo brillante = FFFFOO verde oscuro = 008080
rojo brillante = FF0000 azul brillante = 0000FF
magenta =FFOOFF azul claro = 8888FF
La etiqueta de cómo y qué constituye el fondo del documento entra den-

tro del Corpus de la página web. Es unos de los atributos que especifican el cuer-
po de la página. Así, la etiqueta BGCOLOR aparece inscrita dentro de otros
atributos comunes al elemento BODY, como son información de las listas, pre-
sentación de las imágenes, resaltar las frases, la creación de enlaces, entre otros.
1 ligo sobre html...

Para aplicar un color sólido como fondo ha de especificarse del
I
siguiente modo (FFFFFF representa el color blanco)
<BODY BGCOLOR =FFFFFF >
nota ...
3
El atributo BLACKGROUND está disponible a partir de la versión
I
HTML 3.0 y aparece operativo en ciertos browsers; entre los más conoci-
dos Nestcape Navigator, Microsoft lnternet Explorer o Arena.
FONDOS
Pero como ya indicábamos en el capítulo anterior incluir gráficos forma-
dos por texturas o imágenes como fondo resulta ser una tarea algo compleja,
además de aumentar el tiempo de presentación -relacionado con el ancho de ban-
da y la velocidad de transferencia en la red- puede provocar una falta de legibilidad
del texto, por lo que su diseño debe estar realmente estudiado. Lo que es más
común es utilizar ciertos tipos de fondos con imágenes tratadas o con texturas e
incorporarlos como un mosaico en las páginas. Aunque lo más habitual es que no
Preparar fondos y texturas ,09
se busque un efecto de subdivisión del fondo a modo de azulejos también puede

resultar interesante en según que casos.
Fusionar los motivos definidos

Este proceso lo realizamos siempre y cuando queremos mostrar un fondo
uniforme y sin divisiones aparentes. Cuando partimos de zonas o texturas inclui-
das en un documento se procede a seleccionar dicha zona del documento en cues-
tión y a continuación clonarlo como tal en el archivo que definiremos como fon-
do. Esto es importante comprenderlo, ya que si tenemos previsto mostrar inten-
cionadamente las diferentes subdiviones no es necesario realizar este proceso.
Cuando queremos especificar las características del fondo podemos introducir un
archivo correspondiente a una imagen, que en este caso, puede pertenecer a una
textura diseñada. La imagen del archivo se repite como un mosaico hasta llenar la
ventana del navegador, el número en cuantas veces aparezca repetido estará en
función del tamaño físico de la textura.
Figura 37. -IUIX
Documentos de Photoshop 7 1
respectivamente. 1
La ilustración superior muestra
3
como queda un fondo creado
mediante la clonación de un mo-
tivo. Si se persigue este efecto no
es necesario llevarlo a cabo, ya
que determinando el archivo
como BGCOLOR éste se repite
hasta cubrir toda la superficie del -
visor. En la ilustración infe-
rior hemos fusionado el
motivo alineado aplicando
el filtro Desenfoque de
movimiento del submenú
Desenfocar,con un Ángu-
lo de 47grados y una Dis-
tancia de 20 píxeles, con-
siguiendo disimular las Ií-
neas divisorias al tiempo
que aumentar la sensación
tridimensional.
Webs con Photoshop
Cualquiera de los filtros de desenfoque puede sernos útiles para fusio-

nar los motivos clonados, sin embargo, podemos hacer uso de otras herramientas
que Photoshop dispone. Por ejemplo, si deseamos que el fondo no aparezca tan
uniforme usaremos el Tampón con la opción clónico activada o la herramienta
Desenfoque o duplicaremos ciertas zonas con la Varita para enmascarar las zo-
nas de unión y, un largo etceterá. Estas herramientas nos permiten transformar la
superficie dándole un acento más irregular y desordenado u ordenado, al tiempo
que borrar cualquier rastro de motivo regular repetido en el documento. En estos
casos, siempre es aconsejable duplicar los documentos, no siempre es satisfacto-
rio el resultado.
La elección dependerá de las características del documento del cual ex-

traemos la textura. Ciertos documentos contienen texturas muy regulares, por
ejemplo, podemos elegir como fondo una porción de cielo de un documento o,
una porción de mar, o una pared o la textura de un mármol.
Activamos el documento del cual extraeremos el motivo que

utilizaremos como fondo mediante la herramienta Marco. Si
es todo el documento, lo seleccionamos con el comando Todo
del menú Selección. A continuación, copiamos y pegamos
repetidamente el documento hasta completar la superficie.
Este proceso puede hacerse con los comando Copiar y Pegar
del menú Edición o arrastrándolo hasta el documento destino.
Del mismo modo puede optar por definirlo como motivo
mediante el comando Definir motivo del menú Edición y
clonarlo en el documento destino. Utilice el sistema que mejor
se adapte a usted.
7 . ,,)Figura 38.
,' Documentos de Photoshop.
Preparar fondos y texturas ,,,
2. Como podemos observar en la ilustración de la página anterior
se percibe como las diferentes selecciones han sido acopladas.
Para realizar el siguiente proceso es aconsejable que estén
todos las partes agrupadas en una misma capa. Para que las
zonas de intersección pasen desapercibidas procederemos a
seleccionar con la Varita una zona similar a la que deseamos
disimular y la duplicaremos en una nueva cara, pero antes
aplicaremos en dicha selección un valor de calado.
Calar la selección proporciona una difuminación sobre la
zona disimulando ostensiblemente el efecto de camuflaje.
Seleccione el comando en el menú Selección.
1 Documentos de Photoshop
y cuadro de diálogo Calar.
Cancelar ]
-,. . lb ., .. En este ejemplo hemos seleccionado

una zona y trasladado a otra capa rne-
c. diante el comando Capa vía copiar.
A continuación, hemos calado la se-
lección dando un valor de calado de
5píxeles. Después, hemos traslada-
do la zona hasta el lugar deseado
hasta acoplarlo sin que se aprecie.
Del mismo modo puede utilizar la he-
rramienta Tampón reduciendo el tan-
to por ciento de opacidad.
Observe en la ilustración inferior cómo se p
ha conseguido camuflar la zona de inter-
-
sección en la zona de la izquierda compa-
rándola con la zona remarcada de la dere-
cha. Siguiendo este proceso aplicaremos
zonas cercanas en el resto de las juntas.
Por último, todas las capas creadas las aco-
plaremos para reducir el tamaño del archi-
vo.
I
Recuerde que el motivo es el que se repetirá en el visor del navegador
y que simplemete estamos corrigiendo las zonas de las juntas con el fin de
que el efecto mosaico sea impreceptible.
-,N . .m.-
Figura 28.
Y
.
- - p.,
-
-...,-. -- --::
C-,-.".ri..:i*?-- .-.
1Visores de Microsofi lnternet Ex~lorer
respectivamente.
En el caso de la página Mernbers se observa

como un motivo se repite a lo largo y ancho
de la página. Posiblemente éste haya sido re-
tocado en las zonas limítrofes con el fin de que
n aparezcan suavizadas. Al mismo tiempo obser-
vamos como ha sido utilizado el mismo motivo

en las dos partes en las que han dividido la
"oQ-
.
.-<.T
- . -. . -.,.... -- -.- .&
.. . -- -j.
pagina; lo más probable, es que se trate de una
- página de marcos constituida por dos pági-
-
. :
-
.. " ..-..-
r...* ,.--*+. . .- Ir
7 nas de contenido. Por último comentar que la
-
.
,N,, 1,' ', : 1, ,,.. . 8, l,, ,, ,,N ,:m
Lr , ,a' I , ,*, ' ." ', ,-' legibilidad del texto es intermedio.
Todo lo contrario que la página Househome
@ u. &- @ ~ : % ~ que como podemos comprobar el fondo
texturado no supone un impedimento para rea-
lizar una buena lectura. Esta textura de colores
suaves y que produce un efecto marmóreo ha
,
sido muy bien elegida y combinada con el co-
l- '. lor del texto que es de un tono más oscuro que
, ,... ,. -.. el fondo, aunque se han dejado extensas zo-
nas vacías y se observa que no se han camu-
-.-..... - -
. ..
,.
flado bien las zonas de unión.
1 Por último la página Connetexpreex siguiendo
el esquema semejante a la primera utiliza el
fondo como un elemento preponderante, yo
diría en exceso, pues produce cansancio visual
y dificulta la legibilidad del texto así como el
mensaje que se envía utilizando colores com-
plementarios entre fondo y texto, el primero
aparece bien tratado sin observarse las zonas
de unihn.
Diseñar texturas para fondos

Photoshop cuenta con varios filtros muy apropiados para preparar textu-
ras para fondos sin grandes complicaciones, aunque, como es lógico, siempre es
posible recurrir a asociaciones variadas hasta obtener una textura enriquecida.
No obstante, no entraremos en complejidades crecientes, ya que aplicar diferen-
tes filtros combinados con otros tipos de efectos que el programa dispone podría
llevamos casi por completo un libro. Nos centraremos en describir una serie de
filtros y algún que otro efecto idóneo para crear fácilmente texturas para fondos
de páginas Web.
Crear efecto de nubes

Los filtros Nubes y Nubes de diferencia incluidos en este submenú Zn-
terpretar producen los efectos que indican sus nombres. Sin complicaciones po-
demos conseguir un fondo diferente y sugestivo que además relaja la vista, y
combinado con colores adecuados para el resto de elementos de la página no
tiene por qué producir dificultades en la lectura.
1. Creamos un documento nuevo con una resolución de 72 ppi

en modo RVA con las dimensiones requeridas. En este caso
son de 400 píxeles de anchura por 210 píxeles de altura.
a. f
-* m
Tdmd
I -
-
IC<'.~.
Carcbr 1 Figura 41.
Cuadro de diálogo Nuevo y
documento de Photoshop.
4 / c<xclr -I
&ob- 1 pxcI.,p>lja?. 3
M& [ C o k ñJa 11
Con*
r
r
Webc con Photoshop
2. Lo más rápido es cubrir el fondo con un color, sin embargo,

el filtro puede ser aplicado sobre cualquier imagen.
#-lnixJ
i i . 1'. .i. . Figura 42.
Documentos de Photoshop
respectivamente.
La ilustración superior muestra
- el resultado tras aplicar el filtro

Nubes sobre un fondo naranja.
Se obtiene una degradación de
tonalidades anaranjadas.
Con el filtro Nubes de diferen-
cia obtenemos el mismo efecto
aunque los colores son inverti-
dos por su complementario, en
este caso por tonos azulados, tal
y como muestra la ilustración in-
N ferior. La diferencia entre ambos
radica en que el filtro Nubescrea
el efecto a partir del color frontal
seleccionado en el momento
mientras que el filtro Nubes de
Y1 diferencia se a d a ~ t a dicho co-
lor en relación a' las formas y
colores del documento en cues-
tión.
Hemos realizado una prueba para determinar qué tipo de formato resulta el más
idóneo en relación a la calidad, tamaño y optimización de archivo. Los resultados han
sido los siguientes. Un formato GIF indexado con paleta Exacta de 219 colores
con tramado de difusión nos da un tamaño de 28,O KB, lo que es muy alto, mien-
tras que con formato JPEG de calidad2 con opción progresiva 3 nos da un tama-
ño de archivo de 4,60KB obteniendo resultados óptimos.
Textura
Los filtros englobados en este submenú Textura producen efectos diver-
sos realzando el conjunto del diseño de la página sin aumentar en gran medida el
tamaño del archivo. Sin embargo, debemos tener presente que cuando trabaja-
mos con documentos indexados se ha de reducir la paleta al menor número de
colores posibles, para que el archivo sea lo suficientemente pequeño lo que nos
obliga a limitar en cierto modo el diseño trabajando con GZF.
h a y que saber...
Granu1ado.- Produce efectos de texturización en la imagen. La amplia gama de
granulados combinado con variaciones de contraste e intensidad nos permiten obte-
ner un repertorio de efectos visuales realmente amplio.
Retales.- Recompone la imagen por medio de una combinación a modo de pedazos
de tela más o menos grandes, dependiendo del tamaño del retal. Este tamaño puede
abstraer la imagen o sección de ésta en su totalidad.
Grietas.- Produce el efecto de agrietamiento asemejando ésta la superficie de una
pared envejecida.
Teselas.- Recompone la imagen a modo de mosaico. Las caracteristicas de las
teselas dependerán de la anchura de la lechada y el tamaño de la tesela especificadas.
Vidriera.- Subdivide la imagen en celdas de mayor o menor tamaño a modo de una
vidriera.
Texturizar.- De todos los filtros incluidos en el submenú Textura éste junto con el
filtro Granulado son los que de un modo más notable diversifican el resultado, ya
que puede seleccionarse el tipo de textura a utilizar o modificar la dirección de la
luz.
La ilustración superior ha sido obtenida apli- I - - -- -- -- - - -- - - - A- ,-- -

cando sobre un fondo blanco el filtro Teselas
con un tamaño de azulejo de 31, una anchu-,
ra de iechada de 6 y un aclaramiento de
iechada de 9. En la inferior se ha aplicado el
filtro Granulado con la opción Huellas con
una intensidad de 22 y un contraste de 68.
Figura 43.
Documentos de Photoshop
respectivamente.
l. Seguimos el proceso descrito en el apartado anterior y

creamos un documento nuevo con una resolución de 72 ppi
en modo RVA con unas dimensiones de300piXeles de altura
utilizando el Bote de pintura.
A continuación, aplicamos el filtro Texturizar del submenú
Textura ubicado en el menú Filtro.
IEh~.- El resultado obtenido parte de los siguiente valores in-
troducidos. Tipo de textura: Arpillera, Escala: 200 %,
1 7 1
il + 1 1 "U'
1
bncdar
Relieve: 2, Dirección de la luz: Inferior derecha e Inver-
tir textura activado. Bien podría utilizarse para la pre-
sentación de lienzos en Internet.
A,- - -. .
I.ym::
I?
A --
nde la hl? Inter~ud~recha
R !nvertr textura
Figura 43.
Cuadro de diálogo
Texturizar y documentos
de Photoshop.
4
Observe el cambio producido en la mis-

ma imagen según la opción de formato
A elegida. En JPEG hemos selecciona-
do un valor de calidad 1 con una pro-
gresión de 3 dando un tamaño de ar-
chivo de 17,4 KB, mientras que con GIF
indexando la imagen con una profun-
didad de color de 2 bits y tramado
de difusión (4 colores) hemos obteni-
do un tamaño de archivo de 10,8 KB
sustancialmente menor. A esto hemos
de añadir el cambio y la transformación
que ha sufrido la imagen eliminándose
por completo el aspecto tridimensional
de la misma en GIF. Sin embargo, este
efecto de posterización que se crea
puede resultar interesante en según
que fondos.
-11-1 A d,
En las páginas anteriores se han mostrado tres ejemplos sencillos de cómo

embellecer el fondo sin complicaciones evitando fondos lisos y monótonos. Aun-
que podemos enriquecer notablemente las texturas creadas aplicando diversos
filtros en un mismo fondo, como más adelante mostraremos.
Otros filtros otras t e x t u ~ a s

La creación de texturas no está restringida a los filtros mencionados, sino
que más bien con la gran mayoría de filtros podemos diseñar una gran cantidad
de fondos. El gran inconveniente que presentan muchos es que requieren de algo
más que de un fondo liso. Esto hace que debamos aplicar algún que otro filtro con
anterioridad o, bien, aplicarlos sobre algunas imágenes, pero este caso, ya lo
trataremos en el apartado correspondiente.
La mayor parte de filtros que permiten seleccionar un tipo de textura a

aplicar -dando opción a cargar como textura otras imágenes- suelen dar buenos
resultados. Este es el caso de Trazos de pastel, Conté Crayón y Cargar textura.
También podemos emplear los filtros sobre fondos de color para aplicar texturas,
por ejemplo, las que nos proponen los filtros: Estilográfia, Película granulada,
Manchas, Modelo de medio tono, Papel con relieve, Papel húmedo, Reticulación,
Azulejos, Extrusióiz, Destello, Efectos de iluminación, Grabado, Puntillista,
semitono de color y Añadir ruido, cada uno de ellos en su respectivo submenú.
Pero, veamos algunos ejemplos de lo que podemos conseguir.
Figura 44.
Documento de Photoshop.
Este fondo ha sido creado sim-

plemente aplicando dos filtros.
En primer lugar hemos optado
por Efectos de iluminación y,
acto seguido, hemos aplicado
el filtro Cristal. Éste último no
produce ningún efecto sobre un
fondo de color, que es nuestro
caso, por lo que el resultado del
efecto de aguas se percibe por
haber aplicado Efectos de ilu-
minación antes que éste.
Figura 45.
Documc3nto de Photoshop.
El fondo es producto de la aplica-

ción de los filtros Texturizar y
Ondas marinas sobre un azul tur-
quesa. Es un tipo de fondo que no
-resalta más de lo necesario evi-
tando mayor protagonismo que el
que se le ha dictado: servir de fon-
do. Con este tipo hemos de evitar
letra de cuerpo muy pequeño o, si
es necesario su uso, utilizar el co-
lor más adecuado para que lectu-
ra sea óptima.
Figura 46.
En la ilustración superior he-

mos aplicado el filtro Sumi-
e, dando como resultado la
imagen de la derecha. Este-
fondo debe ser empleado
para páginas Web muy es-
pecíficas, haciendo que ten-
ga aspectos en común con
el resto de elementos. Si no
es así, éste adquiere un ex-
ceso de protagonismo, lo
cual no nos interesa.
Figura 47.
En este caso el fondo ha sido di-

señado utilizando los filtros Nubes
y Grietas por el orden menciona-
dos y sobre un fondo azulado,
-dando en el primero un efecto de
creación de espacio y, el segundo
una sensación de superficie y pla-
no donde situar los objetos. Admi-
te una fácil lectura y, dadas sus ca-
racterísticas, puede incorporarse
en gran número de páginas Web.
Realizar transformaciones
Los motivos o texturas creadas pueden ser alteradas y convertidas en
variaciones del original. Este aspecto puede resultar muy interesante cuando pre-
tendemos utilizar una textura creada, pero los colores que posee no son los más
idóneos para la página que en ese momento estamos diseñando. Realmente pode-
mos optimizar el tiempo de realización de fondos texturados, pues, jcuan compli-
cado y arduo es el proceso de retocar las juntas de unión de los motivos! En
Photoshop las herramientas que en mayor medida nos son de vital importancia
para este fin se encuentran en el submenú Ajustar del menú Imagen. Sí, los
comandos de corrección de color y de efectos especiales pueden ser muy útiles
para elaborar nuevos fondos.
Figura 48.
En la textura representada en la
figura 44 se ha aplicado el efecto
ecualizary unos cambios de con-
traste mediante el comando Bri-
Ilo/contraste. De este documen-
to extraeremos la textura definiti-
va marcada por el recuadro (150
4
por 150píxeles).De éste retocar
los bordes con el fin de que no se
perciban las sucesivas repeticio-
nes del archivo en el visor del
navegador.
traemos una nueva textura

marcada por el recuadro. Re-
tocaremos los bordes. Aun-
que es relativamente grande:
.- -
- , + .:
201 por 135 píxeles, no re-
duciremos su tamaño, ya
-
o
. , ..
. -.
-.
. -. .
-. e-" , .
que ocupa 10,5 KB guarda-
do en JPEG calidad 4.
. . . ' '
Definir el atributo BACKGROUND

para un fondo texturado
Este atributo, como en el caso anterior, es el que nos permite definir el
fondo. Sin embargo, en estos casos, así como cuando deseamos incorporar cual-
quier tipo de imagen, ya sean escudos, insignias, motivos geométricos, fotogra-
fías, etc. hemos de especificar el archivo en el cual está la imagen. Por ejemplo, si
queremos repetir una textura en el visor, la cual está guardada en un archivo
denominado textura 24, habremos d e escribirlo del siguiente modo:
<BACKGROUNG=textura 24.gif>, es decir, cambiamos los números
hexadecimales correspondiente al color sólido por el nombre del archivo.
Lo que es realmente importante es que el documento que utilizamos como

fondo no debe ser nunca de grandes dimensiones, pues entorpecería la descarga
de la página innecesariamente.
-
'7
Si encuentra que una imagen se descarga muy lentamente en el

4 navegador y que entorpece en gran medida la reducción de colores en los
que debe estar constituida la página, puede optar por crear un archivo
pequeño que sólo contenga un color sólido. Esta forma de crear fondos
resulta muy útil, rápida y efectiva; además acelera el proceso de aparición
del fondo en el visor del navegador.

Para aplicar una imagen como fondo ha de especificarse del si-
guiente modo:
<BODY BACKGROUNG= (<nombrede archivo,, >

Proyectos
En este apartado mostraremos el proceso desarrollado para la elabora-
ción del fondo de la página Web de la galería de arte.
1. Creamos un documento nuevo con una resolución de 72 ppi - -
en modo RVA con las dimensiones requeridas. En este caso

son de 800 pkeles de anchura por 600 píxeles de altura.
El nuevo documento denominado fondo1 lo cubrimos con
un azul turquesa oscuro utilizando Bote de pintura.
+
Creamos un documento con un tamaño que
cubre el tamaño de configuración de mi
monitor, que es de 800 por 600 píxeles. En
parte por querer visualizar el efecto
globalmente. Si el resultado es satisfacto-
rio cortaremos la zona interesada.
2. El siguiente paso ha consistido en aplicar tres filtros

consecutivamente. Hemos ido acumulando los diferentes
efectos por no parecernos satisfactorios en un principio.
El primer filtro aplicado ha sido Texturizar del submenú
Textura, dando un efecto de tela arpillera. El segundo filtro
ha sido Efectos de iluminación del submenú Interpretar
seleccionando un foco como tipo de luz y un estilo 2Amspot
y, por último hemos aplicado el filtro Teselas del submenú
Textura, dando un efecto de mosaico a la imagen.
Webs con Photoshop
m*ll..- Figura 51.

Cuadro de Texturizar, Efectos de
iluminación y Teselas respectivamente
y documento de Photoshop.
Texluia 1
-
1
Eacoli ::
A
Relieve I'
i\
Dicccion de la hc (lnirim defecha

R !nwflirte~tuto
l
1
Los valores aplicados son en
Textura: Arpillera, Escala:
200%, Relieve: 2, Dirección
de luz: Inferior derechae In-
vertir textura activada.
kta
Los valores aplicados son en Estilo: 2AMSPOT, Tipo de
luz: Foco, Intensidad: 17, Foco: 91 (ancho), Lustre:
L
4
35": ;11
:mcein 1 -67 (mate), Material: -58 (plástico), Exposición: O, am-
biente: 20 (positivo) y Canal de textura:Ninguno.
.. 13p-ioncr
T a m R o de anlw I
;i
h
bn-trnn de kchads r;-

ALIYU &hada r"
L
Los valores aplicados son en

Tamaño de azulejo: 39, An-
chura de lechada: 6, Aclarar
lechada: 19.
El resultado es interesante
para aplicarlo como fondo,
ya que en cierto modo nos
remite al tema que trata.
3. En la ilustración superior no se aprecia, sin embargo, ya que

los colores han sido desvirtuados pasando a ser verdosos.
Preparar fondos y texturas ,
23
Estos tonos no resultan interesantes, pues menguan la atención

de las reproducciones de los cuadros que debemos incorporar.
Así procedemos a cambiar el color mediante el comando
Tono/saturación, sustituyéndolo por un tono azul violáceo.
Figura 52.
Cuadro de diálogo
Tono/saturación.
r LLn ~atwación-
Cancela 1
t
Cargar.. 1
Luminos@ad:
rcm l A
, . , , J
r Cglorear
R fievk~ialización
4. El archivo que utilizaremos como mosaico no deseamos que

sea muy grande. Realizamos una prueba duplicando el
documento y recortándolo incluyendo seis teselas en la nueva
imagen. Comprobamos que el archivo es un tanto superior a
100 por 75 pheles que es el tamaño que nos interesa que
tenga el documento. A continuación, procedemos a clonar
los extremos con el fin de que aparezcan fusionados cuando
se cree el mosaico en el visor del navegador.
m
Ai
Figura 53.
Utilizando la opción Clónico alineado del Tampón nos

- disponemos a clonar en paralelo las zonas, tanto en
-
..
e*
- verticalcomo en hotizontal, con el fin de que aparezca
repetida la textura a sendos lados y en paralelo.
5. Nuestro interés es que el documento tenga las dimensiones

mencionadas, es decir, de 100 por 75 púceles. Con este fin
procedemos a reducir el tamaño en píxeles del documento en
Tamaño de imagen. Comprobamos que al mismo tiempo
reducimos su tamaño de 26 KB a 22 KB, estando todavía en
formato TZF.
Webs con Photoshop
de imagen y documento.
Tam& de imoreslcri
%&!ira 1353 1 cm
Aljura F'
1 cm
Resoluc~[ 1 pr~el~~~ulgada
r Mantemr propwuon
l7 Yolver a mostrar la irnagen 1 3 libra A
6. Con el fin de comprobar cómo quedará el documento en el

visor del navegador una vez éste sea repetido hasta cubrirlo
en su totalidad, nos disponemos a clonarlo como motivo
alineado en otro documento de prueba. Para ello lo selec-
cionamos y lo guardamos como motivo pulsando el comando
Definir motivo. El resultado es el adecuado, no se perciben
bruscas acomodaciones en los bordes.
1 , ,
'---I
1
-
-- ,- -
--- -_- y
O E
2.'
--
-- -
-- Figura 55.
e
- - -- -- -
Documentos de Photoshop.
Seleccionamos el motivo mediante el comando Todo. A continuación, hemos pulsado

el comando Definir motivo e inmediatamentehemos activado el documento destino y
la herramienta Tampón con la opción Motivo alineado aplicándolo por toda la super-
ficie. Convirtiendo a JPEG calidad 5progresivo 3 nos da un archivo de 7'13 KB.
B
Figura 56. r . t Ci l.
Visor de Microsoft ..,, 1

lnternet Explorer.
Aquí podemos observar como queda el

fondo tal y como lo hemos diseñado,
siendo este un formato JPEG calidad
5 progresivo 3.
FONDOS CON COLOR SÓLLDO

Y TEXTURA A LA PAR
Dependiendo de las características del diseño de página y de los aspectos
más relevantes que debamos resaltar, puede resultar muy interesante combinar en
el fondo zonas con textura y zonas con color sólido. Resulta obvio que las zonas
con color plano están indicadas para la colocación de texto, sobre todo si éste es
,de cuerpo pequeño y, además coincide con un tipo de textura que puede dificultar
tremendamente la lectura del mismo, haciendo el diseño poco atractivo y digeri-
ble. Un método eficaz al tiempo que rápido consiste en utilizar tablas en la página
Web. Sí, ya sabemos que las tablas son usadas habitualmente para otros meneste-
res, pero, quién ha dicho que no podamos emplearlas con otros fines. Realmente
utilizando tablas y con algo de ingenio podemos crear bellísimas páginas.
En este tipo de fondos especificamos como fondo generalmente una tex-

tura; no obstante puede ser cualquier tipo, incluso un color sólido y, por otro lado,
un color sólido con el que cubrir el fondo de la tabla. En este apartado no tratare-
mos el tipo de fondo y cómo crearlo, sino más bien en cómo combinar cualquier
tipo de fondo, en especial un fondo con textura, con un color sólido perteneciente
a una tabla.
Ya sabe que las tablas pueden ser generadas con borde y sin borde en
ambos casos hemos de especificar el valor correspondiente además del tamaño
de cada celda y el número de columnas, si procede. Todo dependerá del diseño
Webs con Photoshop
adoptado. Como es lógico los diseños pueden ser infinitos, por este motivo nos
proponemos mostrar un ejemplo ilustrativo de cómo crear un fondo de estas ca-
racterísticas
L*P Y" *.
,Q
,-
r-
2
*_
- ;,' '3 .-.-- , , &:
r--
-
:
I.-
e
,
m
' Figura 57.
Visor de Microcoft
-..
Y- t." ) _ L...
hrinl: =t-
*ib L
:;=
.-. p.-,. -ir-.--- ;.h--.4,,c >.m, lnternet Explorer.
Utilizando la textura creada en aparta-

d * ~ - dos anteriores mostramos cómo de
manera rápida y eficaz podemos utili-
zar tablas para incluir texto en su
inferior y dar al diseño otra dinámica.
En este caso, incluiremos dentro de las
celdas información como texto mien-
tras que en la zona texturadas coloca-
.. remos imágenes y mapas de imagen.
Definir la etiqueta TABLE

para un fondo «contablasu
Las etiquetas principales para la creación de tablas sonTABLE y I'TABLE,
3
sin embargo, es necesario cubrir otras características de la tabla, es decir, su dise-
ño: el número de filas y columnas que lo compondran. Las tablas clásicas están
constituidas por un título, los encabezamientos respectivos de las distintas co-
lumnas, dichas columnas, las filas, las caractarísticas de la celda y las del borde.
Lo más probable es que cuando utilice tablas para combinar un fondo con color
sólido y textura o color sólido e imágenes o, quien sabe, la combinación que a
usted se le antoje, no requiera de todos los atributos mencionados; no obstante, es
importante que tenga ciertas nociones, si es que carece de ellas, de algunas de las
cualidades y características de dichos atributos.
Con respecto a lo contenido en las celdas diremos que puede ser alinea-
do en el: centro, inferior, superior, izquierda y derecha tanto si se trata de texto, de
vínculos como de imágenes. Las caracterkticas del borde pueden ser configura-
das -ya se trató de forma específica en el capítulo 4- de tal modo que detennine-
mos el grosor del borde y el espacio entre el contenido de la celda y el borde y la
cantidad de espacio entre las celdas. También podemos determinar el color del
fondo o la imagen que irá como fondo. Por último, podemos detallar el ancho de
la tabla y el ancho de la celda. Todos estos datos son los que nos permitirán
diseñar cualquier tipo de tabla, ya sea para emplearla con el fin que en este apar-
tado estamos tratando, ya sea con cualquier otro fin que usted desee.
Para construir una tabla siempre hemos de introducir en primer lugar la

etiqueta TR que corresponde a unafila creada y, a continuación las etiquetas TD
y /TD cuantas veces sea necesario correspondiendo cada par a una columna
incluida dentro de lafila. Por último, cerrar con la etiqueta /TR. Si quieremos
volver a incluir una fila con sus respectivas columnas debemos repetir los pasos.
En sendas etiquetas podemos precisar la posición del siguiente modo: izquierda
...
<TD ALIGN=LEFT> O D > , centro <TD ALIGN=CENTER>...d T D > , de-
...
reclza <TD ALIGN=RIGHT> &D>, arriba <TD VALIGN=TOP>...dTD>,si
es en el cenrro pondremos <TD VALIGN=NIIDDLE>...dTD> y abajo <TD
VALIGN=ROTTOM>...dTD> permutando TD por TR si es el caso.

Para crear una tabla con una fila de tres columnas hemos de
especificarlo del siguiente modo:
<TABLE >
<TR>
<TD> <ITD>
cTD><lTD>
<TD> </TD>
</TR >
<ITABLE>
Por otro lado, las características de la tabla han de especificarse en la

etiqueta TABLE mediante los atributos respectivos. Así nos encontramos que
para de3nir el ancho de la tabla, es decir, el espacio que ocupará en el visor del
navegador hemos de introducirlo mediante el atributo WIDTH indicando el tan-
to por ciento de la pantalla que ocupará. Si no se incluye este atributo la tabla
Webs con Photoshop
ocupará por defecto el cien por cien del espacio disponible. Debiéndose escribir
del siguiente modo: <TABLE WIDTH=«X»%>. El tamaño del borde nos indi-
ca el grosor del mismo debiendo utilizar el atributo BORDER y apuntar el núme-
ro deseado, por ejemplo <TABLE BORDER=7>. El espacio entre el contenido
de la celda y el borde viene determinado por el atributo CELLPADDLNG, mien-
tras que el espacio entre las celdas viene definido por el atributo CELLSPACING
escribiéndose ambos del siguiente modo: <TABLE CELLPADDING=O
CELLSPACING=O>.Por último, el color de las celdas viene determinado por el
atributo BGCOLOR y detallado cada color con su respectivo número
hexadecimal. Viene escrito del siguiente modo: <TABLE BGCOLOR=#000000>
nota...
El ejemplo mostrado en la pagina 126 contiene este documento:
<HTML>
<HEAD>
< TITLE > fondos con tablas </TITLE >
<IHEAD>
<BODY BACKGROUND =textura.jpg>
<TABLE WIDTH=50°h BORDER=3 CELLPADDING= 100
CELLSPACING=5 BGCOLOR=#6F7DDO>
<TR>
<TD AUGN =CENTER>escriba lo que quiera </TD >
</TR>
<TR >
<TD ALlGN =CENTER >escriba lo que quiera </TD >
</TR>
< Ti7 >
<TD ALIGN=CENTER>escriba lo que quiera </TD >
</TR>
</TABLE>
<lBODY >
</HTML>
29
D E G W A D O S PARA FONDOS
En alguna ocasión habrá visto páginas Web en las que aparece una corti-
na que se va abriendo cuando iniciamos la animación. Esta cortina que, en un
principio aparece como fondo ha sido diseñada como motivo que se va repitiendo
hasta completar el visor. Lógicamente, la anchura del documento que contiene el
motivo esencial que se repite debe tener la longitud del visor, ya sea en vertical o
en horizontal.
Photoshop nos proporciona una herramienta con la cual podemos diseñar

efectos ondulantes a modo de cortina o interesantes transiciones, este es el De-
gradado.
El proceso para crear un degradado es esencialemente el mismo que para

incluir una textura como fondo, aunque en este caso no es necesario corregir las
zonas de intersección entre documentos, ya que éstas encajan perfectamente y no
se perciben desfases de color o de forma. Veamos unos cuantos ejemplos.
Figura 58.
Cuadro de diálogo Modificar
degradado, paleta Opciones v ileti. Elírjrqa I - ~ I
~ ~ ~ ~
Arul. R n p . ,.h.rnirillo
de degradado y documento. A ~ C ,Arniiilla.
I, AZS,I
-
Ciegririavo
T~P
b.lod,i:c
li-,m,ms.m, .I ,:m~l+la t l s r lcji
-7
3 P Mi:r.ari
--
-1
P Tramado
En la página siguiente puede observar una simulación del efect;.

1
1
En este caso hemos

-
--
Largar.
mardar..
1
1
colocado cada uno de los iconos de color en puntos regulares consiguiendo un

efecto uniforme a lo largo de la superficie. El punto de ubicación de cada uno desde
el primero hasta el último es de: 10 %, 20 %, 30 %, 40 %, 50 %, 60 %, 70 %, 80 % y
90 %. Esta será la imagen que emplearemos para crear el fondo. La etiqueta HTML
sigue siendo la misma que utilizábamos en imágenes compuestas por texturas. El
documento tienen unas dimensiones de 1OOOpor20píxeles.Los tamaños de archivo
conseguidos son de 2'35 KBcon JPEG calidad 3 progresivo 3 y de 6'91 KBcon GIF
8 bits con tramado de difusión.
RCb-- -
Figura 59.
Documento.
Este degradado, creado a

partir de dos colores, nos da
buenos resultados con
indexados de 8 bits y
7 bits con tramado de di-
fusión. Sin embargo, en co-
lores indexados los resulta-
dos van menguando a me-
dida que se incluyen más
colores para su creación.
Figura 60.
Cuadro de diálogo 1-
Modificar degradado ~miceiar- 1
y documentos.
Ni~cvo 1
C-bar narnbre 1
En esta ocasión utiliza- Asu"~~: co!oi- r Iransparenua
mos el degradado para
crear un fondo dividido en
Elimiriar 1
dos zonas. Para ello he- Duplicar 1
mas usado dos colores.
Colocando el punto final
Cargar.
A
del prímero en el 25 % y Guardar
J
el punto de inicio en el
30 %. De este modo con-

seguimos dos colores uni-
formes y una pequeña de-
gradación entre ambos, por
lo que utilizando indexados
de 4 bits con tramado de
difusión conseguimos un
resultado aceptable y bue-
no con 8 bits. Con JPEG
calidad 1 progresivo 3 da
buenos resultados y un ta-
maño de 1'71 KB y de 2'55
KB con GIF 4 bits y trama-
do de difusión.
- - - - -
Figura 61. -
. - - - -- - -
Cuadro de diálogo 1
Modificar degradado
y documentos.
4
Nuevo
Para crear un efecto cortina se Abtar Color lrmparencia Cahu ni
han colocado los diferentes Elirnini

iconos de color en puntos
irregulares consiguiendo el
aspecto de cortina colgada 2
como observamos en la
illustración inferior. En este caso Guardar... 1
como en el primero mostrado 7
se nos plantea la mis-

ma disyuntiva, ya que
con GIF los resultados
van menguando a me-
dida que se incluyen
más colores para su
creación. Un color
indexado de 8 bíts
con tramado de difu-
sión de un tamaño de
2'31 KB y 6'39 KB
JPEG calidad 1 pro-
gresivo 3
nota...
Trabajando con GIF los aegraaaaos pueaen aparecer un ramo
defectuosos. ya que a medida que incluimos un mayor número de colores
para su creación en mayor grado aparecerá posterizado. Además, a lo dicho
1
hay que añadir, que los colores del degradado deben ser los contenidos en la
paleta general. por lo que restringe sus características y, en consecuencia.
su efecto.
nota...
Para producir el efecto de doble cortina simplemente situaremos
un centro en las especificaciones del cuadro de diálogo Modificar degra-
dado. Si las mitades son simétricos la imagen aparecerá más equilibrada.
Definir las etiquetas FRAMESET

y FUME para
Etiquetas destinadas en un principio para subdividir la pantalla en cuan-
tos marcos deseemos, podemos, especificando ciertos atributos, utilizarlas para
crear un "efecto cortina" como fondo. En un principio es posible crear páginas
Web únicamente mediante subdivisiones, es decir, dividiendo la página en varias
facetas. Éstas son las llamadas páginas de marcos en las que debemos determi-
nar los documentos HTML que irán en cada una de las parcelas creadas. Sin em-
a
bargo, en este tipo no podemos especificar ni texto ni etiquetas HTML. Por otro
lado, nos encontramos con las páginas de contenido, las habituales, las diseña-
das con textos, gráficos y todo tipo de elementos propios de un documento de
estas características.
Como podemos deducir las páginas de marcos son minipáginas de conte-

nido. Esto aplicado a una página Web donde deseemos aplicar un efecto cortina
habremos de tenerlo en consideración, pues cada uno de los elementos conteni-
dos en cada marco habremos de especificarlo dentro del paquete integrante de
cada marco. Por ejemplo, si dividimos la página en dos marcos y deseamos colo-
car en un marco el texto y en el otro los gráficos; en la etiqueta F U M E de cada
marco especificaremos la dirección htm de cada documento mediante el atributo
SCR el URL. El URL de cada documento es en definitiva la dirección de la
página de contenido que deseamos colocar en el marco, por ejemplo, documento
foto.htm. Por lo que deberemos escribirlo del siguiente modo: <FRAME
SCR=«URL»> (URL sería foto.htm). Así, dentro del documento foto.htm esta-
33
rían contenidas las imágenes, por ejemplo y, en el FRAME del documento

. texto.htm estarían contenidos los textos de la página Web.
Retomando el tema, lo que nos interesa es saber cómo y qué debemos

hacer para que nos aparezca dividida la página Web con dos cortinas, una a cada
lado y de igual tamaño. Como es lógico se han de determinar en qué tanto por
ciento dividimos la página y en qué dirección. Estos datos han de incluirse dentro
de la etiquetaFRAMESET y los escribiremos del siguiente modo: <FRAMESET
COLS= 5 0 %, SO%>, si la dividimos en vertical y <FRAMESET ROWS= 50 %,
SO%>, si la dividimos en horizontal. Pero, además, hemos de incorporar una
serie de datos como son el espaciado del borde de separación entre sendos mar-
cos (en este caso cortinas). Si no lo hiciésemos nos aparecería por defecto una
línea de separación con relieve y con un cierto grosor, que ya habrá visto en más
de una página. Aunque, en este caso, han de especificarse en la etiqueta FRAME
de cada marco escribiéndolo del siguiente modo: <FRAME SPACING=O
BORDER=l>.
Figura 62.
Visores de Microsoft lnternet
Explorer respectivamente.
La página Wmonline es un ejemplo re-

presentativo del uso de la herramienta %IrWrani~ü&
degradado para diseñar un fondo sen- r - * . , @.lrlmg 8 3lwTng
i C~ndiinahing
3
cillo pero efectivo. El fondo blanco con ) Ti'lirhni
, ctar szrage
un texto y vínculos en azul parecen una W r l X New , cC:ors
, ~ rloter!.
illrnKnr
C ~ S ~ S
combinación perfecta para una agrada- ,, ~F n* l:?~r l~~~Pn. ?r~e-81anLs

aaf
i0l
ble lectura; no obstante, destacaría Advmmed Seirsh , F a í - an-,,ii' Pan*'
&Y:;
como ciertos vínculos sobresalen de la sllowk", cm , F c t Appllwe <lis

zona delimitada por el degradado inte-
rrumpiendo la función del mismo: sepa- .
rar ambos apartados. Davescomic no ..

nos muestra el diseño de una cortina me-
diante páginas de marcos, sino cómo
mediante páginas de marcos se ha com-
puesto la página. Son visibles las dife-
rentes particiones en las que se ha divi-
dido el diseño, todo ello con el fin de
aplicar otra estrategia para su presenta-
ción en pantalla, siendo el fondo y la fi-
gura parte del mismo, es decir, en cada
página de contenido el fondo es un
gráfico que contiene un fondo negro.
nota ...
Si trabaja con el navegador Nestcape Navigator versión 3.0 o
Microsoft lnternet Explorer, los atributos SPACING y BORDER pue-
den ser sustituidos por el atributo que integra ambos FRAMEBORDER,
dándole a éste un valor de O.

Para dmdir la página en dos mitades iguales y colocar una ima-
gen como fondo a modo de cortina ha de especificarse del siguiente
modo (donde cortina1 y cortina2 corresponden a las dos mitades de la
cortina y son el URL de las respectivas páginas de contenido):
<FRAMESET COLS= SO%, SO%>

<FRAME SPACING=O BORDER= 1 SCR=cortinal.htm>
<FRAME SPACING= O BORDER = I SCR=cortinaZ.htm >
<IFRAMESET>
Para que el efecto parezca más real es probable que desee colocar texto
centrado en la página e, incluso, que éste sea un vinculo. Para resolver esta situa-
ción podemos recurrir a dar nombre a cada marco. De este modo, incluiremos
parte del texto como título, mediante el atributo NAME, de cada uno de los mar-
cos; por ejemplo, <FRAME SCR= cortinal.htm NAME= FilmVision> y
< F U M E SCR= cortina2.htm NAME= Presents. Como puede observar nos
hemos limitado a presentar en qué etiqueta ha de ir colocado el atributo saltándo-
nos otros atributos que contiene. Lógicamente, el número de atributos incluidos
en la etiqueta F U M E dependerá de las características del diseño de la página
que en esta breve explicación no tienen cabida y, que mucho me temo, podrían
despistarle de lo que se pretende tratar, por este motivo han sido excluidos.
FONDOS CONSTITUIDOS
POR IMÁGENES
Existen distintas posibilidades para utilizar imágenes como fondo. Si eli-
ge imágenes con bordes que no coinciden, quedarán bordes visibles distribuidos
por la página Web cuando la imagen se disponga en mosaico. Algunas veces, éste
es el efecto que se busca, no obstante, con frecuencia, el efecto deseado consiste
en crear un mosaico liso, de forma que el fondo aparezca con un color y un
motivo, como por ejemplo, el logotipo de una empresa.
El gran problema que presentan hoy por hoy este tipo de fondos, como en
los dos casos anteriores, es que trabajando con formato GIF sus colores deben
estar contenidos en la paleta de la página. Este hecho restringe en gran medida las
características del mismo, a excepción de que el fondo sea una parte relevante del
diseño de la página o que ésta solamente contenga información visible en forma-
to texto y algún que otro elemento gráfico, como pueden ser botones o marcos.
En estos casos puede resultar muy enriquecedor un fondo gráfico, sin olvidar que
el texto debe ser legible.
El proceso de elaboración puede consistir en una simple reducción de

tamaño de la imagen o, bien, disminuir o incluso transformar la imagen para que
esté acorde con los colores y las características del conjunto de elementos que
constituyen la página.
Figura 63.
Documento.
Esta es la imagen original

que queremos utilizar
como fondo. En un princi-
pio nos interesa modificar
sus dimensiones y esta-
blecer una medidas más
cuadradas. Pero antes
duplicamos el docu-
mento, pues nos interesa
conservar éste con sus cualidades específicas. La imagen original está constituida por
unos tonos violetas, naranjas, amarillos, blancos y negros. Colores que no nos intere-
san, por lo que procederemos a aplicar unos ajustes de Tono/saturación para susti-
tuirlos por otros más acordes con nuestros intereses.
Figura 64.
Cuadro de diálogo
Tamaño de imagen
y documentos.
Tamaño de wream
En la imagen transformada (la
duplicada) hemos procedido a
reducirla hasta tener unas di-
mensiones de motivo. En la
Re~oiucm I;iI- ilustración superior izquierda se
( pixehipuhp3o I( muestra tal y como quedaría con
tener proporcion
unas dimensiones de 100por 75
píxeles. En la inferior izquierda
los valores son en ambos casos
de tonos terrosos mediante la aplicacion de

una coloración total en el documento.
. - ...
ii
_- -- -- Y*L _- I-i- .
FBi- <
+*?> r:
Aqut mostramos tal y como queda la
imagen de 200 por 150 píxeles en
GIF 8 colores con tramado de difu-
sión 9,9 KB y JPEG Calidad 2 y
progresivo 3. $23 KB
m
Figura 65.
Cuadros de diálogo
Brillolcontraste y
~xplorerY documentos.
En este caso, nos interesa utili-

zar el nombre del programa
como fondo. Dadas las carac-
terísticas del documento origi-
nal nos proponemos suavizar
.IJ -
Previsualización las formas y contrarrestar el
color del documento en gene-

ral. Con este fin nos dirigimos
al comando Brillo/contrastey
modificamos los valores de
contraste hasta un -84. Esto
permite reducir el relieve y uni-
ficar los colores generales de la imagen, con el fin de que
,.
YYll
r-,.," I
.. .u,,
.>. cumpla las necesidades reque-
A
., t,-..- *Ui
,2
' 1 /'.
.. .,a
e .,&.-*; ridas que son: aparecer como
-
P.%*&
.& ?L.-
-.
,.l.. ',
.&e ,:?-- , 7."
- "-k, -;"-".* -' fondo y subrayar, en un segun-
' do plano, el programa del que
--
se está dando información.

En la ilustración de la izquierda
,se muestra1 tal y como queda-
.- ría en el visor del navegador,
por ejemplo del Explorer.
Las dimensiones originales han
sido mantenidas siendo éstas
de 299píxeles de anchura por
73 píxeles de altura. Por otro
iI
'
! lado, los colores han sido
r
.d.
ses, de este modo, el fondo sustuidos por una gama de gri-

aparece más neutro. Las ilus-
traciones de la derecha mues-
tran dos ejemplos de las prue-
bas realizadas. La superior es
un documento JPEG calidad
1, progresivo 3 ocupando un
tamaño de archivo de 2,27
KB, mientras que la inferior es
un documento GIF de 3 bits,
paleta adaptativacon trama-
do de difusión ocupando un
tamaño de 2,55 KB.
nota ...
Cuando trabajamos con mosaicos de imágenes el atributo BACK-
G R O U N D viene especificado t a l y como se explicaba en el apartado Defi-
nir el atributo BACKGROUND para un fondo con texturado, ya que
igualmente utilizamos archivos creados para ser empleados como fondos.
Siempre que use imágenes como fondos procure que los colores
elegidas estén dentro de una misma gama, así evitaremos que parezcan
ciertas zonas más visibles que otras, por e l efecto óptico que se produce por
la combinación de los colores del fondo con los colores de los documentos del
primer plano.
L . L . r . . , . - .
Figura 66.
--.
..-- 2" 1.
.-
' .r,
"'3. -*
a Visores de Microsoft lnternet
. .. . . -7
-
* < - e *^ * - Y - .
1 AmericanXpress ha utilizado su logo-

tipo como fondo, aunque podemos
comprobar como éste no aparece repe-
tido de forma alideada, sino con cierto
desfase. En este caso enriquece el fon-
Lnrl Mlnute
Tnvel Bimabu!
Xen TNI Werk
2 4-2/10
do, pues hace destacar en mayor medi-
4 1n 1-n MAS,.
NOW
n- ,,
Wl~.mcl Ir<on~,x ,
da el logotipo, que según las caracterís-
el,,
U,w l..i.nrlin
&m
*!.M,, a A"
rm.rn ir.rrI
,cm.>
..f.
<*e ., ticas que posee: letra pequeña y dibujo
,' continuo podría aparecer confuso. Sin
-'
," ,,
.r i. - : -i J B embargo, los colores grises y suaves en
L."> Ch., L.,,
r..
.- . . ..^..j. ._1." I . LJ, l r . . .J "...

l
.
,
.-- .
1
-.
-
_*
-. . .
-
v...
los que ha sido confeccionado hace que
h.
-- ' " ocupe su lugar en la página.
En la página de Jcpenny ha utilizado el

nombre como fondo en una de las
,,d.m, ,-., .L., PJ.. zonas en las que ha sido dividida. Tie-
,._._ ..+ .C. ! , a ..., 1--
ne un fin distinto, ya que aparece como
m elemento preponderante donde apare-
ce siendo el único elemento visible. Con
~ ~ . , . ~ . , ~ , , ~ ~ . . ~ ~ - h,.i n . ~ . ~ n . ~ ~ ~ ~ . .un .V., <IA.I ~ color de fondo verde y combinándolo
."-.,. .....
- - S
-.-.
i. .ii. ..**
ks(uii..i .a,.,ril.,.- Y-
,.m
\hq.nlq".ur.ln.ri
...
.h.. ., ,,,
CM
iinil.r<D.iI
con un naranja y azul en las letras ar-
.,. .,.- . ... l..i.nii.i.rl<P.nn*l,,
Eniu,n-~...*i.
, .,,. .,,,. ,"l.
moniza con el resto de los elementos

;
.... , + -
>
que aparecen en las otras dos zonas.

L,
Imagemaps o vínculos como fondo

Ver imágenes solitarias como fondo es un tanto difícil de encontrar en
una página Web, pero no imposible y, qué decir de mapas de imagen pues es casi
improbable visualizar en el navegador de este tipo. Pero que no hayamos visto
páginas elaboradas de este modo no quiere decir que no podamos diseñarlas,
aunque la programación será un tanto más compleja, ya que deberemos recurrir
al proceso descrito en la confección del efecto "cortina ".
Fraccionar el espacio del que disponemos en pequeñas zonas puede re-

sultar muy útil cuando debemos hablar o tratar aspectos bien diversos dentro de
una misma página. Un fondo creado con diferentes colores, imágenes o texturas
puede resultar muy enriquecedor, en estos casos. Sin embargo, dividir el área en
diferentes colores no requiere de una división de la misma en distintos marcos,
pues, como ya vimos, esto puede ser resuelto con un degradado. Ahora bien, qué
sucede cuando deseamos dividir la página en diferentes áreas de trabajo y quera-
mos que una tenga un fondo de color sólido, otra una textura y otra, por ejemplo,
un vinculo. En este tipo de diseños más complejos y sofisticados debemos recu-
rrir a una división de la zona de trabajo mediante marcos. En cada uno de los
marcos y en sus respectivos documentos htm especificaremos las características
del fondo. Es como si trabajásemos con varias páginas Web al mismo tiempo,
pero con unas dimensiones distintas.
Z
En este apartado no hablaremos de cómo debe crear un fondo sólido para

este tipo de páginas o, como crear una textura, etc.; pues, ya fueron tratados en
sus respectivos apartados. Sí que nos centraremos en cómo debemos preparar
una imagen o mapa de imagen para incluirla como fondo en un fondo múltiple.
Es posible que este tipo de imágenes sean rectangulares, en estos casos,

no habrá mayor problema que reducir el número de colores del documento, elegir
el tipo de formato, reducir el tamaño físico del documento, si procede, o transfor-
mar la imagen con el fin de unificarla con el resto de elementos que componen la
página completa. No obstante, debemos recordar que estamos trabajando con
elementos que, aunque están visibles en la misma página son, en realidad ele-
mentos que pertenecen a documentos htm distintos, aspecto éste importante que
no debemos olvidar. También puede darse el caso que el mapa de imagen sea
circular, elíptico o con forma irregular, en estos casos, utilizaremos el formato
GZF para aprovechar las capacidad de tratar las zonas transparentes del docu-
mento.
Webs con Photoshop
La ilustración superior de la izquierda muestra el logotipo

que deseamos colocar en la zona superior de la página
Web. Éste tiene unas dimensiones de 152 por 152
píxeles. Ha sido tratado en su totalidad con las letras in-
corporadas. En formato GIF con una paleta adaptable
de 256 colores y tramado de difusión nos ocupa
extraemos los colores que utilizaremos en las otras dos

zonas o marcos en las que hemos dividido la página.
Refiriéndos a este aspecto comprobará que hemos crea-
Documentos.
a continuación, hemos
subdividido en horizon- -
tal el primer marco crean-

do dos marcos de 152
por 152 y 152 por 448
píxeles. La ilustración de
la derecha muestra el es-
quema de diseño seguido
en un documento de
Photoshop para compro-
-
bar medidas y otros as-
pectos relativos a transfor-
maciones de documentos
relacionados con la pági-
- na. La ilustración inferior
muestra el diseño general
del fondo siguiendo un pro-
ceso de división mediante
marcos los cuales serán
de 19 OO/ y 81 % y 19% y
811'0 respectivamente. En
el marco superior e infe-
riorse ha utilizado un co-
lor sólido como fondo.
Aunque en el superior se
verá exclusivamente el
logotipo que, al mismo
tiempo será un mapa de
imagen. También pode-
mos colocar como fondo el
documento que contiene el
logotipo.
Preparar fondos y texturas ,,
Figura 68.
Documento.
En zona inferior de la izauier-

4
da incluiremos los distintós te-
mas a los que se puede dirigir
el navegante a modo de víncu-
1
los. El BGCOLOR estará es-
pecificado simplemente con el
número hexadecimal al que
corresponde el color usado. En
el marco más grande hemos
utilizado un documento, por lo
que en BGCOLOR del docu-
1
mento htm al que pertenece
vendrá especificado, con el 1
nombre del archivo. Este ha sido creado mediante un degradado constituido por
colores incluidos en el logotipo. En este marco aparecerán fotografías relacionadas
con los temas tratados, vínculos, texto y mapas de imagen.
Definir las etiquetas FRAMESET

y FRAME para un fondo «múltiple»
CL
Laspáginas de contenido ya sabemos que son las habituales, las diseña-

das con textos, gráficos y todo tipo de elementos propios de un documento de
éstas características. También sabemos que cada marco contiene su propiapági-
na de coiztenido; esto posibilita que en cada documento htrn respectivo de cada
página de contenido podamos utilizar y diseñar un fondo determinado. En el
caso mostrado en la página anterior, se ha intentado unificar los colores que con-
tenían cada uno de los fondos de los respectivos documentos aunque esto no
tiene por qué ser así. Del mismo modo, nos ha servido para mostrar cómo y de
qué manera podemos utilizar un mapa de imagen o vínculo como fondo, ya que
éste era el fin; no obstante también se ha mostrado cómo conjugar diferentes
tipos de fondos en una página de marcos.
Siguiendo con el interés de que podamos llegar a comprender el proceso

mostrado, así como las diferentes vertientes y posiblidades en las que puede apli-
carlas nos disponemos a detallar como pueden dividirse y subdividirse los dife-
rentes marcos creados en una página de marcos. Por ejemplo y, utilizando el
Webs con Photoshop
diseño ilustrado en páginas anteriores diremos que, hemos de dividir el browser

en tres marcos, lógicamente, tal y como nos la presenta hemos de dividir la pági-
na primero en vertical y, a continuación en horizontal, pero vayamos por partes.
En primer lugar hemos de especificar en qué tanto por ciento dividimos la página
y en qué dirección realizándolo en el orden de subdivisión. En este caso la prime-
ra división ha sido en vertical, por lo que lo escribiremos del siguiente modo:
<FRAMESET COLS= 19%, 81%>.El marco de menor tamaño lo dividimos
en horizontal escribiéndolo del siguiente modo: <FRAMESET ROWS= 19%,
SI%>, los tantos por cientos coinciden porque el marco donde colocaremos el
logotipo, que es al tiempo mapa de imagen (perfectamente podría ser también un
vínculo) tiene las mismas dimensiones de altura y anchura. Así lo hemos calcula-
do. En este caso, como en el de la creación de cortiizas, hemos de incorporar una
serie de datos como son el espaciado del borde de separación entre los distintos
marcos. Como ya sabe, si no lo hiciésemos nos aparecería por defecto una línea
de separación con relieve y con un cierto grosor, que en esta ocasión no desea-
mos, por lo que en la etiqueta FR4ME de cada marco lo especificaremos del
siguiente modo: < F U M E SPACING=O BORDER=l>.

Para dividir la página en tres marcos a modo del ejemplo ante-
rior hemos de especificarlo del siguiente modo (donde logotipo, degrada-
do y color solido hacen referencia a las zonas donde se han utilizado los
fondos especificados, al tiempo que corresponden y son el URL de las res-
pectivas páginas de contenido de la página de marcos):
cFüAMESET COLS= 19%, 81%>

cFRAME SPAClNG=O BORDER= 1
SCR=degradado.htm >
</FRAMESET ROWS= 19%, 8 / 9 6 >
<FRAME SPACING=O BORDER= 1 SCR=logotipo.htm>
<FRAME SPACING=O BORDER= 1
SCR = colorsolido.htm >
<IFRAMESET>
</FRAMESET>
I
A Figura 69.
destacado.
--
nota...
,: 2 4-3
. .- . ., . ...................
Si trabaja con el navegador Nestcape Ncnrigator o Microsoft

lnternet Explorer en l a versión 3.0 o superiores, los atributosSPAClNG
y B O R D E R pueden ser sustituidos por el atributo que integra ambos
FRAMEBORDER, dándole a éste un valor de O.
Si quiere que un vínculo cargue su página en un marco en particular

coloque el atributo NAME con el nombre correspondiente en la etiqueta
F ñ A M E del marco correspondiente o en los que desee. Tal y como se explica
en la página 134.
Visores de Microsoft lnternet Explorer.
La página Bloomingdales ha sido confecciona-

da mediante páginas de marcos, presentado
-
una .~ á a i n a
de contenido en la aue el fondo
es un mapa de imagen tal Y ~ ~ l - n
,
laotw-nos
y
,
,
-.>'Y
. . . . . . .'. ,T'
,.
. . .
. -.
.
L
.
l.
...T
..
--
C.,'
1
,,!,'
N
*
"S
1
..+.
--.--
O
- - -.. - .-
Jcpenney no ha introducido un mapa de

imagen como fondo. La página dividida
en cuatro zonas bien diferenciadas es
empleada para separar los aspectos que
1
se tratan en la misma, de lo más genéri-

co a lo más específico, así como un ex-
tenso número de vínculos que nos tras-
ladan a otras páginas.
.
,->-
'
S A L E S R SW~+ALEVE~.(TS
h~O~\IIXLITI:III?
....---.,<..
. . r - - . i
..c. N- - -
2
?CIUFIS!-,
=-7-.
-
-
-
."..."...
&.-~.=-tQ
.._.
...-. ...L......................,.=...-
? ,.-., , d"..L . , .a
* :
,
-"+ #*. ,
-....-..........
,.,-,
. ,-.--., . ---
,Y.-
i.. >,
....C.
.:
l
,v...
7.1-
-
'-*cx-.?ri
PY
,-*,.,=.,-.,-.n.".c
,.-,:
>
,h.
--
- 8
m
-
5 . 4 ~ L1J A Y L ~ Y ~ - ' Ir.: ~ W I
-...
d
143
d
Webs con Photoshop

Hay navegadores en el mercado que no son capaces de interpretar la
etiqueta FRAMESET, esto quiere decir que no pueden visualizar pagi-
nas de marcos. Para este tipo de ususarios es recomendable darles algún
tipo de información o vínculo que les muestre el contenido de la página, con
este fin puede añadir las etiquetas NOFRAME y INOFRAME colocándo-
las del siguiente modo (donde cortina1 y cortina2 son el URL de los docu-
mentos htm:
<FRAMESET COLS= 50'%0, 50%>

<FRAME SPACING=O BORDER= 1 SCR=cortinal .htm>
<FRAME SPACING=O BORDER= 1 SCR=cortinaZ.htm >
<NOFRAME>
<H3> Escribir lo que le parezca oportuno
<P>
Escribir lo que desee <A HREF=cortina 1.htm > nombre de
vínculo </A> escribir lo que desee </H3 >
</NOFRAME>
</FRAM ESET>
La etiqueta <H3 > es utilizada para indicar b cabecera y el nivel

de la misma mediante su enumeración según la jerarquía del párrafo y, la
etiqueta </H3> define el fin del mismo. La etiqueta <P> es utilizada
para marcar el comienzo de un parrafo y</P> indica su fin.
La especificación <A HREF= URL> </A> mediante las etiquetas

<A> y </A> define un vínculo en un documento htm. El documento a su
vez viene especificado mediante HREF y su URL correspondiente, es decir
mediente el atributo HREF =URL.
Los documentos que incluyen zonas transparentes son normalmente
requeridos para unificar todos los elementos contenidos en la página al tiempo
que la hacen más atractiva. Las transparencias son muy útiles cuando las imágenes
contienen un formato irregular o difieren del aburrido formato rectangular o,
incluso si simplemente hemos aplicado un calado. Pero realmente donde se
demuestra toda su eficacia es cuando hemos de colocar texto diseñado en formato
gráfico.
Photoshop nos permite tratar estas zonas transparentes y adecuadas al

fondo de la página mediante el comando GZF89aExport. No obstante, no es lo
único que podemos llevar a cabo con este formato, ya que incluso podemos crear
documentos GZFs animados, aspecto éste que trataremos más adelante en un
extenso capítulo, y entrelazados, es decir, descargar progresivamente el documento
en el explorador de la Web.
Tratar las zonas transparentes de un documentos es más sencillo de lo

que puede parecer a primera vista. Si el documento ha sido creado mediante
Photoshop con fondo transparente, no habrá mayor problema que indicar el color
de fondo, si se trata de un color sólido, en el cuadro de diálogo de Opciones de

GZF89a Export. Si hemos de aplicar una textura o si en la imagen hemos de
cambiar ciertas zonas por el fondo que aparecerá en la página Web, el proceso
será un tanto distinto como mostraremos en los próximos apartados.
EN LAS ZONAS TRANSPARENTES
El método más preciso es el que nos proporciona la herramienta Trans-

parencia desde la máscara del cuadro de diálogo Opciones de GIF89a Export,
mediante esta opción podemos incluir el color que nos aparecerá como fondo en
las zonas transparentes de dicha imagen.
1. En un documento nuevo creado mediante Photoshop con

fondo transparente y en el cual ya se ha tratado la imagen
para ser importada, nos disponemos a cubrir sus zonas
transparentes con el color sólido que aparecerá en la página
Web en la que irá insertada. Pulsamos el comando GIF89a
Export del submenú Exportar ubicado en el menú Imagen.
El fondo del documento ha de aparecer con
el color sólido del fondo de la página Web.
,Para que no se visualice en blanco -esto su-
cedería sino realizásemos este proceso-en-
mascaramos las zonas transparentes con
el color que utilizaremos como fondo.
Traiisparnicia desde rná-cara

1 m
Cargar 1
Figura 70.
Documento PSD y cuadro de diálogo
Opciones de exportar GIF89a. Colores- E r
Transparencias en imágenes ,
47
2. En el cuadro de diálogo Selector de color que nos aparece,

seleccionamos el color que utilizaremos como color sólido.
Figura 71.
Cuadro de diálogo
Selector de color.
En este caso hemos introdu-

cido su valor en modo RVA,
los cuales son R: 53, V: 181 y
A: 192. Permutándolo por el
gris que aparece por defecto
del Nestcape: 192 rojo, 192
verde y 192 azul.
3. De este modo cambiamos el color de transparencia y lo

sustituimos en cada caso por el que nos interese. Si pulsa
Previsualizar observe que el último color de la paleta
corresponde al incluido como color de índice de trans-
parencia.
m
e
Tran-oarercia desde niascai Documento y cuadro de diálogo
I
Opciones de exportar GIF89a.
[Por def-c tal
Colo#d- r e r e de
1
I r n pl'ricza - - -
Cataai 1 -
[ - -. -
Hemos mantenido una paleta Adap-

tiva de 255 colores con la opción En-
trelazado activada. Observe como las
zonas transparentes han sido enmas-
caradas con el color elegido.
Para lograr el mismo efecto puede utilizar un canal alfa o una transpa-
rencia de capa para incluirlas como transparencias en el documento RVA.
Webs con Photoshop
1. Si se trata de un documento indexado en el cual desea crear

zonas transparentes simplemente pulse el comando GZF89a
Export y, en el cuadro de diálogo Opciones de Exportar
GZF89a, active los colores que desea que sean sustituidos
por el color de transparencia en Transparencia desde.
. ..
S
'1
7-
, .
v
Nivel de 1 1
,,. Figura 73.
~Üadro de diálogo Opciones de
exportar GIF89a Selector de color.
Hemos activado el canal alfa #2para cam-

biar el gris del Nestcape por un azul con
los siguientes valores en el modo RVA
R:53, V:181 y A:192.
UQOUODUOOUO
1 I II I T L I ~ J L J O U I~ ~ - ~~nnorinLi1 . 1
n i - - 3 I 1 0 3 W L l O ~ l l l l lnl;PWl3[7mr_J.TiBFI
n T i r n nu~
~ ~n m m
I
lill'Ci
~ o n : ~ o o o i ~ ni i
II
1 --
O-rimrl i n n n r i - C ~ ~ ~ W1 1P1 I -rrmnnanmmd

UL1nCw I i r-.
2. A continuación active los colores mediante el Cuentagotas

* para que sean sustituidos por el color de transparencia, o bien
coloque el Cuentagotas directamente en la previsualización
de la imagen y pulse sobre las zonas que desea enmascarar.
*,- 1 "3 Figura 74.
Elrv-ti 1 1
Cuadro de diálogo Opciones
I
l de exportar GIF89a.
P Friiril*
r A continuación hemos colocado el puntero del

Cuentagotas sobre las zonas que deseamos cu-
brir con el color seleccionado. Observe que los
colores que han sido permutados por el color
, I,L,.,-- de índice de transparencia aparecen marca-
T,W plreo I
dos en la paleta. Si ha de cambiar un color es-
uonuooc~nooun~mr~~~~o~mm~~m pecifico,
m o m m simplemente
m márquelo en la paleta y
n n n o n _ ~ n m n nIIIU ~ i ~ ~q n n m u 7 m m m uuni
o r i m n 1 m;amcoonmmpi ~ c i a J ~ : 2 u a n r i u c todos los píxeles del mismo color que se encuen-
C I U ~ Q7 a + m n u u ~I 1 I I J L ~ O I ~ ~ L Jn n u ~
i n T i r D C E -nuimiorir
nnnClrmi1mnm0m30C~8m
c tren en la imagen pasarán a ser del color de ín-
umnr -0. IUU~~AIUC:- dice de transparencia que haya determinado
mnBC.8- 98HannOmm..
Transparencias en imagenes , 49
1." ,
Figura 75. "
Visor de Microsoft
lnternet Explorer. 7
m
En la ilustracion podemos
-
observar como queda la
imagen en la que se han
tratado sus zonas transpa-
rentes de tal modo que
aparece unificada con res-
pk?!K$ w+*
$
pecto al fondo. Si no hu-
biésemos realizado este
proceso de enmascara-
miento de las zonas trans-
parentes, hubiesen apare- 1
cido aquí de color blanco A
o con el resto de la ima-

gen que no deseábamos ver. En este caso comprobamos que resulta muy efectivo, ya
que la imagen ha sido calada y el color del fondo se entremezcla con los colores de la
imagen
'-
nota ...
't
Si la imagen ha sido cortada mediante cualquier herramienta de selec-
ción de un documento mayor no olvide quitar los halos de la misma, para
que ésta quede completamente unificada con el fondo.
Consejo ...
En algunos proyectos deberá trabajar con una palera muy reducida.
En la mayoría de casos lo más recomendable es que no active, mientras
realiza el trabajo, la opción Suavizado. Cuando suavizamos los bordes de
una selección o capa Photoshop crea una transición gradual evitando un
cambio brusco, constituido por los colores de la imagen que al indexarla
puede provocar alteraciones de color con respecto a los colores colindantes.
Webs con Photoshop
APLICAR UNA T E X T U m
EN LAS ZONAS TRANSPARENTES
DE LA IMAGEN
Camuflar la zonas de un documento que han de ser enmascaradas con la
textura del fondo puede ser un tanto más problemático, sobre todo si se trata de
un fondo que reproduce iconos, logotipos o texturas con formas determinadas.
No sucede lo mismo cuando trabajamos con texturas muy regulares, como por
ejemplo, la textura de la arena. Como ya ha podido imaginar en estos casos colo-
camos una réplica de la textura en la capa fondo del documento haciendo que ésta
sobresalga por todas las zonas transparentes del documento que nos interesa. De
este modo conseguimos que una vez colocado el documento sobre el fondo de la
página Web, éstos queden completamente fusionados.
1. En primer lugar hemos de tener abiertos en el escritorio de

Photoshop el documento que contiene la textura y el
documento en el cual clonaremos la misma como motivo y
como fondo. A continuación seleccionamos todo el
documento y lo definimos como motivo mediante el comando
Definir motivo.
.?
Photoshop respectivamente.
Pegar
Pegar dentro Mayús
el comando Todo y,
será clonado en la
capa denominada
fondo para cubrir to-
das las zonas trans-
parentes del docu-
mento que aparecen
mado una degrada- formadas por un mo-
ción en los contornos saico de cuadrados.
mediante un calado
de 1 O píxeles. -- -
Transparencias en imágenes ,,
2. Con la herramienta Tampón y habiendo seleccionado
previamente la opciónMotivo (alineado) procedemos a cubrir
toda la capa foizdo con dicho motivo, tal y como aparece
representado.
[ Flavegador 1 Info] Opciones de tampón \I b' 1 1 , 1 . o . -101xfI
Figura 77. 4 -
Paletas opciones de tampón y Ca- -
pas respectivamente, documento
de Photoshop y Visor del navegador T:
Microsoft lnternet Explorer. I
Capas Canales Traza s
Los valores de opacidad y modo se han I N ~ ~ ~ ~ ~
mantenido para no alterar las caracterís-
ticas de la textura. Observe como ha
r Preservar transparencia
m
quedado el documento, parece que ya
está listo para indexar; no obstante no
nemos de olvidar que el documento que
se utilizará como fondo tiene sus propios
9 o;d
colores, por lo que al indexar éste debe-
remos mantener todos los colores que - r
contiene el fondo con el fin de que no I
sufra alteraciones. E!T?-F=
Una vez colocada la imagen
en la página Web comproba-
- -
--
rA -I
4
_o
mos que este tipo de texturas ,.. .r
7
no provocan alteraciones en
la misma cuando los docu- I
mentos con zonas enmasca-
radas son colocados En este "
caso no ha sido necesario ia
adecuar la paleta para man-
tener todos los colores que
constituían el fondo en el do-
-
cumento, esto ha sido debido
a que la mayoría de colores
que componen la imagen son
los azules del fondo 1
Webs con Photoshop

Para visualizar la imagen conjuntamente con el fondo y compa-
rar resultados puede hacerlo simplemente introduciendo los datos del fondo
y los de la imagen. Si el fondo es una imagen escrita (donde textura.gif y
arenisca.gif son la textura de fondo y la imagen respectivamente):
<HTML>
cHEAD>
<TITLE > fondos con textura </TITLE >
c/HEAD>
CBODY BACKGROUND =textura.gif>
<IMG SCR=arenisca.gif WIDTH =283 HEIGHT= 187>
c/BODY>
cIHTML>
Si el fondo es un color sólido escriba (donde 35B5CO responde al

número hexadecimal correspondiente al color seleccionado y azul.jpg a la
imagen seleccionado):
<HTML>
< HEAD>
<TITLE >fondos con textura </TITLE>
<IHEAD>
<BODY BGCOLOR=#35BSCO >
CIMG SCR=azul.gif WIDTH=283 HEIGHT= 187>
<lBODY>
c/HTML>
Los atributos de anchura (wicith) y altura (height) de la imagen no

es necesario que los incluya en estas circunstancias. Sin embargo, para las
especificaciones de la página completa es aconsejabe incluirlas con el resto
de atributos, pues permite que aparezca la imagen con mayor rapidez
en el visor del navegador.
Transparencias en imágenes , 53
Cuando se trata de texturas irregulares donde aparecen ciertas formas

que se repiten, hemos de emplear estrategias específicas con el fin de encajarlas
cuando sean montadas, ya que en cada diseño la resolución puede ser distinta.
Figura 78.
Visores del navegador
Microsoft lnternet Explorer
respectivamente.
Observe la ilustración, ha sido

colocada sin considerar dis-
tancias especificas, simple-
mente se ha determinado la
ubicación: derecha e izquier-
da en cada una de las imáge-
nes. Comprobamos como las
texturas no coinciden y se
percibe un cierto desfase en-
tre la textura del fondo y la
L '
incluida en las fotogra-
I r , . r , r .<*
m fías. No es el caso de la
1
- ilustración inferior. En
ésta se ha corregido el
desfase existente in-
-
cluyendo un paráme-
4
- ---. tro de margen entre la
imagen y el inicio de la
cS textura en la zona su-
perior. De este modo
hemo conseguido evitar
-
:-&
-
-
-
el efecto desagradable
que se producía ajus-
tándola mediante una
apurada colocación.
- -. . - - - A
L
nota
Un método eficaz para hacer coincidir las texturas consiste en
anadir un margen, ya sea de altura o anchura. según sean las necesidades.
I
Webs con Photoshop
La ilustración superior de la página anterior responde al siguiente

esquema(donde WIDTH=283 HEIGHT= 187 responden a las medidas
en píxeles de las imágenes y ALING=RIGHT y ALIGN=LEFT a la ali-
neación de sendas imágenes respectivamente):
cHTML>
c HEAD >
< TITLE> fondos con textura </TITLE>
</HEAD>
<BODY BACKGROUND=texturaI.gif>
<IMG SCR=tropicalZ 1 .gif WIDTH =283 HEIGHT= 187
ALIGN=RIGHT>
<IMG SCR=islasholidays.gif WIDTH=283 HEIGHT= 187
ALlGN=LEFT>
</BODY>
</HJML>
La ilustración inferior de la página anterior responde al siguien-

te esquema (donde VSPACE=óO y HSPACE=O son las distancias en pixeles
entre la imagen y los márgenes horizontal y vertical):
<HTML>
cHEAD>
< TITLE> fondos con textura </TITLE>
cIHEAD>
<BODY BACKGROUND=textura l.gif>
<IMG SCR =tropical2 1 .gif WIDTH =2 83 HEIGHT= 187
VSPACE=áO HSPACE = O ALIGN= RIGHT>
<IMG SCR =islasholidays.gif WIDTH =283 HEIGHT= 187
VSPACE=óO HSPACE=O ALIGN=LEFT>
clBODY>
c/HTML>
Transparencias en imagenes ,
LEFT y RIGHT son utilizados para alinear imágenes a la izquierda y 1
I
a la derecha respectivamente. Cuando añadimos este tipo de atributos el
texto incorporado es colocado alrededor de la imagen.
Consejo ...
I
Aunque los atributos HSPACE (espacio horizontal) y VSPACE (es-
pacio vertica1)son utilizados normalmente para que el texto o cualquier
otro elemento incorporado no choque con la imagen, puede emplearlos
para alinear la imagen con textura incorporada con respecto a la
textura del fondo.
Ya hemos comprobado en la página 153 que buen resultado nos ha

dad6 y aunque la imagen aplicada en el fondo tiene las dimensiones de 100
píxeles de anchura por 75 píxeles de altura hemos debido añadir de espacio
vertical 60 píxeles para que las texturas encajasen perfectamente. No obs-
tante, este sistema impide colocar cualquier elemento dentro del
espacio utilizado como margen, aspecto que debemos recordar.
Remodelar la tabla de colores

Como indicábamos al principio de este apartado, las texturas suelen con-
tener un número concreto de colores, dependiendo de las características de la
página puede ser mayor o menor. Cuando la textura es añadida en las zonas trans-
parentes de las imágenes incluidas no hemos de olvidar que todos los colores de
la textura deben estar incluidos dentro de la paleta de la imagen, gráficos u obje-

tos con transparencias, por lo que el proceso para la reducción de colores en la
imagen es un tanto distinto.
1. Tenemos el documento que contiene la textura a modo

indexado. En éste hemos reducido con anterioridad el número
de colores, para saber con exactitud el número procedemos a
visualizar la tabla de colores de dicho documento. Para ello
pulsamos sobre el comando Tabla de colores del submenú
Modo del menú Imagen.
- -
Tabla:
- 1 A medida ,........... C17.. ........
Cancelar 1
cargar.. 1 Figura 79.
I
Guardar.. Cuadro de diálogo
Tabla de colores y
documento.
Comprobamos en la ta-
bla de colores de la tex-
tura que está constitui-
. da por 32 colores. Para
añadirlos a los de la ima-
gen hemos de guardar la
paleta y eliminar todos
los negros añadidos.
El paso siguiente consiste en guardar la paleta corres-

pondiente a la textura para añadirla con posterioridad a la
paleta de cada una de las imágenes incluidas en la página
Web. Como es lógico si deseamos que la imagen contenga el
número máximo de colores de éstos, habremos de restar los
colores que corresponden a la textura que añadiremos. Por
ejemplo, si queremos que la imagen contenga 256 colores
dentro de este grupo estarán incluidos los 32 colores que
pertenecen a la textura.
Transparencias en imágenes ,,
Figura 80. * .X
Cuadros de diálogo Tabla de colo- Cigaidai en 1 A pro~sctos J
. al
res y guardar respectivamente.
6iidrdaf ramo
Lo guardados con la extensión que más nos

convenga, en esta ocasión ACO. Cuando la car-
guemos en la paleta Muestras eliminaremos los
negros sobrantes y la volveremos a guardar.
3. A continuación en la paleta Muestras sustituimos la paleta

que aparece por defecto por la paleta guardada. Con este fin
pulsamos el comando Reemplazar muestras del menú lateral.
serve que para complet:ar los 256 colores

an sido utilizados negros. Hemos reempla-
zado los colores con el fin de eliminar dichos
Figura 81.
negros y hacer que la paleta esté constituida
Cuadro de diálogo Cargar y pale- exclusivamente por los 32 colores de la textu-
tas Muestras respectivamente.
ra. Para eliminarlos coloque el

puntero sobre el primero de los
negros y pulse la tecla Ctrl (Win)
Opción (Mac) y pulse el botón iz-
Tamaño de archivo 762 byles

4. La paleta tal como ha quedado la guardamos y cargamos la

correspondiente a la fotografía mediante el comando Cargar
del menú lateral.
Para crear la paleta de la imagen o imágenes hemos de realizar
el mismo proceso, por lo que el documento ya ha de estar
indexado siempre habiendo tenido en cuenta que a los colores
de cada una de las imágenes hemos de sumar los colores de
la textura.
Reemplazar muestras... 1 1
Guardar muestras... 1 1
~ o & e de ~ Y C ~ N O
Cuadro de diálogo Añadir
Recuerde que la paleta de la imagen incorporada debe ser la que contiene exclusiva-
mente los colores de la imagen y no los de la imagen con la textura, pues la que
acabamos de crear sumando los colores de sendos documentos será la que utilizare-
mos para reducir la imagen definitiva.
5. La paleta conjunta, que contiene los colores de la imagen y

los de la textura, la guardamos siguiendo el proceso realiza-
do. Será la que utilizaremos al convertir el documento que
contiene ambos en GZF. De este modo conseguimos crear
una paleta a medida que se ajusta a la adaptable en ambos
casos y que no nos transformará en exceso la fotografía al
tiempo que nos aseguramos que los colores de la textura apa-
rezcan. A continuación abrimos el documento conjunto, el
que contiene la imagen y la textura, y procedemos a indexarlo.
Transparencias en imágenes ,
59
Para ello pulsamos el comando Color indexado del submenú

Modo del menú Imagen. De la opción Paleta especificare-
mos la opción A medida cargando el archivo que nos intere-
se, en este caso conjunta.
-.-
."- _ - - - . s .
. A _ - - _ _--_-.-- _- _Cuadros
--, -
S--- L
Figura 80.
de diálogo Color indexado, Ta-
?A - bla de colores y Cargar y documentos.
En el documento conjunto, en el que he-

mos cubierto las zonas transparentes con
la textura que aparecerá como fondo, pro-
cedemos a indexarlo. Deseamos que con-
tenga 256 colores por lo que la paleta
conjunta contiene 224 colores de la fo-
que aparece en el cuadro de diálogo Ta

bla de colores es la paleta definitiva.
mos incluir. Observe en la ilustración in-

ferior como el resultado es Óptimo. Am-
bas partes aparecen sin haber sufrido al-
teraciones sustanciales.
<
- - --
. -- -
.
Consejo ...
Cuando las imágenes contienen zonas transparentes y los colores de
la textura de fondo no están contenidos en la paleta de dichas imágenes,
siempre resultará más adecuado que la textura contenga un número reduci-
do de colores ya que ambas paletas habrán de sumarse y es más importante
no reducir la calidad de la fotografía aunque sea en detrimento de la textura.
Todos los procesos descritos en los apartados anteriores de cómo tratar

las zonas transparentes en documentos GIF y sus paletas son igualmente 1
válidos para cualquier tipo de elemento que debamos colocar en nuestras
páginas Web.
?
'
E N U S C A R A E LAS ZONAS
TRANSPARENTES
Otro método rápido y eficaz que nos permite borrar las zonas transpa-
rentes de un documento GIF consiste en cubrir dichas zonas con una máscara.
De este modo podemos hacer que un fondo sólido o un fondo con texturas apa-
rezca sobre la zona enmascarada. Sin embargo, siempre es aconsejable incorpo-
rar en el documento una porción de la textura o color, sobre todo si hemos incor-
porado difuminados, como por ejemplo una sombra, los cuales tienden a fusionar
colores del fondo con los colores propios. En otras ocasiones puede aprovechar
la facultad de variación de la opacidad en la máscara para producir algún tipo de
efecto entre el fondo y el objeto gráfico en cuestión.
Transparencias en imágenes 61
En realidad este proceso puede ser claramente utilizado durante los pro-
cesos descritos en apartados anteriores. La particularidad de crear ciertas zonas
enmascaradas consiste en producir una degradación entre la textura incluida en el
documento gráfico que hemos de colocar sobre el fondo y éste, consiguiendo una
fusión entre ambos más suave. No obstante, podemos utilizar una máscara que
cubra la totalidad de las zonas transparentes de un documento aunque con toda
probabilidad aparecerá un cierta tosquedad en los bordes como consecuencia del
parche.
1. Al igual que en casos anteriores selecionamos la textura que

colocaremos como fondo y la definimos como motivo
mediante el comando Definir motivo. A continuación la
clonamos en el documento para cubrir la zonas transparentes.
,,,, m
I I I
Naveqador m Opciones de tampón \k
Cpita Ctrhx INormalA- Opd
"lad-A 100%
gopiar Clrl+C
- , . O
Pegar
Pega dentro Mayuc +Ctrl+'/
P..
iear
Turnar
Purgar
n
Figura 81.
Menú Edición,
documentos PSD
respectivamente y h
paleta Opciones
de tapón.
I
En esta imagen era completamente necesario clonar la textura de fondo por presentar
un grado de calado, por lo que existe una zona de transición gradual en la que datos
de la textura y la imagen se solapan. Puede ser el mismo caso del texto en el que se
ha aplicado una sombra.
2. El paso siguiente consiste en seleccionar la zona que hemos de

enmascarar. Para que los bordes queden entre la zona enrnasca-
rada y el resto de la imagen, tal y como se presenta en el docu-
mento superior, aplicarnos el filtro Desenfoque gaussiano.
De este modo logramos crear una transición entre la imagen

y la zona enmascarada más suave y gradual.
- 1l
m . II 0 . m . 1 1 x 1 Figura 82.
,,.l,,,,I<,,,l,,,,I!,,,l . , , , I?,,,l, , , , l?,,, Documento PSD, paletas Canales,
cuadro de dialogo Desenfoque
- gaussiano y documento PSD.
--
2
-
1 Capas Y Canales Trazados \ 1 b'
r RVA Ctrl+" -
- Rol* Ctrl+l
Verde Ctrl+2
-
B - -
-
m AZUI Ctt 1+3
Para aplicar el filtro Desenfoque

gaussiano hemos de activar el canal co-
rrespondiente en la paleta Canales. Una
vez activado introducimos el radio de la
aplicación del efecto, en este caso co-
rresponde a un radio de acción de 3,8
píxeles. Comprobamos en la ilustración
inferior como los bordes aparecen
difuminados haciendo que el efecto de
Radio: píxals enmascaramiento en la imagen sea dis-
-
tinto a como se muestra en la ilustración
superior. Del mismo modo puede reali-
N zarlo en imágenes que hayan de ser in-
cluidas en paginas con un-fondo consti-
tuido por un color sólido.
- l1 . o l x ( t
Figura 83.
Visor de Microsoft
lnternet Explorer.
En la ilustración tenemos
la oportunidad de compa-
rar cómo queda una ima-
gen incrustada en un do-
cumento sin zona enmas-
_
Transparencias en imágenes
P
carada, ésta es la que apa-

rece a la izquierda, y una
imagen colocada con una
parte enmascarada (la
imagen tratada en las dos
páginas anteriores), éste
recha. Como podemos

4
m
es la que aparece a la de- .lii.,
-2
-- -. ow
n ii
remo
- . .M*' i d
PCV
s n-
u
C h-itldir
A,&
lby
,gLn"."mYd
4
n.-*.d.
.
F X ~ C
comprobar las diferencias existentes entre los bordes de un documento y otro no son
apreciables. Sin embargo en ciertos casos será casi imprescindible que enmascare
ciertas transparencias de un documento.
nota ...
Aunque en este capítulo nos hemos limitado a presentar fotografis
para mostrár como tratar las zonas transparentes de un documento, todos
los procesos descritos son imprescindibles en otros elementos gráficos como
tipografías gráficas creadas en Photoshop, marcos, barras o botones con
formas irregulares. Por este motivo todo lo dicho en este capítulo deberá
tenerlo en consideración cuando trabaje con otros elementos gráficos.
TRAI'JSPARENCXAS CON PNG

De momento con los recursos disponibles la capacidad para tratar las
transparencias con GIF nos es de lo más gratificante, no obstante, comprobamos
que las posibilidades que ofrece no dejan de ser muy reducidas, ya que hemos de
trabajar con imágenes de 8 bits, lo cual limita la capacidad para lograr grandes
-a%.-,
dJ)Crrl.b.C
9
- -.
> M í
-
> -
C
-
7
1
1
-,
E**
,
m
-
l
63
Webs con Photoshop
efectos visuales con espectacules fotografías. Esto puede resolverse con l a pro-
mesa del formato PNG de soportar plenamente canales alfa para enmascarar trans-
parencias. Con el fin de que surta efecto será necesario exportar el canal alfa y la
selección que se haya empleado para crearlo.

Las zoilas transparentes las podemos encontrar en cualquier elemento
gráfico de una página Web, tal y como muestran estos ejemplos ilustrativos.
. . . .- - Figura 84.
- O Visores de Microsofi lnternet Ex~lorer
- - respectivamente.
Cdunrverse muestra varios elementos en los

. *
que se evidencía el uso de varios documentos
$,,,'l...
A*
- -. -. -
i 4." - e
gráficos que contienen zonas transparentes

-'*
IrM.. . v .
'C
cubiertas con el color sólido de fondo. En la
.-
r">r"r-#83i
L..
n,-,,1
,
>+a.
a nci b i d iin.%lir L ilustración reseñamos los más representativos
> m,.n
Mi* " M i , C i l W r n .
como son los dos botones GO y BROWSER y
e A los dos textos gráf~cos.
La pagina de Collegewebwear contie-

J. ..
, -
. '..
--
4
.-
.
-
.
-
-
-- - -
ne igualmente varios elementos con Lmk al rhlr ir4
pl 1
zonas transparentes. En este caso ob-
servamos varias fotografías que, como
en el caso anterior, han sido cubiertas
con el blanco del fondo.
l"ilm '
L . , . --.-- - d.
--
- h ' .
El
aTn---
1
Y
Id."
,*i"iS.
- -
- .- - - -
S
-
-*
-
1 *-
-
'.
-.a
y
-
Por ultimo en AmericanXpress se observa

como han sido tratadas ciertas zonas de la ima-
gen central con la textura utilizada en el fon-
do. Observamos que donde aparece el puro
L r . 7 Ilinu,, mi N,<L
Iilrrl llxi iUiiq 2I 21i no se han tratado las zonas transparentes,
ppJ ,..L M-
U, U~l<rn<',I
iI. v pues observamos que aparecen en blanco.
4
\<U
- - L.
,r.it iinm
7.1-1".
F"
.,-,<.,,.",
H*. M"<.
i r
-
Al tratarse este libro de cómo diseñar páginas Web con Photoshop, estamos
dando
.c
prioridad a cómo resolver y crear ciertos elementos gráficos que solemos
ver en la Web. No obstante, esta prioridad, ha de adecuada a sus diseños y aunque
mostramos páginas excesivamente cargadas de dichos componentes gráficos puede
extrapolarlos a proyectos bien diversos, pues el fin de este libro es que aprenda a
diseñar espectaculares páginas para la Web con Photoshop.
Existen elementos de estilo en las páginas Web que vienen determinados

por cómo ha sido diseñada y, en consecuencia, cómo ha sido programada. La
elaboración de la página determina cómo será programada, esto hace que antes
debamos saber qué sistema es el más adecuado. Es decir, si en nuestro proyecto
preponderan los elementos gráficos, es posible que la mejor opción consista en
subdividirla en los diferentes objetos que la componen recurriendo a las tablas y
colocar, en cada una de las celdas, cada una de las partes que constituyen la imagen
o la fotografía, de este modo ahorraremos tiempo de espera para su presentación.
Esto es casi obligatorio cuando la página en su totalidad está formada por un
diseño gráfico que ocupa gran parte del espacio, cuando hemos dibujado un objeto
que engloba todos los elementos importantes, incluso el fondo. En esta ocasión
Webs con Photoshop
no elaboraremos un proyecto de estas características, pero sí que mostraremos y,

de hecho, ya han sido mostrados algunos ejemplos que probablamente fueron
diseñados con Photoshop. Estas formas específicas siguen en la mayona de las
ocasiones las mismas pautas de creación que los elementos más comunes como
ya veremos en el apartado correspondiente.
Los botones, barras, texto gráfico y marcos añadidos como elementos

gráficos son partes esenciales de una página que pueden enriquecer enormemente
nuestros diseños al tiempo que marcar un cierto estilo a los proyectos. En este
capítulo excluimos el texto por considerar que merece un capítulo específico
para desarrollarlo en su totalidad.
Aunque podemos producir marcos con la etiqueta TABLE de HTML, del

mismo modo es posible diseñar marcos con Photoshop. La diferencia sustancial
entre ambos radica en la capacidad de creación que facilita la segunda opción, ya
que, de este modo, es posible producir un número ilimitado de colores y texturas
imposibles de obtener con la etiqueta TABLE, el cual está más encaminado a la
elaboración de tablas. Pero puede ser extrapolado y emplearlo para confeccionar
interesantes marcos variando el relieve, el grosor e incluso ciertos detalles de dise-
? ño; aunque siempre dentro de unas restriciones implícitas por sus características,
como ya veremos más adelante.
Los marcos como cualquier otro elemento gráfico es aconsejable que no

ocupen más de 40 KB pues tardarían excesivamente en aparecer en el visor del
navegador. Esto, en cierto modo condicionará el diseño y nos limitará a unas
pautas. Si el marco ha de ser de grandes proporciones, lo más razonable es que
contenga un número reducido de colores; por el contrario, si el marco es pequeño
cabe la posibilidad de aumentar el número de colores y la inclusión de texturas
más complejas y variadas.
Determinar forma
Los marcos pueden tener formas diversas que podemos englobar en re-
gulares e irregulares. Las primeras pueden obtenerse mediente la utilización de
Diseñar marcos, barras y botones 167
las herramientas de selección como: el Marco, la Ellptica, Columna y Fila unica,

Lazo poligonal, Todo, Invertir y submenú Modificar. Las formas más irregulares
pueden realizarse utilizando las herramientas mecionadas por separado o com-
binándolas mediante la resta y suma de formas. Otro método muy eficaz consiste
en dibujar la forma del marco con las herramientaspara la creación de trazados.
Sin duda uno de los más eficaces cuando se tratan de diseños algo complejos o
con curvas.
1. El primer paso consiste en crear un documento nuevo con

las mismas dimensiones que deberá tener el marco. Si alguna
de las zonas ha de ser transparente activaremos en Contenido
la opción Transparente.
Cuadro de diálogo Nue-

vo y documento PSD.
Recuerde que la resolución

debe ser de 72ppio 96ppi
según sea el caso y el fon-
do del documento es reco-
mendable ponerlo siempre
transparente. Si sabe las
dimesiones que ha de tener
en píxeles cree un docu-
mento con cualquier tama-
ño y después introduzca los
valores definitivos en el cua-
ne unas dimensiones de 425

píxeles de anchura y 14
píxeles de altura.
2. Para crear un marco con las herramientas de selección

procedemos a seleccionar todo el área con el comando Todo
del menú Selección, ya que la forma exterior es comple-
tamente recta.
A continuación, cambiamos los bordes mediante el comando
Bordes del submenú Modificar del menú Selección.
Introduzca en píxeles el tamaño que desea aplicar. Esta es la
forma más rápida y eficaz de crear un marco con medidas
exactas.
Figura 86.
Submenú Modifi-
car, cuadro de
diálogo Modificar
bordes y docu-
mento.
más ancho será el marco.
3 . Ahora queremos redondear el marco por la parte interior

del mismo con este fin pulsamos el comando Redondear del
submenú Modificar del menú Selección.
Figura 87.
Submenú Modifi-
car, cuadro de
diálogo Redon-
dear selección y
documento.
introducido más acentuada

4. Guardamos la selección, por si debemos repetir en algún

momento el proceso de creación del marco, mediante el
comando Guardar selección del menú Selección.
Figura 88.
Menú Selección y cua-
dro Guardar selección.
Destina
- 1-
-
Documento:
cancelar 1
Canal:
- Fluwo II
ración
juevo canal
1. Para crear un marco con las herramientas de trazados

activamos en el documento creado la cuadrícula (menú Ver)
y, acto seguido dibujamos con la herramienta Pluma la forma
del marco que deseamos.
+ , , 12. , , ,
+ 4 , ,,,,, 1 , , , , 14, , , , 1 , , , , 18, , , . 1 ,,,,, I8, , , , 1 , , , a I1 ii
S , , , , , , , a I12, , , ,
# , , , m il4
m , , vado la cua-
0:
1 -1 drícula con el
fin de dibujar
con una ma-
yor precisión
y rapidez.
Figura 89.
Documentos PSE
Con la herramient;
Selección directa
hemos colocado,
-' 1 1 &
1 .; 1
ampliando la zona, ' 1
cada nodo en la !
-.e
posición exacta.
Webs con Photoshop
2. Lógicamente hemos de convertirlo en selección. Para ello

pulsamos sobre el icono Convertir trazado en selección o
sobre el comando Hacer selección del menú lateral de la
paleta Trazados. Recuerde guardar la selección utilizando el
comando Guardar selección del menú Selección.
1 Capas Y Canales y razad dos\ 1 b 1 Figura 90.
- Paleta Trazados y documento PSD.
Es aconsejable después de convertir el trazado en

selección desactivar el trazado, ya que puede dificul-
tar la visualización de los procesos siguientes, al tiem-
po que podemos modificarlo. Compruebe que con
esta opción y en estos primeros pasos, las dimensio-
11 1 @ 1 '
nes del marco son un tanto más difíciles de determi-
nar.
Rellenar y producir efectos

en el marco
Cómo y qué sistemas emplearemos para cubrir el marco es lo que en este
apartado trataremos, por lo menos en parte, ya que cada cual puede servirse de
sus propios sistemas; sin embargo consideramos de vital importancia establecer
ciertas pautas, pues creemos que Photoshop propociona una serie de herramientas
que son enteramente adecuadas para este menester.
En ocasiones el interior de los marcos es cubierto con el color sólido que

se incorpora en el fondo de la página Web. En estos casos lo incluimos haciendo
servir el comando GZF89a Export a la hora de la conversión del documento a
GZF y dejamos esta zona como transparente durante su transformación. Otros
diseños muestran el interior del marco con la textura del fondo o con cualquier
Diseñar marcos, barras y botones ,,,
otro color. En estos casos lo más rápido consiste en enmascarar dichas zonas (ver
pág. 161) que aparecen como transparentes con el fin que la textura o color del
fondo del documento en el que haya de ser colocado sea visible en su interior o en
las zonas colindantes si se trata de marcos con formas externas irregulares.
Los marcos pueden ser de un color sólido, con texturas, trabajar con ca-
nales alfa, producir efectos de calado o de sombras, puede aplicarse mil y un
filtros y lograr efectos complejos, sutiles y maravillosos, como relieve, bajorrelie-
ves o efectos de iluminación que dan como resultado marcos realmente especta-
culares; pero veamos unos cuantos ejemplos y cómo producirlos.
l . En esta ocasión el primer paso ha consistido encubrir la zona

seleccionada con un color. Dicho color entra dentro de la
gama de colores que utilizaremos en la página Web. Éste ya
podría ser perfectamente un marco, sencillo, pero un marco.
Figura 91.
Documentos PSD.
0 -
Hemos selecciona-
do un color con los
valores R: 85, V: 80
y A: 21. Y cubierto
2. Ahora queremos alzadir una sombra al marco. Para realizar

este proceso duplicamos la capa -utilice el sistema que más
le satisfaga- y cargamos la selección a través del comando
Cargar selección del menú Selección.
Una vez delimitada la zona la cubrimos de negro con la
herramienta Cubo de pintura, acto seguido, desactivamos la
selección y aplicamos el filtro Desenfoque gaussiarzo introdu-
ciendo las coordenadas más acordes con las características
del marco y del proyecto en general.
Con la capa superior visible desplazamos el duplicado, en el
cual hemos aplicado el filtro, unos cuantos píxeles más allá
de la original hasta la posición óptima, tal y como se muestra
en la página siguiente.
Activamos de
nuevo la selec-
ción del marco v
Desactivamos y
aplicamos el filtro
1 de desenfoque.
-
Ci esenfclcar
Desentncar m.is
pz-1
Desenfoque suavizado...
Figura 92.
Documentos PSD, submenú
Desenfocar y cuadro de diálogo
Desenfoque gaussiano.
L 1 Lfl I I J r J i * ~
Cancelar
F Previsualizacihn
1
hemos dado un
valor de desen-
foque de 4,4
píxeles dando el
resultado que
muestra la ilus-
tración superior
.
110 (12
m
(14
herramienta
Desplazar, ha
sido ubicada en
la posición de-
. . ..- - .
3. En el marco deseamosaplicar un efecto de bajorrelieve. Para

ello recurrimos al filtro Bajorrelieve del submenú Bosquejar
incluido en el menú Filtro. Pero antes activamos la selección
en la capa o, bien, activamos la opción Preservar las
transparencia en la paleta Capas, para que el efecto del filtro
no afecte a dichas zonas.
Recuerde que este filtro trabaja con los colores de fondo y
frontal activados en ese momento, por lo que antes hemos de
adecuar dichos colores a los que requieran nuestras
Figura 93.
Submenú Bosquejar y cuadro de diáloao
Bajorrelieve y documento PSD. m
En Detalle los va-
Cancelar 1
lores más altos
acentúan el efec-
to, mientras que rñ14nn
en Suavizar los Cromo..
valores más bajos Escayol
producen un efec- Estilngri
to más tosco. En Fotncnr 111
este caso hemos Mtn'elnda rn~drolona
aplicado unos va- Papel c
A
I'
lores de 4 y 7 Pipel h
respectivamente
y la dirección de la
Ral,?, al:
Tampor
xron Ci ir da la lilz Interior
II
luz inferior. Tiza y c
:
l,, , , , t < 1- ,, L --l . , ..,Ir.., . , . . . .
i., . , . . . . . . I . .1.- ,
1 , :
,lalx
.. ,. . . .1 . .
14
. .'
4. Otros ejemplos de resultados que podemos obtener con este

filtro pueden ser los que se muestran en la página siguiente.
Figura 94. L
E
Cuadro de diálogo Bajorrelieve y
documentos PSD respectivamente.
Cancela 1
t
Las ilustraciones inferiores son representativas de
lnR
las variaciones que podemos obtener aplicando
consecutivamente unos valores de detalle y sua-
vizado determinados. Variando el detalle y la di-
rección de la luz con respecto a la anterior nos
dan unos cambios en la confección del marco muy
interesantes, sobre todo las que muestran los dos
@II d* 'a liir 5ieeriot cquimrda
ejemplos inferiores.
IR
Documentos PSD respectivamente.
Estas imágenes muestran como podemos

conseguir marcos originales para un fondo
de color sólido. Trabajando con el color de
fondo y otro color incluido en la paleta y apli-
cando en la zona del marco cierto calado con-
seguimos difuminar los bordes, por lo que
en las zonas transparentes aplicaremos el
color sólido del fondo. Este marco diseñado
para incluir en su interior una onomatopeya
llamativa a modo de reclamo visual, será al
mismo tiempo un mapa de imagen.
5. Ahora queremos distorsionar suavemente el marco para lo

cual hacemos uso de los efectos de distorsión de algunos filtros
del submenú Distorsionar. Veamos algunos resultados
obtenidos.
Submenú Distorsionar y cuadro

de diAlogo Zigzag y documento.
Esferizar... En esta ocasión hemos producidc

Luz difwsa...
filtro Zigzag añadiendo unos valo-
Molineti
res de -26 en Cantidad invirtiendo
Onda.. con dicho valor el sentido de la
Ondas maimas...
I
Figura 97.
-1 m Cuadro de diálogo Rizo y documento PSD.
Mediante el filtro Rizo, incluido igualmente en el

submenú Distorsión, hemos conseguido una rugosi-
dad generalizada en todo el marco. Los valores inclui-
dos son de 100 en Cantidad incrementando el efecto
de la onda en positivo y un tamaño Medio. Los efectos
visuales son los que muestra la ilustración inferior.
Figura 98.
Submenú Distorsionar y Cristal...
cuadro de diálogo Molinete
y documento.
El filtro Molinete nos ha servi-
6. De una de las imágenes obtenidas en estos procesos de

variaciones queremosproducir efectos artisticos en el marco
para lo cual hacemos uso de los efectos que producen algunos
A
filtros artísticos del submenú Artistico, Bosquejar y Trazos
de pincel. Veamos algunos resultados obtenidos.
Figura 99.
Cuadro de diálogo Sombreado y documento. -7 F l
_i
Con Sombreado conseguimos acentuar las formas y
los colores del marco haciéndolo más vibrante. Con
1
una longitud del trazo mínima, un enfoque máximo y J ioox
+
una intensidad mínima obtenemos este resultado.
Figura 100. ~nrrh-1acemados

Submenú Trazos nos con lnla
de pincel, cuadro
de diálogo Sumi-e
y documento.
El filtro Sumi-e siempre proporciona efectos visua-

les realmente gratificantes. Con una anchura de
el contraste entre las zonas y un valor de contras-

te bajo conseguimos este interesante marco.
r
m
v
Bordes rasgados sua-

viza las formas unificán-
1
"
Caircaiei
dolas sin grandes con- COntéCiayon
trastes Un nivel alto de
equilibrio de imagen E$ca~ob iI
nos acentúa el color Es"bg'áf'ca
base usado, los bajos FOtOCw" •
Modelo de med~otono
valores en suavizado y
Papcsl con relieve.
tquilibin dp imagen m-
contraste elimina las di- n
ferencias bruscas entre P ~ !I Phumedo... suavizai r
Rein:ubclon... a
los dos colores base. T
i
--
aiiipini Contiasle F
A
Figura 101.
Submenú Bosquejar,
cuadro de diálogo
Bordes rasgados
y documento.
-
Diseñar marcos, barras y botones ,,
Figura 102. Bordes añadidos...
Submenú Artístico Color diluido...
y cuadro de diálogo Cuarteado...
Espátula...
Vírgulas y docu-
Esponja...
mento.
Fresco...
Lápiz de color... J 10ox -
+ J
Luz de ne0n...
Manchas...
Otro resultado intere- Felículagranulada...
Tanañod-p~n:el
creto lo conseguimos Pintardehaio,,,

con el filtro Vírgulas. plastificado.., A
Con un tamaño de pin- Trazos pastel... T W ~ Fpincd
cel y enfoque reducido y
un tipo de pincel simple
conseguimos este Ha- y
mativo al tiempo que sencillo f dA&
marco. Los filtros de creación de

efectos artísticos producen con
una adecuada mezcla y uso
efectos muy eficaces. Aquí sólo
mostramos unos pocos ejem-
plos de lo que puede lograrse.
Figura 103.
Submenú Artístico y
cuadro de diálogo
4 Bordes añadidos
y documento.
Luz de neón...
En esta ocasión Bordes Manchas...
unos resultados espec-

I ~ i t m d a dde badt
taculares. Aplicando
unos valores reducidos
en anchura e intensidad
de borde y posterización
conseguimos un marco
muy interesante, con efectos y
brillos de acabado metálico, el
marco asemeja una espe
tubería. Cada una de las
ciones logradas nos sirve para
un tipo de página Web.
Webs con Photoshop
Con el filtro Plastificado '
Color diiuido...
sabemos de antemano
el efecto que nos va a Espátula.,,
producir, sin embargo Esponid..,
nuestra sorpresa es tal Fresco ..
que el efecto asemeja Lápiz de color...
más a gotas de agua. Luz de neán...
Aplicando unos valores Manchas...
altos en intensidad y de- P e I í c d ' ~granulada...
Pinte' a
talle y un valor medio en
suavizado, logramos un
efecto mesurado al tiem-
po que vistoso.
-.O
O -
.... .... I?.-. ii",..., . , . . It ..., ....RI . . . t ~ , ' P . . . , . . . . , l I ' J . .
Figura 104.
Submenú Artístico
y cuadro de diálogo
Plastificado y docu-
mento.
En esta ocasión el filtro --~--elieve...

Retjculacjón nos pro- Bordes rasgodos...
porciona un interesante Latoncilb...
marco muy específico CmtQCra~an-.
para colocarlo en una -
-. ....
r'nw...
Escas
página con otros ele-
Est~ln!
mentos semejantes.
Fotoc
Así, con unos valores al- ..
~ o n e l ode medio tono...
8
en densidad y de Papel con relieve...

blanco y un valor bajo en
nivel de negro produci-
mos un curioso efecto T arnp Nivel del bbnco
en el marco. Tiza y
n
Figura 105.
Submenú Bosquejar
Reticulación y docu-
mento.
. . ,.. 1 - . .. ....,
Diseñar marcos, barras y botones
7. En la imagen original seleccionada (pág. 172) también

queremos producir unos efectos con losfiltros del submenú
Textura para lo cual nos disponemos a mostrar cómo queda
dicho marco aplicando los diferentes filtros. Veamos qué obte-
nemos.
G ranulado... h-.
m
Retales... ~ancciiu 1
Figura 106. Teselas...
Submenú Textura y cuacjro de Texturizar...
diálogo Gritas y documento. +
J lm
Vidriera...
Opcimer
E:oacso de ge'j E
Pidundidsddc grieta 16
F-
P I ~ Ode m a A
-
En este marco el filtro Grie-
tas produce un efecto enri-
auecedor al t i e m ~ oaue es-
pectacular. Un espacio de grieta pequeño acompañado de'una profundidad de grieta
media y un brillo alto, nos proporciona un efecto metalizado que da un toque de sofis-
ticación, que puede ser acentuado en otros componentes gráficos de la página.
+ Granuladu...
Grietas... m
Retales,.. CW~CCI~ 1
Figura 107. Teselas...
Submenú Textura y cuadro de
diálogo Texturizar y documento. lrn A
Vldrlera,..
1
I " ,
. - , - - . . - - -. . - - . .-.,---
---e--- 2-.--- -.-.-*-u
- El filtro Texturizar da un
acabado más artesanal muy
l apropiado para enmarcar
productos naturales, la intensificación del efecto sobre la superficie del marco viene
determinado por los valores incluidos. En este caso, una proporción al 100%, un
relieve bajo y una dirección de la luz superior.
Granulado...
Giitas...
1 -4 1 OK 1
Figura 108. Retales... -7 Cwda ]
Submenu Textura y cuiadro I
de diálogo Teselas y dOCU-
Texturizar... 2
mento. ;
l
Vidriera...
Anchuia de tcchada
El filtro Teselas nos proporciona

unos acabados similares a los
1
conseguidos con el filtro Grietas,
sin embargo, si observamos produce una textura distinta aunque el efecto metálico y
luminoso está igualmente presente, produciendo un efecto de tubo texturado. En esta
ocasión hemos incluido unos valores de tamaño de azulejo y anchura de lechada
baja, mientras que hemos aplicado un valor alto en la opción aclarar lechada.
8. Retornarnos la imagen original cubierta con un color sólido

(pág. 170) y nos proponemos producir un efecto de relieve.
Para ello recurrimos al filtro Relieve del submenú Estilizar
incluido en el menú Filtro.
El efecto que produce este filtro f

puede resultar muy enriquece- B O I ~ ~tlummadus
S
dor en diseños de marcos con Difusi6n
formas dibujadas más comple- EX"USYU1

Halla boldes
C-tar 1
]as y sutiles En esta ocasion, el R ~wiruahzac6n
resultado es un marco con relie- 3e,d,
ve liso, sencillo y contundente, ~razarperíi~ IOOSEI
sometido a una altura, ángulo y
dirección de la luz.
viento
h l o
hlflñe IRpxel~
o
.1:..,,...,L,...i'-.19...~L...1'L.~ .... l'?.., .... l...,
14 ' A
- -- - -- -- - - -
1 a
Submenú Estilizar y cuadro de

- - diálogo Relieve y documento
7 -
En las imágenes consegui-

, ,,, , , ,l!,
das tras aplicar los filtros .-+lo,, ,
,, ,, , L14u,, , , , ., 16,, , o a l?, , . t u .l!., . . ,. ,, ll,Ld!,L
Sumi-e (pág. 176) y Vírgu-
las (pág. 193) hemos apli-
cado el filtro Relieve con
los valores anteriores, ob-
I
teniendo los resultados que
muestras las ilustraciones --
@
- --- - 3
superior e inferior respecti-

vamente. I
Figura 110.
Documentos PSD
respectivamente.
Consejo ...
- Recuerde que este filtro tiene como contrapartida que siempre da
unos efectos de colores plateados, los cuales puede modificar aplicando
posteriormente efectos de iluminación o con cualquier comando de ajuste
de color y tono.
9. Otro filtro que proporciona efectos muy interesantes sobre

los marcos, como en cualquier otro elemento gráfico en la
página, es Efectos de iluminación (submenú Interpretar
incluido en el menú Filtro).
Los efectos luminosos sobre el marco resultan interesantes
en marcos con efectos de relieve y bajorrelieve o cualquier
tipo de motivo, aunque en superficies lisas proporciona la
posibilidad de modificar la textura produciendo sutiles
variaciones de tono al tiempo que modifica el color, también
si con anterioridad hemos aplicado relieve al marco.
Webs con Photoshop
Figura 111.
Submenú inter-
pretar, cuadro de
dialogo Efectos
de iluminación y
documentos PSD.
Ncpativa 20 Posilivo
P
-a
? La gran variedad de posibilidades
k que ofrece el filtro Efectos de ilu-
minación radica en la diver-
sificación de efectos, ya no sólo
luminosos, sino en la incorpora-
ción de relieve mediante canales
-- -
alfa guardados o texturas incor-
poradas. Nos encontramos con
- una herramienta capaz de modi-

ficar ciertos aspectos lumínicos en el marco hasta producir efectos de mayor enverga-
dura y más sofisticados. La opción Estilo nos proporciona una amplia gama
de modos de luz a aplicar,
las opciones Tipo de luz y
. .
Proniedades incluven ca-
racterísticas de la luz como
ambientación, tono, brillo
intensidad, etc. El Canal 4
lL
de textura brinda la posi-
bilidad de incluir canales
alfa para variar de algún
.-.
w-
s1 L k r ~ ~
. modo la incidencia de la luz so-
.,...,Y u
,,,
, i'!, JiAbre la superficie del marco. En el
caso de estos tres ejemplos han
i sido aplicados los mismos valo-
res, expuestos en el cuadro de
diálogo superior. Aunque como
podemos comprobar en las ilus-
traciones inferiores lo hemos apli-
cado en el interior del marco.
En la ilustración superior se ha
aplicado en la zona interior del ' IY,.,
..,., ... :1 . ... r!. .., ... .k". .#,..La
. # .
12
,.. .. 1
1
marco Efectos de iluminación.
En la inferior hemos usado el fil-
tro Vidriera y, a continuación, he-
mos aplicado los filtros Relieve
en el marco y Efectos de ilumi-
nación, primero en el interior y
luego en el marco.
7
. , -u X 112.
~ ~ ~ ~ ~ ~ ~ 4 ~ 4 ~ ~ ~ uocumentos L U ~ ~PSL. i ~ ~ ~ ~ ~ i I '
Figura 113.
Submenú Interpretar,
cuadro de diálogo Guabdar 1
Efectos de iluminación
v documento PSD. 1 TIPO de luz 1CI- trc-~ 1
171
- -. -..-...
" Nubes
Nubes de diferencia 1 1 \ /
Rellenar de textura...
I
Con toda la zona cubierta del hbnnte NegativaA -23 Pos~hw
mismo color, hemos aplica- tanal de textura 186 A
do, primero en el interior y liAbtmdmcm de M a c o
luego en el exterior del mar-
co, el filtro Efectos de ilumi-
, Revini& mm Altua 50 MoniaRosa
ción variando los valores, espe-

cialmente el estilo de luz,. el tipo
.
de luz y el canal de textura, para
lo cual se ha utilizado el canal de
la selección del marco que había-
mos guardado con anterioridad.
También se han utilizado colores
cremas, uno más intenso que el
otro. De este modo, conseguimos
el diseño de un marco serio, clá-
sico y elegante.
202 Webc con Photoshop
El filtro de iluminación ,-,,~adaspdares,

puede ser utilizado antes Cns,al,,.
de producir cualquier
Desplazar...
otro efecto, como en
este caso, que hemos Encoger...
aplicado en el marco de Esfefizar...
la página anterior el fil- Luz difusd..
tro Rizo. Las ilustracio- Molinete...
nes inferiores muestran Onda... Opciaies
el resultado que produ- Ondas rnarinas...
ce su aplicación, obte-
Cantidad lar
Proyectar...
niendo un efecto suave
en el ejemplo mostrado
en la parte superior y en Zigzag.,. I
m,,;
.
1
..o.ij 0
.
Figura 114.
1 ~ " b m e n úBosaueiar
Reticulación y docu-
mento.
, .. '
mayor medida acentuaao
en el ejemplo de la dere-
. ,
:1 ,, ,, a a S ??
,I
,,
, .
. , . . . 1 9 . . . , .!., P . . . , .. . . I1!, ,
, , , , ., :, xLl
ll?, , , , , , F?
cha. Como vemos es po-
sible conseguir infinidad
de efectos con un solo di-
'4 a - 7
seño, qué podremos hacer
SI tratamos todos estos
efectos en todos los dise-
ños que se nos ocurran. 4
Puede enmascarar las zonas transparentes de los marcos con formas

irregulares mediante cualquiera de las herramientas de enmascaramiento
que dispone Photoshop. Para más información consulte el capítulo 1
Transparencias en imágenes para l a Web donde se describen los
mecanismos que puede emplear para enmascarar transparencias.
I
h a I que sabor...
ESTILOS DE EFECTOS DE ILUMINACIÓN

I
Para aplicar los estilos hace falta como mniimo un foco de luz. Los nom-
bres que a continuación detallamos vienen abreviados en la versión de Macintosh.
Por defecto: Un foco amarillo de intensidad media y foco amplio.

I
Foco de las dos horas: Un foco amarillo de intensidad media y foco amplio.
Luz azul de techo: Una luz azul de techo de intensidad completa y sin foco.
Círculo de luz: Un foco compuesto por luz roja, azul, amarilla y blanca, de inten-
sidad completa y foco concentrado.
Cruzada: Un foco blanco de intensidad media y foco amplio.
Cinco luces hacia abajo y cinco luces hacia arriba: Cinco focos blancos supe-
riores o inferiores, respectivamente, de intensidad completa y foco amplio.
Linterna: Luz amarilla de techo de intensidad media.
Foco fuerte: Un foco blanco de intensidad media y foco amplio.
Direccional paralela: Una luz direccional azul de intensidad completa y sin foco.
Luces RVA: Una luz roja, azul y verde que produce un foco blanco de intensidad
media y foco amplio.
Luces directas y suaves: Dos luces direccionales azul y blanca de intensidad
suave.
Luz suave de techo: Una luz de techo suave de intensidad media.
Foco suave: Un foco blanco de intensidad completa y foco blanco.
Tres luces hacia abajo: Tres focos de intensidad suave y foco amplio.
Tres focos: Tres focos de ligera intensidad y foco amplio.
CANAL DE TEXTURA
En Canal de Textura puede elegir un canal Rojo, Verde o Azul de la

I
imagen para crear una textura. Del mismo modo, puede utilizar un Canal AEfa
creado. de la misma imagen o de otra. como textura. Para elevar las partes blancas
del canal active Abundancia de blanco, para elevar las parte oscuras desactívela.
Para variar la altura de la textura mueva el regulador de la opción Altura.
Webs con Photoshop
T I P O S DE LUZ
De techo: Alumbra en todas direcciones desde arriba.

Direccional: Alumbra desde la lejanía.
Foco: Proyecta un rayo de luz elíptico. Mediante los reguladores especifique el
tipo de foco y la intensidad del mismo en sus respectivas opciones.
Pulse sobre el recuadro de color y elija el que desee del Selector de color. Por
último, active o desactive la opción Encendida si está trabajando con varias fo-
cos, para establecer qué focos desea que permanezcan activos y cuales inactivos.
PROPIEDADES
En Propiedades debe establecer las propiedades de la luz mediante los

valores proporcionados por Lustre, Material, Exposición y Ambiente. Para cam-
biar la luz ambiental, pulse sobre el recuadro de color y elija el color deseado.
Lustre: Determina lo reflectora que es la superficie.

Material: Determina si el material absorbe o refleja más luz.
Exposición: Incremento u oscurece la luz.
3
Ambiente: Crea una ambientación mediante la combinación ficticia de la luz
dada con una luz más general.
Definir la etiqueta TABLE

para producir marcos
Tratada en apartados anteriores, entre otras cosas para definir el fondo,
nos servirá, en esta ocasión, para elaborar distintos tipos de marcos. Aprovecha-
remos las posibilidades que nos ofrecen los atributos relacionados con la etiqueta
y que definen las características del mismo, como son el color del fondo, el tama-
ño del borde, el ancho de la tabla, el ancho de la celda, la cantidad de espacio
entre las celdas y la cantidad de espacio entre el contenido de una celda y el
borde. Modificándolos conseguiremos vistosos marcos para nuestras páginas.
HTML cuenta con un extenso número de atributos que nos ayudan a va-
riar las características de una tabla. BGCOLOR define el color con el cual cubri-
remos el interior del marco. Al igual que en otras opciones en las que podemos
utilizarlo, hemos de indicar el color mediante su correspondencia en números
hexadecimales, un ejemplo sería BGCOLOR=FFFFFF. Para especificar el co-
lor del interior del borde tenemos el atributoBORDERCOLOR,del mismo modo
que en el anterior determinaremos el color RGB mediante su equivalente en
hexadecimal, por ejemplo BORDERCOLOR=000000. También podemos pre-
cisar el color oscuro o claro del borde de una tabla para lo cual nos serviremos de
los atributos BORDERCOLORDARK o BORDERCOLORLIGHT respecti-
vamente. Comprobamos la variedad que es posible desarrollar con respecto al
color de una tabla.
Por definición la etiqueta TABLE no contiene información del borde de

una tabla para incluir cierto grosor hemos de incluir el atributo BORDER asig-
nando un valor numérico para indicar su tamaño a modo de BORDER=lO. Del
mismo modo, la cantidad de espacio entre las celdas y la cantidad de espacio
entre el contenido de una celda y el borde hemos de indicarla numéricamente
precisándolas como CELLSPACING=S y CELLPADDLNG=2 respectivamen-
te. La tabla igualmente no contiene información que determine su tamaño en la
página para ello haremos uso del atributo WIDTH, especificando en tanto por
ciento el tamaño o, bien numéricamente, como por ejemplo WIDTH=50%.
+
Los atributos mencionados son los más reseñables para producir intere-
santes marcos mediante tablas; pero veamos unos cuantos ejemplos que nos per-
mitan vislumbrar el alcance que tiene la utilización de estas herramientas para
diseñar interesantes marcos, comprobando in situ las diferencias especificadas en
ellos.
Figura 115. ..A*- =m M&
Visor de Microsofi +
..?" "!-, 2
bu ?. Li". : ; . t
lnternet Explorer. (- -TC r ....-.,,..,.. ..,- 3- . -..

A
l l , , ' l , ! , , l , - - T - . . . , . U . ,.ti', Ir----- I
. ,,.,, .i
" mmeínt»lNS-m-mPIPWú\Ilv,IIT'S
Hemos utilizado la tabla para enmar-
cI. L , . ~ , ~
car la fotografía. Dando un tamaño al
L
marco de 40% con respecto a la hori-
zontal de la página. El grosor determi-
nado para el borde es de 15 píxeles, m
la distancia entre la fotografía y el bor-

de es de 50píxeles y el espacio entre
celdas dado es de 5 píxeles. El color
responde a un beige. . ,.+ S

La ilustración que aparece en la página anterior muestra esta estruc-
tura; al igual que la mostrada en la parte superior de la página siguiente, en
la que simplemente hemos modificado el color del fondo de la tabla siendo
éste BGCOLOR = #FFFFFF:
<HTML>
cHEAD>
< TITLE > marcos </TITLE >
</HEAD>
<BODY BGCOLOR=#CFC3BI >
IMG SCR=marco.jpg WIDTH =425 HEIGHT= 142
ALIGN=CENTER VSPACE=20 HSPACE= 170>
<Ti?>
< T D ALIGN =CENTER> <IMG SCR=modal.jpg
W I D T H = 160 HEIGHT=24 1 ALIGN=CENTER>ITD>
<ITR>
</TABLE>
I
<IHTML>
Al margen de la alineación de la etiqueta T D como ALlGN=CENTER
I
hemos alineado la imagen en el centro definiéndola comoALIGN=MIDDLE
tal y como corresponde. Del mismo modo se han introducido las dimensio-
nes de la imagen como se requiere W I D T H = 160 y HEIGHT=24 l .
Figura 116. m.r ,.- - . E-vr
Visor de Microsoft * m
lnternet Explorer. I
-..
PE
--
: 7
r PIP ; Y f O ~ N l l T <S
Hemos utilizado la tabla para enmar-
car la fotografía. Dando un tamaño al
marco de 40% con respecto a la hori-
- w2
L i7?fi?
-
, : ~ 3 , 7 , s & m rY U
zontal de la página. El grosor determi-

nado para el borde es de 15 píxeles,
la distancia entre la fotografía y el bor- A
de es de 50 píxeles y el espacio entre
celdas dado es de 5 píxeles. El color
responde a un blanco. ,,ir- A " - J
... % + . 7 - . , . Figura 117.

4
,.* . --
J
-* l
.* , ?.- - ' ... Visores de Microsoft
.-
2
-,-
1 *-I* I .
-
.r.mr
--
,. . -
e,
- lnternet Explorer.
r
mr!;\sJTilJN9in'pv:trm:ws
Realizamos unas variaciones y
~ ~ K:;:?[ff
J T
obtenemos el marco que mues-
y
tra la ilustración. Se ha manteni-
do un tamaño del marco al 40%
con respecto a la horizontal de la
página. El grosor determinado
para el borde es ínfimo, de
1 píxel, por lo que casi no es
g4 apreciable. La distancia entre la
* ,,L...
fotografía y el borde pasa a ser
de 5 píxeles, sin embargo el tamaño al 40% desvirtúa el marco, por lo que aparece
una mayor distancia entre la fotografía y el borde en horizontal. El espacio entre cel-
das ha pasado a ser de 7píxeles. El color elegido responde a un blanco. Observa-
mos que el marco adquiere otro carácter.
El tamaño ahora pasa a ser del 30% .
-,
Esto hace que aparezca más ajustado .: . -?..q .--..:
.l
r
-1
+
. F.? .jd ?.L dl!.
S
con respecto a la fotografía haciendo --kl -.lT-- ---A - -7

1
que el marco adquiera otro prota-
gonismo. El grosor determinado para -E
:77fi7
. ..-M
el borde sigue siendo de 1 píxel. La dis-

tancia entre la fotografía y el borde es
con respecto a la ilustración superior
la misma, es decir de 5 píxeles. La di-
ferencia aparece en el espacio entre
celdas que es en éste de 26 píxeles,
por lo que aparece más grueso. El co-
lor elegido sigue siendo un blanco. - -
*,L.
a l g o sobre html.. .
I La figura 1 17 superior muestra la siguiente sintaxis:
<HTML>
<HEAD>
< TITLE> marcos </TITLE>
</HEAD>
<BODY BGCOLOR=#CFC3B 1 >
ALIGN=CENTER VSPACE=20 HSPACE= I70>
<TABLE WIDTH=40% ALIGN=CENTER BORDER= 1

CELLPADDING =S CELLSPACING= 7
BGCOLOR =#FFFFFF>
H a sido necesario incluir los atributos VSPACE=2 y HSPACE=2

para que la imagen no chocase con el marco. Aunque con VSPACE=2 hu-
biese bastado. Por otro lado, la etiqueta TR define una fila de la tabla, mien-
tras que la etiqueta TD precisa los datos de la tabla. Vamos que para cons-
truir un marco simple necesitamos una etiqueta TR y otra TD para introdu-
cir la información pertinente a ese marco.

La figura 117 inferior muestra la siguiente sintaxis:
<HTML>
<HEAD>
<TITLE > marcos <ITITLE >
cIHEAD>
<BODY BGCOLOR=#CFC3BI >
IMG SCR=rnarco.jpg WIDTH=425 HEIGHT=142
ALIGN =CENTER VSPACE=20 HSPACE= 1 70>
< TABLE WIDTH =30% ALIGN=CENTER BORDER= 1

CELLPADDING=S CELLSPACING=26
BGCOLOR = # F FFFFF >
<TR>
<TD ALIGN =CENTER> <IMG SCR=rnodal.jpg
WIDTH= 160 HEIGHT=24 1 VSPACE=S HSPACE=S
ALIGN=CENTER> < l f D >
</TR>
<ITABLE>
Hemos corregido las deficiencias de ajuste del marco con respecto a

la fotografía reduciendo la tabla a un 30% y enmarcando la imagen tanto a
la derecha como a la izquierda mediante las especificaciones: VSPACE=5,
HSPACE=5 y ALIGN=CENTER para que la imagen no chocase con el
marco y apareciese centrada por igual. En esta ocasión sí que era necesario
introducir información del margen vertical y del horizontal respectivamente.
21o Webs con Photoshop
a . P. 'I &C.
m Figura 118.
. .'.*
-
C.d.
:- i
V..& 1. I1 , y T.-< P"*,
"
--
d .,.-' $
-. -- Visores de Microsoft
Internet Explorer.
r
A 1
1
I I
i
m \un VN b ~ iwi~i-rn-rs
~ ~ r
También podemos enmarcar texto grá-
fico mediante el uso de las tablas. Ésta
ha sido centrada y se le ha dado un
tamaño del 40% con respecto a la ho-
rizontal de la página. El grosor para el
borde es de 1 píxel, la distancia entre
la fotografía y el borde es de Spíxelec
y el espacio entre celdas es de 1 píxel.
a-T A El blanco es el color elegido.
En el segundo ejemplo muestra ,,, ,, ..,.,
,. ., .> .,
o'
una variante que plasma un mar- ,:. . ,.-J -1
L,..,. ,..- 3
a,.",, rc. 2,
.*. ,.A. . J
co de características distintas. Ha Z
I-.,-:=-
sido igualmente centrada y he-

mos mantenido el tamaño al 40%. n~wl:~~;~!~!-xs
Ampliando el grosor del borde a
10píxelesintensificamos el efec- xvíi;,,. .. .-.. . .-,, r, ,,i(=g*tfw<
to del mismo y cambiamos su fi- - .
- -
-;-
- -
,:
- - -
sonomía. La distancia entre la fo-
tografía y el borde se ha mante-
nido en 5 píxeles al igual que el
espacio entre celdas de 1 píxel.
El color seleccionadopara el fon-
do de la tabla es el blanco. .,L.. .AY -
nota...
Un marco puede contener infinidad de celdas aunque hemos de saber
las diferentes partes que constituyen una tabla. Los elementos esenciales
son: la etiqueta TR para establecer las filas de una tabla, cada grupo <TR>
</TR> define una fila; las etiquetas TD y 7W determinan el número de
columnas de una tabla. el primero especifica los datos de una tabla. mien-
tras que el segundo, especifica las cabeceras de la tabla. Cada grupo <TD >
</TD> o <TH> </TH> define una columna. La combinación de las dife-
rentes filas y columnas conforman la forma del marco.
a l g o sobre html.. .
La figura 1 18 superior muestra la siguiente sintaxis:
<HTML>
<HEAD>
< TITLE> marcos <ITITLE>
<IHEAD>
<TABLE WIDTH=4O% ALIGN=CENTER BORDER= 1

CELLPADDING=S CELLSPACING= 1 BGCOLOR=#FFFFFF >
<TR >
<T D ALIGN =CENTER ><IMG SCR =marco.jpg
WIDTH=425 HEIGHT= 142 ALIGN =CENTER> </TD>
<ITR>
La figura 1 18 inferior tiene como variante un valor de BORDER= 10 ha-

ciendo que se intensifique el efecto de marco sobre el texto gráfico.
<TABLE WIDTH= 40% ALIGN =CENTER BORDER= 1O

CELLPADDING=S CELLSPACING= 1 BGCOLOR= #FFFFFF>
<TR>
<TD ALIGN =CENTER> <IMG SCR=marco.jpg
WIDTH=425 HEIGHT= 142 ALIGN=CENTER> </TD>
<ITR>
.+...
.,. .
A
-.;
(D-L^ .S P.
J
En*
1
- 5. :-,A, ,-
2.
:
d Figura 119.
-- E. -.w,. Visores de Microsoft

4- R c?.,. *u4-
r-.
r
"
m
-
7-* lnternet Explorer.
raI",QImli4 S71IIP!rYfirlMPWB
*mit
&/?T,(:724y
. .*raww
.r
f
. Hemos enmarcado los dos elementos
graficos mediante una tabla de dos
las TR y cada una de éstas con una
fi-
ÍIi
columna TDcentrando el contenido de
las celdas. Su tamaño es del 40% El
borde de 1 píxel. La distancia entre la
fotografía y el borde es de 2 píxeles,
el espacio entre celdas es de Ppíxeles.
.l . - -
Como color de fondo el blanco.
En el segundo ejemplo muestra .. . . . .... ,, . E
I
una variante. Lo más represen- ,: 3 4 ,%, .?- t,/- .F.. 2

+.
-
.-&&T.
tativo es que en la fila inferior - .F

-
.,--
- --.
7
hemos incluido dos elementos en 1 , I I
la columna colocando cada uno WllSil l w ST'PPrUr"lM1?IiFS
de éstos a ambos lados. Por lo
demás, el tamaño vuelve a ser ICF4?fl1
&!r:- 31
>T:[tt
rL#&fpP7
del 40%, el borde de 1 píxel, la
distancia entre la fotografía y el
-F! E- 1
borde pasa a ser de 20 píxeles y
I
el espacio entre celdas de 10
píxeles. El blanco sigue siendo
- el color utilizado para cubrir el

fondo de la tabla
.,,+
Observe que en la ilustración superior hemos definido la alineación en la etiqueta

TD, mientras que en la ilustración inferior se ha especificado dentro de los atributos
de cada una de las imágenes incluidas. Esto es así porque en el segundo caso hemos
colocado dos objetos en una misma celda. Compruébelo en la información incluida en
la página siguiente.
Para definir la posición en horizontal utilizaremos el atributo ALlGN

de los siguientes modos: izquierdaALlGN =LEFT; centro ALlGN =CENTER
y derecha ALIGN=RlGHT. Para definir la posición en vertical empleare-
mos el atributo VALIGN de los siguientes modos: superior VALIGN=TOP;
centro VALIGN=MIDDLE y inferior VALIGN=BOTTOM.
Diseñar marcos, barras y botones ,13

I La figura 1 19 superior muestra la siguiente sintaxis:
<HTML>
< HEAD >
<TITLE > marcos <ITITLE >
<IHEAD>
CELLPADDING=2 CELLSPACING=2 BGCOLOR=#FFFFFF>
La figura 1 19 inferior muestra las siguientes variaciones.

21 4 Webs con Photoshop
L..-, En y. b. ,- +,. Figura 120.

"*+ - J .
- -; . 2 .
, A 3 - ,-1 . -
4 2'
' Visores de Microsoft
--m
J- - lnternet Explorer.
Hemos enmarcado los dos elementos

gráficos mediante una tabla de dos fi-
las TR y cada una de éstas con dos
columnas TD centrando el contenido.
La incorporación de la segunda celda
en sendas filas la hemos utilizado para
- confeccionar un marco irregular. En
este caso hemos utilizado un blanco
" como color de fondo de la tabla.
En esta casión hemos colocado ,.. ,, ' ,. .. ,.,...
las tablas vacías a la derecha por =: . ---.
. .2 u- . -
r, .
lo que aparece el mayor grosor - i . . - .. -
en este lado y variando la alinea-
ción de la imagen. Por lo demás , , I
WlAJCPCEiTIIM'T/T'H?7N'u
en ambos ejemplos, el tamaño es
del 40%, el borde de 1 píxel, la
T?-vdr
6~7* -: + J J ~ :m,
-
f3
1 %?
distancia entre la fotografía y el
borde es de 20 píxeles y el es-
pacio entre celdas de 10píxeles.
El color de fondo de la tabla pasa
a ser un beige.
Observe que no hemos especifi-
cado la alineación de la imagen - .
marco en los dos ejemplos y el de moda1 en éste.
nota ...
Los valores por defecto de ALIGN y VALIGN son ALIGN=LEFT
y VALIGN=MIDDLE. Esto hace que en los ejemplos mostrados no haya
sido necesario definir las alineaciones, pues en el primer ejemplo y en sendas
ilustraciones la imagen superior tenía estos valores.
Para definir la posición en horizontal utilizaremos el atributo ALIGN

y VALIGN para definir la posición en vertical.

La figura I Z O superior muestra la siguiente sintaxis:
<HTML>
<HEAD >
< TITLE > marcos <ITITLE >
<IHEAD>
CTABLE WIDTH=40% ALIGN=CENTER BORDER= 1
CELLPADDING=20 CELLSPACING= 1O BGCOLOR=#FFFFFF>
< TR >
<TD> <IMG SCR=marco.jpg WlDTH=425 HEIGHT= 142 >
<lTD >
<TD>c/TD>
<ITR >
<TD ALlGN = RIGHT> <IMG SCR =moda 1 .jpg
WIDTH= 160 HEIGHT=24 1 > <ITD>
<TD>clTD>
</TR>
</TABLE >
<IBODY>
<IHTML>
La figura I Z O inferior muestra las siguientes variaciones.

..- Le t. *.
e-
I
Fe -
,i B wau *
, 9 3 2 1 1 I.r a~ --
J
a Figura 121.
Visores de Microsoft
-.
h
,. ri- rrw Cii* F
..
c ,-
a
m . wrXb .. 7 lnternet Explorer.
,l
,S,., .S,, .,,---7.
.*,,A. <,,,!, , , ,, --.r'..:, ,,, 8.
" ~ ! A ? í - ~ O R ? m J i B W ú ) M ~,.S Para diseñar este marco hemos crea-
rT
do una tabla de dos filas TR, tanto la
, ; ,,p-,8q~m
~ ~ m m ~ , ~ . ~ ~ , ~ ~ , ~ ~ ~ . l r , ~ ~ ; - ~ , . ,
1
-superior como la inferior constan de dos
columnas 70.La incorporación de cel-
das vacías, colocadas en la posición
que aparece en la página siguiente, po-
, sibilita este diseño. Si incluimos ele-
mentos en las celdas vacías aparece-
,._ - 1 ría un marco en los espacios vacíos.
En este marco simplemente he- ..,. ,* *+.
mas incluido en la segunda fila . . c-.-J l . ,3" 3 . ....,
!
. !.-
J
,-...
, "-.
Y
: "u..
., -.......-.,.
n,.
.. -
TR una tercera columna TD. Al -. --
aparecer la segunda imagen den-
tro de otra celda no ha sido ne- - <
cesario especificar la ubicación,

ya que ambas han utilizado el 4 .' 3trr.i.w. -:.-=,, :v. F , . & X P ~ ~ I J.
valor de alineación que aparece

por defecto, esto hace que todos
los elementos gráficos incluidos
en las celdas aparezcan centra-
dos en las mismas. Se han man-
tenido los valores de los marcos
dados en la página anterior. - . .,,.
A
Observe que ambos ejemplos contienen zonas vacías. Como ya he-

mos dicho para que aparezcan de este modo simplemente hemos añadido
columnas ( <TD> c/TD> ) sin ningún tipo de elemento gráfico o tipográ-
fico en su interior. aunque, comprobamos que las zonas aparecen cubiertas.
Si le interesa que ciertas zonas aparezcan completamente vacías, es

decir, a la misma altura que el fondo deberá escribirlo del siguiente modo:
<TD>cBR> </TD>.

La figura 12 1 superior muestra la siguiente sintaxis:
<HTML>
< HEAD >
</HEAD>
CELLPADDING=20 CELLSPACING= 10 BGCOLOR=#CFC3B 1 >
<TR >
< TD > <IMG SCR=marco.jpg WIDTH=425 HEIGHT= 142 >
</TD >
<TD> <ITD>
</TR >
<TR>
<TD> </TD>
<TD ALIGN=RIGHT> <IMG SCR=modaI.jpg WIDTH= 160
HEIGHT=24 1 > </TD>
</TR>
<ITABLE>
</BODY>
<IHTML>
La figura 12 1 inferior muestra las siguientes variaciones.

21 8 Webs con Photoshop
.. Figura 122.
J
"I-
L..-6
_.-1
-%
_..
3'
_ _..
.' .#
Visores de Microsofi
ui
ml=Emm=
- - - lnternet Explorer.
vvii i11i 0,-rx+ ,! rii rri iii ri titi- JTI i~r$rIU 1'1
WPP 'W I'MFT'S
I?TI,"ISDII~!N Lo más significativo de este diseño de
-m.il
&Y"
' --
1-7
r i ; ~I .?
:jt-<-
,
marcos mediante tablas es la separa-
ción de ambos marcos mediante la apli-
- 1 1 cación de tablas en cada uno de éstos
una tabla por separado. Cada uno de
ellos mantiene los mismos valores ex-
cepto el color de fondo utilizado.
A diferencia del anterior este di- L- l A a-sn'im.i?

ceño consta de importantes va-
riaciones. La más significativa es
el uso del atributo BORDERCO-
LOR para incorporar un color
específico en el borde. Para se-
los marcos hemos recurri-
do a otra tabla incorporando una
fila con una columna vacía y el
fondo del mismo color que el fon-
do de la página. Para que apare-
ciesen separadas la tabla supe-
rior e inferior hemos dado un va-
lor de separación en la celda de
10 píxeles en la tabla intermedia. Tal y
como queda explicitado en la página 220.
\
nota...
HTML consta de varios atributos que facilitan el cambio de color en
el interior de la tabla y en el marco. BGCOLOR, ya sabemos que nos ayuda
a cambiar el colordel fondo de la tabla, pero además podemos usar
BORDERCOLOR para cambiar el color del borde. aunque puede recurrir a
BORDERCOLORLIGHT o BORDERCOLORDARK para cambiar el co-
lor del borde con un color claro o un color oscuro respectivamente. De este
modo podemos incorporar un color para el borde y otro color para el interior
de la tabla, tal y como se muestra en la ilustración superior.
GBlgo sobre html ...

I1 La figura 122 superior muestra la siguiente sintaxis:
<HTML>
<HEAD>
< TITLE> marcos </TITLE>
</HEAD>
<BODY BGCOLOR= #CFC3B 1 >
<TABLE WIDTH=4O% ALIGN=CENTER BORDER= 10

CELLPADDING=20 CELLSPACING= 10
BGCOLOR= #FFFFFF>
<TR>
< TD> <IMG SCR =rnarco.jpg WIDTH=425
HEIGHT= 142 >
c / T D>
c/TR>
</TABLE>

CELLPADDING= 10 CELLSPACING= 10
BGCOLOR =#CFC3B 1 >
<TR>
<TD> <IMG SCR=rnoda3.jpg WIDTH= 160 HEIGHT=24 1
ALlGN=RIGHT> </TD>
<TD> <IMG SCR=rnodal.jpg WIDTH= 160 HElGHT=241
ALlGN=LEFT> </TD>
</TR >
<ITABLE>
Webs con Photoshop
a l g o sobre html. ..
I La figura 122 inferior muestra la siguiente sintaxis:
<HTML>
< HEAD>
<IHEAD>
<TABLE WIDTH =4O% ALIGN =CENTER BORDER= 1 O
CELLPADDING=iO CELLSPACING= 10
BORDERCOLOR= #FFFFFF BGCOLOR= #CFC3B 1 >
<TR>
<TD> <IMG SCR=marco.jpg WIDTH =425
HEIGHT= 142 > <ITD >
c/TR>
cITABLE >
l
cTABLE WIDTH =40% ALIGN-CENTER
CELLSPACING= 10 BGCOLOR=#CFC3BI >
<TR> <TD> c I T D > cITR>
c/TABLE>
<TABLE WIDTH=40% ALIGN =CENTER BORDER= 1

CELLPADDING= 10 CELLSPACING= 10
BGCOLOR=#CFC3B 1 >
<TR>
c T D > c I M G SCR=moda3.jpg WIDTH= 160 HElGHT=24 1
ALIGN =RIGHT> <TD>
<TD> <IMG SCR=modal.jpg WIDTH= 160 HEIGHT=24 1
ALIGN=LEFT> c / T D >
</TR>
<ITABLE>
</BODY>
</HTML>
Diseñar marcos, barras y botones ,,
En ocasiones deseará que una celda le ocupe varias columnas o varias

filas con respecto a otras para crear marcos sofisticados. HTML consta de
dos atributos que facilitan esta tarea. COLSPAN y ROWSPAN. El primero
se utiliza para ocupar varias columnas por una celda, mientras que el segun-
do se usa para indicar el número de celdas que ocupará la celda de una fila.
En ambos casos hemos de especificar el número de celdas que se ocuparán
escribiéndolo del siguiente modo: ROWSPAN=S. Este ejemplo nos indica
que la celda ocupará cinco celdas de una fila.

Lo contenido en un marco puede ser tan variado como lo mostrado en la
página de este museo. El diseño por tablas ha marcado unas directrices.
.c Figura 123. ...
,+.
.. d ,-
2 L.
.- .% A" '. -
+
:.
, a,
-*-
B
Visores de Microsoft lnternet Explorer -..a,+
-- -
- .
b
+- --
$?:
- -
<:A,
.<-
8
T H STCJRY
~ OF 2 BCQI I \T F Y H I B II
La página de Sm~thsonianha sido creada ex- ,Y 9 1 1 7 mI.ilA, U I I M I Y M,h, ,,*=
-_.
r! r - 1
..,__
..
clusivamente con marcos Cada elemento, m
cada dato ha sido enmarcado El borde apare-

ce cubierto con la textura utilizada para el fon-
do Esto es así porque no se ha incluido infor- 2TrZ:~7+-T~*w~2$PL-L:2-h2=:
t- .- , 0 .m . m
e
- M d * C . v ~ n l i l * P U I -
- -
- -
L.
- -. .- . -
,
d ~ l ~ J l f n a i n l P g i l i * * a c - * ~ ~ b i ~ u
niiii.-CWirrndid*ldiIYnii -Lil-iCyil
- A --...*+- *.ri.*i i,rirr.iiiYuC*r s*LFItri Ir*r*l.
-
4.-3
-.
cionada con el coloidel mar-
]/ C
(
.
l h < , m \ , , l ,1 ,r . V ~ l l
co, tanto del fondo como del borde Por
otro lado, tenemos marcos como el que
I presenta CyberAnt~queMall.Es un claro
ejemplo de marco diseñado en un pro-
-....-- -. && grama de tratamiento digital de imáge-

nes, que podría ser perfectamente
s.---- -
d
. -m-.- " Photoshop.

DISEÑAR BARRAS
HTML consta exclusivamente de la etiqueta HR para crear barras, que
sólo pueden aparecer en sentido horizontal. Con Photoshop podemos diseñar in-
finidad de modelos de barras tanto en sentido vertical como en horizontal, las
cuales habremos de insertar como cualquier otra imagen con la etiqueta IMG y
siguiendo las pautas del siguiente ejemplo: <IMG SCR=barra.gif>. Igualmente
con HTML podemos especificarlo del siguiente modo: <HR SCR=barra.jpg>
(donde gifo jpeg especifican el formato de archivo). Lógicamente cuando utiliza-
mos SCR para determinar la incorporación de una barra usando la etiqueta HR,
ésta siempre es ubicada en sentido horizontal.
Las barras por su propias caractm'sticas es muy probable que no ocupen

un tamaño excesivamente grande, por lo que su diseño no se verá excesivamente
condicionado. Sin embargo deberemos tener en consideración los colores que
contienen con respecto al resto de elementos gráficos, si trabajamos en formato
GZF. Aunque pueden estar incluidas en un texto gráfico a modo de subrayado, por
lo que debena tratarse conjuntamente durante el diseño del texto. Los casos más
comunes en los que se presenta una barra es por separado, a modo de punto y final
de un tema o apartado tratado, con el fin de disociar lo anterior con lo que a
continuación se pretende presentar o explicar. Como nuestra forma de lectura es
de izquierda a derecha y de amba hacia bajo lo más habitual es encontrar barras
horizontales. Sin embargo, en numerosas páginas podemos comprobar como se
separa mediante un color distinto, un degradado o una barra, por qué no, la infor-
mación o botones presentados a la izquierda de la información más específica y
detallada que ubicamos a la derecha. Así, comprobamos que el diseño de barras
verticales también tiene su importancia a la hora de elaborar páginas para la Web.
Dibujar la forma
El proceso de elaboración de una barra es similar al seguido para la cons-
trucción de marcos aunque habremos de considerar ciertas diferencias implícitas
en su propia morfología. Dado que su progresión es análoga nos limitaremos en
este apartado a mostrar una síntesis. Bien, al igual que los marcos podemos dibu-
jar la forma que tendrá la barra mediante herramientas de selección como: el
Marco, la El@tica,Columna yfila única, Lazo poligonal, Todo, Invertir y submenú
Modificar sumando y restando espacios y, también usando las herramientas para

la creación de trazados. Sin duda, ya lo sabemos, es el método más eficaz cuan-
do se tratan diseños algo complejos o con curvas.

una dimensiones cercanas a las que tendrá la barra. Si alguna
de las zonas ha de ser transparente activaremos en Contenido
la opción Transparente.
. . * Figura 124.
Nombre 1 ~ 4 ~ ~ 4
Cuadro de diálogo Nue-
vo y documento PCD.
Tarnafio de imagen. lOlK Canceisr 1
Anchura. 1600r píxels A 1 Recuerde que la resoIuci6n
Al!ura: 1
571 píxeis - 1 1 debe ser de 72 ppio 96 ppi
según sea el caso y el fon-
Hesolución. 1721 píxels/pulgada do del documento es reco-
Modo. 1 Coior RVA 3 mendable ponerlo siempre
transparente. Si sabe las
Contenido dimensiones que ha de te-
r Blarico ner en píxeles cree un do-
(- COIN de fondo cumento con cualquier ta-
Traqarente maño y después introduzca
los valores definitivos en el
cuadro de diálogo Tamaño de
imagen Este documento tie-
neunasdimensionesde425
i,': "'
m m , ,
' "
-
,,
' "
.l.
" '
'.
' " " '
7
" ' '" '"
p
' "
l
píxeles de anchura y 142
píxeles de altura.
Crear una barra con las herramietas de selección resulta

muy apropiado cuando se tratan formas muy sencillas como
un simple rectángulo o una elipse. En la mayoría de los casos
resulta aconsejable introducir los datos de proporción de la
barra, lo más idóneo es activar en la paleta de Opciones de la
herramienta seleccionada en Estilo, la opción Proporción
restringida o Tamaño fijo.
En esta ocasión empleamos la herramienta Marco para dibu-
jar una barra rectangular.
Webs con P h o t o s h o p
1 Naveaador Y Infc -- - - es de m n o s \1 bl Figura 125.

Paleta Opciones de marco
y documento PSD.
1 Anchur* EAltura: 145 píxellr 1 1 Para dibujar la forma de la barra hemos

-- -
Calar: ~íxels r 1 1
tado por determinar un tamaño fijo de
píxeles por 45 píxeles, de este modo obtenemos el tamaño que necesitamos.
sido creado con la herramienta Marco 12or ser una forma sencilla. 1
3. Crear una barra con las herrarnietas de trazado resulta muy

adecuado cuando se tratan formas con acabados complejos.
Dibujamos con la herramienta Pluma la forma del marco que
deseamos. A continuación hemos de convertirlo en selección.
Para ello pulsamos sobre el icono Convertir trazado en
selección o sobre el comando Hacer selección del menú lateral
de la paleta Trazados. Recuerde guardar la selección
utilizando el comando Guardar selección del menú Selección.
Figura 126.
1 Documentos PSD y
Con la herramienta Selección
directa hemos colocado, am- Paleta Trazados.
pliando la zona, cada nodo en
la posición exacta. Hemos activado la cuadrícula con el fin
de dibujar con una mayor precisión y rapidez. Es aconse-
jable después de convertir el trazado en selección
I 1I II I I desactivar el trazado, puede dificultarle la visualización.
en la barra
Como en el caso de los marcos el proceso que debe seguirse para acabar
el diseño puede ser de lo más variopinto, ya que cada cual puede hacer uso de sus
propios hábitos de trabajo o su estilo. Sin embargo, marcamos ciertas pautas, pues
creemos que Photoshop propociona una serie de herramientas que son enteramen-
te adecuadas para esta finalidad, aunque como es lógico la creatividad de cada
cual puede desembocar en procesos de elaboración muy particulares.
Si observamos, la mayoría de barras que encontramos en la Web, siguen

unas pautas; suelen tener relieve y un cierto grosor, cuando son elementos gráficos
incorporados. En la mayoría de ocasiones el interior de las barras está cubierto
con el color sólido, aunque del mismo modo podemos incluir barras con efectos
de textura en su interior, planas y otros atributos gráficos que deseemos.
Recordando apartados anteriores diremos que si la forma es irregular he-

mos de rellenar las zonas transparentes del documento. Si se trata de un color
sólido realizaremos el proceso descrito en el apartado Aplicar un color sólido en
una de las zonas transparentes de la imagen (pág. I46), si se trata de una textura
nos dirigiremos a Aplicar una textura en una de las zonas transparentes de la
imagen (phg. 150) o ambos en el apartado Enmascarar las zonas transparentes
(phg. 160). Como comprobamos la formas irregulares nos restringen al uso del
formato GIF, ya que JPEG no dispone de esta característica.
1. Para cubrir la selección de la barra con un color sólido nos

servimos de cualquier herramienta de pintura. Mostraremos
dos ejemplos, en el primer caso utilizamos la herramienta Bote
de pintura, pues nos permite con rapidez pintar la totalidad
de la selección sin cambios de tonalidad.
Figura 127. Hemos seleccionado un color con los valores R: 85, V: 80 y A:

Documento PSD. 21 que corresponde a un verde oliva y, a continuación hemos
cubierto la selección con la herramienta Bote de pintura.
En el segundo caso, empleamos la herramienta Tampón para

cubrir la zona con una textura predeterminada.
I -,- . . . . . . . .
CIrhX
Figura 128.
CII~C Menú Edición y documentos y
paleta Opciones de tampón.
Peaai
--=- CIiI+V
Pegu entro Mayus +Ctil+V
Borrar c
Rellenar
Con!orneu L
m Opción IMolwa (alineado1 A

1 ornar r
.............. ,
-
Se ha seleccionado la totalidad del documento con el comando Todo y, acto seguido
se ha pulsado Definir motivo. Éste a su vez ha sido clonado en la totalidad de la
selección que conforma la barra con los valores de la herramienta especificados en
su paleta.
2. En sendos ejemplos, vamos a realizar un proceso clásico de

creación de una barra. Así nos disponemos a darles relieve y,
a continuación aplicar un efecto de iluminación con el fin de
devolverles su color original, el oliva.
Figura 129.
Cuadro de diálogo Relieve y
documentos PSD respectivamente.
Ñ _ñe\miahaMn
m imnD Con este fin aplicamos el filtro Relieve de submenú Esfi-

lizar y el filtro Efectos de iluminación del submenú In-
A-m10
Aljura
143'
17 pliich
a terpretar por el orden mencionado. El efecto de relieve
confiere a la barra una mayor consistencia, la mayor o
menor altura de ésta dependerá de las características del
5
~aihd& pE- x
1 trabajo. Hemos dado una altura coincidente con el resto
P de elementos con relieve que contiene la página.
-
~
a-
L
l L. -- - -
.............
.........................
r . " - - - ".
..
.. I
L..,-
l
l
J .- -.
1
Figura 130.
Cuadro de diálogo
y documento PSD.
El efecto anterior dio a la ba-

rra un color plateado. La apli-
cación de este filtro tiene un
sentido puramente práctico,
en el sentido de que es apli-
cado casi exclusivamente
para dar a la barra su color
Ambientp- Flegalr.~a -44 PodWo
original, es decir, el color oli-
va. Dentro de los datos es-
pecificados variamos el tipo
de luz y las propiedades de
la misma ~ulsandosobre el
recuadro de color. En el cuadro de diálogo Selector de color introducimos la
coordenadas de RVA del color interesado Rr85, V:80 y A:21 y un color cercano
en la segunda opción. De este modo la barra pasa a tener su color originario.
* Figura 131.
Documentos PSD En este caso, hemos realizado el proceso de relieve para
respectivamente. intensificar el efecto de la textura en la barra. Los valores
dados son Ángulo:42, Altura: 10 y Cantidad: 136.
En esta ocasión, hemos aplicado el efecto de iluminación para alterar el color plateado
dado por el efecto de relieve. Al ser una textura es un tanto más difícil especificar un
color resultante ya que hay varias tonalidades -son éstas las que dan el efecto de
relieve a la textura- pero indicamos el color que deseamos que aparezca
mayoritarimente. Este es Rr133, Vr132 y A:109. 1
Por último añadimos una sombra a las barras. Para realizar

este proceso duplicamos la capa -utilice el sistema que más le
satisfaga- o, bien creamos una capa nueva y la colocamos por
debajo de ésta en la paleta Capas. A continuación, cargamos
la selección a través del comando Cargar selección del menú
Selección.
Una vez delimitada la zona la cubrimos de negro con la
herramienta Cubo de pintura, acto seguido, desactivamos la
selección y aplicamos el filtro Desenfoque gaussiano
introduciendo las coordenadas más acordes con las
características de la barra y del proyecto en general. Sitúela
en la ubicación deseada.
Capas\ Catialrs y Trazados \ 1 )] Desenfocar
l~ormal Opacidad: 100%
-
A Desenfocar más
Desenfoque de movin-iienta... 1
SOMBR4 Desenfoque suavizado...

. .
1
811bii 1 fi
Figura 132. 1 DK 1
Paleta Capas, documentos
- PSD, submenú Desenfocar y Cancelar 1
cuadro de diálogo Desenfoque
gaussiano. R ~revisualizacion
Compruebe que los resultados no 1 0 0 ~ B

son los mismos si desenfocamos la
zona seleccionada a si no lo hace-
mos.
-Radio: 15,8 ppixels 1
Disefiar marcos, barras y botones 229
Figura 133. En este caso, hemos incluido unos valores

PSD respectivamente. de desenfoque de 2,9 pixeles, dando como
resultado el que muestran las ilustraciones.
I
m
3. Ahora veamos unos cuantos ejemplos de distintos tipos de

barras conseguidos con Photoshop.
~a ,
. ..
t . . I . I I .
i
i . . .
7
; O 12 ' IJ : 18 ,
18 ' l
~ i ~ u134.
ra Los ejemplos de barras-expuestos han sido ejecutados apli-
cando un color sólido, filtros para crear efectos de texturas y
PSD
efectos de relieve e iluminaci6n repetidamente. La primera y
respectivamente.
tercera barra son verticales aunque aquí aparecen en sentido
horizontal por motivos de espacio.
Webs con Photoshop
Consejo ...
Debido a las características de formato del monitor es más adecuado
trabajar las barras verticales en sentido horizontal y girarlas una vez estén
finalizadas. Lo más práctico consiste en girar el documento mediante los
comandos contenidos en el submenú Rotar imagen del menú Imagen.
etiqueta para incorporar

barras horizontales
Para diseñar barras con HTML sólo disponemos de la etiqueta HR. Ésta
nos facilita la incorporación de barras gráficas en sentido horizontal o líneas divi-
sorias confeccionadas según los atributos de la etiqueta especificados.Cuando se
- trata de una imagen podemos incrustarla como cualquier otro elemento gráfico
cIMG SCR=barra.giB o, bien del siguiente modo: cHR SCR=barra.jpg>. De
esta forma excluimos cualquier posibilidad de colocar una barra en vertical. El
atributo SCR es utilizado para nombrar un gráfico personalizado como separador
teniendo igualmente que determinar la imagen por medio de su URL.
La etiqueta HR consta de una serie de atributos que facilitan cambios

relativos a las características de tamaño, posición y forma, además de las que lo
relacionan con otros elementos asociados al separador. Dentro del primer grupo
encontramos WIDTH. Este atributo admite dos posibilidades de especificación
del tamaño de la barra, bien por tanto por ciento, bien por tamaño en píxeles
pudiéndose escribir tal y como muestran los ejemplos: <HR WIDTH=50%> o
cHR WIDTH=4OO>. Con respecto al ancho vertical del separador disponemos
de SIZE debiendo precisar el grosor tal como se hace en el siguiente ejemplo:
<HR SIZE=ó>. Para establecer la alineación tenemos el atributo ALIGN. El
separador por defecto aparece centrado, para determinar otra posición dispone-
mos de las opciones FUGHT (derecha), LEFT (izquierda) o CENTER (centro)
que hemos de fijar del siguiente modo: cHR ALIGN= LEFT>. Por último dis-
ponemos del atributo NOSHADE para desplegar una línea divisoria oscura. Éste
siempre ha de ir acompañado de una especificación de grosor, por ejemplo: <HR
SIZE=6 NOSHADE>.
Figura 135. <-+ :- ,. .. .& u
1
Visor de Microsoft .., . - 1- J '...,.

-1 -.
i a ir
~I;rl.i..ii ,..-
3 i-,.2 *T. ZI
,-,*,. z4:
L
n --
8 ,:
(.,.
lnternet Explorer. 1- ,., (2,.

a . ,?.I _.& -
p.
. ch-.lwh I
7 1
Este ejemplo muestra dos barras inser-

tadas en la página, una en sentido ho-
rizontal y otra en sentido vertical. El
separador de la izquierda ha sido in-
crustado bajo la etiqueta HR, mientras
aue la barra de la derecha ha sido in-
sertada mediante la etiqueta IMG. Esto
hace que los atributos para determinar
su posicición difieran. Li ii

- La ilustración superior presenta esta estructura
<HTML>
<HEAD>
< TlTLE >barras c /I I I LL >
</HEAD>
<HR SCR = barra3.gif WIDTH = 1 00% SIZE =5 7
ALIGN= LEFT>
<IMG SCR = barra32.gif WIDTH =S 7 HEIGHT= 600
HSPACE= 1 O ALIGN= RIGHT>
</BODY>
<IHTML>
Comprobamos que sendos separadores, un tanto exagerados en su

tamaño. han sido tratados como cualquier otro documento gráfico.
F
.
.! :ha, x. h. Ir*g U Figura 136.
L. .2 . 2 2 2 . X 5 2 2 Visores de Microsoft
,-=.I.Ji'%m-.~*&.~t..
.-*-u '-a- L L..,.%".i . 8 . .-. ."-"*..r*.
i lnternet Explorer.
-
I_
A diferencia de lo que hemos visto en
la página anterior comprobamos algu-
nas de las posibilidades que ofrece la
etiqueta HR. Sin duda muy adecuado
para según que pAginas, sin embargo
no presenta grandes variaciones gráfi-
cas sobre todo en lo que refiere a la
forma y al valor cromático de las líneas
, divisorias.

La ilustración superior presenta esta sintaxis:
<HTML>
c HEAD >
< TlTLE>barras</TlTLE >
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<HR WIDTH= 100% SIZE=2O ALIGN= CENTER>

<HR WIDTH=50% SIZE=8 ALIGN= LEFT>
<HR WIDTH= 75% SIZE=3 ALIGN=RIGHT>
<HR WIDTH- 100% SIZE= 12 ALIGN= CENTER
NOSHADE>
<HR WIDTH=200 SIZE = 1 ALIGN = LEFT NOSHADE >
<HR WIDTH= 700 SIZE=30 ALIGN= RIGHT>
<HR WIDTH=30 SIZE=30 ALIGN= CENTER
NOSHADE>
nota...
Otros atributos posibles e indirectamente relacionados con HR son:
CLEAR. utilizado cuando tenemos texto alrededor de una imagen y hemos
de insertar otro texto debajo de la misma, situando el texto en el margen
izquierdo, derecho, central o numérico e inmediatamente después de la ima-
gen y CLASS, sirviendo para definir subclases en una lista de palabras.
UNOS CUANTOS E J E M P L O S
Las páginas de CyberAntiqueMall son muy representativas de todo lo que
estamos exponiendo, ya no sólo en este apartado sino en todo el capítulo. Básica-
mente el diseño general está marcado por unos elementos, estos son marcos, boto-
-
nes y barras elaboradas exquisitamente y separaciones y tablas creadas con HTML,
además de otros elementos como vínculos.
4
Figura 137. ,. L, . ,t.7. ..
Visor de Microsofi +
*ni ' -,J e,.- i
-,
L* ri
lnternet Explorer.
LW z 1 8 ~ 1 ~
w,,F,.- l
CyberAntiqueMallmuestra
en casi todas las páginas
el mismo esquema de es-
tilo. Elaborados marcos,
barras y botones, segura-
mente diseñados en
Photoshop y, por otro lado
bordes y separaciones
que cumplen funciones
distintas y aparecen como
elementos más esquemá-
ticos y funcionales conse- ' - ' ' *' " " a - 6 , e
guidos con HTML. Sin duda todo bien estudiado, pues las páginas están inundadas
de un aire de antiguedad refinada y al tiempo de una frescura proporcionada por la
visualización de elementos más cercanos a la Web.
.. L._ . . .__ 0 Figura 138.

2-.:.;
-- -
:> 2.. : ?.
- -- T.
,-S
-. Visores de Microsoft lnternet

Comprobamos haciendo un seguimiento que

sentido tan marcado, tan icóníco tienen en es-
tas páginas los marcos, los botones y barras
disefiadas con esos dorados, esas texturas
marmóreas, esos botones que parecen piedras
i
-'-
-
I
preciosas, todo muy artesanal, muy elabora-
do, antiguo. Por otro lado, nos encontramos
o con el sentido gramaticalde las líneas HR que
adquieren un carácter exclusivamente de se-
.
--. .-
--- -- -
paración. S e ~ a r alos temas. las aalerías. los

artistas. ~a'
ilustración inferior derecha
DISEÑAR BOTONES
Y SÍMBOLOS PARA LISTAS
En innumerables ocasiones habrá visto pequeñas formas geométricas que
sirven para puntualizar los diferentes puntos de una lista, a modo de viñetas. Éstas
pueden estar generadas con etiquetas HTML o pueden estar incrustadas como
elementos gráficos que en algunas ocasiones pueden ser mapas de imagen acom-
pañando a un vínculo y viceversa. Estas formas suelen ser muy sencillas un simple
círculo, un cuadrado o un triángulo e incluso se les puede dar un cierto relieve e
iluminación así como producir el efecto de una sombra. Muy cercanos a estos
elementos se encuentran los botones que casi siempre suelen ser mapas de imagen
y conducen a otra página vinculada. Del mismo modo que las llamadas viñetas
gráficas para listas los botones tienen formas sencillas que permiten incluir texto
en su interior, que por lo general hace referencia al destino o al contenido de la
página a la cual nos trasladan. En estas ocasiones la forma y las dimensiones
suelen adecuarse al texto incluido en su interior y al diseño general de la página.
En otras ocasiones puede adquirir formas determinadas como una flecha que nos
indica el contenido que vamos a ver visualizado en otro documento gráfico cerca-
no. Así comprobamos que los botones dan un mayor impulso a la creación de
formas y diseños más sofisticados. Aquí mostraremos cómo producirlos.
Determinar la forma
Los botones pueden tener formas diversas e incluso icónicas a modo de
símbolos visuales que engloban información implícita. Esto hace que sus formas
puedan ser muy irregulares aunque también pueden ser tan simples como un cír-
culo. Para ambos casos, regulares e irregulares, botones o viñetas gráficas dispo-
nemos de herramientas que facilitan dibujar la forma. Todas las herramientas y
comandos de selección generadores de formas sencillas facilitan la elaboración
de formas sencillas de un modo rápido y eficaz aprovechando la posibilidad de
especificación del tamaño. Si hemos de dibujar formas desiguales que perfilan
objetos o símbolos elaborados disponemos de varias herramientaspara la crea-
-
ción de formas vectoriales que siempre podemos ir modificando y ajustando has-
ta dar con la forma que deseamos.

unas dimensiones cercanas al objeto que hemos de dibujar,
aunque con espacio suficiente para que el objeto respire.
Siempre estamos a tiempo de cortar las zonas del documento
prescindibles. Si alguna de las zonas ha de ser transparente
activaremos en Contenido la opción Transparente.
;f, , ,, , , ? , , ,, ,, 1 Figura 139.

Documento PSD.
Hemos creado cuatro nuevos documentos viñeta gráfica,

boton, botonl y boton2. En cada uno de ellos disetiaremos un
elemento distinto teniendo cada uno unas dimensiones espe-
cíficas, siendo éstas: 113por 113píxeles, 113por 113píxeles,
198 por 113 píxeles y 142 por 142 píxeles respectivamente.
Todos ellos presentan el fondo transparente.
2. El siguiente paso consiste en crear un botón o «viñeta» con

las herramientas de selección. Resulta muy apropiado cuando
se tratan formas muy sencillas como un simple rectángulo o
una elipse. En la mayoría de los casos es aconsejable introducir
los datos de proporción de la barra, lo más idóneo es activar
en la paleta de Opciones de la herramienta seleccionada en
Estilo, la opción Proporción restringida o Tamañofijo. Aquí
mostramos varios ejemplos.
'
.I. -1nlx[ Figura 140.
Documentos PSD
1II)II )i
I I I I I I I I I +",,o,l,,,,l?,,,t , , , , l4, , , , l,,,, 6
o- I respectivamente.
c------------ -
1 /'
: I En el documentoville-
-
2 -
1
h
, ..
ta gráfica hemos de-
terminado la forma de
- un circulo mediante la
-.- - _ - . herramienta Elipse
- En la paleta Opciones
de marco se ha selec-
cionado un tamaño fijo de 40 p o r 40 píxeles. En el documento b o t o n l destinado a
contener texto en su interior hemos optado por una forma alargada. Para determinar-
la se ha dado igualmente un valor de tamaño fijo de 60 p o r 60 píxeles a la herra-
mienta Elipse sumando dos círculos iguales. La zona interior ha sido cubierta suman-
do un rectángulo con el Marco. Nos hemos ayudado de la cuadrícula para ajustar las
zonas sumadas con precisión.
Por su parte la forma de la fi- -lalxl
gura boton ha sido conseguida O , , , I , , , , l?, , , I , , , ,
utilizando la herramienta Lazo I
poligonal. Con ésta hemos di-
bujado un triángulo y a conti- 1
nuación hemos restado parte
del mismo con el Marco ayu- 2
dándonos igualmente con la -=-t , ,
cuadrícula. Por último, hemos

querido diseñar un flecha de
contornos curvilíneos. Para ello
hemos empleado la Plumajun-
to con el resto de herramientas para la creación de trazados. Hemos ido forjando la forma
de la flecha hasta conseguir la que deseábamos. Por último se ha convertido e l trazado
en selección. En todos los casos hemos procedido a guardar las selecciones creadas.
De este modo en cualquier momento podemos recurrir a éstas para utilizar los canales
con el fin de producir un efecto en los mismos o bien activarlas para aplicar algún tipo de
efecto dentro de la forma o exterior a la misma.
En el último ejemplo ha podido comprobar que crear una barra con las
herramientas de trazado resulta muy adecuado cuando se tratan formas con aca-
bados complejos. Recuerde que una vez dibujado el botón hemos de convertirlo
en selección. Para ello pulsamos sobre el icono Convertir trazado en selección o
sobre el comando Hacer selección del menú lateral de la paleta Trazados. Re-
cuerde guardar la selección utilizando el comando Guardar selección del menú
Selección.

en botones y metas gráficas
Estos elementos siguen unas pautas de creación en cierto modo muy res-
tringidas, en gran medida por las dimensiones a las que están sometidos, sobre
todo en lo referente a las viñetas gráficas. Los botones, en cambio, pueden reali-
zarse siguiendo procesos más diversos y sofisticados, todo ello irá en función de
las características de la forma del elemento en sí, sus dimensiones y el resto de
componentes que conforman la página haciendo que aparezcan armonizados. Los
ejemplos que aparecen en la página 234 son una buena muestra. Vemos como el
botón ha sido elaborado exquisitamente, con la misma carga simbólica y visual,
de ser algo valioso y bello como el resto de elementos gráficos incorporados.
Aunque los valores connotativos pueden ser muy variados, es importante recordar
la unificación que hemos de encomendar a todos los elementos de una misma
página e incluso con el resto de páginas si es necesario.
nota...
La gran parte de estos elementos son de formas irregulares por lo que
contienen zonas transparentes que han de ser tratadas para que no aparez-
can en color blanco en la Web. Todo lo referente a cómo tratar las zonas
para fondos de color sólido o con texturas o cómo reducir los colores de
dichos documentos viene extensamente detallado en el capítulo Transpa-
rencias en imágenes para la Web. Lo descrito habrá de tenerlo en consi-
deración al elaborar cualquiera de los elementos descritos en este capítulo.
1. Para cubrir la selección de un botón o viñeta gráfica pode-

mos hacer uso de cualquier herramienta de pintura.
Mostramos algunos ejemplos representativos de los métodos
seguidos para elaborar este tipo de elementos.
; I , I I . l . l l
Figura 141.
Cobre
1 Cuadro de diálogo
Modificar deoradado
y documentó~~~.
Ciorno
Espectro
-
Arco ir'¡ transparente
- Nuevo . _]
- ~
Ajustar: C-nr r lransparrncia -Clambiar nombre 1
En el documento viñeta gráfica queremos producir un

efecto de volumen, para ello recurrimos a la herramienta
Degradado. En el cuadro de diálogo introducimos los
datos del color de inicio R: 69, V: 96 A: 130 y el color final
R: 137, V: 186 A: 244 dando como resultado la imagen que muestra la ilustración de
la derecha.
A
I I 1 -
. 11 1- Figura 142.
Submenú Modifi-
car, cuadro de
diálogo Modificar
Expandir... bordes y docu-
Contraer...
- Cancelar
mento.
_I
1
n Al
- I ~ I X (
, , 1
En botonZqueremos enriquecer la forma. Con este
? , , , fin hemos creado un marco en forma de flecha uti-
1 lizando el comando Bordes del submenú Modifi-
car. Una anchura de 6 pixeles para el borde ha
"' sido la más óptima para nuestras necesidades. Acto
N'.:-------\- - .-l,,
seguido hemos procedido a guardar también esta
:) selección con el comando Guardar selección. Acto
1'
1:
seguido hemos cargado la selección original que
J
contiene la forma de la flecha y hemos cubierto su
superficie empleando el Bote de pinturacon el color
R: 53, V: 179 A: 191. A continuación hemos carga-
- do la selección del marco y hemos aplicado el color

R: 68, V: 146 A: 159 con el Aerógrafo.
Figura 143.
Documento PSD.
pmq
....
- , , ,,
- ".]U I I I I
L) -
I
Con el Aerografocon- 1
- C...- ,
#'+. f*
I
seguimos una textura 7
diferente en el marco. 4:
- .. . .
Figura 144.
Cgrtar CIII+X Menú Edición y documentos,
Copiar CCI+C paleta Opciones de tampón,
cuadro de dialogo Modificar
Pegar CtrI+V
Pegar dentro Mayús.+CliI+V bordes.
Boirsr
Rellenar..
!S de tampói
ad: 10
Dpci6n: )~lutivoLalitieado)
Purgar b r
A Con este botón de dirección 1 r
queremos igualmente producir
un efecto de marco. Aunque a
diferencia del anterior en la
zona interior incrustamos un
fragmento de textura. Esta tex-
tura es la misma utilizada en
otros elementos de la página.
Para aplicarla seleccionamos .._ . _
la textura y pulsamos el coman-
do Definir motivo a continua-
ción cargamos la selección de
la forma de la flecha y aplica-
mos con el Tampón la textura.
El paso siguiente ha consistido en cargar
la textura del marco ésta ha si
con un grosor de 8 píxeles y, con el Bote
hemos cubierto dicha superficie con un
blanco, obteniendo lo que muestra la ilus-
tración de la derecha.
- - .-
1 Figura 145.
Documentos PSD, cuadro de diálogo
Modificar bordes y Texto.
* En botonl simplemente hemos aplicado

1 con el Bote el color R : 207, V: 195 A: 177
.- - - - - - - - - - . en la forma diseñada. Este elemento es-
'
lI tará incluido junto con el anterior en la mis-

ma página Web. El color seleccionado está
-- - - - - - - - - - - - - - 5'
Y II 7incluido en la textura del documento ante-
rior. En éste igualmente creamos un mar-
t] co de 8 píírles de grosor y aplicamos con
el Bote y el Aerógrafo un blanco. Sólo nos
1 1 falta incluir el texto, empleamos una
- Eiiib
Aheac
I-~
rita r -
flva r IMM 3 C@j 2:
rvab ~ ? A M ~ T Z ~ Z S d -
Mo%lrat. IJ F-mlte R Tpm& -

O -
Textord cuerpo 20 en r& C~II+A -

color blanco. Guarda-
, ,*, ,'aU
,.;) L-72,;
fiada CirkrS r(- rI, j;7.
1 '.u-
lnvntir Mwjs +Cirl*l
--
I
4.-/,.fd-l,
mos la selección del .
Gama de colnca .. 2
texto para posteriores
aplicaciones una vez ",","rwqMwU' +""+' , +
ubicado en la posición
última tras ajustarlo
con la cuadrícula y las
reglas.
Consejo..
Trabajar con canales aifa para aplicar un afecto, un color, una textu-
ra o modificar ciertas zonas resulta más aconsejable ya que disponernos de
ellos en cualquier momento. Por este motivo, siempre que realice un cambio
de tamaño o de forma en el botón o cualquier otro elemento recuerde guar-
dar la nueva forma como una nueva selección o canal alfa, puede que lo
necesite en alguna ocasión.
2 . Modificando selecciones podemos aplicar en zonas

seleccionadas efectos con filtros, de este modo conseguimos
una gran variedudde botones y viñetas partiendo de un mismo
elemento. Veamos unas cuantas variaciones surgidas del
documento Viñeta gráfica.
Cancelar (
L '
Figura 146.
Documentos PSD, cuadro de diálogo Modificar bordes.
Los dos ejemplos mostrados mues-

tran cómo aplicando un filtro (izda. (- - . a . -CIx
Molinete, dcha. Rizo) en ciertas zo-

nas podemos modificar el aspecto de
un elemento dándole mayor diseño y
espectacularidad. Es perceptible el-
-
efecto que ha producido en el interior
de la viñeta gráfica. Para ello simple-
mente hemos invertido la selección
del marco mediante el comando In-
vertir.
3. Para producir efectos texturados podemos recurrir a la

aplicación de filtros en las máscaras o selecciones existentes
o confeccionar máscaras o selecciones de la zona en la cual
queremos producir una textura. Este proceso es igualmente
válido para cualquier elemento de la página como puede ser
un marco o una barra.
Figura 147.
Cuadro de diálogo
Cristal y documento
Upc~onss PSD.
Distorsionar (20
Ll
suaviia F
i
En la selección determinada mediante la aplicación
del comando Bordes mostrada en la figura 146 nos
hemos dispuesto a aplicar el filtro Cristal. El resul-
Tsxtliia. m- tado es el que aquí se muestra. Para su obtención
Escala I-00r: los valores determinados han sido una distorsión
G
de 20, suavizado 1, aplicado en una escala del
1 r lnvsrtir textura 200 % y la textura elegida ha sido lente pequeña.
.... b. 1" 1 c 8 1
2
1 1 1 " 1 1 1 1 ' 1 1 1
0,
figura 148.
jfl-
2 -
Cuadro de
diálogo Luz
difusa y
- documento
ion% --e-'
PSD.
les
!
I
Granulado En la misma zona seleccionada ha sido
A aplicado el filtro Luz difusa. Los valores
Cantidad de luz introducidos han sido granolado 1, Canti-
n dad de luz 5 y una cantidad de claridad
de 11. El resultado es el que muestra la
Cantidad de claridad 111 ilustración superior, comprobamos que es
a completamente distinta al anterior dando un
efecto final más sobrio.
El filtro Zigzag lo
en primer lugar
en el marco se-
leccionado. En el
segundocaso se
ha invertido la se-
lección aplicando
el filtro en el inte-
1 Cantidad m- rior de la viñeta
gráfica dando a
-estas 113 sendas imágenes
a los mismocvalo-
res. Éstos son
cantidad de on-
das producidas
10, cantidad de
crestas 5 y ondu-
laciones como
estilo. Los resul-
tados son obvia-
mente distintos.
Estilo: l~lrededordel centrol] -
Figura 149.
Cuadros de diálogo Zigzag y Encogc
respectivamente y documentos PSC tansela 1
Para producir este efecto simplemente
hemos aplicado el filtro ~ncogerdando
w
+
J1"% -
J
como valor de cantidad -100. Consegui-
mos un suave efecto que podemos pot
ciar posteriormente con otros efectos.
El filtro Molinete10
hemos aplicado
en primer lugar en
el marco seleccio-
nado. En la ilustra-
ción inferior he-
mos aplicado el fil-
tro en la zona in-
terior de la viñeta.
Mediante el co-
mando Invertirdel
menú Selección
se ha invertido la . . t.lD ,
I I 1
12 ,,1
se~ecciónLos re- n i
8
-
3 , I m m
II
sultados son com-
pletamente distin-
tos aun siendo el
mismo filtro y los
mismos paráme-
tros para ambas.
Ángulo: -999. =
-
Figura 150.
Cuadros de diálogo Molinete y I Cancelar 1 1
Esferizar respectivamente y docu-
" mentos PSD.
100% -
J
En este caso con el filtro Esferizar he-
mos conseguido transformar la forma ex-
terior, optando por el modo horizontal y
un valor de cantidad de -67. Consegui-
- -~antidad
a
167
mos una deformación de formas suaves
y equilibradas.
1
M o d ~ solo homontal I(
Figura 151.
Cuadros de diálogo Rizo y docu-
mentos PSD.
.
El ultimo ejem-
plo muestra el ....;.[[ 0
documento vi-
ñeta gráfica tras
aplicar el filtro
Rizo. En esta
ocasión ha sido
Opciones en la zona inte-
C:atitidad rior, para ello
hemos cargado
la respectiva se-
Tarriaño: lección. Dando una cantidad de 999
y un tamaño pequeño conseguimos
1 este suave efecto sobre la superficie
4. Ahora verifiquemos los resultados que podemos obtener

aplicando el filtro Efectos de iluminación en el documento
viñeta gráfica de la pBgina 238.
Figura 152.
A Cuadro de diálogo
y documento PSD.
kmbicnis Newiwa 7 0 P0:ll~n
Aplicando un Gfecto de iluminación en la viñeta gráfica intensÍficamos la sensación de

relieve producido con el degradado, aunque como podemos comprobar en la página
siguiente es posible igualmente modificar su forma aplicando el filtro en un canal de
textura ayudado por un acentuación del relieve.
m
....i.14
-
I'
-
.
'
I,
Estas ilustraciones muestran, em-
m
pezando de izquierda a derecha y
Figura 153.
Documentos PSD.
rl .I ' de arriba abaio: Canal de textura:
rojoy altura: 100,Canal de textura: boton Transparencia
y altura: 100, Canal de textura: canal alfa 5 y altura: 55 y
Canal de textura: canal alfa 6 y altura: 55. Tanto en el
caso anterior como en estos se han mantenido el resto de
valores modificando las propiedades de la luz por el color
R: 137, V: 186 y A: 244. Observe como es transfigurada la
forma del elemento en cuestión variando el canal. Con lo
realizado damos por finalizada la viñeta gráfica.
5 . El elemento flecha denominado boton2 visualizado en la

página 239 ha de ser perfeccionado dando un último toque.
Acentuaremos el contorno empleando el filtro Hallar bordes
y, por último, aplicaremos el filtro Efectos de iluminación
para dar un aspecto más sofisticado al elemento.
-!SYD
....i. 14 , , , ,
7
1
--iniXf
1 (4
Figura 154.
Submenú Estilizar y
documentos PSD.
m
,,. "
a
'
Y
m
'
-lalx
" " " I2" " " " 14" " '
AzulGos...
Bordes ilurriinados...
Difusi6n...
Solarizar
Trazar perfil...
Vinto...
Activamos la selección del marco guardada con anterioridad y aplicamos el filtro Ha-
llar bordes. De este modo conseguimos acentuar los mismos resaltándolos.
Figura 155.
Cuadros de diálogo
Cargar selección y
respectivamente y
documentos PSD.
rS
Hemos sumado la selección del marco a la selección #4. En la obtenida hemos apli-
cado un efecto de iluminación a modo de techo variando en propiedades de la luz el
color a R: 68, V: 146 y A: 159 aplicando en el canal de textura flecha Transparencia,
dando como resultado el que muestra la ilustración inferior izquierda.
Estas dos ilustraciones dejan
patente como pueden variar los
resultados cambiando el tipo de
luz utilizado. En la imagen de la
izquierda se ha empleado una luz
direccional, mientras que en la m
imagen de la derecha se ha re-
currido a un tipo de luz foca1
cambiando en sendos casos la
posición del foco. Comprobamos
las diferencias entre las tres.
5. Nos queda por tratar el elemento boton de la página 239 y el

elemento botonl d e la página 240. Éstos serán tratados al
mismo tiempo ya que pertenecen a la misma página Web.
La página es sencilla con detalles puntuales y finos. Por este
motivo sjmplemente aplicaremos un efecto de iluminación
en sendos botones manteniendo los valores, el tipo de luz y el
color de la misma.
Figura 156.
y documento PSD.
R Aciwar
flqativa 17
A
Máxima
n
Ropiedades
1 Lwhe
Mate .E7 Brillante
A
Malmial Pilsy
~ x p o s c i m ~LbO ~ ~
58 Meialico
O
Canai de textwa: I ~ a p 1a ~ranspnencid
R Ab~ndaiiciade blanco
l
Re'ri~l~al~~ 9: m
En los dos elementos I en sus respectivas capas hemos aplicado el filtro con los
valores especificados ( n la ilustración. Manteniendo el tipo de luz como focal y, en
cada caso el canal de ct Hura ha correspondido a la transparencia de la capa a la cual
pertenecía cada elemf ito, es decir, en el texto hemos aplicado el canal de textura
correspondiente a la c: Da que incluía el texto.
-.--:.O,
Cl -
,, , , , I2 a 1 , l4 ,,l , 18, ~ ~ ~ ~ ~ ~ 1 4 , , , , , , , , 1 ~ , , , i , , , , l ? , , , ~ , , , , l
ri J
-
, . , , * .. .
- - - .. . .. -.
2 -
-
Observamos que los dos botones comparten una homogeneización que viene dada
por las cualidades de color que ambos comparten. Se han mantenido dando los mis-
l !
/"
mos efectos, conservando los mismos valores en cada cuadro de diálogo. Todo ello
quedará patente cuando visualicemos la página en su conjunto.
Figura 157. Aquí mostramos unas variaciones. En la imagen central y de-

Documentos PSD. recha hemos aplicado el filtro Hallar bordes y seguidamente
Efectos de iluminación, mientras que en la imagen de la iz-
quierda hemos variado el canal de textura con respecto a la obtenida en la página
anterior. En todos los casos se han mantenido el resto de valores.
6. Por último añadimos una sombra a los botones y viñetas

gráfias. Para realizar este proceso duplicamos la capa -utilice
el sistema que más le satisfaga- o, bien creamos una capa
nueva y la colocamos por debajo de ésta en la paleta Capas.
Acto seguido cargamos la selección a través del comando
Cargar selección del menú Selección. Una vez delimitada la
zona la cubrimos de negro con la herramienta Cubo de
A
pintura, a continuación, desactivamos la selección y aplicamos
el filtro Desenfoque gaussiano introduciendo las coordenadas
más acordes con las características del elemento y del proyecto
en general. Sitúela en la ubicación deseada.
Figura 158.
Documentos PSD.
En las dos sombras

hemos aplicado un
radio de desenfoque
de 3,7 píxeles. En
los botones que apa-
recen en la página si-
guiente hemos intro-
ducido el mismo valor aunque aplicado repetidas veces. A lo largo del libro todos los
ejemplos han mostrado sombras creadas con negro. Lógicamente una sombra no
tienen por qué ser siempre negra, pruebe con sombras de otros colores.
Documentos PSD
respectivamente.
Las sombras siempre dan un

aire de realidad, de corpo-
reidad a los objetos. Todos sa-
bemos que cualquier objeto
está intrínsecamente ligado a
su propia sombra, por este motivo siempre resulta intere-
sante añadir sombras a los elementos de una página Web.
No obstante, también puede resultar inquietantemente llamativo un objeto que no
posea sombra y, por ejemplo el resto de los elementos que sí la presenten.
Consejo ...
Aunque aquí no se ha mostrado podemos usar cualquier comando de
ajuste de color, tono, etc. para aplicar efectos interesantes. Del mismo modo
que podemos ir añadiendo nuevas selecciones o canales alfa para producir
sutiles efectos de iluminación y relieve dando lugar a efectos más realistas y
efectistas si es el caso. Le animo a realizar otras variaciones de producción
de elementos para la página aprovechando otras herramientas aquí no men-
cionadas o utilizadas con fines especificas.
En uno de los dossrers rnclurdos en color mostramos unos cuantos

ejemplos ilustrativos de elementos en los que se han aplicado diferentes
tipos de filtros y texturas, aunque, en especial, mostramos distintos elemen-
tos conseguidos utilizando los comandos del submenú Ajustar, ya que en
escala de grises este tipo de variaciones casi no son perceptibles.
Diseñar marcos, barras y botones 2n
La etiqueta UL para crear

listas desordenadas
Generalmente las listas son configuradas mediante una puntualización
numerada de cada uno de los apartados señalados. Aunque también encontramos
listas no numeradas que en HTML se las denomina listas desordenadas. A dife-
rencia de las listas ordenadas en este tipo cada elemento de la lista viene precedi-
do por un punto gráfico o un triángulo semejantes, según sea el navegador. Pero
igualmente podemos enriquecer enormemente nuestra página incluyendo imáge-
nes que sustituyan las viñetas por viñetas gráficas consiguiendo que nuestra pági-
na adquiera un carácter más personal al tiempo que gana en diseño.
Pero vayamos por partes. La etiqueta UL nos indica que vamos a trabajar
con listas desordenadas. Cada elemento de la lista siempre va precedido por la
etiqueta LI, el cual hace que aparezca un círculo, cuadrado o triángulo, como ya
digimos, delante del texto o vínculo. Otra etiqueta posible de una lista es L H la
cual es utilizada para incorporar cabecera en un listado. Siempre que deseemos
colocar un titulo a una lista habremos de escribir<LH> antes de la etiquetacUL>.
-
I
Una lista desordenada o también lista con viñetas con cabecera
seguiría la siguiente estructura:
<LH>Cabecera de la lista
<UL>
<~ l > É s t esería el primer elemento de la lista
<LI>Este otro el segundo elemento
<L/> Y así sucesivamente
</UL>
I Si sustituimos la etiqueta <L/> por COL> nos aparecerá un núme-

ro que sustituye el punto cuadrado o triángulo.
Webs c o n Photoshop
m -
.
i1E:'At
T
o,
>
rr i
8-
,.
,.,,
,. .- .,.e,
-...,*M..
..
.-.,?
7-
,.,mi
."
2.
,A#
'C?A
.9
.
,.l.i,
.
".
..Y..
-
qUIffiA
- w *
.
"J
.
-+u-,--
.
F
-.-.
7
Figura 160.
--
- A
. .
Visor de Microsoft
lnternet Explorer.
Aquí tenemos un claro ejemplo de lo

explicado en la página anterior. Como
vemos en una lista desordenada o lis-
ta por viñetas aparece un elemento
geométrico, en este caso un círculo,
mientras que en las listas ordenadas
aparece cada elemento precedido por
l, . a ... A
el número correspondiente En los dos
casos hemos incluido cabecera.
También podemos encontrarnos con listas con viñetas anidadas. Las lis-
tas anidadas son listas que contienen a su vez sublistas dentro de algún punto de la
lista. En estos casos las diferencias visuales básicas que encontramos es un cierto
deslizamiento de las sublistas y un cambio de forma de la viñeta que la acompaña.
Para incluir una lista hemos de especificarlo mediante la etiqueta MENU, la cual
es interpretada como otro elemento de apertura.
i
.
U n a lista desordenada anidada y con cabecera sigue la siguiente sin-
taxis:
<LH> CABECERA DE U N A LISTA DESORDENADA
<UL>
<LI>Primer elemento de la lista
<LI>Segundo elemento de la lista
<MENU>
<LI>Primer elemento del segundo elemento de la lista
<Lbsegundo elemento del segundo elemento de la lista
<MENU>
<L/> Primer elemento del segundo elemento, del segundo
elemento de la lista.. y as&iacute sucesivamente .
</UL>
Figura 161.
Visor de Microsoft ,. .
I *
E&
-
-
< %
lnternet Explorer [.-.-12 I
Aquí tenemos un ejemplo representa-

tivo de listas de viñetasanidadas. Ob- r r ' , 4
,.>z t V*? .
r i .m.+,+.".
.r=j <9,?? *AL,. 7.7, . m-*
serve que en cada sublista aparece una

viñeta diferente al tiempo que apare-
cen los diferentes componentes des-
plazados con respecto al grupo inme- '
diatamente superior
Con HTML es posible crear otro tipo de listas denominadas listas de

glosarios o listas de definición empleadas para introducir datos descripti-
vos que hacen referencia o definen una palabra, cosa, etc. Así especificare-
mos el término mediante la etiqueta DT, mientras que la definición del tér-
mino vendrá determinada por la etiqueta DD, siguiendo la siguiente sin-
taxis:
<DL>
< D T > Término
<D D >Definición del término
<DT>Término
<D D >Definición del término
</DL >
En ocasiones este tipo es combinado con los otros tipos de listas, en

especial cuando se trata de listas desordenadas anidadas.
Las listas desordenadas pueden ir acompañadas de una serie de atributos

posibles. Entre ellos el que debemos destacar en este apartado es TYPE, el cual
facilita el cambio o selección del tipo de viñeta que deseemos visualizar. Si se
trata de listas ordenadas (etiqueta OL) podemos sustituir el tipo de numeración.
Dentro de las posibilidades existentes las más importantes son: DISC (disco),
Webs con Photoshop
CIRCLE (círculo) y SQUARE (cuadrado), debiéndolo especificar del siguiente

modo: <LI TYPE=DISC>, por ejemplo. Cuando se trata de listas ordenadas
podemos usar igualmente el atributo VALUE con el que podemos indicar el va-
lor de índice dentro d e la lista escribiéndolo del siguiente modo: cLI
VALUE=30>. Este viene muy bien cuando tenemos que indicar el número si-
guiente de una lista separada por algún otro elemento intermedio, por ejemplo
una imagen. Otro atributo a destacar es START el cual determina el valor de
inicio para un elemento incluido en la lista.
La siguiente sintaxis muestra de que manera actúan los atributos TYPE
y VALUE en las listas (figura 162):
<LH>CABECERA DE UNA LISTA DESORDENADA

<UL>
<L/ TYPE=CIRCLE>Primer elemento de la lista
<MENU>
<LI N P E =SQUARE >Primer elemento del segundo
elemento de la lista
</U/->
<IMG SCR=boton2.gif WIDTH=40 HEIGHT=40 ALIGN = BASELINE>
<UL>
<LI TYPE= CIRCLE >Tercer elemento de la lista
<IUL>
< LH>CABECERA DE UNA LISTA ORDENADA

<OL>
<LI>Primer elemento de la lista
<MENU>
<LI NPE=SQUARE>Primer elemento del segundo
elemento de la lista
</OL>
<IMG SCR=botonZ.gif WIDTH=40 HEIGHT=40 ALIGN=BASELINE>
COL>
<LI VALUE=3>Tercer elemento de la lista
<lOL>
Figura 162.
Visor de Microsoft
lnternet Explorer.
Comprobamos mediante la ilustración

y la muestra de la sintaxis que VALUE
y TYPE cumplen funciones similares.
En listas ordenadas también es posi-
ble introducir atributos de viñetas, en
esta ocasión ha sido un cuadrado. Para
que aparezca la línea debajo de la ima-
gen hemos añadido en ALIGN el valor
BASELINE.
La etiqueta IMG para añadir

viñetas g~áfieas
en las listas
Para incluir viñetas personalizadas en un documento HTML tenemos que
recurrir al uso de la etiqueta IMG e incluir la viñeta como un elemento gráfico
más de la página. Este tipo sustituye la viñetas de las listas desordenadas o viñetas
propias de algunos editores de HTML. Además en estos casos debemos tener
presente que ya no trabajamos con los atributos y etiquetas propios de una lista, si
no con los atributos de párrafos, tablas o allí donde quiera introducirlos.
Lógicamente, trabajando con la etiqueta IMG debemos tener presente

todas los atributos posibles con los que podemos movemos, es decir, atributos de
alineación como son ALIGN o VALIGN para definir la posición en horizontal y
vertical respectivamente, WIDTH y HEIGHT para especificar numéricamente
la anchura y altura de la imagen o el tamaño en tanto por ciento, según se desee.
También podemos determinar cuanto espacio, cuantos píxeles deseamos dejar entre
la imagen y el texto mediante los atributos HSPACE y VSPACE que definen el
espacio horizontal y el espacio vertical respectivamente. Por último, entre los atri-
butos que nos interesan en este apartado encontramos SCR el cual nos define el
URL de la imagen que hemos de insertar.
Encontramos que para definir la posición en horizontal utilizaremos el atn-

buto ALIGN de los siguientes modos: izquierda ALIGN=LEFT; centro
Webs con Photoshop
ALIGN=CENTER y derecha ALIGN=RIGHT. Para determinar la posición en

vertical emplearemos el atributo VALIGN de los siguientes modos: superior
VALIGN=TOP; centro ALIGN=MIDDLE y inferior ALIGN=BOTTOM.
Por otro lado, podemos especificar el tamaño de la imagen con su tamaño

en píxeles en ancho y alto, incluso reduciendo sus valores a modo del ejemplo:
WIDTH= 66 y HEGHT=40 o en tanto por ciento escribiéndose simplemente:
La siguiente sintaxis muestra de que manera podemos crear una lista

con párrafos, mediante la etiqueta P (primera cabecera de figura 163 supe-
rior):
<P>CABECERA DE UNA LISTACON VIÑETAS

GRÁFICAS
<UL>
<P > <IMG SCR=viñetagrafica.gif WIDTH= 1S
HEIGHT= 15 VSPACE=4 ALIGN = LEFT>
Primer elemento de la lista
I <P> <IMG SCR=viñetagrafica.gif WIDTH= 15

Segundo elemento de la lista
<BLOCKQUOTE > <P > <IMG SCR =viñetagrafica.gif

WIDTH = 15 HEIGHT= IS VSPACE=4 ALIGN=LEFT>
Primer elemento del segundo elemento de la lista
<IBLOCKQUOTE>
<P> <IMG SCR=viñetagrafica.gif WIDTH= 15

HEIGHT= 15 VSPACE=4 ALIGN =LEFT>
Tercer elemento de la lista
<IUL>
Las etiquetas <BLOCKQUOTE > </BLOCKQUOTE>nos sirve

para crear sublistas, aunque su función habitual consiste en forzar un espa-
cio en vertical del texto que se encuentra intercalado entre ambos.
Observe que las etiquetas <UL > </UL > son utilizadas del mismo
modo en el ejemplo de la lista superior, de este modo conseguimos desplazar
en conjunto. Hemos extrapolado una etiqueta propia de la creación de listas
en HTML.
Figura 163. e,-t EA* Iw . ,-.

.: -
a .l,"
Visores de Microsoft . .j ii II
--.
2 4
-.-F + - 4 r.- P*d. r*.
,
lnternet Explorer.
.
N
.l!,P.rj
iv.rmm* *i r. ni,.
Observe que la lista inferior no apare-

'"'""*"'-
a hmrr + ~ mir:* iir.L cm.- -c UM.
ce desplazada, eso se debe a que no .3-m,,-o,+hL*
se han incluido las etiquetas <UL= Y , ,,,,-~,,-c~,~,~~~:.~.

dUL>en la sintaxis. Por lo demás, pre- .,V. ,,,,,, +,
senta el mismo esquema que la lista ircA-Mnhl.a

de la parte superior que aparece defi- = hrt!-- M.~..-A..=.-,+~L-.
+
nida en la página anterior. La imagen myr;n=+--u*LL?.

ha sido reducida hasta 15por 15 para
encajarla con el cuerpo de la letra. En , . 4
-
..*K
esta ocasión no hemos puesto énfasis en otros elementos y atributos referentes al

texto por no creerlo conveniente. En la ilustración inferior se muestra otro ejemplo de
Y ..>y n r >.>.:-.". up. listas en tablas. En esta tabla de
s. . . ,A .,: :A,
p.+br,+!. ,,?, m-,-.
:, ,:.
., r_._ .,,.,, dos celdas constituida por una
columna y dos filas es un claro
m: ejemplo de cómo crear listas en
• ':u.,,~ F D ~ * ~ ~ ~ una tabla. Observe como la lista
I mTnin-iiXIid. que vemos en la celda superior
. -
.)mri-**Li1i
?hYd,'k*rn* & li3,
F:t.~.*EmiidL15.
-
aparece más espaciada, esto se
debe a que cuando usamos la
etiqueta de párrafo P las separa-
ciones son mayores que cuando
utilizamos la etiqueta de retorno
de carro BR. Elija la opción que
más le satisfaga o que mejor se
,l.-- a" < adapte a sus necesidades.
A

La figura 163 inferior muestra la siguiente sintaxis:
<TABLE WIDTH=SO% ALIGN =CENTER BORDER= 1

CELLPADDING=20 CELLSPACING=3
BGCOLOR= #FFFFFF>
<TR>
<TD>
<P> <IMG SCR=viñetagrafica.gif WIDTH = 1S
HEIGHT= IS VSPACE =2 ALIGN =LEFT>
Primer elemento de la fila
<P > <IMG SCR=viñetagrflca.gif WIDTH = 15
Segundo elemento de la fila
<P> <IMG SCR=viiietagrafica.gif WIDTH= IS
HEIGHT= IS VSPACE =2 ALIGN=LEFT>
Tercer elemento de la fila
<ITD >
</TR>
<TR>
<TD>
<BR > <IMG SCR=viñetagrafica.gif WIDTH = IS
HEIGHT= IS VSPACE=2 ALIGN=LEFT>
Primer elemento de la fila
<BR > <IMG SCR =viñetagrafica.gif WIDTH = 15
HEIGHT= 15 VSPACE=2 ALIGN= LEFT>
Segundo elemento de la fila
<BR > <IMG SCR =viñetagrafica.gif WIDTH = 1S
HEIGHT= IS VSPACE=2 ALIGN=LEFT>
Tercer elemento de la fila
<ITD >
<ITR>
</TAB LE >
ota...
La etiqueta <BR> es empleada generalmente para hacer un salto
de carro, mientras que la etiqueta <P> indica el comienzo de un párrafo.
nota...
Si en una tabla ha de incorporar sublistas puede trabajar igualmente
con las etiquetas <BLOCKQUOTE > c/BLOCKQUOTE> y <UL>
</UL> como mostrábamos en el ejemplo anterior (páginas 256-257).
La etiqueta IMG para agregar botones

y la etiqueta A para que sean vínculos
La ubicación de un botón en una página puede extenderse a cualquier
sitio, así que podemos encontrarlo en cualquier parte dentro de la sintaxis de un
documento HTML. Generalmente los botones y en raras ocasiones las viñetas
gráficas son vínculos internos que nos trasladan a otras páginas relacionadas o
mapas de imagen. Estos últimos dan una mayor flexibilidad que los simples vín-
culos de imagen, ya que pesmiten una mayor organización de los vínculos aunque
es más adecuado para gráficos más elaborados. En este apartado nos detendremos
exclusivamente en mostrar cómo incorporar un botón como vínculo. Las imáge-
nes como mapas serán tratadas con mayor profundidad en el capítulo 9.
De por sí, los vínculos en forma de botón tienen la característica de ser de

tamaño reducido, dado el tiempo de espera que requiere una imagen para que sea
cargada es lo más recomendable y, por lo general, muestran una relación con la
página a la cual nos traslada, ya sea porque adquiere la morfología de un símbolo
Webs con Photoshop
concreto, de un logotipo o porque va acompañado de un texto que lo relaciona o

el gráfico trae incorporado una palabra o frase que despeja de toda duda sobre
donde nos dirigimos.
La etiquetaIMG consta de otros atributos, además de los mencionados en

el apartado La etiqueta IMG para añadir viñetas gráficas en las listas, como son
ISMAP el cual identifica el gráfico como un mapa de imagen activo, sobre éste
podemos pulsar para que se ejecuten las acciones definidas. Debemos especificar-
los como muestra el ejemplo: <IMG SCR=boton.gif ISMAP>. También conta-
mos con el atributo ALT de gran utilidad y que siempre es importante incluir pues
facilita la visualización del texto sustitutivo de la imagen en browsers que no
pueden visualizar gráficos. Si por ejemplo se trata de una imagen que representa
un botón que sirve de enlace con otra página podemos incluir el siguiente texto
en el atributo <IMG SCR=boton.gif ALT=ir a página de direcciones ISMAP>.
Por otro lado y, aunque no lo mencionamos en la creación de marcos, en las
imágenes podemos incluir marcos con HTML mediante el atributo BORDER,
según el valor determinado será el grosor del borde: <BORDER=4>. Resulta ser
un elemento muy útil cuando se trata de mapas de imagen. Cuando trabajamos
con ISMAP, éste siempre nos aparece enmarcado a modo de signo que lo identi-
fica como tal. Si trabajamos con gran cantidad de elementos gráficos resulta inte-
resante emplear el atributo LOWSCR al tiempo que SCR. De este modo, siem-
pre aparece primero una imagen de baja resolución que es a la que hace referen-
cia LOWSCR y, a continuación, la imagen de alta resolución que es a la que hace
4
referencia SCR. Al igual que éste último debemos indicar el URL de la imagen
del mismo modo que el siguiente ejemplo: <LOWSCR:boton.gif>.
Como ya se mencionó, generalmente los botones son vínculos. Éstos últi-

mos pueden encontrarse a su vez en forma de texto, sin embargo aquí trataremos
exclusivamente una imagen tratada como vínculo. En realidad la incorporación de
botones en las páginas está intrínsecamente relacionado con la versatilidad que
ofrece HTML, ya que mediante las anclas de hipertexto podemos unificar dife-
rentes documentos HTML bajo una misma estructura común compartida, es decir,
podemos articular distintas páginas Web vinculándolas mediante la etiqueta A
haciendo que aparezcan como un sólo corpus. Aunque el elemento al cual nos
traslade puede ser de los más diverso, por ejemplo una animación, un vídeo, un
servidor o como ya hemos indicado otro documento. En definitiva, para que una
imagen aparezca especificada como un vínculo y así sea entendida debe estar
incrustada entre las etiquetas <A> y </A>. Inmediatamente después de la etiqueta

A hemos de introducir la dirección del documento al que se hace referencia, para
ello es necesario el atributo HREF donde debemos especificar el URL del docu-
mento al que accedemos al pulsar sobre el elemento gráfico. La sintaxis aparece
como muestra el ejemplo: <A HREF=/documento HTM/listas.html>.
La dirección de destino puede ser de lo más variada, puede remitirse a la

ampliación de una fotografía, en tal caso la sintaxis presenta la siguiente estructu-
ra: <A HREF=foto.jpeg>. Si por ejemplo está en un servidor, hemos de especi-
ficar el tipo de servidor y las referencias parciales, es decir, indicar los directo-
rios, los diferentes niveles en los que se encuentre englosado el documento en
cuestión, por ejemplo: <A HREF=http://www.web/diseño/graf.html>.

I Un vínculo en forma de texto presenta la siguiente sintaxis:
< A HREF=URL> Aquí debemos escribir el texto que

aparecerá como vínculo, el cual es el ancla</A>
Un vínculo en forma de imagen presenta la siguiente sintaxis:
Figura 164. ,- ,. m
-.
i [A,. Y- ,.-m .
.
.+
Visor de Microsoít >

-
3
- .-.-
_1 \':, j
;i_.ii,
11
.,
9 'J
.,..
>f
- -.
.?
'..
lnternet Explorer.
Lrr
i,::. ..I...* . .. pJ;".'.,'-, . -.."+,

c.
, -;
i_.r < 4 +-. o L
-
-
.?
Cuando acercamos el cursor a una

imagen que es a su vez un vínculo, éste
siempre nos muestra el nombre del
mismo. En según que tipo de diseños
resulta interesante remarcar que se tra-
ta de un vínculo, podríamos decir que
es casi necesario cuando está incor-
porado en un texto a diferencia de si
se trata de un botón independiente. . l r + , 7 M-;
n l g o sobre html ...

I La figura 164 presenta la siguiente sintaxis:
<HTML>
<HEAD>
< TITLE >imagen vinculo </TITLE >
<IHEAD >
<BODY>
Pulse sobre el vínculo <A HREF =/documento H T M I

listas.html> < l M G SCR= boton2.gif ALT=botón
W I D T H = 2 0 HEIGHT=2O ALIGN=MIDDLE BORDER=2>
<lA>para trasladarnos a otrasáreas del sitio
3
Observe que alrededor de la imagen aparece un marco. Por ser un
elemento tan pequeño hemos querido resaltarlo. para ello hemos incluido el
atributo BORDER=2 dando un grosor a éste de 2 pixeles. Aparece por
defecto en azul.
A-- L.* - 8. c., *." Figura 165.

Y - Visor de Microsoít
h / ; :~
'?7&f ? lnternet Explorer.
TP-A'flrl ' í Vi 1. t r7##VU'
I
En este ejemplo mostramos dos boto-
nes que son vínculos gráficos sobre los
cuales hay que pulsar. Ambos casos
no presentan un marco pues no es ne-
cesario pulsar para trasladarnos a la in-
formación que nos interesa y vienen
- -
1 explicitadas por las palabras incluidas
E3 en cada uno de los elementos gráficos.
J
a*-

La figura 165 presenta la siguiente sintaxis:
< HTML>
<HEAD>
< TITLE> imagen vinculo </TITLE>
<IHEAD>
ALIGN =CENTER VSPACE=20 HSPACE= 1 70>
<TABLE WIDTH =30% ALIGN=CENTER BORDER= 1
< TR>
<TD ALlGN=CENTER> <IMG SCR=moda 1 .jpg
WIDTH= 160 HEIGHT=24 1 VSPACE=5 HSPACE=5
ALlCN =MIDDLE> </TD>
<ITR>
<ITABLE >
<A HREF=l¿ocurnento HTM/tienda.html> <IMG

SCR=botonS.jpeg ALT=tienda WIDTH = 150 HEIGHT=86
BORDER=O ALIGN = LEFT> </A>
<A HREF=/docurnento HTMllistas.html> <IMG

SCR=botonl.jpeg ALT=listas WIDTH = 150 HEIGHT=86
BORDER=O ALIGN=RIGHT> </A>
Compruebe el valor de los atributos incluidos en IMG y HREF.

La figura 166 presenta lo siguiente sintaxis:
cHTML>
<HEAD>
< TITLE > imagen vinculo </TITLE >
cIHEAD>
c BODY BGCOLOR=#CFC3B 1 >
<TABLE WIDTH=40% ALIGN =CENTER BORDER= I
< TR>
<TD ALIGN =CENTER> <IMG SCR=marco.jpg
LOWSCR=marco2.jpg WIDTH=425 HEIGHT= 142 > <lTD>
cITR>
c TR>
< TD ALIGN=CENTER> <IMG SCR=modaI.jpg
LOWSCR=moda3.jpg WIDTH= 160 HEIGHT=24 1 > c / T D >
c/TR>
</TABLE >
<P>
<A HREF=/documento HTMllistas.html> < l M G
SCR=boton 1 .jpeg ALT=listas WIDTH= 135 HEIGHT=54
BORDER=O></A>
<A HREF=/documento HTMltienda.html> <IMG
SCR=botonZ.jpeg ALT=tienda WIDTH= 135 HEIGHT=54
BORDER=O></A>
<A HREF=/documento HTM/compl.html> < l M G
SCR=boton3.jpeg ALT=complementos WIDTH=268
HEIGHT=54 BORDER=O> </A>
<A HREF=/documento HTM/infgeneral.html> <IMG
SCR=botonZ.jpeg ALT=volver a pagina WIDTH= 1 15
</BODY>
I </HTML>
Disefiar marcos, barras y botones 265
Figura 166.
Visor de Microsoft j,j+41p t,l.l$ F , r , l ~ , $V,UI i, I ~ I - ~ + , r .W
, , .d j
lnternet Explorer. r n ~ o i l r snm
n ~ WOIMII>PS '
Los botones aparecen insertados como

si se tratase de una barra de herra-
mientas, manteniendo una cierta dis-
tancia entre ellos para que el diseño no
se presentase en exceso monolítico. La
página principal sirve exclusivamente
como carta de presentación de la
irffa-l
3-
-r'
fi
E,
(j[#f-- T ln
~:t.~
ttr 1 -irr**y*n
diseñadora, desde ésta nos traslada- , - L...4

mos a las secciones que sean de nues- ,-
tro interés
Consejo..
Si ha de incluir un gran numero de botones resulta interesante com-
ponerlos de tal manera que aparezcan como una barra o caja de herra-
mientas. Para ello deberá tener en consideración por lo menos la altura de
+ los botones con el fin de que todos ellos coincidan. Aunque si presentan unas
dimensiones de altura y anchura exactas podemos reducir la proporción de
todos a la vez si lo creemos necesario.
Figura 167. L., .ui 2. . í-". L..&

IB
I
Visor de Microsoft &.. 4 .', 2- 2; re. a; .,:. r
lnternet Explorer. ,.* u~ , =M r
- ,
wsx--J f'",
r VI[>wn-wnnr e
En esta página diseñada por marcos, ~ - l u a i i - ~ - - i
los botones aparecen en la división de 'rv,*ñi
,u, ,, . , ::?i.TP ~.~M+VPI
,,i~llJ
-~
la izquierda mientras que la imagen
central aparece en la división de la de-
recha. Este tipo de diseños en vertical,
resulta interesante cuando todos los
botones (los vínculos gráficos) son del
mismo tamaño o con el mismo ancho -- -.. F - -
en contraposición al ejemplo superior. ,
a l g o sobre k m l . ..
La figura 167 presenta la siguiente sintaxis:
<HTML>
<HEAD>
<TITLE>imagen vinculo en documento por marcos</TITLE>
</HEAD>
<FRAMESET COLS= 35%, 65%>
CFRAME SCR=moda I.htm NAME=moda 1 >
<FRAME SCR=modaT.htm NAME=moda2 >
</FRAMESET>
<IHTML>
Donde el documento moda 1 presenta la siguiente sintaxis:
< HTML>
<HEAD >
< TITLE > imagen vinculo </TITLE >
</HEAD>
<BODY BGCOLOR= #CFC3B 1 >
<A HREF=/documento HTMllistas.html> <IMG
SCR=boton l.jpeg ALT=listas WIDTH= 135 HEIGHT=54
BORDER=O> </A>
<A HREF=/documento HTM/tienda.html> <IMG
SCR=botonT.jpeg ALT=tienda WIDTH= 135 HEIGHT=54
BORDER=O> </A>
<A HREF=/documento HTMlcompl.html> <IMG
SCR=botonJ.jpeg ALT=complementos WIDTH=268
<A HREF=/documento HTMlinfgeneral.html> <IMG
SCR=botonZ.jpeg ALT=volver a página WIDTH= 1 15
</BODY>
<IHTML>

Y el documento moda2:
<HTML>
<HEAD>
<TI TLE > imagen vinculo <lTITLE >
<IHEAD>
<TABLE WIDTH=40% ALIGN =CENTER BORDER= 1
CELLPADDING=2 CELLSPACING=2 BGCOLOR= #FFFFFF>
<TR >
<TD ALIGN=CENTER> <IMG SCR=marco.jpg
LOWSCR=marcoZ.jpg WIDTH=425 HEIGHT= 142 > </TD>
<ITR>
<TR>
<TD ALIGN =CENTER> <IMG SCR=moda I.jpg
LOWSCR=moda3.jpg WIDTH = 160 HEIGHT=24 1 > <lTD >
<ITR>
<ITABLE >
<IBODY >
<IHTML>
En el documento principal se ha utilizado el atributo NAME el cual

puede estar igualmente vinculado a la etiqueta A. Es el ancla desde el obje-
to, es decir, si modal.htm es el archivo que contiene el ancla, moda1 es el
ancla NAME. En la mayoría de los casos puede omitirse pues su valor viene
implícito. Otro atributo relacionado con la etiqueta A es TlTLE que incluye
PROYECT
A lo largo de este extenso tema hemos ido mostrando como se diseñaban
marcos, barras y botones; entre los numerosos ejemplos mostrados se han interca-
lado partes sustanciales de las páginas que estamos elaborando. Con el fin de
redondear en cierto modo lo aquí explicado, nos detendremos en enseñar cómo
hemos creado los botones que aparecen en las últimas ilustraciones.
1. De la barra diseñada que aparece en la página 229 hemos

procedido a duplicar el documento mediante el comando
Duplicar. A continuación, hemos reducido el tamaño del
documento en sentido horizontal para convertirlo en un botón,
para ello se ha pulsado el comando Tamaño de imagen.
Este proceso ha sido repetido cuantas veces ha sido necesario.
Modo
- I L , l l 4 l1
Tamaño da imagen...
-
Tamaño da lienzo...
Rot.ar lierizo b 'pulgada :
Histograma...
A Mantener propación
IJ Yolver a mwtrar 13 imagen- F
Figura 168. El tamaño de los distin-
Menú Imagen, cuadro tos documentos duplica-
de diálogo Tamaño de dos se remite al texto
imagen, documento y que hemos de incluir.
documento PSD. Aquí aparece el más pe-
queño que tiene una an-
chura de 142 píxeles y una altura de 57 píxeles. El 1 I
resto tiene una anchura de 268 píxeles y altura de 57 píxeles y anchura de 115
píxeles y altura de 57píxeles, tal como aparecen en esta página y en la siguiente.
Figura 169.
Documentos PSD.
Antes, sin embargo, hemos rea-

lizado unas pruebas para com-
probar cdmo queda el botón con
varios tamaños de texto, que
resultasen legibles y al mismo
tiempo encajasen. ~ l ~ t a m a de-
ño
finitivo se ha basado en relacio-
narlo en una misma altura. es
decir, 57píxeles relativizando el
ancho de éstos.
2. El paso siguiente ha consistido en introducir el texto en otra

capa en los respectivos documentos. Antes se ha elegido el
color frontal deseado. Por último en el cuadro de diálogo Texto
hemos determinado la fuente, el tamaño y el estilo. Para
finalizar se ha aplicado en los documentos el filtro Relieve.
Mostrar P Fuente
Figura 170. En todos los documentos se ha

Cuadros de diálogo elegido como Fuente: Dextor
Texto y Relieve OutD, Tamafio:30 puntos, Esti-
lo: Negrita. Por otro lado, en el l
respectivamente y
documento PSD. cuadro de diálogo del filtro Relieve se ha determinado los
siguientes valores: Ángulo: 43 grados, Altura: 7 píxeles y
Cantidad: 140 %. Los resultados son los que se presentan.
m i 1i1
1 . . . ' D
,1
111'
14
.
. m .
16
' 1 IE:
~ 4
Figura 171.
Documentos PSD.
$ De este modo comprobamos

aue una barra diseñada oode-
-!?=a!-.L- 1 1
-i 1 k o s transformarla en botones y
complementarla en una misma página. De todos los documentos se ha guardado una
copia en formato JPEG mediante el comando Guardar una copia.

Estas dos ilustraciones muestran cómo y de qué manera son empleadas
las viñetas gráficas o bullets y los botones para confeccionar una página Web.
*,*
-.
- .:
c,+
--- . - . .>-
-- ,. '* : * * -'-- 2 -
7
. . . .
v.
- .
..."*. .
liii-- 7..
a .
Ir...
Figura 172.
Visores de Microsofi lnternet Explorer.
Cduniverse presenta un uso de botones y

C D UNIVERSE viñetas gráficas bien distinto a la ilustración
7"#*OSY~"%#' ."n.,,. .",C'<
inferior. Éste utiliza las viñeta~gráficas junto
casos son a su vez barra de herramientas. Los

,...
/ "..-,,
I" 1 1 ,
.,.,,h.,..
.-
T. N. (7.1.
. -
rpl I
:"<- ,- .,
- -m
, ... .
La página aparece relativamente ordena-
da. Bloorningdales por su parte presenta
dos diseños de botones, que aparecen
m v. ""''zio/2,(7
1 , trn*>qlun
~
como barras de herramientas muy orde-
nadamente distribuidos, poseen todos las . ---. 3.-
q L. m , , -, ,, , .,$
mismas dimensiones lo que acentúa en 191 1 '

u--. . ...
.
--..a.
mayor medida el efecto de orden y clari- .
dad visual incrementado por la aparición
de imágenes con vínculos. -
$..*
,
*.nGii
.<.-
II..
ori'p-
8
!
-
- e-
1
A
Es probablemente uno de los elementos que mayor consideración ha de
tener, pues siempre que incluimos tipografía como un elemento gráfico posee, en
la mayoría de los casos, por no decir en todos, unos valores connotativos muy
importantes. El diseño y las modificaciones que se realizan van dirigidas a una
mayor unificación del elemento con respecto al resto de miembros de la página al
tiempo que puede poseer unos valores intrínsecos a su propia morfología o a la
morfología dada. Todos sabemos que no es lo mismo incluir un tipo determinado
de fuente que otra de características opuestas, por ejemplo, no es lo mismo una
tipo de letra dentada que una de líneas completamente lisas y rectas. Este aspecto
queda intensificado cuando en un tipo de fuente determinado producimos
transfomaciones, lo que en cierto modo la personaliza además de incorporar
unos valores visuales. Esto hace que sea tan importante ya que podemos acentuar
en mayor medida nuestros diseños personalizando los elementos incluidos.
Resulta evidente que cualquier documento que contenga tipografía

necesariamente tendrá zonas transparentes. Trabajando con formato JPEG puede
hacer la prueba de rellenar dichas zonas con el color sólido o la textura de fondo,
pero siempre comprobando que el acoplamiento en el documento HTML será
Webs con Photoshop
siempre correcto. Si no es así debemos trabajar con formato GZF89a, el cual nos
permite tratar las transparencias con mayor perfección de acabado. No obstante,
tenga presente que lo dicho en el capítulo 3 y capítulo 6 es una parte esencial que
debemos realizar dentro del proceso de elaboración de cualquier elemento gráfico
con zonas transparentes y, que aunque en este capítulo y en el anterior no se ha
mencionado, deberá tenerlo presente y remitirse a los procedimientos adecuados
para tratar dichas zonas.
Photoshop dispone del comando GZF89aExport para ajustar las zonas

transparentes y adecuarlas al fondo de la página. Sin embargo, no es lo único que
podemos llevar a cabo con este formato, ya que incluso podemos crear documentos
animaciones GZF, aspecto que ha de tener presente si la tipografía que está tratando
está pensada para realizar una animación, o entrelazados, es decir, descargar
progresivamente el documento en el explorador.
Consejo ...
Recuerde que si trabaja en formato GlF lo más recomendable es que
trabaje el texto y el fondo con los colores de la paleta general del documento.
Para ello diríjase a la paleta Muestras y cargue la paleta de color
+ correspondiente al documento, de este modo el proceso será más rápido y
no corremos el riesgo de eliminar colores incluidos en la paleta del documento
y dejar colores excluidos. N o obstante, tenga presente que ciertas
transformaciones alteran los colores.
nota ...
La paleta puede ser diseñada desde la propia paleta Muestras en
cuyo caso la extensión será ACO, mientras que si la creamos desde la Tabla
de colores su extensión será ACT. Para mayor más información dircase al
apartado Remodelar la tabla de colores del capítula 6 y Elección de
paleta del capítulo 3.
Efectos en el texto
Como ya indicábamos en el capítulo Transparencias en imágenes para

la Web, las texturas suelen contener un número concreto de colores, dependiendo
de las características de la página puede ser mayor o menor. Cuando la textura es
añadida en las zonas transparentes o en el interior del texto no hemos de olvidar
que todos los colores de la textura deben estar incluidos dentro de la paleta de la
imagen, gráficos u objetos con transparencias. Este es uno de los motivos más
importantes que hacen casi necesario trabajar con la paleta de color diseñada.
Piense que este tipo de documentos son enteramente creados por usted, no es
como cuando trabajamos con una fotografía. En cierto modo resulta más cómo-
do, ya que no hemos de ir excluyendo colores en exceso, sobre todo si las carac-
terísticas del texto no tienen grandes barroquismos y son sencillas, contando como
máximo 16 colores.
Para incluir transparencias en el documento RVA recurriremos a un ca-

nal alfa, una transparencia de capa o la herramienta Cuentagotas. Selecciona-
remos las partes del documento que deseamos excluir enmascarándolas. Si el
color que ha de parecer es un color plano puede cargarlo como máscara especifi-
cando sus valores en el Selector de color de Photoshop en el cuadro de diálogo de
Opciones de Exportar GZF89a. Si se trata de un documento indexado en el cual
desea crear zonas transparentes simplemente hemos de pulsar el comando GZF89a
Export y, en el cuadro de diálogo Opciones de Exportar GZF89a, activar los
colores que desea que sean sustituidos por el color de transparencia, o bien me-
Qiante el Cuentagotas seleccionarlos directamente en la previsualización de la
imagen.
EL TEXTO?
Lo habitual es activar la opción Suavizado con el fin de que los contornos
no aparezcan excesivamente dentados. Sin embargo, cuando los proyectos van
dirigidos a la elaboración de páginas Web esta opción puede ser contraproducen-
te. Esto es así porque en la mayoría de los casos se trabaja con una paleta de
colores muy reducida, por ejemplo de 3 bits (8 colores) e incluso de 2 bits (4
colores). Como ya sabe el uso de esta opción produce una degradación en el
contorno haciendo que aumente el número de colores, que siempre corresponden
a colores no incluidos en la paleta del trabajo (suelen ser grises), este motivo hace
que no sea recomendable su empleo, ya que desvirtúa la paleta. Así que ya sabe,
si piensa reducir la paleta de colores y en el proyecto prevee incluir texto, no
active en el cuadro de diálogo Texto la opción Suavizado. De este modo evitará

sorpresas y esfuerzos innecesarios. Por otro lado, recuerde que Suavizado está pre-
sente en la mayoría de las herramientas como opción en la paleta Opciones de cada
una de éstas y que lo dicho aquí es aplicable también en estos casos. Concluimos
diciendo que en este tipo de trabajos es aconsejable no suavizar los bordes.
Figura 173.
Documentos PSD.
Aquí mostramos dos' ejemplos significativos. En la ilus-

tración superior de la izquierda no se ha activado la op-
ción Suavizado incluida en el cuadro de diálogo de Tex-
to, mientras que en la ilustración inferior izquierda si he-
mos activado dicha opción. Observe como aumenta
sustancialmente el número de colores, en este ejemplo
pasa de 2 colores a 17 colores nada menos, tal y como
queda reflejado en la paleta exacta de cada documento.
i
Opciones Opcioner
n n
Consejo,
Si está trabajando con un documento RVA, una forma de evitar
incluir colores fuera de la gama requerida. si se ha dado el caso, consiste en
que cuando deba convertirlo a color indexado emplee la opción de paleta A
medida, es decir, reducir los colores a los utilizados en la paleta personalizoda
exclusivamente para el documento.
Efectos en el texto ,,,
En el texto, como en el resto de elementos gráficos, resultan muy útiles la
totalidad de las herramientas de ajuste. Por ejemplo con el comando Brillo/con-
traste o los comandos Niveles o Curvas podemos variar el número de colores que
contiene el texto, es decir reducir la gama cuanto sea necesario. Ya hemos com-
probado que la activación o la no activación de la opción Suavizado, repercute
implacablemente en el número de colores. Los comandos del submenú Ajustar
nos ayudan a encontrar una paleta intermedia si así lo requiere nuestro proyecto
del momento. Resulta ser un método eficaz cuando el texto gráfico es un elemen-
to preponderante en la página y los colores de éste marcan una pauta importante
con respecto al resto de documentos gráficos.
I
Figura 174.
Documentos P SUr
y cuadros de diálo-
go Color indexacio
y Niveles respecti-
vamente.
El texto ha sido crea-

do manteniendo ac- Paleta ( Evlcta
tivada la opción Sua- 1 Otro
vizado, ya que no
Prolunddad de color J Cancelar (
Coloi ei 32
deseamos una re-
ducción drástica que
. nos proporcione su
desactivación.
Un análisis del si-

guiente documento
Canal:
nos descubre la
Niveles deentrada: E- m 1255 Cwcslar I cantidad de colores
que lo componen.
Aprovechándonos
de la paleta Exac-
1 ta incluida en el
1
cuadro de diálogo
1 Color índexado
verificamos que
está constituido por
32 colores. El cua-
1
dro de diálogo Ni-
veles nos ubica en el histograma, la distribución de los mismos y los porcentajes de
cada uno de los tres colores RVA. Nos proponemos, mediante un adecuado ajuste de
valores medios o de medio tono, disminuir el número de colores.
Webs con Photoshop
- , m ( - . - 0 x Figr
- Doc PSD
---El- Y CU diálo-
'rrr"*,f-
‘' I i
-, -
7
A
go Color inaexado
y Niveles respecti-
W W
vamente.
1LI I 2
1
- Paleta
- 1 Euacla
El resultado es el
que muestran las
R o f u n W de color ( Otro ilustraciones. Com-
Colorea 26
Cariceiu 1 probamos mediante
el cuadro de diálogo
Upciones Color indexado que
m el número de colores
ha sido disminuido a
I
26. Esta reducción .. U 1
aparece igualmen-
te evidente en el m
histograma del do- Cancelar l1
cumento en el que
vemos una distribu- Cargai.... 1
ción distinta y me- Guardar... 1
nor numero de co-
lores. En las ilustra- Auto 1
cienes tal reduc-
+ ción no es tan evi-
dente, consegui-
Mieles de salida: )i3 m- m
1
F Frerirual~zación
mos que el texto no
apare.zca dentado.
En esta ocasión simplemente hemos empleado el comando Niveles, sin embargo la
reducción podría ser mayor con un procedimiento más exhaustivo con otros ajustes.
COLOREARLO
Lo más sencillo consiste en seleccionar como Color frontal un color de la
paleta del documento y a continuación pulsar con la herramienta Texto en el lugar
donde deseamos que aparezca. Este método resulta rápido al tiempo que efectivo,
pues si contamos con que no suavizamos los contornos nos dará como mucho dos
colores resultantes. Sin embargo, la tipografía gráfica abarca grandes posibilida-
des que se pueden y debemos conocer.
Efectos en el texto 277
Como ya indicábamos en el capítulo anterior, los ajustes de color pueden

resultar muy interesantes para la creación de marcos, barras, botones y viñetas
grbficas, pero podemos afirmar que de todos los casos en los que podemos hacer
servir estas herramientas en el texto es donde mayor alcance tiene. Piense que
con varios canales alfa y varios ajustes se puede enriquecer enormemente un
texto, desde crear efectos visuales hasta darle un cierto volumen visual.
1. En el documento creado para la ocasión situamos el cursor

de la herramienta Texto sobre la zona donde deseamos que
aparezca habiendo seleccionado previamente el color con el
cual queremos cubrirlo.
Figura 176.
Cuadro de diálogo Texto, Eueiite 1 T~hurria 7
paleta Muestras y documento. T.~-O 1801 II ~anceiai 1
!nterkeado
Espacia&
Alineacim
rm rpJq
r &teca G
m 'Iliiiiiiiii'iJ
r I&:had
r Subrayada r suayzai cm CjYinhilll
Hemos seleccionado
como fuente una Ta-
homa de cuerpo 80
y estilo Negrilla, des-
activando la opción
suavizado. Es como
podemos observar
una tipografía con
rasgos corrientes.
2. Para romper la monotonía del texto realizamos una suave

torsión mediante un filtro del submenú Distorsión, en
concreto el filtro Molinete.
Webs con Photoshop
- iálogo Molinete y documento.
b O l lrnao 1 1 Aunque no es un efecto de rellenar con un color determi-

1
nado, lo hemos introducido en este apartado para enri-
2. A continuación guardamos la selección de la forma al tiempo

que producimos en la misma una reducción con el fin de
crear otra selección interior que guardaremos como un nuevo
canal. En éste realizaremos una serie de ajustes de color.
Para ello recurrimos al comando Guardar selección y al
comando Contraer del submenú 1Modificar.
* lodo Ctrl+A
-
Nada C\rl+D
!nvertir Mayús +CltI+I Documento 1 texto E D
-Gama de colores Cancelar [
Canal r ~ v v o Figura 178.
CgIar tvíayús +C~II+D Menú Selec-
M~diftcar Operecm
ción, cuadro de
Extender diálogo Guar-
Ci~ilar
11 1 1
Caloar selección..
El paso siguiente ha con-

a dar selección y
documento.
sistido en guardar la selec- o $

ción del texto transforma-
do. De este modo podre-
mos utilizarlo para realizar
cualquier efecto en la capa
o en el canal alfa que se
crea automáticamente.
-
Boider. 1 XI
L'L~.L#
m-
-
Redondear..
E xpandir...
-
1 --
.
T
ContracciOn: I@ pixels
I Ea
Cancelar I
Figura 179.
Submenú Modificar, cuadro
de diálogo Contraer selec-
ción y documento PSD.
Queremos cambiar el color en la

zona interior del texto, así redu-
cimos el contorno 4 píxeles.
Nos da como resultado la selec-
ción que aparece en la ilustración.
3. En la selección creada mediante el comando Tono/saturación

variamos el color interior del texto.
Cuadro de diálogo
1 Hemos variado exclu-
aumentándola
+ 25 del valor
Para cambiar el color recurrimos
a un método rápido y eficaz em-
pleando el comando Tono/satu-
ración. De este modo hemos en-
riquecido sustancialmente el tex-
to inicial, aunque todavía pode-
mos hacer que aparezca más
sofisticado y espectacular, como
veremos más adelante.
En esta ocasión se ha recurrido a un comando de ajuste para rellenar una

zona seleccionada, no obstante, podemos emplear cualquier herramienta de pin-
tura para cubrir las zonas que deseemos. Éstas tienen una función más evidente
cuando trabajamos con la herramienta Máscara de Texto. Con la misma inten-

ción podemos utilizar esta herramienta para clonar texturas o fondos determina-
dos en el interior del texto. Realmente los efectos a conseguir son enormes.
1. En el documento creado para la ocasión situamos el cursor

de la herramienta ~ á s c & de texto sobre la zona donde
deseamos que aparezca. A continuación empleamos cualquier
herramienta de pintura o de restauración.
Figura 181.
Documentos PSD,
paletas Opciones de
degradado y Opcio-
nes de tampón res-
pectivamente.
1 ~a-84 id! Dpoionsr de degradad. \I b! La máscara de texto resulta ser más efectiva cuan-
INarmil .
J
-Opacidad 100: Y
-
do queremos incluir una textura o un efecto constitui-
Degradado: fAmrrillo. Violeta, Nnmji, A Z U ~
do por varios colores. En este ejemplo mostramos
como empleando ésta herramienta podemos aplicar
1- en el interior de la selección del texto un degradado
M O ~ I ~ ~ C ~ mediante la herramienta Degradado. Los colores em-
pleados están inclui- 14
dos en la paleta aun-

que el degradado crea
un número indetermi- 10) 1
nado de nuevos colo- ._ ---.'I
<.
1
res aue habremos de ~ - 4

reducir si es el caso.
1 Naqadw 1 Ido] @emesdel~ph \lb' En este caso la máscara de texto nos sirve para in-
l~lorrnrl op~~dad 'O0Z cluir una textura en su interior utilizando la herramienta
Tampón, aunque previamente hemos seleccionado
de un documento el motivo a clonar. Para ello hemos
recurrido al comando Definir motivo. Como la textu-
ra aparece en otros documentos gráficos de la pági-
na hemos clonado el
motivo de un docu-
mento en el que ya
habíamos aplicado
una reducción de co-
lores y éstos apare-
ten en la paleta gene-
ral del proyecto.
I nota...
I
Para rellenar con un color sólido o textura o la versión guardada de
algún documento podemos emplear el comando Rellenar del menú Edi-
ción, tanto para el texto como un botón, viñeta gráfica, marco o barra.
Consejo ...
Si se trata de una textura que hemos de emplear en otros elementos
de la página, lo más conveniente es incluirla con una reducción de colores ya
establecida con el fin de no incorporar colores innecesarios que aumenten el
contenido de colores en nuestra paleta personalizada.
- Para controlar el número de colores, el mejor método consiste en

reducir con anterioridad la gama en cada elemento, sea una fotografía o un
botón o un texto. por ejemplo. o establecer unos colores. De este modo
partimos de una paleta personalizada la cual podemos hacer servir sin ries-
gos de incorporar otros colores y, al mismo tiempo, controlando el número
de colores.
EFECTOS ESPECIALES
Transformar el texto puede producir resultados muy interesantes. Los efec-
tos pueden surgir de una modificación de la forma mediante algún tipo de distor-
sión provocada porfiltros de distorsión, también podemos producir efectos utili-
zando filtros con fines bien dispares, pero que modifican la morfología del texto,
éstos pueden ser de origen bien variado como: Relieve, Bajorrelieve,
Webs con Photoshop
Desenfoque gaussiano, Máximo, Mínimo. Con el mismo fin podemos emplear

herramientas de restauración para transformar el texto o los comandos Rellenar
y Contornear, al igual que cualquier filtro que pueda provocar un cambio
morfológico, que son todos. También con el fin de realizar efectos especiales
podemos emplear los comandos de ajuste, por ejemplo para producir o acentuar
el efecto de luces y sombras en un texto. Como podemos comprobar los efectos a
conseguir pueden ser de lo más variado.
Técnicas de manipulación
Las transformaciones de la forma ya hemos dicho que pueden realizarse
con los comandos de selección, sin embargo, mediante los filtros Máximo y Mi-
nimo podemos realizar el mismo proceso que realizan los comandos Expandir y
Contraer como ya se ha indicado en el capítulo anterior al igual que en éste.
Resultan realmente útiles cuando queremos aplicar manipulaciones posteriores,
ya que permiten crear distintas partes de un mismo texto y complementarlas con
los efectos que efectuamos en cada uno de ellos.
1. En el documento que aparece en lapágina 278 hemos aplicado

el filtro Máximo y Mínimo creando dos capas distintas. Para
ello duplicamos la capa con anterioridad mediante una de las
+ técnicas que el programa ofrece.
S Radio:
Figura 182.
(Ipixels
Cuadro de diálogo Mínimo

y documentos PSD.
El filtro Mínimo nos aumenta el grosor del cuerpo. Hemos aplicado el valor más pe-
queño 1 píxel de Radio. observe que aparecen ciertas zonas deformadas.
Figura 183.
Cuadro de diálogo Máximo y documentos PSD.
Cancela, 1
Al
R Prsi~isualización
- imxa
L.
Rad~o )2 p~xels -m
- A 7
El filtro Máximo nos reduce el grosor del cuerpo. Hemos aplicado un valor pequeño
2 píxeles de Radio. Observe que el resultado es más efectivo.
J
-i'
Comprobamos que al aplicar estos filtros el texto sufre una alteración en

su contorno quedando en exceso dentado que, si no es un efecto deseado, debere-
mos corregir. El método más efectivo de subsanarlo consiste en suavizar los bor-
des, para ello emplearemos el filtro Desenfoque gaussiano. No obstante, sabe-
mos que lo que estamos haciendo es crear un mayor número de medios tonos, lo
cual no nos interesa. Por este motivo, lo más aconsejable es que a su vez ajuste-
mos los medios tonos con cualquiera de las herramientas de corrección de me-
dios tonos que Photoshop nos proporciona, aunque el más eficaz en estos casos
es el comando Curvas.
4
2. En la capa MAXlMO nos disponemos a suavizar los contornos

aplicando el filtro Desenfoque gaussiano y posteriormente
reducimos los tonos medios mediante el comando Curvas
del submenú Ajustar.
Figura 184.
Cuadro de dia-
logo Desenfo-
que gaussiano
y documento.
1 - 1 Cancelar
El valor de radic
introducido es dc
0,8 píxeles. Un
valor mayor nos
distorsiona la le-
tra.
Webs con Photoshop
:anal. 1 RVA II 1-
Cancelar 1
Cargar ... ]
Guardar... 1
,, ::
........,........i.................... .........,........
I
1
..?
..........,...J.
, i
< : Auto
rJ]l Entrada.
1;7 Previsualización
Salida:
tita...-- -&l
Hemos reducido el número de colores en la zona inter-
J
media, es decir, los medios tonos. La imagen de la que
partíamos (ilustración inferior) contenía 8 colores, al rea-
lizar el suavizado del contorno hemos aumentado el
número de colores a 256. La ilustración superior nos
altera el color general del texto ya que hemos reduci-
do el número de colores a 238 colores. Si nos interesa
A mantener el tono del texto podemos recurrir a otros co-
mandos de ajuste para cambiar el color del mismo, por
1 ejemplo Tono/saturacióno Reemplazar color.
Figura 185.
Cuadro de diálogo Curvas y documentos PSD.
Cuando aplicamos un desenfoque en cualquier tipo de documento

gráfico sea texto, sea una barra, botón, viñeta gráfica, marco o fotografía
siempre nos aumentará el número de colores. Esto hace que sea innecesario
una reducción de colores anterior a dicho proceso ya que volveremos a au-
mentar su número. Por otro lado debe considerar que si hemos de aplicar
una profundidad de color de 5 bits (32 colores) o menor, este efecto resulta
inútil ya que volveremos a tener un contornos dentado.
Efectos en el texto 28s
Ahora veamos un ejemplo de como podemos crear interesantes efectos

especiales en la tipografía creando una variedad interesante de rótulos.
.. .,b
-- .A- j xl En la capa original, Capa1 hemos suavi-
zado los contornos aplicando el filtro Des-
m
a
1
J 1ioo%8
Radio:
-
67 Prsvisualizaci6n
píxslr
I
enfoque gaussiano con un valor de ra-
dio de 1,3 pkeles.
En esta misma capa hemos aplicado el
filtro Hallar bordes, éste, que aplica un
valor por defecto, intensifica el borde per-
mutando el color del interior por el color
de fondo del momento, nosotros hemos
seleccionado un blanco.
Figura 186.
Cuadro de diálogo Desenfoque
gaussiano, submenú Estilizar y
I
documentos PSD.
3
-8
Bordes ilurninados...
Difusión...
Exlrusión...
-.
R elieve...
Snlarizar
o..
Trazar perfil...
Viento...
.
i;
t
m A continuación, en la capa du-
plicada de la original que ha-
bíamos denominado MÁXI-
J MO, hemos aplicado el filtro
del mismo nombre Máximo
del submenú Otro. Realizan-
do el proceso descrito en la
página 282. Al visualizar las
dos capas nos da como resul-
tado este interesante efecto de
relieve diferente al que pode-
mos conseguir con el filtro Re-
lieve. El resultado puede ser
bien distinto según el colorde
fondo seleccionado al aplicar
Hallar bordes.
- , - b . -'ala Figura 187.

Cuadro de diálogo
, v documentos PSD.
ra conseguir un efecto
, is intenso en la capa
MAXIMO hemos aplicado el
filtro Efectos de ilumina-
ción con los valores especi-
ficados en la ilustración.
Manteniendo el tipo de luz
como díreccional con una
R Activar intensidad de 17. Las pro-
id^,+ Negativa 17n Mkima piedades de la luz son de
_
Lustre: -67, Material: -58,
Exposición: O y Ambiente:
20. El canal de textura co-
rresponde a la transparen-
1
cia de la capa a la cual per-
tenecía el elemento dando
1 R Pievisualiz.
!
Ca,al de iewtura
~ ~
1 MMlM0 copia ~
~
100
~
i a d
Montañuda
h
una altura montañosa má-
xima, es decir 100. El estilo
corresponde
~ ~ ap2AMSPOi.
*
resultado es el que muestra
la ilustración inferior.
El
3
II
---Iixll 1 1 . ' .
La ilustración de la
J izquierda muestra
-
l, como podemos in-
~:,/zD,kycq,
tensificar el efecto
j en
aplicando
la misma
de capa
nuevo
y
- - con los mismos valo-
res el filtro Efectos
iI J 2 de iluminación.
Figura 188.
Documento PSD.
En ésta hemos des-

activado Capa1 dán- _1
donos como resulta-
do un rótulo distinto lo
que permite ver el al-
cance de su uso. 11 A Lí'
Losfilíros de desenfoque son potentes herramientas que pueden ser em-
pleadas para producir innumerables efectos. Entre los más habituales encontra-
mos corregir un exceso de enfoque, provocar un desenfoque controlado con
fines especiales e incluso simular la sombra de objetos. Aquí vemos unos cuantos
ejemplos de clarifican los efectos especiales que es posible obtener. Éstos pueden
extrapolarse a cualquier objeto gráfico.
Figura 189.
Documento PSn
Hemos duplicado
Ti-
-
Capa1 y aplicado el
filtro Desenfoque de
movimiento obte-
-
niendo el resultado
que visualizamos. -1 J 1í'
Los valores dados responden a un ángulo de 7grados y una distancia de 7píxeles.
Conseguimos crear una sombra efectista un tanto distinta de las habitules al tiempo
que acentuamos la sensación de movimiento impreso en el rótulo.
En el ejemplo mostrado en la ilustración inferior se ha recurrido al efecto Desenfoque
gaussiano aplicado a un radio de 1,5 pixeles. De este modo producimos una som-
bra clásica. Pruebe a comprobar los resultados que pueden obtenerse con los filtros
Desenfoque radial y Desenfoque suavizado. Los efectos pueden ser intensificados
o,disminu¡dos va-
"ando el valor de
opacidad de la capa
y el modo de color
-m aunque el resultado
dependerá del resto
de las capas del do-
cumento en cuestión
9 como mostrarmos
- - más adelante.
Alterando el. color

Variando o manipulando los colores originales podemos obtener intere-
santes efectos especiales. Photoshop dispone de un extenso surtido de herramien-
tas y comandos para estos menesteres, además de muchos otros. Los modos de
color o de capa pueden transformar espectacularmente el texto. También, los
comandos de ajuste y corrección de color nos facilitan el cambio o alteración del
color base así como las herramientas Sobreexponer, Subexponer y Esponja.
Además de ciertosfiltros que permutan los colores. Pero veamos unos ejemplos
representativos:
1. En la figura 181 superior (pág. 280), en la cual habíamos

aplicado un degradado duplicamos la capa MAXIMO ípág.
283). En ésta se han realizado unos cambios a nivel de modo
de color y, por otro lado, un cambio de posición obteniendo
los resultados siguientes.
PiRg?Da
r transp¿rencir
7
111degradado
g
j 11
35 J
A
IElllQlWl
Figura 190.
Paletas C a ~ a vs
documentos PS"
l ~ l l L 3 I E ? l ~
En la capa MAXlMOse ha seleccionado como modo de color Tono mientras que en la
capa degradado se ha elegido el modo Diferencia. Observe que cambiando el orden
de las capas se obtienen resultados distintos. Aunque aquí nos se percibe, la ilustra-
ción superior adquiere unos tonos verdosos y un contornos violeta y la ilustración
inferior unos tonos azules-verdosos y un contorno azulado.
- - --
T Pros* .a, 5~m~uy..~~ia
Figura 191. - - ,
Paleta Capas Y d ~ ~ ~ m e n t oVariando

. la opacidad de la capa MAXIMO a un
61 % conseguimos modificarlos tonos anteriormen-
te obtenidos.
2. En esta caso hemos duplicado consecutivamente la figura

188 @ág. 287, las dos superiores, capa MAXIMO ) con el
fin de lograr otros efectos.
[ Capas\ Canales Y, Trazados \ 1bi
10rcurecer -j Opacidad:
P 100%
r Preservar transparencia
T I WXIMO copia 4
S l 1
*
Q E I P
- -i J
Comenzando por la capa superior se han introducido
Figura 192. los siguientes valores para la obtención de este rótu-
Paleta Capas y lo. Las dos capas superiores tienen como modo Luz
intensa, hemos duplicado la capa para intensificar el
efecto lumínico que se consigue. En la capa inmediatamente inferior el modo elegido
es Disolverproduciendo este efecto de sombra oscura con efecto de ruido. Por último
la capa inferior tiene como modo Oscurecer. En ésta no habíamos aplicado el filtro
Efectos de iluminación en las superiores sí.
3. En esta ocasión se parte de lafigura 189 superior (pág. 287)

con el fin de lograr otros efectos. La capa MAXIMO y Capal
han sido duplicadas cuantas veces se ha creído necesario, la
combinación y el orden con que aparecen nos ha dado como
resultado varios rótulos interesantes.
Compruebe usted mismo como podemos lograr una gran
cantidad de variaciones con un solo documento.
\ [ k\
-
] C i p a r y Cmaln U Trazados - 1 f . D . =
lTono dad 1007
Los modos aplicados son en MÁXM IO copia 4: Diferencia y opacidad de 51 %, en

MÁXM
I O: Normal y opacidad a l 47 % y Capal: tono y opacidad a l 100 %. Nos da
un rótulo formado por tonos azules claros, blancos y violetas.
/E
r Preserva
En este caso hemos introducido los siguientes valores co-

menzando por la capa superior, modo Multiplicar y opaci-
dad de 55 %, en MÁXM IO copia 3 Diferencia y opaci-
Figura 193. dad 69 %, en MÁXIMO: Multiplicar y opacidad 100 %,
Paletas Capas y Capa: Aclarar y opacidad 100 % y Capal: Diferencia y
documentos PSD. opacidad 100 %. Conseguimos una suave degradación
de tonos azules y verdes turquesas hacia un blanco.
4. No es posible visualizar imágenes en las que hayamos

alterado exclusivamente el color, sin embargo mostramos un
ejemplo representativo en el que se aprecia un cambio de
todo. En este caso se ha utilizado el comando Variaciones
del submenú Ajustar.
- -- i l . aI I ~ x / l Figura 194.
Documento PSD.
En la ilustración superior hemos pro-

cedido a cambiar el color de la capa
MAXIMOmedianteel comando Varia-
ciones. Consiguiendo unos tonos
magentas en el interior del texto.
4. Con el mismo fin mostramos un ejemplo representativo de

como ciertos filtros pueden alterar el color del texto. En este
caso empleamos el Solarizar del submenú Estilizar en la
figura 191 (pág. 289). No obstante, en gran parte de los
submenús encontramos algún que otro filtro para permutar
los colores de un modo u otro, la elección dependerá de las
Figura 195.
Documento PSD.
En la capa degradado hemos aplic,

do el filtro Solarizar,el cual es aplica-
do con unos valores por defecto con-
siguiendo cambiar ciertos azules y vio-
letas por rojos y anaranjados.
Técnicas de disto~slun
y transformación
Realmente puede ser muy efectivo aplicar efectos para causar distorsión
& el texto. Photoshop dispone de un gran surtido de filtros con los cuales pode-
mos efectuar este tipo de efectos especiales además de todos los comandos agru-
pados en el submenú Transformar y el comando Transformación libre con los
cuales es posible sesgar, perspectivar, escalar, rotar, etc. Gracias a ellos podemos
crear rápidamente tipos de letras personalizadas, que sería casi imposible si tu-
viésemos que dibujarlas nosotros con las herramientas de trazado; no obstante
aquí no pretendemos reducir el número de posibilidades aunque hoy en día resul-
ta una ardua tarea dibujar letras cuando podemos diseñarlas rápidamente trans-
formando las que ya disponemos, además de la posibilidad de introducir en nues-
tra biblioteca otras a partir de las que encontramos en el mercado.
Si bien podemos afirmar que la mayor parte de filtros para esta tarea se
encuentran agrupados en el submenú Distorsionar, hay otros filtros que produ-
cen efectos de transformación de una u otra manera. Los primeros se caracterizan
por distorsionar la forma general del texto. Los segundos requieren de la combi-
nación con otros filtros o comandos para que produzcan una alteración en la
forma de la letra. Sin embargo, tanto unos como otros conducen a efectos
sofisticados y espectaculares. Veamos algunos de los recursos disponibles.
I I
Opciones Deforma la superficie a modo de ser observada a
Disto~:ionar través de un vidrio. Podemos seleccionar un tipo
concreto de textura así como el alcance de la dis-
Suavizar torsión, la escala y el suavizado del efecto.
m I I .
1
1 Textura: (~erbstiado I) 1
r !nvectir textura I 1
Nos transforma el texto apretándolo ha-

+
J100%
cia el interior, por lo que aparece aumenta-
3
da en los bordes y encogida en el centro.
Esta imagen parte de la figura 193 que apa-
rece en la pág. 290. En este caso como en
- Cantidad
-
A
mi-
el superior ha sido aplicado en todo el rótulo.
Cuadros de diálogo Cristal y

Encoger y documentos PSD.
Esta ilustración es el resultado de la de-

formación parcial de cada una de las
letras con un comando de transforma-
1 ción del menú Capas en la figura 194.
Efectos en el texto ,93
1 100"
Nos altera la forma de la tipografía creando
intidad el efecto de una onda aunque podemos va-
riar el estilo de la misma. Esta imagen parte
C~estar (4 de la figura 194 que aparece en la pág. 290
A al igual que la del filtro Encoger.
Estilo: l~lredsdnrdel cen!rod

-
El" J 100% -
+ J
-Cantidad
Cancelar
A
m-
1
Se produce una distorsión a modo de ser visto como

,una esfera, por lo que aparece aumentada en el
centro. Partimos de la figura 193 de la pág. Zan
I
-
m!!!
3
-
1
Modo: ~ o r m a l A
Figura 197.
Cuadros de diálogo Esferizar
y Zigzag y documentos PSD.
\ =A:' 1
En este rótulo hemos aplicado en cada-
una de las letras un filtro determina- :
do logrando acentuar el ritmo del ante-
rior mediante otras texturas y colores.
Figura 198.
Cuadros de diálogo Ondas marinas, Coordenadas polares, Onda y documentos.
I R . . .
Cancela 1
100"
Opcmrtes Distorsiona la forma a modo de ser vista a tra-

Tamaño de onda I r vés delagua produciendo ondulaciones en los con-
A -. tornos asi como en el interior La intensidad del efec-
Magnilud de onda (4 to como en el resto de filtros dependerá de los va-
a lores especificados El rótulo parte de la figura 194
--
que aparece en la páglna 290
<, cacala 1
e
Este filtro acerca o distancia los extremos
188 que aparece en la página 287 al igual

que el filtro Cristal de la página anterior.
T . X
q b - - 1 ' II - I I m . -
Nimeio de geneiadoie? -ipo m
A
~prqhirf
MRI
11 1443
Máa
"- Swncdd
T ~,knpdo
C Cuadrab
1 ' 7,
7'
I _L
.&
L;
a
&rnpLiud 17
a
Li
noti- vcii Produce una alteración de la forma a modo de

EIC~~- 1100t m'c onda o rizo pero de un modo más sofisticado que
na
he¿: indcfndr$
lo que podemos conseguir con otros filtros. Aquí la
r Qa La ~ v k a deformación obtenida en la figura 188que aparece
<i R e p t n girdc M bade en la página 287 nos recuerda un zigzagueo.
Efectos en el texto 29s
Figura 199.
Cuadros de diálogo Rizo, Trazos de spray, Plastificado y documentos PSD.
J 100% -
+ J
Nos produce una distorsión irregularen los
Opciones contornos a modo de vibración de las letras.
-
. . ..
Caritidad O
7 . l
I -Tamaño:
"*;r.Y y%.T.3PZi'
f..? " 3 ;. , .. .: , Opcinnes
.\..,-, I ,
;< .
'
*.:.d.:
' *
- 8
. -
%
-
.W.' T.,,.
i ., . I. .'. Lonpilud de trazo rm
I A
Radio 12 I
A
*
Las dos ilustraciones inferiores muestran como Dil. detrazo: I ~ i a gdeiecha
. 1)
empleando otros filtros podemos distorsionar las-
J
formas Y contornos j Capar\ Canales y Trrnadol \ 1
de la tipografía. En l,.,,,,rd - Opjcldad 100': 1-
aplicado el efecto en
la capa activada,
mientras que en la
superior ha sido en
-
J
~ 1 0 0 %
Opciones
Intensidad m-A
Detalle F.
n
suaviza 114
A
nota...
I Pruebe a producir deformaciones en zonas parciales de cada letra

seleccionando dichas partes con cualquier herramienta de selección, com-
probará que los resultados pueden ser muy interesantes.
Más sobre relieve e ilurninaciOn

En el capítulo anterior y en éste ha sido mostrada de una manera sistemá-
tica la forma de producir efectos de relieve e iluminación con los filtros que
cuenta Photoshop para realizar estas tareas. Usted, me imagino, se preguntará
pues qué sentido tiene incluir este apartado, pues bien, el sentido es que perfec-
cionemos técnicas de manipulación de ciertas zonas del texto para intensificar
dichos efectos ya que se trata de elementos clásicos en el diseño. Aunque como
los resultados han sido ampliamente mostrados en ejemplos incluidos en nume-
rosas páginas, aquí nos centraremos en el desarrollo de creación de máscaras de
3
dichas zonas y en su transformación.
Estos procesos pueden ser mejorados creando un canal alfa para cada
una de las partes en las que está dividido un texto -o cualquier elemento gráfico-
con relieve, es decir, las zonas de luces, las de sombras y las de medios tonos.
Este esquema de trabajo proporciona un mayor dominio y, en consecuencia, un
mayor control en el resultado definitivo, ya que es posible producir efectos par-
ciales, como aumentar o disminuir las zonas seleccionadas, aplicar un filtro de
desenfoque en uno de los canales y un largo etcétera.
1. Contamos con lafigura 183 (págs. 283) como partida, Iógica-

mente para poder crear selecciones de las distintas partes en
las que está constituido un cuerpo con relieve, éste ha de po-
seer un cierto volumen. Esto hace que.debamos aplicar con
anterioridad el filtro Relieve del menú Estilizar. Aunque en
ocasiones puede que el objeto tenga ya cierto relieve.
Con este fin nos proponemos seleccionar las tres zonas en

las que está constituido y guardarlas como selección. Para
ello emplearemos el comando Gama de colores y el comando
Guardar selección respectivamente.
Figura 200.
Cuadro de diálogo Gama de
:olores, paleta Canales y
jocumentos PSD.
De la ilustracidn'superior queremos crear selec-

ciones que correspondan a las luces, sombras
s.
, .
oixiI
y los medios tonos. El método más rápido y efi-
caz consiste en selecionarlas en el cuadro de
diálogo Gama de colores y, de éste, elegir las
opciones Luces, Sombras y Medios tonos
para cada una de las zonas respectivamente
m
4
Aqui mostramos cómo hemos seleccionado las partes de las luces, las cuales han
sido guardadas como una nueva selección pulsando el comando Guardar selec-
ción que se encuentra, al igual que el comando anterior en el menú Selección. Ahora
podemos tratar cada zona por separadado siendo posible hacer ajustes de color, etc.
Las ilustraciones inferiores muestran como estas selecciones son al tiempo canales
alfa, por lo que pueden ser empleados como máscaras con todo lo que ello implica.
Webs con Photoshop
2. Los canales alfa pueden ser rnodifiados en una diversidad

de posibilidades que se extienden a ajustes de luces, sombras
y medios tonos, con el fin de reducir o ampliar su alcance,
-
aplicar filtros de desenfoque para suavizar los contornos u
otros filtros y producir nuevos canales restando partes del
texto, entre las posibilidades más representativas.
Figura 201.
Caiat LI
[ T I Cuadro de diálogo Niveles y Desenfo-
c~,,,~,, 1 que gaussiano, paleta Canales y docu-
, 1 mentos PSD.
_Guahr
, En el canal Luces hemos reducido los me-
,dios tonos y las luces reduciendo el núme-
ro de valores en estos dos sentidos. Esto
7 Re~~,ak& repercutirá en la imagen cuando utilicemos
este canal con algún fin en el texto.
n I
En la imagen inmediatamente superior mostramos como hemos suavizado los bordes

del canal alfa Medios tonos. Ahora cuando empleemos dicho canal para crear cual-
quier efecto el resultado ya no será el mismo que si se trata-
se de la zona enmascarada sin más. En la ilustración inferior
hemos activado la capa que nos interesaba la cual ha sido
convertida en un nuevo canal alfa #10 retocado para la oca-
sión de la manera en que aparece visualizado. La aplica-
ción de cualquier
efecto recurrien-
do a este canal
se realizará en la
zona que apare-
ce enmascara-
da.
3. Aplicando estos canales alfa en las diferentes selecciones de

forma parcial y también en el conjunto se han obtenido estos
resultados aplicándolos en la figura 177 (pás. 278) y la Jigura
183 (pág. 283).
Figura 202. Éstos son algunos de los resultados obtenidos utilizando las
Documentos PSD, selecciones de luces, sombras y medios tonos, así como sus
respectivos canales alfa transformados. En la paleta Cana-
les de la página anterior aparece el canal Luces reducidas creado con el comando
Niveles para crear una zona de luces más intensa, la cual ha sido empleada en la
ilustración inferior izquierda. También se han creado canales alfa a partir de una capa
específica, como por ejemplo canal #10 utilizado en la imagen superior izquierda.
MORFOLOGÍADEL
TEXTO HTML
La ubicación del texto gráfico en una página HTML es como cualquier
otro elemento gráfico, es decir, empleando la etiqueta IMG junto con el URL del
documento en cuestión que viene definido por el atributo SCR y empleando el
resto de los atributos propios de la etiqueta. Los más representativos son los que
especifican el tamaño de la imagen con su tamaño en píxeles en ancho y alto,
incluso reduciendo sus valores a modo del ejemplo: WIDTH= 150 y HEIGHT=30
o en tanto por ciento escribiéndose simplemente: WIDTH= 60. Los atributos de
alineación como son ALIGN o VALIGN para definir la posición en horizontal y
vertical respectivamente, los valores por defecto son ALIGN= RIGHT y
Webs con Photoshop
VALIGN= MIDDLE. Los atributos HSPACE y VSPACE que definen el espa-
cio horizontal y el espacio vertical respectivamente. Así para determinar cuánto
espacio, cuántos píxeles, deseamos dejar entre el texto gráfico y cualquier otro
elemento escribiremos: VSPACE=15. Por otro lado, en las imágenes podemos
incluir marco con HTML mediante el atributo BORDER, según el valor determi-
nado será el grosor del borde: C B O R D E R = ~ > . Ées
S ~de~ gran utilidad pues po-
demos enmarcar la tipografía, aunque de un modo muy elemental y sencilla.
Hay que añadir que el texto gráfico puede tomar facetas diversas, como
ser un mapa de imagen o un vínculo. Piense que puede ser de gran utilidad que
los elementos gráficos sean al mismo tiempo elementos activos en la página y no
meras imágenes insertadas para hacer bonito. Todo elemento de la página debe
estar colocado con inteligencia, y, en este grupo también está incluida la tipogra-
fía, así que ya sabe, cada proyecto es distinto, esto hace que el diseño de los
elementos gráficos que lo hayan de constituir deben estar pensados para ese pro-
yecto y para ninguno más. Puede que en una página sea interesante diseñar un
texto gráfico efectista que además nos sirve de vínculo y, en cambio, en otra sea
contraproducente.
Para identificar el texto como un mapa de imagen hemos de recurrir al

atributo ISMAP de la etiqueta IMG. Al identificarlo de este modo, se nos pre-
senta como una zona activa enmarcada a modo de signo que lo identifica como
tal y sobre la cual podemos pulsar para que sean ejecutadas las acciones que
? hayamos definido. La sintaxis que presenta es la siguiente: cIMG SCR=textojpeg
ISMAP>. Normalmente, resulta de gran utilidad añadir, en estos casos el atributo
ALT, el cual hace que sea mostrado en los browsers que no pueden visualizar
gráficos, por ejemplo: cIMG SCR=texto.jpeg ALT=ir a catálogo de ofertas
ISMAP>. Por último, reseñar que si trabaja con numerosos elementos gráficos
es importante añadir el atributo LOWSCR al tiempo que SCR. De este modo,
siempre aparece un fichero correspondiente a la imagen de baja resolución que es
al que hace referencia LOWSCR y, a continuación, la imagen de alta resolución
que es al que hace referencia SCR. Al igual que éste último debemos indicar el
URL de la imagen a modo del siguiente ejemplo: cLOWSCR:textojpeg>. Aun-
que todo lo concerniente a este tema es tratado extensamente en el capítulo 9.
Cuando el texto ha de ser al tiempo un enlace hemos de añadir un nuevo

elemento, éste es la etiqueta A. Inmediatamente después de dicha etiqueta hemos
de introducir la dirección del documento referenciado o URL, para lo cual es
necesario el atributo HREF. Su sintaxis se presentaría del siguiente modo: <A
HREF=catálogo de obras.html><IMG SCR= catálogo.jpeg>.
Figura 203.
Visor de Microsoft
lnternet Explorer.
En esta página al trabajar con formato

JPEG, por el tipo de obras que se mues-
tran, nos hemos visto forzados a man-
tener el texto dentro de un formato rec-
tangular por lo que incluye un fondo
asociado a él. El texto gráfico que apa-
rece en la página de contenido de la
izquierda es al mismo tiempo un víncu-
lo visual
a l g o sobre htmL
La figura superior muestra la siguiente estructura:
<HTML>
<HEAD>
<TITLE>80 a&ntilds;os de surrealismos</TITLE>
</HEAD>
<FRAMESET COLLS=200/oP80% BORDER= 1 :
<FRAME SCR=Iista.htm NAME =listas>
<FRAME SCR=cuadro I.htm NAME=cuadros> <IFRAMESET>
<IHTML>
Siendo la sintaxis del documento cuadrc

<HTML>
<HEAD>
< TITLE>texto grafico</TITLE:
</HEAD>
<BODY BACKGROUND=textura.jpg>
<TABLE WIDTH=4O% ALIGN=CENTER BORDE/?= 1
CELLPADDING= 1 CELLSPACING=2 BGCOLOR=#000000>
<TR> < TD ALIGN =CENTER> < I M G SCR=marco4.jpg
LOWSCR=m4.jpg WIDTH=425 HEIGHT= 142 > </TD> </TR>
<ITABLE>
I
<P>
c HR>
<P>
CELLPADDING= 1 CELLSPACING= 1O BGCOLOR= #000000>
cTR> <TD ALIGN=CENTER> <IMG SCR=p4.jpg
LOWSCR=Pin4.jpg WlDTH= 170 HEIGHT= I15> </TD> <ITR>
<TR> <TD ALIGN=CENTER> <IMG SCR=p3.jpg
LOWSCR=Pin3.jpg WIDTH = 1 70 HEIGHT= 1 15> </TD> <ITR>
<TR> <TD ALIGN=CENTER> <IMG SCR=pS.jpg
LOWSCR=PinS.jpg WIDTH= 170 HEIGHT= 1 15 > <lTD> <ITR>
<ITABLE>
<H>
</BODY >
<IHTML>
Y la sintaxis del documento lista:

<HTML>
c HEAD>
<TITLE>vinculos en formato texto y texto grafico</TlTLE>
cIHEAD>
cBODY BGCOLOR= 172025>
<TABLE WIDTH= 10Yo ALIGN =CENTER BORDER=O
CELLPADDING=O CELLSPACING= IO>
<TR> <TD> <P> <A HREF=lsurrealismolcuadros.html>
<IMG SCR=texto.jpeg ALT=catalogo de obras WIDTH= 150
HEIGHT= 150 VSPACE=5 HSPACE=5 BORDER=O> </A>
c l T D > c/TR> <ITABLE>
<P>
<A HREF =lsurrealismolcuadros.html> <FONTCOLOR = FFFFFF>
cCENTER>LISTAS EXPONSORScICENTER> </A>
<P>
<A HREF=lsurrealismolcuadros.html> <FONTCOLOR=FFFFFF>
< CENTER>EXPOSICIÓN TEMPORAL<ICENTER> </A >
I ...así hasta completar los elementos de b lista.

Efectoseneltexto 303
Figura 204. o.,-. t.-? y. ,.

!-M. %
'd
.
. G" :?- "2.,O:!,

o,.?bF2.
+ A c-m .A.
Visor de Microsoft Y* .
lnternet Explorer.
La Web de la agencia presenta imáge-

nes con transparencias, así es el caso
de los dos elementos que contienen
texto gráfico. Los colores en I
Sonrr>sPI niíiiiero un» en c/ nirrrttio eri vic!jrv i>.v<iriros
objetos han sido reducidos a los que
están incluidos en la paleta común de
todos los elementos, la cual fue elabo- tpl)
rada en su día durante la rnanipulacidn 4
de los documentos en cuestión. .!
1 "
.
La barras sirven para centrar el reclamo publicitario al tiempo que de ornamento. Ésta
es la página principal, como puede observarse su diseño está centrado en la presen-
tación de la agencia de viajes.
a l g o sobre htm1.m.
La figura superior muestra la siguiente estructura:
<HTML>
+
<HEAD>
< TITLE> texto grafico<lTITLE:
<IHEAD>
<BODY BGCOLOR=6FCZF7>
<P>
<TABLE >
<TR> <TD ALIGN =CENTER> < I M G SCR=titulo.gif
HSPACE=5 VSPACE=5 ALIGN=CENTER> </TD>
<TD ALIGN=CENTER> <A HREF=/agencia/imagen.html>
<IMG SCR=texto l.gif ALT= Tour Turistic VSPACE =5
HSPACE=5 BORDER=O> </A> <lTD> <ITR>
<ITABLE>
<P> <HR> WIDHT= 100% SIZE= 15 ALIGN=CENTER
CLEAR=LEFT> < P >
< H I > <CENTER> <I> < B > <FONT COLOR=AS1821 >Somos
el número uno en el mundo en viajes exóticos
<ICENTER> <lI> <lB> < / H I >
Webs con Photoshop
<P><HR> WIDHT=100% SIZE=IS ALIGN=CENTER

CLEAR=LEFT> <P>
<IMG SCR= tropical.gif WIDTH = 14 1 HEIGHT=93 VSPACE= 1
HSPACE = 1 ALIGN = LEFT >
<I> < 8 > <FONT SIZE=S COLOR=FFFFFF>Cornpruébelo
navegando por las páginas de nuestra Web donde
encontrará el lugar que tanto ha soñado</l> </E>
<P> <HR>
</BODY>
</HTML>
EL TEXTO, ALGUNAS
ETIQUETAS Y ATRIBUTOS
En los ejemplos mostrados el texto gráfico aparece coordinado con el
resto de objetos que configuran una página, entre ellos cadenas de texto. La mor-
4
fología que adquiere éste cuando se trata desde htmi es bien distinta a cuando lo
hacemos como un documento gráfico. Normalmente, es empleado para introdu-
cir gran cantidad de información, la cual sería casi imposible colocarla si debié-
semos hacerlo mediante imágenes, de este modo amortizarnos el tiempo de eje-
cución en el browser. Diseñar Webs con un alto contenido de eficacia, armonía
visual y que incluya todo lo necesario corre a cargo de una adecuada mezcla de
los componentes. Si existen un gran número de páginas vinculadas lo más razo-
nable es tratarlas con cadenas de texto que sean al mismo tiempo vínculos. Pue-
den llegar a ser muy vistosos si en su confección tenemos en cuenta el conjunto,
de tal modo que no resulte aburrida y aparezca todo con claridad y, por otro lado,
las imágenes colocadas sirvan en éste caso como contrapunto.
Aunque las etiquetas y atributos relacionados son muy extensos y en este

libro no tratamos dichos elementos, hacemos este breve inciso, pues lo creemos
necesario, ya que no podemos obviar su importancia, no obstante, nos centrare-
mos en la relación existente entre éstos y las imágenes cuando han de ser coloca-
dos paralelamente o cuando se tratan d e vínculos, también hacemos
una incursión por los estilos físicos y lógicos más importantes y otras opciones
de interés para el lector. Su relación con listas será obviado por haber sido tratado
en varios apartados en el capítulo 7 en lo que de relación con imágenes tenía.
Determinar el tipo de letra y el estilo es lo que requiere de mayor impor-

tancia, pues ha de estar en consonancia, cuanto sea posible, con la tipografía
elegida en el texto gráfico, si que existe. La etiqueta FONT hace referencia a
ciertas características de la letra, cuando va acompañado del atributo FACE nos
permite cambiar el tipo de letra que aparece por defecto presentando la siguiente
...
sintaxis: <FONT FACE=ARIAL> dFONT>. Si lo que pretendemos es cam-
biar el tamaño que aparece por defecto se ha de añadir el atributo SIZE dando un
valor numérico con signo positivo (o sin signo) o negativo según se quiera au-
mentar o disminuir respectivamente, su sintaxis es: <FONT SIZE=+5> d ...
FONT>. Para cambiar el color del texto hemos de incluir el atributo COLOR
especificándolo con números hexadecimales a modo del siguiente ejemplo:
...
<FONT COLOR=FFFFFF> dFONT>. Otras etiquetas de relevancia son B
...
la cual nos hace que la letra aparezca en negrita, su sintaxis es: <B> a>. Si lo
que pretendemos es que aparezca en cursiva hemos de incluir la etiqueta 1, su
...
sintaxis es: <I> </I>. Para que la letra aparezca subrayada hemos de incorporar
...
la etiqueta U, su sintaxis es: <U> </U>. Para colocar subíndice y supenndice se
han de incluir las etiquetas SUB y SUP, respectivamente, sus sintaxis son:
...
<SUB> </SUB> y <SUP> dSUP>. ...
*
Otro aspecto importante es conocer los atributos relativos a los bloques
de texto, los más comunes son los párrafos y las cabeceras. Los primeros vienen
representados por P. Ésta nos define un párrafo normal, su sintaxis es: <P> d ...
P> o <P>, ya que por defecto cuando iniciamos un nuevo párrafo el anterior se da
por finalizado. Las cabeceras nos facilitan el desarrollo en textos estratificados
pues nos marcan los distintos niveles de acuerdo con el tamaño de la letra siendo
H1 la cabecera mayor y reduciendo el tamaño a medida que aumentamos el nú-
...
mero H1, H2, H3...Hn, su sintaxis es: <H1> d 1 > . Las cabeceras son muy
útiles para introducir títulos y subtítulos o textos vistosos rápidamente. En sendos
atributos se puede manipular la posición del texto mediante la etiqueta ALIGN
(desde HTML 3.0), así para colocarlo a la derecha especificaremos <P
... ...
ALIGN=RIGHT> O > o <H2 ALIGN=RIGHT> d 2 > , para situarlo a la
...
izquierda será <P ALIGN=LEFT> <lP> o <H2 ALIGN=LEFT> d 2 > , si ...
hemos de ubicarlos en el centro <P ALIGN=CENTER> </P> o <H2 ...
...
ALIGN=CENTER> </H2> y si queremos justificar el texto en un párrafo <P
ALIGN=JUSTIFY>. . . O , esta última opción no es posible en cabeceras.
Webs con Photoshop
Otro elemento a considerar es BR esencial para provocar saltos de línea.

De vital importancia cuando se trata de textos de cuerpo mayor colocados con
...
cierto sentido de diseño. Lo especificaremos del siguiente modo: <BR> &R>.
Otro elemento importante para colocar los objetos en la página con cierto estilo
es el atributo CLEAR, ya que facilita determinar en qué posición estará colocada
la línea con respecto a otro elemento de la página, éste puede ser una fotografía,
...
por ejemplo. Si especificamos: <BR ALIGN=RIGHT> &R> indica que la
siguiente línea comenzará tan pronto como el margen inferior derecho esté libre,
...
<BR ALIGN=LEFT> &R> indica que la siguiente línea comenzará tan pronto
como el margen inferior izquierdo esté libre y <BR ALIGN=ALL>...&R>
indica que la siguiente línea comenzará tan pronto como ambos márgenes infe-
riores estén libres. Realmente es un elemento importante.
Cuando trabajamos con párrafos además del texto se pueden incluir otros
objetos que en ocasiones pueden ser elementos IMG. Especificar la posición del
texto con relación a la imagen dependerá de la inclinación y el tipo de diseño de
página deseado. Lo que si es cierto es que para determinar la ubicación hemos de
especificarlo mediante el atributo ALIGN de la etiqueta IMG, es decir, en la
etiqueta P no, aunque así debiera parecer. La alineación del texto con respecto a
un documento gráfico es muy variada, el tamaño de ambos puede diferir en gran
medida, lo que da pie a la existencia de opciones diversas, aunque, como en el
resto de opciones dependerá del browser y la versión HTML, pero pasemos a
enumerarlas: TOP alinea la línea base del texto en la parte superior de la imagen,
MIDDLE alinea la línea base del texto en la parte central de la imagen, BOTTOM
o BASELINE alinean la línea base del texto en la parte inferior de la imagen,
LEFT y RIGHT alinean la totalidad del texto a la izquierda o a la derecha de la
imagen respectivamente si también hemos especificado en la alineación de la
etiqueta P el mismo valor. Para controlar la posición en vertical puede utili-
zar:TEXTTOP para alinear el texto en la parte superior de la imagen,
ABSMIDDLE para alinear el texto e n la parte central de la imagen.
ABSBOTTOM alinea el texto en la parte inferior de la imagen.
Si hemos de centrar una cadena de texto extensa, una fotografía, etc. Po-
...
demos emplear la etiqueta CENTER, su sintaxis es: <CENTER> <lCENTER>.
Puede resultar una herramienta de gran utilidad cuando deseamos centrar todos o
gran parte de los elementos de una página ya que permite insertar tantos elemen-
tos como deseemos entre el elemento de inicio y el que da fin a este efecto. De
este modo podemos centrar una imagen, un texto y una tabla colocándolas entre
sendas etiquetas.
. 3 3 a Q A A V aír'sii3
Figura 205. , 8 m
Visor de Microsofi W,-FMAL C A MB I O DF TAMAÑO
lnternet Explorer. m H.vNX
-E17 ' A ? FM"L W"LLA2?l<
Muestra un ejemplo visual de algunos zxrxwsb(blcreddm

de las más importantes etiquetas de - , ; N ~ . n h ~ , w m -
estilo y de tipos de letra que permiten ~ . ~ : ~ - ~ v ~ . ~ ~ : . ~ c ' m > - ' * . ~ l
metamorfosear el texto en la página.
~,:V,MA:.LFTRAMASOWWDE
Las que aparecen por debajo de la Ií- mm ! : ~ Z G W L : ~ ~ U ~ T - ~ ~ ~
nea están tra~adoscon otras etiquetas, ,>,.,pU*l.I~dr,,7,,r" ..&Sj: -:,
"r;p
..
no detalladas que enfatizan los efectos , ,-,,.

,T
A ,,,,,,:,. ,,
producidos con las etiquetas superio- m ~ ~ ~ ~ ~ 3 ~ ~ m . 4 ~ - . 4 ~ ~ E ~ ~ . 4 ~ ~ : ~ ? ~ A ~ - . c ~ E ~ : z : ~ l ~ - ~
res. En la página siguiente se explican rm.:~ ,I>.w !--;.t?141i::?.lTA,t':::i:t I . ~ ~ v A PTVT.~
~~w.F~
cada una de las etiquetas y el fin que tienen en el texto, aunque no todos los browsers
admiten todas las aquí detalladas.
I
I La figura superior muestra la siguiente sintaxis:
<HTML>
<HEAD>
<TITLE >tipos de letra y estilos <lTITLE >
<IHEAD>
<BODY BGCOLOR= FFFFFF>
TEXTO NORMAL POR DEFECTO SIN ETIQUETAS
<P >TEXTO NORMAL <FONT FACE=AR/AL > CAMBIO DE
FUENTE ARIAL</FONT>
<P>TEXTO NORMAL< FONT SIZE= +2 > CAMBIO DE
TAMAÑO </FONT>
<P> TEXTO NORMAL< FONT COLOR=6FC2F7> CAMBIO DE
COLOR</FONT>
<P> <B >TEXTO NORMAL EN NEGRILLA</B > </FONT>
<P> </>TEXTO NORMAL EN CURSIVA<//> </FONT>
< P > < U>TEXTO NORMAL SUBRAYADO</U> </FONT>
<P> TEXTO NORMAL <SUB > SUBÍNDICE</SUB >
<IFONT>
<P> TEXTO NORMAL<SUP> SUPER&/acute;NDlCE<lSUP>
</FONT>
<P><HR>
<P> TEXTO NORMAL <BIG> LETRA MÁS GRANDE
c/BIG> </FONT>
<P> TEXTO NORMAL <SMALL > LETRA MÁS
PEQUENA<ISMALL> </FONT>
<P>TEXTO NORMAL<EM > LETRA ENFATIZADA EN
CURlVAcIEM > <IFONT>
<P>TEXTO NORMAL<STRONG> LETRA ENFATIZADA EN
NEGRlLLA<ISTRONG> <IFONT>
<P >TEXTO NORMAL <CITE > LETRA PARA ENFATIZADA
U N A CITA EN EL TEXTOcISTRONG> <IFONT>
<P> TEXTO NORMAL< VAR> LETRA PARA ENFATIZADA
UNA VARIABLE EN EL TEXTO<IVAR> </FONT>
<lBODY>
<IHTML>
La etiqueta BIG aumenta el tamaño de la letra con un valor por

defecto al tiempo que la muestra en cursiva. SMALL, por el contrario dismi-
nuye el tamaño de la letra con un valor por defecto. La etiqueta STRONG
hace que el texto aparezca en negrita. Las etiquetas EM. CITE y VAR
enfatizan una frase en cursiva, son empleadas para subrayar un elemento,
una cita o una variable intercalados entre el texto respectivamente.
- ---
A. .-a~-tña'3v-a~3a Figura 206.
". . .
-
1
U*.3
$(l.
*. .i I i 2
Y ,
- 3 . - 1
O < *. ,_
7
,->
-7 " > - T I
Visor de Microsoft
hl i i - 1 rw-Lph* r - W i 4 . i ilurr-l 1 r 4 i r r m - t - m r l i p n p h * mlhi~llirn(irn.p$Pi
w r m ,id.b4 niuri.iLrrurruid lnternet Explorer.
>ASPA' mmm,
lrlPPM rTm'xP AL* -CEFTR~
P ~ p 7 M'"m
, m Ii l.A L)qmDiI Aquí mostramos algunas de las varian-
ESTE ES EL TIPO DE CABECERA R'íAYOR te que podemos obtener en 10s párra-
fos Y e"as cabeceras de a' igual
ESTE ES EL 1 IPO DE CABECERA INMEDIATAMIENTE MEhOR
.,m cL m. .c.,,mu ...,.m. que el modo de utilizar la etiqueta BR
ci\BECBR*L7VTR*DA para aplicar saltos de línea indistinta-
C A E E C ~ N I I T S l C A D && LA DWCHLA
mente en párrafos o cabeceras. Obser-
c m r m J u s r m c n o a x LA L ~ ~ I I I F ~ U > \
ve que ésta última con variantes de
..L <a*.
d. .
M p
m
.- ruib," d. Liir
r i d i k l...-ii
ihon i r -1 i r i w d o rus dr s<ia p m r o T d i l pila ir? rnpl..di inn h - r n n
estilo y forma de texto puede ser muy
útil para crear rótulos.
n l g o sobre html ...

La figura de la página anterior muestra la siguiente sintaxis:
<HTML> <HEAD>
<TITLE> tipos de letra y estilos </TITLE>
<IHEAD>
< BODY BGCOLOR= FFFFFF>
<P> Los p´rrafos son cadenas de textos que tratan un tema
o aspecto en común. Para cambiar de párrafo
hemos de cerrar el anterior, si lo deseamos y a
continuación especificar el siguiente párrafo.
<P ALIGN =)USTIFY> Este segundo p´rrafos que
además. aparece justificado. Puede comprobar en el
ejemplo de como ha sido escrita esta página como hemos
añadido una nueva etiqueta P para iniciarlo.
<P ALIGN = CENTER>P´RRAFO CENTRADO
<P ALIGN=RIGHT>P´RRAFO )USTIFICADO A
LA DERECHA
<P ALIGN=LEFT>P´RRAFO JUSTIFICADO A
LA IZQUIERDA
<HI>ESTE ES EL TlPO DE CABECERA MAYOR
<HZ>ESTE ES EL TlPO DE CABECERA INMEDIATAMENTE
MENOR
<Hó>ESTE ES EL TlPO DE CABECERA BASTANTE MENOR
<H4 ALIGN =CENTER>CABECERA CENTRADA
<H4 ALIGN =RIGHT>CABECERA )USTIFICADA A
LA DERECHA
<H4 ALIGN =LEFT> CABECERA JUSTIFICADA A
LA IZQUIERDA
<P>Los saltos de Iínea permiten cambiar de I&kcute;nea
<BR>cuando lo deseamos <BR >ahora es el segundo salto den
t r o de este párrafo. También puede ser emplea
do en cabeceras.
<IBODY> <IHTML>
31o Webs con Photoshop
&,., +
tb..
-
,--- +!.
- - --
. -
. -
,.
-
.,dFigura 207.
Visor de Microsofl
lnternet Explorer.
De arriba hacia abajo se han emplea-

do las siguientes opciones de alinea-
'0
..-' *
3.
'
;LIXLALLTA!.~FA~.A ~:iurrj.n?i~~~i.?>i
ción en el atributo ALIGN, éstos
:Aí*m,*I.rrí a 2w31
ZITT~,L-L~~S.,~- , a* son:TOP, MIDDLE, BOTTOM, RIGHT
UUT-TL"
A: :L:E.T,: : F
rhi-!x.,p .L.,
~~l):;h[.: A
m=P;
L&E~:II!F~LA * meras colocan la primera línea en la
...., posición que presentan, pero el resto
de líneas aparecen por debajo de la
ain - - J .
-
imagen.
La figura de esta página muestra la siguiente estructura:
<HTML> <HEAD>
<TITLE> tipos de letra y estilos </TlTLE >
<IHEAD>
<BODY BGCOLOR= FFFFFF>
<P> <IMG SCR=p4.jpg WIDTH= 13% HSPACE=3
ALIGN=TOP>L&lacute;NEA BASE ALINEADA EN LA PARTE
SUPERIOR
<P> c I M G SCR=p4.jpg WIDTH= 13% HSPACE=3
ALlGN=MIDDLE>L&lacute;NEA BASE ALINEADA EN
EL CENTRO
~ <P> <IMG SCR=p4.jpg WIDTH= 13% HSPACE=3
ALIGN =BOTTOM >L&lacute;NEA BASE ALINEADA EN LA
PARTE INFERIOR
<P> <IMG SCR=p4.jpg WIDTH= 13% HSPACE =3
ALIGN=RIGHT>LA TOTALIDAD DEL TEXTO ES ALINEADO
A LA DERECHA<BR>PARALAMENTE A LA IMAGEN
<P> <IMG SCR=p4.jpg WIDTH= 13% HSPACE=3
ALIGN=LEFT>LA TOTALIDAD DEL TEXTO ES ALINEADO
A LA IZQUIERDA<BR>PARALAMENTE A LA IMAGEN
</BODY > <IHTML>
Otras etiquetas de interés son BASEFONTla cual determina el cuerpo

del texto aunque ha de ir acompañado del atributo SlZE y especificar el
aumento o la reducción con signo positivo o negativo, al igual que la etiqueta
FON7; siendo su sintaxis: <BASEFONT SIZE=-2 >. Lógicamente una
etiqueta invalida la otra por lo que no han de ponerse las dos nunca, pues
realizan la misma función.
Si queremos crear un efecto de parpadeo en el texto podemos hacerlo
incluyendo la etiqueta BLINK.
Cuando cadenas de texto han de ser vínculos, éstas deberán ser circuns-
critas entre <A HREF=URL> y d A > , de este modo será entendido como un
ancla a otro documento htrnl. En estos casos los atributos y las etiquetas relacio-
nadas que hacen referencia al tipo de carácter, la morfología del mismo, si se trata
de un párrafo o si se trata de un tipo de cabecera, pueden ser incluidos. Veamos
Tomo aparecen sintácticamente relacionados.
Figura 208. - a 3-
+-- -- a 3-33 ,t8-s-n
.- - -
Visor de Microsoft
:n u 6- CAh4BIO DE T.*IAÑo
lnternet Explorer.
Aquí hemos sekccionado Parte de 10s ",>.

r;,,-L,L7,7L
elementos mostrados en las dos ilus- ~:,-~~~,,L~.T.,r~,7,,-,~,L~~~-.,F:..~.,
traciones anteriores. Vemos que todo ,

!4 ~~,~t,,,r~TfiwAEiRTGnrua
el texto aparece como vínculo en cada -
uno de los casos, incluso el que se en-

cuentra en el párrafo relacionado con ,. .:....
p:-
CU?A-F a:Eu.,::.Lk>;:a-
fotografías, esto es porque hemos en-

cerrado todo el bloque entre las etique-
: AT7-NCAI.I-! -11
:.
?FA-,.
S
.- l A ?-=T.,,
A
:y
,. .. .
tas <A HREF=URL> y </A>. Aunque
aquí no se muestra el proceso para insertar un vínculo dentro de una cadena de texto
en un párrafo, es el mismo; simplemente la palabra en cuestión deberá estar entre las
etiquetas mencionadas. En la página siguiente aparece la sintaxis de esta página don-
de se muestra como todos los elementos se relacionan.
Webs con Photoshop

La figura de la página anterior muestro la siguiente sintaxis:
<HTML> cHEAD>
<TITLE>tipos de letra y estilos en vínculos <lTITLE>
<IHEAD>
<BODY BGCOLOR=FFFFFF>
<P> <A HREF=/texto>TEXTO NORMALCFONT

FACE=ARIAL> CAMBIO DE FUENTE ARIAL</A> <IFONT>
<P><A HREF=/texto>TEXTO NORMAL<FONT SIZE=+3>
CAMBIO DE TAMAÑO </A > </FONT>
<P> <A HREF=ltexto> <B>TEXTO NORMAL EN NEGRILLA
<lB> </A> </FONT>
<P> <A HREF=/texto> < l > TEXTO NORMAL EN CURSIVA
<lI> </A> </FONT>
<P><HR>
<P> <A HREF=/texto> TEXTO NORMAL<SMALL> LETRA
MÁS PEQUENA<ISMALL> </A> </FONT>
<P> <A HREF=/texto>TEXTO NORMALeEM > LETRA
ENFATIZADA ENCURlVA</EM > </A> <IFONT>
<P> <A HREF=/texto>TEXTO NORMAL<STRONG> LETRA
ENFATIZADA EN NEGRILLA</STRONG> </A> </FONT>
<P> <HR>
<P> <A HREF=/texto> <IMG SCR=pl.jpg WIDTH= 13%
HSPACE=3 ALlGN=MIDDLE>LÍNEA BASE ALINEADA
EN EL CENTRO</A>
<P> <IMG SCR=pl.jpg WIDTH= 13% HSPACE=3
ALIGN=RIGHT> <A HREF=/texto>LA TOTALIDAD DEL TEX
TO ES ALINEADO A LA DERECHA<BR>PARALAMENTE A LA
IMAGEN </A>
<IBODY> <IHTML>
Figura 209. ,
.. c,un
c i. 4. L.%. -. d
.. :. O"-, h.
.
Visor de Microsoft
lnternet Explorer.
Aquí como en la mayoría de páginas

de la Web conviven texto normal y tex-
to gráfico en una agradable armonía.
Cada uno de los cuales cumple su fun-
ción específica. Observe que en este
caso los vínculos secundarios y más
numerosos aparecen en fomato de tex-
to normal, mientras que el gráfico apa-
rece para resaltar un tema concreto.

La figura superior muestra la siguiente sintaxis:
<HTML>
< HEAD>
< TlTLE>80 a&ntilds;os de surrealismos </TITLE 3
<IHEAD >
<FRAMESET COLlS=200/,80% BORDER= I >
<FRAME SCR=lista.htm NAME=listas>
< FRAME SCR =cuadroZ.htm NAME =cuadros2 > </FRAMESET>
</HTML>
Siendo la estructura del documento cuadro2:

<HTML>
<HEAD>
< TlTLE >texto grafico</TITLI
<IHEAD >
<BODY BACKGROUND=textura.jpg>
<TABLE WIDTH=40% ALIGN=CENTER BORDkR= I
CELLPADDING= 1 CELLSPACING= 1 BGCOLOR=#000000>
<TR> <TD ALIGN=CENTER> <IMG SCR=marco2.jpl
WIDTH=425 HEIGHT= 142 > </TD> </TR>
</TABLE>
<P><HR><P>
<CENTER> <I> <B> <FONT SIZE=5 COLOR=FFFFFF>
Bienvenidos a la galería angek Fuente donde
podrá encontrar una ajustada guía de todos
nuestros productos<ll> </B> <ICENTER>
Y la sintaxis del documento lista:
<HTML> <HEAD>
<TITLE >vinculas en formato texto y texto grafico </TITLE >
<IHEAD>
<BODY BGCOLOR= 172025>
<TABLE WIDTH= 10% ALIGN=CENTER BORDER=O

<TR> < TD > <P> <A HREF=lsurrealismolcuadros.html>
<IMG SCR=texto.jpeg ALT=catalogo de obras WIDTH= 150
HEIGHT= 150 VSPACE=5 HSPACE=5 BORDER=O> </A>
</TD> <ITR> </TABLE>
<P>
<A HREF=/surrealismo/cuadros. html> <FONTCOLOR=FFFFFF>
<CENTER> LISTAS EXPONSORS<ICENTER> </A>
<P>
<A HREF=/surrealismo/cuadros. html> <FONTCOLOR=FFFFFF >
<CENTER> EXPOSlCIÓN TEMPORAL</CENTER> </A >
I ...así hasta completar los elementos de b lista.

Figura 210. -+. - 3 3 3 3&'4'7BliY m

visor de Microsofi
lnternet Explorer.
La página por marcos está dividida en

- - -- -
&*
-
tres secciones debido a que deseába-
mos resaltar con un fondo las fotogra- - 1
S
I -- .-
fías de los lugares al tiempo que' 1jruii -

delimitarlo en un espacio que difiriese - -
del resto de la información que apare- 5
F -
-
..
ce en las otras páginas de contenido.
Aquí como en el caso anterior sendos co!n rnr x
. -- ---
tipos de texto conviven para proporcio-
nar claridad informativa sin llegar a agotar visualmente al
navegante por un exceso de contenido informativo.

La figura superior muestra la siguiente sintaxis:
<HJML> <HEAD>
< TITLE >80 a&ntilds;os de surrealismos <l TIJLE >
A
c/HEAD>
CFRAMESET ROWS = 1 Ovo,90% BORDER= I >
CFRAME SCR=logotipo.htm NAME =tour turistic>
<FRAMESET COLLS=30%,70% BORDER= 1 >
<FRAME SCR=listado.htm NAME =listados>
<FRAME SCR=viaje.htm NAME=viajes al caribe>
</FRAMESET> <IHTML>
Siendo la estructura del documento logotipo:
cHJML> <HEAD>
< JITLE>vinculos en formato texto y texto grafico<lJITLE>
cIHEAD >
cBODY BGCOLOR=6FCZF7>
<JABLE> < JR> <TD ALlGN =CENTER> < I M G SCR=rotulo.gif
WlDTH =80%> cITD> <ITR> <ITABLE >
cIBODY> cIHJML>
316 Webs con I?hotoshop
Siendo la sintaxis del documento listado:
<HTML> <HEAD>
<TITLE>vinculos en formato texto y texto grafico</TITLE>
</HEAD>
<TABLE WIDTH=50% ALIGN=CENTER BORDER=O

<TR> < TD> <A HREF=lviajeahtrnl> <IMG SCR=texto I.gif
ALT=ofertas de viaje WIDTH= 100 HEIGHT= 1 O0 VSPACE=5
BORDER=O> </A> </TD> </TR>
<ITABLE >
<HR ALIGN=CENTER>
<P>
<A HREF=viajes/nuevos tours.htrnl> <FONTCOLOR = FFFFFF>
<CENTER> NUEVOS TOURS</CENTER> </A>
<A HREF=/viajeslamérica del sur.html>
<FONTCOLOR=FFFFFF> <CENTER>AMÉRICA DEL
SUR</CENTER> </A>
<A HREF=lviajeslpolinesia.html> < FONTCOLOR= FFFFFF>
<CENTER>ISLAS DE LA POLlNESlA </CENTER> </A>
<A HREF=/viajes/arnérica central.html>
<FONTCOLOR= FFFFFF> <CENTER>AMÉRICA
CENTRAL</CENTER> </A>
<A HREF=/viajes/asia. htmI> < FONTCOLOR = FFFFFF>
<CENTER>ASIA</CENTER> </A>
<A HREF=/viajes/africa.html> <FONTCOLOR=FFFFFF>
I < CENTER>ÁFRICA </CENTER> </A >
<A HREF=/viajes/ofertas. html> < FONTCOLOR = FFFFFF>
<CENTER>OFERTAS<ICENTER> </A>
<HR ALIGN=CENTER>
</BODY> </HTML>
1 En todos los cosos hemos subrayado los elementos de texto.

Efectos en el texto
Y la estructura del documento viaje:
<HTML> <HEAD>
en formato texto y texto grafico </TITLE >
C TITLE >vinculas
c/HEAD>
<BODY BACKGROUND=textura I.gif>
<TABLE WIDTH= 10% ALIGN =CENTER BORDER= 1

CELLPADDING= 1 CELLSPACING=4 BGCOLOR=óFCZF7>
<TR> <TD> <IMG SCR=haiti.gif WIDTH=200
HEIGHT= 13 1 ALIGN=CENTER> </TD>
cTD> <A HREF=lviajeslcaribe.htmI> <I> <B> <CENTER>
CFONT SIZE= 5 COLOR=OF133 >Haiti<ll> <lB>
<ICENTER> </A> </TD> </TR> </JABLE>
cTABLE WIDTH= 10% ALIGN= LEFT BORDER= 1

CELLPADDING= 1 CELLSPACING=4 BGCOLOR=6FC2F7>
< TR> < TD> <IMG SCR=jamaica.gif WIDTH=200
HEIGHT= 13 1 ALIGN=CENTER> </TD>
<TD> <A HREF=/viajes/caribe.html> <I> <B> <CENTER>
<FONT SIZE = 5 COLOR =OF 133 >Jamaica </l> </B >
</CIENTER> </A> <lTD> c/TR> c/TABLE>
<P > < H 1 > <B > <FONT COLOR=FFFFFF> La semana ideal
<BR>para todos<lB > < / H 1 ><P>
<TABLE WIDTH = 10% ALIGN =CENTER BORDER= 1

CELLPADDING= 1 CELLSPACING=4 BGCOLOR=6FCtF7>
cTR> <TD> <A HREF=lviajes.html> <I> <B > <CENTER>
<FONT SIZE= 5 COLOR=OF133>HOME</I></B>
</CENTER> </A> </TD> <TD> < A HREF=/viajes/tour.html>
<I> <B> <CENTER> <FONT SIZE= 5 COLOR=OF133>
TOUR<lI> </B> <ICENTER> </A> <ITD> </TR> <ITABLE>
</BODY> </HTML>
1 En todos los casos hemos subrayado los elementos de texto.

PROYECTOS
A lo largo de este extenso tema se ha ido mostrando mediante numerosos
ejemplos como producir interesantes efectos en la tipografía, aunque sin tratar
ningún elemento perteneciente a una de las páginas. Veamos un breve resumen de
cómo hemos diseñado uno de ellos.
Documentos PSD.
El rótulo está integrado en

un documento que ha de
contener una fotografía. El
fondo de la página Web en
1 la que ha de incrustarse es
de un azul claro por lo que antes de iniciar el proceso de tratamiento de la tipografía
cubrimos con la herramienta Bote de pintura el fondo que responde a un R: 111,
V: 194 y A: 247. A continuación hemos recortado la sección de una fotografía de
interés, que previamente habíamos indexado, con la herramienta Marco dando un
calado de 6 en su paleta opciones. De este modo conseguimos crear un efecto de
suave degradación entre el fondo y la imagen. Para provocar un viraje rápido simple-
mente hemos seleccionado en la capa de la fotografía el modo de capa Luminosidad
manteniendo el valor de opacidad de dicha capa y de la del fondo en 100%.
-
-m - - ~El siguiente paso ha~ con-
- i - l . m i . m i , .
a 1
sistido en seleccionar el
t
tipo de letra adecuado se-
leccionando STACCATO
222 B T para Tour v
LITOGRA'PHIC LIGHT
para TURISTIC, siendo
I ambos de un cuerpo de 80
puntos. En el primero se ha seleccionado un color azul prusia mientras que en el
segundo un verde hierba. Colocados en la posición más o menos definitiva.
hemos duplicado. En una

de ellas hemos mantenido
el color inicial y sin alterar-
la, a excepción de la opa-
cidad que ha sido reduci-
da al 50 %. En la capa in-
ferior se han aplicado va-
rios filtros consecutivamente. El primero de ellos Hallar bordes que contienen unos
valores por defecto. En segundo lugar Relieve dando un ángulo de 55 grados, una
altura de 8 píxeles y una cantidad de relieve del 63 por ciento. En la otra capa se
ha mantenido la opacidad al cien por cien pero se ha seleccionado el modo lumino-
sidad dando como resultado el que aparece en la ilustración de la página anterior.
Figura 212.
Documento PSD.
En la capa de TOUR he-

mos aplicado en primer lu-
gar el filtro Relieve dando
como valores ángulo: 55
grados, altura: 8 y canti-
dad de relieve: 63 %. A continuación con el comando Gama de colores y el comando
Guardar selección hemos creado canales alfa partiendo de cada una de las seleccio-
nes del texto que delimitan las zonas de las luces y las zonas de las sombras para
intensificar dichos extremos mediante un ajuste de ambos empleando el comando
Tono/saturación. El paso siguiente ha consistido en duplicar la capa, en la inferior se
ha aplicado el filtro Efectos de iluminación seleccionando como estilo 2AMSPOT, la
opción FOCO, como tipo de luz, una intensidad de 17,un foco de ancho de 91, un
lustre mate de -67,plástico como material con un valor de -58, una exposición O y un
ambiente positivo de 20. En propiedades hemos elegido el color del texto, es decir, el
azul prusia, por último como canal de textura se ha seleccionado el canal de la capa
del texto con una altura montañosa máxima. Estos valores han sido aplicado poste-
riormente en canal de textura de las sombras. En esta capa hemos seleccionado como
modo de capa Luminosidad, mientras que en la capa superior duplicada en la cual no
se ha aplicado este filtro se ha elegido el modo de capa Luz intensa manteniendo en
ambas la opacidad a O. Por último en la capa fondo hemos seleccionado los extremos
1 y la hemos convertido en canal alfa en el cual hemos aplicado el filtro Desenfoque
gaussiano para una mayor integración con el fondo de la página Web.
Figura 213.
Documento PSD
y paleta Capas.
I
F Preservar lransparincla

En las muestras aquí presentadas comprobamos la gran variedad en dise-
ños que se pueden obtener y como éstos son armonizados con el resto de los ele-
mentos al tiempo que con el diseño general que depende de las necesidades del
proyecto, de lo que prepondere en él, es decir, lo informativo o el efecto visual a
modo de anuncio publicitario. Nos encontramos con casos en que ambos valores
aparecen en una misma página, mientras que en otras domina el valor informati-
vo y de catalogación por encima de valor publicitario.
...-. <m- - la :.- .* .- 1-- .-m Figura 214.
Thearcade presenta la totalidad de elementos

tipográficos en formato gráfico unificando de
este modo la presentación ya que es esencial-
mente una presentación apurada en la que se
ha sabido conjugar los elementos de informa-
ción con los publicitarios creando este espacio
escénico en el cual aparece representado el
.. .- .. ~.- .-... .. , ..
E*- - ..r - , ~ -.~ 3 , 2 - . . . - : , - ; ~ .
=. ,$
logotipo. Vemos un buen diseño general .:.'

:ZX. ' - ' -'
m
-
jugando con tres colores esenciales el

azul, blanco y amarillo como colores re-
levantes y un fondo negro sobre el cual
resaltarlos. Para poder incluir los víncu-
los en estos formatos se ha tratado la
pagina con mapas de imagen. Sharper-
image presenta una esquematización
mayor rayando lo publicitario. Con una
buena combinación de fotografías con
L...
". .
..
,Y 1- -,: -- ..-
a texto en un mismo elemento que al tiempo es
..-. . .
i J : 9 . 4 ? z' .. a % J
.. ._,-<S+. m i .
,
p
.L-.:-_./-.
--**. -- - .
,., vinculo. El superior está en HTML. En Carpoint
el texto gráfico sirve para resaltar el nombre de
la empresa al tiempo que de reclamo sobre
temas importantes (con vínculos). Los temas
que tratan aparecen un tanto más detallados
con texto en HTML y si es necesario ampliar
información podemos optar por los vínculos que
presentan. Es una página elegante, ordenada
presentando exclusivamente lo necesario, sin
l. . : 1 ~ l ~ < ' - ~ " " Y - r C ~
. .-..--.-...--.-.-.,-m fatigar por exceso de información o de colores.
A diferencia de los vínculos en formato texto o en formato gráfico, los
cuales están limitados al documento o el texto determinado, los mapas de imagen
oyrecen un mayor margen de maniobra. Como bien indica su nombre, permiten
delimitar una imagen o áreas específicas de ésta para convertirlas en vínculos que
nos trasladen a la dirección o página requerida. Este aspecto es muy importante,
pues a diferencia de un simple vínculo los mapas permiten dividir una imagen en
varios vínculos distintos, lo que hace que podamos añadir o elaborar diseños de
páginas más complejas y sofisticadas.
Aunque esto no es del todo cierto pues fácilmente podemos diseñar la

totalidad o parte de una página con vínculos, incrustando cada una de las zonas
de la imagen en diferentes celdas de una tabla haciendo que las que nos interesen
sean vínculos y el resto meras imágenes, vemos que en realidad vienen a cumplir
la misma función que un mapa de imagen aunque de un modo más tosco y arcaico,
ya que no es lo mismo delimitar diferentes áreas de una imagen al incluir varios
documentos que configuran en su totalidad una mayor a modo de puzzle. Como
en capítulos anteriores ya se ha comentado sustancialmente la utilidad de las
tablas, aquí no trataremos del alcance que pueden tener para la realización de
composiciones sofisticadas, pues creemos que ha sido lo suficientemente

extendido, no obstante, si que realizaremos en los puntos determinantes breves
incisos que muestren el paralelismo existente entre un proceso y otro de tal modo
que el lector sea capaz de optar por el método que más le satisfaga.
¿PARA QUÉ LOS MAPAS DE IMAGEN?

Es muy habitual emplear imagemap cuando se tratan proyectos con un
alto componente gráfico, cuando se incluyen documentos tratados en programas
de creación tridimensional o simplemente cuando se desea activar un cierto espa-
cio como un mapa de imagen, como puede ser el caso de una barra de tareas
integrada en un documento o una fotografía. Éstos son activados colocando el
puntero sobre la zona específica y pulsando sobre ella, cada mapa tiene su radio
de acción, es decir, la zona activa desde la cual podemos acceder, siendo ésta
delimitada por las proporciones de altura y anchura del documento o por unas
coordenadas previamente determinadas que pueden tomar forma de rectángulo,
círculo o polígono según las necesidades que el proyecto requiera.
Cuando pulsamos sobre una zona activa, las coordenadas de donde hemos
pulsado son enviadas al programa del servidor para comprobar la acción asociada
a dichas coordenadas (al radio de acción que cubren las coordenadas previamente
especificadas), una vez comprobado el mensaje es devuelto al browser indicando
el documento que ha de ser cargado, es decir, el documento asociado. No obstante,
en la actualidad los mapas de imagen están basados en el navegador, la gran
ventaja adicional de este novedoso sistema reside en que el proceso se agiliza, es
decir, la presentación es mucho más rápida pues el servidor Web no tiene que
procesar ninguna información relacionada con el mapa.
El principal problema reside en que no disponemos de las coordenadas

exactas que nos delimiten la zona activa. Aunque un gran número de programas
para la creación de documentos HTML agilizan este proceso presentando cuadros
donde indicar con rapidez las coordenadas, este es el caso de HotDog. De todos
modos resulta interesante saber el desarrollo que se ha de seguir para confeccionar
con exactitud el área que ha de permanecer activa, que en cada diseño será diferente.
El método habitual para crear imágenes activas consiste en incluir dentro

del grupo de atributos de la etiqueta IMG el atributo ISMAP, de este modo el
Todo sobre mapas de imagen 323
documento es entendido como un mapa de imagen, un ejemplo sería <IMG

SCR=fotografía.jpg ISMAP> a lo que debe ir acompañado de la referencia de
hipertexto al documento vinculado mediante la etiqueta A y el atributo HREF
del siguiente modo: <A HREF=catálogo.htm> <IMG SCR=fotografía.jpg
ISMAP>dA>. Una vez éste aparece en el browser nos informará en todo momento
de las coordenadas exactas de localización del puntero. Este aspecto es muy
importante pues nos sirve para la confección de un esbozo previo para poder
delimitar las coordenadas exactas de los mapas de imagen que deseamos incluir
en el documento definitivo.

La sintaxis de una imagen activa es:
<A HREF= URL> <IMG SCR= URL ISMAP> </A>
Observe que no requiere de una información previa sobre las coorde-

nadas del mapa de imagen. Esto es así porque en realidad estamos enga-
ñando al servidor haciéndole creer que el documento gráfico es un mapa de
imagen así que cuando colocamos el puntero del ratón sobre la imagen es
detectado como zona activa del mapa de imagen. Puede ser empleado tal
cual aparece y en muchos casos lo encontramos así especificado en el código
fuente de Webs.
tl
Figura 215. h... :i.v <. L . v.+, S".,
E
Visor de Microsoft 7 . _: J. ,..?+ ,Y*
. ,*- ..-
J
8.. -2. :
j ,U, .;1 2- ,; :
..
. W W .
lnternet Explorer. >-U. e i A, m<-W-, .,,. m I

,%*<,<,,"-,:m -.,,,.m- .;u-.-*cw*t..+ ,-o-".- ,.,
I
Comprobamos en la parte inferior del

browser como éste nos informa de la
dirección del documento vinculado y las
coordenadas de la posición del cursor
en ese momento. Ésta resulta ser la
clave para planificar 10s mapas de ima- uno e11 cal rírrrrido CIZ i.uijec e~citien\
gen de documentos complejos y ,
sofisticados,por ejemplo cuando debe- d
mos trazar una forma poligonal. *. 7

La figura 2 15 muestra la siguiente sintaxis:
<HTML> <HEAD>
<TITLE>zonas activas<lJI JLE>
<IHEAD>
<P>
<TABLE>
<JR> <TD ALIGN=CENTER> <IMG SCR=titulo.gif
HSPACE=5 VSPACE=5 ALIGN=CENTER> </TD>
<TD ALIGN=CENTER> < A HREF=lagencialimagen.html>
< I M G SCR=texto 1.gif ALT= Tour Turistic VSPACE =5
HSPACE =5 BORDER=O ISMAP> </A> </JD> </TR>
<ITABLE>
<P><HR> WIDHT=100% SIZE=15 ALIGN=CENTER
CLEAR=LEFT> < P >
<HI><CENTER><I><B><FONT COLOR=A51821 >Somos
el número uno en el mundo en viajes exóticos
</CENJER> < / I > </B> < / H I >
<P> <HR> WIDHT= 100°h S/ZE= 15 ALIGN=CENJER
CLEAR= LEFT> <P>
<IMG SCR=fl .gif W/DTH= 14 1 HEIGHJ=93 VSPACE= 1
HSPACE= 1 ALIGN= LEFJ>
< I > <B > <FONT SlZE = S COLOR=FFFFFF>Compruébelo
encontrará el lugar que tanto ha soñado</l> </B>
<P><HR>
<lBODY> <IHJML>
Cuando se han de determinar varias zonas activas en un mismo

documento hemos de definir las distintas áreas mediante unas coordenadas
demarcatorias de dichas zonas. Para realizar este proceso debemos recurrir a la
etiqueta MAP y la etiqueta AREA. La primera nos marca el inicio del documento
que será entendido como un mapa al tiempo que especifica las distintas regiones
en las que será delimitado, debe ir especificado del siguiente modo: <MAP>.
Éste puede ir acompañado del atributo NAME para indicar el nombre de un ancla
en documentos de hipertexto aunque su uso es opcional. Lo recomendable es que
haga referencia al URL en cuestión aunque no tiene por que ser así, éste no deberá
ser repetido en ningún otro documento. Su sintaxis es: cMAP NAME=«titulo»>,
donde tit~iloreferencía el URL del documento tratado como mapa de imagen.
La etiqueta AREA debe ir acompañada de una serie de atributos que nos

indican la forma que ha de tomar el mapa, las coordenadas exactas de dicha zona
y la dirección o referencia de hipertexto del mapa. Así hemos de indicar en primer
lugar la forma empleando el atributo SHAPE. Éste puede contener las siguientes
opciones: DEFAULT para indicar una zona indefinida por lo que sus coordenadas
serán indeterminadas, CIRCLE, para indicar áreas en forma de círculo, en este
caso las coordenadas a definir son el centro y un punto del borde, RECT para
definir un mapa en forma de rectángulo, las coordenadas que deben indicarse son
las del vértice superior izquierdo y las del vértice inferior derecho y, por último,
POLY para indicar que la forma es un polígono, en este caso es imprescindible
indicar las coordenadas de cada uno de los vértices pudiendo contener hasta un
total de 100. Cada una de las coordenadas han de ser precisadas en el atributo
COORDS siguiendo la forma indicada en SHAPE por ejemplo: <AREA
SHAPE= RECT COORDS= x l , y l , x2, y2>. Además hemos de incluir la
referencia de hipertexto en el atributo HREF en cada una de las áreas detalladas,
por ejemplo: <AREA SHAPE= RECT COORDS= x l , y l , x2, y2 HREF=
imagemap.,i peg>.
I La sintaxis de las distintas coordenadas según la forma del mapa de

imagen son:
<AMA SHAPE=RECT COORDS= xl, y/, x2, y2 HREF=URL>

CAREA SHAPE=CIRCLE COORDS= xl, y/, r HREF=URL>
...
CAREA SHAPE=POLY COORDS= xl, y1 xn, yn HREF= URL>
Por último hemos de indicar de algún modo cual es el documento que es

tratado como un mapa en este caso habremos de añadir dentro de la etiqueta LMG
el atributo U S E M A P y no como en el caso anterior I S M A P . A diferencia de éste,
el browser no nos informa de las coordenadas exactas de la posición del cursor en
cada momento aunque sí nos informa de la referencia de hipertexto del documento
enlazado. Su sintaxis es la siguiente: <IMG SCR=fotografía.jpg USEMAP=
#nombre del mapa> (el símbolo # debe ir siempre antes del nombre, si no lo
incluimos la imagen no será entendida como un mapa). Observe que en este caso
ya no va acompañado de la etiqueta de enlace A, pues los vínculos vienen
determinados entre las etiquetas <MAP> y d M A P > .

La sintaxis de un documento entendido como varios mapas de
imagen sería la siguiente (en este caso estó dividido en tres zonas activas
cada una de las cuales con una forma distinta):
<IMG SCR= URL USEMAP=#nombre del mapa>
cMAP NAME=es aconsejable poner el nombre del mapa>
CAREA SHAPE=RECT COORDS= xl, y/, x2, y2 HREF=URL>

<AR€A SHAPE=CIRCLE COORDS= xl, y/, r HREF=URL>
< A R U SHAPEePOLY COORDS= xl, y l...xn, yn HREF=URL>
nota...
l
Si ha incluido al mismo tiempo los atributos lSMAP y USEMAP. si el
browser entiende la segunda etiqueta la primera quedará invalidada con
todo lo que ello comporta.
Figura 216. E*.

-
-
- !. l. i fr..;.i
* -,
Visor de Microsoft _.A ' . ?-
.' -.
.s.-.
-*
-*.
,m.+
,!
< i -<.- L b -
lnternet Explorer. c-,,"m J ,-..

A
i
En la parte inferior del browser apare-

ce exclusivamente a nivel informativo
la dirección del documento vinculado.
1c
!
En este caso la imagen que ha sido tra-

tada como un imagemap, presenta dos
zonas activas, una en forma de polígo-
no que aparece visualizada y otra en
forma rectangular, se trata de el rótulo
turistic como indica su página. _- q
a l g o sobre html,
La sintaxis de la ilustración superior es:
<HTML> <HEAD>
< TITLE >mapas de imagen </TITLE >
cIHEAD >
< I M G SCR= titulo.gif USEMAP=#agenck HEIGH T = 170
WHIDTH=657 BORDER=3 >
<MAP NAME=agencia >
<AREA SHAPE = POLY COORDS = 14, 22, 40, 1 10, 19 1, 78, 1 75,
34, 72, 30, 73, 8, 15, 23, 14, 22 HREF=agencb.htm>
<AREA SHAPE =RECT COORDS= 142, 92, 567, 154
HREF=viaje.htm >
</MAP>
cIBODY >
<IHTML>
Observe que el URL de cada área es distinto, es decir, cuando pulsa-

mos con el cursor dentro de las coordenadas impuestas por la forma especi-
ficada nos trasladará al documento htm definido en el HREF, que en el
polígono es agenchhtm y en el rectángulo es viaje.htm.
DETERMINAR COOFCDENADAS
En páginas anteriores comentamos que la gran mayoría de programas
para la creación de documentos HTML traen incorporados comandos o herra-
mientas que facilitan el proceso para la determinación de las zonas activas. No
obstante es importante saber qué método podemos emplear en caso de no dispo-
ner de este tipo de herramientas. Ya comentamos que una forma rápida consistía
en crear un documento de prueba a modo de i d g e n e s activas para, de este modo,
poder determinar las coordenadas que debemos especificar en el atributo
COORDS una vez sea éste sea convertido a mapa de imagen. Pero veamos como
hacerlo.
Para que una imagen aparezca como activa debemos recurrir al atributo
ISMAP (pág. 322). Éste, como ya indicábamos, nos permite visualizar en el
browser la posición del cursor en cada momento, así que mediante éste podremos
saber que coordenadas deseamos marcar como área activa. Una vez creada la
página la cargamos en el browser y comenzamos a tomar nota de los puntos que
delimiten la forma de la zona activa.
.- te ..
L
e--i -
2 5 . 2. c>L ;--
, i 2. ,Y"
Figura 217.
m* 8 2
Visores de Microsoít lnternet Explorer.
1.-..
Este documento viene especificado en la pá-

gina del código fuente como una imagen ac-
tiva, con las etiquetas y atributos de un víncu-
lo y dentro de la etiqueta IMG el atributo ISMAP
que lo identifica como un mapa. ~~í que una
vez en el browser, nos aparecen indicados en
' todo momento las coordenadas de posición
tr. t.- .. 3- Y
del cursor. Las que aparece en la ilus- : --2 -8

t...
tración superior son las primeras coor- --"--=-I

7
. -.-
-
i
denadas que emplearemos para deter-
minar el polígono que delimitarála zona,
éstas son 17, 13. Las que marcan el
vértice siguiente aparecen visualizadas
en la ilustración inferior, éstas son 31,
105. En estos casos las coordenadas no :f,,,l,,,
tienen porque coincidir con los márge-
nes que impone el tamaño específico del
documento.
Figura 218.
3
* 2t & ,A $2
Visores de Microsoft lnternet Explorer. --
'S*
m.
--
Las coordenadas de los vértices siguientes

son según las ilustraciones que aparecen de
izquierda a derecha y de arriba a abajo: 136,
86, 192, 67, 145 y 11 respectivamente.
Lógicamanteel vértice que cierra la figura es
el primero, es decir, 17, 13. Nos cercioramos
de que el proceso para la obtención de coor-
denadas no es nada complicado.
algosobre html...
I
La figura 2 15 de la página 323 mostraría el siguit.rire Lurriuiu ue e>-
tructura con respecto a la imagen titulo:
lo anterior...
< TABLE >
< TR> <TD ALIGN=CENTER> <A HREF=agencia.html>
<I M G SCR =titulo.gif ALT=agencia HSPACE =S VSPACE =S
lSMAP> </A> <ITD>
<TD ALIGN =CENTER> <A HREF= \agencia\imagen.html>
<IMG SCR=texto 1 .gif ALT= Tour Turistic VSPACE =5
HSPACE=5 BORDER=O lSMAP> </A> </TD> </TR>
</TABLE >
...
lo siguiente
Las etiquetas MAP y AREA

para introducir coordenadas
Una vez tenemos las coordenadas del área en cuestión hemos de introdu-
cirlas, para ello contamos con una serie de atributos y etiquetas. Las que
circunscriben el total de áreas activas son eMAP> y d M A P > , entre las cuales
hemos de incluir la etiqueta A R E A . Cada A R E A marca una zona activa dentro
de la cual debemos precisar la forma. Las coordenadas exactas del área y el URL
del documento vinculado mediante los atributos S H A D E , C O O R D S y HREF
respectivamente, como indicamos en las páginas 324 y 325.
A lo dicho hasta aquí hay que añadir que dentro de los atributos de IMG
hemos de permutar I S M A P por el de U S E M A P con su respectivo nombre relati-
vo a la imagen, que es lo más aconsejable tal y como se indica en la página 326.
Pero ahora veamos cuales son los cambios sustanciales en la página del código
fuente y en la página visualizada en el browser con respecto a la anterior.

I
La figura 2 15 de la página 323 mostraría el siguiente cambio de sin-
taxis con respecto a la imagen titulo:
..
lo anterior.
<JABLE> < TR> < TD ALlGN=CENTER> < I M G SCR=titulo.gif
ALT=agencia HSPACE =5 VSPACE =5 USEMAP =#agencia >
CMAP NAME =agencia >
CAREA SHAPE =POLY COORDS= 1 7, 13, 3 1, 105, 136, 86, 192,
67, 145, 1 1 HREF=agenck.htm>
</MAP >
c/TD>
<TD ALlGN=CENTER> <A HREF=\ogencia\imogen.html>
<IMG SCR=texto 1 .gif ALT=Tour Turistic VSPACE=5
'HSPACE=5 BORDER=O ISMAP> </A> </TD> </TR> </JABLE>
...
lo siguiente
N
Figura 219.
Visor de Microsofi
e,.,.
A "
E,.
.
:"p .
. J
>+--
,.,d.
L-.&.
.m
,3b-s,A
m.S
9,
,. r_-
-_' .(
..?_ -,," J
1.
19.
7'-
lnternet Explorer. Ir -l.,t . ;.,,-r.u,.,i!:iih. """F__1 ..
En la parte inferior del browser apare-

ce a nivel informativo exclusivamente i
la dirección del documento vinculado.
I
Vemos como la zona activa queda res-
tringida únicamente al polígono que #U
,, - 1 , ,I,#l,l",/,# ,,,
l.,,,,, \ l.1 O
,,, t,,
delimita la palabra tour, la cual perte-

nece junto con otros elementos visuali-
zados al documento en formato GIF A
denominado titulo
PROYECTOS
En el capítulo 7 mostrábamos en la figura 166 de la página 265 de que
modo era posible crear el efecto de una barra de herramientas mediante la coloca-
ción consecutiva de varias imágenes que al mismo tiempo eran vínculos. En esta
ocasión vamos a mostrar otro método de crear una barra de herramientas consti-
tuida por un solo gráfico dividido en varios mapas de imagen. Con el fin de
cotejar las diferencias existentes entre una y otra la realizaremos en el mismo
diseño de página.
1. En los botones diseñados en las páginas 268 a 270 hemos

incrustados éstos junto con su sombra en otro documento
que hace la misma altura y una anchura equivalente al total
de todos los botones tal y como muestra la ilustración.
I
Figura 220. Para no modificar el documento anterior los hemos duplicado y
D ~ ~ ~ r n ePSD.
nto a continuación hemos acoplado las capas que nos interesaban
colocando cada botón a la misma altura tal y como se muestra.
Webs con Photoshop
2. El documento ha sido colocado en la página como una imagen

activa con el fin de determinar las coordenadas de cada uno
de los mapas de imagen que responden a cada uno de los
botones que aparecen.
, ,-. .= v ,. . . E). .&o Figura 221.
, - 8 I . 8 ,
7
Visor de Microsofi
lnternet Explorer.
El documento ha sido colocado entre

las etiquetas <A> y </A> y con el atri-
buto lSMAPcon el fin de poder extraer
las coordenadas pertinentes. Para una
mayor facilidad hemos incluido un va-
lor 3 de borde y utilizado los valores
'
-- . ~-
1
,., :,
.
. -
,..l, , ..¡, , , ~ I ~ ~ , , ~ L, ' * ~
'' %
~p
YI*W
que nos proporcionan las rectas. LOS
aquí presentados son 0,Oque corres-
? .
9
ponde al ángulo superior izquier .
. - fe..I
- -,. j ...- ,..E a
7
,, .,. , ,, . . - , ,
do y 0,53 que corresponde al án- 1 /, 8, 8 ) .<
iriii:>sn<~-T< 'h7íl?mn:?ts
F!l(r.i?
gulo inferior izquierdo. Siguiendo
-
con los valores hemos seleccio-
,;7 S;,:
&/;&: i-';;7,p
6.. :>N, , , ,* ,Y ,;:.7.:*w:a,,
nado la forma rectangular dándo-
nos para LlST las coordenadas
0, 1, 150, 57. Para SHOP las co-
3
ordenadas 150, 1, 566, 57. Para
COMPLEMENTS las coordena-
das 290, 1, 566, 57y, por último,
para HOME PAGE las coordena-
.
das 566, 1, 788,57.Observe que
ciertas coordenadas se repiten en
A.3- LL , >- f* .-.+* ., .
varias áreas y otras en todas. Esto es
/.m,.,,...., ,.,.,,.,i.,l,
l:.,/,l, l,,l.~:r,I,, !m
as¡ porque hemos seguido el marco o
;P$~INsniui~
N
borde incluido en el vínculo tal y como
i . ! 3.,
$[K(;
.'. 7, ,Y, .
aparece en la ilustración superior para
incluir las coordenadas relativas a una
forma rectangular y no en forma de
polígono. En la ilustración de la izquier-
da mostramos cómo aparecen ya acti-
vos los mapas de imagen, en este caso
el que nos activa la página mmplemen-
tos cuando pulsamos el botón simula-
-- -- ,
, fuente en la página siguiente.
GBigo sobre html...

I La figura 22 1 inferior muestra la siguiente sintaxis:
<HTML> <HEAD>
< JITLE>mapas de imagen <ITITLE >
<IHEAD>
< BODY BGCOLOR= #CFC3B 1 >
<JABLE WIDTH=40% ALIGN=CENTER BORDER= 1
CELLPADDING=2 CELLSPACING=Z BGCOLOR=#FFFFFF>
<TR>
<TD ALIGN=CENTER> <IMG SCR=marco.jpg
LOWSCR=marcoZ.jpg WIDTH=425 HEIGHT= 142 > </TD>
</JR>
< JR>
<TD ALlGN =CENTER> <IMG SCR=moda I.jpg
LOWSCR=modo3.jpg WIDTH= 160 HEIGHT=24 1 > < / J D >
<ITR> <ITABLE>
<P>
<IMG SCR= barra.jpg ALT=barra de herramientas HEIGHT=5 7

WlDTH= 800 BORDER = O USEMAP = #barraheramientas >
cMAP NAME =barraherramientas>

CAREA SHAPE=RECT COORDS= O, 1, 150, 57
HREF=file:///E/moda/list.htm >
CAREA SHAPE=RECT COORDS= 150, 1, 290, 57
HREF=file:l/lElmodalshop. htm >
HREF=file:///E/moda/complements.htm>
HREF=file:lllElmodalhomepage.htm >
c/MAP>
Webs con Photochop
UNOS CUANTOS ESEMPLOS

El empleo de mapas de imagen y no de simples vínculos viene deterrni-
nado por las características del diseño. En según que casos resulta más práctico el
empleo de vínculos colocados aleatoriamente sobre la página, pero en según que
otros casos la distribución tal y como la deseamos se hace casi imposible. Es
entonces cuando resulta más práctico el uso de mapas de imagen donde la ubica-
ción de los elementos ha sido determinada en su diseño desde Photoshop.
-
- - t . -
L
:..,- G,-
J ....
..L.
. T
. .
,,..--+
.--;*-
-:
,
r'..<?.. '-:i. .A
;-.
:
,
-
--. :I-1. -..
--.-
,
-
- -
..'
1
Figura 222.
Avon para crear este diseño dinámico, presen-

tando los diferentes apartados o secciones a
las que se puede dirigir el navegante ha opta-
. -.
do por diseñarlos con un programa, que per-
fectamente podría ser Photoshop.Creando es-
ta especie de botones que al tiempo es texto,
.--...,- como puede comprobar resultan sencillos, ele-
,.. - .*".
.
., ,,,,.
.,.. * l.<~ll<ln_l.-.k.<...^.,
->.
..,,
,,
".*,d
- . -.- E & ~ z L - - ~ -- gantes y efectivos. Dando al mismo tiempo

dinamismo~a la página y claridad en la pre-
.> ..-. . ,.- ><
+,
d sentación, con los elementos necesarios. Cada
.?. :-?
<
.:. ... :-..A*, ' ..lb ,:, .. ...f ,. J
mapa de imagen según la importancia o rele-
--
vancia aparece en mayor o menor tamaño re-
presentado por un cuerpo mayor o menor en el
4
texto. También queda indicado por la diferen-
cia de color de las barras o líneas que subra-
. *. , yan el contenido. Incluso en el mapa de ima-
gen, lo más importante aparece remarcado me-
diante incrustación de una serie de elementos
. _....
visuales que responden a los objetos que ofre-
, ...
"
<-,.
l_._*.F.l_-,_
.... -_..-._.,._-
m__
-, .&". -..A " . . , - . . , , . - . -m" , --um,
m
&... ._,* a-
ce la empresa. Aunque aquí mostramos tres
-
at-rii -
mapas de imagen, son en realidad cuatro que
..-. . . ... ... . , -,
,,.: , .-t. . 2- - 2 . .? ,.Y -2. :
: . .,
-* :: aparecen delimitados tres de ellos bajo una
-
:.- ,.:<
forma rectangular y uno bajo una forma poligo-
- - . -,-.- - ..-<.-..
l
-
-- --.. --- --
8
- -
.,=, - -
nal tal y como comprobamos. Las formas deli-

mitadas entran dentro de lo que es un solo do-
cumento que las engloba, facilitando el diseño
gráfico de la página. Vemos, pues, que en está
página el diseño se ha regido por la incrusta-
. > ción de mapas de imagen. Esto es muy impor-
tante tenerlo en cuenta desde el inicio y la pre-
C.-'ci-lirii-i,.*p..ICII---,--4~.-
paración de los elementos gráficos, ya que
.,.-,.. ..,-,-= ....,. HTML marca en cierto modo la preparación de
-
#s.-- --
los elementos gráficos que han de aparecer.
Cada día resulta más frecuente ver en la Web páginas en que aparecen
animaciones, aunque éstas sean muy limitadas en recursos y tamaño, cada vez
Gtán más mejoradas. Esto es debido a que la gran mayoría de navegantes disponen
de módems más rápidos por lo que la visualización general resulta ser más rápida,
esperemos que pronto se aumente el ancho de banda para facilitar la tarea a los
diseñadores y gratificar a los navegantes con excelentes diseños. Pero de momento
debemos recordar que las velocidades de transferencia de información rondan
valores 10 a 50 Kbpor segundo y que con los módems de 33,6 bps pueden trans-
ferir a velocidades aproximadas de 3,6 Kb por segundo.
En la actualidad ciertos programas trabajan con transferencias y

reproducciones sincronizadas y a tiempo real con el fin de evitar las esperas que
causan las animaciones normales que como es sabido no pueden visualizarse
hasta que el archivo no ha sido cargado en su totalidad, no obstante, es difícil que
estos programas lleguen a implantarse pues la transferencia de información en la
red funciona por envio de paquetes de información y su transmisión es asincrónica
como indicamos en el primer capítulo de este libro. Este hecho hace que la
visualización de las animaciones se presente con constantes saltos y parpadeos.
Webs con Photoshop
...
I nota
En la actualidad hay en el mercado módems a 56,Obps, no obstante,
l
la velocidad máxima a la que se puede conectar es de 33,6 bps desde Infovía,
lo cual es una gran desventaja para gran parte de usuarios y en general para
todos los navegantes.
PROCEDENCIA LAS ANIMACIONES

Las animaciones pueden proceder de fuentes muy diversas. Así, encon-
tramos las creadas con QuickTime que aunque tiene su origen en la creación de
efectos para productos multimedia del entorno Macintosh, posteriormente ha
ampliado su influencia a Windows. Este programa es igualmente empleado en la
creación de efectos multimedia para Webs en gran mediada debido a que es un
formato soportado por un número elevado de herramientas multimedia al tiempo
que procura características estándares de reproducción, de interface, de compre-
& sión y descompresión en plataformas distintas.
Si se dispone del programa Director en el entorno Windows o Macintosh

es posible crear animaciones Shockware. Ya sabe que este programa es una de
las herramientas de creación multimedia más importantes del mercado que le
permiten incluir interesantes efectos animados basados en capas, aceleración o
desaceleración, técnicas de intercalación o grabación en tiempo real o por pasos
entre lo más relevante. Los programas más importantes para la creación de pági-
nas Web disponen de comandos y cuadros de diálogo en los cuales confeccionar
animaciones Java o JavaSchpt. Entre los más profesionales encontramos Hotdog
que facilita enormemente dicha tarea, sobre todo si se trata de animaciones de
texto aunque no hay que menospreciar las animaciones con elementos gráficos
de 24 y 32 bits. Estos programas simplifican la tarea creándolas ellos automática-
mente, usted simplemente tiene que indicar las características visuales. Aunque
es una excelente herramienta conviene comentar que si trabaja con applets de
Java éstos son presentados con mayor lentitud en el browser, debido a que han de
ser interpretados por lo que se ha de realizar una conversión.
Diseñando animaciones 337
Además de las animaciones comentadas hasta el momento, nos encontra-

mos con los GZFs animados. Para crear una animación de este tipo requerimos
de un programa ensamblador, es decir, un programa que nos una cada una de las
imágenes que configuran la animación, aunque a diferencia de los anteriores con
los cuales podemos crear una animación con formato JPEG o GZF y otros, con
los programas para la creación de GIFs animados solamente es posible crear las
animaciones con documentos indexados con las ventajas y desventajas que el
empleo de cada uno de estos formatos acarrea. La elección dependerá de las
características del proyecto. En el mercado hay un amplio surtido de programas
que facilitan la tarea de ensamblaje de documentos, por ejemplo Cel Assembler o
GZF Movie Gear si trabaja con Windows o Gipuilder si trabaja con Macintosh,
entre otros.
CONCEPTOS
Dependiendo de las características de la animación el procedimiento para
su elaboración puede tomar directrices bien diversas. Aunque se dan varios pro-
cesos como pueden ser animaciones por acetatos, las basadas en cuadros, las
animaciones fundamentadas en trayectorias de movimiento y la animación de
personajes o figuras no todas ellas pueden obtenerse trabajando con Photoshop
y conjuntamente con programas para la creación de GZFs animados, que es lo
que aquí tratamos. Por ejemplo una animación basada en acetatos que es uno de
los procesos clásicos en la animación no puede desarrollarse en programas como
el issembler o HotDog, puesto que este tipo de animación se crea partiendo de
un fondo inmóvil sobre el cual se van superponiendo en capas progresivas los
diferentes cambios que se introducen. Este proceso lo llevamos a cabo, en cierto
modo desde Photoshop, durante la creación reutilizando los fondos en los distin-
tos cuadros que preparamos para producir la animación. Así una vez diseñados
los frames necesarios procedemos a ensamblarlos en uno de estos programas.
Normalmente este tipo de software genera animaciones empleando la técnica
basada en cuadros, también denominada animación $!ir>-book,es decir, frames
que se suceden a tal velocidad que producen la sensación de movimiento.
Resulta obvio por lo dicho hasta el momento que la animación basada en

cuadros, contrariamente a nuestros requerimientos, produce documentos de ma-
yor tamaño ya que es necesario desplegar toda la imagen, si cabe, en todos los
frames y no simplemente los cambios realizados en zonas parciales del cuadro.
Este hecho es importante tenerlo en consideración ya que al tamaño físico del

documento o documentos hay que añadir los frames que son necesarios para
crear la ilusión de movimiento que por lo general oscilan entre los 10 y 15 cua-
dros por segundo, por lo que será necesaria una adecuada optimización de la
imagen en aspectos como su tamaño físico y de archivo, restringiendo los colores
cuanto sea necesario y posible.
Ootn ...
Los programas que admiten la creación de animaciones mediante
JcnraScript posibilitan el uso de otros formatos como JPEG, por ejemplo
HotDog, del mismo modo que ciertos programas QuickTime como Picture
Viewer. Otros como Premiere o Director permiten un gran número de
formatos, trabajar con imágenes de 24 bits y otras técnicas de animación.
Consejo ...
Aunque el número de cuadros requeridos en las animaciones norma-
les se amplía a los 24 Fames por segundo. las animaciones para Web
requieren de un número más restringido y aunque se ha comentado que con
10 o 15 cuadros los resultados son buenos dependiendo de las caracterís-
ticas del proyecto, pruebe con un número menor, piense que con 5 cuadros,
según sea el proyecto el resultado puede ser realmente aceptable.
En las animaciones basadas en la trayectoria de movimiento se procede

a mostrar un objeto o sujeto en movimiento, esto implica que en muchos casos se
produzcan simultáneamente dos movimientos el direccional y el realizado por el
objeto o sujeto durante el desplazamiento, por ejemplo una hormiga que mueve
las patas y las antenas al tiempo que se desplaza. Cuando el movimiento se res-
tringe exclusivamente al movimiento interno de un objeto o sujeto éste es deno-
minado sprite. Ambos tipos de animaciones utilizan una técnica de creación por
capas, por lo que el escenario y el resto de formas incluidas que permanecen
inmóviles sirven como fondo para todos los frames. El proceso creativo puede
ser reproducido en Photoshop incluyendo en cada cuadro el fondo común que
aparece en cada frame de éste modo conseguimos producir dichos efectos y res-
tringirlo a los límites que nos marca la creación de animaciones GIF. Lógica-
mente la creación de trayectorias implica una dirección a seguir por el objeto o
sujeto, cuando éstas siguen una dirección curva se las denorninasplines. En estas
últimas especialmente se requiere marcar la trayectoria del objeto o sujeto, pues-
to que toman una dirección curva e incluso irregular a diferencia de las animacio-
nes basadas en trayectorias que toman una dirección recta. Para ello empleare-
mos las herramientas para la creación trazados que nos permitan determinar,
con las líneas dibujadas, la dirección que tomará el objeto y por la cual desplaza-
remos el objeto para que su movimiento sea lo más natural posible.
En estos casos generalmente se trata de formas creadas en programas

como Phtoshop, es decir, programas que abordan documentos en mapas de bits.
Éstas pueden ser dibujadas con las herramientas de trazados o bien proceder de
formas extraidas de una imagen, la cual vamos distorsionando en cada uno de los
frames o texto incorporado que transformamos al tiempo que es desplazado. Exis-
ten muchas más posibilidades, tal y como mostraremos más adelante.
A nota ... I
La animación basada en sprites tiene su equivalente en la anima-
ción basada en vectores, ésta a diferencia de la primera trabaja con imá-
genes creadas con programa vectorialescomo Illustrator, Freehand o Corel
y como tales pueden ser muy útiles para según el tipo de efectos a crear.
Consejo ...
l
Cuando las animaciones son repetitivas lo más recomendable es des-
componerla en ciclos sencillos con un número reducido de frames. Lo impor-
tante en estos casos es que seleccione los mejores puntos de registro.
Webs con Photoshop
PREPARANDO ANIMACIONES GIF

CON PHOTOSHOP
En sí las animaciones con Photoshop no pueden llevarse a cabo, aunque
sí podemos elaborar las imágenes que hayan de ser tratadas para su incorporación
en una animación bajo el formato gráfico exigido por el programa que utilice
para tal menester y que al mismo tiempo esté incluido en Photoshop. Comproba-
mos que los formatos a emplear pueden ser varios, no obstante, en el presente
apartado trataremos documentos GZF89a por ser éste con el que obtenemos me-
jores resultados, en gran medida debido a su capacidad para tratar las zonas trans-
parentes de las imágenes, aunque todo lo dicho en este apartado como en otros de
este mismo capítulo puede ser extrapolado para la creación de animaciones con
otros forrnatos siempre y cuando excluyamos lo referente a las características
exclusivas del formato GIF89a.
nota...
I
Es recomendable que relacione la información aportada en: Optimizar
la imagen para Internet, Formatos y compresión de archivos, Tratar
+
imágenes para la Web y Transparencias en imágenes para la Web.
Las animaciones más sencillas que podemos crear y encontrar en la Web

están constituidas por dos cuadros, por ejemplo el efecto de pulsar un botón.
Cuando hemos de trabajar con varias imágenes que han de crear el efecto de una
animación compleja, el primer paso a seguir es optimizar la paleta, hacer que el
fondo que es común a todos los frames ya aparezca reducido al número de colo-
res exigido, que en cada proyecto será distinto, ya que en muchos casos el fondo
consistirá en zonas transparentes que habrán de ser enmascaradas con el color de
fondo, la textura o lo que aparezca como fondo de la página Web. Para ello recu-
rrimos al comando Color indexado del submenú Modo o al comando
GIF89aExport del submenú Exportar. Si la totalidad del documento ha de ser
transfigurada, lo más conveniente es indexar el documento original e ir adaptan-
do la paleta del resto de los documentos o cuadros que conformarán la anima-
ción. Si se trata de imágenes que no tienen relación que son colocadas para
visualizar aspectos distintos, optirnizaremos en la medida de lo posible los colo-

res contenidos en cada documento a fin de reducirlos a la paleta general de la
página, tal y como queda expresado en los capítulos mencionados.
Los intrumentos empleados para producir animaciones son muy diver-

sos, el empleo de unos u otros dependerá de las características de cada anima-
ción. Veamos unos cuantos ejemplos ilustrativos en los cuales se determina el
proceso empleado en cada uno de ellos.
Capas\ Trazados y Canales \ 1 b' Figura 223.
I Paleta Capas y
documentos PSD.
Aquí se muestra una ani-

'
mación constituida por dos
frames. Cada imagen ha
sido tratada en un mismo
documento tal y corno apa-
rece visualizado en la pale-
ta Capas. Las transforma-
rias capas duplicadas en las cuales se han dado diferentes ti-
tra. Una vez finalizadas dichos cambios hemos procedido a sepa-

rar las dos capas en dos documentos distintos y de nuevo han
transformaciones de color. El siguiente paso ha consistido en crear

una máscara en la parte externa difuminando los bordes mediante el filtro Desenfo-
que gaussiano. De este modo cuando incluyamos en las zonas transparentes el color
sólido, el que se incluya en el documento aparecerá plenamente fusionado con el color
sólido del fondo de la página Web. Por tratarse de un elemento de reducidas dimensio-
nes se ha indexado dando una profundidad de color de 4 bits por píxel establecien-
do unos tamaños de archivo de 2,7 Kb, lo cual es muy aceptable.
1 capasY Trazadas Y Canales \ 1 b] Figura 224.

ltlnrrnal A Opacidad 100%
A Paleta Capas.
r Prerervar trans~arencir
Para realizar la siguiente animación se ha par-

tido de un marco creado con anterioridad. Éste
nos servirá como fondo sobre el cual realizar
1 11 1 1 la animación, la cual consiste en presentar una
exposición temporal. Para ello hemos seleccionado en el cuadro de diálogo Texto
Staccato222BT un tamaño de 40 puntos y el estilo negrita, y asíen todos los casos.
- -- - - m( Figura 225.
Paleta Capas y documentos PSD.
[ capas\ Trazadas Y Canales \ 1 b:

m 100%
pacidad:
a
En la letra original hemos aplicado el filtro

Relieve y Efectos de iluminación por este
orden. En la paleta Capas que aparece, los
cuadros están finalizados, es decir, en cada
capa en que se han realizado cambios en
el texto se ha combinado cada una de ellas
con copias del fondo o marco quedando tal
y como aparecen. Éstas serán duplicadas
en documentos nuevos y en cada una rea-
lizaremos un procedo de indexación al
- A
- --- - tiempo que las converiirmos en formato
I GIF mediante el comando GIF89aExpor-t.
1 - . . . 0 I . .,
-
. Para producir un efecto de presentación
más suave hemos creado cuadros interme-
dios a los que se han aplicado en el texto
un efecto de distorsión con el filtro Rizo
-.. . - .- haciéndolo coincidente con el nuevo texto
que ha de aparecer, es decir, si primero
- ---I hemos de introducir el cuadro 1 que pre-
senta el texto Exposición temporal, el cuadro 2 presenta el mismo texto aunque la

letra aparece distorsionada. Para enlazarlo con el siguiente texto Enmanuel Ponce
se ha procedido a presentarlo en primer lugar con la letra igualmente deformada tal y
como la presenta el cuadro 3, siendo legible en el cuadro 4. Vemos que con 4 frames
creados ya podemos realizar una animación sencilla pero efectiva, aunque nos que-
dará por intercalar entre el primer cuadro y el último un nuevo frame que responde al
cuadro 2 con el fin de que el proceso de presentación sea homogéneo, es decir que
siga el mismo ciclo de distorsión-presentaciónsecuencialmente. En cualquierprogra-
ma de ensamblaje de GlFs animados simplemente habremos de colocar los frames
según el orden que hayamos establecido, que en este caso es como muestran las
ilustraciones, y determinar el tiempo de presentación continua del ciclo.
La etiqueta APPLET de Java para colocar

GIFs animados en una página HTMZ,
Los applets de Java son empleados básicamente para crear animacio-
nes, figuras, juegos u otros efectos interactivos entre texto e imágenes dentro de
las mismas páginas Webs. Los applets de Java son una vertiente de programas
Java que se cargan en la World Wide Web los cuales son ejecutados en browsers
que han sido habilitados para tal fin. Para incluir un applet en una página HTML,
éste ha de ser compilado por medio de un programa Java y haber sido escrito
anteriormente en el lenguaje o código Java. El applet insertado en la página HTML
resultante simplemente ha de ser incrustado en un servidor Web.
Al tratarse de un lenguaje ajeno al código ASCII empleado en HTML

hemos de referencia10 de algún modo. Así encontramos que la etiqueta APPLET
nos permite incluir documentos gráficos para la visualización de animaciones en
páginas para la Web. Ésta ha de presentar el atributo CODE el cual define el
nombre de la aplicación a ejecutar, en otras palabras, determina el nombre del
fichero que contiene la subclase de Applet compilada del applet, por ejemplo:
<APPLET CODE=dogamin>. Aunque si lo que tenemos que especificar es el
URL del programa que contiene el programa Java, hemos de colocar el atributo
CODEBASE, su sintaxis es: <APPLET CODEBASE=URL>. Otro atributos
wlativos a la etiqueta y que deben ser incluidos son WIDTH y HEIGHT para
fijar la altura y anchura respectivamente del espacio necesario para la visualiza-
ción. Éstas necesariamente han de coincidir con el tamaño real de los gráficos, si
no es así aparece una parte de las imágenes, en el caso de que el tamaño de éstas
sea mayor. El valor ha de especificarse en píxeles, por ejemplo: <APPLET
CODE=dogamin WIDTH=SO HEIGHT=SO>. También pueden incluirse valo-
res de margen entre la imagen animada y los elementos circundantes mediante
VSPACE y HSPACE, siendo precisados por píxeles, el primero determina el
margen en vertical mientras que el segundo el margen en horizontal, por ejemplo:
<APPLET CODE=dogamin VSPACE=S HSPACE=S>. Por último es posible
precisar la alineación de la presentación del applet con el atributo ALIGN, las
opciones posibles son; LEFT, para colocarlo a la derecha; RIGHT, nos los ubi-
ca a la izquierda; TOP, para situarlo en la parte superior; MIDDLE, si queremos
colocarlo en el centro y BOTTOM, para que aparezca en la parte inferior. Ésta
última opción es la que se da por defecto si no se incluye ningún valor. Con todos
estos atributos es difícil que las animaciones no aparezcan según sus deseos.
Para que la animación sea ejecutada, además hemos de emplear la eti-

queta PARAM la cual indica los valores relativos a cada uno de los parámetros
incluidos. No obstante, ésta por si sola no funciona sino que han de estar inclui-
dos los atributosNAME y VALUE para definir con precisión el parámetro applet,
en el primer caso y el valor del parámetro applet, en el segundo, presentándose
según el ejemplo: <PARAM NAME=move VALUE=30>. NAME presenta un
gran número de parámetros entre los más importantes está BG, que se refiere al
color; PAUSE, que se refiere al tiempo de espera entre la presentación de un
fotograma o cuadro y el siguiente; IMAGELIST, el cual determina la lista de
imágenes que configuran la animación o MOVE, para referencia el tiempo de la
secuencia. Cada uno de estos parámetros son definidos con precisión en VALUE
especificando, como ya se ha dicho, el valor.
---*
C L--
-" -. ,.---- J
i- .-r
..-..-*--
a d
-
3
-. - --
.-*V : ' - Figura 226.
Visores de Microsoft lnternet
1
--
' %-2
En la figura 219 de la página 331 aparece una ima-
.S,>riri#sc.1 wri .,,.,.,,,,,,,, gen ubicada en la parte inferior, ésta ha sido susti-
tuida por una secuencia de imágenes que en SI no
-
1 FwSI muestran una ejecución o movimiento de un objeto
LA4..
. ..
,
.
-
v.
*.- -+
.
J
--
- .1 \
.i- +--.- .'
e..,.
- --
o sujeto sino más bien vistas de distintos lugares.
Son cuadros o fotogramas sin conexión alguna que
en este caso tienen la intención de mostrar panorá-
micas de lugares y personajes exóticos al tiempo
que captan la atención del navegante.
La secuencia de imágenes, la finalidad de éstas,
está estrechamente relacionada con el texto aue
aparece a su izquierda, el cual es y sirve de ;le-
mento secundario de información relativo a lo que
en los fotogramas se presenta. Es un mensaje que
incita y promueve la necesidad de seguir disfrutan-
, do con lo que esta agencia ofrece y facilita, que es
I visualmenteagradable y económicamenteinteresan-
. ,.-. --
,.- ,,
.
,+ .-.
---.
,
-... . .'
A
,
', ;.
-L .L --. I , -! te. Por ultimo comentar que si observa el código
m . . .
-7 fuente de la ~ á a i n aaue aparece a la derecha ob-
servará que una de las imágenes aparece dos ve-
ces tal y como explícita el parámetro IMAGELIST.
En BG hemos es~ecificadoel color del fondo,. .Dues
sino nos hubiera salido el gris que aparece por de-
m rxoticor
fecto. El tiempo de presentación se ha determinado
en 300 milisegundos. Bien ya podemos dar esta
página por finalizada por lo que no incluiremos una
2 sección de proyectos.

La figura 226 muestra la siguiente sintaxis:
<HTML> <HEAD>
<TITLE >zonas activas </TITLE>
<IHEAD >
<BODY BGCOLOR=6FC2F7 >
<P>
<TABLE> <TR> <TD ALIGN=CENTER> <IMG SCR=titulo.gif
ALT=agencia HSPACE=5 VSPACE=5 USEMAP= #agencia>
<MAP NAME=agencia>
CAREA SHAPE=POLY COORDS= 17, 13. 3 1, 105, 136. 86, 192,
67, 145, 1 1 HREF=agencia.htm> <IMAP>
<ITD> <TD ALlGN=CENTER> < A HREF=\agencia\imagen.html>
<IMG SCR=texto l.gif ALT=Tour Turistic VSPACE=5
HSPACE=S BORDER=O ISMAP> </A> <lTD> <ITR> <ITABLE>
<P> cHR> WIDHT= 100% SIZE= 15 ALIGN=CENTER
CLEAR=LEFT> < P >
c H I > <CENTER> <I> <B> <FONT COLOR=A51821 >Somos
el núrnero uno en el mundo en viajes exóticos
<ICENTER> <lI> </B> < / H 1 >
<P> <HR> WIDHT= 100% SIZE= 15 ALIGN=CENTER
CLEAR=LEFT> < P >
cAPPLET CODE=dogamin WIDTH= 14 1 HEIGHT=93
HSPACE= 1O ALIGN = LEFT>
<PARAM NAME =IMAGELIST VALUE = tropical.gifi

islasholidays.gif, tropical2 1.gif, islasholidays.gif>
<PARAM NAME=REGUSER VALUE=»» >
CPARAM NAME=SERIALID VALUE=CCEB>
<PARAM NAME=MOVE VALUE=O,O>
CPARAM NAME =PAUSE VALUE =300>
cPARAM NAME=BOUNCE VALUE =true>
cPARAM NAME=BG VALUE =#6FC2F7> <IAPPLET>
I
< I > <B> c FONT SIZE=5 COLOR= FFFFFF>Compruébelo

encontrardtaacute; el lugar que tanto ha soñado<ll> </B>
< P > <HR>
<IBODY> < I H T M L >

El empleo de animaciones en la Web es muy variado y las formas y estra-
tegias que se siguen son muy diversas. Veamos aquí un ejemplo representativo de
cómo y qué funciones puede cumplir una secuencia.
'. >*,
<. ..c. -- 11 -A
m Figura 214.
- .. Visores de Microsoft lnternet Explorer.
.r.: <
-- "
. a
-- -
- - - - - -
Softmaniapresenta una animación que consis-

te en bajar y subir consecutivamenteuna caja,
la cual aparece enmarcada en la ilustración.
Aquí se presenta una síntesis aunque está
constituida por 8 cuadros englobados en un
ciclo o secuencia que se repite sin cesar. Ve-
mos que en el fondo aparece una frase que
posiblemente haga referencia a la caja, en es-
J
. ,-- .- -. ,- ,.
& I d . I m
pecial al precio que aparece que es bajo. Sprin tiene muchas acepciones entre ellas
saltar, explotar, estallar, brincar, con lo que posiblemente el movimiento de la caja,
hacia arriba y hacia abajo y el objeto en sí, estén implícitamente referenciados en la
frase a modo del siguiente significado: precios bajos a punto de estallar y... estallaron.
Para indicar que es al mismo tiempo un vínculo, se ha incluido la frase Pulsar aquí.
<AREA>(etiqueta), 325,330
ARPA, 17
I
ATM,22
<A> (etiqueta), 144,259,260,261,
300,311
ABSBOTTOM, 306
ABSMIDDLE, 306
ACO (extensión), 272 <B> (etiqueta), 305
ACT (extensión), 272 Barra de herramientas (cómo
Adam7 (opción), 82 diseñarla), 265
Adaptable (paleta), 55,60 <BASEFONT>(etiqueta), 311
Ajustar (submenú), 119 BASELINE, 306
Ajuste (comandos) 282,288 BG (opción), 344
ALIGN (atributo), 127,206, BGCOLOR (atributo), 107,128,
212,214,230,255,299,305,343 152,205,218
ALL, 306 Bit, 35
ALT (atributo), 101,260,300 Bitmaps, 36
Animaciones GIF, 272,339 Bytes, 35
<APPLET> (etiqueta), 343 BACKGROUND (atributo),
Applets (de Java), 336,343 120,138,152
Webs con Photoshop
<BLINK> (etiqueta), 311 COORDS (atributo), 325,328,

BLOCKQUOTE (atributo), 330
257,259 Copiar (comando), 110
<BODY> (etiqueta), 108 Corel (programa), 339
BORDER (atributo), 100,128, Corrección de color (comandos),
133,134,143,205,260,300 288
BORDERCOLOR (atributo), Cuentagotas (herramienta), 52,54
205,218
BORDERCOLORDARK
(atributo), 205,218
BORDERCOLORLIGHT
(atributo), 205,218 <DD> (etiqueta), 253
BOTTOM, 306,343 DEFAULT, 325
<BR> (etiqueta), 216,257,259, Definir motivo (opción), 110, 150
306 Deflacción, 64
Degradado (herramienta), 129
Descarga progresiva, 86
Director (programa), 336,338
Distorsión (filtros), 281
Calar (opción), 111 Distorsionar (submenú), 291
Canal alfa, 52,147,296 <DT> (etiqueta), 253
Canal de textura, 203 Duotono, 92
Capacidad de canal, 46
Cel Assembler (programa), 337
CELLPADDING (atributo),
100, 128,205
CELLSPACING (atributo), Efectos de iluminación (estilos),
100, 128,205 203
CENTER, 305,306 Efecto distorsión de retardo, 46
<CENTER>(etiqueta), 306 Esponja (herramienta), 288
CIRCLE, 325 Ethernet, 21
CLASS (atributo), 233 Exacta (paleta), 55,60
CLEAR (atributo), 233,306
CODE (atributo), 343
CODEBASE (atributo), 343
COLOR (atributo), 305
Color frontal, 276
FACE (atributo), 305
COLS (atributo), 133,142
Firewall, 24
COLSPAN (atributo), 221
Flip-book, 337
Compresión LZ77,64
Fondo múltiple (definición), 139,
Compresión LZW, 57
141
Contornear (comando), 282
Índice analítico 349
cFONT> (etiqueta), 305

cFRAME>(etiqueta), 132,141,
142 cI> (etiqueta), 305
cFRAMEBORDER>(etiqueta),
Illustrator (programa), 339
134,143 Imágenes activas, 322
cFRAMETSET> (etiqueta), 133,
cIMG> (etiqueta), 99,222,230,
141,142 255,259,260,299,306,322,326
Freehand (programa), 339 IMAGELIST (opción), 344
FTP, 26,27 Internet, 17,19,23
Intranet, 18,23
IP, 18,19
ISMAP (atributo), 260,300,322,
326,328,330
Gama de colores (comando), 297
GIF (formato), 33,49,50,131,
139,160,225, 272,337
GifBuilder, 337
GIF Movie Gear, 337
Java, 336
GIFs animados, 337,342
JavaScript, 336,338
GIF89a (formato), 51,69,272,340
JPEG (formato), 33,49,61,63,
GIF89aExport (comando), 145,
225,271,337,338
146,272,340
JPEG (compresión), 62
Granulado (filtro), 115
JUSTIFY, 305
Grietas (filtro), 115
Kilobyte, 45
...
cH1 Hn> (etiqueta), 144,305
Halos (opción), 149
HEIGHT (atributo), 101,152,
255,299,343
Herramientas de selección, 167
Herramientas de trazados, 167 LAN, 18,19,20
HotDog (programa), 336,337,338 cLI> (etiqueta), 251
cHR> (etiqueta), 222,230 LEFT, 155,305,306,343
HREF (atributo), 144,261,300, cLH> (etiqueta), 251
311,323,327,330 LOWSCR (atributo), 260,300
HSPACE (atributo), 155,208,255,
300,343
HTTP, 26,27
Páginas de contenido (definición),

132,141
MAN, 21 Páginas de marcos (definición),
<MAP>(etiqueta), 325,326,330 132,141
Mapa de bits, 36,37 Paleta del sistema, 55,60
Mapa de imagen (definición), 139, Paletas (tipos), 60
141 PARAM, 344
Máscara de texto (herramienta), PAUSE (opción), 344
280 Pegar (comando), 110
<MENU> (etiqueta), 252 Picture Viewer (programa), 338
MIDDLE, 306,343 Píxel, 34
MIME, 27 PNG, 33,49,163
Módems, 45 POLY, 325
Modificar (submenú), 167 Posterizar, 94
Modo de capa, 288 Premiere (programa), 338
Modo de color, 288 Profundidad de color, 56
MOVE (opción), 344 Profundidad de píxeles, 34
Progresiva, 63
Propiedades (de la luz), 204
NAME (atributo), 134, 143,267,

325,344
NOSHADE (atributo), 231
<NOFUME> (etiqueta), 144
Nubes (filtro), 113
Nubes de diferencia (filtro), 113
RECT, 325
Rellenar (comando), 281,282
Resolución, 37
Octeto, 35 Resolución de bits, 34
<OL> (etiqueta), 251,253 Resolución del monitor, 43
OSI, 20 RIGHT, 155,305,306,343
ROWS (atributo), 133,142
ROWSPAN (atributo), 221
Retales (filtro), 115
Routers, 20
<P> (etiqueta), 144,257,259,305, RVA (modo), 273,274
306
Índice analítico
TOP, 306,343
<TR> (etiqueta), 127,208,210
SCR (atributo), 132,222,230, Tramados (tipos), 60
260,299,300 Transformación libre (comando),
Señal analógica, 45 291
SHAPE (atributo), 325,330 Transformar (submenú), 291
Shockware (programa), 336 Transparencia de capa, 52
SIZE (atributo), 230,305,311 TYPE (atributo), 253
SMTP, 26,27
SNMP, 26
Sobreexponer (herramienta),
288
SPACING (atributo), 133,134, <U> (etiqueta), 305
142 UDP, 26
Splines, 339 <UL> (etiqueta), 251,257,259
START (atributo), 254 Uniforme (paleta), 56,60
Suavizado (Opción), 54,149 URL, 132,230,255,260,299,311,
<SUB> (etiqueta), 305 327
Subexponer (herramienta), USEMAP (atributo), 326,330
288
<SUP> (etiqueta), 305
VALIGN (atributo), 127,214,

255,299
VALUE (atributo), 254,344
Tabla de colores (comando), 156 Varita (herramienta), 111
<TABLE> (etiqueta), 126,166, Vidriera (filtro), 115
204,205 Virajes, 92
Tampón (herramienta), 110,151 VSPACE (atributo), 155,208,
TCP, 18,19 255,300,343
TCPDP (protocolo), 17,19,26
<TD> (etiqueta), 127,208,210
TELNET, 26
Teselas (filtro), 115
Texto (herramienta), 276 WAN, 19,21
TEXTTOP, 306 Web (paleta), 55,60
Texturizar (filtro), 115 WIDTH (atributo), 101,127,152,
<TH> (etiqueta), 210 205,230,255,256,299,343
Tipos de luz, 204
TITLE (atributo), 267

Diseñar Webs Con Photoshop

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Diseñar Webs Con Photoshop

Uploaded by

Copyright:

Available Formats

GRACIAS A TODOS LOS LECTORES QUE CONF~AN

EN LO QUE LES APORTARÁ EL LIBRO.

La opción Entrelazado ...................................................... 59

.Diseñar texturas para fondos ..................................................... 113

.Otros filtros otras texturas............................................. 117

.Definir la etiqueta BORDER

Definir las etiquetas FRAMESET y FRAME

ENMASCARAR LAS ZONAS TRANSPARENTES.............................160

Rellenar y producir efectos en la barra ....................................225

.La etiqueta HR para incorporar barras horizontales................230

.Rellenar y producir efectos

Más sobre relieve e iluminación............................................... 296

MORFOLOG~ADEL TEXTO GRÁFICO EN HTML.............................. 299

Esto hace que los códigos infracornunicativos gráficos de representación:

A la hora de elaborar una página Web siempre habrán de tenerse en

Como es lógico, no podemos explicar aspectos ajenos al programa que

Seguiremos por conocer las características que contiene un documento

Siguiendo con tipos de conversiones nos centraremos en los tipos de

La parte central del libro desarrolla el proceso y técnicas de creación de

Dentro de este último bloque incluimos la elaboración de documentos

Por último, comentar que el libro desarrolla de un modo progresivo en

Photoshop no cuenta con ningún menú o grupo de comandos que permitan

La programación de documentos HTML puede parecer a simple vista

Si ya ha trabajado en desarrollos de webs el libro le reportará un mayor

Esta fantástica herramienta comunicativa tiene su origen en la tecnología

necesidad de conocer o depender de un conocimiento previo de una marca en

Protocolo de transporte TCP

Protocolo de acceso a la red IP

F~SICO u.~mmmmmmmm~.mmmmm..I F~SICO

COMUNICACIÓN DE DATOS CON TCP/IP

El Transporte responde al servicio de comunicaciones que ha de asegurar

Cuando, como en nuestro caso, enviando información en Internet, los

hace necesario un protocolo transporte y de acceso a la red específico, en este

Por otro lado, es importante comprender que los datos transmitidos en

El módulo Física representa el interface físico utilizado entre el dispositivo

Existen otro tipo de arquitecturas de comunicación de datos, como puede

DIFERENCIAS ENTRE LAS REDES LAN,

Las redes LAN y MAN comparten las características de ser redes de

Esquema simplificado de red de área ampli,

Precisamente con el fin de solventar este importante problema, durante

Aunque el origen de Intemet surge como necesidad de interconectar varias

ruta que puedan seguir los datos transmitidos es imposible de determinar. En

c) Modelo Anillo d) Modelo Estrella

Ahora veamos mediante un ejemplo gráfico un esquema que represente

ESQUEMA MORFOLÓGICO DE INTERNET INCLUYENDO

Usuario con conexión TCPnP

Red LAN con

Cuando trabajamos con los protocolos TCP/IP utilizamos otros protocolos

Los más importantes y empleados, que tienen su origen y fueron diseñados

El envío de correo electrónico multimedia en Internet combina los

El protocolo de transferencia de ficheros o FTP se utiliza para enviar

El uso más común de este protocolo es la transmisión de información de

ANONYMOUS FTP (FTP anónimo)

ASSIGNED NUMBERS (números asignados)

AUTONOMOUS SYSTEM (sistema autónomo)

BACKBONE NETWORK (red de columna vertebral de la red)

BASTION HOST (anfitrión baluarte)

CLASS OF ADRESS (clase de dirección)

FIREWALL (muro de seguridad)

FLOW CONTROL (control de flujo)

HIERARCHICAL ROUTING (ruteo jerárquico)

IP DATAGRAM (datagrama IP)

PARA SABER MÁs