TABLA DE CONTENIDO

Adobe Photoshop CS5

Mdulo 4 Herramientas de animacin, web y 3D

Animaciones ................................................................................................................................. 65
Guardar para web y dispositivos ........................................................................................... 66
Definir retardo de cuadro ........................................................................................................ 66
Cambio de las unidades de la lnea de tiempo (Photoshop Extended) .................. 67
Visualizar u ocultar lnea de tiempo ..................................................................................... 67
Diseo web .................................................................................................................................. 68
Diseo de plantilla ...................................................................................................................... 68
Herramientas en 3D ................................................................................................................... 74
 MDULO 4

Herramientas de Animacin, Web y 3D

Animaciones

Las animaciones son secuencias de imgenes o cuadros que se visualizan

en una lnea de tiempo, cada cuadro va variando ligeramente creando una
ilusin de movimiento cuando la secuencia de los cuadros se ven de
manera rpida.

En el men Ventana, animacin aparece una ventana en modo de cuadros,

mostrndolos en miniatura dentro de un panel que se encuentra en la parte
inferior de la ventana con las opciones para repetir, aadir, eliminar cuadros
y ver una vista preliminar de la animacin.

Panel de animacin

En el panel de animacin aparecen las opciones para configurar la

visualizacin del panel:

En el panel de animacin aparecen las opciones para configurar la

visualizacin del panel:

Permite ir al primer cuadro.

Selecciona el cuadro anterior.
Reproduce o detiene la animacin.
Desplaza al cuadro siguiente.
 Intercala los cuadros de animacin.
Duplica los cuadros que estn seleccionados.
Elimina los cuadros que estn seleccionados.

Guardar para web y dispositivos

Para ver la animacin es necesario guardar desde el men Archivo,

Guardar para Web y dispositivos y en la caja de dilogo se dejan las
opciones que estn por defecto verificando que est como tipo GIF y se
pueda Previsualizar, por ltimo Guardar.

Definir retardo de cuadro

Es posible definir el tiempo de retardo entre cuadro y cuadro, para hacerlo

es necesario ubicarse en el cuadro que se va a modificar el tiempo y en la
flecha negra donde se encuentra ubicado el tiempo actual y al hacer clic
despliega opciones en segundo o sin retardo, al hacer clic en las opciones
de Otro aparece una caja de dilogo en donde es posible personalizar el
tiempo de retardo en segundos y Ok.

Cambio de las unidades de la lnea de tiempo (Photoshop Extended)

Con Photoshop Extended, puede mostrar la lnea de tiempo del panel

Animacin en nmero de cuadros o en unidades de cdigo de tiempo.

Para seleccionar las unidades que se deseen mostrar, seleccionar

Opciones del panel en el men del panel Animacin y seleccionar
Nmeros de cuadros o Cdigo de tiempo.

Para alternar entre las unidades, pulsar <Alt> en la visualizacin del

tiempo actual en la esquina superior izquierda de la lnea de tiempo.

Visualizar u Ocultar lnea de tiempo

Para mostrar u ocultar la lnea de tiempo es necesario hacer clic en el icono

que se encuentra a la izquierda del panel de animacin.
Diseo Web

Diseo de plantilla

Para crea una plantilla en Photoshop CS5, adems de creatividad, se

necesitar utilizar varias de las herramientas vistas en los mdulos
anteriores ms otras que se vern a continuacin.

Lo primero que se debe hacer es crear una pgina con la configuracin

respectiva, en este caso, las medidas se trabajarn en pixeles y con una
resolucin preferiblemente de 72 pixeles/pulgada, Modo de color, RGB y el
contenido de fondo Blanco. Ver caja de dilogo.

En la pgina, se desbloquea la capa de fondo, dando doble clic sobre ella,

para empezar a trabajar.
Para empezar a disear la plantilla es importante tener claro el resultado a
obtener, por ello con la herramienta Marco rectangular se empiezan a
definir las reas tal y como quedar la distribucin de la pgina.
Cuando ya se ha definido el diseo de la plantilla, se empezar a reemplazar
los recuadros de los sectores por los contenidos que se dejarn en la
plantilla. Finalmente se guardar por el men Archivo, opcin Guardar para
Web y dispositivos con la extensin .html

Herramienta Sector

Se utiliza para definir las partes en las que se dividir una imagen al ser
guardada. Se activa haciendo clic sobre la herramienta sector y con ella
delimitando el rea en que ser partida la imagen.
Herramienta seleccionar sector

Permite editar, seleccionar y modificar los sectores. Estos se utilizan para

demarcar partes que sirven para el diseo de una plantilla en Photoshop
CS5. Se utiliza activando la herramienta y se selecciona el sector necesario
con clic. El sector quedar seleccionado para as poderlo editar o guardar
segn se requiera.
Puntos de seleccin del sector
Imgenes interactivas (Rollovers)

Las imgenes interactivas o Rollovers permitirn cambiar de una imagen a

otra modificando un poco su apariencia con solo activar la opcin
Animacin del men Ventana. Para crearlo, se deben seguir los siguientes
pasos:

Abrir un nuevo archivo con anchura de 720 por 939 de altura con fondo
blanco.
Colocar las fotos ordenadas por el men Archivo, opcin Colocar.

Ingresar por el men Ventana opcin Animacin.

 Identificar los fotogramas.

Cada capa es un Fotograma

Para aadir Fotogramas, se van a crear cuadros a partir de las capas.

 Clic aqu

Automticamente los fotogramas se acomodan en la lnea de tiempo del

cuadro de animacin.

Seleccionar los fotogramas para darle tiempo.

Se le dar 1 dcimo de segundo.

 Finalmente se debe hacer correr con Avanzar para ver cmo qued.

Guardar para web y dispositivos

Se ingresa por men Archivo y elegir la opcin Guardar para web y

dispositivos. Se exporta en modo Gif, en color Adaptable y se confirma que
est la cantidad de fotogramas, el tamao de salida y las opciones de
repeticin. Estas opciones se dejarn en Infinito.

Herramientas en 3D

Photoshop puede crear una serie de objetos en 3D utilizando como base 2D

en capas donde estos objetos se pueden mover, aadir, manejar
iluminacin o combinar entre capas, crear mallas, crear volumen a los
objetos, etc.

Para convertir capas de 2D, en postales 3D, hay que tener en cuenta que
cuando sea texto se convierta en capas 2D y en postales 3D (sobre planos
con propiedades 3D). Si la capa de inicio es una capa de texto, se pierden
todas las transparencias de las transparencias de la imagen.

Creacin de una postal 3D

Para crear una postal en 3D que cree una superficie que muestre sombras y
reflejos de otros objetos es necesario tener una imagen en 2D y luego
convertirla en 3D desde el men 3D, Nueva postal 3D.
Crear formas en 3D

De acuerdo al tipo de objeto que se seleccione, el modelo 3D puede

contener una o varias mallas, la opcin panorama esfrico asigna una
imagen panormica en el interior de una esfera 3D. Abrir una imagen 2D y
seleccionar la capa que se desee convertir en una forma 3D.

Para cambiar la forma es necesario desde el men 3D, la opcin Nueva

forma a partir de capa y entre las formas que despliega se encuentran
objetos con una nica malla como esfera o sombrero y objetos con varias
mallas como cono, cilindro o botella de vino.
Creacin de una malla 3D

La opcin Nueva malla a partir de escala de grises, lo que hace es convertir

una imagen que est en escala de grises a un mapa de profundidad que
maneja luminosidad, es decir los valores ms claros crean reas elevadas en
la superficie y los valores ms oscuros crean reas ms hundidas.

Si se desea, aunque esta recomendacin es opcional, se puede convertir la

imagen en escala de grises desde el men Imagen, Modo, escala de grises o
si se prefiere tambin se puede hacer desde Imagen, ajustes, blanco y
negro, si se quiere ajustar la conversin con precisin, si la imagen no se
convierte en escala de grises y se trabaja en un modo RGB el color verde es
el que se utiliza en la imagen para generar la profundidad.

Para crear una malla 3D es necesario tener la imagen y el men 3D, Nueva
malla a partir de escala de grises y se escoge alguna de las opciones que se
mencionan a continuacin:
La opcin Plano

Aplica datos de mapa de profundidad a una superficie plana.

Cilindro

Aplica datos de mapa de profundidad desde el centro de un eje vertical

hacia el exterior.
Esfera

Aplica datos de mapa de profundidad radialmente desde un punto central

hacia el exterior.

Photoshop crea una capa 3D que contiene la nueva malla. Tambin crea los
mapas de textura Difusin, Opacidad, y Mapa de profundidad plana para el
objeto 3D, utilizando la capa en color o en escala de grises original.

En cualquier momento se puede volver a abrir el mapa de profundidad

plana como un objeto inteligente y editarlo. Al guardar el archivo la malla
vuelve a crearse.

NOTA: El mapa de textura Opacidad no aparece en el panel Capas porque

dicho mapa usa el mismo archivo de textura que el mapa Difusin es decir
el de la capa original, cuando dos mapas de textura hacen referencia al
mismo archivo, ste aparece slo una vez en el panel Capas.