Trucos
podrás configurar algunas
Crear imágenes para animar
Existen muchas aplica-
ciones con las que es posi-
ble crear animaciones para
Internet, algunas de ellas es-
pecíficas para eso. Pero em-
plear un programa de reto-
que fotográfico como Paint
Shop Pro o Photoshop (o,
más concretamente, sus
“complementos”orientados
al diseño web) permite “uni-
ficar”el trabajo.Así, con Ani-
mation Shop e Image Ready
se puede “partir de cero”, y
crear tú mismo las imáge-
nes que luego se “fundirán”
en la animación.
En estos trucos te ense-
ñamos precisamente eso, a
diseñar tu propio GIF ani-
mado usando Paint Shop
Pro. Para ello vamos a mos-
trate un ejemplo muy sen-
cillo, sin profundizar dema-
siado en el funcionamiento
de la aplicación, pero que
te servirá para aprender a
realizar todo tipo de imá-
genes en movimiento.
1
Lo primero es, desde
luego, que tengas una
idea clara acerca del efecto
que pretendes conseguir.En
este caso vamos a diseñar
una flecha que se desplace
de izquierda a derecha, y
pueda usarse para llamar la
atención sobre algún ele-
mento de la página.A conti-
64
de sus características. Por
ejemplo, modifica el tama-
ño de la imagen para ajus-
tarlo al que deseas .
Pincha encima de la flecha
y selecciona la entrada
para dotarla de fondo trans-
parente. De este modo, el
GIF usará en este caso co-
mo fondo el de la página en
la que lo coloques.
3
Cuando termines,aprie-
ta el botón . Con
ello verás la nueva imagen,
aún completamente “vacía”:
nuación pincha en el botón
,sitúa después el cur-
sor sobre
4
y luego también encima de
la línea y Pincha a la derecha so-
pulsa en para bre la herra-
abrir el programa: mienta Formas
2
Haz click encima Paint Shop Pro dispone de
del icono numerosas “plantillas” de
para crear un nuevo archi- formas geométricas, pero
vo.A través de la ventana para poder seleccionarlas
es necesario acceder a la
configuración de la herra-
mienta.Así que pulsa enci-
ma del menú y luego en
la línea . Pulsa en el menú
5
Busca en la lista que se
muestra la entrada
y pincha encima de ella pa-
ra que aparezca una marca
en el recuadro situado de-
lante:
Nº 127
6 Ahora podrás ver que
aparece una nueva ven-
tana en el área de trabajo de
la aplicación:
Haz click sobre la flecha pa-
ra que se despliegue la lis-
ta de formas:
Busca en ella los distintos
modelos de flechas
y selecciona el
adecuado para lo
que quieres:
7
Aún te que-
da algo por
hacer antes de
poner “manos a
la obra”. Pincha a
la derecha enci-
ma de
para escoger en
la ventana
el color que quieres usar pa-
ra rellenar la flecha,
por ejemplo
8
Para trabajar más có-
modamente, lo mejor
es crear una “plantilla” de la
flecha y luego irla modifi-
cando para crear cada uno
de los “fotogramas” de la
animación. Pulsa en la pa-
leta Capas encima de
para añadir una nueva capa:
9
A continuación, y con
la herramienta Formas
todavía seleccionada, pin-
cha encima de la
imagen y arrastra
para que se “pin-
te” la flecha:
Cuando ésta ten-
ga el tamaño de-
seado, suelta el
botón:
10
Haz click encima del
icono
y luego pincha den-
tro de la flecha
para rellenarla del color se-
leccionado:
11
y luego enci-
ma de la entrada llamada
. Pincha
sobre el icono
para crear una carpeta don-
de guardar tu trabajo, por
ejemplo .A con-
tinuación dale un nombre “gené-
rico” al fichero, , y, sin cam-
biar el formato de archivo por de-
15 En esta ocasión sí es ne-
cesario hacer cambios en
la posición de la flecha. Seleccio-
fecto, aprieta el botón . na la herramienta Mover

12
y úsala para desplazar la
Para crear el primer “fra- imagen un poco hacia la derecha:
me” no hace falta modifi-
car la plantilla.Abre el menú
coloca el cursor sobre la entrada
y haz ya click encima de
. Los “foto-
gramas” deben ser imágenes aco- Utiliza la cuadrícula como guía pa-
pladas. De otro modo, el progra- ra asegurarte de que no se mueva
ma de animación “se hará un lío” también verticalmente.

16
y tomará cada capa como si fuera
una imagen diferente. Repite los pasos 12 y 13 y

13
nombra al fichero nume-
Pulsa ahora sobre el menú rándolo de forma consecutiva, co-
y luego en la entra- mo por ejemplo: .

17
da . Esta vez dale al
archivo el nombre . Vuelve a llevar a cabo los
pasos 14, 15 y 16 hasta que

14 Los demás “frames” tam-

bién los harás partiendo
de la plantilla, así que ábrela pul-
termines de crear todas las imá-
genes que compondrán la se-
cuencia de al animación. En nues-
sando en y luego, al final de tro ejemplo, al final dispondrás de
la lista, encima de . diez archivos diferentes.

Diseñar un GIF animado

A partir del momento en que tie-
nes las imágenes, puedes seguir
varios caminos diferentes para ha-
cer la animación, ya que es posi-
ble usar distintas aplicaciones.
3 Ahora tienes que presionar en-
cima de la entrada llamada
y dirígete a la car-
peta en la que guardaste los ar-
chivos creados con Paint Shop

1 Si quieres seguir empleando

Paint Shop Pro, pulsa ahora en
, luego encima de la entra-
da y en la lista
que se despliega también sobre
para abrir
Animation Shop:
Pro.A conti-
nuación,
mantén
apretada es-
ta tecla y
ve haciendo
click sobre
los archivos
que vas a

2
emplear:
Pincha sobre el icono Una vez estén todos selecciona-
para que se muestre así dos, pincha sobre el botón y
el: . A menos a continuación en .
que desees modifi-
car algún paráme-
tro, como el tama-
ño de la imagen
deja las opciones
seleccionadas por
defecto tal y como
están y continúa
apretando encima
de en ésta
y en las tres si-
�

guientes ventanas.

Nº 127 65

4 Cuando aprietes enci-
ma del botón ,
una ventana te mostrará to-
das las imágenes en el or-
den en que aparecerán en
la “película”:
Puedes pinchar en el
icono
para comprobar que todo
“funciona” correctamente:
Crear un fondo de pantalla
Aunque es posible descar-
gar en Internet de forma gra-
tuita muchos fondos de pan-
talla,“lo suyo”es que,si estás
diseñando tu propia página,
también seas tú el que crees
la imagen para el fondo.
1
Un método muy senci-
llo “a la par que elegan-
te” es aprovechar alguna de
las imágenes que has in-
cluido en la página o un
motivo característico de és-
ta. Así que ejecuta Paint
Shop Pro tal y como te con-
tamos en el apartado “Dise-
ñar un GIF animado”y abre
una de las que empleaste en
el diseño de tu web, por
ejemplo ésta:
2
Muy probablemente se
trate de una imagen de
reducidas dimensiones, ya
que la has empleado en tu
web. De modo que tu pri-
mer trabajo será aumentar-
la de tamaño. Así que haz
click en el menú y
luego encima de la entrada
.Ya a conti-
nuación introduce un valor
adecuado para el tamaño de
pantalla al que se visualiza-
rá la página, por ejemplo
66
Trucos
5 6
Ya sólo queda guardar
el archivo. Para
ello haz click en ,
introduce un nombre, co-
mo por ejemplo , muestra un resumen de lo
y aprieta en . Ahora
unas serie de ventanas
te ofrecerán la posibilidad
No te preocupes por “re-
ventarla”, es decir, por el he-
cho de que no se vea bien
debido a su baja resolución.
Todavía no has terminado
de modificarla.
3
Ahora es el momento
de que dejes volar tu
imaginación y apliques todo
tipo de filtros a la imagen, a
ver cuál es el que produce
el efecto que más atractivo
te resulte. Si pinchas en
podrás ver todas las
categorías disponibles:
En nuestro ejemplo hemos
optado por uno de los fil-
tros artísticos. Sitúa el cur-
sor sobre y de que el texto debe resul-
pincha encima de .
4
Ahora, a través de esta
ventana
podrás modificar distintos
de optimizar el fichero an-
tes de colgarlo en Intenet.
Pulsa el botón has-
ta llegar a una pantalla que
que se tardará en descargar
la imagen en función de la
velocidad de conexión .
parámetros.“Toquetea” to-
do lo que desees hasta al-
canzar el efecto deseado.
5 6
Aprieta el botón
para ver el resultado:
Nº 127
Cuando hagas click en
, el nuevo archi-
vo se guardará en el disco:
Seguidamente, pincha en-
cima de la imagen para re-
llenarla de este color:
8
Ahora regresa a la pa-
leta capas y desplaza
lateralmente el control de
Parece que la imagen opacidad
todavía resulta un po- hasta que el grado de trans-
co oscura, ten en cuenta parencia de la capa blanca
que encima de ella van a co- sea el adecuado:
9
locarse más fotos, además
Cuando termines, haz
tar legible. No te preocu- click en , luego
pes. Dirígete a la paleta Ca- coloca ya el cursor sobre
pas y pincha en y pincha encima de
.
para añadir una nueva capa.
10 Finalmente, pulsa
en
nuación sobre
y a conti-
7
para guardar el archivo con
Ahora haz click encima el nombre
de esta herra- , ase-
mienta gurándote
y selecciona el co- de hacerlo
lor blanco en la pa- en formato
leta de estilos: JPEG.
�