1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Tutorial para hacer Avantars Animados

Tema en 'Tutoriales Desarrollo Web' iniciado por Asgard, 21 Oct 2004.

  1. Asgard

    Asgard Nuevo usuario

    Acá va el Tutorial:
    Vamos a hacer avantares como estos...
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095311664.gif" border="0" alt="Imagen IPB" /><img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095312169.gif" border="0" alt="Imagen IPB" />
    Primero hacemos una imagen de 50x50 (ese usamos acá, pueden poner el que quieran!)
    Hacemos un fondo a gusto (eso queda en unstedes!)
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095313011.jpg" border="0" alt="Imagen IPB" />
    Ahora viene el texto... vamos a poner la inicial de nuestro nick o nombre con el font 'Crack Babies' bajado de <a href="http://dafont.com/en/search.php?nq=1&q=crack+babies&Submit=+Go+" target="_blank">acá</a>
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095313149.jpg" border="0" alt="Imagen IPB" />
    2. Se ve así? Ahora vasmo a darle el efeto cool! Vamos al blending effect y ponemos así! (el blending effect se pone haciendo doble click en el layer del tecto)
    Drop Shadow - Como veine
    Inner Shadow - Como viene
    Bevel and Emboss - Depth=1, Size=0, Soften=0
    Color Overlay- Usamos el color con el codigo '1E580A', sino lo conseguimos mirando un poko o tamndo el color!
    Stroke - 1px, Color=Black
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095313439.jpg" border="0" alt="Imagen IPB" />
    3. Ahora hacemos el nick con la letra 'Sevenet 7' bajado de <a href="http://www.aows.info/Media%20work/MaskedMarvel/Final%20Stuff/Amped%20Designs/home.html" target="_blank">acá</a>
    Otra vez a darle efecto
    Inner Shadow - Opacity 10
    Bevel and Emboss - Depth=1--, Size=0, Soften=0
    Color Overlay- Usamos el color con el codigo '1E580A', sino lo conseguimos mirando un poko o tamndo el color! (como antes)
    Stroke - 1px, Color=Black

    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095313597.jpg" border="0" alt="Imagen IPB" />
    4. Ahora seleccionamos el 'Lasso tool' y hacemos click derecho en la imagen 'Select All'
    5. Otra vez click derecho en con el 'Lasso tool' en la imagen y seleecionamos Stroke con la siguiente configuración...
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095313760.jpg" border="0" alt="Imagen IPB" />
    6. Repetimos el paso 5 solo que cambiamos le color negro por el '0B5E06' y el 'Width=2'
    7. Repetimos el paso 5 otra vez pero con el color negro y el 'Width=1'
    8. Ahora vamos a hacer la barra opaca... creamos un Layer nuevo.
    9. Seleccionamos 'Rectangular Marque Tool' y seleccionamos un pequeño rectangulo en la imagen.
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095313995.jpg" border="0" alt="Imagen IPB" />
    10. Edit>Fill, y usamos esta configuración.
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095314063.jpg" border="0" alt="Imagen IPB" />
    11. Ahora le hacemos un borde, hacemos zoom y seleccionamos con el 'Rectangular Marque Tool' un rectangulo de un pixel, así...
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095314219.jpg" border="0" alt="Imagen IPB" />
    12. APretamos Ctrl + D para deseleccionar y tenemos el avantar lsito para animar.
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095314353.jpg" border="0" alt="Imagen IPB" />
    Ahora Animación:

    1. File>Edit en Imageready o presionamos ctrl+shift+m
    2. Creamos un Layer nuevo.
    3. En este segundo layer ocn la herramienta 'Move Tool' movemos la parte opaca de la imagen hasta la parte inferior
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095314966.jpg" border="0" alt="Imagen IPB" />
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095315039.jpg" border="0" alt="Imagen IPB" />
    4. Ahora al lado del boton que usamos para crear el Layer, hay uno con tres circulitos... le damos a él para configurar la creación de layer's.
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095315061.jpg" border="0" alt="Imagen IPB" />
    5. Ahora tendremos los 15 frames anteriores...
    6. Otra vez volvemos a hacer el paso 4 pero le cambiamos el 'tween with' = first frame para crear los frames posteriores y así completar la animación.
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095311664.gif" border="0" alt="Imagen IPB" />
    Espero les sirva y entiendan... sino.. acá toy para respodner dudas!
    Se vemos[/url]
     
  2.  
  3. FaKu

    FaKu Nuevo usuario

    Muy bueno!! Gracias!!
     
  4. Asgard

    Asgard Nuevo usuario

    HOlas manolas!
    Acá tan mis Frankesteins Avantares! (juaz!)
    Osea, mis creaciones!
    <img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095219647.gif" border="0" alt="Imagen IPB" /><img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095219867.gif" border="0" alt="Imagen IPB" /><img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095220432.gif" border="0" alt="Imagen IPB" /><img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095220545.gif" border="0" alt="Imagen IPB" /><img src="http://hellsoft.insertcdr.com/Foros/uploads/post-386-1095220722.gif" border="0" alt="Imagen IPB" />
    SE vemos!
     
  5. davirero

    davirero Nuevo usuario

    Buen tutorial. Gracias Argals.
     
  6. Faraon

    Faraon Supremo Egipcio

    Me alegro que otro se anime en poner tutoriales animados :wink:

    Te felicito buen tuto :!:
     
  7. seek

    seek Nuevo usuario

    Muchas gracias por el tutorial Asgard.

    Saludos. :D
     
  8. tripiyon

    tripiyon Nuevo usuario

    Buen tutorial
    Un saludo
     
  9. Neo

    Neo Nuevo usuario

    gracias por el aporte Asgard, para tener en cuenta

    Saludos 8)
     
  10. photo-erik-shop

    photo-erik-shop Nuevo usuario

    Buenos aportes los que Hace Asgard.

    felicidades.

    slds.
     
  11. shopzero

    shopzero Kre@tivo Dmente ^-^

    :shock: :shock: :shock: Esta de lujo el tuto.... voy hacer el mio y lo culego aca....
     
  12. kitsch

    kitsch Nuevo usuario

    Muy bueno... muy bueno... muy bueno :wink:
     
  13. shopzero

    shopzero Kre@tivo Dmente ^-^

    :lol: :lol: :lol: Ya quedo listo.....

    <img src="http://img53.exs.cx/img53/2734/ZERO.gif" border="0" alt="Imagen IPB" />

    Esta chido el tuto y sencillito..... Gracias.' border='0' alt='Tutoriales y Articulos de Foro Creativo' />
     
  14. yipiie

    yipiie Nuevo usuario

    Hola soy nueva y torpe...lo siento pero intento seguir los pasos del tutorial y como no entiendo inglés pues nada...me he quedado con la " Y "
    en un cuadro de colores....jajajaja...

    si alguien puede por favor decidme que tengo que hacer para animar un gif. con la version 8.0.1

    muchas gracias

    PD- este foro es una pasada..... :wink:
     
  15. Asgard

    Asgard Nuevo usuario

    que problema, no?

    Holas manolas!!!
    Me encantariaa responder tus dudas.. pero no se cuales son, vos no entendes ingles y yo no entiendo tu post, que es lo de l Y que te quiedaste ahí!
    POrfis, respobdeme que te ayudooooooooo!!!
    Salu2 y espero tus preguntas
    Se vemos! :p
     
  16. Meta

    Meta Nuevo usuario

    Es un tutorial muy bien hecho. Mételo en la Web. AL verdad, vale la pena.
     
  17. Meta

    Meta Nuevo usuario

    ¿Puedes hacer otro de animación pero de otra tipo?
     
  18. Meta

    Meta Nuevo usuario

    Estoy intentando hacer el avatar y me travo.

    Ya que estamos en español, porqué no usas las explicaciones en español?

    No te cabrees pero me peleo mucho con el inglés.

    Dime que es un layer y donde lo saco. También el stroke que no se lo que es. Por el inglés me he quedado atascado.

    No te cabrees amigo, soy novato y estoy aprendiendo con ustedes el photoshop.

    Además la fuente no me carga.

    :wink: Hasta otra amigo.

    Editado:
    He averiguado algunas cosas como layer que significa capa con el power translator 8.

    Pero no traduce bien la palabra STROKE, que significa y donde está para elegir esa opción?
     
  19. seek

    seek Nuevo usuario

    Aunque yo tambien me clavo algo... Stroke no se lo que es, pero layer quiere decir capa.

    Saludos. :D
     
  20. photo-erik-shop

    photo-erik-shop Nuevo usuario

    Bueno Stroke yo lo entiendo como marcar los bordes por ejemplo al tener una seleccion..le doy.

    Menu Edit >>> Stroke y se marcan los bordes de la seleccion..

    Stroke esta bajo la opcion Fill ( rellenar ) por lo menos en el photoshop CS.

    slds.
     
  21. Meta

    Meta Nuevo usuario

    Vaya, pues mira, gracias por la ayuda pero como verás, le aveigué con un traductor ya al darme cuenta, ya habías respondido sin darme cuenta.

    Ahora sólo me fata que significa STROKE y donde saco esa opción.
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·