Tutorial Avatar animado

Tema en 'Acerca de...' comenzado por Maqui, 4/Mar/2014.

  1. Maqui

    Maqui Twee Pop

    Ingreso:
    17/Oct/2007
    Mensajes:
    3.847
    Aprovechando que se subió el límite para los avatares a 200 kb les traigo este pequeño tutorial para hacer un gif animado a partir de un video con photoshop.

    Empezamos abriendo Photoshop y nos vamos a archivo > importar > cuadros de video a capas...

    [​IMG]

    Navegamos hasta nuestro video, puede ser un archivo mov, avi, mpg, mpeg o mp4. Nos va a salir la siguiente imagen, tildamos solo rango seleccionado y en la linea de tiempo nos colocamos donde queremos que empiece el gif y presionando shift arrastramos el marcador hasta donde queramos que finalice. Recomiendo empezar un poco antes y terminar un poco después de la parte deseada. Usando la opción de limitar cuadros minimizamos la cantidad de cuadros por segundo, a mayor número menos cuadros tendrá el gif y menor será el peso del archivo. En este caso queda desactivado.

    [​IMG]

    Nos aseguramos de tener el panel de animación visible. Vamos a ventana > animación

    [​IMG]

    Una vez que podemos ver los cuadros, borramos los que sobren (por eso les dije que se pasen un poco al momento de seleccionar la parte que quieren). Apretando shift pueden seleccionar varios cuadros al mismo tiempo y dan click en el tacho de basura.

    [​IMG]

    Hacemos lo mismo con los cuadros del final. Si quieren pueden sacar alguna parte intermedia también. Recomiendo sacar los cuadros en donde dos fotogramas se superponen como muestra la imagen.

    [​IMG]

    Ahora cortamos la imagen a gusto. Para eso usamos la herramienta recortar (tecla C). Presionando shift hacemos un cuadrado y con alt+shift recortamos desde el centro. Presionando shift después de haber hecho una selección podemos mantener la proporción.

    [​IMG]

    Podemos previsualizar nuestro gif presionando play y ver si estamos conformes con la velocidad. Para modificar la velocidad seleccionamos todos los cuadros y hacemos click en el triángulo debajo de cualquier fotograma. Podemos elegir tiempos predeterminados o colocar uno a gusto, un valor entre 0,03 y 0,08 debería ser suficiente.

    [​IMG]

    Ahora vamos a archivo > guardar para web y dispositivos

    [​IMG]

    Y llegamos a la parte mas importante: la optimización del gif. En la parte 1 seleccionamos el tamaño final del archivo. En este caso colocamos 150 px el máximo para un avatar.

    La parte 2 es otro valor importante para el peso final del archivo. Nos permite elegir la cantidad de colores (una cantidad menor nos da un peso menor). También podemos habilitar el tramado (recomendado) y tipo de interpretación del color. Recomiendo jugar con estos valores hasta que estén conformes. Yo generalmente uso perceptual, con un porcentaje alto de tramado en difusión y 64 o 128 colores según la imagen.

    En la parte 3 podemos ver el peso aproximado que tendrá el archivo.

    [​IMG]

    Una vez que terminamos lo guardamos donde queramos. Y listo tenemos avatar nuevo!

    [​IMG]

    y este gif va de yapa.

    [​IMG]
     
    #1
    A M4C, polo, EdR y 3 otros les gusta esto.
  2. nicohvc

    nicohvc Moderador

    Ingreso:
    23/Dic/2006
    Mensajes:
    7.284
    Ubicación:
    Neo Kobe City
    Buen tuto Maqui!
     
    #2
  3. El Portador De Luz

    El Portador De Luz Vitalicio

    Ingreso:
    23/May/2003
    Mensajes:
    1.955
    Ubicación:
    Stormwind
  4. Gunth

    Gunth Tranquilo.

    Ingreso:
    18/Sep/2004
    Mensajes:
    1.818
    Muy buen tuto maqui, tenés alguno para mkv? :p
     
    #4
  5. EdR

    EdR Cuevino Milenario

    Ingreso:
    14/Ene/2005
    Mensajes:
    5.122
    Muy bueno!
    Ahora quiero que hagas otro tutorial con algún software libre para los que no podemos garpar una licencia de Photoshop.


    :rene:
     
    #5
  6. Maqui

    Maqui Twee Pop

    Ingreso:
    17/Oct/2007
    Mensajes:
    3.847
    No creo que haya algo que levante mkv, tendrías que exportar el pedacito de la película a mpg por ejemplo con Total Video Converter o alguno parecido. Yo uso Wondershare Video Converter.
    Garparle una licencia a Adobe?
    [​IMG]
     
    #6
  7. nicohvc

    nicohvc Moderador

    Ingreso:
    23/Dic/2006
    Mensajes:
    7.284
    Ubicación:
    Neo Kobe City
    A pedido de EDR un tuto de cómo hacerlo en GIMP. Software libre para todos y todas.


    [​IMG]


    Quise ver si se podía con lo que te viene y parece que no. Lo mejor es descargar este plugin llamado gap

    El rar viene con una carpeta que dice Installer, allí claramente está el archivo que necesitamos.
    Lo copian a la carpeta donde tienen instalado el Gimp y lo instalan.

    Una vez instalado, abren Gimp y te van al nuevo menú llamado Video. De allí a Split video into frames->extract videorange

    Donde dice Input video selection tenemos para buscar el video en el disco y elegir en qué fotograma arranca el gif y hasta cual otro.

    Una vez elegido el video si clickean Video Range pueden apreciar el video para escoger bien ese par de fotogramas iniciales y finales

    Audiotrack lo pasamos a 0 porque estamos haciendo un Gif ^^

    En output tildamos Create only one multiplayer image y con eso ya le damos aceptar.

    Ahora vamos Imagen -> Escalar para ajustarse a las medidas máximas del foro (150x150)

    Después nos dirigimos al menú archivo -> guardar como y le damos un nombre.gif

    Nos dirá "su imagen debería exportarse antes..." tildamos guardar como animación y luego click en exportar. Luego aparecerá otro cartel, verificar si sale tildado por defecto "repetir bucle" sino tildarlo uno mismo. Listo!

    Yo hice de prueba este. Intentando algo que más o menos represente la interacción abandon. Lo dejé en 150x150 pero pesa mega y medio todavía ^^ Habrá que pulirlo.

    [​IMG]


    PD: Un detalle. Claro que la mayoría de los videos son 16:9 o 4:3 mientras que el avatar máximo es cuadrado. Pueden dejar la proporción y tener un avatar más chico o modificar el gif.
    Si eligen lo segundo en el menú imagen-> ajustar lienzo lo acomodan a su gusto. No se preocupen por el tamaño de las capas porque al exportar te advierten que son más grandes, etc pero te las autorecorta al tamaño del lienzo.
     
    #7
    Última modificación: 9/Mar/2014
    A Tavo, M4C, Marco y 4 otros les gusta esto.
  8. EdR

    EdR Cuevino Milenario

    Ingreso:
    14/Ene/2005
    Mensajes:
    5.122
    Excelente nico!!! Gracias!
     
    #8
  9. Maqui

    Maqui Twee Pop

    Ingreso:
    17/Oct/2007
    Mensajes:
    3.847
    buenísimo Nico, mató el wonton fail.
     
    #9
  10. 5alv4

    5alv4 ※0※0※0※

    Ingreso:
    13/Jun/2006
    Mensajes:
    2.803
    Ubicación:
    0x66726565
    Sorry man! Este tutorial es solo para gente top, sabés? :afro:
     
    #10

Compartinos

Cargando...