|
★ SITIO60
|
|
Profile
![]() Affiliates
Friend
Friend
Friend
Layout credits
Codes by 16thday! |
Tutorial # 10
viernes, 28 de enero de 2011
15:43
Como realizar apartir de una imagen el efecto de una "ventana" abrir y cerrarse.De esto: A Esto: ![]() Ya saben... si tienen alguna duda o si necesitan que explique mas detalladamente algun paso, no duden en decirmelo!! Intento explicar este tuto lo mejor que puedo si alguien me entiende sera mi logro!! generalmente no me se explicar en tutos... 1.- Primero usaremos el photoshop (para aquellos que no tienen versiones CS3 o CS4)Abrimos un nuevo documento con las medidas que queramos. En este caso yo lo hare de 600x400 pixeles, por que asi puedo usarlo para icono, avatar, firma, blend, etc...Rellenamos de color negro el documento; Luego nos vamos a Filtro > Interpretar > Nubes de Diferencia. Ahora... Guarden el documento como .psd, que es como obviamente se guardara si es un archivo xD 2.-Abrimos nuestra imagen ya ajustada en el avatar... Yo usare al querido doctor House ![]() Creamos una nueva capa y con la herramienta Marco Rectangular seleccionamos la mitad de la imagen asi: ![]() Esa parte seleccionada la pintamos de cualquier color. Luego nos vamos a Capa > Estilos de Capa > Superposicion de Motivo (Elegimos el motivo que mas nos guste para nuestro trabajo)Por ahora tenemos nuestro avatar asi: ![]() 3.-Bien ahora lo que dara el efecto de "rasgado". Vamos a Filtro > Distorsionar > DesplazarSe abrira la siguiente ventana, yo he dejado asi la opciones como estan en la siguiente imagen ![]() Ahora busquemos en nuestros archivos el archivo .psd de Nubes de Diferencia, lo seleccionamos para abrirlo y tenemos el rasgado. ![]() Si quieren pueden agregarle a esa capa un trazo de color negro de 2 pixeles, en este caso asi lo hare yo... 4.-Duplicamos esa capa de rasgado. Vamor a Edicion > Transformar > Rotar 180 º y la acomodamos esa capa al lado contrario de la que hicimos primero asi... Y las movemos de la manera que quede asi: ![]() Si no tienen las versiones despues de CS2 (CS3 o CS4), guarden el archivo en .psd nuevamente.Animacion. 5.- Lo mas importante ya lo hicimos... Solo nos queda animar esas capas rasgadas, para eso... Si utilizamos Image Ready abrimos el archivo .psd con el avatar. Si usamos CS3 o CS4. Teniendo la ventana de animacion abierta.Duplicamos el cuadro de la imagen. ![]() Las capas rasgadas hay que moverlas; la de arriba la movemos un poco hacia abajo y asi mismo la de abajo la movemos solo un poco hacia arriba quedando asi: ![]() Esto lo hacemos hasta que la imagen de fondo quede oculta. Nota: Cada cuadro de animacion debe durar 0 segundos, asi como cada cuadro debemos darle a Intercalar y añadimos 2 cuadros por cada uno. Asi tendremos la casilla de animacion: Si deseamos agregamos texto o podemos dejarlo asi....Gurdamos la imagen en .gif y listo!! Animacion creada. ![]() Otros Ejemplos: ![]() Etiquetas: Tutoriales <- -> |