CREA TU PROPIO GIF CON EFECTO POP-UP | Tutorial After Effects #56

avatar
(Edited)

Feliz domingo. Es un placer estar con ustedes una vez más, queridos steemians. :)

Buenos días a toda la comunidad hispana. En esta ocasión les estaré enseñando, de forma básica y sencilla, cómo realizar un GIF con efecto «Pop-up» (conocido en español como «efecto de surgimiento»).

Esta es una de mis ediciones favoritas, por el concepto que transmite al espectador. Comunica Rapidez, profesionalismo, minimalismo y sencillez. Todo en una simple animación. ¡Espero les guste!



¿Qué necesitamos?


  • Necesitamos tener instalado After Effects.
  • Al final les dejaré el link de descarga.


    Proceso de creación:


    PARTE 1: Composición



  • Empezaremos creando una nueva composición.

  • En la ventana emergente modificaremos los valores de la composición.
  • En mí caso el tamaño es 700px x 400px, color negro.

    PARTE 2: Importar archivos

    Presionamos Archivo/Importar/Archivos...

  • Seleccionamos el logotipo y presionamos importar.
  • PARTE 3: Crear elipse

  • Presionando clic derecho sobre el área de trabajo.

  • Seleccionamos Nuevo/Capa de formas

    Le colocaré como nombre «Primer elipse».

    Desplegamos los valores de Agregar, seleccionamos Elipse y Relleno.

  • Seleccionamos la opción Relleno, cambiamos el color por Turquesa.
  • Teniendo seleccionado «Primer elipse», presionamos la letra "S".
  • Se abrirán los frames de escala.

  • Nos posicionamos en el (seg) 0.00, cambiamos Escala a 0.
  • Creamos un frame, presionando el símbolo del reloj.

  • Nos posicionamos en el (seg) 1.00, cambiamos Escala a 450.

  • Nos posicionamos en el (seg) 2.05, cambiamos Escala a 825.

  • Seleccionamos todos los fotogramas creados:

  • Presionamos clic derecho, Desaceleración/Aceleración suave o F9.

  • Abrimos los valores gráficos.

  • Movemos los puntos extremos hacia el centro.
  • PARTE 4: Crear segundo elipse

  • Teniendo seleccionada la capa «Primer elipse», presionamos ctrl + D.
  • Le colocaré como nombre «Segundo elipse».

  • Seleccionamos la opción Relleno, cambiamos el color por Blanco.

  • Teniendo seleccionado «Segundo elipse», presionamos la letra "S".
  • Se abrirán los frames de escala.

  • Eliminamos todos los frames, presionando la tecla delete.

  • Nos posicionamos en el (seg) 0.25, cambiamos Escala a 0.
  • Creamos un frame, presionando el símbolo del reloj.

  • Nos posicionamos en el (seg) 2.00, cambiamos Escala a 160.

  • Nos posicionamos en el (seg) 2.20, cambiamos Escala a 145.

  • Convertimos el elipse en un objeto 3D.
  • Presionando el símbolo del cubo.

  • Teniendo seleccionado «Segundo elipse», presionamos la letra "R".
  • Se abrirán los frames de rotación.

  • Nos posicionamos en el (seg) 2.20, cambiamos Rotación Y a -180°.
  • Creamos un frame, presionando el símbolo del reloj.

  • Nos posicionamos en el (seg) 3.05, cambiamos Rotación Y a 0°.

  • Seleccionamos los fotogramas creados:

  • Presionamos clic derecho, Desaceleración/Aceleración suave o F9.

  • Teniendo seleccionado «Segundo elipse», presionamos la letra "P".
  • Se abrirán los frames de posición.

  • Nos posicionamos en el (seg) 2.20, creamos un frame en Posición.
  • Presionando el símbolo del reloj.

  • Nos posicionamos en el (seg) 3.05, cambiamos Posición X a 200.

  • Seleccionamos los fotogramas creados:

  • Presionamos clic derecho, Desaceleración/Aceleración suave o F9.

  • Teniendo seleccionado «Segundo elipse», presionamos la letra "U".
  • Se abrirán todos los frames creados.

  • Seleccionamos todos los frames, presionamos ctrl + C.
  • Con este comando lo que haremos será copiarlos.

    PARTE 5: Agregar logotipo

  • Arrastramos nuestro logotipo importado hacía la mesa de trabajo.

  • Teniendo seleccionada la imagen «LOGO», presionamos ctrl + V.
  • Con este comando lo que haremos será pegarlos.

    PARTE 6: Crear línea

  • Creamos una capa de forma presionando la herramienta pen tool.

  • Al lado derecho de «capa de forma 1», desplegamos sus valores.

  • Desplegamos los valores de Agregar y seleccionamos Recortar trazados

  • Nos posicionamos en el (seg) 2.20, cambiamos Inicio a 0.
  • Creamos un frame, presionando el símbolo del reloj.

  • De igual forma creamos un frame en el valor Fin.
  • Presionando el símbolo del reloj también.

  • Nos posicionamos en el (seg) 3.05, cambiamos Inicio a 100.

  • Nos posicionamos en el (seg) 3.11, cambiamos Fin a 100.
  • PARTE 7: Añadir texto

  • Seleccionamos la herramienta rectangular en el apartado superior.

  • Creamos un rectángulo en la mesa de trabajo.

  • Seleccionamos nuestra herramienta de texto en el apartado superior.
  • Nos aseguramos que la fuente seleccionada sea Montserrat Bold.

  • Creamos un texto.
  • Tiene que estar ubicado dentro del rectángulo creado.

  • Teniendo seleccionado el texto, presionamos la letra "P".
  • Se abrirán los frames de posición.

  • Nos posicionamos en el (seg) 3.11, creamos un frame en Posición.
  • Presionando el símbolo del reloj.

  • Nos posicionamos en el (seg) 3.17, cambiamos Posición Y a 225.

  • Movemos el texto creado bajo «capa de forma 2».

  • Presionamos el texto, y en el apartado de Mate de seguimiento seleccionamos Alpha inverted matte para nuestra capa.

    PARTE 8: Zoom out

  • Presionando clic derecho sobre el área de trabajo.

  • Seleccionamos Nuevo/Capa de ajuste

  • Teniendo seleccionada «Capa de ajuste 1», presionamos la letra "S".
  • Se abrirán los frames de escala.

  • Nos posicionamos en el (seg) 3.17, creamos un frame en el valor Escala.
  • Presionando el símbolo del reloj.

  • Nos posicionamos en el (seg) 4.00, cambiamos Escala a 90.
  • PARTE 9: Exportar nuestro GIF

    Presionamos Composición/Añadir a cola de Adobe Media Encoder...

  • Nos aseguramos que el formato de salida sea en .gif animado, y le damos al botón de exportar.

  • Y éste es el resultado final:


    Hasta aquí el tutorial, espero les resulte útil. @rpcaceres se despide. ;)



    Logo usado:

    Descargá el material usado:



    Publicado desde mi blog personal, usando SteemPress : https://rpcaceres.000webhostapp.com/2019/11/crea-tu-propio-gif-con-efecto-pop-up-tutorial-after-effects-56



    0
    0
    0.000
    12 comments
    avatar

    ¡Recibe Nuestro Apoyo Directo!

    En el @Nucleo-fse estamos empeñados en acompañarte y facilitar tu experiencia Criptográfica.

    Estas invitado a formar parte del equipo y disfrutar de nuestros servicios.

    Curador: @byercatire

    Para más información, te esperamos en el Servidor de Discord: Núcleo- FSE

    0
    0
    0.000
    avatar

    Congratulations @rpcaceres! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

    You distributed more than 600 upvotes. Your next target is to reach 700 upvotes.

    You can view your badges on your Steem Board and compare to others on the Steem Ranking
    If you no longer want to receive notifications, reply to this comment with the word STOP

    To support your work, I also upvoted your post!

    Do not miss the last post from @steemitboard:

    SteemFest Meet The Stemians Contest - The mysterious rule revealed
    Vote for @Steemitboard as a witness to get one more award and increased upvotes!
    0
    0
    0.000
    avatar

    0
    0
    0.000
    avatar
    (Edited)

    Muchísimas gracias por el apoyo que me brindas, querido @velazquez.

    P.D. Estoy agradecido a millón con el equipo Cervantes.

    0
    0
    0.000
    avatar

    Colmena-Curie.jpg

    ¡Felicidades! Esta publicación obtuvo upvote y fue compartido por @la-colmena, un proyecto de Curación Manual para la comunidad hispana de Steemit que cuenta con el respaldo de @curie.

    Si te gusta el trabajo que hacemos, te invitamos a darle tu voto a este comentario y a votar como testigo por Curie.

    Si quieres saber más sobre nuestro proyecto, acompáñanos en Discord: La Colmena.


    0
    0
    0.000
    avatar
    Este post fue compartido en el canal #spanish-curation de la comunidad de curación Curation Collective y obtuvo upvote y resteem por la cuenta de la comunidad @c2-spanish después de su curación manual.
    This post was shared in the #spanish-curation channel in the Curation Collective Discord community for curators, and upvoted and resteemed by the @c2-spanish community account after manual review.
    @c-squared runs a community witness. Please consider using one of your witness votes on us here
    0
    0
    0.000
    avatar

    wowww me encantaaa, hazme una a miiiii!! jejeje

    0
    0
    0.000
    avatar

    Jeje. Me alegra mucho que te haya gustado amiga.

    De una colaboración @pinkgirl4 - @rpcaceres saldrían conceptos bastante interesantes. Tus ilustraciones les darían vida a mis GIF's. ;)

    Posted using Partiko Android

    0
    0
    0.000
    avatar

    Esta publicación ha sido seleccionada para el reporte de Curación Diaria.

    final de post.png¡¡¡Felicidades!!!

    0
    0
    0.000