Professional Documents
Culture Documents
INTRODUCCION
..........................................................................11
Capitulo 1.
............
Captulo 2.
Captulo 3.
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.
Bapftulo 5.
Capitulo 6.
Capitulo T
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.
capitulo 9.
Capitulo
.
10.
DISENANDO ANIMACIONES...............................................................335
PROCEDENCIA DE LAS ANIMACIONES.......................................... 336
10
Apndice.
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.
14
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
u m m m m m m nm m m m m m m m m m m m n
APLICACIN
TRANSPORTE
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
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.
SISTEMA DE
TRANSMISI~N
Y--
Nodo de
conmutacin
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
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.
.....
.
.................
conexin TCPnP
Nodo o router
Firewall filtro de
acceso a usuarios
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
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.
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.
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.
29
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.
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.
Comunicacin de datos
interna de una red de redes y su conexin con redes de redes externas, con el fin
de proporcionar seguridad.
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.
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.
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.
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.
...
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
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.
37
38
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.
'
Figura 3.
Imagen, cuadro de
dilogo Tamao de
imagen y escritorio
de Photoshop.
39
40
-.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
dd sscritw,n
Menos
D R f ?
; j'
''
'.' .'; . Ms
......U .
:
,,............... .
640 por 480 pxdm
]
-
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
,:,:.
'-
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
1
Ms
1024 p a 768 p i d e s
34M'rJ
42
hay que
sabor...
1
1 pixair
~ I X ~ I S
11
Cancelar
Tamak de epresion
Anchura
11Et. ollr'lolt
r Mantener propnrcmn
R
( pixelr/prilgada
1 Bicubica
1]
I
I]
1
1
43
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,
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.
...
nota
Figura 8.
Visores de Microsoft
lnternet Explorer
respectivamente.
"
s.,
,
,
A
:
. -"
.F
47
48
Lrn
i
-
,'
-F
'm
. )*
..o
- .........&.A. 2-., ,-,-.,-.
i
F.d.
a'
,J
.+
...
Figura 9.
Visores de Microsot
lnternet Explorer
respectivamente.
. .
ni,
-,ilr,,.n
".--
<nI I . 4 ,
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.
..-,
-.
?-
<
"
, '
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
--
52
Consejo
...
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.
previs"zarl
~1 .~
.
II
. I I
53
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
e
l
;
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.
...
nota
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.
57
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
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-!
+,
Pll"*
En ambos casos las imgenes aparecen descentradas hacia la izquierda del monitor.
Probablemente la configuracin del monitor era de 1024 por 768 pxeles
1C
..
JPEG utiliza
t
Opciones de imagen
Cakdad
1
8
m
archivo qrande
archivo pepe60
L
I
Opcionos de formato
18-A
Guarda hayectoria
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
"
Formatos de archivo
81
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
nota
...
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.
?
83
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.
REDUCIR
ARCHIVO
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.
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
P
F
Figura 17.
Documentos
Photoshop y
cuadro
de dilogo
*
Tamao de imagen.
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
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.
89
90
"
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.
Figura 20.
Documentos
JPEG y PNG
de Photoshop
respectivamente.
91
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.
UUColores de superpuesto.
Figura 22.
Cuadro de dilogo
Opciones de duotono
y documentos JPEG
respectivamente.
(7
Figura 23.
Docilmento JPEG.
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.
T-o
1
Zatl.iraci6n:
I
,W
'
~.3ncelar
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,
<
Figura 25.
Visores de Microso lnternet Ex~lorer
respectivamente.
,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
98
Figura 28.
Visores de Microsoft lnternet Explorer
respectivamente.
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
;*
...---,-
"
-.?,
;
,,,
.,
..
-*.
.,
- *.
-
,J
>:
-. ,-.
. "-,'
'.
--
m"
Figura 30.
Visor de Microcoft lnternet Explorer.
nota
...
...
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:
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.
,,
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-
..*
.->
--
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 .
- ., 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-
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.
r HVP
Slol
1 ~~~l
C-.
Figura 35.
Paleta Color de Photoshop y
Calculadora de Windows 95.
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
<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
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
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
<BODY
...
nota
3
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
,09
-IUIX
,,)Figura 38.
,'
Documentos de Photoshop.
,,,
Documentos de Photoshop
y cuadro de dilogo Calar.
Cancelar
-,.
c.
lb
.,
..
112
.
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
@ u. &- @ ~ : % ~
,
l-
'.
,...
-.-..... . ..
,.
,.
-..
de unihn.
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
1'.
.i.
Figura 42.
Documentos de Photoshop
respectivamente.
Y1
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.
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.
- - --
-- --
- -- - -
Figura 43.
Documentos de Photoshop
respectivamente.
A-
,--
116
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,
117
118
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-"
.
, .
'
'
11
120
'7
4
...
a l g o sobre html
Para aplicar una imagen como fondo ha de especificarse del siguiente modo:
121
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
kta
:mcein
..
5":
;11
13p-ioncr
T a m R o de anlw
h
I
;
i
bn-trnn de kchads
r;-
ALIYU &hada
r"
L
23
LLn
rcm
Cargar..
1
1
Cancela
~atwacin-
Luminos@ad:
l
,
. ,
r Cglorear
R fievk~ializacin
Figura 53.
Documento de Photoshop.
Ai
.
.
e*
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
, ,
'---I
1
-- ,- -
-_-
O E
2.'
--
-- -
--
---
Figura 55.
Documentos de Photoshop.
- - --
--
r . t
Ci l.
..,,
125
B
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.
...
...
...
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>
127
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>
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..
--
AZS,I
1
1
130
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.
- -
- -
- --
131
- -
1
4
Nuevo
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.
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.
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-
%IrWrani~&
, @.lrlmg 8 3lwTng
i C~ndiinahing
) Ti'lirhni
, ctar szrage
, cC:ors
, ~ rloter!.
Knr
C ~ S ~ S
illrn
33
134
Webs c o n Photoshop
...
nota
...
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):
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.
135
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
- ...
i
i
_-
--
--
Y*L
_-
I-i-
<
+*?> r:
FBi-
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 -
I
.
.
,.
' 1
t,-..-
A
.,
.&
.>.
.. .,a
.,&.-*;
/'.
*Ui
,2
',
P.%*&
,.l..
?L.-
-.
.&e
,:?--
7."
-
.-
iI
.d.
YYll
.u,,
"-k,
-;"-".*
--
-'
'
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.
&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.
-'
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-
,,
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.
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
...
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):
-"+ #*. ,
143
I
A
nota...
Figura 69.
Visores de Microsoft lnternet Explorer.
L
.
...T
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- - -
-...
,.,-,
7.1-
,-*,.,=.,-.,-.n.".c
i.. >,
,h.
...-. ...L......................,.=...?
,.-., , d"..L . , .a
....C.
,Y.-
'-*cx-.?ri
.:
."..."...
.._.
-....-..........
. ,-.--., . ---
&.-~.=-tQ
,->-
"S
,v...
,.-,:
>
- 8
...
a l g o sobre html
146
1 m
Cargar
Figura 70.
Documento PSD y cuadro de dilogo
Opciones de exportar GIF89a.
Colores-
Transparencias en imgenes
47
m
1
Cataai
- -
[
-.
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.
..
'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-.
*,-
Elrv-ti 1
"3
I
l
P
Figura 74.
Cuadro de dilogo Opciones
de exportar GIF89a.
Friiril*
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
...
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,
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
,,
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
Canales
Traza
transparencia
_o
7
ia
...
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>
< HEAD>
<TITLE >
Transparencias en imgenes
53
r , . r ,
'
.<*
---.
cS
-.
:-&
-
- -
nota
Un mtodo eficaz para hacer coincidir las texturas consiste en
anadir un margen, ya sea de altura o anchura. segn sean las necesidades.
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
...
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.
156
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
Figura 81.
Cuadro de dilogo Cargar y paletas Muestras respectivamente.
Tamao de archivo
762 byles
* .X
158
Reemplazar muestras...
Guardar muestras...
~ o & e de ~
1 1
1 1
Y C ~ N O
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.
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---
mos incluir. Observe en la ilustracin inferior como el resultado es ptimo. Ambas partes aparecen sin haber sufrido alteraciones sustanciales.
<
- --
. --
59
160
...
Consejo
?
'
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.
,,,, 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.
162
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
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
...
. .- -
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. ..
,
-
--.-- -
'
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
'.
-*
21i
U~l<rn<',I
iI
. v
H*.
M"<.
'
Id."
aTn---
ppJ
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
Determinar
forma
Los marcos pueden tener formas diversas que podemos englobar en regulares e irregulares. Las primeras pueden obtenerse mediente la utilizacin de
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.
introducido ms acentuada
169
Destina
-
Documento:
Canal:
-
II
Fluwo
1cancelar
racin
juevo canal
+ 4 , ,,,,,
, , 12. , , ,
0:
I1
ii
S , , ,
,
-1
, , , a
I12, , , ,
# , , , m
il4
m
Figura 89.
Documentos PSE
Con la herramient;
Seleccin directa
hemos colocado,
ampliando la zona, '
cada nodo en la
posicin exacta.
-'
&
.;
1
!
-.e
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.
,,,
172
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-
173
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
.'
II
174
Cancela
lnR
@II
d* 'a liir
5ieeriot cquimrda
IR
175
176
Onda..
Ondas maimas...
-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.
193
Cristal...
-7
_i
1
+
J ioox
194
~nrrh-1acemados
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.
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...
Manchas...
I ~ i t m d a dde badt
,,
'
Color diiuido...
Esptula.,,
Esponid..,
Fresco ..
Lpiz de color...
Luz de nen...
Manchas...
P e I c d ' ~granulada...
Pinte'
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
Figura 105.
Submen Bosquejar
y cuadro de dilogo
Reticulacin y documento.
. . ,..
..
....,
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
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
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
'
hlfle
IRpxel~
A
,, ,, ,
L14u,, , , , ., 16,,
o a
l?, , . t u .l!.,
. . ,. ,, ll,Ld!,L
- ---
--
@
3
Figura 110.
Documentos PSD
respectivamente.
Consejo
199
...
Figura 111.
Submen interpretar, cuadro de
dialogo Efectos
de iluminacin y
documentos PSD.
Ncpativa 20
Posilivo
?
-a
lL
s1 L k r ~ ~
.-.
.,...,Y
u
,
,
,
,
i'!,
JiA
bre la superficie del marco. En el
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
/
hbnnte
mm
NegativaA
-23
Pos~hw
50
MoniaRosa
202
,-,,~adaspdares,
Cns,al,,.
Desplazar...
Encoger...
Esfefizar...
Luz difusd..
Molinete...
Onda...
Ondas rnarinas...
Proyectar...
Opciaies
lar
Cantidad
Zigzag.,.
.
m,,;
1
.
..o.ij 0
, ..
. ,
: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?
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.
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
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.
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',
"
Ir-----
I
.
,,.,, .i
. -..
A
mmentlNS-m-mPIPW\Ilv,IIT'S
cI. L , . ~ , ~
L
,.+
206
...
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 .
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
~ ~ K:;:?[ff
J T
,,L...
.:
--kl
-?..q
-.lT--
.--..:
dl!.
?.L
.jd
+
. F.?
-,
-7
1
---A
:77fi7
-E
*,L.
-1
.l
..-M
208
a l g o sobre html..
...
a l g o sobre html
,,,
21o
a
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
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'
a l g o sobre html..
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.
211
212
.+...
.,. .
-.;
-- E. -.w,.
(D-L^
r
.l .
.S
P.
En*
4-
5.
c?.,.
*u4-
:
-,A, ,2.
:
r-.
"
7
-*
raI",QImli4 S71IIP!rYfirlMPWB
fi-
.r
Figura 119.
Visores de Microsoft
lnternet Explorer.
&/?T,(:724y
*mit
. .*raww
Ii
..
,:
. . . .... ,,
3
.-&&T.
.F
.,--
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.
...
a l g o sobre html
>
<IHEAD>
,13
21 4
L..-,
"*+
En
y.
,-
b.
+,.
-; . 2
, A
- ,-1 . 4
2'
--m
'
J-
Figura 120.
Visores de Microsoft
lnternet Explorer.
'
,. .. ,.,...
---.
. .2
u-
.. ,
r,
WlAJCPCEiTIIM'T/T'H?7N'u
6~7* -: + J J ~ :m,
f3
T?-vdr
%?
...
nota
...
a l g o sobre html
<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
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
,._
"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>.
...
a l g o sobre html
217
21 8
L..-6
_.
-%
_..
-1
3'
"
I
-
m
l=Emm=
vvii
i11i
_ _..
.'
ui
- ,!
0,-rx+
rii
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
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.
...
I1
<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
..
a l g o sobre html.
,,
,+.
.- ,
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,+
..
...
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
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
223
Nombre 1 ~ 4 ~ ~ 4
Canceisr
Hesolucin.
Modo.
1600r pxels
1
5
71 pxeis
1 Coior RVA
1721 pxels/pulgada
Contenido
Blarico
(- COIN
de fondo
Traqarente
i,':
"'
Figura 124.
Cuadro de dilogo Nuevo y documento PCD.
' "
,,
.l.
' "
" '
'.
' "
7
" '
" '
'"
'"
' "
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.
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
Figura 127.
Documento PSD.
,,,
226
-,-
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
ornar
..............
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
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.
227
228
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.
DK
Cancelar
~revisualizacion
1 0 0 ~ B
-Radio:
15,8 ppixels
PSD respectivamente.
~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.
'
Consejo
...
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-
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
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 l g o sobre html
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
234
..
L._
. . .__
2-.:.;
--
:> 2.. : ?.
- -T.
i
.
--.
-'---
.-
0
,-S
-.
Figura 138.
Visores de Microsoft lnternet
Explorer respectivamente.
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
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.
;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
.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
..
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.
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
1 -
- I ~ I X (
n Al
N'.:-------\-
- .-l,,
_I
:)
....
".]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
.._
. _
239
240
- .-
Figura 145.
Documentos PSD, cuadro de dilogo
Modificar bordes y Texto.
.- - - - - - - - - - .
-- - - - - - - - - - - - - -
Y
5'
II
t]
en la forma diseada. Este elemento estar incluido junto con el anterior en la misma pgina Web. El color seleccionado est
lI
'
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-
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.
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
242
Figura 147.
Cuadro de dilogo
Cristal y documento
PSD.
Upc~onss
Distorsionar
(20
suaviia
Ll
Tsxtliia.
m-
Escala
I-00r:
G
lnvsrtir textura
.... 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 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
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(
Opciones
C:atitidad
Tarriao:
.
1
Figura 151.
Cuadros de dilogo Rizo y documentos PSD.
Cuadro de dilogo
Efectos de iluminacin
y documento PSD.
245
246
rl .I
I,
Figura 153.
Documentos PSD.
....i. 14 , , , ,
--iniXf
1
(4
Figura 154.
Submen Estilizar y
documentos PSD.
,,. "
'
-lalx
m
'
'
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.
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
Mxima
Ropiedades
1 Lwhe
Mate
.E7
Pilsy
58 Meialico
Malmial
Brillante
~ x p o s c i m ~LbO ~ ~
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.
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.
249
250
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
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.
..
<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, .
...
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
.
..
<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í sucesivamente
</UL>
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-*
'
<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.
a l g o sobre 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
...
a l g o sobre html
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).
259
261
...
a l g o sobre html
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;".'.,'-, . -.."+,
,
.?
\':,
-;
.,
9
<
'J
+-.
-.
>f
.?
.,..
- -.
L
-
'..
-
262
...
n l g o sobre html
>
A--
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.
...
a l g o sobre html
< 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>
263
264
a l g o sobre html.
..
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>
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
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
f'",
VI[>wn-wnnr e
,u,
'rv,*i
,, . , ::?i.TP
~.~M+VPI
-~
--
-..
266
a l g o sobre k m l .
..
< HTML>
<HEAD >
< TITLE > imagen vinculo </TITLE >
</HEAD>
...
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>
267
268
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
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.
Mostrar
P Fuente
Figura 170.
Cuadros de dilogo
Texto y Relieve
respectivamente y
documento PSD.
270
1 .
i 1i1
' D
11'
,1
'
. m .
14
16
IE:
-!?=a!-.L-
Figura 171.
Documentos PSD.
*,*
--- . . .>-
c,+
-.
,. '* : * * -'-- 2 -7
.
.
. . . .
..."*.
a
v.
.:
liii--
7..
Ir...
C D UNIVERSE
."n.,,.
7"#*OSY~"%#'
Figura 172.
Visores de Microsofi lnternet Explorer.
.",C'<
/ "..-,,
I"
.-
1 1 ,
.,.,,h.,..
T.
N.
(7.1.
rpl
:"<-
,-
.,
v.
-m
... .
""''zio/2,(7
1
, trn*>qlun
~
q
. ---. 3.191
L.
-,
m , ,
'
u--.
--..a.
.,$
...
.<.-
II..
$..*
*.nGii
,,
ori'p8
e-
Consejo
...
nota
...
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
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
,,,
Figura 174.
Documentos P SUr
y cuadros de dilogo Color indexacio
y Niveles respectivamente.
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.
- .
---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
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
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.
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-
* 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.
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.
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
.
J
-
INarmil
\I
100: Y
Opacidad
1-
Z U ~
M O ~ I ~ ~ C ~
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
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
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
S
Radio:
(
I
pixels
Figura 182.
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.
El valor de radic
introducido es dc
0,8 pxeles. Un
valor mayor nos
distorsiona la letra.
1 - 1
Cancelar
Al
-i'
: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
Efectos en el texto
28s
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
-.
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.
286
- , -
Figura 187.
Cuadro de dilogo
Efectos de iluminacin
, v documentos PSD.
-'ala
R Activar
R Pievisualiz.
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
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'
288
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.
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
Figura 192.
Paleta Capas y
289
290
]
C i p a r y Cmaln U Trazados
lTono
\ [ k\
. D .
1007
dad
/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.
--
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.
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
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
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-
Efectos en el texto
,93
100"
intidad
C~estar
A
(4
El"
Cancelar
+
J 100% J
-Cantidad
m-
m!!!
3
-
Modo: ~ o r m a l
Figura 197.
Cuadros de dilogo Esferizar
y Zigzag y documentos PSD.
\ =A:'
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
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
Efectos en el texto
29s
Figura 199.
Cuadros de dilogo Rizo, Trazos de spray, Plastificado y documentos PSD.
+
J 100% J
Opciones
Caritidad
-Tamao:
"*;r.Y y%.T.3PZi'
" 3 ;.
f..?
.\..,-,
;<
.. .:
.
'
*.:.d.:
' *
.W.'
T.,,.
i
.,
I.
.'.
Opcinnes
Lonpilud de trazo
rm
12
Radio
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
296
nota...
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
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.
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.
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).
MORFOLOGADEL
TEXTO
HTML
299
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>
301
302
<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>
Efectoseneltexto
Figura 204.
Visor de Microsoft
lnternet Explorer.
o.,-.
+
Y*
t.-?
y.
,.
!-M. %
'd
.
A
.
o,.?bF2.
G" :?- "2.,O:!,
c-m
"
a l g o sobre htm1.m.
La figura superior muestra la siguiente estructura:
+
<HTML>
<HEAD>
< TITLE> texto grafico<lTITLE:
<IHEAD>
<BODY BGCOLOR=6FCZF7>
<P>
<TABLE >
<TR> <TD ALIGN =CENTER> < I M G SCR=titulo.gif
HSPACE=5 VSPACE=5 ALIGN=CENTER> </TD>
<TD ALIGN=CENTER> <A HREF=/agencia/imagen.html>
<IMG SCR=texto l.gif ALT= Tour Turistic VSPACE =5
HSPACE=5 BORDER=O> </A> <lTD> <ITR>
<ITABLE>
<P> <HR> WIDHT= 100% SIZE= 15 ALIGN=CENTER
CLEAR=LEFT> < P >
< H I > <CENTER> <I> < B > <FONT COLOR=AS1821 >Somos
el número uno en el mundo en viajes exóticos
<ICENTER> <lI> <lB> < / H I >
303
.A.
EL TEXTO, ALGUNAS
ETIQUETAS Y ATRIBUTOS
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>.
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
305
...
...
...
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 l g o sobre html
308
<P><HR>
<P> TEXTO NORMAL <BIG> LETRA MÁS GRANDE
c/BIG> </FONT>
<P> TEXTO NORMAL <SMALL > LETRA MÁS
PEQUENA<ISMALL> </FONT>
<P>TEXTO NORMAL<EM > LETRA ENFATIZADA EN
CURlVAcIEM > <IFONT>
<P>TEXTO NORMAL<STRONG> LETRA ENFATIZADA EN
NEGRlLLA<ISTRONG> <IFONT>
<P >TEXTO NORMAL <CITE > LETRA PARA ENFATIZADA
U N A CITA EN EL TEXTOcISTRONG> <IFONT>
<P> TEXTO NORMAL< VAR> LETRA PARA ENFATIZADA
UNA VARIABLE EN EL TEXTO<IVAR> </FONT>
<lBODY>
<IHTML>
.-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~
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
309
31o
+
,--- +!.
- - --
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
a l g o sobre html.
..
<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ĺNEA BASE ALINEADA EN LA PARTE
SUPERIOR
<P> c I M G SCR=p4.jpg WIDTH= 13% HSPACE=3
ALlGN=MIDDLE>LĺNEA BASE ALINEADA EN
EL CENTRO
<P> <IMG SCR=p4.jpg WIDTH= 13% HSPACE=3
ALIGN =BOTTOM >Lĺ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
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
p:-
:y
...
a l g o sobre html
Efectos en el texto
Figura 209.
Visor de Microsoft
lnternet Explorer.
,
.
c
. c,un
i.
4.
L.%. -.
d
..
:.
O"-,
...
a l g o sobre html
h
.
.
313
314
<P><HR><P>
<CENTER> <I> <B> <FONT SIZE=5 COLOR=FFFFFF>
Bienvenidos a la galería angek Fuente donde
podrá encontrar una ajustada guía de todos
nuestros productos<ll> </B> <ICENTER>
Efectos en el texto
Figura 210.
visor de Microsofi
lnternet Explorer.
-+.
- 3 3 3 3&'4'7BliY
- 1
--
&*
1jruii
--
.-
..
co!n
rnr x
. -- ---
...
a l g o sobre html
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>
316
<HR ALIGN=CENTER>
<P>
<A HREF=viajes/nuevos tours.htrnl> <FONTCOLOR = FFFFFF>
<CENTER> NUEVOS TOURS</CENTER> </A>
<A HREF=/viajeslamérica del sur.html>
<FONTCOLOR=FFFFFF> <CENTER>AMÉRICA DEL
SUR</CENTER> </A>
<A HREF=lviajeslpolinesia.html> < FONTCOLOR= FFFFFF>
<CENTER>ISLAS DE LA POLlNESlA </CENTER> </A>
<A HREF=/viajes/arnérica central.html>
<FONTCOLOR= FFFFFF> <CENTER>AMÉRICA
CENTRAL</CENTER> </A>
<A HREF=/viajes/asia. htmI> < FONTCOLOR = FFFFFF>
<CENTER>ASIA</CENTER> </A>
<A HREF=/viajes/africa.html> <FONTCOLOR=FFFFFF>
< CENTER>Á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
C TITLE >vinculas
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
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.
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-
Figura 213.
Documento PSD
y paleta Capas.
F Preservar lransparincla
319
Webs c o n Photoshop
320
<m-
:.-
la
.-
.*
1--
..
.-
~.-
..
..
.-...
logotipo. Vemos un buen diseo general .:.'
..
E*-
- ..r - , ~ -.~ 3 , 2 - . . . - : , - ; ~ .
=. ,$
-'
..
". .
--**. --
L...
,Y
1-
.L-.:-_./-.
-,:
..
9
._,-<S+.
--
. 4 ?
m i .
z'
....-. . .
. .-..--.-...--.-.-.,-m
l.
.. a %
,
.
,
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.
323
...
a l g o sobre html
La sintaxis de una imagen activa es:
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
,.,
CIZ
i.uijec e~citien\
*.
d
7
324
...
a l g o sobre html
...
326
...
a l g o sobre html
nota...
- !.
327
E*.
_.A
'
c-,,"m
l. i fr..;.i
?-
.' -.
-*
-*.
.s.-.
,m.+
,!
* -,
-<.-
< i
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
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.
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,,,
. -.-
3
2t
*
--
'S*
m.
& ,A $2
--
algosobre html...
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
330
...
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
...
e,.,.
A "
-l.,t
Ir
:"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
..
.=
,. . .
E).
, -
--
:,
,.,
,..l, ,
.
.
Figura 221.
Visor de Microsofi
lnternet Explorer.
.&o
8
~-
'
~p
..,
L, ' * ~
''
YI*W
. - 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,,
!m
$[K(;
. ! 3.,
.'. 7, ,Y, .
GBigo sobre
html...
333
- - 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.--
--
I
l
nota
...
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
...
Ootn
...
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.
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.
nota...
+
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.
'
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.
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
342
--
m( Figura 225.
[ capas\
Y Canales \
1 b:
100%
a
pacidad:
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
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
345
346
- -
. ,--
.-
.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.
<AREA>(etiqueta), 325,330
ARPA, 17
ATM,22
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
...
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
Octeto, 35
<OL> (etiqueta), 251,253
OSI, 20
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
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
WAN, 19,21
Web (paleta), 55,60
WIDTH (atributo), 101,127,152,
205,230,255,256,299,343
Comparte este libro con todos y cada uno de tus amigos de forma automtica,
mediante la seleccin de cualquiera de las opciones de abajo:
http://espanol.free-ebooks.net/tos.html