Aprende a crear efectos para Instagram Stories - EscuelaSM

Mira nuestros nuevos cursos 100% online

Aprende a crear efectos para Instagram Stories

Aprende a crear efectos para Instagram Stories
Efectos de Instagram -EscuelaSM

¿Te ha pasado que últimamente guardas todo efecto que encuentras en IG stories? Creeme que no eres el único. Estos filtros se han convertido en uno de los principales atractivos de Instagram y Facebook, ya que brinda la oportunidad de sobreponer una máscara a tu rostro en tiempo real. 

Entonces, ¿qué se necesita para crear filtros para la cámara de Facebook e Instagram? Solo instalar la aplicación Spark AR Studio que está disponible tanto para Android como para Mac. Aunque el proceso de creación de filtros no es extremadamente fácil, esta app hace que este procedimiento sea un poco más sencillo y esté al alcance de todos. 

¿Qué necesitas para hacer un efecto?

Instalar la aplicación Spark AR Studio que también está disponible en su versión móvil, para poder visualizar los efectos desde un smartphone. 

Dentro del app, encontrarás tutoriales que te permitirán aprender a crear los filtros, pero, nosotros te recomendamos iniciar con uno de los ocho ejemplos disponible para que te vayas familiarizando con las distintas herramientas. 

¿Cómo crear efectos que respondan al movimiento facial?

Desde la aplicación Spark AR Studio vamos a usar Patch Editor para:

  • Detectar movimientos faciales 
  • Desencadenar animaciones que respondan a movimientos faciales.

Los dos objetos en 3D que parecen ojos se moverán cuando la persona que usa el efecto alza sus cejas como en el ejemplo, a continuación:

Dentro del app

Para empezar, abre la versión prediseñada en la carpeta descargable que tenemos como ejemplo. Podrás observar una selección de algunos objetos en 3D del panel de escáner. En la etiqueta de viewport y el simulador, podrás observar como están quedando los elementos.

También usamos una forma de mezcla para distorsionar la cara y agregamos un efecto de retoque. 

Si quieres abrir el Patch Editor:

  • Dar click en el icono de la mesa de trabajo que está en la barra de herramientas.
  • Selecciona mostrar/ocultar Patch Editor.

El Patch Editor se abrirá en el fondo de la pantalla:

Detectando los movimientos faciales para los filtros

Queremos que la animación de los objetos 3D empiece cuando las cejas de los usuarios cambien de posición. Este cambio se detectará con una ruta que representará el rastreador de facciones. 

Puedes crear la ruta con los siguientes pasos para tus efectos:

  • Selecciona el rastreador de rostro en el panel.
  • Arrastralo al editor de ruta. 

Tres rutas serán creadas: 

Usaremos la tercera ruta, llamado facetraker. Enseguida conectamos la ruta hacia Face que es el puerto de salida en este ruta, para obtener la información de los movimientos de la cara. 

Si quieres detectar movimientos de la cara  como el levantamiento de las cejas, vamos a usar un parche de interacción denominado  eyebrows raised.

Para crear una interacción, debes dar click en Agregar Parche en el fondo del editor y te aparecerá el menú: 

Puedes encontrar la opción de identificar el levantamiento de cejas de la siguiente manera: 

1) Selecciona “interacción” 

2) Escoge “levantamiento de cejas” 

3) Click sobre “insertar parche”

Los parches que detectan el movimiento facial debe estar conectados al rastreador de rostro para funcionar adecuadamente. Entonces, conecta el puerto face dentro de facetracker0 para luego conectar al parche levantamiento de cejas. 

Animación de efectos

El siguiente paso es agregar los parches que desencadenaran la animación, cuando las cejas levantadas sean detectadas. Puedes usar pulsar patch para agregarlo a tu proyecto:

  • Dar click en agregar parches.
  • Selecciona “pulsar parche” desde el menú.
  • Dar click en “insertar parche”

Conecte el puerto sin nombre en el parche “levantamiento de cejas” al puerto de encendido/apagado en el parche “Pulse”.

De esta manera se verá tu gráfico:

El parche pulso, te enviará una señal hayas levantado las cejas. Este proyecto se conectará a la animación para desencadenar el efecto. 

Agregar los parches de animación 

Estos parches los usaremos para agregar el efecto a la animación y los parches de transición. Esto le indica al efecto que debe empezar la animación, cuando la señal haya sido dada. En este caso se trata del levantamiento de cejas.

Una vez que haya hecho eso, conecte el puerto “apagado” en el parche “pulse” al puerto “restablecer” en el parche “animación”. Esto restablecerá la animación cada vez que se levanten las cejas:

Rotación de ojos

Ahora que configuraste el desencadenante, así puedes empezar a construir las animaciones que rotaran con el efecto 3D. 

Vas a necesitar realizar esta acción por separado, una vez por cada ojo. 

Vamos a empezar por el ojo derecho.

Primero necesitas crear un parche representando la rotación en 4 mallas que cubren esa parte del ojo. Cada una está sobre un objeto diferente en el panel. Expande los objetos y cualquier objeto nulo debajo de ellos para encontrar la malla.

Cuando encuentre la malla, selecciónelas. Puede seleccionar toda la malla al mismo tiempo manteniendo presionado el comando en su teclado.

Expande: 

  1. eyes_3.dae –  y selecciona right_eyeAO.
  2. eyes_3.dae0 – y selecciona right_eyeBO.
  3. eyes_3.dae1 – y selecciona right_eyeCO.
  4. eyes_3.dae2 – y selecciona right_eyeDO.

Tú panel debe mostrarse de la siguiente manera:

En las configuraciones, dar click en la flecha que está al lado de la palabra rotación para agregar parches a tu proyecto.

Cuatro parches serán agregados:

Es momento de conectar:

  • La salida de progreso del parche de animación a la entrada de progreso en el parche de transición.
  • La salida de valor del parche de transición a la entrada de rotación 3D en cada uno de los parches que acaba de crear.

Así lucirá parte del gráfico

Antes de que esta parte del gráfico esté completa, necesitamos evaluar los valores del parche de transición. Esto va a configurar cómo se moverá la animación. 

Así es como la transfiguración se ve:

Básicamente haremos lo mismo para el ojo izquierdo. 

Ahora conecta: 

  • La salida de progreso del parche de animación a la entrada de progreso en el segundo parche de transición.
  • La salida de valor del parche de transición a la entrada de rotación 3D en cada uno de los parches que acabas de crear.

En el parche de transición cambia:

  • El valor Z junto a fin a 180.
  • La curva hacia la entrada cuadrática.

Ahora, ¡tus efectos están listos! 

Compartir

Posts recientes

Community manager

2 CONSEJOS IMPORTANTES PARA TODO COMMUNITY MANAGER

La mayoría de las veces el trabajo de un Community Manager está enfocado sólo en crear el contenido y su publicación, sus tareas se centran únicamente en desarrollar las publicaciones, definir sus horarios y llevarlas a cabo. Definitivamente la gestión de comunidades digitales, en redes sociales, se ha expandido y es un campo en crecimiento,

diseño

¡HABLEMOS DE LOS DISEÑADORES!

Diseñador, tu trabajo es mucho más que bocetos y cambios Un perfil profesional, operativo y estratega, dotado de criterio y grandes ideas, para darle soluciones gráficas a un problema, definitivamente tiene mucho valor. Va más allá de armar bocetos y gestionar solamente cambios y correcciones, se trata de una labor profesional con un propósito altamente

10 BLOGS DE MARKETING DIGITAL EN ESPAÑOL QUE DEBES SEGUIR

Hoy te traemos los mejores Blogs de Marketing Digital en español según nuestro criterio. Y es que definitivamente el Marketing Digital se ha convertido en la estrategia másimportante para casi todas las marcas a nivel mundial, esto gracias a su capacidadde brindarnos: Mayor efectividad Ganancias más progresivas Segmentación detallada Medición de resultados Estás son sólo

Suscríbete

¿Quieres vender
más en redes sociales?

hola!
Te gusta

nuestro contenido?

Suscríbete al newsletter

O busca el contenido de tu interés en nuestro sitio: