Tuto:Efectos en tu nick del Avatar

22:16 22/08/2006
calas_baddog Usuari@ Chuunin	De nuevo calas pero esta vez con un tuto bastante completo que ha sido idea de squee. Aki les enseñare como poner tu nick en el avatar y aplicarle muxos efectos interesantes, para eso utilizaremos el avatar de squee, el cual con su autorizacion me lo brindo para que ustedes los usuarios NS vean como fue que el lo hizo. Estoy muy contento pk cada vez aparecen mas personas que quieren aprender. Ahh vuelvo y repito(que impertinente jejje), mis tutoriales no son para que lo hagan identico, es para que aprendan y experimenten. dejemos la muela como dicen aka en cuba y empezemos. "Aparecer y desaparecer el nick" 1. Abrir el avatar en el Image ready. 2. Ahora pondremos nuestro nick en el avatar con la herramienta texto que se puede seleccionar con la tecla (T) y escribimos nuesto nombre. 3.Les voy a enseñar como hacer ke el nick aparezca y desaparezca, para eso les enseñare un boton magico, jejejje, este boton crea la transicion de animacion de una forma a la otra, haber como me explico, si pones un frame con una imagen de transparencia 0 y pones otro frame con la misma imagen pero con transparencia 100, le das a este boton y le pones la duracion en frames de la transicion y se creara una animacion ke hace ke aparezca poco a poko la imagen. Se ke no entendieron muxo pk es un poko komplicado espero que se den cuenta por lo ke lo vamos a hacer a continuacion con el avatar de squee. En la ventana animacion le damos click a un nuevo frame como se ve aki. 4.Escogemos el frame 1 y y seleccionamos la capa de texto. le damos click derecho y en el menu ke sale desmarcamos la opcion "Propagate Frame 1 chnges" (esto es para ke los cambios ke hagamos en la capa del primer frame no repercutan en los demas frames) luego seleccionamos la opcion opacity y le damos un valor de 0%. Escogemos el frame 2 y le damos un valor de opacity a la capa de texto de 100%. deberia kedar asi. el frame 1 con el texto transaparente completamente, y el frame 2 con el texto completamente visible Frame1 Frame2 5. Escogemos el frame 1 y le damos al boton magico ke se encuentra en la ventana de animacion y se llama tween, el boton. 6. En la proxima ventana le daremos un valor de 5 a frames to add que es la kantidad de frames que se agregaran entre el primer frame y el segundo. 7.Como puedes ver ya se creo la animacion en la ke aparece el texto, para desaparecerlo es hacer algo similar, Selecciona el ultimo frame, creas un nuevo frame y le pones en la capa texto de ese frame el opacity a 0%, escoges el frame anterior a ese y le das al boton twen, luego Ok y el creara otra animacion en la ke desaparece el texto. Espero ke hayan entendido el uso del boton twen, ya ke este no solo trabaja con las transparecia, sino tmb con los efectos y los movimientos, es decir, si pones un frame con el texto a la izkierda y luego otro frame con el texto a la derecha y le das a tween al primer frame, este creara una animacion de movimiento del texto lo pillan. "Animar el brillo" 1. Para hacer esto trabajaremos en photoshop, la version cs2 que tmb tiene la herramienta de animacion, para pasar lo ke estamos haciendo en Image ready al Photoshop vamos al menu File >> Edit in Photoshop. 2. Para poder ver la ventana de animacion en el photoshop vamos al menu Windows >> Animation. 4.Nuestro proximo paso es escoger el frame 7 que es el ke mantiene el opacity del texto en 100%, vamos a la capa de texto, le damos click derecho y despues a blending options. Aki mismo seleccionamos la opcion gradient overlay, y lo dejemos como se ve a continuacion en la imagen Sin salir de esta opcion, vamos a arrastrar el brillo hacia la izkierda, hacemos esto para que el brillo se mueva desde la mizkierda a la derecha. Para arrastrarlo, sin salir de la opcion gradient overlay, nos dirigimos a la imagen y hacemos como si fueramos a mover el texto, y por consiguiente lo ke se movera, sera la posision del brillo. lo moveremos hasta ke kede asi. 3.Nuestro proximo paso es darle click al boton para crear un nuevo frame este frame es kien tendra la posision final del brillo, asi ke kon este frame seleccionado ke deberia ser el 8, vamos a la capa de texto, le damos click derecho y luego a Blending options. Vamos a la opcion gradient overlay ke ya se encuentra marcada, y sin tokar nada aki, arrastramos el brillo hacia la derecha como hicimos en el paso anterior. la imagen deberia kedar asi. 4. Ahora haremos la transicion, escogemos el frame 7 y le damos al boton tween que ya conocimos en el paso 5 de lo anterior. le damos OK a la ventana ke nos sale, y ya tenemos nuestra animacion del brillo. Recuerden que esto del tween lo pueden usar tanto para mover las capas de un lugar a otro, animar transformacion del blendig options, y otros. Los pasos esenciales son 1.Escoger el estado inicial ed la capa 2.Escoger el estado final de la capa 3.Darle al tween ke el se encargara de realizar la animacion entre el puto incial ye el final. Aki os dejo un ejemplo de este tipo de animacion

22:16 22/08/2006

15588

Usuari@
Chuunin

De nuevo calas pero esta vez con un tuto bastante completo que ha sido idea de squee. Aki les enseñare como poner tu nick en el avatar y aplicarle muxos efectos interesantes, para eso utilizaremos el avatar de squee, el cual con su autorizacion me lo brindo para que ustedes los usuarios NS vean como fue que el lo hizo. Estoy muy contento pk cada vez aparecen mas personas que quieren aprender. Ahh vuelvo y repito(que impertinente jejje), mis tutoriales no son para que lo hagan identico, es para que aprendan y experimenten. dejemos la muela como dicen aka en cuba y empezemos.

"Aparecer y desaparecer el nick"
1. Abrir el avatar en el Image ready.

2. Ahora pondremos nuestro nick en el avatar con la herramienta texto que se puede seleccionar con la tecla (T)

http://www.ecasa.hugetop.com/tuto5/1.gif

y escribimos nuesto nombre.

http://www.ecasa.hugetop.com/tuto5/2.gif

3.Les voy a enseñar como hacer ke el nick aparezca y desaparezca, para eso les enseñare un boton magico, jejejje, este boton crea la transicion de animacion de una forma a la otra, haber como me explico, si pones un frame con una imagen de transparencia 0 y pones otro frame con la misma imagen pero con transparencia 100, le das a este boton y le pones la duracion en frames de la transicion y se creara una animacion ke hace ke aparezca poco a poko la imagen. Se ke no entendieron muxo pk es un poko komplicado espero que se den cuenta por lo ke lo vamos a hacer a continuacion con el avatar de squee. En la ventana animacion le damos click a un nuevo frame como se ve aki.

http://www.ecasa.hugetop.com/tuto5/5.gif

4.Escogemos el frame 1 y y seleccionamos la capa de texto. le damos click derecho y en el menu ke sale desmarcamos la opcion "Propagate Frame 1 chnges" (esto es para ke los cambios ke hagamos en la capa del primer frame no repercutan en los demas frames)

http://www.ecasa.hugetop.com/tuto5/10.gif

luego seleccionamos la opcion opacity y le damos un valor de 0%. Escogemos el frame 2 y le damos un valor de opacity a la capa de texto de 100%. deberia kedar asi. el frame 1 con el texto transaparente completamente, y el frame 2 con el texto completamente visible
Frame1

http://www.ecasa.hugetop.com/tuto5/7.gif

Frame2

http://www.ecasa.hugetop.com/tuto5/8.gif

5. Escogemos el frame 1 y le damos al boton magico ke se encuentra en la ventana de animacion y se llama tween, el boton.

http://www.ecasa.hugetop.com/tuto5/6.gif

6. En la proxima ventana le daremos un valor de 5 a frames to add que es la kantidad de frames que se agregaran entre el primer frame y el segundo.

http://www.ecasa.hugetop.com/tuto5/9.gif

7.Como puedes ver ya se creo la animacion en la ke aparece el texto, para desaparecerlo es hacer algo similar, Selecciona el ultimo frame, creas un nuevo frame y le pones en la capa texto de ese frame el opacity a 0%, escoges el frame anterior a ese y le das al boton twen, luego Ok y el creara otra animacion en la ke desaparece el texto.
Espero ke hayan entendido el uso del boton twen, ya ke este no solo trabaja con las transparecia, sino tmb con los efectos y los movimientos, es decir, si pones un frame con el texto a la izkierda y luego otro frame con el texto a la derecha y le das a tween al primer frame, este creara una animacion de movimiento del texto lo pillan.

http://www.ecasa.hugetop.com/tuto5/final1.gif

"Animar el brillo"

1. Para hacer esto trabajaremos en photoshop, la version cs2 que tmb tiene la herramienta de animacion, para pasar lo ke estamos haciendo en Image ready al Photoshop vamos al menu File >> Edit in Photoshop.

2. Para poder ver la ventana de animacion en el photoshop vamos al menu Windows >> Animation.

4.Nuestro proximo paso es escoger el frame 7 que es el ke mantiene el opacity del texto en 100%, vamos a la capa de texto, le damos click derecho y despues a blending options. Aki mismo seleccionamos la opcion gradient overlay, y lo dejemos como se ve a continuacion en la imagen

http://www.ecasa.hugetop.com/tuto5/3.gif

Sin salir de esta opcion, vamos a arrastrar el brillo hacia la izkierda, hacemos esto para que el brillo se mueva desde la mizkierda a la derecha. Para arrastrarlo, sin salir de la opcion gradient overlay, nos dirigimos a la imagen y hacemos como si fueramos a mover el texto, y por consiguiente lo ke se movera, sera la posision del brillo. lo moveremos hasta ke kede asi.

http://www.ecasa.hugetop.com/tuto5/4.gif

3.Nuestro proximo paso es darle click al boton para crear un nuevo frame

http://www.ecasa.hugetop.com/tuto5/11.gif

este frame es kien tendra la posision final del brillo, asi ke kon este frame seleccionado ke deberia ser el 8, vamos a la capa de texto, le damos click derecho y luego a Blending options. Vamos a la opcion gradient overlay ke ya se encuentra marcada, y sin tokar nada aki, arrastramos el brillo hacia la derecha como hicimos en el paso anterior. la imagen deberia kedar asi.

http://www.ecasa.hugetop.com/tuto5/12.gif

4. Ahora haremos la transicion, escogemos el frame 7 y le damos al boton tween que ya conocimos en el paso 5 de lo anterior. le damos OK a la ventana ke nos sale, y ya tenemos nuestra animacion del brillo.

http://www.ecasa.hugetop.com/tuto5/final2.gif

Recuerden que esto del tween lo pueden usar tanto para mover las capas de un lugar a otro, animar transformacion del blendig options, y otros. Los pasos esenciales son
1.Escoger el estado inicial ed la capa
2.Escoger el estado final de la capa
3.Darle al tween ke el se encargara de realizar la animacion entre el puto incial ye el final.
Aki os dejo un ejemplo de este tipo de animacion

http://www.ecasa.hugetop.com/tuto5/example.gif

Páginas: [1] 2 3
#1 @ 22:21 22/08/2006
itachi_anbu_46 Usuari@ Akatsuki	mmm....interesante, muchas gracias
#2 @ 22:27 22/08/2006
squee Comandante Nivel: Jinchuuriki	Ok, genial el tutorial ^^. Conste que el avatar del tuto le hice yo, pero se lo pasé a calas para que hiciese el tuto .
#3 @ 22:30 22/08/2006
Naruto! Usuari@ Chuunin	Bastante complicado pero como siempre tus tutos estan muy completos ^^
#4 @ 00:10 23/08/2006
squee Comandante Nivel: Jinchuuriki	#3 No es muy complicado, yo aprendí hace 4 días en 15 mins o así con una explicación de Solrak-sensei, ponte con ello que es fácil ;).
#5 @ 00:15 23/08/2006
Solrak Admin Nivel: Kage	esq yo soy pro, pero no se me da bien hacer tutos xDDDDDD, de todos modos, genial calas, genial (alabanza) (alabanza)
#6 @ 02:38 23/08/2006
Naruto! Usuari@ Chuunin	Ok intentare es que me conecto 15 min nada mas los dias de semana por eso los fines de semana hize bastante avatares
#7 @ 10:48 23/08/2006
M4ng4k Usuari@ Nivel: Akatsuki	BN!! x fin un post asi!!! pero lo q me jode es q no se xq no puedo ver las imagenes!!!?? :_( :_( :_( ACIAS X CREAR UN TUTORIAL ASI!!!! (alabanza) (alabanza) (alabanza) (alabanza)
#8 @ 22:29 23/08/2006
Naruto! Usuari@ Chuunin	Tenias razon era muy facil pero lo malo es que no tengo el adobe photoshop cs2 y no puedo poner animation en el photoshop :_( :_( :_( :_( :_( y tuve que poner todo del adobe al image ready blabla y se me complico pero me quedo esto : Editado: lo hize del mismo modo pero con mas detenimiento ^^:
#9 @ 00:47 24/08/2006
Valandil-kun Usuari@ Chuunin	buaaaa :_( no se ven las imagenes ke ago yo sin imagenes??? jooo la verdad eske se entiende mas con imagenes ^^ Saludos
#10 @ 10:13 24/08/2006
sticker Usuari@ Chuunin	no es por nada pero no se ven las imagenes
#11 @ 15:28 24/08/2006
squee Comandante Nivel: Jinchuuriki	#10 Yo las veo... espérate a que se cargue la página completa ^^.
#12 @ 20:48 24/08/2006
calas_baddog Usuari@ Chuunin	Bueno, les digo ke las imagenes no se vein por la razon ke el servidor de addyour.net en donde las subo estubo tumbado por un time, pero no se preocupen ke ya volvioooo
#13 @ 22:28 24/08/2006
Naruto! Usuari@ Chuunin	Yo pase varios dias por aka y siempre se veian las imagenes
#14 @ 15:45 25/08/2006
itachi_anbu_46 Usuari@ Akatsuki	buenas, yo tengo un problema, cuando hago lo dewl brillo solo me lo salva en la 1ª imagen que pasa?
#15 @ 15:54 25/08/2006
squee Comandante Nivel: Jinchuuriki	Pues pasa que sólo se aplica el efecto al frame actual, al que está seleccionado. O bien lo haces antes de empezar a añadir frames para que al poner uno nuevo salga con el efecto, o bien copias el estilo de capa, en la ventana de capas, copiar estilo de capa, y frame por frame vas pegándolo en la misma capa ^^.
#16 @ 16:17 25/08/2006
sticker Usuari@ Chuunin	cuando doy a save optimizad as es decir al guardar lo voy a busar rn la carpeta en que lo he metido no se me va el nombre se me queda normal i corriente como la foto que tengo en el perfil
#17 @ 04:33 02/09/2006
Jiraiya_jd Usuari@ Nivel: Akatsuki	A lo mejor mi duda es muy básica......ehhh súper básica... pero como le pongo borde de diferente color a la letra? nu se si me explico >.< Salu2
#18 @ 05:04 02/09/2006
squee Comandante Nivel: Jinchuuriki	#17 Te explicas, es fácil si sabes dárselo a toda la palabra. Lo que tienes que hacer es una capa por letra y darles el borde por separado a cada capa, ya sabes, opciones de fusión -> trazo ^^.
#19 @ 20:57 03/09/2006
Deidara Usuari@ Chuunin	Ah me lleva mi explosion de C3... Por casualidad no saben que hice mal?? PD: Antes me salian las letras brillando pero se detenian cuando se acababa la animacion, ahora ni sale nada!! ¬¬ PD Edit 2: Ok.. me di cuenta que las letras brillan por un tiempo aproximado (1 a 3 segundos) pero cuando la subo a la web aparece como una imagen normal ¬¬ Me voy a matar.. yeh..
#20 @ 21:00 03/09/2006
sticker Usuari@ Chuunin	pon [url]lo de http i eso osea pegar[/url]pero sin asterisco
Páginas: [1] 2 3
Para poder comentar un hilo, por favor regístrate o si ya estás registrado, conéctate en el formulario de arriba a la izquierda.