You are on page 1of 348

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 BSICOS EN LA COMUNICACI~NDE DATOS


17
COMLINICACINDE DATOS CON TCPIIP.................................... 19
DIFERENCIAS ENTRE LAS REDES LAN.
REDES MAN Y REDES WAN ....................................................
20
23
INTERNET E INTRANET....................................................................
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
Assigned numbers............................................................. 29
.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
.Fragmentation.................................................................. 31
.Hierarchical routing............................................................ 31
ICMP................................................................................ 31
Internet............................................................................. 31
.IP Datagram.................................................................... 32
.Packet.............................................................................. 32
. Protocol............................................................................ 32
PARA SABER MAS........................................................................... -32
a

Captulo 2.

OPTlMlZAR LA IMAGEN PARA INTERNET..........................................33


LA IMAGEN DIGITAL...................................................................... -34
TAMAO DE IMAGEN Y RESOLUCIN
EN DOCUMENTOS PARA LA WEB...................................................... 37
TAMAO DE ARCHIVO EN DOCUMENTOS PARA LA WEB............... 44
RAPIDEZ DE TRANSMISIN EN LA RED
Y LA CALIDAD DE REPRESENTACI~N...............................................44

Captulo 3.

FORMATOS Y COMPRESIN DE ARCHIVO ........................................49


LQU FORMATO ELEGIR?............................................................. 50

ndice
ARCHIVO GIF............................................................................... 50
.GIF89a............................................................................. 51
Eleccin de paleta y compresin GIF................................... 55
La opcin Entrelazado ...................................................... 59
ARCHIVO JPEG........................................................................... 61
.Compresin JPEG y calidad de imagen............................... 62
-La opcin Progresiva........................................................63
ARCHIVO PNG ............................................................................ 64
.Compresin sin prdidas....................................................... 64
.La opcin Adam7.............................................................. 82
ANLISIS GLOBAL.......................................................................... 83
a

Capitulo 4.

TRATAR IMGENES PARA LA WEB ....................................................85


REDUCIR EL TAMAO DEL ARCHIVO.......................................... 86
.Proyectos ......................................................................... -86
REDUCCIN DE COLORES........................................................... 92
LINOS CUANTOS E. IEMPLOS......................................................... 96
IMGENES DE GRAN TAMAO................................................... 100

Bapftulo 5.

PREPARAR FONDOS Y TEXTURAS ...................................................103


FONDOS CON COLOR SLIDO ................................................... 105
.Definir el atributo BGCOLOR
para un fondo de color slido .................................................... 107
FONDOS TEXTURADOS............................................................... 108
Fusionar los motivos definidos ................................................. 109
.Disear texturas para fondos ..................................................... 113
.Crear efecto de nubes.................................................. 113
Submen Textura.......................................................... 114
.Otros filtros otras texturas............................................. 117
Realizar transformaciones ........................................................ 119
.Defiriir el atributo BACKGROUIVD
para un fondo texturado............................................................ 120
.Proyectos........................................................................ 121
FONDOS CON COLOR SLIDO Y TEXTURA A LA PAR................. 125
e

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 IMGENES .................................. 135
Imagemaps o vnculos como fondo......................................... 139
Definir las etiquetas FRAMESET y FRAME
para un fondo mltiple............................................................... 141
e

Capitulo 6.

TRANSPARENCIAS EN IMGENES PARA LA WEB.........................145


APLICAR UN COLOR SLIDO 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
ENMASCARAR LAS ZONAS TRANSPARENTES.............................160
TRAIVSPARENCIAS CON PNG......................................................... 163
UNOS CUANTOS EJEMPLOS....................................................... 164
a

Capitulo T

DISEAR 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
UNOS CUANTOS EJEMPLOS....................................................... 221
DISENAR BARRAS............................................................................ 222
Dibujar la forma ........................................................................ 222
Rellenar y producir efectos en la barra ....................................225
.La etiqueta HR para incorporar barras horizontales................230
UNOS CUANTOS EJEMPLOS....................................................... 233
DISEAR BOTOhlES Y S~MBOLOSPARA LISTAS..........................234
.Determinar la forma.................................................................. 235
e

ndice
.Rellenar y producir efectos
en los botones o vietas grficas.............................................. 237
.La etiqueta UL para crear listas desordenadas....................... 251
La etiqueta IMG para aadir
vietas grficas en las listas ....................................................... 251
La etiqueta IMG para agregar botones
y la etiqueta A para que sean vnculos..................................... 259
PROYECTOS ....................................................................................... 268
UNOS CUANTOS EJEMPLOS........................................................ 270

Capitulo 8.

EFECTOS EN EL TEXTO .....................................................................271


SUAVIZAMOS EL TEXTO? .............................................................. 273
COLOREARLO................................................................................. -276
EFECTOS ESPECIALES...................................................................... 281
.Tcnicas de manipulacin........................................................ 282
-Alterando el color...................................................................... 288
Tcnicas de distorsin y transformacin.................................. 291
Ms sobre relieve e iluminacin............................................... 296
MORFOLOG~ADEL TEXTO GRFICO EN HTML.............................. 299
EL TEXTO. ALGUNAS ETIQUETAS Y A-TRIBUTOS........................... 304
PROYECTOS ....................................................................................... 318
UNOS CUANTOS EJEMPLOS ........................................................ 320
a

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

10

Webs con Photoshop


CONCEPTOS BSICOS.....................................................................337
PREPARANDO ANIMACIONES GIF COI1 PHOTOSHOP.................340
La etiqueta APPLET de Java
para colocar GlFs animados en una pgina HTML..................343
UNOS CUANTOS EJEMPLOS ........................................................346

Apndice.

INDICE ANALITICO .............................................................................. 347

La implantacin del diseo de pginas Web en nuestros das se est


onvirtiendo en algo habitual y cotidiano. Dado que la comunicacin de
informacin por red, ya sea a nivel comercial, didctica, lucrativa, cultural o
informativa, es hoy por hoy uno de los medios que ms est proliferando. Es
lgico, pues este medio de comunicacin tiene la particularidad de almacenar un
cmulo casi infinito de informacin, pudiendo ser sta tan amplia e inmediata
como requiere nuestra sociedad.
Esto hace que los cdigos infracornunicativos grficos de representacin:
cdigos compositivos, cdigos fotogrficos, cdigos cromticos, cdigos verbales
y paralingsticos; los cdigos infracomunicativos antropolgicos culturales e,
incluso los cdigos que hacen referencia a la conexin y al montaje sean
extrapolados de los medios habituales donde han sido utilizados para incorporarlos
en la elaboracin y diseo de pginas Web. Si no fuese de este modo, ls pginas
Web podran convertirse en algo realmente aburrido y montono y, todas las
cualidades comunicativas que poseen, anteriormente mencionadas, no surtiran
efecto. Pues, siempre es importante utilizar los cdigos con los que se mueve una
cultura para que el mensaje y la informacin sean transmitidos plenamente.

Webs con Photoshop


A la hora de elaborar una pgina Web siempre habrn de tenerse en
consideracin los fines especficos de la misma, es decir, si es una pgina
publicitaria, los requerimientos no sern, posiblemente los mismos que si es una
pgina informativa y, como es lgico, el diseo utilizado para su confeccin puede
tener pocos nexos en comn. Ahora bien, lo que si tendrn en comn ser la
herramienta o herramientas con las cuales han sido diseados. En este caso el
medio que vamos a utilizar para el diseo de pginas 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 pginas Web, bajo un criterio ciertamente
profesional. Ahora bien, la confeccin de pginas Web puede diversificarse en
infinidad de aspectos, por lo que, habremos de recumr a otros programas con
fines especficos, como por ejemplo, la incorporacin de hojas de clculo en una
pgina. Resultar ms factible elaborarlas en un programa diseado para tal fin y,
a continuacin, incorporar el resto de elementos que compongan la pgina. No
obstante, en el captulo correspondiente expecificaremos los tipos de etiquetas
necesarias para incorporar estos elementos en una pgina.

Siguiendo los pasos del prrafo anterior aadiremos que cada vez es ms
habitual la incorporacin de efectos especiales de sonido en las pginas 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 pginas o en su
sitio Web.
Esperamos que una vez haya finalizado la lectura completa del libro cree
y programe sus mejores y ms profesionales pginas Web mediante este
indispensable programa para dicha tarea.

La ultima versin de Photoshop(4) est preparada para dar salida a


documentos que han de ser incorporados a pginas Web. Pero ya no tan slo esto,
sino que adems incorpora nuevas herramientas y actualiza otras tantas para
conseguir mediante este potente programa desde las ms simples imgenes a los
ms sofisticados diseos para la Web. De este modo, trataremos los aspectos ms
relevantes e importantes para la incorporacin de dichos documentos a la Web.
Como es lgico, no podemos explicar aspectos ajenos al programa que
estamos tratando. Sin embargo, si que nos adentraremos en la comprensin casi
necesaria de cmo se articula una pgina Web. Pero vayamos por partes,
empezaremos por conocer cmo funciona la World Wide Web, el hardware y el
software que se utiliza en Intemet, los protocolos empleados, centrndonos en el
grupo de protocolos TCPIP 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 caractersticas que contiene un documento
que ha de ser incrustado en una pgina Web, al mismo tiempo que aprender a
prepararlo y a discernir entre las diferentes posibilidades que se ofrecen, la ms

14

Webs con Photoshop


adecuada en cada caso segn las caractersticas del proyecto en cuestin que ha
de ser publicado en Internet. Es decir, la resoluciones con las que se trabaja en las
diferentes plataformas, reduccin de colores, el nmero de colores que puede
contener, cuntos colores nos conviene incluir segn el fin ltimo del documento
en la pgina, tipos de paletas que han de utilizarse o la armonizacin de la paleta
en la totalidad de documentos a incluir en la pgina. Y en relacin 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, conversin a color
indexado (8 bits), documentos de 8 bits en escala de grises, imgenes 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 ms popularizado; JPEG o JPG Joint Photographic Experts
Group, ms utilizado para la incorporacin de fotografas en la Web o, el nuevo
formato PNG Portable Network Graphics, orientado para la incrustacin de
grficos.
La parte central del libro desarrolla el proceso y tcnicas de creacin de
los diferentes componentes de una pgina Web. Es decir, la eleccin y diseo de
fondos, botones, marcos, la creacin de efectos especiales, texturas, efectos
tridimensionales o de iluminacin, as como la seleccin y confeccin de
tipografas especficas utilizadas como componente artstico, sin olvidar la vertiente
comunicativa. Con el mismo fin desarrollaremos la confeccin y diseo de pginas
webs creadas en su totalidad en Photoshop y analizaremos pginas de la Web que
muestren la gran variedad y diversidad de diseos que pueden lograrse. Todo ello
con proyectos continuos que iremos desarrollando captulo tras captulo.
Dentro de este ltimo bloque incluimos la elaboracin de documentos
para la creacin de animaciones, haciendo hincapi en las nociones bsicas de la
morfologa del montaje para la creacin de secuencias, por lo que se lleva a cabo
una breve introduccin en animacin bsica y en tcnicas de animacin. Por otro
lado, researemos los formatos ms adecuados para animaciones y la compresin
idnea para una animacin. Aunque existen una gran variedad de programas que
permiten crear animaciones como pueden ser Director, Premiere, Virtual Reality,
nos detendremos en la creacin de GIFs Animados que es para lo que mejor est
preparado Photoshop, adems de ser los documentos GIF los ms recurridos para
crear animaciones en la Web. Tambin comentaremos algunos de los programas
de ensamblaje de reconocido uso para montar las imgenes.

CSmo est estructurado el libro?


Por ltimo, comentar que el libro desarrolla de un modo progresivo en
complejidad y relacionndolo con los temas tratados, comentarios de cmo y con
qu etiquetas y atributos insertar los grficos creados en Photoshop, adems da
ideas para elaborar diseos especficos que produzcan en efectos ms sofisticados
y curiosos en nuestras pginas. En cada captulo se crea una relacin intuitiva y
objetiva al mismo tiempo entre el documento diseado 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 diseos
y pginas en su navegador.
Photoshop no cuenta con ningn 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 consideracin las
caractersticas de nuestros proyectos y seleccionar el editor HTML ms adecuado,
como ya detallaremos en el captulo correspondiente. Para que la comprensin
sea completa aunque no exhaustiva explicaremos qu es HTML y qu es lo que
puede realizar con este lenguaje para la creacin de una pgina Web. Adems
detallaremos la sintaxis que ha de utilizarse para su elaboracin, detenindonos
en mayor medida en las etiquetas que ms nos interesan, es decir, etiquetas para
incluir imgenes, para la creacin de marcos, para la creacin de tablas, para la
creacin de mapas de imagen y etiquetas para la creacin de enlaces, entre otros.
sin embargo, tambin sern mencionadas otras etiquetas HTML que no tienen
por qu utilizarse con documentos creados en Photoshop, pero que s pueden ser
de su inters para la creacin de sus pginas webs o de su sitio Web.
La programacin 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. Adems, una vez haya
confeccionado unos cuantos documentos podr utilizarlos como plantillas para la
elaboracin 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 preparacin de documentos en Photoshop para la Web, al
mismo tiempo descubrir nuevas maneras de disear pginas partiendo de un
mayor conocimiento en ciertos usos especficos de etiquetas HTML empleadas
inicialmente para otros fines, pero que aqu les descubriremos otros usos posibles.

La Web o la WorM Wie Web o Telaraa Global es un conjunto de


protocolos que se articulan para crear un telaraa mcindial de informacin. De tal
modo, que permite comunicar datos ordenados por grupos. Esta recopilacin de
datos ubicada en grandes ordenadores pertenecientes a entidades independientes
facilitan la bsqueda de informacin de temas bien diversos, al mismo tiempo
que permite comunicar informacin con ordenadores de otros ususarios. Este
novedoso aspecto de intercomunicacin tiene su origen en la CERN (Consejo
E~iropeode Investigacin Nuclear) que surgi bajo la necesidad de ciertos
cientficos de contrastar los datos de investigaciones relacionadas.
Esta fantstica herramienta comunicativa tiene su origen en la tecnologa
ARPA (Agencia de Proyectos de Investigacin Avanzada), la cual desarroll el
uso de redes para la comunicacin de datos. Con el tiempo los protocolos utilizados
para la transmisin de informacin en la red se han estandarizado en el llamado
protocolo TCP/ZP. Esta necesidad de estandarizacin surge bajo la necesidad de
articular la informacin 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 comunicacin 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 comunicacin de datos
entre ordenadores, adems 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 aadir, que el uso de los protocolos
TCP (Protocolo de Control de Transmisin) 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
tambin son publicadas pginas informativas, que nosotros denominamos pginas
Web, por lo que ser de inters tomarlas en consideracin.

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 cmo ha
de responder el ordenador cuando llega un mensaje, precisar cmo ha de actuar el
ordenador cuando advierte un error u otras anomalas as como la sintonizacin
de velocidades y la secuencializacin. Es decir, los protocolos, cualquier tipo de
protocolos, son un conjunto de reglas que gobiernan el intercambio de informacin
entre dos entidades, que podemos estructurar y articular bajo una sintaxis,
semntica y temporalizacin. Las entidades podemos identificarlas como los
programas de aplicacin utilizados por los usuarios, sistemas de gestin de bases
de datos, programas para la transferencia de ficheros o gestores de correo
electrnico, entre otros.

--

APLICACI~N8

TRANSPORTE

Protocolo de transporte

=nn1
Mensajes y rdenes para la transferencia
n

n n n n n n n n n n n n n n

Protocolo de transporte TCP

u m m m m m m nm m m m m m m m m m m m n

Mensajes del servicio de comunicaciones

APLICACIN

TRANSPORTE

Protocolo de acceso a la red IP

ACCESO A
LA RED
F~SICO

RED DE
COMUNICACIONES
u.~mmmmmmmm~.mmmmm..I

ACCESO A
LA RED

F~SICO

Comunicacin de datos
COMUNICACIN DE DATOS CON TCP/IP
Observe el esquema de la pgina 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
Aplicacin seran la transferencia de documentos o el correo electrnico. El mdulo
de la aplicacin 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 aplicacin. Observe que
este tipo de protocolo es utilizado por aplicaciones bien diversas, adems de los
dos ejemplos mencionados. Este motivo hace que el mdulo 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 estn activos, al mismo tiempo de preparados para la
transferencia de informacin. Por este motivo es el encargado de asegurar el envo
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 Transmisin) y ZP (Protocolo
Intemet).
2

El Acceso a la red est organizado por los protocolos de acceso a la red.


Esta lgica de interface de red se encarga del intercambio de informacin entre su
ordenador y la red en la cual est conectado. El ordenador emisor es el que debe
proporcionar a la red la direccin 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 estndares 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. Adems, los
sotfwares utilizados en la aplicacin y en el transporte funcionan, deben funcionar, con independencia del software utilizado para el acceso a la red e independientemente a la red a la que el ordenador est conectado.
Cuando, como en nuestro caso, enviando informacin en Internet, los
datos han de ser transmitidos en redes interconectadas, es decir, que los dos
dispositivos, el de salida y el de llegada, estn conectados a redes diferentes, se

Webs con Photoshop


hace necesario un protocolo transporte y de acceso a la red especfico, en este
caso el protocolo internet o ZP. Este protocolo se encarga de encaminar la
informacin por las diversas redes y routers hasta el destino final. Los ruteadores
o routers son dispositivos que conectan dos redes y cuya funcin prioritaria
consiste en retransmitir, los datos enviados desde la aplicacion de origen, de una
red a otra encaminando la informacin hasta llegar a la aplicacin 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 informacin, es decir, en el mismo orden y sin prdida
de informacin, dado que si no fuese de este modo los datos que pudiesen aparecer
en la aplicacin de destino prodran estar completamente modificados y por lo
tanto la informacin transmitida resultara irreconocible. Con el fin de que esto
no ocurra se somete, en nuestro caso, la informacin enviada al protocolo de
control de transmisin 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 mdulo Fsica representa el interface fsico utilizado entre el dispositivo


de salida, que podra ser por ejemplo nuestro ordenador y el medio de transmisin,
que sera la red. Este mdulo es el encargado de estructurar las caractersticas del
medio de transmisin, la velocidad de transmisin de los datos o la naturaleza de
las seales, entre otras cuestiones.
Existen otro tipo de arquitecturas de comunicacin de datos, como puede
ser la seguida por el modelo OSZ (Sistema Abierto de Interconexin).Sin embargo,
por no tener relacin 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 informacin en
edificios de oficinas, campus, almacenes, etc. Las redes LAN normalmente son
usadas y gestionadas por un nico organismo. Hay que aadir que este tipo de redes estn diseadas para cubrir distancias cortas, esto hace que la velocidad en la

Comunicacin de datos
comunicacin de datos sea mayor, operando a velocidades que van de diez rnillones de megabits por segundo a varios gigabits por segundo, aspecto a tener en
consideracin en la creacin de pginas 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 gestionadas por organismos, usuarios particulares y privados o pueden ser propiedad
y estar gestionadas por organismos pblicos. En este tipo de red las velocidades
de transmisin de datos son igualmente altas, alcanzando velocidades que pueden
oscilar de cientos de megabits a gigabits por segundo. Pudiendo ser utilizada
como medio de interconexin entre redes de rea local.
Las redes LAN y MAN comparten las caractersticas de ser redes de
difusin de paquetes (no contienen nodos de conmutacin intermedios), donde
cada estacin est conectada a un medio de transmisin que es compartido por
otras estaciones. Por lo que cuando se transmite informacin desde una estacin
la informacin es recibida y difundida al resto de estaciones conectadas.

Esquema simplificado de red de rea local o metropolitana

SISTEMA DE
TRANSMISI~N

Webs con Photoshop


Por su parte las redes WAN abarcan distancias geogrficas extensas, por
lo que requieren utilizar rutas de acceso pblico y circuitos proporcionados por
una entidad proveedora de servicios de telecomunicacin. Las velocidades de
transferencia de datos resultan significativamente ms lentas. La transmisin de
informacin en una WAN se realiza mediante una serie de dispositivos de
conmutacin interconectada. Los datos generados en cualquier dispositivo de salida
sern encaminados a travs de una ruta cruzando los nodos internos (se encargan
de proporcionar el servicio de conmutacin que transmitir los datos de nodo a
nodo) necesarios hasta llegar al dispositivo final.

Esquema simplificado de red de rea ampli,

Y--

Nodo de
conmutacin

Precisamente con el fin de solventar este importante problema, durante


los ltimos veinticinco aos se ha estado estudiando el mtodo que permitiese
reducir al mximo el tiempo de transmisin y el control de errores. Hasta el
momento el modelo ms eficaz es el Modo de Transferencia Asncrono o ATM,
el cual prodramos decir, que surge de la ampliacin de la conmutacin de circuitos
y de conmutacin de paquetes. Dicho de otro modo, las redes que trabajan con
conmutacin de circuitos establecen el camino a travs 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

Comunicacin de datos
estaciones. En cada nodo los datos son encaminados hasta la estacin de salida u
ordenador destino sin retencin ni prdida de tiempo. Cuando una red trabaja por
conmutacin de paquetes los datos se envan igualmente en secuencias a travs
de nodos. Sin embargo, en este caso los datos son retenidos en el nodo durante un
breve espacio de tiempo y, a continuacin, son enviados siguiendo algn camino
hasta la estacin destino. No obstante, este mtodo de transferencia fue mejorado
debido a que constantemente se sufran errores en la transmisin de datos. El
mtodo seguido consisti en eliminar la informacin redundante en cada paquete
enviado y el procesamiento asociado de la informacin lo que permiti un mayor
control de errores durante el envo, as como unas mayores velocidades de
transferencia. Este tipo de transmisin de datos se conoce con el nombre de
Retransmisin de tramas (Frame Relay). La diferencia sustancial entre la
Retransmisin 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 informacin se reduce sustancialmente.

INTERNET E INTRANET
Como ya se ha dicho el uso de los protocolos TCP (Protocolo de Control
de Transmisin) 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 informacin 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 trmino y otro estn
confusas, existen diferencias sustanciales entre uno y otro. La diferencia ms
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 informacin 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 araa que comunica
infinitos puntos de destino a travs de infinitos nodos intermedios, por lo que la

24

Webs con Photoshop


ruta que puedan seguir los datos transmitidos es imposible de determinar. En
cambio, la topologa de una Intranet es mucho ms variada y va en funcin de las
necesidades y la estructura de la empresa o institucin que la utilice. Los modelos
ms comunes son el modelo BusCfig. a ) , el modelorbol Cfig. b), el modelo Anillo
Cfis. c) y el modelo Estrella (fig. d) que como bien indican sus nombres su topologa
se asemeja a la forma mencionada. Como es lgico 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 pginas deseadas, a diferencia
del que encontramos en Internet.

a) Modelo Bus

b) Modelo Arbol

c) Modelo Anillo

d) Modelo Estrella

Comunicacin de datos
Ahora veamos mediante un ejemplo grfico un esquema que represente
el esquema de una WAN y el acceso a Internet de un usuario cualquiera, la conexin
a Internet de una red local y la conexin a Internet de una Intranet.

ESQUEMA MORFOLGICO DE INTERNET INCLUYENDO


LOS DIVERSOS TIPOS DE USUSARIOS Y REDES QUE SE
CONECTAN A LA RED DE REDES.
conexin normal
routers

.....
.

.................

conexin TCPnP

Usuario con conexin TCPnP

Nodo o router

Firewall filtro de
acceso a usuarios

Red LAN con


conexin TCPllP
Red LAN sin
conexin TCPllP

Webs con Photoshop

PROTOCOLOS IMPLEMENTIADQS
Cuando trabajamos con los protocolos TCP/IP utilizamos otros protocolos
para las aplicaciones en las cuales estemos trabajando. Lgicamente, podemos
conectar con otras aplicaciones a travs de otro protocolo de transporte que no
sea TCP, como por ejemplo a travs 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 gestin 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
comunicacin de datos para aplicaciones especficas.
Los ms importantes y empleados, que tienen su origen y fueron diseados
como estndares militares, son SMTP (Protocolo Simple de Transferencia de
correo), FTP (Protocolo de Transferencia de fiheros) y TELNET. Por otro
lado, el que ms 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 aplicacin cliente-servidor que requiera del uso de hipertextos para
la transaccin de datos.
7

MINE

HlTP

BGP

FTP

SMTP TELNET

SNMP

I
TCP

UDP

IP

ICMP

OSPF

Comunicacin d e datos
El envo de correo electrnico multimedia en Internet combina los
protocolos SMTP (Protocolo Simple de Transferencia de correo) y MIME
(Protocolo de correo Internet multiobjetivo). El primero proporciona un mecanismo para transferir mensajes entre ordenadores independientes. Se requiere de
un editor o un programa de correo electrnico 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 travs de una conexin TCRSMTP desde el programa de
correo electrnico del ordenador origen hasta el programa de correo electrnico
del ordenador destino. El protocolo MIME surge por la necesidad de resolver
ciertos errores que se dan con la utilizacin exclusiva delSMTP, como por ejemplo,
el rechazo de mensajes de gran tamao o rellenar lneas en un mensaje con el fin
de conseguir una longitud igual para todas las lneas que componen el documento.
Al mismo tiempo, facilita y proporciona formas normalizadas de tratar una gran
variedad de representaciones de informacin en un entorno multimedia.
El protocolo de transferencia de ficheros o FTP se utiliza para enviar
ficheros de un ordenador a otro segn 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 contrasea requerida (la suya), para que la
transferencia de datos pueda llevarse a cabo. Por lo que se realiza una primera
conexin va TCP para el envo de identificador, contrasea, fichero y
especificaciones del mismo y, posteriormente es transferido el fichero.

PROTOCOLO DE TRANSFERENCIA
DE HIPERTEXTOS HTTP
El protocolo de transmisin 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, imgenes, sonido, hipertexto y cualquier tipo de datos
que sea imposible enviar va Internet. Adems hemos de tener en consideracin
que dependiendo de la naturaleza del emisor, es decir, del cliente, enviar la
informacin 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 visualizacin de imgenes, el servidor, simplemente enviar los
datos soportados por su sistema excluyendo, en este caso, toda la informacin en

27

Webs con Photoshop


formato GIF o JPEG (grficos o imgenes). Esto hace que el protocolo H7TP sea
el ms adecuado y ms flexible en los formatos que puede tratar.
El uso ms comn de este protocolo es la transmisin de informacin de
un cliente web a un servidor web. Como es lgico, la diversa informacin solicitada
a travs de la red (en este caso una red WAN) puede estar localizada en pginas o
documentos distribuidos por distintos servidores emplazados en cualquier lugar
del mundo. La naturaleza de este protocolo es la ms adecuada para este tipo de
transferencia de datos, dado que es unprotocolo sin estados los datos son tratados
independientemente. Es decir, una vez la informacin es recibida por el cliente
sta es cerrada, si el cliente vuelve de nuevo a demandar informacin de otra
pgina, sta ser tratada independienteme a la anterior y ser cerrada por el servidor
una vez el cliente haya recibido la informacin solicitada. Esto quiere decir que el
procesado de la informacin requerida se produce en nuestro ordenador y no en el
servidor lo que acelera el tiempo de transmisin agilizando el proceso.

ANSI

Grupo que define los estndares de Estados Unidos para la industria del
procesamiento de informacin. ANSI participa en la definicin de los estndares
de protocolos de red.

ANONYMOUS FTP (FTP annimo)


Sesin FTP que utiliza el nombre de identificacin annimo para acceder
a archivos pblicos. Un servidor que permite FTP annimo 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 resolucin de direccin. Protocolo TCPIIP utilizado para
asignar una direccin IP de alto nivel a una direccin de hardware fsico de bajo
nivel. ARP se utiliza a travs de una sola red fsica y est limitada a redes que
soportan difusin de hardware.

Comunicacin de datos
ARPA
Agencia de proyectos avanzados perteneciente a una institucin
gubernamental que fund la ARPANET y, despus, la red global de Internet. El
grupo detro de ARPA responsable de ARPANET fue la IPTO (Oficina de
Informacin de Procesos Tcnicos), llamada ms tarde ISTO (Oficina de
Informacin de Sistemas Tecnolgicos). ARPA se conoci como DARPA por
varios aos.

ARPANET
Red pionera de gran alcance fundada por ARPA (despus 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 lneas arrendadas.

ASSIGNED NUMBERS (nmeros asignados)


Documentos RFC que especifica, por lo general de forma numrica, los
valores utilizados por los protocolos TCPIIP.

ATM
Modo de transferencia asncrono. Tecnologa de red orientada a la
conexin que utiliza pequeas celdas de tamao fijo en la capa de nivel inferior.
W M tiene la ventaja potencial de ser capaz de soportar voz, vdeo y datos con
una sola tecnologa subyacente.

AUTONOMOUS SYSTEM (sistema autnomo)

Grupo de ruteadores y redes bajo una entidad administrativa que cooperan


de cerca para ampliar la accesibilidad de la red y el ruteo, comunicndose entre s
mediante el protocolo de contrapuerta interior de su eleccin. Los ruteadores
dentro de un sistema autnomo tienen un alto grado de confiabilidad. Antes de
que dos sistemas autnomos se puedan comunicar, un ruteador en cada sistema
enva informacin de accesibilidad de un ruteador a otro.

BACKBONE NETWORK (red de columna vertebral de la red)


Cualquier red que forme la interconexin 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.

29

Webs con Photoshop


BASTION HOST (anfitrin baluarte)
Ordenador seguro que forma parte de un sistema de muro de seguridad y
corre aplicaciones que se comunican con el exterior de una organizacin.

BRIDGE (puente)
Ordenador que conecta dos o ms redes y envan paquetes de datos entre
ellas. Los puentes operan a nivel de red fsica. Los puentes difieren de los
repetidores pues almacenan y envan paquetes completos, mientras que los
repetidores envan todas las seales elctricas. Los puentes tambin difieren de
los ruteadores ya que se valen de direcciones fsicas, mientras que los ruteadores
utilizan direcciones IP.

CLASS OF ADRESS (clase de direccin)


Categora de una direccin IP. La clase de direccin determina la
localizacin de la frontera entre el prefijo de red y el sufijo anfitrin.

CLIENTE-SERVIDOR
Modelo de interaccin en un sistema distribuido en el que un programa,
en una localidad, enva 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 comn que se estructure primero el software
cliente y despus el servidor.
7

DOMAIN (dominio)
Parte de una jerarqua de nombres. Sintcticamente, un nombre de dominio
consiste en una secuencia de nombres (etiquetas) separadas por puntos.

ENCAPSULATION (encapsulacin)
Tcnica 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 seccin de datos de su trama de bajo nivel. La encapsulacin
implica que los datagramas que viajan a travs de la red fsica cuentan con una
secuencia de encabezados de los que el primero proviene de la trama y red fsica,
el siguiente del Protocolo Internet (IP), el siguiente del protocolo de transporte, y
as sucesivamente.

FIREWALL (muro de seguridad)


Configuracin de ruteadores y redes colocados entre la organizacin

Comunicacin de datos
interna de una red de redes y su conexin con redes de redes externas, con el fin
de proporcionar seguridad.

FLOW CONTROL (control de flujo)


Control de la razn 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 (fragmentacin)
Proceso de dividir un datagrama IP en pequeas piezas cuando deben
viajar a travs de una red que no puede manejar el tamao 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 jerrquico)


Ruteo que se basa en un esquema de direccionarniento jerrquico. La
mayor parte del ruteo del TCPIP se basa en una jerarqua de dos niveles en la que
una direccin IP se divide una parte de red y otra parte de anfitrin. Los ruteadores
utilizan slo la parte de red hasta que los datagramas alcanzan un ruteador que los
pueda entregar directamente. Las subredes introducen niveles adicionales de ruteo
prrquico.

ICMP
Protocolo de Control de Mensajes de Internet. Parte integral de protocolo
de Internet (IP) que resuelve errores y controla los mensajes. Especficamente,
los anfitriones y los ruteadores utilizan el ICMP para enviar reportes de problemas
relacionados con datagramas que se devuelven a la fuente original que enva el
datagrama. El ICMP tambin incluye la solicitudrplica de eco utilizada para
probar si un destino es accesible y responde.

INTERNET
Fsicamente, una conexin de redes de conmutacin de paquetes
interconectadas por ruteadores, junto con los protocolos TCPIP permite que la
red funcione como una sola red virtual extensa. Cuando se escribe con mayscula
se refiere especficamente a la red global de Internet, conjunto de redes y ruteadores
que abarcan 61 pases y utiliza TCPIP para formar una sola red virtual cooperativa.

Webs con Photoshop


IP DATAGRAM (datagrama IP)
Unidad bsica de informacin que pasa a travs 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 fsica. Contiene las direcciones de fuente y destino juntos, as como los datos.

PACKET (paquete)
Se trata, en trminos generales, de cualquier bloque pequeo de datos
enviado a travs de una red de conmutacin de paquetes.

PROTOCOL (protocolo)
Descripcin formal de formatos de mensajes y reglas que dos o ms
mquinas 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 aplicacin. La mayor parte de los protocolos
incluye descripciones intuitivas de las interacciones esperadas as como especificaciones ms formales, utilizando modelos de mquinas de estado final.

PARA SABER Ms
Lo desarrollado en este captulo se ha centrado en explicar los datos
necesarios para comprender cmo se produce la comunicacin de datos en una
red sea cual sea las caractersticas de sta. Sin embargo, la informacin aportada
ha sido considerablemente reducida a las necesidades requeridas dado las
caractersticas del libro. Por este motivo le invito a que consulte los libros que a
continuacin procedo a detallarle, ya que la informacin 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 iniciacin.


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 pgina 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 tamao que cualquier
otro documento incorporado en una pgina Web. Como vemos, el sino que vive
una pgina Web viene determinado por la importancia que tiene la incorporacin
de imgenes en una pgina, ya sabemos la gran informacin que puede contener
una imagen, y el tiempo que puede tardar en cargarse la misma, cuya visualizacin puede llegar a ser el desespero del navegante que desea verla. Adems del
tamao del documento existen otros aspectos que han de tenerse en consideracin, como puede ser la compresin realizada en el archivo, la paleta seleccionada, incluso el diseo mismo de la pgina Web al igual que las imgenes y grficos
que la contienen, pero esto ya lo trataremos en sus captulos respectivos. En este
captulo desarrollaremos todo lo relacionado a las caractersticas intrnsecas de
una imagen digital, de qu est constituida, la resolucin, el tamao de imagen, la
resolucin de bits, etc. Y trataremos la relacin de amor y odio existente entre
estos conceptos y la transmisin de datos, en este caso imgenes para la Web con

Webs con Photoshop


el fin de que seamos capaces de discernir el mejor tamao de archivo, el mejor
tamao de imagen, la resolucin ms adecuada e incluso el mejor diseo en relacin
a las necesidades de rapidez de visualizacin que son requeridas en la red, sin que
por ello tenga que quedar menguada la calidad de los grficos, imgenes e, incluso
la calidad del diseo. Todo ello lo conseguiremos combinando todos estos atributos
en su justo punto de equilibrio.

Consejo

...

Es recomendable que antes de leer esta captulo haya ledo el captulo 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 ms que probable que ya tenga conocimientos sobre las
caractersticas de la imagen digital. Sin embargo, creemos necesario realizar un
repaso a ciertos conceptos relacionados con las caractersticas que sta posee.
Photoshop, como cualquier otro programa de tratamiento digital de imgenes 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 cromticas: las imgenes. Esta concepcin determina
la manera de crear y representar la imagen.

Cadapxel (abreviatura depicture element) viene determinado por laprofundiad de pxeles o resolucin de bits, sea cual sea el modo en que desee
denominarlo. Es decir, el nmero de bits de informacin almacenados en cada
pxel. La profundidad de pxeles determina cunta informacin de color existe
para cada pxel de archivo. Un pxel con una profundidad de bits de 1 tiene dos
valores posibles: s y no. Traducido a colores sera 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


Este modo de representacin se extiende, tambin, a los dispositivos fsicos como el monitor, el escner o el vdeo, por ello la calidad y la naturaleza de
stos medios fsicos y lgicos determinarn la representacin. Cuanto mayor sea
el nmero de bits por pxel, mayores son las posibilidades de obtener los valores
deseados.
Aunque estos valores habrn de ser reducidos a una gama de 256 colores,
como mximo, una vez haya de ser exportada la imagen a la red. La determinacin del nmero ir en funcin de las caractersticas del documento en cuestin.
Por ejemplo, si debemos exportar una fotografa habremos de considerar como
prioritario que la imagen conserve la mayor cantidad de valores tonales posibles
(256 colores) y que ocupe el menor tamao (reduciremos el mismo comprimiendo el tamao de archivo durante el proceso de conversin a la extensin JPEG,
por ejemplo), mientras que si se trata de un grfico o imagen caracterizada por
amplias zonas de colores planos, no requerir de un gran nmero de colores, por
lo que podremos reducir la resolucin 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 deterrninante en el tamao 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 problema quedar en gran medida reducido.

...

nota

No hemos de confundir los bits con los bytes. Un bit (de la contraccin
de la palabra inglesa binary unit, que quiere decir cifra binaria) es la unidad
de informacin que puede tomar uno de los valores: O o l . En los
microordenadores, los bits estn agrupados de 8 en 8 para formar ~palabras~,
tambin llamadas bytes u octetos. Los microprocesadores que utilizan
palabrasde 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 carcter, en este caso se le llama igualmente octeto.

35

36

Webs con Photoshop

hay que saber..


Photoshop funciona con mapa de bits o bitrnaps. Los bitrnaps
son imgenes formadas por un nmero determinado de pxeles. Es decir, la
imagen est compuesta por infinidad de cuadrculas rectangulares, cada
una de las cuales con su valor tonal, de brillo, de color, de luminosidad, etc.,
son. en su agrupacin, las que dan idea de una imagen visual.
El nmero de pxeles por pulgada
(ppi) determina la resolucin de la
imagen. A mayor nmero de pxeles

por pulgada mayor resolucin posee la imagen y en consecuencia mayor


calidad, pero, al mismo tiempo, mayor espacio ocupa en el disco duro. Aunque este aspecto no ha de preocuparnos en exceso dado que las resoluciones que se utilizan en red son estndares y responden a las resoluciones de
los monitores (Macintosh la resolucin es de 72 ppi con Windows la
resolucin es de 96 ppi). Sin embargo. es aconsejable que disee sus pginas Web con una resolucin de 72 ppi con el fin de que todos los navegantes, sean de Mac o de PC, visualicen los grficos adecuadamente.

Optimizar la imagen para Internet


TAMAO DE IMAGEN Y RESOLUCIN
E N DOCUMENTOS PARA LA WEB
En este tipo de programas de mapa de bits el tamao de la imagen y la
resolucin est ntimamente ligado al nmero de pxeles. Sabemos que el tamao de una imagen describe sus dimensiones fsicas y que su tamao se determina enpheles, por lo tanto, su tamao es fijo, lo cual nos permite saber aproximadamente las dimensiones de la imagen. La resolucin es, como ya sabemos, la
densidad de pxeles por pulgada que forma una imagen, por lo tanto, el espaciado
de los pxeles afecta al tamao de la imagen y los detalles de la misma.
Aqu mostramos unos ejemplos ilustrativos de cmo vara el tamao de
la imagen cuando son modificados ciertos valores en el cuadro de dilogo Tamao de imagen.

Figura 1.
Ilustracin, cuadro
de dialogo Tamao
de imagen y escritorio
de Photoshop.

La ilustracin
posee, segn
los valores determinados en
Tamao de la
imagen unas
Dimensiones
de pxeles: 890
K; una Anchura: 425 p. y altura 714 p. Y
una Resolucin
de 72 ppi. La
Anchura es de
14'99 cm y la
Altura es de
25'18 cm. Observe en que
tamao aparece visualizada
la imagen en el
escritorio de
Photoshop.

Observe que si aumentamos o reducimos la resolucin del documento en


cuestin, los valores de las dimensiones de los pxeles varan. Esto hace que la
imagen aparezca aumentada en el monitor, puesto que hemos aumentado sus

37

Webs con Photoshop

38

dimensiones de pxeles de la imagen y la resolucin del monitor es invariable,


esto hace que aparezca aumentada. Sin embargo, a nivel de impresin este aumento se relativiza al tamao que ocupa el documento en el disco duro. Aspecto
ste realmente importante y que debemos tener en consideracin para documentos que vayamos a exportar a la Web. Para solventar en cierto modo este inconveniente podemos en algunas imgenes recurrir a modificar la resolucin sin alterar
las dimensiones de impresin. Esta variante produce un aumento en el documento de impresin, pero no modifica las dimensiones en pxeles del documento y, lo
que es ms importante no hace que vare el tamao de archivo o, dicho de otro
modo, las dimensiones de pxeles del documento. Este ltimo proceso puede
resultar realmente interesante cuando tenemos documentos en los que la resolucin de la imagen es inferior a los estndares utilizados en la Web, es decir 96 ppi
(Windows) y 72 ppi (Macintosh),
De lo dicho podemos deducir que tendremos que saber adecuar las dimensiones de los documentos para optimizar al mximo el tamao de archivo,
sin perder definicin y detalle en la imagen y al mismo tiempo someterlo a las
rigurosidades de tamao impuestas por el monitor para una correcta presentacin
en el visualizador de nuestro navegador.

Tartbobmpranui

A
LW.LF,,.

. %L*

..
1.7: j

1
9

- 1.
-1

&,mr w;mrrn

U yo)c

i
1

.=.

a m i i t a bmi

..

..=. .
."

:A

1 ,:;i.i
lf-:

E-1,

.l'

.'.
-1

.i;

-.

- -

Variando la Resolucin de 72
ppi a 92 ppi
manteniendo
las proporciones no altera el
tamao de impresin tal como muestra la
ilustracin. Sin
embargo, aparece modificado el tamao
de archivo que
pasa a ser de
890 K a 1'42 M.
Esto hace que
Figura 2.
el tamao de
visualizacin la Cuadro de dilogo
Tamao de imagen,
escritorio
de Photoshop
escritorio de
Photoshop va- e Imagen.

'

Optimizar la imagen para Internet

Figura 3.
Imagen, cuadro de
dilogo Tamao de
imagen y escritorio
de Photoshop.

En este caso hemos variado l a


resolucin igualmente de 72 ppi a
92 ppi. En este
caso hemos vinculado exclusivamente el cambio
de resolucin al
tamao de impresin. Esto hace
que se no altere
el tamao de archivo, por lo que
permanece en
890 k,pero si que
modifique el tamao de impresin. Observe como se mantiene
el tamao de visualizacin 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 reduccin drstica de colores y, en consecuencia, una perdida
del detalle. Este consejo es importante que lo tenga presente si ha de exportar
fotografas ms que grficos o imgenes que contengan poca informacin ya que
es en stas donde se acenta el efecto de prdida del detalle.
Como ya se ha indicado trabajando con imgenes para Internet no interesa tanto el tamao de impresin como las dimensiones de pxeles del documento,
aunque, como es lgico, uno depender del otro. Sin embargo, y lo que es realmente 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 documento y si posee unas dimensiones de pxeles o una resolucin inadecuada a la a
la resolucin del monitor se pueden producir deformaciones inesperadas. Por
este motivo es realmente importante que adece sus imgenes o grficos a los
estndares que hay en el mercado. El tamao de visualizacin en monitores 12"
y 14" es de 640 por 480 pxeles, de 800 por 600 pxeles para monitores de 15" y
17" y 1024 por 768 pxeles en monitores de 17"-21" como norma.

39

40

Webs con Photoshop


Estos tamaos de visualizacin estn relacionados con los estndares grficos soportados por los monitores. Cada monitor acepta un rango determinado.
Por ejemplo, un monitor Nec MultiSync 3V puede aceptar las siguientes rasgos
grficos: 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 lgico,
cuanto mayor sea el rango que admita el monitor ms resoluciones podemos
visualizar en la pantalla. La seleccin de una resolucin ir en funcin de las
necesidades del momento.
Las resoluciones de los monitores han de tenerse en consideracin a la
hora de disear una pgina Web. mies, no todo los navegantes vern la pgina 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 pxeles su pgina Web vista por un
navegante con un monitor adaptado a unas resoluciones de 640 por 480 pxeles
ser ampliada en tamao, es decir aparece mucho ms grande, por lo que parte de
la informacin de la misma puede desaparecer del campo de visin.
).
b c h m L&dn

-.X

&I

118

Earorlor A&

11

8 C

",-

Lu

- --

"-

sud^ Fa

M .l~hYw.

m "la

~ & i a rw w w

~9
r.-

mi w u c

ur

WWLUO

Visor de Microsoft l.
Explorer,
Figura 4m
recuadro de
previsualizacinde resolucin del monitor y
rea de escritorio.

25 de Diciembre de 1997 8 34 P M

y&z&q!&-

b p k d e l da,

fEUCW f- 1

--

- .,

34"Tarifas

--

Notlclns

LT
Jl

2.

-? .d. F. 2.

'1

La resolucin seleccionada para el monitor es de 640


por 480 pxeles. Observe que cuando elegimos este
tipo de resolucin las imgenes son ampliadas en la
pantalla. Para verla en su totalidad deberemos recurrir a mover los reguladores.

dd sscritw,n
Menos

D R f ?

; j'

''

'.' .'; . Ms

......U .
:
,,............... .
640 por 480 pxdm

Optimizar la imagen para Internet


Figura 5.
Visor de Microsoft l.
Explorer, recuadro de
previsualizacinde resolucin del monitor
y rea de escritorio.

]
-

25 de Diciembre de 1997 8:28 P.M

Con una resolucin de 800 por 600 pxeles las imgenes aparecen centradas y en su totalidad. Es el ms
idneo para trabajar, pues nos sita entre los dos tipos
de resolucin estndares utilizados. Para verla en su
totalidad no es necesario mover los reguladores.

Figura 6.
Visor de Micro:
Explorer, recuad
previsualizacin clc ,=solucin del monitor
y rea de escritorio.

I-.~

*m-

Ve

Ir*.

up

7
L
i

L-A.
-

.P
.

. .....

..

... .

A ,Sr,M

'J

,..,

..

,.,,

-).

.?S-

,.-. ,... y

ir--

.h.4

A,g,
Memis

- '

Ms

800 por 6m pixeles

,:,:.

'-

i'inri-r

--

: ; 1

':iq.i.r

~ ~ ~ t . b F '

l.' d r DiriiJlr

kl2._iA

lELlCLF IILFTM

<Ir "],.

8 19 P SI

--

Terpr
Sd&r

or*m
m
i.,,,

41Ai

Area dei escritorio


Menos

1
Ms

1024 p a 768 p i d e s

34M'rJ

Si configuramos el monitor a una resolucin de 1024


por 768 pxeles las imgenes aparecen reducidas y
en su totalidad. Se hace difcil la lectura de letras de
cuerpo pequeo y normal. El conjunto de la composicin nos aparece descentrado hacia la izquierda.

42

Webs con Photoshop

hay que

sabor...

Recuerde que debe adecuar las resoluciones de sus proyectos para la


Web en funcin de las resoluciones establecidas (72 ppi o 96 ppi respectivamente) y las configuradas en su monitor: 640 por 480 pxeles, 800 por
600 pxeles o 1024 por 768 pxeles.

U En este caso hemos

Drnsiisiunss de pixel 1 371ul (era 89OKJ


A m b a
Altura

1
1 pixair

~ I X ~ I S

11

Cancelar

Tamak de epresion
Anchura

11Et. ollr'lolt

r Mantener propnrcmn
R

yolver a rno:trar lo imagen.

( pixelr/prilgada

1 Bicubica

1]

I
I]

1
1

modificado los valores de Anchura: 800


pxeles y Altura:
600 pxeles en el
apartado de Dimensiones de pxeles.
Con estos valores la
imagen ocupar en
su totalidad el camPO de visin del monitor, ya que hemos

establecido los mismos valores con los que tenemos configurado el


monitor, es decir, 800 por 600 pxeles. Por otro lado. la resolucin establecida para el documento es de 72 pxeles por pulgada, tal y como se
establece. Este aumento de las dimensiones se realiza mediante una
interpolacin. es decir. se crean pxeles que contienen informacin relativc
a dos pxeles consecutivos.
Si en el documento ha de modificar la resolucin y las dimensiones de pxeles, proceda a introducir en primer lugar la resolucin y, en
segundo lugar, las dimensiones de pxeles del documento. Si no lo hace en
este orden al cambiar la resolucin las dimensiones del documento sern
modificadas de nuevo. En este caso, /a imagen ser transformada al no mantener las proporciones del documento.

Optimizar la imagen para Internet

Para saber las resoluciones a las que puede adecuar su monitor


simplemente lase el folleto proporcionado por el fabricante. Del mismo
modo asegrese de las caractersticas de su tarjeta grfica. Para modificar
las resoluciones del monitor dirjase a l Panel de control y de ste seleccione
el icono Pantalla.

Ya hemos dicho que la resolucin de una imagen define la cantidad de


pxeles por pulgada @pi).sta es la medida con la cual nos hemos de acostumbrar a trabajar desde ahora para realizar diseos para la Web junto con la resolucin del monitor. Esta ltima define el nmero de puntos o pxeles por unidad de
salida. Se mide en puntos por pulgada (dpi)o pxeles por pulgada @pi). La resolucin del monitor determina el tamao de la imagen en pantalla. Por ejemplo,
una imagen con una resolucin de 144 ppi se visualizar a un tamao doble de su
tamao real en un monitor de 72 dpi. Esto quiere decir, que si usted est trabajand o con un monitor de 96 dpi, en un monitor de 72 dpi se ver ms grande.
Figura 7.
Escritorio de
Photoshop.

Este tipo de reglas nos


permiten saber las dimensiones en pxeles
del documento. Generalmente son mviles,
esto quiere decir que
no se incrustan en el
documento, por lo que
si lo ampliamos o lo reducimos stas se mantienen invariables.

43

Webs con Photoshop


Como puede apreciar diseando 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 programa no nos sern de gran utilidad. En el mercado existen reglas, que podemos
incorporar al escritorio de Photoshop, para medir los documentos por pxeles.
Resultan de una gran utilidad para controlar las dimensiones en pxeles del documento, sobre todo cuando an no estamos lo suficientemente familiarizados con
este tipo de medidas.

EN DOCUNENTOS PARA LA WEB

El tamao de archivo de una imagen es proporcional a su resolucin. sta


determina la informacin que ha de ser almacenada. Las imgenes con ms detalle (mayor resolucin) ocupan un mayor espacio en el disco duro. Otro aspecto
que incrementa el tamao del archivo es el tamao real del documento. Cuando
stos son tratados para ser colocados en red hemos de tener en consideracin el
tiempo de transmisin de la informacin y el tiempo que se requiere para descargar un grfico en el browser. As observamos que a medida que el documento
aumenta de tamao, mayor es el tiempo que requiere para ser descargado. El
mtodo utilizado para disminuir el tamao de un archivo consiste en reducir el
nmero de colores contenidos en la imagen, es decir, convertir el documento a
imagen de 8 bits. Por otro lado podemos comprimirlo moderando sustancialmente
el tamao del mismo. No todos los formatos de archivo son capaces de comprimir la informacin. Adems no todos los navegantes disponen de mdems rpidos, esto provoca que un gran nmero de ususarios visualicen los grficos contenidos en las pginas lentamente. As que ya sabe, lo realmente importante es que
optimice el tamao del archivo al mximo, no excediendo de 40K, para que resulte lo ms efectivo posible.

RAPIDEZ DE TRANSMISIN EN LA RED


Y LA CALIDAD REPRESENTACI~N
Los mdems actuales pueden transferir informacin 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


mdem que transmite informacin a una velocidad de 9600 bps la informacin
ser transferida en el triple de tiempo que con un mdem que transfiere la informacin a 33600 bps. La mayor o menor velocidad de transmisin de datos depende del ancho de banda, aunque tambin est condicionada por la banda limitada
de frecuencias que pueden transmitirse. Por ejemplo, si transferimos informacin
con un ancho de banda de 4 MHz podemos enviar informacin 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 mdems convierten seales digitales (hileras de bits) en seales


analgicas (las utilizadas por las lneas telefnicas) para ser transmitidas
por un canal de comunicaciones y, de nuevo retransformar las seales
analgicas en digitales. Mediante un microprocesador podemos comunicarnos con otros ordenadores, intercambiar informacin o consultar bases de
datos.
Una seal analgica es una onda electromagntica que vara continuamente. Dependiendo del espectro, la seal se podr propagar por una
serie de medios. Una seal digital es una secuencia de pulsos de tensin
que se pueden transmitir a travs de un cable; por ejemplo, un nivel de
tensin positiva constante puede representar un 1 binario y un nivel de tensin negativa constante puede representar un O.

Kilobyte o Kbyte corresponde a 21= 1 .O24 bytes. Designa la capacidad o potencia de almacenamiento de la memoria central de un ordenador. En cdigo ASCll el nmero mximo que puede almacenar en memoria
es de 8 bits. ASCll es el cdigo estndar americano para el intercambio de
informacin. Permite definir todos b s caracteres alfanumricos utilizados
en ingls y ciertos caracteres grficos.

4,

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

Con una velocidad de transmisin de 2000 bits por segundo y


un ancho de banda de 1700 a 2500 Hz la representacin es bastante
buena. Si el ancho de banda es de 4000 Hz la representacin es buena.

A lo dicho hasta el momento hay que aadir que las lneas de transmisin
utilizadas en Internet en la actualidad soportan velocidades de 54 Mbps (54000
bps). Como es lgico las velocidades de las lneas de transmisin (capacidad de
canal) y las velocidades de conversin de los mdems han de ir a la par con el fin
de aprovechar al mximo las cualidades de ambas. No obstante, y, aunque a medida 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 representacin 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 seales no generadas por el emisor; otro factor importante es el
denominado efecto de distorsin de retardo, el cual genera que los distintos componentes en frecuencia de seal 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.

Optimizar la imagen para Internet


Esto se debe a que se aumenta la velocidad de envo de datos, el aumento del
ancho de banda, la reduccin del ruido y de la tasa de errores generados durante
la transmisin. Varios de estos factores son especialmente importantes a la hora
de elaborar una pgina o documentos para la Web, ya que permiten una mayor
complejidad en el diseo y un incremento sustancial en elementos grficos, un
mayor nmero de mapas de imagen, sonidos, etc. El gran inconveniente todava
a resolver es la creacin de animaciones complejas. Hoy por hoy han de estar
compuestas por muy pocos frarnes lo que limita las posibilidades creativas de un
buen diseo.

...

nota

Para saber a las velocidades de transferencia a las que funciona su


mdem simplemente consulte el manual aportado por el fabricante.

Figura 8.
Visores de Microsoft
lnternet Explorer
respectivamente.

Estas ilustraciones son lo suficientemente


representativas como para comprender
la importancia de las imgenes en una
pgina Web. Observe, los recuadros vacos son grficos que han de visualizarse.
Esta pgina consta de un qran nmero
la visin global de-la pgina se
por
retarda sustancialmente en el tiempo.
Uno de los factores posibles en el retardo sea el tamao de archivo de los grficos. La gran mayora de las imgenes
son vnculos que nos trasladan a otros
documentos enlazados con la pgina
principal. El tiempo transcurrido en aparecer por completo la pgina ha oscilado
entre los 10 y 12 segundos, siendo descargados los grficos progresivamente.
La primera en aparecer ha sido la que
contiene el logotipo de la Warner Bros.

"

s.,

,
,
A
:

. -"

.F

47

Webs con Photoshop

48

Lrn

i
-

,'

-F

'm

. )*
..o
- .........&.A. 2-., ,-,-.,-.
i

F.d.

a'

,J

.+

...

En la Web encontramos infinidad


de vnculos que nos envan a
otros documentos relacionados.
En muchos casos estos son textos que expecifican lo incluido.
Optar por mapas de imagen para
estos fines incrementa el tiempo
de presentacin aunque enriquece el diseo de la misma. Si el
diseo es bueno podemos jugar
con el tiempo de descarga como
si se tratase de una animacin o
' un fundido haciendo aparecer estratgicamente las imgenes.

Figura 9.
Visores de Microsot
lnternet Explorer
respectivamente.

El tiempo requerido para descargar la


pgina de Cornpusen/eha sido menor.
En parte debido a que la mayora de la
informacin del documento principal
est contenido en el texto. La animacin enmarcada sirve como foco de
atencin para trasladar la atencin al
texto circundante, al tiempo que sirve
de vnculo y nos traslada a un documento enlazado.
Es lgico que la pgina de la Warner
cuide ms el contenido visual -presentando personajes sobradamente conocidos y populares- ya que se trata de
una empresa dedicada a la creacin de
documentos visuales. Mientras que
Cornpuserveest en un sector completamente distinto por lo que el diseo se
centra en aspectos ms tcnicos y en
realzar las ltimas novedades.

. .

ni,

-,ilr,,.n

".--

<nI I . 4 ,

Las imgenes que han de incluirse en la Web deben presentar varios


requisitos, algunos de eHos han sido ampliamente detallados en el captulo anterior.
%n estas pginas hablaremos de los diferentes formatos de archivo ms comunes
utilizados en la Web como son GIF, JPEG o PNG y, por otro lado, concluiremos
con la eleccin de una paleta de color adecuada segn las necesidades del momento.
Los archivos ms comunes empleados en la World Wide Web son el
Formato de Intercambio de Grfios o tambin llamado GIF y el formato JPEG
que debe sus siglas a sus creadores Grupo unido de Expertos en Fotografa.
Aunque hoy en da est siendo muy utilizado el formato PNG que surge como
alternativa al fsimato GZF. ste a diferencia del anterior no limita el nmero de
colores a 256, adems de realizar un tipo de compresin que no provoca prdidas
en la calidad de la imagen.
Que los formatos utilizados para la Web dispongan de algn tipo de
compresin no responde a una coincidencia casual. Estos archivos son los ms
idneos y los que son aceptados por los navegadores ms importantes y recurridos
en la actualidad como son Explorer y Netscape. Sin embargo, todava existen en

Webs con Photoshop


el mercado programas de navegacin que no admiten la visualizacin de grficos,
por lo que deberemos tener presente en nuestros diseos a los usuarios que usen
este tipo de software, detallando la informacin fundamental en forma de texto.

FORMATO ELEGIR?
La eleccin del formato adecuado siempre nos proporcionar mejoras en
la calidad de la imagen y un tamao de archivo concordante con las caractersticas del documento. Como ya se ha dicho, cada uno de los formatos surge para ser
aplicado a un tipo de documentos especfico, por lo que siempre ser bueno tenerlos en cuenta.

Archivo GIF
Aunque es el formato ms comnmente empleado para dar salida a imgenes que han de ser incluidas en pginas para la Web no siempre resulta el ms
idneo. El formato adoptado por CompuServe como estndar para la compresin
de imgenes de 8 bits resulta realmente interesante en proyectos en los que las
imgenes consten de zonas amplas de color y reducidas degradaciones. Resulta
especialmente til en grficos y dibujos en blanco y negro, en imgenes que
contengan una paleta reducida de colores o en logotipos e iconos que cuya caracterstica principal sea un alto contraste.
: . . i i < . I . ,,,.
a
Figura 10.
C? ; ]
.3
-, ',
.- -.-.... ,;: ,',.
Visor de Microsoft
L .

Q,h

=.

<')

+.A

L,,

, =,*. ; Y..

.,.1,:

L.-

.I,X

i -'

i4

-wrnsF
-+

:,Y

,n, i-

8.

.,., ,.-,

.).;-.l.i

rr.;

re,.

:ll.

<a1.

- . p-

.>V.

7 lnternet Explorer.

..-,
-.

?-

<

HIGHLIGHTS FOR JANUARY 7 , 1 9 9 8


TODAY mISNY POOH OICITAL POSTCARDSI

"

, '

La pgina de Disney est creada esencialmente por imgenes


con amplias zonas constituidas
por un solo color, siendo la
gama utilizada considerablemente reducida. En este caso,
el formato elegido es, con toda
probabilidad GIF

Formatos de archivo
Figura 11.
Visor de Microsoft
lnternet Explorer.

Llmr

..-

(-m

' 7 A,

tin.*i;.m

?m ,,.

ti

,O

-m%,...-.

... .d.,"i

! )
,-*.
,,-. ,,.3 3 . ,:-t-,
S*

=
,
a
,

'>
n;

ta

--

La pgina de Pedlogues est


constituida por un nmero 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, naranja. Lo que facilita su rpida
presentacin.

Una de las cualidades ms 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 cargar cualquiera de los dos archivos ha de hacerlo mediante la extensin GIF.
Ciertamente, en muchas ocasiones habr de incorporar grficos a una
pgina Web que deban mantener ciertas reas que no contienen pxeles como
transparentes con el fin de ver a travs de ellas lo contenido en el fondo. Esto
suele suceder con tipografas en formato grfico y creadas para la ocasin, logotipos
o en segn que tipo de animaciones; aunque su utilidad puede ser de lo ms
variada, como por ejemplo la creacin de sangrados. El mtodo ms extendido es
incorporar un documento GZF completamente transparente de 1 phel y variar el
tamao en pxeles segn 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 rpido y
eficaz convertir documentos RVA en archivos de color indexado GZF, pudiendo
especificar las zonas transparentes del mismo, si es el caso.

Webs con Photoshop

52

Consejo

...

Para crear un documento completamente transparente y utilizarlo


como sangra de otros documentos contenidos en la pgina. ste siempre ha de aparecer despus de la imagen en cuestin. Incluya en los atributos de altura y anchura de la imagen, cuando est trabajando con HTML en
la etiqueta <IMG>, el nmero de pxeles que desee que ocupe. Los valores
pueder ir modificndolos. Por ejemplo, puede programarlo en un principio
con un valor de 1 pxel para que sea imperceptible y, posteriormente aadir
el nmero 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
opcin Tranparente cuando configure un nuevo documento.

Siempre es ms aconsejable que para estos casos utilice documentos


nuevos UVA con fondo transparente.

Recurriremos un canal alfa, una transparencia de capa o el Cuentagotas para incluir transparencias en el documento RVA. Seleccionaremos las partes
del documento que deseamos excluir enmascarndolas. Si el color que ha de
aparecer es un color plano, puede cargarlo como mscara especificando sus valores en el Selector de color de Photoshop en el cuadro de dilogo 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
Figura 12.

.....;

de Photoshop, paleta
Canales y cuadro de
dilogo Opciones de
exportar GIF89a.

Transparencia desde mscara

Despues del proceso de


enmascaramiento, mediante una seleccin previa
Cargar
de las zonas deseadas,
aparecer como mscara
especificado en la paleta
Paleta:
Canales o en la paleta
Capas segn el sistema
Colores: E
r
utilizado. A continuacin,
guardamos el documento
[J Entrelazado
r
como GIF89a con el fin de
, conservar los datos relaciola
Vancm
El color que parece por defecto es el gris del Nestcape: nados
parentes de la imagen.
192 rojo, 192 verde y 192 azul.
(Por defecto]
Color de ndice de
transparencia

previs"zarl

~1 .~
.

II

. 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 aparece 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 dilogo Opciones de Exportar GIF89a, activar los colores que desea

53

Webs con Photoshop


que sean sustituidos por el color de transparencia, o bien mediante el Cuentagotas
seleccionarlos directamente en la previsualizacin de la imagen.

0
Fiaura 13.
1. 1
-

cuadro de dilogo
Opciones de Exportar
GIF89a.

Nivel de

Cobres m l pakllU-

En la paleta que aparece en la parte inferior del cuadro hemos marcados los
colores que deseamos sean sustituidos
por el color de transparencia elegido.
Otro mtodo puede ser pulsar sobre la
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
mayora de casos lo ms recomendable es que no active, mientras realiza el traba*
jo, la opcinSuavizado. sta est presente en la mayora de las herarnientas como
opcin a activar en su paleta Opciones correspondiente. Cuando suavizamos los
bordes de una seleccin o capa, Photoshop crea una transicin gradual evitando
un cambio brusco constituido por los colores de la imagen.

e
l
;

Aqu mostramos dos ejem- Figura


14.
plo significativos de lo ex- Documentos
plicado. En la ilustracin de Photoshop
superior no se ha activado respectivamente.
la opcin Suavizado incluidos en el cuadro de dilogo de Texto, mientras que
en la ilustracin inferior si
hemos activado dicha opcin. Cuando las imgenes
finales hayan de contener
POCOS colores es aconsejable 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 reduccin es drstica los colores utilizados
para evitar los bordes dentados pueden no estar incluidos en la paleta creada
produciendo una distorsin y un evidente empobrecimiento de la imagen.

Eleccin de paleta y compresion GIF


La eleccin 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 idnea para cada trabajo. Esto reducir considerablemente la informacin
contenida en el documento evitando tamaos de archivo altos y un retardo
innecesario en la visualizacin de las imgenes en el visor de cualquier navegador.

...

nota

Si trabaja con las paletas de los exploradores Explorer o Nestcape


sus proyectos constarn como mximo de 2 16 colores.
1
.

Photoshop dispone de un amplio surtido de paletas con las cuales puede


reducir los colores del documento en cuestin. Aunque como es lgico lo ms
aconsejable es proceder a disminuir los colores que contiene la propia imagen
reduciendo los mismos al menor nmero posible dentro de los 256 colores que
puede albergar. En este caso, elija Adaptable. Tambin es probable que la imagen
tenga 256 colores o incluso menos tras haber aplicado algn tipo de efecto, como
por ejemplo posterizar la imagen reduciendo significativamente los tonos. En
este caso puede seleccionar la opcin Exacta, la cual aparecer activa. La paleta
Web trabaja con 216 colores, siendo ste nmero el mismo que el de las paletas
del Explorer y Nestcape. sta es la paleta ms utilizada en las pginas de Internet.
Sin embargo, segn las caractersticas de su proyecto la imagen puede quedar
significativamente alterada. Si ha estado tratando la imagen empleando la paleta
del sistema (Windows o Macintosh) lo ms recomendable es que seleccione la
opcin 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 seleccin espectral de colores. Puede dar buenos resultados
si la imagen de la que se parte contiene una rica y variada informacin 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 imgenes las cuales han de contener la
misma paleta de color, porque estn todas ellas contenidas en una misma pgina
Web, por ejemplo. Puede utilizar la opcin 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 mtodos para crear la propia paleta es haber
rastreado previamente la imagen e ir seleccionando los colores ms representativos
de la misma y tomar nota de sus caractersticas 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 caractersticas de dichos colores.
Normalmente, esta opcin es muy til cuando los trabajos estn acomodados a
colores especificados por nosotros mismos o tendemos a trabajar con muestras
de color determinados debido a que permite mantener los rasgos cromticos 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 nmero de bits por pxel que contendr la imagen. A mayor nmero
de bits, mayor nmero de colores que puede contener la paleta en este caso, para
ser visualizados. Al trabajar en imgenes de 8 bits, los tres canales de color estn
unificados en un slo canal, por lo que el mximo de colores que se obtienen es
256 colores. Si selecciona una profundidad de 3bits/phel (23=8)el mximo de
colores que podr contener la paleta ser de 8. Si por ejemplo selecciona 7bits/
phel (27=128)el mximo de colores que podr contener la paleta ser 128. Sin
embargo, observe que las caractersticas de configuracin 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 caractersticas cromticas de la imagen.
Los tipos de tramados existentes nos ayudan a suavizar las zonas donde
se han producido prdidas de color para imitar mediante los colores de la paleta
los colores sustituidos en la reduccin. El cuadro de dilogo Color indexado
consta de tres opciones donde poder elegir. Difusin calcula el valor cercano
difuminndolo en la trama, siendo este mtodo menos preciso que Motivo,
el cual reconstruye los motivos mediante pxeles generados aleatoriamente

Formatos de archivo
simulando de este modo los colores eliminados en la conversin. 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 postenzacin.
Sin embargo, acertar el nmero 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 imgenes
fotogrficas, dibujos y colores planos variando el nmero de colores seleccionados
con el fin de comprobar las alteraciones que sufren y el tamao que ocupan.
Los cambios producidos en un documento G I F siempre vienen
determinados por una inadecuada reduccin de colores, ya que la compresin
LZW no provoca prdicas de calidad en la imagen. No obstante, resulta ms
adecuado en documentos que contengan amplias zonas de colores planos, ya que
la variante del algoritmo LZWresulta idnea en la compresin de datos repetitivos.
Por lo que en una imagen que contenga una gran variedad de matices en zonas
reducidas, stas puedan aparecer perceptiblemente alteradas.

Segn el sistema que utilice para


indexar la imagen el cuadro de dilogo le proporcionar un tipo determinado de opciones de paleta. Si lo lleva
a cabo mediante el comando Color
indexado de submen Modo las
paletas presentes son ms variadas
que si recurre al comando GIF89a
Export del submen Exportar.
Si ha de incluir un color de transparencia, lo ms razonable es que
cargue su propia paleta. Esto puede hacerlo utilizando el comando
Cargar visible en el cuadro de dilogo GIF89a Export. Le permite
cargar tablas color y muestras
existentes o creadas por usted.

57

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 tamaos
de archivo son un tanto mayores con la primera opcin. As nos encontramos que
unapaleta adaptativa de 8 bits (pg. 60) con tramado de difusin el tamao es de
14,3 KB en el primer ejemplo y de 13,s KB en el segundo; mientras que con la
opcin paleta uniforme de 8 bits (pg. 65) con tramado de difusin es de 10,s
KB en el primer caso y de 8,15 KB en el segundo. Observando que afecta en
mayor medida la prdida de calidad a la fotogrfica que al dibujo, acentundose
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 paletas con los resultados obtenidos con la paleta web (pg. 65) con tramado de
difusin comprobamos que la calidad obtenida en sendos ejemplos resulta ser un
intermedio entre las paletas adaptable y uniforme y, como es lgico, el tamao 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 (pg.
69) los cambios no son excesivamente significativos con relacin a los obtenidos
con tramado, aunque se observa un mayor recorte de las figuras sin tramado de
difusin. Por lo que resultar ms interesante su uso en imgenes que no contengan exceso de detalle. Adems resulta interesante la reduccin del tamao 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 difusin a no seleccionar tramado comporta una prdida
sustancial de calidad de las imgenes a medida que vamos reduciendo el nmero
de colores, tal y como podemos observar comparando las imgenes obtenidas
utilizando la paleta adaptable de 8 bits (pg. 69) con y sin tramado de difusin
y las que hemos obtenido con una profundidad de color de 4 bits (pg. 71). En
este caso observamos que la disminucin de colores ha afectado a la fotografa ya
que el nmero de colores que contena sta era mayor. En cambio el dibujo no ha
sido gravemente alterado y comprobamos que con una profundidad de color de
6 bits (pg. 70) los colores de la imagen se mantienen al igual que su calidad.
Para completar la observacin comparamos los resultados entre las fotografas y los dibujos de la paleta uniforme, con y sin tramado de difusin, de 8
bits (pg. 65) con los de 4 bits (pg. 67) en relacin a los obtenidos con la paleta
adaptable.Con esta paleta los resultados aparecen ms enriquecidos con la opcin tramado de difusin si nos referimos a las imgenes de 8 bits. Con esta
paleta sendas imgenes aparecen distorsionadas trabajando con 16 colores (4 bits).

Formatos de archivo
Por ltimo, comentar las imgenes en las que hemos utilizado la paleta
del sistema. En stas destaca una mayor cercana los resultados obtenidos con la
paleta uniforme de 8 bits (pg. 65) que con la paleta adaptable de 8 bits (pg.
69), si nos referimos a la fotografa. No obstante, resear que los colores sufren
una mayor distorsin con lapaleta del sistema Windows (pg. 73) que con la del
sistema Mancintosh @g. 74). Si nos referimos al dibujo los resultados obtenidos con la paleta adaptable de 4 bits (pg. 71) tanto con difusin como sin
difusin son parecidos. Sin embargo, comparndolos con la paleta uniforme los
resultados ms cercanos los obtenemos con una profundidad de color de 8 bits
(pg. 65), si nos referimos a la paleta del sistema Macintosh (pg. 74), si nos
referimos a la paleta del sistema Windows (pg. 73) la calidad, con respecto a la
paleta uniforme de 8 bits es menor. En lo referente a tamaos 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 adaptable de 8 bits sus tamaos son menores.
Si desea ver como quedan en pantalla ciertas opciones puede recurrir
a la siguiente direccin:

http:llwww.infohiway.c~ml~aylfasterlsimulator.cgi

La opcin Entrelazado
La opcin de enlace es una cualidad del formato GIF89a. sta aparece
como predeterminada en uno de los cuadros de dilogo Opciones de exportar
GIF89a. Si la activamos la imagen se ir descargando en el explorador progresivamente, es decir, de menor a mayor detalle hasta su total visualizacin. 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 tcnica utilizada en los televisores que leen la imagen de arriba
abajo y de derecha a izquierda, los monitores redibujan la imagen lnea por lnea
y exclusivamente de arriba abajo. Por lo que al descargarla de forma entrelazada,
cada una de las cuatro pasadas incluyen parte de la informacin de la imagen,
esto hace que pueda visualizarse mucho antes en el explorador sin prdica de
calidad.

,9

Webs con Photoshop

hay que sabor...


TIPOS DE PALETAS

Exacta.- Utiliza para la elaboracin de la paleta los colores disponibles en la imagen 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 ms usados para la elaboracin de pginas Web.
Uniforme.- Segn las especificaciones en Profundidad d e bits y Colores extrae
una relacin homognea de cada grupo de calor del espectro preparando una paleta 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 opcin aparecen
una vez pulsado el botn OS< el cuadro de dilogo Tabla de colores. Del cual
deber seleccionar una de las tablas que aparecen en la seccin Tabla, o bien
Cargar tablas previamente creadas y guardadas.
Anterior.- Utiliza la paleta utilizada en la conversin anterior.

TIPOS DE TRAMADOS
Ninguno.- Simula el color eliminado por el ms cercano dentro de la gama de 256
colores. Sin embargo, no utiliza tramado para suavizar las zonas donde se han excluido gamas de color. por lo que las transiciones entre matices y tonos son bruscas
y toscas.
Difusin.- Calcula el valor cercano difuminundolo en la trama consiguiendo suavizar las diferencias de tono y matices creados por la eliminacin de gran parte de los
colores de la imagen.
Motivo.- Reconstruye los motivos mediante pxeles generados aleatoriamente simulando de este modo los colores eliminados en la conversin.

Formatosdearchiva

61

Archivo JPEG
Formato creado por fotgrafos especialistas, resulta realmente idneo su
uso en documentos que contengan millones de colores, documentos escaneados,
tal es el caso de fotografas de grandes degraciones de matiz. Igualmente resulta
efectivo en documentos en escala de grises. Es adecuado su empleo en imgenes
de tono continuo y suaves transiciones de color. Por el contrario los resultados
pueden ser insatisfactorios si los documentos son indexados.
l.

<

Ci

t+."

.-

m.:

ir

c,

Li---

LnC
* * Y

-L..

.. , .,:<
<

-1
..

-u+..

c9

ilri

R., r

1;

l.-

.". N-

;?

Figura 16.
Visor de Microsoft
lnternet Explorer.

L.:

I..

[;- -,

1 1 1,

1-,

!,11,
"
.

-2

rr.-,.

"

Iii....

-:

-,7-...i- ..-

!,'e

L..

l.

ii*".

Figura 15.
Visor de Microsoft
lnternet Explorer.

. ,8

u
*
.
,

;i,., n-3

,d -:;

...

d
i -

*id,,

.!:.

,!.:

&j
4

.a

I.

h'...b

. t-: .

;)ci,-,

-r.

'4"..

M . C P ? ~ r ~ r i r i@L&%L

En la pgina de geoloties, la utilizacin del formato JPEGno resulta tan evidente. Sin embarqo, una observacin atenta de
ducido nmero de colores que
aparecen hacen pensar que se
ha utilizado el formato GIF.

m'

,;:
.* 7,-

?a

s w e c p r t o k e i
F

'

-m-!

f Lkk ,': !":?"';i


u - m + m as

+,

Pll"*

En ambos casos las imgenes aparecen descentradas hacia la izquierda del monitor.
Probablemente la configuracin del monitor era de 1024 por 768 pxeles

Webs con Photoshop


Compresin JPEG y calidad de imagen
Este tipo de archivo, al igual que el formato GIF, realiza un proceso de
compresin en la imagen, con el fin de que ocupe un menor tamao de archivo. A
diferencia de GIF su proceso de compresin no es predeterminado, sino que el
usuario puede comprimir el archivo tanto como lo desee. Sin embargo, tiene como
contrapartida que la compresin del documento siempre genera prdidas en la
calidad de la imagen. Esta prdida es siempre inversamente proporcional a la
mayor o menor compresin ejercida en el archivo. As nos encontramos que a
mayor compresin de archivo menor calidad poseer la imagen y viceversa.

1C

En el cuadro de dilogo Opciones JPEG estas caractersticas vienen


determinadas por los valores especificados en calidad de imagen y el tamao del
archivo. Siempre resultar ms efectivo incluir, en primer lugar el tipo de calidad
de imagen y, a continuacin comprobar el tamao que tendr el documento. Si
este no le satisface vuelva a realizar la operacin duplicando previamente la
imagen. Recuerde que una imagen con la opcin de calidad Muima estar poco
comprimida, pero la prdida de informacin ser mnima. Generalmente los valores
intermedios proporcinan buenos resultados. No obstante, todo va en funcin de
las caractersticas del proyecto, pero recuerde que es recomendable que el
documento no exceda de los 40 KB, ya que esto retardan'a su aparicin en el visor
de cualquier navegador.
Por ltimo, aadir que este tipo de archivo da opcin a optirnizar el color
de la imagen para que sta presente una calidad fotogrfica impecable. Con este
fin seleccione Lnea base optimizada.

..
JPEG utiliza
t
Opciones de imagen

Cakdad

1
8

m
archivo qrande

archivo pepe60

L
I

Opcionos de formato

Lnea de base fEriandar1

r Linea de base opimrada


R Progrmiva
lectira

18-A

Guarda hayectoria

un tipo de compresin acumulativo, por 10 que


cada vez que guarde el archivo
ste ser comprimido. Conviert a el documento a JPEG una
vez haya concluido 10s cambios
oportunos, con e/ fin de no eliminar informacin necesaria
durante el proceso y prdida de
calidad en la imagen.

Formatos de archivo
Los resultados obtenidos con el dibujo son parecidos a los experimentados tras indexar la imagen y convertirla a GZF. En este caso, diramos que su
utilizacin no resulta satisfactoria dado que la misma imagen con resultados similares requiere de un archivo mayor. Comparemos las imgenes obtenidas con
la paleta adaptable de 8 bits (pg. 72) con y sin tramado de difusin con las
imgenes JPEG de calida mxima 10 (pg. 75). En las primeras su tamao corresponde 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 ms de tamao, que para la imagen
resultante es prescindible. Si para reducir el tamao del archivo recurrimos a una
calidad baja, para amortiguar el tamao, ciertas zonas de color plano pueden
sufrir alteraciones. Para este ejemplo cotejamos las imgenes obtenidas con la
paleta adaptable de 8 bits (pg. 69) con y sin tramado de difusin con las imgenes JPEG de calidad baja 1 (pg. 75). De 12,2 KB y 13,9 KB de tamao que
ocupan las primeras pasamos a documentos que requieren de 12,lKB los segundos en ambos casos. Los tamaos de archivo son prcticamente 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, salvaguardando ciertas excepciones en las que estn mezcladas zonas planas con zonas de suaves degradaciones de color. En estos casos realizaremos una serie de
pruebas para estudiar cul de los formatos es el ms idneo.
En la imagen fotogrfica por el contrario observamos que siempre obteq m o s buenos resultados utilizando cualquier valor de calidad, aunque es recomendable optar por valores altos cuando la imagen sea de gran tamao fsico.

La opcin Progresiva
Cuando trabajamos con JPEG los documentos tienden a ser ms grandes
que cuando trabajamos con documentos GZF, teniendo los mismos tamaos de
archivo, de resolucin y dimensiones. Este motivo hace recomendable que active
la opcin Progresiva en el cuadro de dilogo Opciones JPEG. sta viene a realizar la misma accin que entrelazado del formato GZF, pues permite descargar la
imagen progresivamente en el explorador, pudiendo variar el nmero 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 lecturas consecutivas de la misma con el fin de completarla y de descargarla en su
totalidad.

63

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 resolucin al mismo tiempo que reduce la prdida de informacin de la imagen. Diseado para imgenes y fotografas tiene la particularidad de conservar
todos los valores referentes al color y canales alfa que posea el documento, permitiendo de este modo crear transparencias en los documentos al modo que lo
realiza GIF89a. Por lo que resulta efectivo en documentos escaneados, en imgenes en escala de grises y en imgenes de tono continuo y suaves transiciones de
color, aunque puede ser igualmente utilizado en documentos indexados. Como
podemos comprobar rene las ventajas que poseen los dos formatos anteriormente comentados, adems de contar con un tipo de compresin sin prdidas..

"

El formatoPNG est basado en la tecnologa que tendr el formato GZF24


llamado a ser el sucesor del formato GIF87a e incluso de GZF89a. Mejora las
capacidades grficas del GZF clsico pudiendo trabajar igualmente con imgenes de 24 bits (ms de 16 millones de colores) sin prdida de calidad de imagen
debido al tipo de compresin LZ77 que utiliza. Adems, resuelve el problema de
las diferentes visualizaciones de la imagen segn la plataforma en la que se trabaje, debido a las diferentes cromaticidades y valores gamma existentes. No obstante, tiene como contrapartida no dar soporte para la creacin de animaciones a
diferencia del formato GIF89a.
Los ms importantes programas de tratamiento digital de imgenes lo
traen incorporado en sus ltimas versiones. Tambin encontramos soporte para
este formato en xRes 3.0, DeBabelizer Pro y Hijaak 95, entre otros.

Compresin sin prdidas


El sistema de compresin LZ77 sin prdidas reduce el tamao del archivo sin menguar la calidad de la imagen. La compresin denominada deficcin
utilizada por PNG y desarrollada por Jean-Loup Gailly viene determinada por el
tipo de algoritmo utilizado. Basada en un tipo de compresin que emplea un gran
nmero de programas de dominio pblico Info-Zip: zip, gzip, pkzip; lo que hace
que est libre de derechos de autor o de patentes.

Formatos de archivo

81

El filtro mtodo O PNG est definido por 5 opciones de filtros bsicas;


sin embargo en Photoshop contamos con 6 tipos de filtros algoritmicos. El filtro
algortmico es aplicado en las lneas bsicas y lnea por lnea. Los datos de la
imagen son a su vez enviados de forma gradual para su compresin, cada lnea
escaneada es precedida por un tipo defiltro byte que especifica el tipo de algoritmo usado. Vemos, pues, que losfiltros algonmicos 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 realizada 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 embargo, 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 pginas
siguientes con el fin de compararlos objetivamente.
Un aspecto a tener en consideracin cuando trabajamos con el formato
PNG son los grandes tamaos de archivo que proporcionan, que vienen determinados por trabajar con imgenes de 24 bits, poder mantener informacin no relac~onadadirectamente con la imagen y el tipo de compresin LZ77 que utiliza. De
este modo, encontramos que los ms precisos resultan ser Promedio y Superior
y los tamaos ms pequeos los dan Inferior y Adaptativo.
1,

"4

u . '

1
Cancelar

Los altos tamaos de archivo aue


, ,Droporciona P N G , ms elevados que los
obtenidos con)PEG con el mismo documento, vienen igualmente determinados por la posibilidad que ofrece este
tipo de formato de mantener todos los
canales alfa del documento.
Para saber ms sobre este interesante formato dirjase a:

Webs con Photoshop


En la imagen fotogrfica se han obtenido buenos resultados utilizando
cualquiera de los filtros, esto hace recomendable el uso de los filtros que proporcionan los tamaos de archivos menores como es el caso de filtro Adaptativo
opcin Ninguno (pg. 77) que nos da un archivo de 35,6 KB, el mismo tamao
que Promedio opcin Ninguno (pg. 78).
Refirindonos al dibujo las ilustraciones no muestran cambios evidentes.
En este caso, los archivos con menor tamao han correspondido al filtroAdaptativo
opcin Ninguno (pg. 77) que nos da un archivo de 45,6 KB y el filtro Trazado
opcin Ninguno (pg. 77) con un tamao de archivo de 45,9 KB.

nota

...

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 mtodo puede resultar til cuando
queremos disminuir el nmero de colores de una imagen sin tener que llegar
al extremo de 256 colores consiguiendo muy buenos resultados.

La opcin Adam?
Del mismo modo que los formatos anteriores PNG dispone de una opcin 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 compresin en Filtro.
Cuando la imagen se entrelaza, cada bloque de lectura de la imagen realizada 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 descargada es siempre rectangular y de menor tamao en altura y10 anchura que la
imagen completa. El filtro de compresin seleccionado no es aplicado cuando
la subimagen es descargada.

Formatos de archivo

ANLISISGLOBAL
Hay ciertos tipos de documentos que aqu no han sido mostrados de forma ilustrativa. Con el fin de que tenga una idea de cmo quedan stos segn el
formato seleccionado, desarrollamos este breve apartado.
En exmenes realizados a imgenes 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 paradgico, los tamaos de
archivo obtenidos son superiores a los que pueden darse con el formato JPEG
tanto con la opcin Optimizada como Progresiva y una calidad baja. Dando
valores mayores con la primera opcin mencionada. Los resultados han de considerarse cuando las imgenes son de gran tamao, ya que con JPEG su visualizacin ser de mayor calidad adems de tener un tamao de archivo menor. Si el
tamao fsico es menor elija el que ms le satisfaga.
Una imagen integrada por dos colores planos sin ningn tipo de degradacin 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 tamaos de archivo resultan ser mayores utilizando el formato JPEG.
?

En una degradacin tonal, como por ejemplo, la que puede constituir un


fondo de pgina 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 nmero de bits el degradado comienza a sufrir alteraciones de color. Aunque parezca incomprensible solamente obtenemos un resultdo
ptimo con JPEG Calidad 8 Optimizado. A partir de estos valores ciertos colores del degradado sufren alteraciones de tono, aunque ste en s muestra una
degradacin contnua en cada una de las opciones posibles con este formato. Por
lo que respecta a los tamaos de archivo comparando los valores ms altos de
ambos obtenemos que con JPEG Calidad 8 Optimizado da un tamao tres veces
menor que con GZF de 8 bits con tramado de difusin.

Tipografa a un slo tono sobre un fondo formado por un color plano


observamos que las letras aparecen ms suavizadas con respecto al fondo utilizando el formato JPEG. Con GZF la transicin entre ambos es ms abrupta. La

83

Webs con Photoshop


eleccin depender del efecto que desee conseguir. En lo referente a los tamaos
de archivo resultan ser dos veces ms grandes los obtenidos con JPEG que con el
formato GZF comparando las opciones de mayor calidad.
En fotografas en escala de grises o compuestaspor un numero reducido 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 dimensiones fsicas 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 imgenes
sufren alteraciones generalizadas de tono. Si las imgenes son de gran formato
recomendamos utilizar JPEG tanto con la opcin Optimizada como Progresiva. La mayora dan buenos resultados a excepcin de las opciones de calidad
baja, que an as siguen siendo aceptables. Dando valores mayores con la primera opcin mencionada. Con tamaos semejantes JPEG da unos tamaos de archivo relativamente mayores. Si ha de incorporar documentos de gran tamao
fsico en JPEG es aconsejable que realice previamente ciertas pruebas comparando diferentes calidades. Se recomienda incluir dentro del grupo comparativo
un GZF de 8 bits con y sin tramado de difusin.

Elementos de poco detalle y color sobre un fondo texturizado se observan buenos resultados con GZF de 8 bits con tramado de difusin (256 colores),
7 bits (128 colores), 6 bits (64 colores) 5 bits (32 colores) y 4 bits (16 colores) y
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 embargo, utilizando JPEG de calidad 1 tanto con la opcin Optimizada como con
Progresiva se obtienen muy buenos resultados y unos tamaos de archivo dos
veces ms pequeos que con la mejor opcin de GZF.

En este captulo iniciamos la creacin de ciertas pginas Web que vamos


a j r desarrollando a lo largo de los prximos captulos en los que nos centraremos
en los aspectos a tener en cuenta a la hora de realizar proyectos para la Web.
Las pginas Web estn constituidas bsicamente por una serie de elementos
comunes como son: el fondo, imgenes tratadas, tipografias bitmaps, texto,
botones, marcos y algn que otro elemento. A stos se unen la preparacin de
creacin de texturas con diferentesfines,preparacinde ransparencias, diseo
de tipografias especijicas, efectos especiales, creacin de mapas de imagen,
animaciones GIF u otro tipo de animacin, incorporacin de sonidos o efectos
acsticos, vdeo, etc.
El primer paso consiste en preparar los documentos que vamos a incluir
en nuestras pginas, ya sean imgenes, fotografas, dibujos o nuevos archivos.
Con este fin hemos de tener en consideracin antes de iniciar cualquier tipo de
cambio ciertos aspectos como son: todos los elementos que hemos de incluir en
una pgina 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


resolucin 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
creacin de pginas Web, los proyectos creados parten de necesidades comerciales
y creativas bien dispares; adems los ejemplos especficos para cada ocasin
mostrarn otras tantas posibilidades creativas.

REDUCIR

ARCHIVO

La reduccin de los tamaos es hoy por hoy casi esencial y aunque la


mayor parte de ususarios de Znternet todava tiene mdems que no funcionan a
velocidades superiores de 14,4 o 28,8 bps; si que exigen con entusiasmo una
calidad de grficos y de contenido en las pginas Web mayores y ms sofisticadas.
A lo dicho hay que aadir que las velocidades de transmisin actuales con los
protocolos TCP/IP todava nos obligan a tener en cuenta el tiempo de espera en
la visualizacin de las pginas, relativamente paliado con las opciones de descarga progresiva incorporada en todos los formatos ms utilizados en la Web. Sin
embargo, y, aunque los cambios cada da son ms evidentes, el formato rey de la
Web sigue siendo GIF.
-?

Disminuir el tamao del archivo supone reducir las dimensiones del documento. Esto hace que debamos considerar las dimensiones con las cuales queramos que aparezcan las imgenes a tratar. Adems, deberemos reducir igualmente la resolucin si sta es superior a la establecida. Adems de contar con la
compresin realizada por el formato seleccionado.

Proyectos
Los documentos que hemos de utilizar para incorporar a la pgina Web
de la boutique de ropa son imgenes importadas desde un CD-ROM. Presentan
unos altos tamaos de archivo y sus dimensiones fsicas son elevadas, por otro
lado, presentan una resolucin correcta de 72ppi. En este caso hemos considerado trabajar con formato JPEG debido a las caractersticas del proyecto y que su
tamao ser 200 por 300 pkeles aproximadamente.

Tratar imgenes para la Web

Ir.-1 m,

&k"
1

'

[cm

7
1 p*rsrp@i.
P -*7irn
p,,i,!3
Y
,.

L]

vvlriI1

Ll ma*

1 R<"%!.i

rl

En la ilustracin 1 que nos sirve de

P
F

Figura 17.
Documentos
Photoshop y
cuadro
de dilogo
*
Tamao de imagen.

yecto. observamos que la reduccin de las dimensiones de


pxeles de 1024
por 1536a 200
por 300 pxeles

ha reducido drsticamente el
tamao del archivo pasando
de 4,5 M a 175 KB. La resolucin ha permanecido en 72ppi
Observe en la barra de ttulo la
visualizacin de ambos siendo:
36,12 por 54,18 cm y 7,06 y
10,59 cm respectivamente

Despus de realizar los ajustes de imagen oportunos y las transformaciones pertinentes en la imagen, procedemos a realizar una serie de pruebas para
determinar el tipo de compresin que mejor se ajusta al tamao de archivo deseado, manteniendo una calidad de imagen ptima.
En la pgina siguiente observamos los resultados obtenidos con una compresin JPEG de Calidad: 3 Media con la opcin Progresiva lectura: 3. sta nos
da como resultado un tamao de archivo 14,8 KB. La siguiente imagen est configurada con una Calidad: 5 Media con la opcin Progresiva lectura: 3. El tamao de archivo es 21,9 KB y, por ltimo, una tercera imagen con una Calidad: 7
Media con la opcin Progresiva lecbra: 3 . Da como resultado un tamao de
archivo 37,5KB. Comparativamente resulta evidente en la ampliacin efectuada,
los cambios de calidad provocados en la imagen, sin embargo, la vestimenta que

87

88

Webs con Photoshop


es lo que hemos de destacar aparece muy bien visualizada con un tamao de
archivo bajo (14,8 KB). An nos queda por decidir que" formato elegir.

Tratar imgenes para la Web

Figura 18.
Documentos
JPEG de
Photoshop
respectivamente.

Despus de seleccionar la opcin de calidad ms baja hemos realizado una ltima prueba indexando la imagen a
256 colores y convirtindola a GIF opcin Entrelazado. El
resultado ha sido una imagen de inferior calidad con un
tamao de archivo de 37,3KB.

En la pgina Web de la agencia de viajes hemos de incorporar un gran


nmero de imgenes. Este motivo hace recomendable trabajar igualmente con el
formato JPEG. No obstante, la gran mayora constan de amplias zonas de colores pIanos, como es caso del mar o del cielo. Adems han de visualizarse en
formato pequeo. Esto hace que debamos realizar una serie de pruebas antes de
decidimos qu formato utilizar.
Un anlisis comparativo muestra que ser ms efectivo el formato JPEG
utilizando una calidad baja. La limitacin a una paleta de 8 bits desvirta ciertas
imgenes. Al realizar una prueba de color aplicando en una de las fotografas que
contiene, colores alejados de la paleta patrn establecida, nos encontramos con
un tamao de archivo mucho mayor al utilizar el formato GZF, adems de limitarnos la seleccin de fotografas a mostrar o, sino deberemos optar por desvirtuar
los colores.

89

90

Webs con Photoshop


Pero veamos como quedan con uno y otro formato algunas de las imigenes incluidas en la pgina Web.

"

Las ilustraciones de la izquierda de ambos ejemplos pertenecen a GIF 8 bits opcin Entrelazado.Mientras que las de
la derecha a JPEG calidad3. A simple vista los cambios de
calidad no son evidentes, por lo que podriamos elegir cualquiera de los dos formatos. Sin embargo, los reducidos tamaos de archivo de JPEG nos hace decantar por este.

di

Figura 19.
Documentos
GIF y JPEG
de Photoshop
respectivamente.

La ilustracion d e la izquierda muestra iin JPEG calidad 1. Los resultados son


visualmente buenos, adems 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 imgenes
con GIF hemos aplicado en la imagen de la derecha la paleta patrn. En esta no es
visible, sin embargo, los tonos rojos-anaranjados de )a vestimenta han sido cambiados por unos tonos granates al igual que ciertos colores del fondo.

Tratar imgenes para la Web


Aunque como hemos comprobado el formato JPEG es el ms adecuado
para este trabajo descartamos su aplicacin, ya que en este proyecto para la Web
hemos de incorporar una animacin GZF. Esto nos llevar a un examen ms
minucioso de las imgenes a incluir en la pgina y las imgenes 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 pgina Web de una galera de arte hemos de incorporar un gran
nmero de imgenes. 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 visualizacin de las mismas hace ya casi evidente la utilizacin del formato JPEG o PNG, por encima de las diferencias de tamao de archivo que podamos obtener con ambos o comparativamente con el formato GZF. Comprobamos
los resultados que podemos obtener con distintas compresiones de JPEG y PNG.

Figura 20.
Documentos
JPEG y PNG
de Photoshop
respectivamente.

Las ilustraciones superiores muestran los resultados que se


obtienen con JPEG calidad 3 y JPEG calidad 5 respectivamente. Las inferiores muestran los resultados que se obtienen con JPEG calidad 3 y PNG filtro Adaptativo respectivamente. Hemos seleccionado JPEG calidad 3 por darnos
archivos ms pequeos al tiempo que buenos resultados.

91

Webs con Photoshop

92
+,:t.,

E+d,,

,!- ',,

..<.,*

:*..

9 .'.
-.
Ir,.r. ,-.-.-

;a

E<-I,

.:,-

F.+rr,.

25

y-m

1 ,*5' :,T

.*,u*,

!,,,+,

'>+#,'*!A,,.

:afi.m.*w*

l:)*.',-",.

,:

-T.

Figura 21.
Visor del navegador
1 Microsoft lnternet
Ex~lorercon
doci lmento abierto.
El documento P2c3pl en formato JPEG calidad 3 est
visualizado en el navegador
Explorercon unas dimensiones de 302 pxeles de anchora por 227 pxeles de altura. Con un tamao de archivo de 20,6 KB, lo cual es
relativamente alto.

REDUCCIN DE COLORES

Disminuir el nmero de colores que puede contener un documento o todos los documentos a incluir en una pgina puede ser un buen mtodo para reducir el exceso de tamaos del archivo. Esto puede resultar casi necesario en documentos de gran tamao o en imgeizes captadas con el fin de utilizarlas como
fondo, cosa poco habitual debido a los altos tamaos de archivo que ocupan. Sin
embargo, podemos crear virajes o duotonos e incluso convertirlas a escala de
grises desempeando el cometido para el que han sido creadas, como fondo y en
un segundo plano. De este modo se pueden crear fondos llamativos con tamaos
de archivo relativamente pequeos.

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 submens se encuentran en el men Imagen.

Tratar imgenes para la Web

UUColores de superpuesto.

Figura 22.
Cuadro de dilogo
Opciones de duotono
y documentos JPEG
respectivamente.

(7

Esta imagen de 240 pxeles de anchura por 363 pxeles de


altura (8,47por 12,81 cm.) presenta un tamao de archivo
en formato JPEG calidad 3 de 23,2KB. Reducimos el tamao creando un duotono. Con esta operacin conseguimos
disminuir el tamao a 21,5KB sin afectar a la calidad de la
imagen, excepto en la prdida de color. Volvemos a aplicar
una calidad de imagen inferior, en concreto de valor 1, dando unos resultados satisfactorios y un tamao 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 tamao de
archivo menor que a escala de grises conteniendo color.

Webs con Photoshop


C? 7
-

Figura 23.
Docilmento JPEG.

En est e caso hemos transformado la imagen creando una


textura y, a continuacin hemos ampliado sus dimensiones a 800 por 400 pxeles.
El proceso siguiente ha consistido en indexar la imagen
reduciendo los colores a 128.
La hemos convertido a RVA
aplicando el filtro Desenfocar
ms 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 continuacin convertir a RVA y aplicar varias veces filtros de desenfoque, los
colores aparecern ms unificados y conseguimos reducir sustancialmente
el tamao del archivo. Duplique el fondo en diferentes profundidades de
bits con el fin de obtener una calidad ptima y un tamao reducido.
Si trabaja con fotogrcifas utilice GIF con tramado de difusin si
tiene previsto posterizarlas. ya que da ms buenos resultados que si opta
por activar la opcin ninguna trama de difusin.

Otros mtodos que podemos utilizar para disminuir el nmero de colores


ms recurridos consisten en posterizar las imgenes o colorear ciertas partes de
las mismas. Con ello conseguimos limitar el nmero de informacin contenida
en el documento mediante una reduccin de la informacin de color, por un lado
y, por otro, restringir el nmero de colores que haya de contener la paleta. Este
ltimo recurso puede resultar muy interesante en pginas Web que han de reunir
un gran nmero de imgenes, pues se consigue incluir todos los colores de las
imgenes en una paleta reducida como puede ser 256 colores e incluso menos.

Tratar imgenes para la Web


m-

T-o
1

Zatl.iraci6n:
I

,W
'

~.3ncelar

En este ejemplo ilustrativo


se ha coloreado el fondo
con un tono azulado acercndose al de la pancarta
no seleccionada. Considerando que sus dimensiones
son: 165 por 247 pxeles
nos parece sustanciosa
una reduccin del tamao
de 19,2 KB a 18,1 KB. Con
el formato JPEG calidad 3.
El comando Tono/saturacin est ubicado en el
submen Ajustardel men :
Imagen.

Cargar...

'"

- --

Figura 24.
Cuadros de dilogo
Tono/saturacin y
Posterizar y
documentos JPEG
respectivamente.

I
1

<

:-u

wY

F Pt-evisualiza~i<~ri
posterizacin con un valor: 19. Paradjicamente se da el caso, por la caractersticas de
la imagen, que con la posterizacin conseguimos un tamao de archivo de 26,2 KB mien-

. :. ..

.-

(397por 269 pxeles),no nos parece adecuado su uso en este caso. Posterizar est ubicado en el submen Ajustar del men Imagen.

9,

Webs con Photoshop

UNOS CUANTOS EJEMPLOS


En este apartado trataremos de desglosar y analizar los aspectos desarrollados en este tema, adems de ver unas muestras de pginas Web que presentan
otros aspectos que vamos a desarrollar a lo largo del libro.

<

En la pgina de Alias se hace perceptible la reduccin del color, sobre todo


en el globo mundial, donde se descubre
que se han utilizado GIF con tramado
de difusin,probablemente de 5 bits e
incluso de 4 bits. El cilobo
ha sido fracimentado en tres imgenes, en parte para
reducir el tiempo de presentacin y otro
motivo importante es que la parte de la
derecha es un mapa de imagen. La mayor parte de zonas marcadas son vnculos, las cuales no trasladan a otros
documentos. Veamos un ejemplo, hemos pulsado sobre el mapa de imagen
Maya, la ilustracin superior-derechanos
muestra que la totalidad de la pgina est
constituida por imgenes probablemente tratadas con Photosho~
como se com-

Figura 25.
Visores de Microso lnternet Ex~lorer
respectivamente.

Tratar imgenes para la Web


e--

,u

i.

7-

.- .

?-.-... :,

.-

--

,,

Figura 26.
Visores de Microsofi lnternet Explorer
respectivamente.

--

amplias zonas de color slido lo que evidenca la utilizacin de GIFS sin tramado de
difusin, probablemente de 5 bits e incluso de 4 bits dando tamaos de archivo
menores que con tramado de difusin. El logotipo de la empresa ha sido separado
del fondo azulado con el fin de agilizar la presentacin. 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 pgina y
la imagen inmediatamente inferior a stas. Las letras subrayadas, para diferenciarlas del resto, son enlaces que nos trasladan a otras pginas del documento. Esto
agiliza la presentacin, 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 imgenes unificando todo el conjunto.
.-

> .

..

..

-O

Figura 27.
Visores de Microsoft lnternet Exptoier
respectivamente.

- -m

Womenl n< Emlrildemd DHtlm SliM


Las pginas de Designers Direct son senciIlas en su diseo. La inclusin de imgenes
se reduce a unos cuantos botones y unas fo- -=
tografas que visualicen lo que se vende.
El ruido existente en los botones y en la fotografa hace pensar que se ha trabajado
con GIFS con tramado de difusin, probablemente de 7 bits o 6 bits. El logotipo
central est incorporado al fondo. Los botones de la parte superior son mapas de

98

Webs con Photoshop


imagen y las letras subrayadas son enlaces que nos trasladan igualmente a otras
pginas del documento. La presentacin al igual que las imgenes no son de gran
atractivo, lo mismo sucede con el diseo de los botones, todo ello creado probablemente en Photoshop debido a sus caractersticas. El estudio de la imagen nos hace
sospechar que el fondo ha sido tratado previamente reduciendo el nmero de colores,
pues ste presenta una menor calidad que la figura de la chica, la cual aparece ms
definida y con mayor detalle.

Figura 28.
Visores de Microsoft lnternet Explorer
respectivamente.

En la pgina de Aflmfmerchantse ha aadido de forma mesurada las imgenes.


...7
Debido a que este tipo de pginas requieren de una definicin ms o menos
apurada se ha procedido a incluir pocos
.. t_
documentos grficos, stos son: el fon- 1b
do, el logotipo, la fotografa de artista, la
ilustracin 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 colocacin del
logotipo sobre el fondo nos descubre que
se han utilizado GIF89a con tramado
de difusin, probablemente de 8 bits.
Tratadas con Photoshop como se comprueba en la ilustracin inmediatamente
inferior. Las ilustraciones superiores ':G-~.j:i
muestran parte de la primera pgina. El
texto tiene repartido el protagonismo junto con las imgenes. Los botones indican las galeras que se pueden visitar.
La Gallery 111 nos muestra una fotogra- I
fa en blanco y negro del artista as
como una obra suya representativa.

N ,.T

.. A L-.

,- -

hr

-...,

:, .

. . ....

m,.,...

,111

0
v.----

-,

..,..,,-A

.->.-

jm~

A c.-*=
v> s ~ ~ a n b !sol
l a agua ~ p ! n / ~mu s! a plaqap X a2
-gula# 01 Joplruas la !S010s ' d ~ O g
J ~ ~ ! la
JJD
! ~ Dsouialaqap
~D
ua%~ur!
ap
un sa oJualunDopla !S i!npu! D ua%.
DI ap JO~DZ!IDDOI
la D D ! ~ U !

mn

D#DW

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 opee~qnsolxa) 13 .sauoueu sope~op'salnze sol aJlua saJolo3 sol
aluaue!~el!~oeu
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
-

,
mI

;*

...---,-

"
-.?,
;
,,,

.,

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~oeuel 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
-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
'ell!:,uassa sep!lo~
01
u
.
819 ap eu!6pd e l

Webs con Photoshop

IMGENES DE GRAN TAMAO


En el primer ejemplo mostrado (fig. 25 y 30) el logotipo de la pgina
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 pgina Web y que aparezca descargada
fraccionadamente. Normalmente, este proceso se lleva a cabo cuando los documentos ocupan altos tamaos de archivo o, como en el caso de la figura 25,
adems por tratarse parte de la imagen en un vnculo.
El mtodo que se utiliza para ensamblar fragmentos de imgenes y recomponerlas en la imagen completa consiste en utilizar las etiquetas que permiten crear tablas. En este caso, no interesa crear bordes ni separaciones entre las
celdas que, en esta ocasin corresponden a fragmentos de imgenes 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 apareceran perfectamente encajados.

..

Para realizar el proceso deberemos especificar en la etiqueta TABLE


BORDER un tamao de borde de valor O, quedar especificado como <TABLE
BORDER=O>), del mismo modo la canidad 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 fragmentacin, siendo presentadas con mayor rapidez que si hubesemos descargado la imagen completa.

-*.

.,

- *.
-

,J

>:

-. ,-.

. "-,'

'.

--

m"

Figura 30.
Visor de Microcoft lnternet Explorer.

Tratar imgenes para la Web


Por ltimo las caractersticas del documento aparecern 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 aadir el atributo ALT, para los
usuarios que disponen de navegadores que no visualicen imgenes. Pondramos
en este ejemplo y despus de ltimo atributo aadido: ALT= imagen de vestido
a cuadros vichy catalogado como no 15>

nota

...

Disee sus pginas 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
I

Para aplicar un valor O a fragmentos de imgenes tratadas como tablas la etiqueta queda especificada del siguiente modo:

c TABLE BORDER=O CELLPADDING=O CELLSPACING=O>

nota...
Las tablas adems de ser un buen recurso para disminuir el tiempo
de espera,tamaos de archivo altos o aadir mapas de imagen son utilizadas
igualmente para aplicar ingeniosas animaciones GIF. Realmente pueden
crearse animaciones y diseos muy interesantes.

,,

La creacin de texturas, utilizar imgenes como mosaico o rellenar el


fondo con colores slidos resulta ser algo habitual en proyectos de pginas Web.
El fondo es un elemento esencial en un proyecto, puede dar un aspecto realmente
profesional al diseo o, todo lo contrario. Un fondo inadecuado provocar una
mala visualizacin del texto, que se har ilegible. El fondo es el elemento sobre el
cual colocamos el resto de elementos que componen la pgina. 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 caractersticas de la
pgina y en consecuencia seleccionar el fondo ms adecuado.
Pero como ya indicbamos en el captulo anterior incluir imgenes como
fondo resulta ser una tarea algo compleja, adems de aumentar el tiempo de presentacin -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 diseo
debe estar realmente estudiado. Lo que es ms comn es utilizar como fondo
ciertas imgenes tratadas o texturas creadas e incorporarlas a modo de mosaico
sin que se aprecie la subdivisin existente. Aunque lo ms habitual es que no se
busque un efecto de fragmentacin del fondo a modo de azulejos, tambin puede

Webs c o n Photoshop

104

resultar interesante conseguir cierto ritmo visual. Con este fin provocaremos un
desfase y una diferenciacin acusada en los bordes de las imgenes, de este modo
el efecto mosaico quedar acentuado.
.
,.,.
; l.--_.*,-5-.
- (3 >
. ."
.
-~

.-

.,,., *."

b*.,~

:1

>X
:i

.L. L .

8.

,,:
,.

10

- ,..
3-

..*

.->

--

Hemos utilizado una imagen en escala de grises a modo de mosaico.


Observamos que este grfico como
fondo dificulta la lectura de textos Sin
embargo, con cuerpo mayor y una
eleccin de color adecuado para la
letra puede resultar interesante Las
imgenes debern ser incorporadas
I de forma fraamentada
Dara aue resul"
te efectiva su presentacion.

Figura 32.
Visor de Microsoft
lnternet Explorer.

..

Figura 31.
Visor de Microsoft
lnternet Explorer.

....,. .

- .
-.
.

,
Se ha creado un texto con va..* .
, ,
rios filtros de Photoshop. A lo lar- +. . '
_,_
go de este captulo se muestran
.:; . .
r ' diferentes tcnicas para crear 4
. .
<':
.
*
<
.
. .- r
..
infinidad de texturas para fon,<:
.
dos Es un tipo de textura que
.-' e - " ,,, >
,
no centra la vista en ningn pun'
*
to en especial; sin embargo, si
,
,
,'
"; . . *
,
. .
.' ,- :
la miramos durante un tiemoo
produce fatiga ocular.

. A

<

,*

- ..

>

,-

'.lo

, , .*

- -

- i .

'LV

LL

-..*

-m

-. . --

,>

.
.

.
< '
.

~~~~~~

. . -..,"
.n

:- > "

P.

r-

i"

..

.'

. - .I

,'

*x. r i m m ~ r r c c ~ i a a r m '. .
1..

'

Y. L.c&aII

r*ruiow*opu pul

.
,

'
>

i<

<*TI**YiO".

..
\ .

..

?,

. .
.

,piramn,mv ELCPCOR

Ifir*isa;

'

I r .

&E SEA 1,&6~6


S ~ E C ~ I O ~~ ' N
O T LE ,
,~

- ., IHT&SA

Figura 33.
Visor de Microsoft
lnternet Explorer.

'

'

Este fondo grfico resulta inadecuado en una pgina Web con texto en
'
cuerpo
pequeo, ya que dispersa la
..
y
fatiga
la vista.
letra
..

. .
~ O E C V ~ .~,.B. - ..
* .
'

- t4 r

:,

Lo&P

m-

.-

!
ac:rAivin&o'Y ~ aeo~~g;Ao$cuclbo
:

4
d
.~ ~
FUFNT
W
,,
...". , $ E L E c G ~ o $ ~

A-

Preparar fondos y texturas


FONDOS CON COLOR
Utilizar un color slido como fondo resulta ser unos de los mtodos ms
recurridos y, ciertamente pueden lograrse webs profesionales y de aspecto impecable. Los colores slidos resultan interesantes cuando en la pgina hemos incluido 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 inters o cualquier otro efecto psicolgico 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 slido, la rapidez de creacin es el segundo; ya
que simplemente tenemos que apuntar el nmero hexadecimal correspondiente al
color seleccionado e incluirlo en la etiqueta de fondo para que aparezca en el
documento HTML especificado. Otro mtodo ms rpico consiste en recurrir a
programas de creacin de pginas HTML y aplicarlo en el fondo para que sea
creada la etiqueta automticamente 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
cuestin 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 pintura un azul de la paleta Muestras que aparece por defecto y
que en nmero hexadecimal
corresponde a un nmero
8888FF.

Como es lgico debemos conocer el cdigo 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 nmero hexadecimal. Para determinar su valor en dicho cdigo
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 cdigo
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.
-,

r HVP
Slol

1 ~~~l

C-.
Figura 35.
Paleta Color de Photoshop y
Calculadora de Windows 95.

Los porcentajes del color seleccionados los hemos visualizado, en


este caso, a travs de la paleta
Color de Photoshop.

ro correspondiente al verde de
valor 128, dndonos su correspondiente hexadecimal80. IntroducimOSel va'or
y* a 'Ontinuacin, pulsamos sobre la opcin hexadecimal. As de sencillo.

ril.:

Vy
x'3

Bin

tir+I'i~
EXP1 ln

~ " r n l srn

oat

Ocl

rr

1 11 4
1 MR]
1 ( liql 1
1 1 1 1
1 1 ltX J ~1 1

FFEI

I X

M';

n!

x,?

Dep

Back
7
i
1
0
A

1
1
1
1

1
1
2 1
+t 1
1
8
5

R*,

CE

G,&

1,

9 I d ~ n d l h n d (

1
1
.1
c 1
fi

1
1
!
D 1
-

11,

1
1 1
1 1
1 1
Y

t '3%? l < b \

1
--

yer

E,,rl2q

Back

1
1

rri-

CE

1 1 1 1 4 7)819)d)(Pnld
1 14 1 1 1 1 1
1 l,(
4 1 1 1 1 1 1
[ 1 n! 1 4 1 +-, 1 . 1 + 1 1 1
>C?I PI 1 1 1 c 1 D 1 1 F ]

,lrnq1
FXP

tan(

11,

ion(

sin

_sJ

z.3

ikl

iu

,drNr1

l - ! ~ NNN*
131i

Tambin 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 nmero hexadecimal de dicho color, pudiendo elegir una gama reducida y comprobar como queda cada uno de los colores slidos como fondo de la pgina Web de
un modo efectivo y rpido. Aqu mostramos un ejemplo de este tipo de software.

Preparar fondos y texturas


Figura 36.
Cuadro de dilogo
Color y de Web color.

<FO.

r m m r i i
irimmmmm
m i i r i i i i
-,

nrrrrrir
-

,.Mab-dw

B g w u a Li colgcr w

Definir el atributo BGCOLOR


para un fondo de color slido
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 nmero hexadecimal.
De este modo debemos especificar cada color con su respectivo nmero
identificativo. Por ejemplo, si queremos que el fondo aparezca de color blanco
debemos escribirlo del siguiente modo: <BGCOLOR=FFFFFF>;si seleccionamos el negro como color de fondo debemos especificarlo como: <BGCOLOR=
000000> y as todos los colores que deseemos.

negro = 000000
gris medio =808080
blanco =FFFFFF
amarillo claro = FFFF8O
amarillo brillante = FFFFOO
rojo brillante = FF0000
magenta =FFOOFF

morado = FFOOFF
violeta =800080
verde brillante = 88FF88
verde turquesa = 408080
verde oscuro = 008080
azul brillante = 0000FF
azul claro = 8888FF

07

Webs con Photoshop

108

La etiqueta de cmo y qu constituye el fondo del documento entra dentro del Corpus de la pgina web. Es unos de los atributos que especifican el cuerpo de la pgina. As, la etiqueta BGCOLOR aparece inscrita dentro de otros
atributos comunes al elemento BODY, como son informacin de las listas, presentacin de las imgenes, resaltar las frases, la creacin de enlaces, entre otros.

1
I

ligo sobre html...


Para aplicar un color slido como fondo ha de especificarse del
siguiente modo (FFFFFF representa el color blanco)

<BODY

BGCOLOR =FFFFFF >

...

nota
3

El atributo BLACKGROUND est disponible a partir de la versin

HTML 3.0 y aparece operativo en ciertos browsers; entre los ms conocidos Nestcape Navigator, Microsoft lnternet Explorer o Arena.

FONDOS
Pero como ya indicbamos en el captulo anterior incluir grficos formados por texturas o imgenes como fondo resulta ser una tarea algo compleja,
adems de aumentar el tiempo de presentacin -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 diseo debe estar realmente estudiado. Lo que es ms
comn es utilizar ciertos tipos de fondos con imgenes tratadas o con texturas e
incorporarlos como un mosaico en las pginas. Aunque lo ms habitual es que no

Preparar fondos y texturas

,09

se busque un efecto de subdivisin del fondo a modo de azulejos tambin puede


resultar interesante en segn 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 incluidas en un documento se procede a seleccionar dicha zona del documento en cuestin y a continuacin clonarlo como tal en el archivo que definiremos como fondo. Esto es importante comprenderlo, ya que si tenemos previsto mostrar intencionadamente las diferentes subdiviones no es necesario realizar este proceso.
Cuando queremos especificar las caractersticas del fondo podemos introducir un
archivo correspondiente a una imagen, que en este caso, puede pertenecer a una
textura diseada. La imagen del archivo se repite como un mosaico hasta llenar la
ventana del navegador, el nmero en cuantas veces aparezca repetido estar en
funcin del tamao fsico de la textura.
Figura 37.
Documentos de Photoshop
respectivamente.
3

La ilustracin superior muestra


como queda un fondo creado
mediante la clonacin de un motivo. 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

-IUIX

visor. En la ilustracin inferior hemos fusionado el


motivo alineado aplicando
el filtro Desenfoque de
movimiento del submen
Desenfocar,con un ngulo de 47grados y una Distancia de 20 pxeles, consiguiendo disimular las Ineas divisorias al tiempo
que aumentar la sensacin
tridimensional.

Webs con Photoshop


Cualquiera de los filtros de desenfoque puede sernos tiles para fusionar 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 Tampn con la opcin clnico activada o la herramienta
Desenfoque o duplicaremos ciertas zonas con la Varita para enmascarar las zonas de unin y, un largo etceter. Estas herramientas nos permiten transformar la
superficie dndole un acento ms 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 satisfactorio el resultado.
La eleccin depender de las caractersticas del documento del cual extraemos la textura. Ciertos documentos contienen texturas muy regulares, por
ejemplo, podemos elegir como fondo una porcin de cielo de un documento o,
una porcin de mar, o una pared o la textura de un mrmol.

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 Seleccin. A continuacin, copiamos y pegamos
repetidamente el documento hasta completar la superficie.
Este proceso puede hacerse con los comando Copiar y Pegar
del men Edicin o arrastrndolo hasta el documento destino.
Del mismo modo puede optar por definirlo como motivo
mediante el comando Definir motivo del men Edicin y
clonarlo en el documento destino. Utilice el sistema que mejor
se adapte a usted.

,,)Figura 38.
,'

Documentos de Photoshop.

,,,

Preparar fondos y texturas


2. Como podemos observar en la ilustracin de la pgina anterior
se percibe como las diferentes selecciones han sido acopladas.
Para realizar el siguiente proceso es aconsejable que estn
todos las partes agrupadas en una misma capa. Para que las
zonas de interseccin 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 seleccin un valor de calado.
Calar la seleccin proporciona una difuminacin sobre la
zona disimulando ostensiblemente el efecto de camuflaje.
Seleccione el comando en el men Seleccin.
1

Documentos de Photoshop
y cuadro de dilogo Calar.

Cancelar

-,.
c.

lb

.,

..

En este ejemplo hemos seleccionado


una zona y trasladado a otra capa rnediante el comando Capa va copiar.
A continuacin, hemos calado la seleccin dando un valor de calado de
5pxeles. Despus, hemos trasladado la zona hasta el lugar deseado
hasta acoplarlo sin que se aprecie.
Del mismo modo puede utilizar la herramienta Tampn reduciendo el tanto por ciento de opacidad.

Observe en la ilustracin inferior cmo se p


ha conseguido camuflar la zona de interseccin en la zona de la izquierda comparndola con la zona remarcada de la derecha. Siguiendo este proceso aplicaremos
zonas cercanas en el resto de las juntas.
Por ltimo, todas las capas creadas las acoplaremos para reducir el tamao del archivo.

Webs con Photoshop

112

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.

.
Figura 28.
C-,-.".ri..:i*?-- .-.
::
--...,-.
-1Visores de Microsofi lnternet Ex~lorer

-,N

.m.-

- - p.,

respectivamente.

"oQ-

.
.
-

.-<.T
"

,N,,

Lr

-.

..
-

1,'

,a'

, ,*,

',

:
'

-.,.... --

-.-

..-..r...*
,,..

1,

." ',

,-'

8,

l,,

,,

.. . -. ..

.&

,.--*+.

-j.

Ir

,,N

,:m

En el caso de la pgina Mernbers se observa


como un motivo se repite a lo largo y ancho
de la pgina. Posiblemente ste haya sido retocado en las zonas limtrofes con el fin de que
n aparezcan suavizadas. Al mismo tiempo observamos como ha sido utilizado el mismo motivo
en las dos partes en las que han dividido la
pagina; lo ms probable, es que se trate de una
- pgina de marcos constituida por dos pgi7 nas de contenido. Por ltimo comentar que la
legibilidad del texto es intermedio.
Todo lo contrario que la pgina Househome
que como podemos comprobar el fondo
texturado no supone un impedimento para realizar una buena lectura. Esta textura de colores
suaves y que produce un efecto marmreo ha
sido muy bien elegida y combinada con el color del texto que es de un tono ms oscuro que
el fondo, aunque se han dejado extensas zonas vacas y se observa que no se han camuflado bien las zonas de unin.
Por ltimo la pgina Connetexpreex siguiendo
el esquema semejante a la primera utiliza el
fondo como un elemento preponderante, yo
dira en exceso, pues produce cansancio visual
y dificulta la legibilidad del texto as como el
mensaje que se enva utilizando colores complementarios entre fondo y texto, el primero
aparece bien tratado sin observarse las zonas

@ u. &- @ ~ : % ~
,

l-

'.
,...

-.-..... . ..
,.

,.

-..

de unihn.

Preparar fondos y texturas


Disear texturas para fondos
Photoshop cuenta con varios filtros muy apropiados para preparar texturas para fondos sin grandes complicaciones, aunque, como es lgico, siempre es
posible recurrir a asociaciones variadas hasta obtener una textura enriquecida.
No obstante, no entraremos en complejidades crecientes, ya que aplicar diferentes filtros combinados con otros tipos de efectos que el programa dispone podra
llevamos casi por completo un libro. Nos centraremos en describir una serie de
filtros y algn que otro efecto idneo para crear fcilmente texturas para fondos
de pginas Web.

Crear efecto de nubes


Los filtros Nubes y Nubes de diferencia incluidos en este submen Znterpretar producen los efectos que indican sus nombres. Sin complicaciones podemos conseguir un fondo diferente y sugestivo que adems relaja la vista, y
combinado con colores adecuados para el resto de elementos de la pgina no
tiene por qu producir dificultades en la lectura.

1. Creamos un documento nuevo con una resolucin de 72 ppi


en modo RVA con las dimensiones requeridas. En este caso
son de 400 pxeles de anchura por 210 pxeles de altura.

a.

-*
Tdmd
I

Con*

r
r

[ C o k Ja

Carcbr

IC<'.~.
/ c<xclr
-I

1 pxcI.,p>lja?.

&ob-

M&

11

Figura 41.
Cuadro de dilogo Nuevo y
documento de Photoshop.

113

Webc con Photoshop


2. Lo ms rpido es cubrir el fondo con un color, sin embargo,
el filtro puede ser aplicado sobre cualquier imagen.
i
#-lnixJ

1'.

.i.

Figura 42.
Documentos de Photoshop
respectivamente.

Y1

La ilustracin superior muestra


el resultado tras aplicar el filtro
Nubes sobre un fondo naranja.
Se obtiene una degradacin de
tonalidades anaranjadas.
Con el filtro Nubes de diferencia obtenemos el mismo efecto
aunque los colores son invertidos por su complementario, en
este caso por tonos azulados, tal
y como muestra la ilustracin inferior. 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
diferencia se a d a ~ t a dicho color en relacin a' las formas y
colores del documento en cuestin.

Hemos realizado una prueba para determinar qu tipo de formato resulta el ms


idneo en relacin a la calidad, tamao y optimizacin de archivo. Los resultados han
sido los siguientes. Un formato GIF indexado con paleta Exacta de 219 colores
con tramado de difusin nos da un tamao de 28,O KB, lo que es muy alto, mientras que con formato JPEG de calidad2 con opcin progresiva 3 nos da un tamao de archivo de 4,60KB obteniendo resultados ptimos.

Textura
Los filtros englobados en este submen Textura producen efectos diversos realzando el conjunto del diseo de la pgina sin aumentar en gran medida el
tamao del archivo. Sin embargo, debemos tener presente que cuando trabajamos con documentos indexados se ha de reducir la paleta al menor nmero de
colores posibles, para que el archivo sea lo suficientemente pequeo lo que nos
obliga a limitar en cierto modo el diseo trabajando con GZF.

Preparar fondos y texturas

115

h a y que saber...
Granu1ado.- Produce efectos de texturizacin en la imagen. La amplia gama de
granulados combinado con variaciones de contraste e intensidad nos permiten obtener un repertorio de efectos visuales realmente amplio.
Retales.- Recompone la imagen por medio de una combinacin a modo de pedazos
de tela ms o menos grandes, dependiendo del tamao del retal. Este tamao puede
abstraer la imagen o seccin 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 dependern de la anchura de la lechada y el tamao de la tesela especificadas.
Vidriera.- Subdivide la imagen en celdas de mayor o menor tamao 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 ms notable diversifican el resultado, ya
que puede seleccionarse el tipo de textura a utilizar o modificar la direccin de la
luz.

La ilustracin superior ha sido obtenida apli-

- - --

-- --

- -- - -

cando sobre un fondo blanco el filtro Teselas


con un tamao 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 opcin Huellas con
una intensidad de 22 y un contraste de 68.

Figura 43.
Documentos de Photoshop
respectivamente.

A-

,--

Webs con Photoshop

116

l. Seguimos el proceso descrito en el apartado anterior y


creamos un documento nuevo con una resolucin de 72 ppi
en modo RVA con unas dimensiones de300piXeles de altura
utilizando el Bote de pintura.
A continuacin, aplicamos el filtro Texturizar del submen
Textura ubicado en el men Filtro.
IEh~.-

il

1 7 1
1
bncdar

El resultado obtenido parte de los siguiente valores introducidos. Tipo de textura: Arpillera, Escala: 200 %,
Relieve: 2, Direccin de la luz: Inferior derecha e Invertir textura activado. Bien podra utilizarse para la presentacin de lienzos en Internet.
A,- - -. .

+ 1 1 "U'

I.ym::
A

I?
nde la hl?

--

Inter~ud~recha

R !nvertr textura

Figura 43.
Cuadro de dilogo
Texturizar y documentos
de Photoshop.
4

-11-1

d,

Observe el cambio producido en la misma imagen segn la opcin de formato


A elegida. En JPEG hemos seleccionado un valor de calidad 1 con una progresin de 3 dando un tamao de archivo de 17,4 KB, mientras que con GIF
indexando la imagen con una profundidad de color de 2 bits y tramado
de difusin (4 colores) hemos obtenido un tamao de archivo de 10,8 KB
sustancialmente menor. A esto hemos
de aadir el cambio y la transformacin
que ha sufrido la imagen eliminndose
por completo el aspecto tridimensional
de la misma en GIF. Sin embargo, este
efecto de posterizacin que se crea
puede resultar interesante en segn
que fondos.

Preparar fondos y texturas


En las pginas anteriores se han mostrado tres ejemplos sencillos de cmo
embellecer el fondo sin complicaciones evitando fondos lisos y montonos. Aunque podemos enriquecer notablemente las texturas creadas aplicando diversos
filtros en un mismo fondo, como ms adelante mostraremos.

Otros filtros otras t e x t u ~ a s


La creacin de texturas no est restringida a los filtros mencionados, sino
que ms bien con la gran mayora de filtros podemos disear una gran cantidad
de fondos. El gran inconveniente que presentan muchos es que requieren de algo
ms que de un fondo liso. Esto hace que debamos aplicar algn que otro filtro con
anterioridad o, bien, aplicarlos sobre algunas imgenes, 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 opcin a cargar como textura otras imgenes- suelen dar buenos
resultados. Este es el caso de Trazos de pastel, Cont Crayn y Cargar textura.
Tambin podemos emplear los filtros sobre fondos de color para aplicar texturas,
por ejemplo, las que nos proponen los filtros: Estilogrfia, Pelcula granulada,
Manchas, Modelo de medio tono, Papel con relieve, Papel hmedo, Reticulacin,
Azulejos, Extrusiiz, Destello, Efectos de iluminacin, Grabado, Puntillista,
semitono de color y Aadir 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 simplemente aplicando dos filtros.
En primer lugar hemos optado
por Efectos de iluminacin y,
acto seguido, hemos aplicado
el filtro Cristal. ste ltimo no
produce ningn 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 iluminacin antes que ste.

117

118

Webs con Photoshop


Figura 45.
Documc3nto de Photoshop.
El fondo es producto de la aplicacin de los filtros Texturizar y
Ondas marinas sobre un azul turquesa. Es un tipo de fondo que no
-resalta ms de lo necesario evitando mayor protagonismo que el
que se le ha dictado: servir de fondo. Con este tipo hemos de evitar
letra de cuerpo muy pequeo o, si
es necesario su uso, utilizar el color ms adecuado para que lectura sea ptima.
Figura 46.
Documento de Photoshop.
En la ilustracin superior hemos aplicado el filtro Sumie, dando como resultado la
imagen de la derecha. Estefondo debe ser empleado
para pginas Web muy especficas, haciendo que tenga aspectos en comn con
el resto de elementos. Si no
es as, ste adquiere un exceso de protagonismo, lo
cual no nos interesa.
Figura 47.
Documento de Photoshop.
En este caso el fondo ha sido diseado utilizando los filtros Nubes
y Grietas por el orden mencionados y sobre un fondo azulado,
-dando en el primero un efecto de
creacin de espacio y, el segundo
una sensacin de superficie y plano donde situar los objetos. Admite una fcil lectura y, dadas sus caractersticas, puede incorporarse
en gran nmero de pginas Web.

Preparar fondos y texturas


Realizar transformaciones
Los motivos o texturas creadas pueden ser alteradas y convertidas en
variaciones del original. Este aspecto puede resultar muy interesante cuando pretendemos utilizar una textura creada, pero los colores que posee no son los ms
idneos para la pgina que en ese momento estamos diseando. Realmente podemos optimizar el tiempo de realizacin de fondos texturados, pues, jcuan complicado y arduo es el proceso de retocar las juntas de unin 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 correccin de color y de efectos especiales pueden ser muy tiles
para elaborar nuevos fondos.
Figura 48.
Documento de Photoshop.

En la textura representada en la
figura 44 se ha aplicado el efecto
ecualizary unos cambios de contraste mediante el comando BriIlo/contraste. De este documento extraeremos la textura definitiva marcada por el recuadro (150
por 150pxeles).De ste retocar
los bordes con el fin de que no se
perciban las sucesivas repeticiones del archivo en el visor del
navegador.

.-

- , + .:
o
. -.
,

..
-.
. -.

-.

e-"
.

, .
'

'

traemos una nueva textura


marcada por el recuadro. Retocaremos los bordes. Aunque es relativamente grande:
201 por 135 pxeles, no reduciremos su tamao, ya
que ocupa 10,5 KB guardado en JPEG calidad 4.

11

Webs con Photoshop

120

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 cualquier tipo de imagen, ya sean escudos, insignias, motivos geomtricos, fotografas, 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 nmeros
hexadecimales correspondiente al color slido 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 entorpecera la descarga
de la pgina innecesariamente.

'7
4

Si encuentra que una imagen se descarga muy lentamente en el


navegador y que entorpece en gran medida la reduccin de colores en los
que debe estar constituida la pgina, puede optar por crear un archivo
pequeo que slo contenga un color slido. Esta forma de crear fondos
resulta muy til, rpida y efectiva; adems acelera el proceso de aparicin
del fondo en el visor del navegador.

...

a l g o sobre html

Para aplicar una imagen como fondo ha de especificarse del siguiente modo:

<BODY BACKGROUNG= (<nombrede archivo,, >

Preparar fondos y texturas


Proyectos
En este apartado mostraremos el proceso desarrollado para la elaboracin del fondo de la pgina Web de la galera de arte.

1. Creamos un documento nuevo con una resolucin de 72 ppi


en modo RVA con las dimensiones requeridas. En este caso
son de 800 pkeles de anchura por 600 pxeles de altura.
El nuevo documento denominado fondo1 lo cubrimos con
un azul turquesa oscuro utilizando Bote de pintura.
- -

Creamos un documento con un tamao que


cubre el tamao de configuracin de mi
monitor, que es de 800 por 600 pxeles. En
parte por querer visualizar el efecto
globalmente. Si el resultado es satisfactorio 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 iluminacin 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.

121

Webs con Photoshop


m*ll..-

Figura 51.
Cuadro de Texturizar, Efectos de
iluminacin y Teselas respectivamente
y documento de Photoshop.

1
1

Texluia

::
A

Eacoli

I
'

Relieve
i\

Dicccion de la hc

(lnirim defecha

!nwflirte~tuto

l
1

Los valores aplicados son en


Textura: Arpillera, Escala:
200%, Relieve: 2, Direccin
de luz: Inferior derechae Invertir textura activada.

kta

:mcein

..

5":

Los valores aplicados son en Estilo: 2AMSPOT, Tipo de


luz: Foco, Intensidad: 17, Foco: 91 (ancho), Lustre:
-67 (mate), Material: -58 (plstico), Exposicin: O, ambiente: 20 (positivo) y Canal de textura:Ninguno.

;11

13p-ioncr

T a m R o de anlw
h

I
;
i

bn-trnn de kchads

r;-

ALIYU &hada

r"
L

Los valores aplicados son en


Tamao de azulejo: 39, Anchura 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 ilustracin 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 atencin


de las reproducciones de los cuadros que debemos incorporar.
As procedemos a cambiar el color mediante el comando
Tono/saturacin, sustituyndolo por un tono azul violceo.
Figura 52.
Cuadro de dilogo
Tono/saturacin.

LLn

rcm

Cargar..

1
1

Cancela

~atwacin-

Luminos@ad:
l

,
. ,
r Cglorear

R fievk~ializacin

4. El archivo que utilizaremos como mosaico no deseamos que


sea muy grande. Realizamos una prueba duplicando el
documento y recortndolo incluyendo seis teselas en la nueva
imagen. Comprobamos que el archivo es un tanto superior a
100 por 75 pheles que es el tamao que nos interesa que
tenga el documento. A continuacin, procedemos a clonar
los extremos con el fin de que aparezcan fusionados cuando
se cree el mosaico en el visor del navegador.

Figura 53.
Documento de Photoshop.

Ai

Utilizando la opcin Clnico alineado del Tampn nos


disponemos a clonar en paralelo las zonas, tanto en
verticalcomo en hotizontal, con el fin de que aparezca
repetida la textura a sendos lados y en paralelo.

.
.
e*

5. Nuestro inters es que el documento tenga las dimensiones


mencionadas, es decir, de 100 por 75 pceles. Con este fin
procedemos a reducir el tamao en pxeles del documento en
Tamao de imagen. Comprobamos que al mismo tiempo
reducimos su tamao de 26 KB a 22 KB, estando todava en
formato TZF.

Webs con Photoshop

de imagen y documento.

Tam&

de imoreslcri

%&!ira
Aljura

1353 1 cm
F'
1 cm

Resoluc~[

1 pr~el~~~ulgada

r Mantemr propwuon

1 3 libra

l7 Yolver a mostrar la irnagen

6. Con el fin de comprobar cmo 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 seleccionamos y lo guardamos como motivo pulsando el comando
Definir motivo. El resultado es el adecuado, no se perciben
bruscas acomodaciones en los bordes.

, ,

'---I
1

-- ,- -

-_-

O E

2.'

--

-- -

--

---

Figura 55.
Documentos de Photoshop.

- - --

--

Seleccionamos el motivo mediante el comando Todo. A continuacin, hemos pulsado


el comando Definir motivo e inmediatamentehemos activado el documento destino y
la herramienta Tampn con la opcin Motivo alineado aplicndolo por toda la superficie. Convirtiendo a JPEG calidad 5progresivo 3 nos da un archivo de 7'13 KB.

Preparar fondos y texturas


Figura 56.
Visor de Microsoft
lnternet Explorer.

r . t

Ci l.

..,,

Aqu podemos observar como queda el


fondo tal y como lo hemos diseado,
siendo este un formato JPEG calidad
5 progresivo 3.

FONDOS CON COLOR SLLDO


Y TEXTURA A LA PAR
Dependiendo de las caractersticas del diseo de pgina y de los aspectos
ms relevantes que debamos resaltar, puede resultar muy interesante combinar en
el fondo zonas con textura y zonas con color slido. Resulta obvio que las zonas
con color plano estn indicadas para la colocacin de texto, sobre todo si ste es
,de cuerpo pequeo y, adems coincide con un tipo de textura que puede dificultar
tremendamente la lectura del mismo, haciendo el diseo poco atractivo y digerible. Un mtodo eficaz al tiempo que rpido consiste en utilizar tablas en la pgina
Web. S, ya sabemos que las tablas son usadas habitualmente para otros menesteres, pero, quin ha dicho que no podamos emplearlas con otros fines. Realmente
utilizando tablas y con algo de ingenio podemos crear bellsimas pginas.
En este tipo de fondos especificamos como fondo generalmente una textura; no obstante puede ser cualquier tipo, incluso un color slido y, por otro lado,
un color slido con el que cubrir el fondo de la tabla. En este apartado no trataremos el tipo de fondo y cmo crearlo, sino ms bien en cmo combinar cualquier
tipo de fondo, en especial un fondo con textura, con un color slido 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 adems del tamao
de cada celda y el nmero de columnas, si procede. Todo depender del diseo

125
B

Webs con Photoshop


adoptado. Como es lgico los diseos pueden ser infinitos, por este motivo nos
proponemos mostrar un ejemplo ilustrativo de cmo crear un fondo de estas caractersticas
L*P

Y"

*.

r-

,Q
Y-

hrinl: =t*ib

L
:;=
.-.

,-

2
*_

p.-,.

;,'

'3

-..

t."

.-.--

) _

-ir-.---

L...

, &:

r--

;.h--.4,,c

'

I.-

:
e
,

>.m,

d * ~ -

..

Figura 57.
Visor de Microcoft
lnternet Explorer.

Utilizando la textura creada en apartados anteriores mostramos cmo de


manera rpida y eficaz podemos utilizar tablas para incluir texto en su
inferior y dar al diseo otra dinmica.
En este caso, incluiremos dentro de las
celdas informacin como texto mientras que en la zona texturadas colocaremos imgenes y mapas de imagen.

Definir la etiqueta TABLE


para un fondo contablasu
3

Las etiquetas principales para la creacin de tablas sonTABLE y I'TABLE,


sin embargo, es necesario cubrir otras caractersticas de la tabla, es decir, su diseo: el nmero de filas y columnas que lo compondran. Las tablas clsicas estn
constituidas por un ttulo, los encabezamientos respectivos de las distintas columnas, dichas columnas, las filas, las caractarsticas de la celda y las del borde.
Lo ms probable es que cuando utilice tablas para combinar un fondo con color
slido y textura o color slido e imgenes o, quien sabe, la combinacin 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 caractersticas de dichos atributos.
Con respecto a lo contenido en las celdas diremos que puede ser alineado en el: centro, inferior, superior, izquierda y derecha tanto si se trata de texto, de
vnculos como de imgenes. Las caracterkticas del borde pueden ser configuradas -ya se trat de forma especfica en el captulo 4- de tal modo que detenninemos el grosor del borde y el espacio entre el contenido de la celda y el borde y la
cantidad de espacio entre las celdas. Tambin podemos determinar el color del

Preparar fondos y texturas


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 permitirn
disear cualquier tipo de tabla, ya sea para emplearla con el fin que en este apartado 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 continuacin 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 posicin del siguiente modo: izquierda
<TD ALIGN=LEFT> O D > , centro <TD ALIGN=CENTER>...d T D > , dereclza <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.

...

...

...

a l g o sobre html

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 caractersticas 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 tanto por ciento de la pantalla que ocupar. Si no se incluye este atributo la tabla

127

Webs con Photoshop


ocupar por defecto el cien por cien del espacio disponible. Debindose escribir
del siguiente modo: <TABLE WIDTH=X%>. El tamao del borde nos indica el grosor del mismo debiendo utilizar el atributo BORDER y apuntar el nmero deseado, por ejemplo <TABLE BORDER=7>. El espacio entre el contenido
de la celda y el borde viene determinado por el atributo CELLPADDLNG, mientras que el espacio entre las celdas viene definido por el atributo CELLSPACING
escribindose 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 nmero
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=50h 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>

Preparar fondos y texturas

29

D E G W A D O S PARA FONDOS
En alguna ocasin habr visto pginas Web en las que aparece una cortina que se va abriendo cuando iniciamos la animacin. Esta cortina que, en un
principio aparece como fondo ha sido diseada como motivo que se va repitiendo
hasta completar el visor. Lgicamente, 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 disear
efectos ondulantes a modo de cortina o interesantes transiciones, este es el Degradado.
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 interseccin 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 dilogo Modificar
degradado, paleta Opciones
de degradado y documento.

Ciegririavo

li-,m,ms.m,

.I

-7
,:m~l+la t l s r lcji

3 P Mi:r.ari

T~P
b.lod,i:c
-

A ~ C ,Arniiilla.
I,

-1

P Tramado

ileti. Elrjrqa

Arul. R n p . ,.h.rnirillo

1
1

Largar.

mardar..

--

En la pgina siguiente puede observar una simulacin del efect;.


En este caso hemos
colocado cada uno de los iconos de color en puntos regulares consiguiendo un
efecto uniforme a lo largo de la superficie. El punto de ubicacin 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 utilizbamos en imgenes compuestas por texturas. El
documento tienen unas dimensiones de 1OOOpor20pxeles.Los tamaos de archivo
conseguidos son de 2'35 KBcon JPEG calidad 3 progresivo 3 y de 6'91 KBcon GIF
8 bits con tramado de difusin.
RCb--

AZS,I

1
1

130

Webs con Photoshop


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 difusin. Sin embargo, en colores indexados los resultados van menguando a medida que se incluyen ms
colores para su creacin.

Figura 60.
Cuadro de dilogo
Modificar degradado
y documentos.
En esta ocasin utilizamos el degradado para
crear un fondo dividido en
dos zonas. Para ello hemas usado dos colores.
Colocando el punto final
del prmero en el 25 % y
el punto de inicio en el

1-

1
Ni~cvo
1
C-bar narnbre 1
Elimiriar
1
Duplicar
1
~miceiar-

Asu"~~:

co!oi-

Iransparenua

Cargar.
Guardar

A
J

30 %. De este modo conseguimos dos colores uniformes y una pequea degradacin entre ambos, por
lo que utilizando indexados
de 4 bits con tramado de
difusin conseguimos un
resultado aceptable y bueno con 8 bits. Con JPEG
calidad 1 progresivo 3 da
buenos resultados y un tamao de 1'71 KB y de 2'55
KB con GIF 4 bits y tramado de difusin.

Preparar fondos y texturas


Figura 61.
Cuadro de dilogo
Modificar degradado
y documentos.

- -

- -

- --

131

- -

1
4
Nuevo

Para crear un efecto cortina se


han colocado los diferentes
iconos de color en puntos
irregulares consiguiendo el
aspecto de cortina colgada
como observamos en la
illustracin inferior. En este caso
como en el primero mostrado

Abtar Color

lrmparencia

Cahu

ni

Elirnini

2
Guardar...

7
se nos plantea la misma disyuntiva, ya que
con GIF los resultados
van menguando a medida que se incluyen
ms colores para su
creacin. Un color
indexado de 8 bts
con tramado de difusin de un tamao de
2'31 KB y 6'39 KB
JPEG calidad 1 progresivo 3

nota...
Trabajando con GIF los aegraaaaos pueaen aparecer un ramo
defectuosos. ya que a medida que incluimos un mayor nmero de colores
para su creacin en mayor grado aparecer posterizado. Adems, a lo dicho
hay que aadir, que los colores del degradado deben ser los contenidos en la
paleta general. por lo que restringe sus caractersticas y, en consecuencia.
su efecto.

Webs con Photoshop

132

nota...
Para producir el efecto de doble cortina simplemente situaremos
un centro en las especificaciones del cuadro de dilogo Modificar degradado. Si las mitades son simtricos la imagen aparecer ms equilibrada.

Definir las etiquetas FRAMESET


y FUME para

Etiquetas destinadas en un principio para subdividir la pantalla en cuantos marcos deseemos, podemos, especificando ciertos atributos, utilizarlas para
crear un "efecto cortina" como fondo. En un principio es posible crear pginas
Web nicamente mediante subdivisiones, es decir, dividiendo la pgina en varias
facetas. stas son las llamadas pginas de marcos en las que debemos determinar los documentos HTML que irn en cada una de las parcelas creadas. Sin embargo, en este tipo no podemos especificar ni texto ni etiquetas HTML. Por otro
lado, nos encontramos con las pginas de contenido, las habituales, las diseadas con textos, grficos y todo tipo de elementos propios de un documento de
estas caractersticas.
Como podemos deducir las pginas de marcos son minipginas de contenido. Esto aplicado a una pgina Web donde deseemos aplicar un efecto cortina
habremos de tenerlo en consideracin, pues cada uno de los elementos contenidos en cada marco habremos de especificarlo dentro del paquete integrante de
cada marco. Por ejemplo, si dividimos la pgina en dos marcos y deseamos colocar en un marco el texto y en el otro los grficos; en la etiqueta F U M E de cada
marco especificaremos la direccin htm de cada documento mediante el atributo
SCR el URL. El URL de cada documento es en definitiva la direccin de la
pgina 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 sera foto.htm). As, dentro del documento foto.htm esta-

Preparar fondos y texturas


ran contenidas las imgenes, por ejemplo y, en el FRAME del documento

. texto.htm estaran contenidos los textos de la pgina Web.


Retomando el tema, lo que nos interesa es saber cmo y qu debemos
hacer para que nos aparezca dividida la pgina Web con dos cortinas, una a cada
lado y de igual tamao. Como es lgico se han de determinar en qu tanto por
ciento dividimos la pgina y en qu direccin. 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, adems, hemos de incorporar una
serie de datos como son el espaciado del borde de separacin entre sendos marcos (en este caso cortinas). Si no lo hicisemos nos aparecera por defecto una
lnea de separacin con relieve y con un cierto grosor, que ya habr visto en ms
de una pgina. Aunque, en este caso, han de especificarse en la etiqueta FRAME
de cada marco escribindolo del siguiente modo: <FRAME SPACING=O
BORDER=l>.
Figura 62.
Visores de Microsoft lnternet
Explorer respectivamente.
La pgina Wmonline es un ejemplo representativo del uso de la herramienta
degradado para disear un fondo sen- r - * .
3
cillo pero efectivo. El fondo blanco con
un texto y vnculos en azul parecen una W r l X New
combinacin perfecta para una agradable lectura; no obstante, destacara Advmmed Seirsh
como ciertos vnculos sobresalen de la sllowk", cm
zona delimitada por el degradado interrumpiendo la funcin del mismo: sepa.
rar ambos apartados. Davescomic no
..
nos muestra el diseo de una cortina mediante pginas de marcos, sino cmo
mediante pginas de marcos se ha compuesto la pgina. Son visibles las diferentes particiones en las que se ha dividido el diseo, todo ello con el fin de
aplicar otra estrategia para su presentacin en pantalla, siendo el fondo y la figura parte del mismo, es decir, en cada
pgina de contenido el fondo es un
grfico que contiene un fondo negro.

%IrWrani~&

, @.lrlmg 8 3lwTng
i C~ndiinahing
) Ti'lirhni

, ctar szrage
, cC:ors
, ~ rloter!.
Knr

C ~ S ~ S

illrn

,, ~F n* l:?~r l~~~Pn. ?r~e-81anLs


aaf
i0l
, F a - an-,,ii' Pan*'
, F c t Appllwe <lis
&Y:;

33

134

Webs c o n Photoshop

...

nota

Si trabaja con el navegador Nestcape Navigator versin 3.0 o


Microsoft lnternet Explorer, los atributos SPACING y BORDER pueden ser sustituidos por el atributo que integra ambos FRAMEBORDER,
dndole a ste un valor de O.

...

a l g o sobre html

Para dmdir la pgina en dos mitades iguales y colocar una imagen 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 pginas 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 ms real es probable que desee colocar texto
centrado en la pgina e, incluso, que ste sea un vinculo. Para resolver esta situacin podemos recurrir a dar nombre a cada marco. De este modo, incluiremos
parte del texto como ttulo, mediante el atributo NAME, de cada uno de los marcos; 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 saltndonos otros atributos que contiene. Lgicamente, el nmero de atributos incluidos
en la etiqueta F U M E depender de las caractersticas del diseo de la pgina
que en esta breve explicacin no tienen cabida y, que mucho me temo, podran
despistarle de lo que se pretende tratar, por este motivo han sido excluidos.

Preparar fondos y texturas


FONDOS CONSTITUIDOS
POR IMGENES
Existen distintas posibilidades para utilizar imgenes como fondo. Si elige imgenes con bordes que no coinciden, quedarn bordes visibles distribuidos
por la pgina 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 pgina. Este hecho restringe en gran medida las
caractersticas del mismo, a excepcin de que el fondo sea una parte relevante del
diseo de la pgina o que sta solamente contenga informacin visible en formato texto y algn que otro elemento grfico, como pueden ser botones o marcos.
En estos casos puede resultar muy enriquecedor un fondo grfico, sin olvidar que
el texto debe ser legible.

El proceso de elaboracin puede consistir en una simple reduccin de


tamao de la imagen o, bien, disminuir o incluso transformar la imagen para que
est acorde con los colores y las caractersticas del conjunto de elementos que
constituyen la pgina.
Figura 63.
Documento.
Esta es la imagen original
que queremos utilizar
como fondo. En un principio nos interesa modificar
sus dimensiones y establecer una medidas ms
cuadradas. Pero antes
duplicamos el documento, pues nos interesa
conservar ste con sus cualidades especficas. La imagen original est constituida por
unos tonos violetas, naranjas, amarillos, blancos y negros. Colores que no nos interesan, por lo que procederemos a aplicar unos ajustes de Tono/saturacin para sustituirlos por otros ms acordes con nuestros intereses.

135

Webs con Photoshop

136

Figura 64.
Cuadro de dilogo
Tamao de imagen
y documentos.
En la imagen transformada (la
duplicada) hemos procedido a
reducirla hasta tener unas dimensiones de motivo. En la
ilustracin superior izquierda se
muestra tal y como quedara con
unas dimensiones de 100por 75
pxeles. En la inferior izquierda
los valores son en ambos casos

Tamao de wream

Re~oiucm

I;iI-

pixehipuhp3o

I(

tener proporcion

de tonos terrosos mediante la aplicacion de


una coloracin total en el documento.

- ...

i
i

_-

--

--

Y*L

_-

I-i-

<

+*?> r:

FBi-

Aqut mostramos tal y como queda la


imagen de 200 por 150 pxeles en
GIF 8 colores con tramado de difusin 9,9 KB y JPEG Calidad 2 y
progresivo 3. $23 KB
m

Preparar fondos y texturas

137

Figura 65.
Cuadros de dilogo
Brillolcontraste y
~xplorerY documentos.
En este caso, nos interesa utilizar el nombre del programa
como fondo. Dadas las caractersticas del documento original nos proponemos suavizar
las formas y contrarrestar el

Previsualizacin
.IJ -

color del documento en general. Con este fin nos dirigimos


al comando Brillo/contrastey
modificamos los valores de
contraste hasta un -84. Esto
permite reducir el relieve y unificar los colores generales
r-,.,"

I
.
.

,.

' 1
t,-..-

A
.,

.&

.>.
.. .,a
.,&.-*;

/'.

*Ui
,2

',

P.%*&

,.l..

?L.-

-.

.&e

,:?--

7."
-

.-

iI
.d.

ses, de este modo, el fondo


aparece ms neutro. Las ilustraciones de la derecha muestran dos ejemplos de las pruebas realizadas. La superior es
un documento JPEG calidad
1, progresivo 3 ocupando un
tamao de archivo de 2,27
KB, mientras que la inferior es
un documento GIF de 3 bits,
paleta adaptativacon tramado de difusin ocupando un
tamao de 2,55 KB.

de la imagen, con el fin de que


cumpla las necesidades requeridas que son: aparecer como
fondo y subrayar, en un segun' do plano, el programa del que
se est dando informacin.
En la ilustracin de la izquierda
,se muestra1 tal y como quedara en el visor del navegador,
por ejemplo del Explorer.
Las dimensiones originales han
sido mantenidas siendo stas
de 299pxeles de anchura por
73 pxeles de altura. Por otro
! lado, los colores han sido
sustuidos por una gama de gri-

YYll

.u,,

"-k,

-;"-".*
--

-'

'

Webs con Photoshop

138

...

nota

Cuando trabajamos con mosaicos de imgenes el atributo BACKG R O U N D viene especificado t a l y como se explicaba en el apartado Definir el atributo BACKGROUND para un fondo con texturado, ya que
igualmente utilizamos archivos creados para ser empleados como fondos.
Siempre que use imgenes como fondos procure que los colores
elegidas estn dentro de una misma gama, as evitaremos que parezcan
ciertas zonas ms visibles que otras, por e l efecto ptico que se produce por
la combinacin de los colores del fondo con los colores de los documentos del
primer plano.
L

--.
..--

. r . . , . - .

2" 1.

'

.-

. .. . .
-7

"'3.
.r,
* < - e

-*

*^

Y - .

Figura 66.
Visores de Microsoft lnternet
Explorer respectivamente.

1 AmericanXpress ha utilizado su logo-

tipo como fondo, aunque podemos


comprobar como ste no aparece repetido de forma alideada, sino con cierto
desfase. En este caso enriquece el fonLnrl Mlnute
Xen TNI Werk
do, pues hace destacar en mayor mediTnvel Bimabu!
2 4-2/10
1n 1-n MAS,.
Wl~.mcl Ir<on~,x
da el logotipo, que segn las caractersel,,
n*!.M,, a A"
., ticas que posee: letra pequea y dibujo
U,w l..i.nrlin
rm.rn ir.rrI
..f.
,' continuo podra aparecer confuso. Sin
," ,,
L.,,
.r i. - : -i J B embargo, los colores grises y suaves en
.- . . ..^..j. ._1." I . LJ, l r . . .J "...
_*
los que ha sido confeccionado hace que
-. . .
-.
.-- .
-' " ocupe su lugar en la pgina.
En la pgina 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
elemento preponderante donde aparece siendo el nico elemento visible. Con
~ ~ . , . ~ . , ~ , , ~ ~ . . ~ ~ - h,.i n . ~ . ~ n . ~ ~ ~ ~ . .un
~ color de fondo verde y combinndolo
.a,.,ril.,.- Y.h.. ., ,,,
con
un naranja y azul en las letras ar."-.,.
.....
...
-.-.
l..i.nii.i.rl<P.nn*l,,
...
, .,,. .,,,.
.,. .,.- .
moniza con el resto de los elementos
.... , + que aparecen en las otras dos zonas.

&m

,cm.>

<*e

r..

Ch.,

L.">

,,

NOW

v...

l
.
,

- - S

>

L,

..**

ks(uii..i

i. .ii.

Eniu,n-~...*i.

.V.,

,.m
\hq.nlq".ur.ln.ri

<IA.I

CM

iinil.r<D.iI
,"l.

h.

-'

Preparar fondos y texturas


Imagemaps o vnculos como fondo
Ver imgenes solitarias como fondo es un tanto difcil de encontrar en
una pgina 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
pginas elaboradas de este modo no quiere decir que no podamos disearlas,
aunque la programacin ser un tanto ms compleja, ya que deberemos recurrir
al proceso descrito en la confeccin del efecto "cortina ".
Fraccionar el espacio del que disponemos en pequeas zonas puede resultar muy til cuando debemos hablar o tratar aspectos bien diversos dentro de
una misma pgina. Un fondo creado con diferentes colores, imgenes o texturas
puede resultar muy enriquecedor, en estos casos. Sin embargo, dividir el rea en
diferentes colores no requiere de una divisin 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 pgina en diferentes reas de trabajo y queramos que una tenga un fondo de color slido, otra una textura y otra, por ejemplo,
un vinculo. En este tipo de diseos ms complejos y sofisticados debemos recurrir a una divisin de la zona de trabajo mediante marcos. En cada uno de los
marcos y en sus respectivos documentos htm especificaremos las caractersticas
del fondo. Es como si trabajsemos con varias pginas Web al mismo tiempo,
pero con unas dimensiones distintas.
Z

En este apartado no hablaremos de cmo debe crear un fondo slido para


este tipo de pginas o, como crear una textura, etc.; pues, ya fueron tratados en
sus respectivos apartados. S que nos centraremos en cmo debemos preparar
una imagen o mapa de imagen para incluirla como fondo en un fondo mltiple.
Es posible que este tipo de imgenes sean rectangulares, en estos casos,
no habr mayor problema que reducir el nmero de colores del documento, elegir
el tipo de formato, reducir el tamao fsico del documento, si procede, o transformar la imagen con el fin de unificarla con el resto de elementos que componen la
pgina completa. No obstante, debemos recordar que estamos trabajando con
elementos que, aunque estn visibles en la misma pgina son, en realidad elementos que pertenecen a documentos htm distintos, aspecto ste importante que
no debemos olvidar. Tambin puede darse el caso que el mapa de imagen sea
circular, elptico o con forma irregular, en estos casos, utilizaremos el formato
GZF para aprovechar las capacidad de tratar las zonas transparentes del documento.

Webs con Photoshop


La ilustracin superior de la izquierda muestra el logotipo
que deseamos colocar en la zona superior de la pgina
Web. ste tiene unas dimensiones de 152 por 152
pxeles. Ha sido tratado en su totalidad con las letras incorporadas. En formato GIF con una paleta adaptable
de 256 colores y tramado de difusin nos ocupa
extraemos los colores que utilizaremos en las otras dos
zonas o marcos en las que hemos dividido la pgina.
Refirindos a este aspecto comprobar que hemos crea-

Documentos.

a continuacin, hemos
subdividido en horizontal el primer marco creando dos marcos de 152
por 152 y 152 por 448
pxeles. La ilustracin de
la derecha muestra el esquema de diseo seguido
en un documento de
Photoshop para comprobar medidas y otros aspectos relativos a transformaciones de documentos
relacionados con la pgi-

na. La ilustracin inferior


muestra el diseo general
del fondo siguiendo un proceso de divisin mediante
marcos los cuales sern
de 19 OO/ y 81 % y 19% y
811
'0 respectivamente. En
el marco superior e inferiorse ha utilizado un color slido como fondo.
Aunque en el superior se
ver exclusivamente el
logo- tipo que, al mismo
tiempo ser un mapa de
imagen. Tambin podemos colocar como fondo el
documento que contiene el
logotipo.

Preparar fondos y texturas

,,

Figura 68.
Documento.
En zona inferior de la izauierda incluiremos los distints temas a los que se puede dirigir
el navegante a modo de vnculos. El BGCOLOR estar especificado simplemente con el
nmero hexadecimal al que
corresponde el color usado. En
el marco ms grande hemos
utilizado un documento, por lo
que en BGCOLOR del documento htm al que pertenece
vendr especificado, con el
nombre del archivo. Este ha sido creado mediante un degradado constituido por
colores incluidos en el logotipo. En este marco aparecern fotografas relacionadas
con los temas tratados, vnculos, texto y mapas de imagen.

Definir las etiquetas FRAMESET


y FRAME para un fondo mltiple
CL

Laspginas de contenido ya sabemos que son las habituales, las diseadas con textos, grficos y todo tipo de elementos propios de un documento de
stas caractersticas. Tambin sabemos que cada marco contiene su propiapgina de coiztenido; esto posibilita que en cada documento htrn respectivo de cada
pgina de contenido podamos utilizar y disear un fondo determinado. En el
caso mostrado en la pgina anterior, se ha intentado unificar los colores que contenan 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 cmo y de
qu manera podemos utilizar un mapa de imagen o vnculo como fondo, ya que
ste era el fin; no obstante tambin se ha mostrado cmo conjugar diferentes
tipos de fondos en una pgina de marcos.
Siguiendo con el inters de que podamos llegar a comprender el proceso
mostrado, as como las diferentes vertientes y posiblidades en las que puede aplicarlas nos disponemos a detallar como pueden dividirse y subdividirse los diferentes marcos creados en una pgina de marcos. Por ejemplo y, utilizando el

Webs con Photoshop


diseo ilustrado en pginas anteriores diremos que, hemos de dividir el browser
en tres marcos, lgicamente, tal y como nos la presenta hemos de dividir la pgina primero en vertical y, a continuacin en horizontal, pero vayamos por partes.
En primer lugar hemos de especificar en qu tanto por ciento dividimos la pgina
y en qu direccin realizndolo en el orden de subdivisin. En este caso la primera divisin ha sido en vertical, por lo que lo escribiremos del siguiente modo:
<FRAMESET COLS= 19%, 81%>.El marco de menor tamao lo dividimos
en horizontal escribindolo 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 podra ser tambin un
vnculo) tiene las mismas dimensiones de altura y anchura. As lo hemos calculado. En este caso, como en el de la creacin de cortiizas, hemos de incorporar una
serie de datos como son el espaciado del borde de separacin entre los distintos
marcos. Como ya sabe, si no lo hicisemos nos aparecera por defecto una lnea
de separacin con relieve y con un cierto grosor, que en esta ocasin no deseamos, por lo que en la etiqueta FR4ME de cada marco lo especificaremos del
siguiente modo: < F U M E SPACING=O BORDER=l>.

...

a l g o sobre html

Para dividir la pgina en tres marcos a modo del ejemplo anterior hemos de especificarlo del siguiente modo (donde logotipo, degradado 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 respectivas pginas de contenido de la pgina de marcos):

cFAMESET 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>

-"+ #*. ,

Preparar fondos y texturas

143

Si trabaja con el navegador Nestcape Ncnrigator o Microsoft


lnternet Explorer en l a versin 3.0 o superiores, los atributosSPAClNG
y B O R D E R pueden ser sustituidos por el atributo que integra ambos
FRAMEBORDER, dndole a ste un valor de O.

I
A

nota...

Si quiere que un vnculo cargue su pgina 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 pgina 134.

Figura 69.
Visores de Microsoft lnternet Explorer.

L
.

...T

La pgina Bloomingdales ha sido confeccionada mediante pginas 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
destacado.
,

y
-.>'Y
,
,

. . .

.
,.

. -.

'

PY

* :
,

--

h~O~\IIXLITI:III?
?CIUFIS!-,

....---.,<..

..

--

. . . . . . .'. ,T'

--

.
--.-- - -.. - .-

S A L E S R SW~+ALEVE~.(TS

,: 2 4-3
. .- . ., . ...................

..+.

C.,'

l.

,,!,'

=-7-.

. . r - - . i

..c.

N- - -

5 . 4 ~ L1J A Y L ~ Y ~ - ' Ir.: ~ W I

-...

,.,-,

7.1-

,-*,.,=.,-.,-.n.".c

i.. >,

,h.

...-. ...L......................,.=...?

,.-., , d"..L . , .a

....C.

,Y.-

'-*cx-.?ri

.:
."..."...
.._.
-....-..........
. ,-.--., . ---

&.-~.=-tQ

,->-

"S

,v...

,.-,:

>

Jcpenney no ha introducido un mapa de


imagen como fondo. La pgina dividida
en cuatro zonas bien diferenciadas es
empleada para separar los aspectos que
se tratan en la misma, de lo ms genrico a lo ms especfico, as como un extenso nmero de vnculos que nos trasladan a otras pginas.

- 8

Webs con Photoshop

...

a l g o sobre html

Hay navegadores en el mercado que no son capaces de interpretar la


etiqueta FRAMESET, esto quiere decir que no pueden visualizar paginas de marcos. Para este tipo de ususarios es recomendable darles algn
tipo de informacin o vnculo que les muestre el contenido de la pgina, con
este fin puede aadir las etiquetas NOFRAME y INOFRAME colocndolas del siguiente modo (donde cortina1 y cortina2 son el URL de los documentos 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
vnculo </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 enumeracin segn la jerarqua del prrafo 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 especificacin <A HREF= URL> </A> mediante las etiquetas
<A> y </A> define un vnculo 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 pgina al tiempo
que la hacen ms atractiva. Las transparencias son muy tiles cuando las imgenes
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 diseado en formato
grfico.
Photoshop nos permite tratar estas zonas transparentes y adecuadas al
fondo de la pgina 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 ms adelante en un
extenso captulo, y entrelazados, es decir, descargar progresivamente el documento
en el explorador de la Web.
Tratar las zonas transparentes de un documentos es ms 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

146

Webs con Photoshop


de fondo, si se trata de un color slido, en el cuadro de dilogo 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 pgina Web, el proceso
ser un tanto distinto como mostraremos en los prximos apartados.

EN LAS ZONAS TRANSPARENTES


El mtodo ms preciso es el que nos proporciona la herramienta Transparencia desde la mscara del cuadro de dilogo Opciones de GIF89a Export,
mediante esta opcin 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 slido que aparecer en la pgina
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 slido del fondo de la pgina Web.
,Para que no se visualice en blanco -esto sucedera sino realizsemos este proceso-enmascaramos las zonas transparentes con
el color que utilizaremos como fondo.
Traiisparnicia desde rn-cara

1 m
Cargar

Figura 70.
Documento PSD y cuadro de dilogo
Opciones de exportar GIF89a.

Colores-

Transparencias en imgenes

47

2. En el cuadro de dilogo Selector de color que nos aparece,


seleccionamos el color que utilizaremos como color slido.
Figura 71.
Cuadro de dilogo
Selector de color.
En este caso hemos introducido su valor en modo RVA,
los cuales son R: 53, V: 181 y
A: 192. Permutndolo 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 transparencia.
Tran-oarercia desde niascai
I

m
1

[Por def-c tal


Colo#d- r e r e de
I r n pl'ricza

Cataai

Documento y cuadro de dilogo


Opciones de exportar GIF89a.
-

- -

[
-.

Hemos mantenido una paleta Adaptiva de 255 colores con la opcin Entrelazado activada. Observe como las
zonas transparentes han sido enmascaradas con el color elegido.

Para lograr el mismo efecto puede utilizar un canal alfa o una transparencia 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 dilogo Opciones de Exportar
GZF89a, active los colores que desea que sean sustituidos
por el color de transparencia en Transparencia desde.

..

'1
v
7S

, .

,,.

Figura 73.

~adro
de dilogo Opciones de
exportar GIF89a Selector de color.

Nivel de 1 1

Hemos activado el canal alfa #2para cambiar 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
I
II
n i - - 3 I 1 0 3 W L l O ~ l l l l lnl;PWl3[7mr_J.TiBFI
lill'Ci

n T i r n nu~
~ ~n m m

~ o n : ~ o o o i ~ ni i
i n n n r i - C ~ ~ ~ W1 1P1 I -rrmnnanmmd

O-rimrl

UL1nCw

-i

r-.

2. A continuacin active los colores mediante el Cuentagotas


para que sean sustituidos por el color de transparencia, o bien
coloque el Cuentagotas directamente en la previsualizacin
de la imagen y pulse sobre las zonas que desea enmascarar.

*,-

Elrv-ti 1

"3

I
l
P

Figura 74.
Cuadro de dilogo Opciones
de exportar GIF89a.

Friiril*

A continuacin hemos colocado el puntero del


Cuentagotas sobre las zonas que deseamos cubrir con el color seleccionado. Observe que los
colores que han sido permutados por el color
,
I,L,.,-de ndice de transparencia aparecen marcados en la paleta. Si ha de cambiar un color esT,W plreo
pecifico,
mrquelo en la paleta y
uonuooc~nooun~mr~~~~o~mm~~m
m o m m simplemente
m
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 pxeles del mismo color que se encuenC I U ~ Q7
a + m n u u ~I 1
I I J L ~ O I ~ ~ L Jn n u ~
tren en la imagen pasarn a ser del color de nc
nnnClrmi1mnm0m30C~8m
i n T i r D C E -nuimiorir
umnr -0. IUU~~AIUC:dice de transparencia que haya determinado
mnBC.898HannOmm..
I

Transparencias en imagenes
Figura 75.
Visor de Microsoft
lnternet Explorer.

1."

"

49

En la ilustracion podemos
observar como queda la
imagen en la que se han
tratado sus zonas transparentes de tal modo que
aparece unificada con respecto al fondo. Si no hubisemos realizado este
proceso de enmascaramiento de las zonas transparentes, hubiesen apare- 1
cido aqu de color blanco
o con el resto de la imagen que no desebamos 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

pk?!K$ w+*
$

nota
't

'
-

...

Si la imagen ha sido cortada mediante cualquier herramienta de seleccin 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 mayora de casos lo ms recomendable es que no active, mientras
realiza el trabajo, la opcin Suavizado. Cuando suavizamos los bordes de
una seleccin o capa Photoshop crea una transicin 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 ms problemtico, 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 colocamos una rplica 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
pgina 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 continuacin seleccionamos todo el
documento y lo definimos como motivo mediante el comando
Definir motivo.
.?

Photoshop respectivamente.
Pegar

Pegar dentro

Mays

el comando Todo y,

mado una degradacin en los contornos


mediante un calado
de 1 O pxeles.

ser clonado en la
capa denominada
fondo para cubrir todas las zonas transparentes del documento que aparecen
formadas por un mosaico de cuadrados.
--

Transparencias en imgenes

,,

2. Con la herramienta Tampn y habiendo seleccionado


previamente la opcinMotivo (alineado) procedemos a cubrir
toda la capa foizdo con dicho motivo, tal y como aparece
representado.
[

Flavegador

1 Info]

Opciones de tampn

\I

b'

-101xfI

. o .

Figura 77.
Paletas opciones de tampn y Capas respectivamente, documento
de Photoshop y Visor del navegador
Microsoft lnternet Explorer.

T:
I
Capas

Los valores de opacidad y modo se han I


N
mantenido para no alterar las caractersr Preservar
ticas de la textura. Observe como ha
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 deberemos mantener todos los colores que contiene el fondo con el fin de que no
sufra alteraciones.
E!T?-F=

Canales

Traza

transparencia

Una vez colocada la imagen


rA
-I
- -en la pgina Web comproba,.. .r
mos que este tipo de texturas
no provocan alteraciones en
la misma cuando los docuI
mentos con zonas enmascaradas son colocados En este "
caso no ha sido necesario
adecuar la paleta para mantener todos los colores que
constituan el fondo en el documento, esto ha sido debido
a que la mayora de colores
que componen la imagen son
los azules del fondo
4

_o
7

ia

Webs con Photoshop

...

a l g o sobre html

Para visualizar la imagen conjuntamente con el fondo y comparar 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 slido escriba (donde 35B5CO responde al


nmero 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 pgina 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 imgenes

53

Cuando se trata de texturas irregulares donde aparecen ciertas formas


que se repiten, hemos de emplear estrategias especficas con el fin de encajarlas
cuando sean montadas, ya que en cada diseo la resolucin puede ser distinta.
Figura 78.
Visores del navegador
Microsoft lnternet Explorer
respectivamente.
Observe la ilustracin, ha sido
colocada sin considerar distancias especificas, simplemente se ha determinado la
ubicacin: derecha e izquierda en cada una de las imgenes. Comprobamos como las
texturas no coinciden y se
percibe un cierto desfase entre la textura del fondo y la
L

r , . r ,

'

.<*

---.

cS

-.

:-&
-

- -

incluida en las fotografas. No es el caso de la


ilustracin inferior. En
sta se ha corregido el
desfase existente incluyendo un parmetro de margen entre la
imagen y el inicio de la
textura en la zona superior. De este modo
hemo conseguido evitar
el efecto desagradable
que se produca ajustndola mediante una
apurada colocacin.

nota
Un mtodo eficaz para hacer coincidir las texturas consiste en
anadir un margen, ya sea de altura o anchura. segn sean las necesidades.

Webs con Photoshop

La ilustracin superior de la pgina anterior responde al siguiente


esquema(donde WIDTH=283 HEIGHT= 187 responden a las medidas
en pxeles de las imgenes y ALING=RIGHT y ALIGN=LEFT a la alineacin de sendas imgenes 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 ilustracin inferior de la pgina anterior responde al siguiente esquema (donde VSPACE=O y HSPACE=O son las distancias en pixeles
entre la imagen y los mrgenes 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 imgenes a la izquierda y


a la derecha respectivamente. Cuando aadimos este tipo de atributos el
texto incorporado es colocado alrededor de la imagen.

...

Consejo

Aunque los atributos HSPACE (espacio horizontal) y VSPACE (espacio 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 pgina 153 que buen resultado nos ha
dad6 y aunque la imagen aplicada en el fondo tiene las dimensiones de 100
pxeles de anchura por 75 pxeles de altura hemos debido aadir de espacio
vertical 60 pxeles para que las texturas encajasen perfectamente. No obstante, este sistema impide colocar cualquier elemento dentro del
espacio utilizado como margen, aspecto que debemos recordar.

Remodelar la tabla de colores


Como indicbamos al principio de este apartado, las texturas suelen contener un nmero concreto de colores, dependiendo de las caractersticas de la
pgina puede ser mayor o menor. Cuando la textura es aadida en las zonas transparentes de las imgenes incluidas no hemos de olvidar que todos los colores de

156

Webs con Photoshop


la textura deben estar incluidos dentro de la paleta de la imagen, grficos u objetos con transparencias, por lo que el proceso para la reduccin 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 nmero
de colores, para saber con exactitud el nmero 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

I
cargar..

Figura 79.
Cuadro de dilogo
Tabla de colores y
documento.

Guardar..

Comprobamos en la tabla de colores de la textura que est constituida por 32 colores. Para
aadirlos a los de la imagen hemos de guardar la
paleta y eliminar todos
los negros aadidos.

El paso siguiente consiste en guardar la paleta correspondiente a la textura para aadirla con posterioridad a la
paleta de cada una de las imgenes incluidas en la pgina
Web. Como es lgico si deseamos que la imagen contenga el
nmero mximo de colores de stos, habremos de restar los
colores que corresponden a la textura que aadiremos. Por
ejemplo, si queremos que la imagen contenga 256 colores
dentro de este grupo estarn incluidos los 32 colores que
pertenecen a la textura.

,,

Transparencias en imgenes
Figura 80.
Cuadros de dilogo Tabla de colores y guardar respectivamente.

Cigaidai en

1 A pro~sctos

J
.

al

6iidrdaf ramo

Lo guardados con la extensin que ms nos


convenga, en esta ocasin ACO. Cuando la carguemos en la paleta Muestras eliminaremos los
negros sobrantes y la volveremos a guardar.

3. A continuacin 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.

Figura 81.
Cuadro de dilogo Cargar y paletas Muestras respectivamente.

serve que para complet:ar los 256 colores


an sido utilizados negros. Hemos reemplazado los colores con el fin de eliminar dichos
negros y hacer que la paleta est constituida
exclusivamente por los 32 colores de la textu-

ra. Para eliminarlos coloque el


puntero sobre el primero de los
negros y pulse la tecla Ctrl (Win)
Opcin (Mac) y pulse el botn iz-

Tamao de archivo

762 byles

* .X

158

Webs con Photoshop


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

correspondiente a la fotografa mediante el comando Cargar


del men lateral.
Para crear la paleta de la imagen o imgenes 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 imgenes hemos de sumar los colores de
la textura.

Reemplazar muestras...

Guardar muestras...

~ o & e de ~

1 1

1 1

Y C ~ N O

Cuadro de dilogo Aadir

Recuerde que la paleta de la imagen incorporada debe ser la que contiene exclusivamente 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 utilizaremos 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 realizado. 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 fotografa al
tiempo que nos aseguramos que los colores de la textura aparezcan. A continuacin abrimos el documento conjunto, el
que contiene la imagen y la textura, y procedemos a indexarlo.

Transparencias en imgenes
Para ello pulsamos el comando Color indexado del submen
Modo del men Imagen. De la opcin Paleta especificaremos la opcin A medida cargando el archivo que nos interese, en este caso conjunta.
."- _ - - - .

-.-

_ -

Figura 80.
- _ _--_-.-- _- _Cuadros
de dilogo Color indexado, Ta?A bla de colores y Cargar y documentos.

--, S---

En el documento conjunto, en el que hemos cubierto las zonas transparentes con


la textura que aparecer como fondo, procedemos a indexarlo. Deseamos que contenga 256 colores por lo que la paleta
conjunta contiene 224 colores de la fo-

que aparece en el cuadro de dilogo Ta


bla de colores es la paleta definitiva.

mos incluir. Observe en la ilustracin inferior como el resultado es ptimo. Ambas partes aparecen sin haber sufrido alteraciones sustanciales.

<

- --

. --

59

160

Webs con Photoshop

...

Consejo

Cuando las imgenes contienen zonas transparentes y los colores de


la textura de fondo no estn contenidos en la paleta de dichas imgenes,
siempre resultar ms adecuado que la textura contenga un nmero reducido de colores ya que ambas paletas habrn de sumarse y es ms importante
no reducir la calidad de la fotografa aunque sea en detrimento de la textura.

Todos los procesos descritos en los apartados anteriores de cmo tratar


las zonas transparentes en documentos GIF y sus paletas son igualmente
vlidos para cualquier tipo de elemento que debamos colocar en nuestras
pginas Web.

?
'

E N U S C A R A E LAS ZONAS
TRANSPARENTES
Otro mtodo rpido y eficaz que nos permite borrar las zonas transparentes de un documento GIF consiste en cubrir dichas zonas con una mscara.
De este modo podemos hacer que un fondo slido o un fondo con texturas aparezca sobre la zona enmascarada. Sin embargo, siempre es aconsejable incorporar en el documento una porcin de la textura o color, sobre todo si hemos incorporado 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 variacin de la opacidad en la mscara para producir algn tipo de
efecto entre el fondo y el objeto grfico en cuestin.

Transparencias en imgenes

61

En realidad este proceso puede ser claramente utilizado durante los procesos descritos en apartados anteriores. La particularidad de crear ciertas zonas
enmascaradas consiste en producir una degradacin entre la textura incluida en el
documento grfico que hemos de colocar sobre el fondo y ste, consiguiendo una
fusin entre ambos ms suave. No obstante, podemos utilizar una mscara 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 continuacin la
clonamos en el documento para cubrir la zonas transparentes.

,,,, m

Cpita
gopiar

Ctrhx
Clrl+C

Naveqador

A-

Opciones de tampn

INormal

Pegar
Pega dentro

I I

Opd
"lad-A

Mayuc +Ctrl+'/

P..
iear

Turnar
Purgar

Figura 81.
Men Edicin,
documentos PSD
respectivamente y
paleta Opciones
de tapn.

\k

100%

En esta imagen era completamente necesario clonar la textura de fondo por presentar
un grado de calado, por lo que existe una zona de transicin 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 enrnascarada y el resto de la imagen, tal y como se presenta en el documento superior, aplicarnos el filtro Desenfoque gaussiano.

Webs con Photoshop

162

De este modo logramos crear una transicin entre la imagen


y la zona enmascarada ms suave y gradual.

1l

II

,,.l,,,,I<,,,l,,,,I!,,,l

. m .

. , , , I?,,,l, , , , l?,,,

Figura 82.
Documento PSD, paletas Canales,
cuadro de dialogo Desenfoque
gaussiano y documento PSD.

-2
-

Capas

Y Canales

Trazados

RVA

Ctrl+"

Rol*

Ctrl+l

Verde

Ctrl+2

AZUI

Ctt 1+3

1 b'
-

B -

Radio:
-

pxals

Para aplicar el filtro Desenfoque


gaussiano hemos de activar el canal correspondiente en la paleta Canales. Una
vez activado introducimos el radio de la
aplicacin del efecto, en este caso corresponde a un radio de accin de 3,8
pxeles. Comprobamos en la ilustracin
inferior como los bordes aparecen
difuminados haciendo que el efecto de
enmascaramiento en la imagen sea distinto a como se muestra en la ilustracin
superior. Del mismo modo puede realizarlo en imgenes que hayan de ser incluidas en paginas con un-fondo constituido por un color slido.
-

l1

Transparencias en imgenes
Figura 83.
Visor de Microsoft
lnternet Explorer.

63

remo

A,&

- . .M*' i d
PCV

-2

-- -. ow

ii

lby

n.-*.d.

F X ~ C
-a%.-,

u
s n-

C h-itldir

,gLn"."mYd

-,

dJ)Crrl.b.C

E**

7
-

-.

>

En la ilustracin tenemos
la oportunidad de comparar cmo queda una imagen incrustada en un documento sin zona enmascarada, sta es la que aparece a la izquierda, y una
imagen colocada con una
parte enmascarada (la
imagen tratada en las dos
pginas anteriores), ste
es la que aparece a la de- .lii.,
recha. Como podemos
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

> M

...

Aunque en este captulo nos hemos limitado a presentar fotografis


para mostrr como tratar las zonas transparentes de un documento, todos
los procesos descritos son imprescindibles en otros elementos grficos como
tipografas grficas creadas en Photoshop, marcos, barras o botones con
formas irregulares. Por este motivo todo lo dicho en este captulo deber
tenerlo en consideracin cuando trabaje con otros elementos grficos.

TRAI'JSPARENCXAS CON PNG


De momento con los recursos disponibles la capacidad para tratar las
transparencias con GIF nos es de lo ms gratificante, no obstante, comprobamos
que las posibilidades que ofrece no dejan de ser muy reducidas, ya que hemos de
trabajar con imgenes de 8 bits, lo cual limita la capacidad para lograr grandes

Webs con Photoshop


efectos visuales con espectacules fotografas. Esto puede resolverse con l a promesa del formato PNG de soportar plenamente canales alfa para enmascarar transparencias. Con el fin de que surta efecto ser necesario exportar el canal alfa y la
seleccin que se haya empleado para crearlo.

UNOS CUANTOS EJEMPLOS


Las zoilas transparentes las podemos encontrar en cualquier elemento
grfico de una pgina Web, tal y como muestran estos ejemplos ilustrativos.

. .- -

A*

$,,,'l...

-'*

IrM..

.-

4."

'C

r">r"r-#83i
n,-,,1

L..

-.

-.
v

>+a.
> m,.n

nci b i d iin.%lir

M
i* " M i , C i l W r n .

Figura 84.
Visores de Microsofi lnternet Ex~lorer
respectivamente.
Cdunrverse muestra varios elementos en los
que se evidenca el uso de varios documentos
grficos que contienen zonas transparentes
cubiertas con el color slido de fondo. En la
ilustracin reseamos los ms representativos
como son los dos botones GO y BROWSER y
los dos textos grf~cos.
J. ..
,
-

La pagina de Collegewebwear contiene igualmente varios elementos con


zonas transparentes. En este caso observamos varias fotografas que, como
en el caso anterior, han sido cubiertas
con el blanco del fondo.
L . ,

--.-- -

'

l"ilm

El

--

mi

L r . 7 Ilinu,,
llxi iUiiq

Iilrrl

U,
,..L M,r.it
iinm

2I

\<U

- L.

7.1-1".

F"

..

,*i"iS.

- .- - - -

pl 1
S
-

.,-,<.,,.",

i r

N,<L

*-

-.a

'.

-*

Por ultimo en AmericanXpress se observa


como han sido tratadas ciertas zonas de la imagen central con la textura utilizada en el fondo. Observamos que donde aparece el puro
no se han tratado las zonas transparentes,
pues observamos que aparecen en blanco.

21i

U~l<rn<',I
iI
. v
H*.
M"<.

'

Id."

aTn---

ppJ

Lmk al rhlr ir4

d.

. '..

---

Al tratarse este libro de cmo disear pginas Web con Photoshop, estamos
dando
prioridad
a cmo resolver y crear ciertos elementos grficos que solemos
.c
ver en la Web. No obstante, esta prioridad, ha de adecuada a sus diseos y aunque
mostramos pginas excesivamente cargadas de dichos componentes grficos puede
extrapolarlos a proyectos bien diversos, pues el fin de este libro es que aprenda a
disear espectaculares pginas para la Web con Photoshop.
Existen elementos de estilo en las pginas Web que vienen determinados
por cmo ha sido diseada y, en consecuencia, cmo ha sido programada. La
elaboracin de la pgina determina cmo ser programada, esto hace que antes
debamos saber qu sistema es el ms adecuado. Es decir, si en nuestro proyecto
preponderan los elementos grficos, es posible que la mejor opcin 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 fotografa, de este modo ahorraremos tiempo de espera para su presentacin.
Esto es casi obligatorio cuando la pgina en su totalidad est formada por un
diseo grfico que ocupa gran parte del espacio, cuando hemos dibujado un objeto
que engloba todos los elementos importantes, incluso el fondo. En esta ocasin

Webs con Photoshop


no elaboraremos un proyecto de estas caractersticas, pero s que mostraremos y,
de hecho, ya han sido mostrados algunos ejemplos que probablamente fueron
diseados con Photoshop. Estas formas especficas siguen en la mayona de las
ocasiones las mismas pautas de creacin que los elementos ms comunes como
ya veremos en el apartado correspondiente.
Los botones, barras, texto grfico y marcos aadidos como elementos
grficos son partes esenciales de una pgina que pueden enriquecer enormemente
nuestros diseos al tiempo que marcar un cierto estilo a los proyectos. En este
captulo excluimos el texto por considerar que merece un captulo especfico
para desarrollarlo en su totalidad.

Aunque podemos producir marcos con la etiqueta TABLE de HTML, del


mismo modo es posible disear marcos con Photoshop. La diferencia sustancial
entre ambos radica en la capacidad de creacin que facilita la segunda opcin, ya
que, de este modo, es posible producir un nmero ilimitado de colores y texturas
imposibles de obtener con la etiqueta TABLE, el cual est ms encaminado a la
elaboracin de tablas. Pero puede ser extrapolado y emplearlo para confeccionar
interesantes marcos variando el relieve, el grosor e incluso ciertos detalles de diseo; aunque siempre dentro de unas restriciones implcitas por sus caractersticas,
como ya veremos ms adelante.
Los marcos como cualquier otro elemento grfico es aconsejable que no
ocupen ms de 40 KB pues tardaran excesivamente en aparecer en el visor del
navegador. Esto, en cierto modo condicionar el diseo y nos limitar a unas
pautas. Si el marco ha de ser de grandes proporciones, lo ms razonable es que
contenga un nmero reducido de colores; por el contrario, si el marco es pequeo
cabe la posibilidad de aumentar el nmero de colores y la inclusin de texturas
ms complejas y variadas.

Determinar

forma

Los marcos pueden tener formas diversas que podemos englobar en regulares e irregulares. Las primeras pueden obtenerse mediente la utilizacin de

Disear marcos, barras y botones


las herramientas de seleccin como: el Marco, la Ellptica, Columna y Fila unica,
Lazo poligonal, Todo, Invertir y submen Modificar. Las formas ms irregulares
pueden realizarse utilizando las herramientas mecionadas por separado o combinndolas mediante la resta y suma de formas. Otro mtodo muy eficaz consiste
en dibujar la forma del marco con las herramientaspara la creacin de trazados.
Sin duda uno de los ms eficaces cuando se tratan de diseos 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 opcin Transparente.
Cuadro de dilogo Nuevo y documento PSD.
Recuerde que la resolucin
debe ser de 72ppio 96ppi
segn sea el caso y el fondo del documento es recomendable ponerlo siempre
transparente. Si sabe las
dimesiones que ha de tener
en pxeles cree un documento con cualquier tamao y despus introduzca los
valores definitivos en el cua-

ne unas dimensiones de 425


pxeles de anchura y 14
pxeles de altura.

2. Para crear un marco con las herramientas de seleccin


procedemos a seleccionar todo el rea con el comando Todo
del men Seleccin, ya que la forma exterior es completamente recta.

167

168

Webs c o n Photoshop
A continuacin, cambiamos los bordes mediante el comando
Bordes del submen Modificar del men Seleccin.
Introduzca en pxeles el tamao que desea aplicar. Esta es la
forma ms rpida y eficaz de crear un marco con medidas
exactas.
Figura 86.
Submen Modificar, cuadro de
dilogo Modificar
bordes y documento.

ms 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 Seleccin.
Figura 87.
Submen Modificar, cuadro de
dilogo Redondear seleccin y
documento.

introducido ms acentuada

Disear marcos, barras y botones

169

4. Guardamos la seleccin, por si debemos repetir en algn


momento el proceso de creacin del marco, mediante el
comando Guardar seleccin del men Seleccin.
Figura 88.
Men Seleccin y cuadro Guardar seleccin.

Destina
-

Documento:
Canal:
-

II

Fluwo

1cancelar

racin
juevo canal

1. Para crear un marco con las herramientas de trazados


activamos en el documento creado la cuadrcula (men Ver)
y, acto seguido dibujamos con la herramienta Pluma la forma
del marco que deseamos.
+

+ 4 , ,,,,,
, , 12. , , ,

0:

, , , , 14, , , , 1 , , , , 18, , , . 1 ,,,,, I8, , , , 1 , , , a

I1

ii

S , , ,

,
-1

, , , a

I12, , , ,

# , , , m

il4
m

vado la cuadrcula con el


fin de dibujar
con una mayor precisin
y rapidez.

Figura 89.
Documentos PSE
Con la herramient;
Seleccin directa
hemos colocado,
ampliando la zona, '
cada nodo en la
posicin exacta.

-'

&

.;

1
!
-.e

Webs con Photoshop


2. Lgicamente hemos de convertirlo en seleccin. Para ello
pulsamos sobre el icono Convertir trazado en seleccin o
sobre el comando Hacer seleccin del men lateral de la
paleta Trazados. Recuerde guardar la seleccin utilizando el
comando Guardar seleccin del men Seleccin.

1 Capas Y
-

Canales

y razad dos\ 1 b 1

11

'

Figura 90.
Paleta Trazados y documento PSD.
Es aconsejable despus de convertir el trazado en
seleccin desactivar el trazado, ya que puede dificultar la visualizacin de los procesos siguientes, al tiempo que podemos modificarlo. Compruebe que con
esta opcin y en estos primeros pasos, las dimensiones del marco son un tanto ms difciles de determinar.

Rellenar y producir efectos


en el marco
Cmo 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 slido que
se incorpora en el fondo de la pgina Web. En estos casos lo incluimos haciendo
servir el comando GZF89a Export a la hora de la conversin del documento a
GZF y dejamos esta zona como transparente durante su transformacin. Otros
diseos muestran el interior del marco con la textura del fondo o con cualquier

Disear marcos, barras y botones


otro color. En estos casos lo ms rpido consiste en enmascarar dichas zonas (ver
pg. 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 slido, con texturas, trabajar con canales alfa, producir efectos de calado o de sombras, puede aplicarse mil y un
filtros y lograr efectos complejos, sutiles y maravillosos, como relieve, bajorrelieves o efectos de iluminacin que dan como resultado marcos realmente espectaculares; pero veamos unos cuantos ejemplos y cmo producirlos.
l . En esta ocasin 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 pgina Web. ste ya
podra ser perfectamente un marco, sencillo, pero un marco.
Figura 91.
Documentos PSD.
0

Hemos seleccionado 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 ms
le satisfaga- y cargamos la seleccin a travs del comando
Cargar seleccin del men Seleccin.
Una vez delimitada la zona la cubrimos de negro con la
herramienta Cubo de pintura, acto seguido, desactivamos la
seleccin y aplicamos el filtro Desenfoque gaussiarzo introduciendo las coordenadas ms acordes con las caractersticas
del marco y del proyecto en general.
Con la capa superior visible desplazamos el duplicado, en el
cual hemos aplicado el filtro, unos cuantos pxeles ms all
de la original hasta la posicin ptima, tal y como se muestra
en la pgina siguiente.

,,,

172

Webs con Photoshop


Activamos de
nuevo la seleccin del marco v

Desactivamos y
aplicamos el filtro
de desenfoque.

Ci esenfclcar
Desentncar m.is

L 1

pz-1
Cancelar

F Previsualizacihn

Desenfoque suavizado...

Figura 92.
Documentos PSD, submen
Desenfocar y cuadro de dilogo
Desenfoque gaussiano.

Lfl I I J r J i * ~

hemos dado un
valor de desenfoque de 4,4
pxeles dando el
resultado que
muestra la ilustracin superior

110

. ..- -

(12

m
(14

herramienta
Desplazar, ha
sido ubicada en
la posicin de-

Disear marcos, barras y botones

173

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 seleccin
en la capa o, bien, activamos la opcin 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
necesidades del momento.
Figura 93.
Submen Bosquejar y cuadro de diloao
Bajorrelieve y documento PSD.
En Detalle los valores ms altos
acentan el efecto, mientras que
en Suavizar los
valores ms bajos
producen un efecto ms tosco. En
este caso hemos
aplicado unos valores de 4 y 7
respectivamente
y la direccin de la
luz inferior.

l,, , ,

<

1-

,, L

--l

m
Cancelar

r14nn
Cromo..
Escayol
Estilngri
Fotncnr

111

Mtn'elnda rn~drolona
Papel c
Ral,?, al:

Ci ir da la lilz

xron
Tampor
Tiza y c

i.,
. , ..,Ir.., . , . . . .

I
'

Pipel h

. , . . . . . . I . .1.- ,
1

Interior

,lalx

.. ,. . . .1 . .

14

.'

4. Otros ejemplos de resultados que podemos obtener con este


filtro pueden ser los que se muestran en la pgina siguiente.

II

174

Webs con Photoshop


Figura 94.
Cuadro de dilogo Bajorrelieve y
documentos PSD respectivamente.

Las ilustraciones inferiores son representativas de


las variaciones que podemos obtener aplicando
consecutivamente unos valores de detalle y suavizado determinados. Variando el detalle y la direccin de la luz con respecto a la anterior nos
dan unos cambios en la confeccin del marco muy
interesantes, sobre todo las que muestran los dos
ejemplos inferiores.

Cancela

lnR

@II

d* 'a liir

5ieeriot cquimrda

Disear marcos, barras y botones

IR

Documentos PSD respectivamente.


Estas imgenes muestran como podemos
conseguir marcos originales para un fondo
de color slido. Trabajando con el color de
fondo y otro color incluido en la paleta y aplicando en la zona del marco cierto calado conseguimos difuminar los bordes, por lo que
en las zonas transparentes aplicaremos el
color slido del fondo. Este marco diseado
para incluir en su interior una onomatopeya
llamativa a modo de reclamo visual, ser al
mismo tiempo un mapa de imagen.

175

176

Webs con Photoshop


5. Ahora queremos distorsionar suavemente el marco para lo
cual hacemos uso de los efectos de distorsin de algunos filtros
del submen Distorsionar. Veamos algunos resultados
obtenidos.
Submen Distorsionar y cuadro
de diAlogo Zigzag y documento.
Esferizar...
Luz difwsa...
Molineti

Onda..
Ondas maimas...

En esta ocasin hemos producidc


filtro Zigzag aadiendo unos valores de -26 en Cantidad invirtiendo
con dicho valor el sentido de la

-1

Figura 97.
Cuadro de dilogo Rizo y documento PSD.
Mediante el filtro Rizo, incluido igualmente en el
submen Distorsin, hemos conseguido una rugosidad generalizada en todo el marco. Los valores incluidos son de 100 en Cantidad incrementando el efecto
de la onda en positivo y un tamao Medio. Los efectos
visuales son los que muestra la ilustracin inferior.

Disear marcos, barras y botones


Figura 98.
Submen Distorsionar y
cuadro de dilogo Molinete
y documento.

193

Cristal...

El filtro Molinete nos ha servi-

6. De una de las imgenes obtenidas en estos procesos de


variaciones queremosproducir efectos artisticos en el marco
para lo cual hacemos uso de los efectos que producen algunos
filtros artsticos del submen Artistico, Bosquejar y Trazos
de pincel. Veamos algunos resultados obtenidos.
Figura 99.
Cuadro de dilogo Sombreado y documento.
Con Sombreado conseguimos acentuar las formas y
los colores del marco hacindolo ms vibrante. Con
una longitud del trazo mnima, un enfoque mximo y
una intensidad mnima obtenemos este resultado.

-7
_i

1
+
J ioox

194

Webs con Photoshop


Figura 100.
Submen Trazos
de pincel, cuadro
de dilogo Sumi-e
y documento.

~nrrh-1acemados

nos con lnla

El filtro Sumi-e siempre proporciona efectos visuales realmente gratificantes. Con una anchura de
el contraste entre las zonas y un valor de contraste bajo conseguimos este interesante marco.

.
Bordes rasgados suaviza las formas unificndolas sin grandes contrastes Un nivel alto de
equilibrio de imagen
nos acenta el color
base usado, los bajos
valores en suavizado y
contraste elimina las diferencias bruscas entre
los dos colores base.

COntCiayon

E$ca~ob
Es"bg'f'ca
FOtOCw"

Modelo de med~otono
Papcsl con relieve.
P ~ !I Phumedo...
Rein:ubclon...
T
i

--

aiiipini

iI

tquilibin dp imagen

"
Caircaiei

mn

suavizai

a
Contiasle

r
F

Figura 101.
Submen Bosquejar,
cuadro de dilogo
Bordes rasgados
y documento.

Disear marcos, barras y botones


Figura 102.
Submen Artstico
y cuadro de dilogo
Vrgulas y documento.

Otro resultado intere-

Bordes aadidos...
Color diluido...
Cuarteado...
Esptula...
Esponja...
Fresco...
Lpiz de color...
Luz de ne0n...
Manchas...
Felculagranulada...

creto lo conseguimos
Pintardehaio,,,
con el filtro Vrgulas.
plastificado..,
Con un tamao de pinTrazos pastel...
cel y enfoque reducido y
un tipo de pincel simple
conseguimos este Hamativo al tiempo que sencillo
marco. Los filtros de creacin de
efectos artsticos producen con
una adecuada mezcla y uso
efectos muy eficaces. Aqu slo
mostramos unos pocos ejemplos de lo que puede lograrse.

+
J 10ox J

Tanaod-p~n:el

A
T W ~ Fpincd

y
f

dA&

Figura 103.
Submen Artstico y
cuadro de dilogo
Bordes aadidos
y documento.
Luz de nen...

En esta ocasin Bordes

Manchas...

unos resultados espectaculares. Aplicando


unos valores reducidos
en anchura e intensidad
de borde y posterizacin
conseguimos un marco
muy interesante, con efectos y
brillos de acabado metlico, el
marco asemeja una espe
tubera. Cada una de las
ciones logradas nos sirve para
un tipo de pgina Web.

I ~ i t m d a dde badt

,,

Webs con Photoshop


Con el filtro Plastificado
sabemos de antemano
el efecto que nos va a
producir, sin embargo
nuestra sorpresa es tal
que el efecto asemeja
ms a gotas de agua.
Aplicando unos valores
altos en intensidad y detalle y un valor medio en
suavizado, logramos un
efecto mesurado al tiempo que vistoso.
-.O
O -

.... .... I?.-.

'

Color diiuido...
Esptula.,,
Esponid..,
Fresco ..
Lpiz de color...
Luz de nen...
Manchas...
P e I c d ' ~granulada...
Pinte'

ii",..., . , . . It ..., ....RI . . . t ~ , ' P . . . , . . . . , l I ' J . .

En esta ocasin el filtro


Retjculacjn nos proporciona un interesante
marco muy especfico
para colocarlo en una
pgina con otros elementos semejantes.
As, con unos valores alen densidad y de
blanco y un valor bajo en
nivel de negro producimos un curioso efecto
en el marco.

Figura 104.
Submen Artstico
y cuadro de dilogo
Plastificado y documento.

--~--elieve...
Bordes rasgodos...

Latoncilb...
CmtQCra~an-.
-. ....
r'nw...
Escas
Est~ln!
Fotoc
~ o n e l ode medio tono...
Papel con relieve...

..

T arnp
Tiza y

Nivel del bbnco

Figura 105.
Submen Bosquejar
y cuadro de dilogo
Reticulacin y documento.
. . ,..

..

....,

Disear marcos, barras y botones


7. En la imagen original seleccionada (pg. 172) tambin
queremos producir unos efectos con losfiltros del submen
Textura para lo cual nos disponemos a mostrar cmo queda
dicho marco aplicando los diferentes filtros. Veamos qu obtenemos.

G ranulado...
Figura 106.
Submen Textura y cuacjro de
dilogo Gritas y documento.

h-.

Retales...
Teselas...
Texturizar...
Vidriera...

~ancciiu

+
J lm
Opcimer
E:oacso de ge'j

Pidundidsddc grieta

16

P I ~ Ode m

F-

En este marco el filtro Grietas produce un efecto enriauecedor al t i e m ~ oaue espectacular. Un espacio de grieta pequeo acompaado de'una profundidad de grieta
media y un brillo alto, nos proporciona un efecto metalizado que da un toque de sofisticacin, que puede ser acentuado en otros componentes grficos de la pgina.

Granuladu...

Figura 107.
Submen Textura y cuadro de
dilogo Texturizar y documento.

I " ,

Grietas...
Retales,..
Teselas...

CW~CCI~

lrn

Vldrlera,..

El
. - , - - . . - - -. . - - . .-.,---

filtro Texturizar da un
acabado ms artesanal muy
1
l apropiado para enmarcar
productos naturales, la intensificacin del efecto sobre la superficie del marco viene
determinado por los valores incluidos. En este caso, una proporcin al 100%, un
relieve bajo y una direccin de la luz superior.
---e---

2-.---

-.-.-*-u

Webs con Photoshop

198

Granulado...
Giitas...
Retales...

Figura 108.
Submenu Textura y cuiadro
de dilogo Teselas y dOCUmento.

-4

-7

I
Texturizar...

OK

Cwda

2
;
l

Vidriera...

Anchuia de tcchada

El filtro Teselas nos proporciona


unos acabados similares a los
conseguidos con el filtro Grietas,
sin embargo, si observamos produce una textura distinta aunque el efecto metlico y
luminoso est igualmente presente, produciendo un efecto de tubo texturado. En esta
ocasin hemos incluido unos valores de tamao de azulejo y anchura de lechada
baja, mientras que hemos aplicado un valor alto en la opcin aclarar lechada.

8. Retornarnos la imagen original cubierta con un color slido


(pg. 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


puede resultar muy enriquecedor en diseos de marcos con
formas dibujadas ms comple]as y sutiles En esta ocasion, el
resultado es un marco con relieve liso, sencillo y contundente,
sometido a una altura, ngulo y
direccin de la luz.

B O I ~ ~tlummadus
S

Difusi6n
EX"USYU1

- --

--

--

R ~wiruahzac6n

3e,d,

~razarperi~

IOOSEI

viento
h l o

.1:..,,...,L,...i'-.19...~L...1'L.~
1

C-tar

Halla boldes

.... l'?.., .... l...,


14

'

hlfle

IRpxel~
A

Submen Estilizar y cuadro de


dilogo Relieve y documento

Disear marcos, barras y botones


En las imgenes conseguidas tras aplicar los filtros .-+lo,,
, ,,, , , ,l!,
Sumi-e (pg. 176) y Vrgulas (pg. 193) hemos aplicado el filtro Relieve con
los valores anteriores, obteniendo los resultados que
muestras las ilustraciones
superior e inferior respectivamente.
I

,, ,, ,

L14u,, , , , ., 16,,

o a

l?, , . t u .l!.,

. . ,. ,, ll,Ld!,L

- ---

--

@
3

Figura 110.
Documentos PSD
respectivamente.

Consejo

199

...

Recuerde que este filtro tiene como contrapartida que siempre da


unos efectos de colores plateados, los cuales puede modificar aplicando
posteriormente efectos de iluminacin 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 grfico en la
pgina, es Efectos de iluminacin (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, tambin
si con anterioridad hemos aplicado relieve al marco.

Webs con Photoshop

Figura 111.
Submen interpretar, cuadro de
dialogo Efectos
de iluminacin y
documentos PSD.

Ncpativa 20

Posilivo

?
-a

La gran variedad de posibilidades

k que ofrece el filtro Efectos de ilu-

minacin radica en la diversificacin de efectos, ya no slo


luminosos, sino en la incorporacin de relieve mediante canales
alfa guardados o texturas incor-poradas. Nos encontramos con
una herramienta capaz de modificar ciertos aspectos lumnicos en el marco hasta producir efectos de mayor envergadura y ms sofisticados. La opcin Estilo nos proporciona una amplia gama
de modos de luz a aplicar,
.
las opciones Tipo de luz y
Proniedades incluven caractersticas de la luz como
ambientacin, tono, brillo
intensidad, etc. El Canal
de textura brinda la posibilidad de incluir canales
walfa para variar de algn
-

lL
s1 L k r ~ ~
.-.

.,...,Y

u
,
,
,
,

i'!,

modo la incidencia de la luz so-

JiA
bre la superficie del marco. En el

caso de estos tres ejemplos han


sido aplicados los mismos valores, expuestos en el cuadro de
dilogo superior. Aunque como
podemos comprobar en las ilustraciones inferiores lo hemos aplicado en el interior del marco.

Disear marcos, barras y botones

201

En la ilustracin superior se ha
12
aplicado en la zona interior del '
I
Y
,
.,
..,., ... :1 . ... r!. .., ... .k". .#,..La
,.. .. 1
marco Efectos de iluminacin.
En la inferior hemos usado el filtro Vidriera y, a continuacin, hemos aplicado los filtros Relieve
en el marco y Efectos de iluminacin, 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 dilogo
Efectos de iluminacin
v documento PSD.

. # .

Guabdar

TIPO de luz

17
1
1

1CI- trc-~

- -. -..-...

"

Nubes

Nubes de diferencia
Rellenar de textura...

1 1

Con toda la zona cubierta del


mismo color, hemos aplicado, primero en el interior y
luego en el exterior del marRevini&
co, el filtro Efectos de ilumicin variando los valores, especialmente el estilo de luz,. el tipo
.
de luz y el canal de textura, para
lo cual se ha utilizado el canal de
la seleccin del marco que habamos guardado con anterioridad.
Tambin se han utilizado colores
cremas, uno ms intenso que el
otro. De este modo, conseguimos
el diseo de un marco serio, clsico y elegante.

/
hbnnte

mm

NegativaA

-23

Pos~hw

tanal de textura 186


l
iAbtmdmcm de M a c o
Altua

50

MoniaRosa

202

Webc con Photoshop


El filtro de iluminacin
puede ser utilizado antes
de producir cualquier
otro efecto, como en
este caso, que hemos
aplicado en el marco de
la pgina anterior el filtro Rizo. Las ilustraciones inferiores muestran
el resultado que produce su aplicacin, obteniendo un efecto suave
en el ejemplo mostrado
en la parte superior y en

,-,,~adaspdares,
Cns,al,,.
Desplazar...
Encoger...
Esfefizar...
Luz difusd..
Molinete...
Onda...
Ondas rnarinas...
Proyectar...

Opciaies

lar

Cantidad

Zigzag.,.

.
m,,;
1
.

..o.ij 0

mayor medida acentuaao


en el ejemplo de la derecha. Como vemos es posible conseguir infinidad
de efectos con un solo diseo, qu podremos hacer
SI tratamos todos estos
efectos en todos los diseos que se nos ocurran.

, ..

. ,

:1 ,, ,,

'4 a

a a S

,I

??

- 7

,,

'

Figura 114.
~ " b m e n Bosaueiar
y cuadro de dilogo
Reticulacin y documento.

. , . . . 1 9 . . . , .!., P . . . , .. . . I1!,

, , , , .,

:,

xLl

ll?, , , , , , F?

Puede enmascarar las zonas transparentes de los marcos con formas


irregulares mediante cualquiera de las herramientas de enmascaramiento
que dispone Photoshop. Para ms informacin consulte el captulo
Transparencias en imgenes para l a Web donde se describen los
mecanismos que puede emplear para enmascarar transparencias.

Disear marcos, barras y botones

h a I que sabor...
ESTILOS DE EFECTOS DE ILUMINACIN
Para aplicar los estilos hace falta como mniimo un foco de luz. Los nombres que a continuacin detallamos vienen abreviados en la versin de Macintosh.

Por defecto: Un foco amarillo de intensidad media y foco amplio.


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.
Crculo de luz: Un foco compuesto por luz roja, azul, amarilla y blanca, de intensidad 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 superiores 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
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 desactvela.
Para variar la altura de la textura mueva el regulador de la opcin Altura.

203

Webs con Photoshop

T I P O S DE LUZ
De techo: Alumbra en todas direcciones desde arriba.
Direccional: Alumbra desde la lejana.
Foco: Proyecta un rayo de luz elptico. 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 opcin Encendida si est trabajando con varias focos, 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, Exposicin y Ambiente. Para cambiar 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 ms luz.
Exposicin: Incremento u oscurece la luz.
Ambiente: Crea una ambientacin mediante la combinacin ficticia de la luz
dada con una luz ms general.

Definir la etiqueta TABLE


para producir marcos
Tratada en apartados anteriores, entre otras cosas para definir el fondo,
nos servir, en esta ocasin, para elaborar distintos tipos de marcos. Aprovecharemos las posibilidades que nos ofrecen los atributos relacionados con la etiqueta
y que definen las caractersticas del mismo, como son el color del fondo, el tamao 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. Modificndolos conseguiremos vistosos marcos para nuestras pginas.

Disear marcos, barras y botones

205

HTML cuenta con un extenso nmero de atributos que nos ayudan a variar las caractersticas de una tabla. BGCOLOR define el color con el cual cubriremos el interior del marco. Al igual que en otras opciones en las que podemos
utilizarlo, hemos de indicar el color mediante su correspondencia en nmeros
hexadecimales, un ejemplo sera BGCOLOR=FFFFFF. Para especificar el color 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. Tambin podemos precisar el color oscuro o claro del borde de una tabla para lo cual nos serviremos de
los atributos BORDERCOLORDARK o BORDERCOLORLIGHT respectivamente. Comprobamos la variedad que es posible desarrollar con respecto al
color de una tabla.
Por definicin la etiqueta TABLE no contiene informacin del borde de
una tabla para incluir cierto grosor hemos de incluir el atributo BORDER asignando un valor numrico para indicar su tamao 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 numricamente
precisndolas como CELLSPACING=S y CELLPADDLNG=2 respectivamente. La tabla igualmente no contiene informacin que determine su tamao en la
pgina para ello haremos uso del atributo WIDTH, especificando en tanto por
ciento el tamao o, bien numricamente, como por ejemplo WIDTH=50%.
+

Los atributos mencionados son los ms reseables para producir interesantes marcos mediante tablas; pero veamos unos cuantos ejemplos que nos permitan vislumbrar el alcance que tiene la utilizacin de estas herramientas para
disear interesantes marcos, comprobando in situ las diferencias especificadas en
ellos.
Figura 115.
..
=m
+
..?" "!-, 2
?.
Visor de Microsofi
M&

A*-

Li". : ; . t

..,-

bu

lnternet Explorer.

(-

-TC

....-.,,..,..

3-

l l , , ' l , ! , , l , - - T - . . . , . U . ,.ti',

"

Hemos utilizado la tabla para enmarcar la fotografa. Dando un tamao al


marco de 40% con respecto a la horizontal de la pgina. El grosor determinado para el borde es de 15 pxeles,
la distancia entre la fotografa y el borde es de 50pxeles y el espacio entre
celdas dado es de 5 pxeles. El color
responde a un beige.

Ir-----

I
.

,,.,, .i

. -..
A

mmentlNS-m-mPIPW\Ilv,IIT'S

cI. L , . ~ , ~
L

,.+

206

Webs con Photoshop

...

a l g o sobre html

La ilustracin que aparece en la pgina anterior muestra esta estructura; al igual que la mostrada en la parte superior de la pgina 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
I

<IHTML>
Al margen de la alineacin de la etiqueta T D como ALlGN=CENTER
hemos alineado la imagen en el centro definindola comoALIGN=MIDDLE
tal y como corresponde. Del mismo modo se han introducido las dimensiones de la imagen como se requiere W I D T H = 160 y HEIGHT=24 l .

Disear marcos, barras y botones


Figura 116.
Visor de Microsoft
lnternet Explorer.

m.r

,.- -

E-vr

* m

-..
PE
--

: 7

r
Hemos utilizado la tabla para enmarcar la fotografa. Dando un tamao al
marco de 40% con respecto a la horizontal de la pgina. El grosor determinado para el borde es de 15 pxeles,
la distancia entre la fotografa y el borde es de 50 pxeles y el espacio entre
celdas dado es de 5 pxeles. El color
responde a un blanco.

...
4

,.*

-,r
.r.mr

. 7 - . , .

-J

,.

--

-*

l
1

.* , ?.-

207

*-I*

PIP ; Y f O ~ N l l T <S

i7?fi?
, : ~ 3 , 7 , s & m rY

w2

,,ir-

'

A "

e,

Figura 117.

...

.-

Visores de Microsoft
lnternet Explorer.

mr!;\sJTilJN9in'pv:trm:ws

Realizamos unas variaciones y


obtenemos el marco que muestra la ilustracin. Se ha mantenido un tamao del marco al 40%
con respecto a la horizontal de la
pgina. El grosor determinado
para el borde es nfimo, de
1 pxel, por lo que casi no es
g4
apreciable. La distancia entre la
*
fotografa y el borde pasa a ser
de 5 pxeles, sin embargo el tamao al 40% desvirta el marco, por lo que aparece
una mayor distancia entre la fotografa y el borde en horizontal. El espacio entre celdas ha pasado a ser de 7pxeles. El color elegido responde a un blanco. Observamos que el marco adquiere otro carcter.

~ ~ K:;:?[ff
J T

,,L...

El tamao ahora pasa a ser del 30% .


Esto hace que aparezca ms ajustado
con respecto a la fotografa haciendo
que el marco adquiera otro protagonismo. El grosor determinado para
el borde sigue siendo de 1 pxel. La distancia entre la fotografa y el borde es
con respecto a la ilustracin superior
la misma, es decir de 5 pxeles. La diferencia aparece en el espacio entre
celdas que es en ste de 26 pxeles,
por lo que aparece ms grueso. El color elegido sigue siendo un blanco.

.:
--kl

-?..q

-.lT--

.--..:

dl!.

?.L

.jd

+
. F.?

-,

-7
1

---A

:77fi7

-E

*,L.

-1

.l

..-M

208

Webs con Photoshop

a l g o sobre html..

La figura 1 17 superior muestra la siguiente sintaxis:


<HTML>
<HEAD>
< TITLE> marcos </TITLE>
</HEAD>
<BODY BGCOLOR=#CFC3B 1 >
IMG SCR=marco.jpg WIDTH =425 HEIGHT= 142
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 hubiese bastado. Por otro lado, la etiqueta TR define una fila de la tabla, mientras que la etiqueta TD precisa los datos de la tabla. Vamos que para construir un marco simple necesitamos una etiqueta TR y otra TD para introducir la informacin pertinente a ese marco.

Disear marcos, barras y botones

...

a l g o sobre html

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 fotografa 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 ocasin s que era necesario
introducir informacin del margen vertical y del horizontal respectivamente.

,,,

21o
a

Webs con Photoshop


.

P.

. .'.*

&C.

'
I

C.d.

:-

V..&

1.

I
1

T.-<

"

A
I

i
m \un VN b

Figura 118.
Visores de Microsoft
1
Internet
Explorer.
1

--. --

d .,.-' $

P"*,

~ iwi~i-rn-rs
~ ~ r

a-T

En el segundo ejemplo muestra


una variante que plasma un marco de caractersticas distintas. Ha
sido igualmente centrada y hemos mantenido el tamao al 40%.
Ampliando el grosor del borde a
10pxelesintensificamos el efecto del mismo y cambiamos su fisonoma. La distancia entre la fotografa y el borde se ha mantenido en 5 pxeles al igual que el
espacio entre celdas de 1 pxel.
El color seleccionadopara el fondo de la tabla es el blanco.

Tambin podemos enmarcar texto grfico mediante el uso de las tablas. sta
ha sido centrada y se le ha dado un
tamao del 40% con respecto a la horizontal de la pgina. El grosor para el
borde es de 1 pxel, la distancia entre
la fotografa y el borde es de Spxelec
y el espacio entre celdas es de 1 pxel.
El blanco es el color elegido.

,, ..,.,
,:. . ,.-J

,,,

,.

-1

L,..,.

., .>
,..-

a,.",,

.,

2,
.*. ,.A. .

rc.

Z
I-.,-:=-

n~wl:~~;~!~!-xs
xvi;,,.
-

.,L..

.. .-.. .
-

.-,,
- -

-;-

,:

r, ,,i(=g*tfw<

.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 nmero de
columnas de una tabla. el primero especifica los datos de una tabla. mientras que el segundo, especifica las cabeceras de la tabla. Cada grupo <TD >
</TD> o <TH> </TH> define una columna. La combinacin de las diferentes filas y columnas conforman la forma del marco.

o'

Disear marcos, barras y botones

a l g o sobre html..

La figura 1 18 superior muestra la siguiente sintaxis:


<HTML>
<HEAD>
< TITLE> marcos <ITITLE>
<IHEAD>
<BODY BGCOLOR=#CFC3B 1 >

<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 haciendo que se intensifique el efecto de marco sobre el texto grfico.

<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>

211

Webs con Photoshop

212
.+...

.,. .
-.;
-- E. -.w,.
(D-L^

r
.l .

.S

P.

En*

4-

5.

c?.,.

*u4-

:
-,A, ,2.
:
r-.

"

7
-*

raI",QImli4 S71IIP!rYfirlMPWB

fi-

.r

columna TDcentrando el contenido de


las celdas. Su tamao es del 40% El
borde de 1 pxel. La distancia entre la
fotografa y el borde es de 2 pxeles,
el espacio entre celdas es de Ppxeles.
Como color de fondo el blanco.

En el segundo ejemplo muestra


una variante. Lo ms representativo es que en la fila inferior
hemos incluido dos elementos en
la columna colocando cada uno
de stos a ambos lados. Por lo
dems, el tamao vuelve a ser
del 40%, el borde de 1 pxel, la
distancia entre la fotografa y el
borde pasa a ser de 20 pxeles y
el espacio entre celdas de 10
pxeles. El blanco sigue siendo
el color utilizado para cubrir el

Figura 119.
Visores de Microsoft
lnternet Explorer.

enmarcado los dos elementos


. Hemos
graficos mediante una tabla de dos
las TR y cada una de stas con una

&/?T,(:724y
*mit
. .*raww

Ii

..
,:

. . . .... ,,
3

.-&&T.

.F

4 ,%, .?- t,/-

.,--

WllSil l

.,,+

--.

w ST'PPrUr"lM1?IiFS

&!r:-

ICF4?fl1

+.

.F.. 2

>T:[tt
31

rL#&fpP7

-F! E- 1

fondo de la tabla
Observe que en la ilustracin superior hemos definido la alineacin en la etiqueta
TD, mientras que en la ilustracin inferior se ha especificado dentro de los atributos
de cada una de las imgenes incluidas. Esto es as porque en el segundo caso hemos
colocado dos objetos en una misma celda. Comprubelo en la informacin incluida en
la pgina siguiente.

Para definir la posicin en horizontal utilizaremos el atributo ALlGN


de los siguientes modos: izquierdaALlGN =LEFT; centro ALlGN =CENTER
y derecha ALIGN=RlGHT. Para definir la posicin en vertical emplearemos el atributo VALIGN de los siguientes modos: superior VALIGN=TOP;
centro VALIGN=MIDDLE y inferior VALIGN=BOTTOM.

Disear marcos, barras y botones

...

a l g o sobre html

La figura 1 19 superior muestra la siguiente sintaxis:


<HTML>
< HEAD >
<TITLE > marcos <ITITLE

>

<IHEAD>

<BODY BGCOLOR=#CFC3B 1 >


<TABLE WIDTH=40% ALIGN=CENTER BORDER= 1
CELLPADDING=2 CELLSPACING=2 BGCOLOR=#FFFFFF>

La figura 1 19 inferior muestra las siguientes variaciones.

,13

Webs con Photoshop

21 4
L..-,

"*+

En

y.

,-

b.

+,.

-; . 2

, A

- ,-1 . 4

2'

--m

'

J-

Figura 120.
Visores de Microsoft
lnternet Explorer.

Hemos enmarcado los dos elementos


grficos mediante una tabla de dos filas TR y cada una de stas con dos
columnas TD centrando el contenido.
La incorporacin 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 casin hemos colocado ,.. ,,


las tablas vacas a la derecha por =: .
lo que aparece el mayor grosor - i . .
en este lado y variando la alineacin de la imagen. Por lo dems
en ambos ejemplos, el tamao es
del 40%, el borde de 1 pxel, la
distancia entre la fotografa y el
borde es de 20 pxeles y el espacio entre celdas de 10pxeles.
El color de fondo de la tabla pasa
a ser un beige.
Observe que no hemos especificado la alineacin de la imagen
-

,. .. ,.,...

---.

. .2

u-

.. ,

r,

WlAJCPCEiTIIM'T/T'H?7N'u

6~7* -: + J J ~ :m,
f3

T?-vdr

%?

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 tena estos valores.
Para definir la posicin en horizontal utilizaremos el atributo ALIGN
y VALIGN para definir la posicin en vertical.

Disear marcos, barras y botones

...

a l g o sobre html

La figura I Z O superior muestra la siguiente sintaxis:

<HTML>
<HEAD >
< TITLE > marcos <ITITLE >
<IHEAD>
<BODY BGCOLOR=#CFC3B 1 >
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.

215

Webs con Photoshop

216
..-

Le

*.
I
e-

t.

,l

,S,.,

"

.S,,

Fe
h
,
.

wrXb

..

,i B wau *
,

ri-

rrw Cii*

a Figura
Visores de Microsoft
121.

--

1 1 I.r a~

-.

7 lnternet Explorer.

, , ,, --.r'..:,

.,,---7.
.*,,A.
<,,,!,

,,,

8.

~ ! A ? - ~ O R ? m J i B W ) M ~,.S

F
..

c ,a

Para disear este marco hemos creado una tabla de dos filas TR, tanto la
-superior como la inferior constan de dos
columnas 70.La incorporacin de celdas vacas, colocadas en la posicin
que aparece en la pgina siguiente, posibilita este diseo. Si incluimos elementos en las celdas vacas aparecera un marco en los espacios vacos.

rT

,,p-,8q~m

~ ~ m m ~ , ~ . ~ ~ , ~ ~ , ~ ~ ~ . l r , ~ ~ ; - ~ , . ,

,
1

,._

En este marco simplemente he- ..,.


,*
*+.
mas incluido en la segunda fila
. . c-.-J l . ,3" 3
TR una tercera columna TD. Al -.
., -.......-.,.
aparecer la segunda imagen dentro de otra celda no ha sido necesario especificar la ubicacin,
ya que ambas han utilizado el 4 .' 3trr.i.w. -:.-=,, :v. F , . & X P ~ ~ I
valor de alineacin que aparece
por defecto, esto hace que todos
los elementos grficos incluidos
en las celdas aparezcan centrados en las mismas. Se han mantenido los valores de los marcos
dados en la pgina anterior.
Y
:

"u..

!
....,
. !.n,.

--

J
,-...

, "-.

.. -

<

J.

.,,.

Observe que ambos ejemplos contienen zonas vacas. Como ya hemos dicho para que aparezcan de este modo simplemente hemos aadido
columnas ( <TD> c/TD> ) sin ningn tipo de elemento grfico o tipogrfico en su interior. aunque, comprobamos que las zonas aparecen cubiertas.
Si le interesa que ciertas zonas aparezcan completamente vacas, es
decir, a la misma altura que el fondo deber escribirlo del siguiente modo:

<TD>cBR> </TD>.

Disear marcos, barras y botones

...

a l g o sobre html

La figura 12 1 superior muestra la siguiente sintaxis:


<HTML>
< HEAD >
< TITLE > marcos </TITLE >
</HEAD>
<BODY BGCOLOR=#CFC3B 1 >
<TABLE WIDTH=40% ALIGN=CENTER BORDER= 1
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.

217

21 8

Webs con Photoshop


..
J

L..-6

_.
-%

_..

-1

3'

"
I
-

m
l=Emm=
vvii

i11i

_ _..

.'

ui

- ,!

0,-rx+

rii

rri iii ri titi- JTI

i~r$rIU 1'1

I?TI,"ISDII~!N
WPP 'W I'MFT'S
-m.il

Figura 122.
Visores de Microsofi
lnternet Explorer.

.#

&Y"
'

--

1-7
r i ; ~I .?

:jt-<,
-

A diferencia del anterior este di- Lceo consta de importantes variaciones. La ms significativa es
el uso del atributo BORDERCOLOR para incorporar un color
especfico en el borde. Para selos marcos hemos recurrido a otra tabla incorporando una
fila con una columna vaca y el
fondo del mismo color que el fondo de la pgina. Para que apareciesen separadas la tabla superior e inferior hemos dado un valor de separacin en la celda de
10 pxeles en la tabla intermedia. Tal y
como queda explicitado en la pgina 220.

l A

Lo ms significativo de este diseo de


marcos mediante tablas es la separacin de ambos marcos mediante la aplicacin de tablas en cada uno de stos
una tabla por separado. Cada uno de
ellos mantiene los mismos valores excepto el color de fondo utilizado.

a-sn'im.i?

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 adems podemos usar
BORDERCOLOR para cambiar el color del borde. aunque puede recurrir a
BORDERCOLORLIGHT o BORDERCOLORDARK para cambiar el color 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 ilustracin superior.

Disear marcos, barras y botones

...

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>
<TABLE WIDTH=40% ALIGN=CENTER BORDER= 1
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>

219

Webs con Photoshop

..

a l g o sobre html.

La figura 122 inferior muestra la siguiente sintaxis:


<HTML>
< HEAD>
< TITLE > marcos </TITLE >
<IHEAD>
<BODY BGCOLOR=#CFC3B 1 >
<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 >
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>

Disear 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 segundo se usa para indicar el nmero de celdas que ocupar la celda de una fila.
En ambos casos hemos de especificar el nmero de celdas que se ocuparn
escribindolo del siguiente modo: ROWSPAN=S. Este ejemplo nos indica
que la celda ocupar cinco celdas de una fila.

UNOS CUANTOS EJEMPLOS


Lo contenido en un marco puede ser tan variado como lo mostrado en la
pgina de este museo. El diseo por tablas ha marcado unas directrices.
.c

,+.

.- ,
0

- -.
-

.m

. m

L.

.- . -

l h < , m \ , , l ,1 ,r

-....--

+-

$?:

--

.%

A"

- -

'. +
:.

T H STCJRY
~
OF 2 BCQI I \T
,Y 9 1 1 7 mI.ilA, U I I M I Y

M,h,

,
<:A,
.<-

a,

-*-

F Y H I B II

,,*=

r! r - 1
-_.
..,__
..

2TrZ:~7+-T~*w~2$PL-L:2-h2=:
- M d * C . v ~ n l i l * P U I -

niiii.-CWirrndid*ldiIYnii
*.ri.*i
i,rirr.iiiYuC*r

. V ~ l l

.-

,-

2 L.

d ~ l ~ J l f n a i n l P g i l i * * a c - * ~ ~ b i ~ u

--...*+-

-.
]/

- .

-- -

..a,+

La pgina de Sm~thsonianha sido creada exclusivamente con marcos Cada elemento,


cada dato ha sido enmarcado El borde aparece cubierto con la textura utilizada para el fondo Esto es as porque no se ha incluido infort-

..

...

Figura 123.
Visores de Microsoft lnternet Explorer

-.

s.----

-Lil-iCyil
Ir*r*l.
4.-3

cionada con el coloidel marco, tanto del fondo como del borde Por
otro lado, tenemos marcos como el que
presenta CyberAnt~queMall.Es un claro
ejemplo de marco diseado en un programa de tratamiento digital de imgenes, que podra ser perfectamente
" Photoshop.

&&
-m-.-

s*LFItri

222

Webs con Photoshop


DISEAR BARRAS
HTML consta exclusivamente de la etiqueta HR para crear barras, que
slo pueden aparecer en sentido horizontal. Con Photoshop podemos disear infinidad 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). Lgicamente cuando utilizamos SCR para determinar la incorporacin 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 tamao excesivamente grande, por lo que su diseo no se ver excesivamente
condicionado. Sin embargo deberemos tener en consideracin los colores que
contienen con respecto al resto de elementos grficos, si trabajamos en formato
GZF. Aunque pueden estar incluidas en un texto grfico a modo de subrayado, por
lo que debena tratarse conjuntamente durante el diseo del texto. Los casos ms
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
continuacin se pretende presentar o explicar. Como nuestra forma de lectura es
de izquierda a derecha y de amba hacia bajo lo ms habitual es encontrar barras
horizontales. Sin embargo, en numerosas pginas podemos comprobar como se
separa mediante un color distinto, un degradado o una barra, por qu no, la informacin o botones presentados a la izquierda de la informacin ms especfica y
detallada que ubicamos a la derecha. As, comprobamos que el diseo de barras
verticales tambin tiene su importancia a la hora de elaborar pginas para la Web.

Dibujar la forma
El proceso de elaboracin de una barra es similar al seguido para la construccin de marcos aunque habremos de considerar ciertas diferencias implcitas
en su propia morfologa. Dado que su progresin es anloga nos limitaremos en
este apartado a mostrar una sntesis. Bien, al igual que los marcos podemos dibujar la forma que tendr la barra mediante herramientas de seleccin como: el
Marco, la El@tica,Columna yfila nica, Lazo poligonal, Todo, Invertir y submen

Disear marcos, barras y botones

223

Modificar sumando y restando espacios y, tambin usando las herramientas para


la creacin de trazados. Sin duda, ya lo sabemos, es el mtodo ms eficaz cuando se tratan diseos algo complejos o con curvas.
1. El primer paso consiste en crear un documento nuevo con
una dimensiones cercanas a las que tendr la barra. Si alguna
de las zonas ha de ser transparente activaremos en Contenido
la opcin Transparente.
.

Nombre 1 ~ 4 ~ ~ 4
Canceisr

Tarnafio de imagen. lOlK


Anchura.
Al!ura:

Hesolucin.
Modo.

1600r pxels

1
5
71 pxeis

1 Coior RVA

1 Recuerde que la resoIuci6n


1 debe ser de 72 ppio 96 ppi

1721 pxels/pulgada

segn sea el caso y el fondo del documento es recomendable ponerlo siempre


transparente. Si sabe las
dimensiones que ha de tener en pxeles cree un documento con cualquier tamao y despus introduzca
los valores definitivos en el

Contenido

Blarico

(- COIN

de fondo

Traqarente

cuadro de dilogo Tamao de


imagen Este documento tieneunasdimensionesde425
pxeles de anchura y 142
pxeles de altura.

i,':

"'

Figura 124.
Cuadro de dilogo Nuevo y documento PCD.

' "

,,

.l.

' "

" '

'.
' "

7
" '

" '

'"

'"

' "

Crear una barra con las herramietas de seleccin resulta


muy apropiado cuando se tratan formas muy sencillas como
un simple rectngulo o una elipse. En la mayora de los casos
resulta aconsejable introducir los datos de proporcin de la
barra, lo ms idneo es activar en la paleta de Opciones de la
herramienta seleccionada en Estilo, la opcin Proporcin
restringida o Tamao fijo.
En esta ocasin empleamos la herramienta Marco para dibujar una barra rectangular.

Webs con P h o t o s h o p
1

Naveaador

Anchur*

Infc

--

es de m n o s

EAltura: 145
~xels

Calar:

pxellr

\1 bl

Figura 125.
Paleta Opciones de marco
y documento PSD.

1 1 Para dibujar la forma de la barra hemos


-- -

tado por determinar un tamao fijo de


pxeles por 45 pxeles, de este modo obtenemos el tamao 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 continuacin hemos de convertirlo en seleccin.
Para ello pulsamos sobre el icono Convertir trazado en
seleccin o sobre el comando Hacer seleccin del men lateral
de la paleta Trazados. Recuerde guardar la seleccin
utilizando el comando Guardar seleccin del men Seleccin.

Figura 126.
Documentos PSD y
Con la herramienta Seleccin
directa hemos colocado, am- Paleta Trazados.
pliando la zona, cada nodo en
la posicin exacta. Hemos activado la cuadrcula con el fin
de dibujar con una mayor precisin y rapidez. Es aconsejable despus de convertir el trazado en seleccin
desactivar el trazado, puede dificultarle la visualizacin.
1

1I

II

Disear marcos, barras y botones


Rellenar y producir efectos
en la barra
Como en el caso de los marcos el proceso que debe seguirse para acabar
el diseo puede ser de lo ms variopinto, ya que cada cual puede hacer uso de sus
propios hbitos de trabajo o su estilo. Sin embargo, marcamos ciertas pautas, pues
creemos que Photoshop propociona una serie de herramientas que son enteramente adecuadas para esta finalidad, aunque como es lgico la creatividad de cada
cual puede desembocar en procesos de elaboracin muy particulares.
Si observamos, la mayora de barras que encontramos en la Web, siguen
unas pautas; suelen tener relieve y un cierto grosor, cuando son elementos grficos
incorporados. En la mayora de ocasiones el interior de las barras est cubierto
con el color slido, aunque del mismo modo podemos incluir barras con efectos
de textura en su interior, planas y otros atributos grficos que deseemos.
Recordando apartados anteriores diremos que si la forma es irregular hemos de rellenar las zonas transparentes del documento. Si se trata de un color
slido realizaremos el proceso descrito en el apartado Aplicar un color slido en
una de las zonas transparentes de la imagen (pg. 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 caracterstica.
1. Para cubrir la seleccin de la barra con un color slido 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 seleccin sin cambios de tonalidad.

Figura 127.
Documento PSD.

Hemos seleccionado un color con los valores R: 85, V: 80 y A:


21 que corresponde a un verde oliva y, a continuacin hemos
cubierto la seleccin con la herramienta Bote de pintura.

,,,

Webs con Photoshop

226

En el segundo caso, empleamos la herramienta Tampn para


cubrir la zona con una textura predeterminada.
. . . . . . . .

-,-

Figura 128.
Men Edicin y documentos y
paleta Opciones de tampn.

CIrhX
CII~C
Peaai
--=-

CIiI+V

Pegu entro
Borrar

Mayus +Ctil+V
c

Rellenar
Con!orneu

m
1

Opcin IMolwa (alineado1

ornar

..............

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
seleccin que conforma la barra con los valores de la herramienta especificados en
su paleta.

2. En sendos ejemplos, vamos a realizar un proceso clsico de


creacin de una barra. As nos disponemos a darles relieve y,
a continuacin aplicar un efecto de iluminacin con el fin de
devolverles su color original, el oliva.
Figura 129.
Cuadro de dilogo Relieve y
documentos PSD respectivamente.
_e\miahaMn

m imnD
A-m10
Aljura

143'
1
7 pliich
5

~aihd&

pE-

x
P

Con este fin aplicamos el filtro Relieve de submen Esfilizar y el filtro Efectos de iluminacin del submen Interpretar 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 caractersticas del
trabajo. Hemos dado una altura coincidente con el resto
de elementos con relieve que contiene la pgina.

a-

L
l L.
-- - .............
.........................

.-

-.

r . " - - - ".

L..,-

..
.. I

l
l
1

Disear marcos, barras y botones


Figura 130.
Cuadro de dilogo
Efectos de iluminacin
y documento PSD.

El efecto anterior dio a la barra un color plateado. La aplicacin de este filtro tiene un
sentido puramente prctico,
en el sentido de que es aplicado casi exclusivamente
para dar a la barra su color
Ambientp- Flegalr.~a -44 PodWo
original, es decir, el color oliva. Dentro de los datos especificados variamos el tipo
de luz y las propiedades de
la misma ~ulsandosobre el
recuadro de color. En el cuadro de dilogo Selector de color introducimos la
coordenadas de RVA del color interesado Rr85, V:80 y A:21 y un color cercano
en la segunda opcin. De este modo la barra pasa a tener su color originario.

1
*

Figura 131.
Documentos PSD
respectivamente.

En este caso, hemos realizado el proceso de relieve para


intensificar el efecto de la textura en la barra. Los valores
dados son ngulo:42, Altura: 10 y Cantidad: 136.
En esta ocasin, hemos aplicado el efecto de iluminacin para alterar el color plateado
dado por el efecto de relieve. Al ser una textura es un tanto ms difcil 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

227

Webs con Photoshop

228

Por ltimo aadimos una sombra a las barras. Para realizar


este proceso duplicamos la capa -utilice el sistema que ms le
satisfaga- o, bien creamos una capa nueva y la colocamos por
debajo de sta en la paleta Capas. A continuacin, cargamos
la seleccin a travs del comando Cargar seleccin del men
Seleccin.
Una vez delimitada la zona la cubrimos de negro con la
herramienta Cubo de pintura, acto seguido, desactivamos la
seleccin y aplicamos el filtro Desenfoque gaussiano
introduciendo las coordenadas ms acordes con las
caractersticas de la barra y del proyecto en general. Sitela
en la ubicacin deseada.
Capas\

l~ormal

Catialrs

y Trazados \

1 )]

100%
A
-

Opacidad:

SOMBR4

Desenfocar
Desenfocar ms
Desenfoque de movin-iienta...

Desenfoque suavizado...
.

1
8
1
1bii 1 fi

Figura 132.
Paleta Capas, documentos
PSD, submen Desenfocar y
cuadro de dilogo Desenfoque
gaussiano.

Compruebe que los resultados no


son los mismos si desenfocamos la
zona seleccionada a si no lo hacemos.

DK

Cancelar

~revisualizacion

1 0 0 ~ B

-Radio:

15,8 ppixels

Disefiar marcos, barras y botones


Figura 133.

En este caso, hemos incluido unos valores


de desenfoque de 2,9 pixeles, dando como
resultado el que muestran las ilustraciones.

PSD respectivamente.

3. Ahora veamos unos cuantos ejemplos de distintos tipos de


barras conseguidos con Photoshop.

~a ,
t .

..

~ i ~ u134.
ra
PSD
respectivamente.

I I .

i .

229

12

'

IJ

18

18

Los ejemplos de barras-expuestos han sido ejecutados aplicando un color slido, filtros para crear efectos de texturas y
efectos de relieve e iluminaci6n repetidamente. La primera y
tercera barra son verticales aunque aqu aparecen en sentido
horizontal por motivos de espacio.

'

Webs con Photoshop

Consejo

...

Debido a las caractersticas de formato del monitor es ms adecuado


trabajar las barras verticales en sentido horizontal y girarlas una vez estn
finalizadas. Lo ms prctico consiste en girar el documento mediante los
comandos contenidos en el submen Rotar imagen del men Imagen.

etiqueta
para incorporar
barras horizontales

Para disear barras con HTML slo disponemos de la etiqueta HR. sta
nos facilita la incorporacin de barras grficas en sentido horizontal o lneas divisorias confeccionadas segn los atributos de la etiqueta especificados.Cuando se
trata de una imagen podemos incrustarla como cualquier otro elemento grfico
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 grfico 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 caractersticas de tamao, posicin y forma, adems de las que lo
relacionan con otros elementos asociados al separador. Dentro del primer grupo
encontramos WIDTH. Este atributo admite dos posibilidades de especificacin
del tamao de la barra, bien por tanto por ciento, bien por tamao en pxeles
pudindose 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 alineacin tenemos el atributo ALIGN. El
separador por defecto aparece centrado, para determinar otra posicin disponemos de las opciones FUGHT (derecha), LEFT (izquierda) o CENTER (centro)
que hemos de fijar del siguiente modo: cHR ALIGN= LEFT>. Por ltimo dis-

Disear marcos, barras y botones

231

ponemos del atributo NOSHADE para desplegar una lnea divisoria oscura. ste
siempre ha de ir acompaado de una especificacin de grosor, por ejemplo: <HR
SIZE=6 NOSHADE>.
Figura 135.
Visor de Microsoft
lnternet Explorer.

<-+

:-

.., .
1-

,.,

(2,.

.&

..

,.

1- J
,?.I

'...,.
-1 -.
i

_.&

ir

~I;rl.i..ii

p
.

,..3

i-,.2

*T. ZI

,-,*,.

z4:

L
n

Este ejemplo muestra dos barras insertadas en la pgina, una en sentido horizontal y otra en sentido vertical. El
separador de la izquierda ha sido incrustado bajo la etiqueta HR, mientras
aue la barra de la derecha ha sido insertada mediante la etiqueta IMG. Esto
hace que los atributos para determinar
su posicicin difieran.

Li

--

. ch-.lwh

u
(.,.
,:

I
1

ii

...

a l g o sobre html

La ilustracin superior presenta esta estructura


<HTML>
<HEAD>
< TlTLE >barras c /I I I LL >
</HEAD>
<BODY BGCOLOR=#CFC3B 1 >
<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


tamao. han sido tratados como cualquier otro documento grfico.

Webs con Photoshop

232
F
.
.
!

:ha,

L.

x.
h.

.2

Ir*g

. 2 2 2

,-=.I.Ji'%m-.~*&.~t..

.-*-u

'-a-

L L..,.%".i

. X 5 2
8

. .-.

Figura 136.
Visores de Microsoft
i lnternet Explorer.

."-"*..r*.

I_

A diferencia de lo que hemos visto en


la pgina anterior comprobamos algunas de las posibilidades que ofrece la
etiqueta HR. Sin duda muy adecuado
para segn que pAginas, sin embargo
no presenta grandes variaciones grficas sobre todo en lo que refiere a la
forma y al valor cromtico de las lneas
, divisorias.

...

a l g o sobre html

La ilustracin 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>

Disear marcos, barras y botones

233

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 numrico e inmediatamente despus de la imagen y CLASS, sirviendo para definir subclases en una lista de palabras.

UNOS CUANTOS E J E M P L O S
Las pginas de CyberAntiqueMall son muy representativas de todo lo que
estamos exponiendo, ya no slo en este apartado sino en todo el captulo. Bsicamente el diseo general est marcado por unos elementos, estos son marcos, botones y barras elaboradas exquisitamente y separaciones y tablas creadas con HTML,
adems de otros elementos como vnculos.
4

Figura 137.
Visor de Microsofi
lnternet Explorer.

,.

*ni

L,

'

,t.7.

..

-,J

-,

e,.-

L*

ri

LW z 1 8 ~ 1
w,,F,.~

CyberAntiqueMallmuestra
en casi todas las pginas
el mismo esquema de estilo. Elaborados marcos,
barras y botones, seguramente diseados en
Photoshop y, por otro lado
bordes y separaciones
que cumplen funciones
distintas y aparecen como
elementos ms esquemticos y funcionales conse- ' - ' ' *' " "
guidos con HTML. Sin duda todo bien estudiado, pues las pginas estn inundadas
de un aire de antiguedad refinada y al tiempo de una frescura proporcionada por la
visualizacin de elementos ms cercanos a la Web.
a

Webs con Photoshop

234
..

L._

. . .__
2-.:.;
--

:> 2.. : ?.
- -T.

i
.

--.

-'---

.-

0
,-S

-.

Figura 138.
Visores de Microsoft lnternet
Explorer respectivamente.

Comprobamos haciendo un seguimiento que


sentido tan marcado, tan icnco tienen en estas pginas los marcos, los botones y barras
disefiadas con esos dorados, esas texturas
marmreas, esos botones que parecen piedras
preciosas, todo muy artesanal, muy elaborado, antiguo. Por otro lado, nos encontramos
o con el sentido gramaticalde las lneas HR que
adquieren un carcter exclusivamente de separacin. S e ~ a r alos temas. las aaleras. los
ilustracin inferior derecha
artistas.

I
--

~a'

DISEAR BOTONES
Y SMBOLOS PARA LISTAS
En innumerables ocasiones habr visto pequeas formas geomtricas que
sirven para puntualizar los diferentes puntos de una lista, a modo de vietas. stas
pueden estar generadas con etiquetas HTML o pueden estar incrustadas como
elementos grficos que en algunas ocasiones pueden ser mapas de imagen acompaando a un vnculo y viceversa. Estas formas suelen ser muy sencillas un simple
crculo, un cuadrado o un tringulo e incluso se les puede dar un cierto relieve e
iluminacin 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 pgina vinculada. Del mismo modo que las llamadas vietas

Disear marcos, barras y botones


grficas 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
pgina a la cual nos trasladan. En estas ocasiones la forma y las dimensiones
suelen adecuarse al texto incluido en su interior y al diseo general de la pgina.
En otras ocasiones puede adquirir formas determinadas como una flecha que nos
indica el contenido que vamos a ver visualizado en otro documento grfico cercano. As comprobamos que los botones dan un mayor impulso a la creacin de
formas y diseos ms sofisticados. Aqu mostraremos cmo producirlos.

Determinar la forma
Los botones pueden tener formas diversas e incluso icnicas a modo de
smbolos visuales que engloban informacin implcita. Esto hace que sus formas
puedan ser muy irregulares aunque tambin pueden ser tan simples como un crculo. Para ambos casos, regulares e irregulares, botones o vietas grficas disponemos de herramientas que facilitan dibujar la forma. Todas las herramientas y
comandos de seleccin generadores de formas sencillas facilitan la elaboracin
de formas sencillas de un modo rpido y eficaz aprovechando la posibilidad de
especificacin del tamao. Si hemos de dibujar formas desiguales que perfilan
objetos o smbolos elaborados disponemos de varias herramientaspara la creacin de formas vectoriales que siempre podemos ir modificando y ajustando hasta dar con la forma que deseamos.

1. El primer paso consiste en crear un documento nuevo con


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 opcin Transparente.

;f,

, ,, , , ? , ,

,,

,,

Figura 139.
Documento PSD.
Hemos creado cuatro nuevos documentos vieta grfica,
boton, botonl y boton2. En cada uno de ellos disetiaremos un
elemento distinto teniendo cada uno unas dimensiones especficas, siendo stas: 113por 113pxeles, 113por 113pxeles,
198 por 113 pxeles y 142 por 142 pxeles respectivamente.
Todos ellos presentan el fondo transparente.

235

236

Webs con Photoshop


2. El siguiente paso consiste en crear un botn o vieta con
las herramientas de seleccin. Resulta muy apropiado cuando
se tratan formas muy sencillas como un simple rectngulo o
una elipse. En la mayora de los casos es aconsejable introducir
los datos de proporcin de la barra, lo ms idneo es activar
en la paleta de Opciones de la herramienta seleccionada en
Estilo, la opcin Proporcin restringida o Tamaofijo. Aqu
mostramos varios ejemplos.

.I.

1II)II

)i

I I I I I I I I I

+",,o,l,,,,l?,,,t

o-

-.- - _ - .

'

l,,,,

Figura 140.
Documentos PSD
respectivamente.

c------------

2 -

, , , , l4, , , ,

-1nlx[

/'

I
1

..

En el documentovilleta grfica hemos determinado la forma de


un circulo mediante la
herramienta Elipse
En la paleta Opciones
de marco se ha selec-

cionado un tamao fijo de 40 p o r 40 pxeles. En el documento b o t o n l destinado a


contener texto en su interior hemos optado por una forma alargada. Para determinarla se ha dado igualmente un valor de tamao fijo de 60 p o r 60 pxeles a la herramienta Elipse sumando dos crculos iguales. La zona interior ha sido cubierta sumando un rectngulo con el Marco. Nos hemos ayudado de la cuadrcula para ajustar las
zonas sumadas con precisin.
-lalxl
Por su parte la forma de la figura boton ha sido conseguida
O , , , I , , , , l?, , , I , , , ,
utilizando la herramienta Lazo
I
poligonal. Con sta hemos dibujado un tringulo y a conti1
nuacin hemos restado parte
2
del mismo con el Marco ayudndonos igualmente con la
-=-t ,
cuadrcula. Por ltimo, hemos
querido disear un flecha de
contornos curvilneos. Para ello
hemos empleado la Plumajunto con el resto de herramientas para la creacin de trazados. Hemos ido forjando la forma
de la flecha hasta conseguir la que desebamos. Por ltimo se ha convertido e l trazado
en seleccin. 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 algn tipo de
efecto dentro de la forma o exterior a la misma.
,

Disear marcos, barras y botones


En el ltimo ejemplo ha podido comprobar que crear una barra con las
herramientas de trazado resulta muy adecuado cuando se tratan formas con acabados complejos. Recuerde que una vez dibujado el botn hemos de convertirlo
en seleccin. Para ello pulsamos sobre el icono Convertir trazado en seleccin o
sobre el comando Hacer seleccin del men lateral de la paleta Trazados. Recuerde guardar la seleccin utilizando el comando Guardar seleccin del men
Seleccin.

Rellenar y producir efectos


en botones y metas grficas
Estos elementos siguen unas pautas de creacin en cierto modo muy restringidas, en gran medida por las dimensiones a las que estn sometidos, sobre
todo en lo referente a las vietas grficas. Los botones, en cambio, pueden realizarse siguiendo procesos ms diversos y sofisticados, todo ello ir en funcin de
las caractersticas de la forma del elemento en s, sus dimensiones y el resto de
componentes que conforman la pgina haciendo que aparezcan armonizados. Los
ejemplos que aparecen en la pgina 234 son una buena muestra. Vemos como el
botn ha sido elaborado exquisitamente, con la misma carga simblica y visual,
de ser algo valioso y bello como el resto de elementos grficos incorporados.
Aunque los valores connotativos pueden ser muy variados, es importante recordar
la unificacin que hemos de encomendar a todos los elementos de una misma
pgina e incluso con el resto de pginas 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 aparezcan en color blanco en la Web. Todo lo referente a cmo tratar las zonas
para fondos de color slido o con texturas o cmo reducir los colores de
dichos documentos viene extensamente detallado en el captulo Transparencias en imgenes para la Web. Lo descrito habr de tenerlo en consideracin al elaborar cualquiera de los elementos descritos en este captulo.

Webs con Photoshop

238

1. Para cubrir la seleccin de un botn o vieta grfica podemos hacer uso de cualquier herramienta de pintura.
Mostramos algunos ejemplos representativos de los mtodos
seguidos para elaborar este tipo de elementos.

I ,

I . l . l l

Cobre
Ciorno

Espectro
Arco ir' transparente

- Nuevo . _]
-Clambiar nombre 1
-

Ajustar:

C-nr

Figura 141.
Cuadro de dilogo
Modificar deoradado
y document~~~.

lransparrncia

En el documento vieta grfica queremos producir un


efecto de volumen, para ello recurrimos a la herramienta
Degradado. En el cuadro de dilogo 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 ilustracin de
la derecha.
Figura 142.
I I
. 11 1Submen Modificar, cuadro de
dilogo Modificar
bordes y docuExpandir...
Cancelar
Contraer...
mento.

1 -

En botonZqueremos enriquecer la forma. Con este


? , , , fin hemos creado un marco en forma de flecha uti1 lizando el comando Bordes del submen Modificar. Una anchura de 6 pixeles para el borde ha
"' sido la ms ptima para nuestras necesidades. Acto
seguido hemos procedido a guardar tambin esta
seleccin con el comando Guardar seleccin. Acto
1'
seguido hemos cargado la seleccin original que
1:
contiene la forma de la flecha y hemos cubierto su
J
superficie empleando el Bote de pinturacon el color
R: 53, V: 179 A: 191. A continuacin hemos cargado la seleccin del marco y hemos aplicado el color
R: 68, V: 146 A: 159 con el Aergrafo.

- I ~ I X (

n Al
N'.:-------\-

- .-l,,

_I

:)

Disear marcos, barras y botones


Figura 143.
Documento PSD.

....
".]U

L) -

I I I I

, , ,,

C
.
.
.
-

f*
I
7

Pegar
Pegar dentro
Boirsr

,
#'+.

Con el Aerografocon1
seguimos una textura
diferente en el marco. 4:

Cgrtar
Copiar

pmq

..

Figura 144.
Men Edicin y documentos,
paleta Opciones de tampn,
cuadro de dialogo Modificar
bordes.

CIII+X
CCI+C
CtrI+V
Mays.+CliI+V

Rellenar..
!S

de tampi
10

ad:

Dpci6n: )~lutivoLalitieado)
Purgar
A

Con este botn de direccin


queremos igualmente producir
un efecto de marco. Aunque a
diferencia del anterior en la
zona interior incrustamos un
fragmento de textura. Esta textura es la misma utilizada en
otros elementos de la pgina.
Para aplicarla seleccionamos
la textura y pulsamos el comando Definir motivo a continuacin cargamos la seleccin de
la forma de la flecha y aplicamos con el Tampn la textura.
El paso siguiente ha consistido en cargar
la textura del marco sta ha si
con un grosor de 8 pxeles y, con el Bote
hemos cubierto dicha superficie con un
blanco, obteniendo lo que muestra la ilustracin de la derecha.

.._

. _

239

Webs con Photoshop

240

- .-

Figura 145.
Documentos PSD, cuadro de dilogo
Modificar bordes y Texto.

.- - - - - - - - - - .

En botonl simplemente hemos aplicado

1 con el Bote el color R : 207, V: 195 A: 177

-- - - - - - - - - - - - - -

Y
5'

II

en la textura del documento ante7incluido


rior. En ste igualmente creamos un mar-

t]

en la forma diseada. Este elemento estar incluido junto con el anterior en la misma pgina Web. El color seleccionado est

lI

'

co de 8 prles de grosor y aplicamos con


el Bote y el Aergrafo un blanco. Slo nos
falta incluir el texto, empleamos una

I
~

Aheac
Eiiib

rita

flva

r IMM

rvab

~ ? A M ~ T Z ~ Z S

Mo%lrat.

IJ

F-mlte

C@j

O -

Tpm&

Textord cuerpo 20 en
color blanco. Guardamos la seleccin del
texto para posteriores
aplicaciones una vez
ubicado en la posicin
ltima tras ajustarlo
con la cuadrcula y las
reglas.

2:

r&
fiada

lnvntir

C~II+A
CirkrS
Mwjs +Cirl*l

Gama de colnca ..
",","rwqMwU'

+""+' ,

, ,*,
r(-

-2

rI, j;7.

4.-/,.fd-l,

,.;) L-72,;
,'aU
'.u-

Disear marcos, barras y botones

Consejo..
Trabajar con canales aifa para aplicar un afecto, un color, una textura o modificar ciertas zonas resulta ms aconsejable ya que disponernos de
ellos en cualquier momento. Por este motivo, siempre que realice un cambio
de tamao o de forma en el botn o cualquier otro elemento recuerde guardar la nueva forma como una nueva seleccin o canal alfa, puede que lo
necesite en alguna ocasin.

2 . Modificando selecciones podemos aplicar en zonas


seleccionadas efectos con filtros, de este modo conseguimos
una gran variedudde botones y vietas partiendo de un mismo
elemento. Veamos unas cuantas variaciones surgidas del
documento Vieta grfica.

Cancelar
L

'

Figura 146.
Documentos PSD, cuadro de dilogo Modificar bordes.
Los dos ejemplos mostrados muestran cmo aplicando un filtro (izda. (Molinete, dcha. Rizo) en ciertas zonas podemos modificar el aspecto de
un elemento dndole mayor diseo y
espectacularidad. Es perceptible elefecto que ha producido en el interior
de la vieta grfica. Para ello simplemente hemos invertido la seleccin
del marco mediante el comando Invertir.

-CIx

241

Webs con Photoshop

242

3. Para producir efectos texturados podemos recurrir a la


aplicacin de filtros en las mscaras o selecciones existentes
o confeccionar mscaras o selecciones de la zona en la cual
queremos producir una textura. Este proceso es igualmente
vlido para cualquier elemento de la pgina como puede ser
un marco o una barra.

Figura 147.
Cuadro de dilogo
Cristal y documento
PSD.

Upc~onss

Distorsionar

(20

suaviia

Ll

Tsxtliia.

m-

Escala

I-00r:
G

lnvsrtir textura

En la seleccin determinada mediante la aplicacin


del comando Bordes mostrada en la figura 146 nos
hemos dispuesto a aplicar el filtro Cristal. El resultado es el que aqu se muestra. Para su obtencin
los valores determinados han sido una distorsin
de 20, suavizado 1, aplicado en una escala del
200 % y la textura elegida ha sido lente pequea.

.... b.

1"

2
1 c 8 1

1 1 1 " 1 1 1 1 ' 1 1 1

0,

jfl2 -

ion%

--e-'

les

Granulado
A

Cantidad de luz

n
Cantidad de claridad

111

figura 148.
Cuadro de
dilogo Luz
difusa y
documento
PSD.

En la misma zona seleccionada ha sido


aplicado el filtro Luz difusa. Los valores
introducidos han sido granolado 1, Cantidad de luz 5 y una cantidad de claridad
de 11. El resultado es el que muestra la
ilustracin superior, comprobamos que es
completamente distinta al anterior dando un
efecto final ms sobrio.

Disear marcos, barras y botones


El filtro Zigzag lo

en primer lugar
en el marco seleccionado. En el
segundocaso se
ha invertido la seleccin aplicando
el filtro en el interior de la vieta
grfica dando a
sendas imgenes
los mismocvalores. stos son
cantidad de ondas producidas
10, cantidad de
crestas 5 y ondulaciones como
estilo. Los resultados son obviamente distintos.

m-

Cantidad
-estas

113

Estilo: l~lrededordel centrol]

Figura 149.
Cuadros de dilogo Zigzag y Encogc
respectivamente y documentos PSC
Para producir este efecto simplemente
hemos aplicado el filtro ~ncogerdando
como valor de cantidad -100. Conseguimos un suave efecto que podemos pot
ciar posteriormente con otros efectos.

tansela

w
+
J1"%

243

Webs c o n Photoshop

244

El filtro Molinete10
hemos aplicado
en primer lugar en
el marco seleccionado. En la ilustracin inferior hemos aplicado el filtro en la zona interior de la vieta.
Mediante el comando Invertirdel
men Seleccin
se ha invertido la . . t.lD
se~eccinLos re- n i
sultados son completamente distintos aun siendo el
mismo filtro y los
mismos parmetros para ambas.
ngulo: -999.
=

12

1
,,1

I I
8

3 ,

m m

II

"

Figura 150.
Cuadros de dilogo Molinete y
Esferizar respectivamente y documentos PSD.
En este caso con el filtro Esferizar hemos conseguido transformar la forma exterior, optando por el modo horizontal y
un valor de cantidad de -67. Conseguimos una deformacin de formas suaves
y equilibradas.

Cancelar

100% J

167

-~antidad

M o d ~ solo homontal

I(

Disear marcos, barras y botones

Opciones

C:atitidad
Tarriao:

.
1

Figura 151.
Cuadros de dilogo Rizo y documentos PSD.

El ultimo ejemplo muestra el ....;.[[ 0


documento vieta grfica tras
aplicar el filtro
Rizo. En esta
ocasin ha sido
en la zona interior, para ello
hemos cargado
la respectiva seleccin. Dando una cantidad de 999
y un tamao pequeo conseguimos
este suave efecto sobre la superficie

4. Ahora verifiquemos los resultados que podemos obtener


aplicando el filtro Efectos de iluminacin en el documento
vieta grfica de la pBgina 238.
Figura 152.
A

Cuadro de dilogo
Efectos de iluminacin
y documento PSD.

kmbicnis Newiwa 7 0 P0:ll~n

Aplicando un Gfecto de iluminacin en la vieta grfica intensficamos la sensacin de


relieve producido con el degradado, aunque como podemos comprobar en la pgina
siguiente es posible igualmente modificar su forma aplicando el filtro en un canal de
textura ayudado por un acentuacin del relieve.

245

246

Webs con Photoshop

Estas ilustraciones muestran, emm


'
pezando de izquierda a derecha y
....i.14
I'
-

rl .I

I,

Figura 153.
Documentos PSD.

' 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 cuestin variando el canal. Con lo
realizado damos por finalizada la vieta grfica.

5 . El elemento flecha denominado boton2 visualizado en la


pgina 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 iluminacin
para dar un aspecto ms sofisticado al elemento.
-!SYD

....i. 14 , , , ,

--iniXf
1

(4

Figura 154.
Submen Estilizar y
documentos PSD.

,,. "

'

-lalx

m
'

'

" " " I2" " " " 14" "

AzulGos...
Bordes ilurriinados...
Difusi6n...

Solarizar
Trazar perfil...
Vinto...

Activamos la seleccin del marco guardada con anterioridad y aplicamos el filtro Hallar bordes. De este modo conseguimos acentuar los mismos resaltndolos.

Disear marcos, barras y botones


Figura 155.
Cuadros de dilogo
Cargar seleccin y
Efectos de iluminacin
respectivamente y
documentos PSD.

rS
Hemos sumado la seleccin del marco a la seleccin #4. En la obtenida hemos aplicado un efecto de iluminacin 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 ilustracin 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 recurrido a un tipo de luz foca1
cambiando en sendos casos la
posicin del foco. Comprobamos
las diferencias entre las tres.

,,,

248

Webs con Photoshop


5. Nos queda por tratar el elemento boton de la pgina 239 y el
elemento botonl d e la pgina 240. stos sern tratados al
mismo tiempo ya que pertenecen a la misma pgina Web.
La pgina es sencilla con detalles puntuales y finos. Por este
motivo sjmplemente aplicaremos un efecto de iluminacin
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

Mxima

Ropiedades
1 Lwhe

Mate

.E7

Pilsy

58 Meialico

Malmial

Brillante

~ x p o s c i m ~LbO ~ ~

Canai de textwa: I ~ a p 1a ~ranspnencid

9:

Re'ri~l~al~~

R Ab~ndaiiciade blanco

En los dos elementos I en sus respectivas capas hemos aplicado el filtro con los
valores especificados ( n la ilustracin. 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
perteneca cada elemf ito, es decir, en el texto hemos aplicado el canal de textura
correspondiente a la c: Da que inclua el texto.
-.--:.O,
Cl

2 -

,,

, , , I2

1 ,

l4

,,l

18,

~ ~ ~ ~ ~ ~ 1 4 , , , , , , , , 1 ~ , , , i , , , , l ? , , , ~ , , , , l

ri J

. , ,

- - .. .

..

..

.
-.

/"

Observamos que los dos botones comparten una homogeneizacin que viene dada
por las cualidades de color que ambos comparten. Se han mantenido dando los mismos efectos, conservando los mismos valores en cada cuadro de dilogo. Todo ello
quedar patente cuando visualicemos la pgina en su conjunto.

Disear marcos, barras y botones

Figura 157.
Documentos PSD.

Aqu mostramos unas variaciones. En la imagen central y derecha hemos aplicado el filtro Hallar bordes y seguidamente
Efectos de iluminacin, mientras que en la imagen de la izquierda hemos variado el canal de textura con respecto a la obtenida en la pgina
anterior. En todos los casos se han mantenido el resto de valores.

6. Por ltimo aadimos una sombra a los botones y vietas


grfias. Para realizar este proceso duplicamos la capa -utilice

el sistema que ms le satisfaga- o, bien creamos una capa


nueva y la colocamos por debajo de sta en la paleta Capas.
Acto seguido cargamos la seleccin a travs del comando
Cargar seleccin del men Seleccin. Una vez delimitada la
zona la cubrimos de negro con la herramienta Cubo de
pintura, a continuacin, desactivamos la seleccin y aplicamos
el filtro Desenfoque gaussiano introduciendo las coordenadas
ms acordes con las caractersticas del elemento y del proyecto
en general. Sitela en la ubicacin deseada.
Figura 158.
Documentos PSD.
En las dos sombras
hemos aplicado un
radio de desenfoque
de 3,7 pxeles. En
los botones que aparecen en la pgina siguiente hemos introducido el mismo valor aunque aplicado repetidas veces. A lo largo del libro todos los
ejemplos han mostrado sombras creadas con negro. Lgicamente una sombra no
tienen por qu ser siempre negra, pruebe con sombras de otros colores.

249

250

Webs con Photoshop

Documentos PSD
respectivamente.
Las sombras siempre dan un
aire de realidad, de corporeidad a los objetos. Todos sabemos que cualquier objeto
est intrnsecamente ligado a
su propia sombra, por este motivo siempre resulta interesante aadir sombras a los elementos de una pgina Web.
No obstante, tambin 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 aadiendo nuevas selecciones o canales alfa para producir
sutiles efectos de iluminacin y relieve dando lugar a efectos ms realistas y
efectistas si es el caso. Le animo a realizar otras variaciones de produccin
de elementos para la pgina aprovechando otras herramientas aqu no mencionadas 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 elementos conseguidos utilizando los comandos del submen Ajustar, ya que en
escala de grises este tipo de variaciones casi no son perceptibles.

Disear marcos, barras y botones


La etiqueta UL para crear

listas desordenadas
Generalmente las listas son configuradas mediante una puntualizacin
numerada de cada uno de los apartados sealados. Aunque tambin encontramos
listas no numeradas que en HTML se las denomina listas desordenadas. A diferencia de las listas ordenadas en este tipo cada elemento de la lista viene precedido por un punto grfico o un tringulo semejantes, segn sea el navegador. Pero
igualmente podemos enriquecer enormemente nuestra pgina incluyendo imgenes que sustituyan las vietas por vietas grficas consiguiendo que nuestra pgina adquiera un carcter ms personal al tiempo que gana en diseo.
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 crculo, cuadrado o tringulo, como ya
digimos, delante del texto o vnculo. 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>.

a l g o sobre html.

..

Una lista desordenada o tambin lista con vietas con cabecera


seguira la siguiente estructura:

<LH>Cabecera de la lista
<UL>
<~ l > s t esera el primer elemento de la lista
<LI>Este otro el segundo elemento
<L/> Y as sucesivamente
</UL>

Si sustituimos la etiqueta <L/> por COL> nos aparecer un nmero que sustituye el punto cuadrado o tringulo.

2n

Webs c o n Photoshop

m
..

2.

o,

."

,A#

8-

>

.-.,?

i1E:'At

7-

..Y..

".

"J

-+u-,--

F
-.-.

'C?A

Figura 160.
Visor de Microsoft
7
lnternet Explorer.

-- A

qUIffiA

-...,*M..
,.,,
,. .- .,.e,
.9

rr i

,.

,.,mi

,.l.i,

l, .

...

Aqu tenemos un claro ejemplo de lo


explicado en la pgina anterior. Como
vemos en una lista desordenada o lista por vietas aparece un elemento
geomtrico, en este caso un crculo,
mientras que en las listas ordenadas
aparece cada elemento precedido por
el nmero correspondiente En los dos
casos hemos incluido cabecera.

Tambin podemos encontrarnos con listas con vietas anidadas. Las listas anidadas son listas que contienen a su vez sublistas dentro de algn punto de la
lista. En estos casos las diferencias visuales bsicas que encontramos es un cierto
deslizamiento de las sublistas y un cambio de forma de la vieta que la acompaa.
Para incluir una lista hemos de especificarlo mediante la etiqueta MENU, la cual
es interpretada como otro elemento de apertura.

a l g o sobre html.

i
.

..

U n a lista desordenada anidada y con cabecera sigue la siguiente sintaxis:

<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>

Disear marcos, barras y botones


Figura 161.
Visor de Microsoft
lnternet Explorer

Aqu tenemos un ejemplo representativo de listas de vietasanidadas. Observe que en cada sublista aparece una
vieta diferente al tiempo que aparecen los diferentes componentes desplazados con respecto al grupo inmediatamente superior

,. .

E&

I *

< %

[.-.-12

253

'

r i .m.+,+.".
,.>z t V*?

.r=j

<9,??

*AL,.

7.7,

m-*

'

Con HTML es posible crear otro tipo de listas denominadas listas de


glosarios o listas de definicin empleadas para introducir datos descriptivos que hacen referencia o definen una palabra, cosa, etc. As especificaremos el trmino mediante la etiqueta DT, mientras que la definicin del trmino vendr determinada por la etiqueta DD, siguiendo la siguiente sintaxis:

<DL>
< D T > Trmino
<D D >Definicin del trmino
<DT>Trmino
<D D >Definicin del trmino
</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 acompaadas de una serie de atributos


posibles. Entre ellos el que debemos destacar en este apartado es TYPE, el cual
facilita el cambio o seleccin del tipo de vieta que deseemos visualizar. Si se
trata de listas ordenadas (etiqueta OL) podemos sustituir el tipo de numeracin.
Dentro de las posibilidades existentes las ms importantes son: DISC (disco),

Webs con Photoshop


CIRCLE (crculo) y SQUARE (cuadrado), debindolo 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 valor de ndice dentro d e la lista escribindolo del siguiente modo: cLI
VALUE=30>. Este viene muy bien cuando tenemos que indicar el nmero siguiente de una lista separada por algn 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.

a l g o sobre html.

..

La siguiente sintaxis muestra de que manera actan 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
<LI>Segundo 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
<LI>Segundo 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>

Disear marcos, barras y botones


Figura 162.
Visor de Microsoft
lnternet Explorer.
Comprobamos mediante la ilustracin
y la muestra de la sintaxis que VALUE
y TYPE cumplen funciones similares.
En listas ordenadas tambin es posible introducir atributos de vietas, en
esta ocasin ha sido un cuadrado. Para
que aparezca la lnea debajo de la imagen hemos aadido en ALIGN el valor
BASELINE.

La etiqueta IMG para aadir


vietas g~fieas
en las listas
Para incluir vietas personalizadas en un documento HTML tenemos que
recurrir al uso de la etiqueta IMG e incluir la vieta como un elemento grfico
ms de la pgina. Este tipo sustituye la vietas de las listas desordenadas o vietas
propias de algunos editores de HTML. Adems 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 prrafos, tablas o all donde quiera introducirlos.
Lgicamente, trabajando con la etiqueta IMG debemos tener presente
todas los atributos posibles con los que podemos movemos, es decir, atributos de
alineacin como son ALIGN o VALIGN para definir la posicin en horizontal y
vertical respectivamente, WIDTH y HEIGHT para especificar numricamente
la anchura y altura de la imagen o el tamao en tanto por ciento, segn se desee.
Tambin podemos determinar cuanto espacio, cuantos pxeles 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 atributos 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 posicin en horizontal utilizaremos el atnbuto ALIGN de los siguientes modos: izquierda ALIGN=LEFT; centro

Webs con Photoshop


ALIGN=CENTER y derecha ALIGN=RIGHT. Para determinar la posicin 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 tamao de la imagen con su tamao
en pxeles en ancho y alto, incluso reduciendo sus valores a modo del ejemplo:
WIDTH= 66 y HEGHT=40 o en tanto por ciento escribindose simplemente:

La siguiente sintaxis muestra de que manera podemos crear una lista


con prrafos, mediante la etiqueta P (primera cabecera de figura 163 superior):

<P>CABECERA DE UNA LISTACON VI&Ntilde;ETAS


GR&Aacute;FICAS
<UL>
<P > <IMG SCR=vietagrafica.gif WIDTH= 1S
HEIGHT= 15 VSPACE=4 ALIGN = LEFT>
Primer elemento de la lista

<P> <IMG SCR=vietagrafica.gif WIDTH= 15


HEIGHT= 15 VSPACE=4 ALIGN = LEFT>
Segundo elemento de la lista
<BLOCKQUOTE > <P > <IMG SCR =vietagrafica.gif
WIDTH = 15 HEIGHT= IS VSPACE=4 ALIGN=LEFT>
Primer elemento del segundo elemento de la lista
<IBLOCKQUOTE>
<P> <IMG SCR=vietagrafica.gif WIDTH= 15
HEIGHT= 15 VSPACE=4 ALIGN =LEFT>
Tercer elemento de la lista
<IUL>

Disear marcos, barras y botones

Las etiquetas <BLOCKQUOTE > </BLOCKQUOTE>nos sirve


para crear sublistas, aunque su funcin habitual consiste en forzar un espacio 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 creacin de listas
en HTML.

Figura 163.
Visores de Microsoft
lnternet Explorer.

e,-t EA*

Iw

. ,-.

.l,"

-.-F

2 4

.j

ii

+ - 4 r.-

II

--.

P*d.

.: -

r*.

.l!,P.rj

iv.rmm*

*i

r.

ni,.

'"'""*"'-

Observe que la lista inferior no aparea 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 dems, pre- .,V. ,,,,,,
+,
senta el mismo esquema que la lista ircA-Mnhl.a
= hrt!-M.~..-A..=.-,+~L-.
de la parte superior que aparece definida en la pgina anterior. La imagen myr;n=+--u*LL?.
ha sido reducida hasta 15por 15 para
encajarla con el cuerpo de la letra. En , .
esta ocasin no hemos puesto nfasis en otros elementos y atributos referentes al
texto por no creerlo conveniente. En la ilustracin inferior se muestra otro ejemplo de
listas en tablas. En esta tabla de
..>y n r >.
>.:-.". up.
., r_._ .,,.,, dos celdas constituida por una
:A,
,,?,
:,
.
. ,A .,:
m-,-.
columna y dos filas es un claro
ejemplo de cmo crear listas en
m:
una tabla. Observe como la lista
':u.,,~
I
mTnin-iiXIid.
que vemos en la celda superior
aparece ms espaciada, esto se
.)mri-**Li1i
debe a que cuando usamos la
?hYd,'k*rn* & li3,
F:t.~.*EmiidL15.
etiqueta de prrafo P las separaciones son mayores que cuando
utilizamos la etiqueta de retorno
de carro BR. Elija la opcin que
ms le satisfaga o que mejor se
,l.-a" <
adapte a sus necesidades.

,:.

p.+br,+!.

s.

..*K

258

Webs con Photoshop

...

a l g o sobre html

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=vietagrafica.gif WIDTH = 1S
HEIGHT= IS VSPACE =2 ALIGN =LEFT>
Primer elemento de la fila
<P > <IMG SCR=vietagrflca.gif WIDTH = 15
HEIGHT= 15 VSPACE=2 ALIGN = LEFT>
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=vietagrafica.gif WIDTH = IS
HEIGHT= IS VSPACE=2 ALIGN=LEFT>
Primer elemento de la fila
<BR > <IMG SCR =vietagrafica.gif WIDTH = 15
HEIGHT= 15 VSPACE=2 ALIGN= LEFT>
Segundo elemento de la fila
<BR > <IMG SCR =vietagrafica.gif WIDTH = 1S
HEIGHT= IS VSPACE=2 ALIGN=LEFT>
Tercer elemento de la fila
<ITD >
<ITR>
</TAB LE >

Disear marcos, barras y botones

ota...
La etiqueta <BR> es empleada generalmente para hacer un salto
de carro, mientras que la etiqueta <P> indica el comienzo de un prrafo.

nota...
Si en una tabla ha de incorporar sublistas puede trabajar igualmente
con las etiquetas <BLOCKQUOTE > c/BLOCKQUOTE> y <UL>
</UL> como mostrbamos en el ejemplo anterior (pginas 256-257).

La etiqueta IMG para agregar botones


y la etiqueta A para que sean vnculos
La ubicacin de un botn en una pgina 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 vietas
grficas son vnculos internos que nos trasladan a otras pginas relacionadas o
mapas de imagen. Estos ltimos dan una mayor flexibilidad que los simples vnculos de imagen, ya que pesmiten una mayor organizacin de los vnculos aunque
es ms adecuado para grficos ms elaborados. En este apartado nos detendremos
exclusivamente en mostrar cmo incorporar un botn como vnculo. Las imgenes como mapas sern tratadas con mayor profundidad en el captulo 9.
De por s, los vnculos en forma de botn tienen la caracterstica de ser de
tamao reducido, dado el tiempo de espera que requiere una imagen para que sea
cargada es lo ms recomendable y, por lo general, muestran una relacin con la
pgina a la cual nos traslada, ya sea porque adquiere la morfologa de un smbolo

259

Webs con Photoshop


concreto, de un logotipo o porque va acompaado de un texto que lo relaciona o
el grfico trae incorporado una palabra o frase que despeja de toda duda sobre
donde nos dirigimos.

La etiquetaIMG consta de otros atributos, adems de los mencionados en


el apartado La etiqueta IMG para aadir vietas grficas en las listas, como son
ISMAP el cual identifica el grfico como un mapa de imagen activo, sobre ste
podemos pulsar para que se ejecuten las acciones definidas. Debemos especificarlos como muestra el ejemplo: <IMG SCR=boton.gif ISMAP>. Tambin contamos con el atributo ALT de gran utilidad y que siempre es importante incluir pues
facilita la visualizacin del texto sustitutivo de la imagen en browsers que no
pueden visualizar grficos. Si por ejemplo se trata de una imagen que representa
un botn que sirve de enlace con otra pgina podemos incluir el siguiente texto
en el atributo <IMG SCR=boton.gif ALT=ir a pgina de direcciones ISMAP>.
Por otro lado y, aunque no lo mencionamos en la creacin de marcos, en las
imgenes podemos incluir marcos con HTML mediante el atributo BORDER,
segn 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 identifica como tal. Si trabajamos con gran cantidad de elementos grficos resulta interesante emplear el atributo LOWSCR al tiempo que SCR. De este modo, siempre aparece primero una imagen de baja resolucin que es a la que hace referencia LOWSCR y, a continuacin, la imagen de alta resolucin que es a la que hace
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 vnculos. stos ltimos pueden encontrarse a su vez en forma de texto, sin embargo aqu trataremos
exclusivamente una imagen tratada como vnculo. En realidad la incorporacin de
botones en las pginas est intrnsecamente relacionado con la versatilidad que
ofrece HTML, ya que mediante las anclas de hipertexto podemos unificar diferentes documentos HTML bajo una misma estructura comn compartida, es decir,
podemos articular distintas pginas Web vinculndolas mediante la etiqueta A
haciendo que aparezcan como un slo corpus. Aunque el elemento al cual nos
traslade puede ser de los ms diverso, por ejemplo una animacin, un vdeo, un
servidor o como ya hemos indicado otro documento. En definitiva, para que una
imagen aparezca especificada como un vnculo y as sea entendida debe estar

Disear marcos, barras y botones

261

incrustada entre las etiquetas <A> y </A>. Inmediatamente despus de la etiqueta


A hemos de introducir la direccin del documento al que se hace referencia, para
ello es necesario el atributo HREF donde debemos especificar el URL del documento al que accedemos al pulsar sobre el elemento grfico. La sintaxis aparece
como muestra el ejemplo: <A HREF=/documento HTM/listas.html>.
La direccin de destino puede ser de lo ms variada, puede remitirse a la
ampliacin de una fotografa, en tal caso la sintaxis presenta la siguiente estructura: <A HREF=foto.jpeg>. Si por ejemplo est en un servidor, hemos de especificar el tipo de servidor y las referencias parciales, es decir, indicar los directorios, los diferentes niveles en los que se encuentre englosado el documento en
cuestin, por ejemplo: <A HREF=http://www.web/diseo/graf.html>.

...

a l g o sobre html

Un vnculo en forma de texto presenta la siguiente sintaxis:


< A HREF=URL> Aqu debemos escribir el texto que
aparecer como vnculo, el cual es el ancla</A>
Un vnculo en forma de imagen presenta la siguiente sintaxis:

Figura 164.
Visor de Microsot
lnternet Explorer.

,>

Lrr

i,::.

[A,.

..I...*

Y-

,.

.
.
.
+

,.-m

- .-.-

_1

. l r + , 7 M-;

;i_.ii,

c.

11

i_.r

. .. pJ;".'.,'-, . -.."+,
,

.?

Cuando acercamos el cursor a una


imagen que es a su vez un vnculo, ste
siempre nos muestra el nombre del
mismo. En segn que tipo de diseos
resulta interesante remarcar que se trata de un vnculo, podramos decir que
es casi necesario cuando est incorporado en un texto a diferencia de si
se trata de un botn independiente.

\':,

-;

.,

9
<

'J
+-.

-.

>f
.?
.,..
- -.

L
-

'..
-

Webs con Photoshop

262

...

n l g o sobre html

La figura 164 presenta la siguiente sintaxis:


<HTML>
<HEAD>
< TITLE >imagen vinculo </TITLE
<IHEAD >
<BODY>

>

Pulse sobre el v&iacute;nculo <A HREF =/documento H T M I


listas.html> < l M G SCR= boton2.gif ALT=bot&oacute;n
W I D T H = 2 0 HEIGHT=2O ALIGN=MIDDLE BORDER=2>
<lA>para trasladarnos a otras&aacute;reas del sitio

A--

Observe que alrededor de la imagen aparece un marco. Por ser un


elemento tan pequeo hemos querido resaltarlo. para ello hemos incluido el
atributo BORDER=2 dando un grosor a ste de 2 pixeles. Aparece por
defecto en azul.

L.*

8.

c.,

*."

h / ; :~
'?7&f ?

TP-A'flrl

E3

'

Vi

1.

r7##VU'

J
a*-

Figura 165.
Visor de Microsot
lnternet Explorer.
En este ejemplo mostramos dos botones que son vnculos grficos sobre los
cuales hay que pulsar. Ambos casos
no presentan un marco pues no es necesario pulsar para trasladarnos a la informacin que nos interesa y vienen
explicitadas por las palabras incluidas
en cada uno de los elementos grficos.

Disear marcos, barras y botones

...

a l g o sobre html

La figura 165 presenta la siguiente sintaxis:

< HTML>
<HEAD>
< TITLE> imagen vinculo </TITLE>
<IHEAD>
<BODY BGCOLOR=#CFC3B 1 >
IMG SCR=marco.jpg WIDTH =425 HEIGHT= 142
ALIGN =CENTER VSPACE=20 HSPACE= 1 70>
<TABLE WIDTH =30% ALIGN=CENTER BORDER= 1
CELLPADDING=5 CELLSPACING=26 BGCOLOR=#FFFFFF>
< 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=locurnento 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.

263

264

Webs con Photoshop

a l g o sobre html.

..

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
CELLPADDING=2 CELLSPACING=2 BGCOLOR=#FFFFFF>
< 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
HEIGHT=54 BORDER=O> </A>
</BODY>
</HTML>

Disefiar marcos, barras y botones


Figura 166.
Visor de Microsoft
lnternet Explorer.

j,j+41p t,l.l$ F , r , l ~ , $V,UI

i, I ~ I - ~ + , r .W
, , .d

265

E,

r n ~ o i l r snm
n ~ WOIMII>PS '

(j[#f-- T ln
~:t.~

irffa-l
3-r'
fi

Los botones aparecen insertados como


si se tratase de una barra de herramientas, manteniendo una cierta distancia entre ellos para que el diseo no
se presentase en exceso monoltico. La
pgina principal sirve exclusivamente
como carta de presentacin de la
diseadora, desde sta nos trasladamos a las secciones que sean de nues- ,tro inters

ttr

-irr**y*n

L...4

Consejo..
+

Si ha de incluir un gran numero de botones resulta interesante componerlos de tal manera que aparezcan como una barra o caja de herramientas. Para ello deber tener en consideracin 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 proporcin de
todos a la vez si lo creemos necesario.

Figura 167.
Visor de Microsoft
lnternet Explorer.

.ui

L.,

2.

-".

L..&

u~

=M

.',

&..

,.*

2-

2;
re.

.,:.

a;

IB
r

wsx--J

En esta pgina diseada por marcos, ~ - l u a i i - ~ - - i


los botones aparecen en la divisin de
,,i~llJ
la izquierda mientras que la imagen
central aparece en la divisin de la derecha. Este tipo de diseos en vertical,
resulta interesante cuando todos los
botones (los vnculos grficos) son del
mismo tamao o con el mismo ancho
en contraposicin al ejemplo superior. ,

f'",

VI[>wn-wnnr e

,u,

'rv,*i

,, . , ::?i.TP

~.~M+VPI

-~
--

-..

266

Webs con Photoshop

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
HEIGHT=54 BORDER=O> </A>
<A HREF=/documento HTMlinfgeneral.html> <IMG
SCR=botonZ.jpeg ALT=volver a pgina WIDTH= 1 15
HEIGHT=54 BORDER=O> </A>
</BODY>
<IHTML>

Disear marcos, barras y botones

...

a l g o sobre html
Y el documento moda2:

<HTML>
<HEAD>
<TI TLE > imagen vinculo <lTITLE >
<IHEAD>
<BODY BGCOLOR=#CFC3B 1 >
<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 objeto, es decir, si modal.htm es el archivo que contiene el ancla, moda1 es el
ancla NAME. En la mayora de los casos puede omitirse pues su valor viene
implcito. Otro atributo relacionado con la etiqueta A es TlTLE que incluye

267

268

Webs con Photoshop

PROYECT
A lo largo de este extenso tema hemos ido mostrando como se diseaban
marcos, barras y botones; entre los numerosos ejemplos mostrados se han intercalado partes sustanciales de las pginas que estamos elaborando. Con el fin de
redondear en cierto modo lo aqu explicado, nos detendremos en ensear cmo
hemos creado los botones que aparecen en las ltimas ilustraciones.
1. De la barra diseada que aparece en la pgina 229 hemos
procedido a duplicar el documento mediante el comando
Duplicar. A continuacin, hemos reducido el tamao del
documento en sentido horizontal para convertirlo en un botn,
para ello se ha pulsado el comando Tamao de imagen.
Este proceso ha sido repetido cuantas veces ha sido necesario.

Modo
-

l1

Tamao da imagen...
Tamao da lienzo...

Rot.ar lierizo

'pulgada

Histograma...

Mantener propacin

IJ Yolver a mwtrar 13 imagen-

El tamao de los distintos documentos duplicados se remite al texto


que hemos de incluir.
Aqu aparece el ms pequeo que tiene una an1
I
chura de 142 pxeles y una altura de 57 pxeles. El
resto tiene una anchura de 268 pxeles y altura de 57 pxeles y anchura de 115
pxeles y altura de 57pxeles, tal como aparecen en esta pgina y en la siguiente.
Figura 168.
Men Imagen, cuadro
de dilogo Tamao de
imagen, documento y
documento PSD.

Disear marcos, barras y botones

269

Figura 169.
Documentos PSD.
Antes, sin embargo, hemos realizado unas pruebas para comprobar cdmo queda el botn con
varios tamaos de texto, que
resultasen legibles y al mismo
o
tiempo encajasen. ~ l ~ t a m a definitivo se ha basado en relacionarlo en una misma altura. es
decir, 57pxeles 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 dilogo Texto
hemos determinado la fuente, el tamao y el estilo. Para
finalizar se ha aplicado en los documentos el filtro Relieve.

Mostrar

P Fuente

Figura 170.
Cuadros de dilogo
Texto y Relieve
respectivamente y
documento PSD.

En todos los documentos se ha


elegido como Fuente: Dextor
OutD, Tamafio:30 puntos, Estilo: Negrita. Por otro lado, en el
cuadro de dilogo del filtro Relieve se ha determinado los
siguientes valores: ngulo: 43 grados, Altura: 7 pxeles y
Cantidad: 140 %. Los resultados son los que se presentan.

Webs con Photoshop

270

1 .

i 1i1

' D

11'

,1

'

. m .

14

16

IE:

-!?=a!-.L-

Figura 171.
Documentos PSD.

De este modo comprobamos


aue una barra diseada oode-i
1 k o s transformarla en botones y
complementarla en una misma pgina. De todos los documentos se ha guardado una
copia en formato JPEG mediante el comando Guardar una copia.

UNOS CUANTOS EJEMPLOS


Estas dos ilustraciones muestran cmo y de qu manera son empleadas
las vietas grficas o bullets y los botones para confeccionar una pgina Web.

*,*

--- . . .>-

c,+

-.

,. '* : * * -'-- 2 -7
.
.
. . . .
..."*.
a

v.

.:

liii--

7..

Ir...

Cduniverse presenta un uso de botones y


vietas grficas bien distinto a la ilustracin
inferior. ste utiliza las vieta~grficas junto

C D UNIVERSE
."n.,,.

7"#*OSY~"%#'

Figura 172.
Visores de Microsofi lnternet Explorer.

.",C'<

casos son a su vez barra de herramientas. Los


,...

/ "..-,,
I"

.-

1 1 ,

.,.,,h.,..

T.

N.

(7.1.

rpl

:"<-

,-

.,

La pgina aparece relativamente ordenada. Bloorningdales por su parte presenta


dos diseos de botones, que aparecen
como barras de herramientas muy ordenadamente distribuidos, poseen todos las
mismas dimensiones lo que acenta en
mayor medida el efecto de orden y claridad visual incrementado por la aparicin
de imgenes con vnculos.

v.

-m

... .

""''zio/2,(7
1

, trn*>qlun
~

q
. ---. 3.191

L.

-,

m , ,

'

u--.
--..a.

.,$

...

.<.-

II..

$..*
*.nGii

,,

ori'p8

e-

Es probablemente uno de los elementos que mayor consideracin ha de


tener, pues siempre que incluimos tipografa como un elemento grfico posee, en
la mayora de los casos, por no decir en todos, unos valores connotativos muy
importantes. El diseo y las modificaciones que se realizan van dirigidas a una
mayor unificacin del elemento con respecto al resto de miembros de la pgina al
tiempo que puede poseer unos valores intrnsecos a su propia morfologa o a la
morfologa dada. Todos sabemos que no es lo mismo incluir un tipo determinado
de fuente que otra de caractersticas opuestas, por ejemplo, no es lo mismo una
tipo de letra dentada que una de lneas completamente lisas y rectas. Este aspecto
queda intensificado cuando en un tipo de fuente determinado producimos
transfomaciones, lo que en cierto modo la personaliza adems de incorporar
unos valores visuales. Esto hace que sea tan importante ya que podemos acentuar
en mayor medida nuestros diseos personalizando los elementos incluidos.
Resulta evidente que cualquier documento que contenga tipografa
necesariamente tendr zonas transparentes. Trabajando con formato JPEG puede
hacer la prueba de rellenar dichas zonas con el color slido 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 perfeccin de acabado. No obstante,
tenga presente que lo dicho en el captulo 3 y captulo 6 es una parte esencial que
debemos realizar dentro del proceso de elaboracin de cualquier elemento grfico
con zonas transparentes y, que aunque en este captulo 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 pgina. 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 tipografa que est tratando
est pensada para realizar una animacin, o entrelazados, es decir, descargar
progresivamente el documento en el explorador.

Consejo

...

Recuerde que si trabaja en formato GlF lo ms recomendable es que


trabaje el texto y el fondo con los colores de la paleta general del documento.
Para ello dirjase a la paleta Muestras y cargue la paleta de color
correspondiente al documento, de este modo el proceso ser ms rpido 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 diseada desde la propia paleta Muestras en


cuyo caso la extensin ser ACO, mientras que si la creamos desde la Tabla
de colores su extensin ser ACT. Para mayor ms informacin dircase al
apartado Remodelar la tabla de colores del captula 6 y Eleccin de
paleta del captulo 3.

Efectos en el texto
Como ya indicbamos en el captulo Transparencias en imgenes para
la Web, las texturas suelen contener un nmero concreto de colores, dependiendo
de las caractersticas de la pgina puede ser mayor o menor. Cuando la textura es
aadida 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, grficos u objetos con transparencias. Este es uno de los motivos ms
importantes que hacen casi necesario trabajar con la paleta de color diseada.
Piense que este tipo de documentos son enteramente creados por usted, no es
como cuando trabajamos con una fotografa. En cierto modo resulta ms cmodo, ya que no hemos de ir excluyendo colores en exceso, sobre todo si las caractersticas del texto no tienen grandes barroquismos y son sencillas, contando como
mximo 16 colores.
Para incluir transparencias en el documento RVA recurriremos a un canal alfa, una transparencia de capa o la herramienta Cuentagotas. Seleccionaremos las partes del documento que deseamos excluir enmascarndolas. Si el
color que ha de parecer es un color plano puede cargarlo como mscara especificando sus valores en el Selector de color de Photoshop en el cuadro de dilogo 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 dilogo Opciones de Exportar GZF89a, activar los
colores que desea que sean sustituidos por el color de transparencia, o bien meQiante el Cuentagotas seleccionarlos directamente en la previsualizacin de la
imagen.

EL TEXTO?
Lo habitual es activar la opcin Suavizado con el fin de que los contornos
no aparezcan excesivamente dentados. Sin embargo, cuando los proyectos van
dirigidos a la elaboracin de pginas Web esta opcin puede ser contraproducente. Esto es as porque en la mayora 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 opcin produce una degradacin en el
contorno haciendo que aumente el nmero 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 desvirta la paleta. As que ya sabe,
si piensa reducir la paleta de colores y en el proyecto prevee incluir texto, no

274

Webs con Photoshop


active en el cuadro de dilogo Texto la opcin Suavizado. De este modo evitar
sorpresas y esfuerzos innecesarios. Por otro lado, recuerde que Suavizado est presente en la mayora de las herramientas como opcin en la paleta Opciones de cada
una de stas y que lo dicho aqu es aplicable tambin 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 ilustracin superior de la izquierda no se ha activado la opcin Suavizado incluida en el cuadro de dilogo de Texto, mientras que en la ilustracin inferior izquierda si hemos activado dicha opcin. Observe como aumenta
sustancialmente el nmero 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.

Opciones

Opcioner

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 opcin 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 grficos, resultan muy tiles la


totalidad de las herramientas de ajuste. Por ejemplo con el comando Brillo/contraste o los comandos Niveles o Curvas podemos variar el nmero de colores que
contiene el texto, es decir reducir la gama cuanto sea necesario. Ya hemos comprobado que la activacin o la no activacin de la opcin Suavizado, repercute
implacablemente en el nmero 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 mtodo eficaz cuando el texto grfico es un elemento preponderante en la pgina y los colores de ste marcan una pauta importante
con respecto al resto de documentos grficos.
I

Figura 174.
Documentos P SUr
y cuadros de dilogo Color indexacio
y Niveles respectivamente.

El texto ha sido creado manteniendo activada la opcin Suavizado, ya que no


deseamos una reduccin drstica que
nos proporcione su

Paleta

Prolunddad de color

( Evlcta

1 Otro

Cancelar

Coloi ei 32

desactivacin.
Un anlisis del siguiente documento
Canal:
nos descubre la
Niveles deentrada:
E1255
cantidad de colores
Cwcslar I
que lo componen.
Aprovechndonos
de la paleta Exac1 ta incluida en el
cuadro de dilogo
1 Color ndexado
verificamos que
est constituido por
32 colores. El cuadro de dilogo Niveles nos ubica en el histograma, la distribucin 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 nmero de colores.

Webs con Photoshop


-

- .

---El
-

'rrr"*,fW

' I i

Paleta
-

R o f u n W de color

( Otro

0 x

Figr
Doc

PSD
dilogo Color inaexado
y Niveles respectivamente.

Y CU

2
1
El resultado es el
que muestran las
ilustraciones. Comprobamos mediante
el cuadro de dilogo
Color indexado que
el nmero de colores
ha sido disminuido a

1 Euacla

Colorea 26
Upciones

-,

1LI

Cariceiu

m
I

26. Esta reduccin


..
U
1
aparece igualmente evidente en el
histograma del doCancelar
l1
cumento en el que
vemos una distribuCargai....
cin distinta y meGuardar...
nor numero de coAuto
lores. En las ilustracienes tal reduccin no es tan eviMieles de salida:
)i3
dente, conseguiF Frerirual~zacin
mos que el texto no
apare.zca dentado.
En esta ocasin simplemente hemos empleado el comando Niveles, sin embargo la
reduccin podra ser mayor con un procedimiento ms exhaustivo con otros ajustes.

m
1
1

m-

m
1

COLOREARLO
Lo ms sencillo consiste en seleccionar como Color frontal un color de la
paleta del documento y a continuacin pulsar con la herramienta Texto en el lugar
donde deseamos que aparezca. Este mtodo resulta rpido al tiempo que efectivo,
pues si contamos con que no suavizamos los contornos nos dar como mucho dos
colores resultantes. Sin embargo, la tipografa grfica abarca grandes posibilidades que se pueden y debemos conocer.

Efectos en el texto

277

Como ya indicbamos en el captulo anterior, los ajustes de color pueden


resultar muy interesantes para la creacin de marcos, barras, botones y vietas
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 ocasin 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 dilogo Texto,
paleta Muestras y documento.

Eueiite
T.~-O

1 T~hurria

1801

II

~anceiai

!nterkeado
Espacia&

Subrayada

Alineacim

r &teca
r I&:had
r suayzai

rm

G
m

rpJq

'Iliiiiiiiii'iJ

cm CjYinhilll

Hemos seleccionado
como fuente una Tahoma de cuerpo 80
y estilo Negrilla, desactivando la opcin
suavizado. Es como
podemos observar
una tipografa con
rasgos corrientes.

2. Para romper la monotona del texto realizamos una suave


torsin mediante un filtro del submen Distorsin, en
concreto el filtro Molinete.

Webs con Photoshop


-

ilogo Molinete y documento.

b O l lrnao

1 1 Aunque no es un efecto de rellenar con un color determinado, lo hemos introducido en este apartado para enri-

2. A continuacin guardamos la seleccin de la forma al tiempo


que producimos en la misma una reduccin con el fin de
crear otra seleccin interior que guardaremos como un nuevo
canal. En ste realizaremos una serie de ajustes de color.
Para ello recurrimos al comando Guardar seleccin y al
comando Contraer del submen 1Modificar.

* lodo
-

Nada
!nvertir

Ctrl+A
C\rl+D
Mays +CltI+I

Documento

-Gama de colores
CgIar tvays +C~II+D
M~diftcar
Extender
Ci~ilar
Caloar seleccin..

1 texto E D
Cancelar

Canal r ~ v v o

Operecm

11

El paso siguiente ha consistido en guardar la seleccin del texto transformado. De este modo podremos utilizarlo para realizar
cualquier efecto en la capa
o en el canal alfa que se
crea automticamente.

Figura 178.
Men Seleccin, cuadro de
dilogo Guardar seleccin y
documento.

Efectos en el texto

m
-

Boider.
Redondear..
.
E xpandir...
1

--

L'L~.L#
XI

ContracciOn:

I@

pixels

Ea
Cancelar

Figura 179.
Submen Modificar, cuadro
de dilogo Contraer seleccin y documento PSD.
Queremos cambiar el color en la
zona interior del texto, as reducimos el contorno 4 pxeles.
Nos da como resultado la seleccin que aparece en la ilustracin.

3. En la seleccin creada mediante el comando Tono/saturacin


variamos el color interior del texto.
Cuadro de dilogo

Hemos variado exclu-

279

aumentndola
+ 25 del valor
Para cambiar el color recurrimos
a un mtodo rpido y eficaz empleando el comando Tono/saturacin. De este modo hemos enriquecido sustancialmente el texto inicial, aunque todava podemos hacer que aparezca ms
sofisticado y espectacular, como
veremos ms adelante.

En esta ocasin se ha recurrido a un comando de ajuste para rellenar una


zona seleccionada, no obstante, podemos emplear cualquier herramienta de pintura para cubrir las zonas que deseemos. stas tienen una funcin ms evidente

Webs con Photoshop

280

cuando trabajamos con la herramienta Mscara de Texto. Con la misma intencin podemos utilizar esta herramienta para clonar texturas o fondos determinados en el interior del texto. Realmente los efectos a conseguir son enormes.
1. En el documento creado para la ocasin situamos el cursor
de la herramienta ~ s c & de texto sobre la zona donde
deseamos que aparezca. A continuacin empleamos cualquier
herramienta de pintura o de restauracin.
Figura 181.
Documentos PSD,
paletas Opciones de
degradado y Opciones de tampn respectivamente.

~a-84

id! Dpoionsr de degradad.

.
J
-

INarmil

\I

b! La mscara de texto resulta ser ms efectiva cuan-

100: Y

Opacidad

Degradado: fAmrrillo. Violeta, Nnmji, A

1-

Z U ~

M O ~ I ~ ~ C ~

pleados estn incluidos en la paleta aunque el degradado crea


un nmero indeterminado de nuevos colores aue habremos de
reducir si es el caso.
~

Naqadw
l~lorrnrl

1 Ido]

14

10) 1
4

\lb'
'O0Z

@emesdel~ph

op~~dad

na hemos clonado el
motivo de un documento en el que ya
habamos aplicado
una reduccin de colores y stos apareten en la paleta general del proyecto.

do queremos incluir una textura o un efecto constituido por varios colores. En este ejemplo mostramos
como empleando sta herramienta podemos aplicar
en el interior de la seleccin del texto un degradado
mediante la herramienta Degradado. Los colores em-

._

---.'I

<.

En este caso la mscara de texto nos sirve para incluir una textura en su interior utilizando la herramienta
Tampn, aunque previamente hemos seleccionado
de un documento el motivo a clonar. Para ello hemos
recurrido al comando Definir motivo. Como la textura aparece en otros documentos grficos de la pgi-

Efectos en el texto

nota...
Para rellenar con un color slido o textura o la versin guardada de
algn documento podemos emplear el comando Rellenar del men Edicin, tanto para el texto como un botn, vieta grfica, marco o barra.

...

Consejo

Si se trata de una textura que hemos de emplear en otros elementos


de la pgina, lo ms conveniente es incluirla con una reduccin 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 nmero de colores, el mejor mtodo consiste en


reducir con anterioridad la gama en cada elemento, sea una fotografa o un
botn o un texto. por ejemplo. o establecer unos colores. De este modo
partimos de una paleta personalizada la cual podemos hacer servir sin riesgos de incorporar otros colores y, al mismo tiempo, controlando el nmero
de colores.

EFECTOS ESPECIALES
Transformar el texto puede producir resultados muy interesantes. Los efectos pueden surgir de una modificacin de la forma mediante algn tipo de distorsin provocada porfiltros de distorsin, tambin podemos producir efectos utilizando filtros con fines bien dispares, pero que modifican la morfologa del texto,
stos pueden ser de origen bien variado como: Relieve, Bajorrelieve,

281

Webs con Photoshop


Desenfoque gaussiano, Mximo, Mnimo. Con el mismo fin podemos emplear
herramientas de restauracin para transformar el texto o los comandos Rellenar
y Contornear, al igual que cualquier filtro que pueda provocar un cambio
morfolgico, que son todos. Tambin 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 ms variado.

Tcnicas de manipulacin
Las transformaciones de la forma ya hemos dicho que pueden realizarse
con los comandos de seleccin, sin embargo, mediante los filtros Mximo y Minimo podemos realizar el mismo proceso que realizan los comandos Expandir y
Contraer como ya se ha indicado en el captulo 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 lapgina 278 hemos aplicado

el filtro Mximo y Mnimo creando dos capas distintas. Para


ello duplicamos la capa con anterioridad mediante una de las
tcnicas que el programa ofrece.

S
Radio:

(
I
pixels

Figura 182.

Cuadro de dilogo Mnimo


y documentos PSD.

El filtro Mnimo nos aumenta el grosor del cuerpo. Hemos aplicado el valor ms pequeo 1 pxel de Radio. observe que aparecen ciertas zonas deformadas.

Efectos en el texto

283

Figura 183.
Cuadro de dilogo Mximo y documentos PSD.

Cancela,

Prsi~isualizacin

- imxa
Rad~o

)2 p~xels

L.

-m

El filtro Mximo nos reduce el grosor del cuerpo. Hemos aplicado un valor pequeo
2 pxeles de Radio. Observe que el resultado es ms efectivo.

Comprobamos que al aplicar estos filtros el texto sufre una alteracin en


su contorno quedando en exceso dentado que, si no es un efecto deseado, deberemos corregir. El mtodo ms efectivo de subsanarlo consiste en suavizar los bordes, para ello emplearemos el filtro Desenfoque gaussiano. No obstante, sabemos que lo que estamos haciendo es crear un mayor nmero de medios tonos, lo
cual no nos interesa. Por este motivo, lo ms aconsejable es que a su vez ajustemos los medios tonos con cualquiera de las herramientas de correccin de medios tonos que Photoshop nos proporciona, aunque el ms 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 dialogo Desenfoque gaussiano
y documento.

El valor de radic
introducido es dc
0,8 pxeles. Un
valor mayor nos
distorsiona la letra.

1 - 1

Cancelar

Al

-i'

Webs con Photoshop

:anal.

1-

II

1 RVA

Cancelar
Cargar ...
Guardar...

<

i
:

........,........i.................... .........,........

rJ]l
tita...--

]
1

,,
::
..........,...J.
..?

Auto

Entrada.

1;7 Previsualizacin

Salida:

-&
l
Hemos
reducido el nmero de colores en la zona interJ

media, es decir, los medios tonos. La imagen de la que


partamos (ilustracin inferior) contena 8 colores, al realizar el suavizado del contorno hemos aumentado el
nmero de colores a 256. La ilustracin superior nos
altera el color general del texto ya que hemos reducido el nmero de colores a 238 colores. Si nos interesa
mantener el tono del texto podemos recurrir a otros comandos de ajuste para cambiar el color del mismo, por
ejemplo Tono/saturacino Reemplazar color.
Figura 185.
Cuadro de dilogo Curvas y documentos PSD.

Cuando aplicamos un desenfoque en cualquier tipo de documento


grfico sea texto, sea una barra, botn, vieta grfica, marco o fotografa
siempre nos aumentar el nmero de colores. Esto hace que sea innecesario
una reduccin de colores anterior a dicho proceso ya que volveremos a aumentar su nmero. Por otro lado debe considerar que si hemos de aplicar
una profundidad de color de 5 bits (32 colores) o menor, este efecto resulta
intil 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 tipografa creando una variedad interesante de rtulos.
..

1
.,b

--

.A-

67

Prsvisualizaci6n

J 1ioo%8
Radio:
-

pxslr

zado los contornos aplicando el filtro Desenfoque gaussiano con un valor de radio de 1,3 pkeles.
En esta misma capa hemos aplicado el
filtro Hallar bordes, ste, que aplica un
valor por defecto, intensifica el borde permutando el color del interior por el color
de fondo del momento, nosotros hemos
seleccionado un blanco.

Figura 186.
Cuadro de dilogo Desenfoque
gaussiano, submen Estilizar y
documentos PSD.

Bordes ilurninados...
Difusin...
Exlrusin...

-8
-.

xl En la capa original, Capa1 hemos suavi-

i;

o..

R elieve...
Snlarizar
Trazar perfil...

Viento...

m
J

A continuacin, en la capa duplicada de la original que habamos denominado MXIMO, hemos aplicado el filtro
del mismo nombre Mximo
del submen Otro. Realizando el proceso descrito en la
pgina 282. Al visualizar las
dos capas nos da como resultado este interesante efecto de
relieve diferente al que podemos conseguir con el filtro Relieve. El resultado puede ser
bien distinto segn el colorde
fondo seleccionado al aplicar
Hallar bordes.

Webs con Photoshop

286

- , -

Figura 187.
Cuadro de dilogo
Efectos de iluminacin
, v documentos PSD.

-'ala

R Activar

R Pievisualiz.

id^,+ Negativa 17n Mkima

Ca,al de iewtura

1 MMlM0 copia ~

i a d

100

Montauda

ra conseguir un efecto
is intenso en la capa
MAXIMO hemos aplicado el
filtro Efectos de iluminacin con los valores especificados en la ilustracin.
Manteniendo el tipo de luz
como dreccional con una
intensidad de 17. Las propiedades de la luz son de
Lustre: -67, Material: -58,
Exposicin: O y Ambiente:
20. El canal de textura corresponde a la transparencia de la capa a la cual perteneca el elemento dando
una altura montaosa mxima, es decir 100. El estilo
El
corresponde
ap2AMSPOi.
~
~
*
resultado es el que muestra
la ilustracin inferior.

3
II

---Iixll

'

La ilustracin de la

J izquierda muestra
l,

~:,/zD,kycq,
-

iI

como podemos intensificar el efecto


j en
aplicando
la misma
de capa
nuevo
y

con los mismos valores el filtro Efectos


de iluminacin.

Efectos en el texto

287

Figura 188.
Documento PSD.
En sta hemos desactivado Capa1 dndonos como resultado un rtulo distinto lo
que permite ver el alcance de su uso.

_1

11

L'

Losfilros de desenfoque son potentes herramientas que pueden ser empleadas para producir innumerables efectos. Entre los ms habituales encontramos 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 grfico.
Figura 189.
Documento PSn

Ti-

Hemos duplicado
Capa1 y aplicado el
filtro Desenfoque de
movimiento obteniendo el resultado
-1
J
que visualizamos.
Los valores dados responden a un ngulo de 7grados y una distancia de 7pxeles.
Conseguimos crear una sombra efectista un tanto distinta de las habitules al tiempo
que acentuamos la sensacin de movimiento impreso en el rtulo.
En el ejemplo mostrado en la ilustracin inferior se ha recurrido al efecto Desenfoque
gaussiano aplicado a un radio de 1,5 pixeles. De este modo producimos una sombra clsica. Pruebe a comprobar los resultados que pueden obtenerse con los filtros
Desenfoque radial y Desenfoque suavizado. Los efectos pueden ser intensificados
o,disminudos 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 documento en cuestin
9 como mostrarmos
ms adelante.

1'

Webs con Photoshop

288

Alterando el. color


Variando o manipulando los colores originales podemos obtener interesantes efectos especiales. Photoshop dispone de un extenso surtido de herramientas y comandos para estos menesteres, adems de muchos otros. Los modos de
color o de capa pueden transformar espectacularmente el texto. Tambin, los
comandos de ajuste y correccin de color nos facilitan el cambio o alteracin del
color base as como las herramientas Sobreexponer, Subexponer y Esponja.
Adems de ciertosfiltros que permutan los colores. Pero veamos unos ejemplos
representativos:
1. En la figura 181 superior (pg. 280), en la cual habamos
aplicado un degradado duplicamos la capa MAXIMO pg.
283). En sta se han realizado unos cambios a nivel de modo
de color y, por otro lado, un cambio de posicin obteniendo
los resultados siguientes.

r transprencir
g
j

11

7
1
1
1
degradado

35 J
A

IElllQlWl

PiRg?Da

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 ilustracin superior adquiere unos tonos verdosos y un contornos violeta y la ilustracin
inferior unos tonos azules-verdosos y un contorno azulado.

Efectos en el texto

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 anteriormente 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

10rcurecer

Y,

Trazados

\ 1bi

-j Opacidad:
100%
P

r Preservar transparencia

T
*

I WXIMO

S l

copia 4
1

Q E I P

-i

Comenzando por la capa superior se han introducido


los siguientes valores para la obtencin de este rtulo. Las dos capas superiores tienen como modo Luz
intensa, hemos duplicado la capa para intensificar el
efecto lumnico 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 habamos aplicado el filtro
Efectos de iluminacin en las superiores s.

Figura 192.
Paleta Capas y

3. En esta ocasin se parte de lafigura 189 superior (pg. 287)


con el fin de lograr otros efectos. La capa MAXIMO y Capal
han sido duplicadas cuantas veces se ha credo necesario, la
combinacin y el orden con que aparecen nos ha dado como
resultado varios rtulos interesantes.
Compruebe usted mismo como podemos lograr una gran
cantidad de variaciones con un solo documento.

289

Webs con Photoshop

290
]

C i p a r y Cmaln U Trazados

lTono

\ [ k\

. D .

1007

dad

Los modos aplicados son en MXM


IO
copia 4: Diferencia y opacidad de 51 %, en
MXM
I O:
Normal y opacidad a l 47 % y Capal: tono y opacidad a l 100 %. Nos da
un rtulo formado por tonos azules claros, blancos y violetas.

/E

r Preserva

En este caso hemos introducido los siguientes valores comenzando por la capa superior, modo Multiplicar y opacidad de 55 %, en MXM
IO
copia 3 Diferencia y opacidad 69 %, en MXIMO:
Multiplicar y opacidad 100 %,
Capa: Aclarar y opacidad 100 % y Capal: Diferencia y
opacidad 100 %. Conseguimos una suave degradacin
de tonos azules y verdes turquesas hacia un blanco.

Figura 193.
Paletas Capas y
documentos PSD.

4. No es posible visualizar imgenes 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.
-

--

aI

Figura 194.
Documento PSD.
En la ilustracin superior hemos procedido a cambiar el color de la capa
MAXIMOmedianteel comando Variaciones. Consiguiendo unos tonos
magentas en el interior del texto.

Efectos en el 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 (pg. 289). No obstante, en gran parte de los
submens encontramos algn que otro filtro para permutar
los colores de un modo u otro, la eleccin depender de las
necesidades del momento.
Figura 195.
Documento PSD.

En la capa degradado hemos aplic,


do el filtro Solarizar,el cual es aplicado con unos valores por defecto consiguiendo cambiar ciertos azules y violetas por rojos y anaranjados.

Tcnicas de disto~slun
y transformacin
Realmente puede ser muy efectivo aplicar efectos para causar distorsin
& el texto. Photoshop dispone de un gran surtido de filtros con los cuales podemos efectuar este tipo de efectos especiales adems de todos los comandos agrupados en el submen Transformar y el comando Transformacin libre con los
cuales es posible sesgar, perspectivar, escalar, rotar, etc. Gracias a ellos podemos
crear rpidamente tipos de letras personalizadas, que sera casi imposible si tuvisemos que dibujarlas nosotros con las herramientas de trazado; no obstante
aqu no pretendemos reducir el nmero de posibilidades aunque hoy en da resulta una ardua tarea dibujar letras cuando podemos disearlas rpidamente transformando las que ya disponemos, adems de la posibilidad de introducir en nuestra 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 producen efectos de transformacin de una u otra manera. Los primeros se caracterizan
por distorsionar la forma general del texto. Los segundos requieren de la combinacin con otros filtros o comandos para que produzcan una alteracin en la

291

Webs con Photoshop

292

forma de la letra. Sin embargo, tanto unos como otros conducen a efectos
sofisticados y espectaculares. Veamos algunos de los recursos disponibles.

Disto~:ionar
Suavizar

Textura: (~erbstiado

r !nvectir textura

Deforma la superficie a modo de ser observada a


travs de un vidrio. Podemos seleccionar un tipo
concreto de textura as como el alcance de la distorsin, la escala y el suavizado del efecto.

Opciones

I)

1
I

I I .

Nos transforma el texto apretndolo hacia el interior, por lo que aparece aumentada en los bordes y encogida en el centro.
Esta imagen parte de la figura 193 que aparece en la pg. 290. En este caso como en
el superior ha sido aplicado en todo el rtulo.

+
J100%

Cantidad
-

mi-

Cuadros de dilogo Cristal y


Encoger y documentos PSD.

Esta ilustracin es el resultado de la deformacin parcial de cada una de las


letras con un comando de transformacin del men Capas en la figura 194.

Efectos en el texto

,93

100"

intidad

C~estar
A

(4

Nos altera la forma de la tipografa creando


el efecto de una onda aunque podemos variar el estilo de la misma. Esta imagen parte
de la figura 194 que aparece en la pg. 290
al igual que la del filtro Encoger.

El"
Cancelar

+
J 100% J

Estilo: l~lredsdnrdel cen!rod


-

-Cantidad

m-

Se produce una distorsin a modo de ser visto como


esfera, por lo que aparece aumentada en el
,una
centro. Partimos de la figura 193 de la pg. Zan

m!!!

3
-

Modo: ~ o r m a l

Figura 197.
Cuadros de dilogo Esferizar
y Zigzag y documentos PSD.

\ =A:'

En este rtulo hemos aplicado en cadauna de las letras un filtro determina:


do logrando acentuar el ritmo del anterior mediante otras texturas y colores.

Webs con Photoshop

294

Figura 198.
Cuadros de dilogo Ondas marinas, Coordenadas polares, Onda y documentos.
I

. .

R .

Cancela

100"

Distorsiona la forma a modo de ser vista a travs delagua produciendo ondulaciones en los contornos asi como en el interior La intensidad del efecto como en el resto de filtros depender de los valores especificados El rtulo parte de la figura 194
que aparece en la pglna 290

Opcmrtes

I r

Tamao de onda

-.

(4

Magnilud de onda

-<,

cacala

Este filtro acerca o distancia los extremos

188 que aparece en la pgina 287 al igual


que el filtro Cristal de la pgina anterior.
T .

q b -

Nimeio de geneiadoie?

-ipo

"- Swncdd

MRI
~prqhirf

Ma

11 1443

L;

T ~,knpdo

C Cuadrab
I

_L

1 '

II

m .

'

7,
7'
.&

a
&rnpLiud

17

a
Li

noti-

vcii

1100t m'c

EIC~~-

na

he: indcfndr$
r Qa La ~ v k a
<i R e p t n girdc M bade

Produce una alteracin de la forma a modo de


onda o rizo pero de un modo ms sofisticado que
lo que podemos conseguir con otros filtros. Aqu la
deformacin obtenida en la figura 188que aparece
en la pgina 287 nos recuerda un zigzagueo.

Efectos en el texto

29s

Figura 199.
Cuadros de dilogo Rizo, Trazos de spray, Plastificado y documentos PSD.

+
J 100% J
Opciones
Caritidad

-Tamao:

Nos produce una distorsin irregularen los


contornos a modo de vibracin de las letras.
. .
..
O

"*;r.Y y%.T.3PZi'
" 3 ;.

f..?

.\..,-,

;<

.. .:

.
'

*.:.d.:

' *

.W.'

T.,,.
i

.,

I.

.'.

Opcinnes
Lonpilud de trazo

rm

12

Radio

Las dos ilustraciones inferiores muestran como


empleando otros filtros podemos distorsionar lasformas Y contornos j Capar\ Canales y Trrnadol \ 1
de la tipografa. En l,.,,,,rd
100':
- Opjcldad

Dil. detrazo:

I ~ i a gdeiecha
.

aplicado el efecto en
la capa activada,
mientras que en la
superior ha sido en
~ 1 0 0 %
J
Opciones

m-A

Intensidad
Detalle

1)
J

1-

suaviza

F.

114
A

Webs con Photoshop

296

nota...

Pruebe a producir deformaciones en zonas parciales de cada letra


seleccionando dichas partes con cualquier herramienta de seleccin, comprobar que los resultados pueden ser muy interesantes.

Ms sobre relieve e ilurninaciOn

En el captulo anterior y en ste ha sido mostrada de una manera sistemtica la forma de producir efectos de relieve e iluminacin 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 perfeccionemos tcnicas de manipulacin de ciertas zonas del texto para intensificar
dichos efectos ya que se trata de elementos clsicos en el diseo. Aunque como
los resultados han sido ampliamente mostrados en ejemplos incluidos en numerosas pginas, aqu nos centraremos en el desarrollo de creacin de mscaras de
dichas zonas y en su transformacin.
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 grficocon 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 parciales, como aumentar o disminuir las zonas seleccionadas, aplicar un filtro de
desenfoque en uno de los canales y un largo etctera.

1. Contamos con lafigura 183 (pgs. 283) como partida, Igicamente para poder crear selecciones de las distintas partes en
las que est constituido un cuerpo con relieve, ste ha de poseer 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.

Efectos en el texto

297

Con este fin nos proponemos seleccionar las tres zonas en


las que est constituido y guardarlas como seleccin. Para
ello emplearemos el comando Gama de colores y el comando
Guardar seleccin respectivamente.
Figura 200.
Cuadro de dilogo Gama de
:olores, paleta Canales y
jocumentos PSD.

De la ilustracidn'superior queremos crear selecciones que correspondan a las luces, sombras


y los medios tonos. El mtodo ms rpido y eficaz consiste en selecionarlas en el cuadro de
dilogo Gama de colores y, de ste, elegir las
opciones Luces, Sombras y Medios tonos
para cada una de las zonas respectivamente

s.
, .
oixiI

Aqui mostramos cmo hemos seleccionado las partes de las luces, las cuales han
sido guardadas como una nueva seleccin pulsando el comando Guardar seleccin que se encuentra, al igual que el comando anterior en el men Seleccin. 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 mscaras 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 ms representativas.

Caiat LI

c~,,,~,,

1
1

_Guahr

Re~~,ak&

Figura 201.
Cuadro de dilogo Niveles y Desenfoque gaussiano, paleta Canales y documentos PSD.

En el canal Luces hemos reducido los me,dios tonos y las luces reduciendo el nmero de valores en estos dos sentidos. Esto
repercutir en la imagen cuando utilicemos
este canal con algn fin en el texto.

En la imagen inmediatamente superior mostramos como hemos suavizado los bordes


del canal alfa Medios tonos. Ahora cuando empleemos dicho canal para crear cualquier efecto el resultado ya no ser el mismo que si se tratase de la zona enmascarada sin ms. En la ilustracin inferior
hemos activado la capa que nos interesaba la cual ha sido
convertida en un nuevo canal alfa #10 retocado para la ocasin de la manera en que aparece visualizado. La aplicacin de cualquier
efecto recurriendo a este canal
se realizar en la
zona que aparece enmascarada.

Efectos en el texto
3. Aplicando estos canales alfa en las diferentes selecciones de
forma parcial y tambin en el conjunto se han obtenido estos
resultados aplicndolos en la figura 177 (ps. 278) y la Jigura
183 (pg. 283).

stos son algunos de los resultados obtenidos utilizando las


selecciones de luces, sombras y medios tonos, as como sus
respectivos canales alfa transformados. En la paleta Canales de la pgina anterior aparece el canal Luces reducidas creado con el comando
Niveles para crear una zona de luces ms intensa, la cual ha sido empleada en la
ilustracin inferior izquierda. Tambin se han creado canales alfa a partir de una capa
especfica, como por ejemplo canal #10 utilizado en la imagen superior izquierda.
Figura 202.
Documentos PSD,

MORFOLOGADEL
TEXTO

HTML

La ubicacin del texto grfico en una pgina HTML es como cualquier


otro elemento grfico, es decir, empleando la etiqueta IMG junto con el URL del
documento en cuestin que viene definido por el atributo SCR y empleando el
resto de los atributos propios de la etiqueta. Los ms representativos son los que
especifican el tamao de la imagen con su tamao en pxeles en ancho y alto,
incluso reduciendo sus valores a modo del ejemplo: WIDTH= 150 y HEIGHT=30
o en tanto por ciento escribindose simplemente: WIDTH= 60. Los atributos de
alineacin como son ALIGN o VALIGN para definir la posicin en horizontal y
vertical respectivamente, los valores por defecto son ALIGN= RIGHT y

299

Webs con Photoshop


VALIGN= MIDDLE. Los atributos HSPACE y VSPACE que definen el espacio horizontal y el espacio vertical respectivamente. As para determinar cunto
espacio, cuntos pxeles, deseamos dejar entre el texto grfico y cualquier otro
elemento escribiremos: VSPACE=15. Por otro lado, en las imgenes podemos
incluir marco con HTML mediante el atributo BORDER, segn el valor determinado ser el grosor del borde: C B O R D E R = ~ > . es
S ~de~ gran utilidad pues podemos enmarcar la tipografa, aunque de un modo muy elemental y sencilla.
Hay que aadir que el texto grfico puede tomar facetas diversas, como
ser un mapa de imagen o un vnculo. Piense que puede ser de gran utilidad que
los elementos grficos sean al mismo tiempo elementos activos en la pgina y no
meras imgenes insertadas para hacer bonito. Todo elemento de la pgina debe
estar colocado con inteligencia, y, en este grupo tambin est incluida la tipografa, as que ya sabe, cada proyecto es distinto, esto hace que el diseo de los
elementos grficos que lo hayan de constituir deben estar pensados para ese proyecto y para ninguno ms. Puede que en una pgina sea interesante disear un
texto grfico efectista que adems nos sirve de vnculo 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 presenta 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 aadir, en estos casos el atributo
ALT, el cual hace que sea mostrado en los browsers que no pueden visualizar
grficos, por ejemplo: cIMG SCR=texto.jpeg ALT=ir a catlogo de ofertas
ISMAP>. Por ltimo, resear que si trabaja con numerosos elementos grficos
es importante aadir el atributo LOWSCR al tiempo que SCR. De este modo,
siempre aparece un fichero correspondiente a la imagen de baja resolucin que es
al que hace referencia LOWSCR y, a continuacin, la imagen de alta resolucin
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>. Aunque todo lo concerniente a este tema es tratado extensamente en el captulo 9.
Cuando el texto ha de ser al tiempo un enlace hemos de aadir un nuevo
elemento, ste es la etiqueta A. Inmediatamente despus de dicha etiqueta hemos
de introducir la direccin del documento referenciado o URL, para lo cual es
necesario el atributo HREF. Su sintaxis se presentara del siguiente modo: <A
HREF=catlogo de obras.html><IMG SCR= catlogo.jpeg>.

Efectos en el texto
Figura 203.
Visor de Microsoft
lnternet Explorer.
En esta pgina al trabajar con formato
JPEG, por el tipo de obras que se muestran, nos hemos visto forzados a mantener el texto dentro de un formato rectangular por lo que incluye un fondo
asociado a l. El texto grfico que aparece en la pgina de contenido de la
izquierda es al mismo tiempo un vnculo 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>

301

302

Webs con Photoshop

<P>
c HR>
<P>
<TABLE WIDTH=40% ALIGN=CENTER BORDER= 1
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&Oacute;N TEMPORAL<ICENTER> </A >

...as hasta completar los elementos de b lista.

Efectoseneltexto
Figura 204.
Visor de Microsoft
lnternet Explorer.

o.,-.

+
Y*

t.-?

y.

,.

!-M. %
'd
.

A
.

o,.?bF2.
G" :?- "2.,O:!,

c-m

La Web de la agencia presenta imgenes con transparencias, as es el caso


de los dos elementos que contienen
texto grfico. Los colores en
Sonrr>sPI niiiiero un en c/ nirrrttio eri vic!jrv i>.v<iriros
objetos han sido reducidos a los que
estn incluidos en la paleta comn de
todos los elementos, la cual fue elabo- tpl)
rada en su da durante la rnanipulacidn 4
.!
de los documentos en cuestin.
La barras sirven para centrar el reclamo publicitario al tiempo que de ornamento. sta
es la pgina principal, como puede observarse su diseo est centrado en la presentacin 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&uacute;mero uno en el mundo en viajes ex&oacute;ticos
<ICENTER> <lI> <lB> < / H I >

303

.A.

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&eacute;belo
navegando por las p&aacute;ginas de nuestra Web donde
encontrar&aacute; el lugar que tanto ha so&ntilde;ado</l> </E>
<P> <HR>
</BODY>
</HTML>

EL TEXTO, ALGUNAS
ETIQUETAS Y ATRIBUTOS

En los ejemplos mostrados el texto grfico aparece coordinado con el


resto de objetos que configuran una pgina, entre ellos cadenas de texto. La morfologa que adquiere ste cuando se trata desde htmi es bien distinta a cuando lo
hacemos como un documento grfico. Normalmente, es empleado para introducir gran cantidad de informacin, la cual sera casi imposible colocarla si debisemos hacerlo mediante imgenes, de este modo amortizarnos el tiempo de ejecucin en el browser. Disear Webs con un alto contenido de eficacia, armona
visual y que incluya todo lo necesario corre a cargo de una adecuada mezcla de
los componentes. Si existen un gran nmero de pginas vinculadas lo ms razonable es tratarlas con cadenas de texto que sean al mismo tiempo vnculos. Pueden llegar a ser muy vistosos si en su confeccin tenemos en cuenta el conjunto,
de tal modo que no resulte aburrida y aparezca todo con claridad y, por otro lado,
las imgenes 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 centraremos en la relacin existente entre stos y las imgenes cuando han de ser colocados paralelamente o cuando se tratan d e vnculos, tambin hacemos

Efectos en el texto
una incursin por los estilos fsicos y lgicos ms importantes y otras opciones
de inters para el lector. Su relacin con listas ser obviado por haber sido tratado
en varios apartados en el captulo 7 en lo que de relacin con imgenes tena.
Determinar el tipo de letra y el estilo es lo que requiere de mayor importancia, pues ha de estar en consonancia, cuanto sea posible, con la tipografa
elegida en el texto grfico, si que existe. La etiqueta FONT hace referencia a
ciertas caractersticas de la letra, cuando va acompaado 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 cambiar el tamao que aparece por defecto se ha de aadir el atributo SIZE dando un
valor numrico con signo positivo (o sin signo) o negativo segn se quiera aumentar o disminuir respectivamente, su sintaxis es: <FONT SIZE=+5> d
FONT>. Para cambiar el color del texto hemos de incluir el atributo COLOR
especificndolo con nmeros 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 subndice 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 ms comunes son los prrafos y las cabeceras. Los primeros vienen
representados por P. sta nos define un prrafo normal, su sintaxis es: <P> d
P> o <P>, ya que por defecto cuando iniciamos un nuevo prrafo 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 tamao de la letra siendo
H1 la cabecera mayor y reduciendo el tamao a medida que aumentamos el nmero H1, H2, H3...Hn, su sintaxis es: <H1> d 1 > . Las cabeceras son muy
tiles para introducir ttulos y subttulos o textos vistosos rpidamente. En sendos
atributos se puede manipular la posicin 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 prrafo <P
ALIGN=JUSTIFY>. . . O , esta ltima opcin no es posible en cabeceras.

...

...

...

...

...

...

...

...

305

Webs con Photoshop


Otro elemento a considerar es BR esencial para provocar saltos de lnea.
De vital importancia cuando se trata de textos de cuerpo mayor colocados con
cierto sentido de diseo. Lo especificaremos del siguiente modo: <BR> &R>.
Otro elemento importante para colocar los objetos en la pgina con cierto estilo
es el atributo CLEAR, ya que facilita determinar en qu posicin estar colocada
la lnea con respecto a otro elemento de la pgina, ste puede ser una fotografa,
por ejemplo. Si especificamos: <BR ALIGN=RIGHT> &R> indica que la
siguiente lnea comenzar tan pronto como el margen inferior derecho est libre,
<BR ALIGN=LEFT> &R> indica que la siguiente lnea comenzar tan pronto
como el margen inferior izquierdo est libre y <BR ALIGN=ALL>...&R>
indica que la siguiente lnea comenzar tan pronto como ambos mrgenes inferiores estn libres. Realmente es un elemento importante.

...

...

...

Cuando trabajamos con prrafos adems del texto se pueden incluir otros
objetos que en ocasiones pueden ser elementos IMG. Especificar la posicin del
texto con relacin a la imagen depender de la inclinacin y el tipo de diseo de
pgina deseado. Lo que si es cierto es que para determinar la ubicacin hemos de
especificarlo mediante el atributo ALIGN de la etiqueta IMG, es decir, en la
etiqueta P no, aunque as debiera parecer. La alineacin del texto con respecto a
un documento grfico es muy variada, el tamao 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 versin HTML, pero pasemos a
enumerarlas: TOP alinea la lnea base del texto en la parte superior de la imagen,
MIDDLE alinea la lnea base del texto en la parte central de la imagen, BOTTOM
o BASELINE alinean la lnea 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 tambin hemos especificado en la alineacin de la
etiqueta P el mismo valor. Para controlar la posicin en vertical puede utilizar: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 fotografa, etc. Podemos 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 pgina ya que permite insertar tantos elementos 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 colocndolas entre
sendas etiquetas.

...

Efectos en el texto
Figura 205.
Visor de Microsofi
lnternet Explorer.

. 3 3 a Q A A V ar'sii3
,

W,-FMAL

m
-E17

C A MB I O

307
m

DF TAMAO

H.vNX

' A ? FM"L W"LLA2?l<

Muestra un ejemplo visual de algunos zxrxwsb(blcreddm


de las ms 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 pgina.
~,:V,MA:.LFTRAMASOWWDE
Las que aparecen por debajo de la I- mm ! : ~ Z G W L : ~ ~ U ~ T - ~ ~ ~
nea estn 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 ~ - ~
,I>.w !--;.t?141i::?.lTA,t':::i:t
I . ~ ~ v A PTVT.~
~~w.F~
res. En la pgina siguiente se explican rm.:~
cada una de las etiquetas y el fin que tienen en el texto, aunque no todos los browsers
admiten todas las aqu detalladas.

...

a l g o sobre html

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&Ntilde;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&Iacute;NDICE</SUB >
<IFONT>
<P> TEXTO NORMAL<SUP> SUPER&/acute;NDlCE<lSUP>
</FONT>

Webs con Photoshop

308

<P><HR>
<P> TEXTO NORMAL <BIG> LETRA M&Aacute;S GRANDE
c/BIG> </FONT>
<P> TEXTO NORMAL <SMALL > LETRA M&Aacute;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 tamao de la letra con un valor por


defecto al tiempo que la muestra en cursiva. SMALL, por el contrario disminuye el tamao 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~-ta'3v-a~3a

A.
$(l.

U*.3

*.

i I i 2

". . .
3

- 1

O <

Y ,

hl i i - 1 rw-Lph* r - W i 4 . i
w r m ,id.b4 niuri.iLrrurruid

*. ,_

>

,->

ilurr-l 1 r 4 i r r m - t - m r l i p n p h

>ASPA'

---

"

-7

T I

mlhi~llirn(irn.p$Pi

lrlPPM

rTm'xP

AL* -CEFTR~

ESTE ES EL TIPO DE CABECERA R'AYOR

ESTE ES EL 1 IPO DE CABECERA INMEDIATAMIENTE MEhOR


cL

m.

c.,,mu

...,.m.

ci\BECBR*L7VTR*DA
C A E E C ~ N I I T S l C A D && LA DWCHLA

c m r m J u s r m c n o a x LA L ~ ~ I I I F ~ U > \
..L <a*.
d. .
M

p
m
.r i d i k l...-ii
ihon i r -1 i r i w d o rus

lnternet Explorer.

mmm,

P ~ p 7 M'"m
,
m Ii l.A L)qmDiI

.,m

Figura 206.
Visor de Microsoft

ruib," d. Liir
dr s<ia p m r o T d i l pila ir? rnpl..di

inn h - r n n

Aqu mostramos algunas de las variante que podemos obtener en 10s prrafos Y e"as
a' igual
cabeceras de
que el modo de utilizar la etiqueta BR
para aplicar saltos de lnea indistintamente en prrafos o cabeceras. Observe que sta ltima con variantes de
estilo y forma de texto puede ser muy
til para crear rtulos.

Efectos en el texto

...

n l g o sobre html

La figura de la pgina anterior muestra la siguiente sintaxis:


<HTML> <HEAD>
<TITLE> tipos de letra y estilos </TITLE>
<IHEAD>
< BODY BGCOLOR= FFFFFF>
<P> Los p&acute;rrafos son cadenas de textos que tratan un tema
o aspecto en com&uacute;n. Para cambiar de p&aacute;rrafo
hemos de cerrar el anterior, si lo deseamos y a
continuaci&oacute;n especificar el siguiente p&aacute;rrafo.
<P ALIGN =)USTIFY> Este segundo p&acute;rrafos que
adem&aacute;s. aparece justificado. Puede comprobar en el
ejemplo de como ha sido escrita esta p&aacute;gina como hemos
a&ntilde;adido una nueva etiqueta P para iniciarlo.
<P ALIGN = CENTER>P&acute;RRAFO CENTRADO
<P ALIGN=RIGHT>P&acute;RRAFO )USTIFICADO A
LA DERECHA
<P ALIGN=LEFT>P&acute;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&iacute;nea permiten cambiar de I&kcute;nea
<BR>cuando lo deseamos <BR >ahora es el segundo salto den
t r o de este p&aacute;rrafo. Tambi&eacute;n puede ser emplea
do en cabeceras.
<IBODY> <IHTML>

309

31o

Webs con Photoshop


&,.,

+
,--- +!.
- - --

tb..

'0
'
..-' *

;LIXLALLTA!.~FA~.A

3.

UUT-TL"
A: :L:E.T,: : F
.L.,

,.

.,dFigura 207.

Visor de Microsofl
lnternet Explorer.

De arriba hacia abajo se han empleado las siguientes opciones de alineacin en el atributo ALIGN, stos
son:TOP, MIDDLE, BOTTOM, RIGHT

~:iurrj.n?i~~~i.?>i

:A*m,*I.rr

rhi-!x.,p

ZITT~,L-L~~S.,~a 2w31

~~l):;h[.: A

L&E~:II!F~LA

m=P;

a*

....,

ain

meras colocan la primera lnea en la


posicin que presentan, pero el resto
de lneas aparecen por debajo de la
imagen.
.

a l g o sobre html.

..

La figura de esta pgina 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>

Efectos en el texto

311

Otras etiquetas de inters son BASEFONTla cual determina el cuerpo


del texto aunque ha de ir acompaado del atributo SlZE y especificar el
aumento o la reduccin con signo positivo o negativo, al igual que la etiqueta
FON7; siendo su sintaxis: <BASEFONT SIZE=-2 >. Lgicamente una
etiqueta invalida la otra por lo que no han de ponerse las dos nunca, pues
realizan la misma funcin.
Si queremos crear un efecto de parpadeo en el texto podemos hacerlo
incluyendo la etiqueta BLINK.

Cuando cadenas de texto han de ser vnculos, stas debern ser circunscritas 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 relacionadas que hacen referencia al tipo de carcter, la morfologa del mismo, si se trata
de un prrafo o si se trata de un tipo de cabecera, pueden ser incluidos. Veamos
Tomo aparecen sintcticamente relacionados.
Figura 208.
Visor de Microsoft
lnternet Explorer.

+-- -- a 3a 3-33
.-

:n

6-

,t8-s-n

CAh4BIO DE T.*IAo

Aqu hemos sekccionado Parte de 10s


",>.
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 vnculo en cada
uno de los casos, incluso el que se enCU?A-F
a:Eu.,::.Lk>;:acuentra en el prrafo relacionado con ,. .:....
-11
?FA-,.
: AT7-NCAI.I-!
fotografas, esto es porque hemos en:.
.- l A ?-=T.,,
cerrado todo el bloque entre las etique,. .. .
tas <A HREF=URL> y </A>. Aunque
aqu no se muestra el proceso para insertar un vnculo dentro de una cadena de texto
en un prrafo, es el mismo; simplemente la palabra en cuestin deber estar entre las
etiquetas mencionadas. En la pgina siguiente aparece la sintaxis de esta pgina donde se muestra como todos los elementos se relacionan.
r;,,-L,L7,7L

p:-

:y

Webs con Photoshop

...

a l g o sobre html

La figura de la pgina anterior muestro la siguiente sintaxis:


<HTML> cHEAD>
<TITLE>tipos de letra y estilos en vnculos <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&Ntilde;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&Aacute;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&Iacute;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>

Efectos en el texto
Figura 209.
Visor de Microsoft
lnternet Explorer.

,
.
c
. c,un

i.

4.

L.%. -.

d
..

:.

O"-,

Aqu como en la mayora de pginas


de la Web conviven texto normal y texto grfico en una agradable armona.
Cada uno de los cuales cumple su funcin especfica. Observe que en este
caso los vnculos secundarios y ms
numerosos aparecen en fomato de texto normal, mientras que el grfico aparece para resaltar un tema concreto.

...

a l g o sobre html

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>

h
.
.

313

Webs con Photoshop

314

<P><HR><P>
<CENTER> <I> <B> <FONT SIZE=5 COLOR=FFFFFF>
Bienvenidos a la galer&iacute;a angek Fuente donde
podr&aacute; encontrar una ajustada gu&iacute;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
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>
</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&Oacute;N TEMPORAL</CENTER> </A >

...as hasta completar los elementos de b lista.

Efectos en el texto
Figura 210.
visor de Microsofi
lnternet Explorer.

-+.

- 3 3 3 3&'4'7BliY

La pgina por marcos est dividida en


tres secciones debido a que desebamos resaltar con un fondo las fotografas de los lugares al tiempo que'
delimitarlo en un espacio que difiriese
del resto de la informacin que aparece en las otras pginas de contenido.
Aqu como en el caso anterior sendos
tipos de texto conviven para proporcionar claridad informativa sin llegar a agotar visualmente al
navegante por un exceso de contenido informativo.

- 1

--

&*
1jruii

--

.-

..

co!n
rnr x
. -- ---

...

a l g o sobre html

La figura superior muestra la siguiente sintaxis:


<HJML> <HEAD>

< TITLE >80 a&ntilds;os de surrealismos <l TIJLE >


A

315

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>
<BODY BGCOLOR=6FCZF7>
<TABLE WIDTH=50% ALIGN=CENTER BORDER=O
CELLPADDING=O CELLSPACING= IO>
<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&eacute;rica del sur.html>
<FONTCOLOR=FFFFFF> <CENTER>AM&Eacute;RICA DEL
SUR</CENTER> </A>
<A HREF=lviajeslpolinesia.html> < FONTCOLOR= FFFFFF>
<CENTER>ISLAS DE LA POLlNESlA </CENTER> </A>
<A HREF=/viajes/arn&eacute;rica central.html>
<FONTCOLOR= FFFFFF> <CENTER>AM&Eacute;RICA
CENTRAL</CENTER> </A>
<A HREF=/viajes/asia. htmI> < FONTCOLOR = FFFFFF>
<CENTER>ASIA</CENTER> </A>
<A HREF=/viajes/africa.html> <FONTCOLOR=FFFFFF>
< CENTER>&Aacute;FRICA </CENTER> </A >
<A HREF=/viajes/ofertas. html> < FONTCOLOR = FFFFFF>
<CENTER>OFERTAS<ICENTER> </A>
<HR ALIGN=CENTER>
</BODY> </HTML>
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/HEAD>
<BODY BACKGROUND=textura I.gif>

C TITLE >vinculas

<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>

En todos los casos hemos subrayado los elementos de texto.

Webs con Photoshop

318

PROYECTOS
A lo largo de este extenso tema se ha ido mostrando mediante numerosos
ejemplos como producir interesantes efectos en la tipografa, aunque sin tratar
ningn elemento perteneciente a una de las pginas. Veamos un breve resumen de
cmo hemos diseado uno de ellos.
Documentos PSD.
El rtulo est integrado en
un documento que ha de
contener una fotografa. El
fondo de la pgina 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 tipografa
cubrimos con la herramienta Bote de pintura el fondo que responde a un R: 111,
V: 194 y A: 247. A continuacin hemos recortado la seccin de una fotografa de
inters, que previamente habamos indexado, con la herramienta Marco dando un
calado de 6 en su paleta opciones. De este modo conseguimos crear un efecto de
suave degradacin entre el fondo y la imagen. Para provocar un viraje rpido simplemente hemos seleccionado en la capa de la fotografa 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~ con1

sistido en seleccionar el
tipo de letra adecuado seleccionando 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 posicin ms o menos definitiva.

hemos duplicado. En una


de ellas hemos mantenido
el color inicial y sin alterarla, a excepcin de la opacidad que ha sido reducida al 50 %. En la capa inferior se han aplicado varios 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

Efectos en el texto
altura de 8 pxeles 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 luminosidad dando como resultado el que aparece en la ilustracin de la pgina anterior.

Figura 212.
Documento PSD.
En la capa de TOUR hemos aplicado en primer lugar el filtro Relieve dando
como valores ngulo: 55
grados, altura: 8 y canti-

dad de relieve: 63 %. A continuacin con el comando Gama de colores y el comando


Guardar seleccin hemos creado canales alfa partiendo de cada una de las selecciones 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/saturacin. El paso siguiente ha consistido en duplicar la capa, en la inferior se
ha aplicado el filtro Efectos de iluminacin seleccionando como estilo 2AMSPOT, la
opcin FOCO, como tipo de luz, una intensidad de 17,un foco de ancho de 91, un
lustre mate de -67,plstico como material con un valor de -58, una exposicin 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 montaosa mxima. Estos valores han sido aplicado posteriormente 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
y la hemos convertido en canal alfa en el cual hemos aplicado el filtro Desenfoque
gaussiano para una mayor integracin con el fondo de la pgina Web.

Figura 213.
Documento PSD
y paleta Capas.

F Preservar lransparincla

319

Webs c o n Photoshop

320

UNOS CUANTOS EJEMPLOS


En las muestras aqu presentadas comprobamos la gran variedad en diseos que se pueden obtener y como stos son armonizados con el resto de los elementos al tiempo que con el diseo 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 pgina, mientras que en otras domina el valor informativo y de catalogacin por encima de valor publicitario.
...-.

<m-

:.-

la

.-

.*

1--

.-m Figura 214.


Visores de Microsoft lnternet Explorer.

..

.-

Thearcade presenta la totalidad de elementos


tipogrficos en formato grfico unificando de
este modo la presentacin ya que es esencialmente una presentacin apurada en la que se
ha sabido conjugar los elementos de informacin con los publicitarios creando este espacio
escnico en el cual aparece representado el

~.-

..

..

.-...
logotipo. Vemos un buen diseo general .:.'
..

E*-

- ..r - , ~ -.~ 3 , 2 - . . . - : , - ; ~ .
=. ,$

:ZX. ' - '

-'

jugando con tres colores esenciales el


azul, blanco y amarillo como colores relevantes y un fondo negro sobre el cual
resaltarlos. Para poder incluir los vnculos en estos formatos se ha tratado la
pagina con mapas de imagen. Sharperimage presenta una esquematizacin
mayor rayando lo publicitario. Con una
buena combinacin de fotografas con

..
". .
--**. --

L...

,Y

1-

.L-.:-_./-.

-,:

..

9
._,-<S+.

--

. 4 ?

m i .

z'
....-. . .

. : 1 ~ l ~ < ' - ~ " " Y - r C ~

. .-..--.-...--.-.-.,-m

l.

.. a %

a texto en un mismo elemento que al tiempo es

,
.
,

vinculo. El superior est en HTML. En Carpoint


el texto grfico sirve para resaltar el nombre de
la empresa al tiempo que de reclamo sobre
temas importantes (con vnculos). Los temas
que tratan aparecen un tanto ms detallados
con texto en HTML y si es necesario ampliar
informacin podemos optar por los vnculos que
presentan. Es una pgina elegante, ordenada
presentando exclusivamente lo necesario, sin
fatigar por exceso de informacin o de colores.

A diferencia de los vnculos en formato texto o en formato grfico, los


cuales estn 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 especficas de sta para convertirlas en vnculos que
nos trasladen a la direccin o pgina requerida. Este aspecto es muy importante,
pues a diferencia de un simple vnculo los mapas permiten dividir una imagen en
varios vnculos distintos, lo que hace que podamos aadir o elaborar diseos de
pginas ms complejas y sofisticadas.
Aunque esto no es del todo cierto pues fcilmente podemos disear la
totalidad o parte de una pgina con vnculos, incrustando cada una de las zonas
de la imagen en diferentes celdas de una tabla haciendo que las que nos interesen
sean vnculos y el resto meras imgenes, vemos que en realidad vienen a cumplir
la misma funcin que un mapa de imagen aunque de un modo ms 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 captulos anteriores ya se ha comentado sustancialmente la utilidad de las
tablas, aqu no trataremos del alcance que pueden tener para la realizacin de

322

Webs c o n Photoshop
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 mtodo que ms le satisfaga.

PARA QU LOS MAPAS DE IMAGEN?


Es muy habitual emplear imagemap cuando se tratan proyectos con un
alto componente grfico, cuando se incluyen documentos tratados en programas
de creacin tridimensional o simplemente cuando se desea activar un cierto espacio como un mapa de imagen, como puede ser el caso de una barra de tareas
integrada en un documento o una fotografa. stos son activados colocando el
puntero sobre la zona especfica y pulsando sobre ella, cada mapa tiene su radio
de accin, 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 rectngulo,
crculo o polgono segn 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 accin asociada
a dichas coordenadas (al radio de accin 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 estn basados en el navegador, la gran
ventaja adicional de este novedoso sistema reside en que el proceso se agiliza, es
decir, la presentacin es mucho ms rpida pues el servidor Web no tiene que
procesar ninguna informacin 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 nmero de programas
para la creacin 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 diseo ser diferente.
El mtodo habitual para crear imgenes 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 sera <IMG


SCR=fotografa.jpg ISMAP> a lo que debe ir acompaado de la referencia de
hipertexto al documento vinculado mediante la etiqueta A y el atributo HREF
del siguiente modo: <A HREF=catlogo.htm> <IMG SCR=fotografa.jpg
ISMAP>dA>. Una vez ste aparece en el browser nos informar en todo momento
de las coordenadas exactas de localizacin del puntero. Este aspecto es muy
importante pues nos sirve para la confeccin de un esbozo previo para poder
delimitar las coordenadas exactas de los mapas de imagen que deseamos incluir
en el documento definitivo.

...

a l g o sobre html
La sintaxis de una imagen activa es:

<A HREF= URL> <IMG SCR= URL ISMAP> </A>


Observe que no requiere de una informacin previa sobre las coordenadas del mapa de imagen. Esto es as porque en realidad estamos engaando al servidor hacindole creer que el documento grfico es un mapa de
imagen as que cuando colocamos el puntero del ratn 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 cdigo
fuente de Webs.

Figura 215.
Visor de Microsoft
lnternet Explorer.

h...

:i.v

<.

A,

8..

m<-W-,

,%*<,<,,"-,:m

S".,

_: J. ,..?+ ,Y*
. ,*- ..-

7 .
>-U. e

tl

v.+,

L .

.,,.

-.,,,.m-

..

-2.

,U, .;1 2- ,; :

:
j

. W W .

.;u-.-*cw*t..+

,-o-".-

I
,.,

Comprobamos en la parte inferior del


browser como ste nos informa de la
direccin del documento vinculado y las
coordenadas de la posicin del cursor
en ese momento. sta resulta ser la
clave para planificar 10s mapas de imagen de documentos complejos y
sofisticados,por ejemplo cuando debemos trazar una forma poligonal.

uno e11 cal rrrrrido

CIZ

i.uijec e~citien\

*.

d
7

324

Webs con Photoshop

...

a l g o sobre html

La figura 2 15 muestra la siguiente sintaxis:


<HTML> <HEAD>
<TITLE>zonas activas<lJI JLE>
<IHEAD>
<BODY BGCOLOR=6FCZF7>
<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&uacute;mero uno en el mundo en viajes ex&oacute;ticos
</CENJER> < / I > </B> < / H I >
<P> <HR> WIDHT= 100h 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&eacute;belo
navegando por las p&aacute;ginas de nuestra Web donde
encontrar&aacute; el lugar que tanto ha so&ntilde;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

Todo sobre mapas de imagen 325


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 acompaado 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 cuestin aunque no tiene por que ser as, ste no deber
ser repetido en ningn otro documento. Su sintaxis es: cMAP NAME=titulo>,
donde tit~iloreferenca el URL del documento tratado como mapa de imagen.
La etiqueta AREA debe ir acompaada de una serie de atributos que nos
indican la forma que ha de tomar el mapa, las coordenadas exactas de dicha zona
y la direccin 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
sern indeterminadas, CIRCLE, para indicar reas en forma de crculo, en este
caso las coordenadas a definir son el centro y un punto del borde, RECT para
definir un mapa en forma de rectngulo, las coordenadas que deben indicarse son
las del vrtice superior izquierdo y las del vrtice inferior derecho y, por ltimo,
POLY para indicar que la forma es un polgono, en este caso es imprescindible
indicar las coordenadas de cada uno de los vrtices 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>. Adems 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>.

La sintaxis de las distintas coordenadas segn 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>

...

326

Webs con Photoshop


Por ltimo hemos de indicar de algn modo cual es el documento que es
tratado como un mapa en este caso habremos de aadir 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 posicin del cursor en
cada momento aunque s nos informa de la referencia de hipertexto del documento
enlazado. Su sintaxis es la siguiente: <IMG SCR=fotografa.jpg USEMAP=
#nombre del mapa> (el smbolo # 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 acompaado de la etiqueta de enlace A, pues los vnculos vienen
determinados entre las etiquetas <MAP> y d M A P > .

...

a l g o sobre html

La sintaxis de un documento entendido como varios mapas de


imagen sera 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>
<ARA SHAPE=CIRCLE COORDS= xl, y/, r HREF=URL>
< A R U SHAPEePOLY COORDS= xl, y l...xn, yn HREF=URL>

nota...

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.

Todo sobre mapas de imagen


Figura 216.
Visor de Microsoft
lnternet Explorer.

- !.

327

E*.
_.A

'

c-,,"m

l. i fr..;.i

?-

.' -.

-*

-*.

.s.-.

,m.+

,!

* -,

-<.-

< i

En la parte inferior del browser aparece exclusivamente a nivel informativo


la direccin del documento vinculado.
En este caso la imagen que ha sido tratada como un imagemap, presenta dos
zonas activas, una en forma de polgono que aparece visualizada y otra en
forma rectangular, se trata de el rtulo
turistic como indica su pgina.

1c

_-

a l g o sobre html,
La sintaxis de la ilustracin superior es:
<HTML> <HEAD>
< TITLE >mapas de imagen </TITLE >
cIHEAD >
<BODY BGCOLOR=6FCZF7>
< 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 pulsamos con el cursor dentro de las coordenadas impuestas por la forma especificada nos trasladar al documento htm definido en el HREF, que en el
polgono es agenchhtm y en el rectngulo es viaje.htm.

L b -

J ,-..
A

Webs con Photoshop

328

DETERMINAR COOFCDENADAS
En pginas anteriores comentamos que la gran mayora de programas
para la creacin de documentos HTML traen incorporados comandos o herramientas que facilitan el proceso para la determinacin de las zonas activas. No
obstante es importante saber qu mtodo podemos emplear en caso de no disponer de este tipo de herramientas. Ya comentamos que una forma rpida consista
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 (pg. 322). ste, como ya indicbamos, nos permite visualizar en el
browser la posicin del cursor en cada momento, as que mediante ste podremos
saber que coordenadas deseamos marcar como rea activa. Una vez creada la
pgina la cargamos en el browser y comenzamos a tomar nota de los puntos que
delimiten la forma de la zona activa.

.-

te

..

e--i

m*

2 5

Figura 217.
Visores de Microsot lnternet Explorer.

2. c>L ;-, i 2. ,Y"


1.-..

Este documento viene especificado en la pgina del cdigo fuente como una imagen activa, con las etiquetas y atributos de un vnculo 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 posicin
tr.

del cursor. Las que aparece en la ilustracin superior son las primeras coordenadas que emplearemos para determinar el polgono que delimitarla zona,
stas son 17, 13. Las que marcan el
vrtice siguiente aparecen visualizadas
en la ilustracin inferior, stas son 31,
105. En estos casos las coordenadas no
tienen porque coincidir con los mrgenes que impone el tamao especfico del
documento.

t.-

..
--2
3-

Y
-8
t...
7

--"--=-I

:f,,,l,,,

. -.-

Todo sobre mapas de imagen


Figura 218.
Visores de Microsoft lnternet Explorer.

3
2t
*

--

'S*

m.

& ,A $2

--

Las coordenadas de los vrtices siguientes


son segn las ilustraciones que aparecen de
izquierda a derecha y de arriba a abajo: 136,
86, 192, 67, 145 y 11 respectivamente.
Lgicamanteel vrtice que cierra la figura es
el primero, es decir, 17, 13. Nos cercioramos
de que el proceso para la obtencin de coordenadas no es nada complicado.

algosobre html...

La figura 2 15 de la pgina 323 mostrara el siguit.rire Lurriuiu


tructura con respecto a la imagen titulo:

ue e>-

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

...

329

Webs con Photoshop

330

Las etiquetas MAP y AREA


para introducir coordenadas
Una vez tenemos las coordenadas del rea en cuestin hemos de introducirlas, 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 pginas 324 y 325.
A lo dicho hasta aqu hay que aadir 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 relativo a la imagen, que es lo ms aconsejable tal y como se indica en la pgina 326.
Pero ahora veamos cuales son los cambios sustanciales en la pgina del cdigo
fuente y en la pgina visualizada en el browser con respecto a la anterior.

...

a l g o sobre html

La figura 2 15 de la pgina 323 mostrara el siguiente cambio de sintaxis 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

...

Todo sobre mapas de imagen


Figura 219.
Visor de Microsofi
lnternet Explorer.

e,.,.
A "

-l.,t

Ir

En la parte inferior del browser aparece a nivel informativo exclusivamente


la direccin del documento vinculado.
Vemos como la zona activa queda restringida nicamente al polgono que
delimita la palabra tour, la cual pertenece junto con otros elementos visualizados al documento en formato GIF
denominado titulo

:"p .

E,.

,.,d.

>+--

-_'

.m

J
L-.&.

,3

9,

m.S
b-s,A

,.

r_-

331
N

19.

.(
..?_

7'1.

-,,"

"""F__1

;.,,-r.u,.,i!:iih.

#U
,,

- 1 , ,I,#l,l",/,#

,,,

l.,,,,,

\ l.1 O
,,,

t,,

PROYECTOS
En el captulo 7 mostrbamos en la figura 166 de la pgina 265 de que
modo era posible crear el efecto de una barra de herramientas mediante la colocacin consecutiva de varias imgenes que al mismo tiempo eran vnculos. En esta
ocasin vamos a mostrar otro mtodo de crear una barra de herramientas constituida por un solo grfico dividido en varios mapas de imagen. Con el fin de
cotejar las diferencias existentes entre una y otra la realizaremos en el mismo
diseo de pgina.
1. En los botones diseados en las pginas 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 ilustracin.

Figura 220.
D ~ ~ ~ r n ePSD.
nto

..

Para no modificar el documento anterior los hemos duplicado y


a continuacin hemos acoplado las capas que nos interesaban
colocando cada botn a la misma altura tal y como se muestra.

Webs con Photoshop


2. El documento ha sido colocado en la pgina 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.
, ,-.

.=

,. . .

E).

, -

--

:,

,.,

,..l, ,

.
.

Figura 221.
Visor de Microsofi
lnternet Explorer.

.&o
8

~-

El documento ha sido colocado entre


las etiquetas <A> y </A> y con el atributo lSMAPcon el fin de poder extraer
las coordenadas pertinentes. Para una
mayor facilidad hemos incluido un valor 3 de borde y utilizado los valores
que nos proporcionan las rectas. LOS
aqu presentados son 0,Oque corres-

'

~p

..,

L, ' * ~
''

YI*W

ponde al ngulo superior izquier


do y 0,53 que corresponde al n- 1
gulo inferior izquierdo. Siguiendo
con los valores hemos seleccionado la forma rectangular dndonos para LlST las coordenadas
0, 1, 150, 57. Para SHOP las coordenadas 150, 1, 566, 57. Para
COMPLEMENTS las coordenadas 290, 1, 566, 57y, por ltimo,
para HOME PAGE las coordenadas 566, 1, 788,57.Observe que
ciertas coordenadas se repiten en

. - fe..I
/,

,,

-,.

.,.

,, . . -

8,

...-

,..E a
7

.<

iriii:>sn<~-T<
F!l(r.i?
'h7l?mn:?ts

,;7 S;,:

&/;&: i-';;7,p
6..

:>N,

,* ,Y

,;:.7.:*w:a,,

A.3-

LL

>-

f*

l:.,/,l,

.,

.-.+*

,.,.,,.,i.,l,
;P$~INsniui~
N

/.m,.,,....,

l,,l.~:r,I,,

varias reas y otras en todas. Esto es


as porque hemos seguido el marco o
borde incluido en el vnculo tal y como
aparece en la ilustracin superior para
incluir las coordenadas relativas a una
forma rectangular y no en forma de
polgono. En la ilustracin de la izquierda mostramos cmo aparecen ya activos los mapas de imagen, en este caso
el que nos activa la pgina mmplementos cuando pulsamos el botn simula-

!m

$[K(;
. ! 3.,
.'. 7, ,Y, .

fuente en la pgina siguiente.

Todo sobre mapas de imagen

GBigo sobre

html...

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 >
CAREA SHAPE=RECT COORDS= 290, 1, 566, 57
HREF=file:///E/moda/complements.htm>
CAREA SHAPE=RECT COORDS= 566, 1, 788, 57
HREF=file:lllElmodalhomepage.htm >
c/MAP>

333

Webs con Photochop


UNOS CUANTOS ESEMPLOS
El empleo de mapas de imagen y no de simples vnculos viene deterrninado por las caractersticas del diseo. En segn que casos resulta ms prctico el
empleo de vnculos colocados aleatoriamente sobre la pgina, pero en segn que
otros casos la distribucin tal y como la deseamos se hace casi imposible. Es
entonces cuando resulta ms prctico el uso de mapas de imagen donde la ubicacin de los elementos ha sido determinada en su diseo desde Photoshop.

- - t . -

,,..--+

..L.
J ....

L
:..,-

G,-

T
. .

-:
.--;*-

--.-

,.. - .*".

,,,,.
..,,
,,
- . -.- E & ~ z L - ".*,d

l.<~ll<ln_l.-.k.<...^.,

..-. . ,.<
><
.:. ... :-..A*,
' ..lb
.?. :-?
,:,
.. ...f

.>

+,

,. J

--

*.

m__
l_._*.F.l_-,_
.... -_..-._.,._, ...
"
-,
.&".
._,*
. _....
<-,.

-..A

a-

&...

at-rii

..-.
. . ... ... . ,
-,
,,.: , .-t. . 2- 2 . .?
,.Y -2.
- - . -,-.- - ..-<.-..
-- --.. -l

--um,

" . . , - . . , , . - . -m" ,

>

C.-'ci-lirii-i,.*p..ICII---,--4~.-

.,.-,..

..,-,-=

-* ::

Avon para crear este diseo dinmico, presentando los diferentes apartados o secciones a
las que se puede dirigir el navegante ha optado por disearlos con un programa, que perfectamente podra ser Photoshop.Creando esta especie de botones que al tiempo es texto,
como puede comprobar resultan sencillos, elegantes y efectivos. Dando al mismo tiempo
dinamismo~a la pgina y claridad en la presentacin, con los elementos necesarios. Cada
mapa de imagen segn la importancia o relevancia aparece en mayor o menor tamao representado por un cuerpo mayor o menor en el
texto. Tambin queda indicado por la diferencia de color de las barras o lneas que subrayan el contenido. Incluso en el mapa de imagen, lo ms importante aparece remarcado mediante incrustacin de una serie de elementos
visuales que responden a los objetos que ofrece la empresa. Aunque aqu mostramos tres
mapas de imagen, son en realidad cuatro que
aparecen delimitados tres de ellos bajo una
forma rectangular y uno bajo una forma poligonal tal y como comprobamos. Las formas delimitadas entran dentro de lo que es un solo documento que las engloba, facilitando el diseo
grfico de la pgina. Vemos, pues, que en est
pgina el diseo se ha regido por la incrustacin de mapas de imagen. Esto es muy importante tenerlo en cuenta desde el inicio y la preparacin de los elementos grficos, ya que
HTML marca en cierto modo la preparacin de
los elementos grficos que han de aparecer.

--

:
:

- -

Figura 222.
Visores de Microsoft lnternet Explorer.

-.

.
.
,
.--...,->.

.,.. *

..'

..<?.. '-:i. .A
--. :I-1. -..
:
;-.
,

r'

:.-

.,

,.:<

.,=, - -

....,.

#s.--

--

Cada da resulta ms frecuente ver en la Web pginas en que aparecen


animaciones, aunque stas sean muy limitadas en recursos y tamao, cada vez
Gtn ms mejoradas. Esto es debido a que la gran mayora de navegantes disponen
de mdems ms rpidos por lo que la visualizacin general resulta ser ms rpida,
esperemos que pronto se aumente el ancho de banda para facilitar la tarea a los
diseadores y gratificar a los navegantes con excelentes diseos. Pero de momento
debemos recordar que las velocidades de transferencia de informacin rondan
valores 10 a 50 Kbpor segundo y que con los mdems de 33,6 bps pueden transferir 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 difcil que
estos programas lleguen a implantarse pues la transferencia de informacin en la
red funciona por envio de paquetes de informacin y su transmisin es asincrnica
como indicamos en el primer captulo de este libro. Este hecho hace que la
visualizacin de las animaciones se presente con constantes saltos y parpadeos.

Webs con Photoshop

I
l

nota

...

En la actualidad hay en el mercado mdems a 56,Obps, no obstante,


la velocidad mxima a la que se puede conectar es de 33,6 bps desde Infova,
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, encontramos las creadas con QuickTime que aunque tiene su origen en la creacin de
efectos para productos multimedia del entorno Macintosh, posteriormente ha
ampliado su influencia a Windows. Este programa es igualmente empleado en la
creacin de efectos multimedia para Webs en gran mediada debido a que es un
formato soportado por un nmero elevado de herramientas multimedia al tiempo
que procura caractersticas estndares de reproduccin, de interface, de compresin y descompresin 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 creacin multimedia ms importantes del mercado que le
permiten incluir interesantes efectos animados basados en capas, aceleracin o
desaceleracin, tcnicas de intercalacin o grabacin en tiempo real o por pasos
entre lo ms relevante. Los programas ms importantes para la creacin de pginas Web disponen de comandos y cuadros de dilogo en los cuales confeccionar
animaciones Java o JavaSchpt. Entre los ms 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 grficos
de 24 y 32 bits. Estos programas simplifican la tarea crendolas ellos automticamente, usted simplemente tiene que indicar las caractersticas 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 conversin.

Diseando animaciones
Adems de las animaciones comentadas hasta el momento, nos encontramos con los GZFs animados. Para crear una animacin de este tipo requerimos
de un programa ensamblador, es decir, un programa que nos una cada una de las
imgenes que configuran la animacin, aunque a diferencia de los anteriores con
los cuales podemos crear una animacin con formato JPEG o GZF y otros, con
los programas para la creacin 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 eleccin depender de las
caractersticas 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 caractersticas de la animacin el procedimiento para
su elaboracin puede tomar directrices bien diversas. Aunque se dan varios procesos como pueden ser animaciones por acetatos, las basadas en cuadros, las
animaciones fundamentadas en trayectorias de movimiento y la animacin de
personajes o figuras no todas ellas pueden obtenerse trabajando con Photoshop
y conjuntamente con programas para la creacin de GZFs animados, que es lo
que aqu tratamos. Por ejemplo una animacin basada en acetatos que es uno de
los procesos clsicos en la animacin no puede desarrollarse en programas como
el issembler o HotDog, puesto que este tipo de animacin se crea partiendo de
un fondo inmvil 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 creacin reutilizando los fondos en los distintos cuadros que preparamos para producir la animacin. As una vez diseados
los frames necesarios procedemos a ensamblarlos en uno de estos programas.
Normalmente este tipo de software genera animaciones empleando la tcnica
basada en cuadros, tambin denominada animacin $!ir>-book,es decir, frames
que se suceden a tal velocidad que producen la sensacin de movimiento.
Resulta obvio por lo dicho hasta el momento que la animacin basada en
cuadros, contrariamente a nuestros requerimientos, produce documentos de mayor tamao 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.

337

338

Webs con Photoshop


Este hecho es importante tenerlo en consideracin ya que al tamao fsico del
documento o documentos hay que aadir los frames que son necesarios para
crear la ilusin de movimiento que por lo general oscilan entre los 10 y 15 cuadros por segundo, por lo que ser necesaria una adecuada optimizacin de la
imagen en aspectos como su tamao fsico y de archivo, restringiendo los colores
cuanto sea necesario y posible.

...

Ootn

Los programas que admiten la creacin 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 nmero de
formatos, trabajar con imgenes de 24 bits y otras tcnicas de animacin.

...

Consejo

Aunque el nmero de cuadros requeridos en las animaciones normales se ampla a los 24 Fames por segundo. las animaciones para Web
requieren de un nmero ms restringido y aunque se ha comentado que con
10 o 15 cuadros los resultados son buenos dependiendo de las caractersticas del proyecto, pruebe con un nmero menor, piense que con 5 cuadros,
segn 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 simultneamente 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 restringe exclusivamente al movimiento interno de un objeto o sujeto ste es denominado sprite. Ambos tipos de animaciones utilizan una tcnica de creacin por
capas, por lo que el escenario y el resto de formas incluidas que permanecen

Diseando animaciones

339

inmviles sirven como fondo para todos los frames. El proceso creativo puede
ser reproducido en Photoshop incluyendo en cada cuadro el fondo comn que
aparece en cada frame de ste modo conseguimos producir dichos efectos y restringirlo a los lmites que nos marca la creacin de animaciones GIF. Lgicamente la creacin de trayectorias implica una direccin a seguir por el objeto o
sujeto, cuando stas siguen una direccin curva se las denorninasplines. En estas
ltimas especialmente se requiere marcar la trayectoria del objeto o sujeto, puesto que toman una direccin curva e incluso irregular a diferencia de las animaciones basadas en trayectorias que toman una direccin recta. Para ello emplearemos las herramientas para la creacin trazados que nos permitan determinar,
con las lneas dibujadas, la direccin que tomar el objeto y por la cual desplazaremos el objeto para que su movimiento sea lo ms 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. Existen muchas ms posibilidades, tal y como mostraremos ms adelante.

nota

...

La animacin basada en sprites tiene su equivalente en la animacin basada en vectores, sta a diferencia de la primera trabaja con imgenes creadas con programa vectorialescomo Illustrator, Freehand o Corel
y como tales pueden ser muy tiles para segn el tipo de efectos a crear.

Consejo

...

Cuando las animaciones son repetitivas lo ms recomendable es descomponerla en ciclos sencillos con un nmero reducido de frames. Lo importante 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 imgenes que hayan de ser tratadas para su incorporacin
en una animacin bajo el formato grfico exigido por el programa que utilice
para tal menester y que al mismo tiempo est incluido en Photoshop. Comprobamos que los formatos a emplear pueden ser varios, no obstante, en el presente
apartado trataremos documentos GZF89a por ser ste con el que obtenemos mejores resultados, en gran medida debido a su capacidad para tratar las zonas transparentes de las imgenes, aunque todo lo dicho en este apartado como en otros de
este mismo captulo puede ser extrapolado para la creacin de animaciones con
otros forrnatos siempre y cuando excluyamos lo referente a las caractersticas
exclusivas del formato GIF89a.

nota...
+

Es recomendable que relacione la informacin aportada en: Optimizar


la imagen para Internet, Formatos y compresin de archivos, Tratar
imgenes para la Web y Transparencias en imgenes para la Web.

Las animaciones ms sencillas que podemos crear y encontrar en la Web


estn constituidas por dos cuadros, por ejemplo el efecto de pulsar un botn.
Cuando hemos de trabajar con varias imgenes que han de crear el efecto de una
animacin compleja, el primer paso a seguir es optimizar la paleta, hacer que el
fondo que es comn a todos los frames ya aparezca reducido al nmero de colores exigido, que en cada proyecto ser distinto, ya que en muchos casos el fondo
consistir en zonas transparentes que habrn de ser enmascaradas con el color de
fondo, la textura o lo que aparezca como fondo de la pgina Web. Para ello recurrimos al comando Color indexado del submen Modo o al comando
GIF89aExport del submen Exportar. Si la totalidad del documento ha de ser
transfigurada, lo ms conveniente es indexar el documento original e ir adaptando la paleta del resto de los documentos o cuadros que conformarn la animacin. Si se trata de imgenes que no tienen relacin que son colocadas para

Diseando animaciones
visualizar aspectos distintos, optirnizaremos en la medida de lo posible los colores contenidos en cada documento a fin de reducirlos a la paleta general de la
pgina, tal y como queda expresado en los captulos mencionados.
Los intrumentos empleados para producir animaciones son muy diversos, el empleo de unos u otros depender de las caractersticas de cada animacin. Veamos unos cuantos ejemplos ilustrativos en los cuales se determina el
proceso empleado en cada uno de ellos.
Capas\

Trazados

Canales

1 b'

Figura 223.
Paleta Capas y
documentos PSD.

Aqu se muestra una animacin constituida por dos


frames. Cada imagen ha
sido tratada en un mismo
documento tal y corno aparece visualizado en la paleta Capas. Las transforma-

'

rias capas duplicadas en las cuales se han dado diferentes ti-

tra. Una vez finalizadas dichos cambios hemos procedido a separar las dos capas en dos documentos distintos y de nuevo han
transformaciones de color. El siguiente paso ha consistido en crear
una mscara en la parte externa difuminando los bordes mediante el filtro Desenfoque gaussiano. De este modo cuando incluyamos en las zonas transparentes el color
slido, el que se incluya en el documento aparecer plenamente fusionado con el color
slido del fondo de la pgina Web. Por tratarse de un elemento de reducidas dimensiones se ha indexado dando una profundidad de color de 4 bits por pxel estableciendo unos tamaos de archivo de 2,7 Kb, lo cual es muy aceptable.

1 capasY Trazadas Y Canales \


ltlnrrnal

Opacidad

100%
A

1 b]

Figura 224.
Paleta Capas.

r Prerervar trans~arencir
Para realizar la siguiente animacin se ha partido de un marco creado con anterioridad. ste
nos servir como fondo sobre el cual realizar
1 11 1 1 la animacin, la cual consiste en presentar una
exposicin temporal. Para ello hemos seleccionado en el cuadro de dilogo Texto
Staccato222BT un tamao de 40 puntos y el estilo negrita, y asen todos los casos.

341

Webs con Photoshop

342

--

m( Figura 225.

Paleta Capas y documentos PSD.

[ capas\

Y Canales \

1 b:

100%
a
pacidad:

En la letra original hemos aplicado el filtro


Relieve y Efectos de iluminacin por este
orden. En la paleta Capas que aparece, los
cuadros estn 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 sern duplicadas
en documentos nuevos y en cada una realizaremos un procedo de indexacin al
- --- tiempo que las converiirmos en formato
GIF mediante el comando GIF89aExpor-t.
I
. . .
0
I
. .,
.
Para producir un efecto de presentacin
ms suave hemos creado cuadros intermedios a los que se han aplicado en el texto
un efecto de distorsin con el filtro Rizo
hacindolo coincidente con el nuevo texto
-..
. - .que ha de aparecer, es decir, si primero
---I hemos de introducir el cuadro 1 que presenta el texto Exposicin 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 animacin sencilla pero efectiva, aunque nos quedar 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 presentacin sea homogneo, es decir que
siga el mismo ciclo de distorsin-presentacinsecuencialmente. En cualquierprograma de ensamblaje de GlFs animados simplemente habremos de colocar los frames
segn el orden que hayamos establecido, que en este caso es como muestran las
ilustraciones, y determinar el tiempo de presentacin continua del ciclo.
A

Trazadas

Diseando animaciones
La etiqueta APPLET de Java para colocar
GIFs animados en una pgina HTMZ,
Los applets de Java son empleados bsicamente para crear animaciones, figuras, juegos u otros efectos interactivos entre texto e imgenes dentro de
las mismas pginas 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 pgina HTML,
ste ha de ser compilado por medio de un programa Java y haber sido escrito
anteriormente en el lenguaje o cdigo Java. El applet insertado en la pgina HTML
resultante simplemente ha de ser incrustado en un servidor Web.
Al tratarse de un lenguaje ajeno al cdigo ASCII empleado en HTML
hemos de referencia10 de algn modo. As encontramos que la etiqueta APPLET
nos permite incluir documentos grficos para la visualizacin de animaciones en
pginas para la Web. sta ha de presentar el atributo CODE el cual define el
nombre de la aplicacin 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 visualizacin. stas necesariamente han de coincidir con el tamao real de los grficos, si
no es as aparece una parte de las imgenes, en el caso de que el tamao de stas
sea mayor. El valor ha de especificarse en pxeles, por ejemplo: <APPLET
CODE=dogamin WIDTH=SO HEIGHT=SO>. Tambin pueden incluirse valores de margen entre la imagen animada y los elementos circundantes mediante
VSPACE y HSPACE, siendo precisados por pxeles, 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 alineacin de la presentacin del applet con el atributo ALIGN, las
opciones posibles son; LEFT, para colocarlo a la derecha; RIGHT, nos los ubica 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 opcin es la que se da por defecto si no se incluye ningn valor. Con todos
estos atributos es difcil que las animaciones no aparezcan segn sus deseos.

343

Webs con Photoshop

344

Para que la animacin sea ejecutada, adems hemos de emplear la etiqueta PARAM la cual indica los valores relativos a cada uno de los parmetros
incluidos. No obstante, sta por si sola no funciona sino que han de estar incluidos los atributosNAME y VALUE para definir con precisin el parmetro applet,
en el primer caso y el valor del parmetro applet, en el segundo, presentndose
segn el ejemplo: <PARAM NAME=move VALUE=30>. NAME presenta un
gran nmero de parmetros entre los ms importantes est BG, que se refiere al
color; PAUSE, que se refiere al tiempo de espera entre la presentacin de un
fotograma o cuadro y el siguiente; IMAGELIST, el cual determina la lista de
imgenes que configuran la animacin o MOVE, para referencia el tiempo de la
secuencia. Cada uno de estos parmetros son definidos con precisin en VALUE
especificando, como ya se ha dicho, el valor.
C L--

-"

---*

-. ,.---i
-

.-r

a
..-..-*-.-*
-. - --

'

.,,.,.,,,,,,,,

.S,>riri#sc.1 wri

LA4..
. ..
.
-

*.v.

,.- ,,

.
,+ .-.

---.

.1 \
.i- +--.-

--

.'
-

e..,.

.'

A
,
'
,

;.

En la figura 219 de la pgina 331 aparece una imagen ubicada en la parte inferior, sta ha sido sustituida por una secuencia de imgenes que en SI
no
muestran una ejecucin o movimiento de un objeto
o sujeto sino ms bien vistas de distintos lugares.
Son cuadros o fotogramas sin conexin alguna que
en este caso tienen la intencin de mostrar panormicas de lugares y personajes exticos al tiempo
que captan la atencin del navegante.
La secuencia de imgenes, la finalidad de stas,
est estrechamente relacionada con el texto aue
aparece a su izquierda, el cual es y sirve de ;lemento secundario de informacin 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
visualmenteagradable y econmicamenteinteresante. Por ultimo comentar que si observa el cdigo
-7 fuente de la ~ a i n aaue aparece
a la derecha ob.
servar que una de las imgenes aparece dos veces tal y como explcita el parmetro IMAGELIST.
En BG hemos es~ecificadoel color del fondo,. .Dues
sino nos hubiera salido el gris que aparece por defecto. El tiempo de presentacin se ha determinado
en 300 milisegundos. Bien ya podemos dar esta
pgina por finalizada por lo que no incluiremos una
2 seccin de proyectos.

--

. ,.-. -,
-... .

Figura 226.
Visores de Microsoft lnternet
Explorer respectivamente.

%-2

'
--

1 FwSI

-L .L --.

-!

m . .

m rxoticor

Diseando animaciones

...

a l g o sobre html

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&uacute;rnero uno en el mundo en viajes ex&oacute;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>

345

346

Webs con Photoshop


< I > <B> c FONT SIZE=5 COLOR= FFFFFF>Compru&eacute;belo
navegando por las p&aacute;ginas de nuestra Web donde
encontrardtaacute; el lugar que tanto ha so&ntilde;ado<ll> </B>
< P > <HR>
<IBODY> < I H T M L >

UNOS CUANTOS EJEMPLOS


El empleo de animaciones en la Web es muy variado y las formas y estrategias que se siguen son muy diversas. Veamos aqu un ejemplo representativo de
cmo y qu funciones puede cumplir una secuencia.

<. ..c. -'. >*,


--

- -

. ,--

.-

.r.:
"
. a

- -

11 -A

m
- ..

<

-- -

Figura 214.
Visores de Microsoft lnternet Explorer.
Softmaniapresenta una animacin que consiste en bajar y subir consecutivamenteuna caja,
la cual aparece enmarcada en la ilustracin.
Aqu se presenta una sntesis aunque est
constituida por 8 cuadros englobados en un
ciclo o secuencia que se repite sin cesar. Vemos que en el fondo aparece una frase que
posiblemente haga referencia a la caja, en es-. ,- ,.
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, estn implcitamente 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 vnculo, se ha incluido la frase Pulsar aqu.

<A> (etiqueta), 144,259,260,261,


300,311
ABSBOTTOM, 306
ABSMIDDLE, 306
ACO (extensin), 272
ACT (extensin), 272
Adam7 (opcin), 82
Adaptable (paleta), 55,60
Ajustar (submen), 119
Ajuste (comandos) 282,288
ALIGN (atributo), 127,206,
212,214,230,255,299,305,343
ALL, 306
ALT (atributo), 101,260,300
Animaciones GIF, 272,339
<APPLET> (etiqueta), 343
Applets (de Java), 336,343

<AREA>(etiqueta), 325,330
ARPA, 17
ATM,22

<B> (etiqueta), 305


Barra de herramientas (cmo
disearla), 265
<BASEFONT>(etiqueta), 311
BASELINE, 306
BG (opcin), 344
BGCOLOR (atributo), 107,128,
152,205,218
Bit, 35
Bitmaps, 36
Bytes, 35
BACKGROUND (atributo),
120,138,152

Webs con Photoshop


<BLINK> (etiqueta), 311
BLOCKQUOTE (atributo),
257,259
<BODY> (etiqueta), 108
BORDER (atributo), 100,128,
133,134,143,205,260,300
BORDERCOLOR (atributo),
205,218
BORDERCOLORDARK
(atributo), 205,218
BORDERCOLORLIGHT
(atributo), 205,218
BOTTOM, 306,343
<BR> (etiqueta), 216,257,259,
306

Calar (opcin), 111


Canal alfa, 52,147,296
Canal de textura, 203
Capacidad de canal, 46
Cel Assembler (programa), 337
CELLPADDING (atributo),
100, 128,205
CELLSPACING (atributo),
100, 128,205
CENTER, 305,306
<CENTER>(etiqueta), 306
CIRCLE, 325
CLASS (atributo), 233
CLEAR (atributo), 233,306
CODE (atributo), 343
CODEBASE (atributo), 343
COLOR (atributo), 305
Color frontal, 276
COLS (atributo), 133,142
COLSPAN (atributo), 221
Compresin LZ77,64
Compresin LZW, 57
Contornear (comando), 282

COORDS (atributo), 325,328,


330
Copiar (comando), 110
Corel (programa), 339
Correccin de color (comandos),
288
Cuentagotas (herramienta), 52,54

<DD> (etiqueta), 253


DEFAULT, 325
Definir motivo (opcin), 110, 150
Deflaccin, 64
Degradado (herramienta), 129
Descarga progresiva, 86
Director (programa), 336,338
Distorsin (filtros), 281
Distorsionar (submen), 291
<DT> (etiqueta), 253
Duotono, 92

Efectos de iluminacin (estilos),


203
Efecto distorsin de retardo, 46
Esponja (herramienta), 288
Ethernet, 21
Exacta (paleta), 55,60

FACE (atributo), 305


Firewall, 24
Flip-book, 337
Fondo mltiple (definicin), 139,
141

ndice analtico
cFONT> (etiqueta), 305
cFRAME>(etiqueta), 132,141,
142
cFRAMEBORDER>(etiqueta),
134,143
cFRAMETSET> (etiqueta), 133,
141,142
Freehand (programa), 339
FTP, 26,27

Gama de colores (comando), 297


GIF (formato), 33,49,50,131,
139,160,225, 272,337
GifBuilder, 337
GIF Movie Gear, 337
GIFs animados, 337,342
GIF89a (formato), 51,69,272,340
GIF89aExport (comando), 145,
146,272,340
Granulado (filtro), 115
Grietas (filtro), 115

...

cH1 Hn> (etiqueta), 144,305


Halos (opcin), 149
HEIGHT (atributo), 101,152,
255,299,343
Herramientas de seleccin, 167
Herramientas de trazados, 167
HotDog (programa), 336,337,338
cHR> (etiqueta), 222,230
HREF (atributo), 144,261,300,
311,323,327,330
HSPACE (atributo), 155,208,255,
300,343
HTTP, 26,27

cI> (etiqueta), 305


Illustrator (programa), 339
Imgenes activas, 322
cIMG> (etiqueta), 99,222,230,
255,259,260,299,306,322,326
IMAGELIST (opcin), 344
Internet, 17,19,23
Intranet, 18,23
IP, 18,19
ISMAP (atributo), 260,300,322,
326,328,330

Java, 336
JavaScript, 336,338
JPEG (formato), 33,49,61,63,
225,271,337,338
JPEG (compresin), 62
JUSTIFY, 305

Kilobyte, 45

LAN, 18,19,20
cLI> (etiqueta), 251
LEFT, 155,305,306,343
cLH> (etiqueta), 251
LOWSCR (atributo), 260,300

349

350

Webs c o n Photoshop

MAN, 21
<MAP>(etiqueta), 325,326,330
Mapa de bits, 36,37
Mapa de imagen (definicin), 139,
141
Mscara de texto (herramienta),
280
<MENU> (etiqueta), 252
MIDDLE, 306,343
MIME, 27
Mdems, 45
Modificar (submen), 167
Modo de capa, 288
Modo de color, 288
MOVE (opcin), 344

Pginas de contenido (definicin),


132,141
Pginas de marcos (definicin),
132,141
Paleta del sistema, 55,60
Paletas (tipos), 60
PARAM, 344
PAUSE (opcin), 344
Pegar (comando), 110
Picture Viewer (programa), 338
Pxel, 34
PNG, 33,49,163
POLY, 325
Posterizar, 94
Premiere (programa), 338
Profundidad de color, 56
Profundidad de pxeles, 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

Octeto, 35
<OL> (etiqueta), 251,253
OSI, 20

<P> (etiqueta), 144,257,259,305,


306

RECT, 325
Rellenar (comando), 281,282
Resolucin, 37
Resolucin de bits, 34
Resolucin del monitor, 43
RIGHT, 155,305,306,343
ROWS (atributo), 133,142
ROWSPAN (atributo), 221
Retales (filtro), 115
Routers, 20
RVA (modo), 273,274

ndice analtico

SCR (atributo), 132,222,230,


260,299,300
Seal analgica, 45
SHAPE (atributo), 325,330
Shockware (programa), 336
SIZE (atributo), 230,305,311
SMTP, 26,27
SNMP, 26
Sobreexponer (herramienta),
288
SPACING (atributo), 133,134,
142
Splines, 339
START (atributo), 254
Suavizado (Opcin), 54,149
<SUB> (etiqueta), 305
Subexponer (herramienta),
288
<SUP> (etiqueta), 305

Tabla de colores (comando), 156


<TABLE> (etiqueta), 126,166,
204,205
Tampn (herramienta), 110,151
TCP, 18,19
TCPDP (protocolo), 17,19,26
<TD> (etiqueta), 127,208,210
TELNET, 26
Teselas (filtro), 115
Texto (herramienta), 276
TEXTTOP, 306
Texturizar (filtro), 115
<TH> (etiqueta), 210
Tipos de luz, 204
TITLE (atributo), 267

TOP, 306,343
<TR> (etiqueta), 127,208,210
Tramados (tipos), 60
Transformacin libre (comando),
291
Transformar (submen), 291
Transparencia de capa, 52
TYPE (atributo), 253

<U> (etiqueta), 305


UDP, 26
<UL> (etiqueta), 251,257,259
Uniforme (paleta), 56,60
URL, 132,230,255,260,299,311,
327
USEMAP (atributo), 326,330

VALIGN (atributo), 127,214,


255,299
VALUE (atributo), 254,344
Varita (herramienta), 111
Vidriera (filtro), 115
Virajes, 92
VSPACE (atributo), 155,208,
255,300,343

WAN, 19,21
Web (paleta), 55,60
WIDTH (atributo), 101,127,152,
205,230,255,256,299,343

Este libro fue distribuido por cortesa de:

Para obtener tu propio acceso a lecturas y libros electrnicos ilimitados GRATIS


hoy mismo, visita:
http://espanol.Free-eBooks.net

Comparte este libro con todos y cada uno de tus amigos de forma automtica,
mediante la seleccin de cualquiera de las opciones de abajo:

Para mostrar tu agradecimiento al autor y ayudar a otros para tener


agradables experiencias de lectura y encontrar informacin valiosa,
estaremos muy agradecidos si
"publicas un comentario para este libro aqu".

INFORMACIN DE LOS DERECHOS DEL AUTOR


Free-eBooks.net respeta la propiedad intelectual de otros. Cuando los propietarios de los derechos de un libro envan su trabajo a Free-eBooks.net, nos estn dando permiso para distribuir dicho
material. A menos que se indique lo contrario en este libro, este permiso no se transmite a los dems. Por lo tanto, la redistribucin de este libro sn el permiso del propietario de los derechos, puede
constituir una infraccin a las leyes de propiedad intelectual. Si usted cree que su trabajo se ha utilizado de una manera que constituya una violacin a los derechos de autor, por favor, siga nuestras
Recomendaciones y Procedimiento de Reclamos de Violacin a Derechos de Autor como se ve en nuestras Condiciones de Servicio aqu:

http://espanol.free-ebooks.net/tos.html

You might also like