En este tutorial, voy a crear un GIF de esfera animada simple que brilla y pulsa con luz para usar en la web. Con este tutorial, tendrá la oportunidad de ver lo fácil que es este proceso y realizar los ajustes necesarios para proyectos futuros.
Empiezo por elegir un nuevo documento en Photoshop, estableciendo mi ajuste preestablecido en Web. Voy a nombrar la mía Web Sphere.
Debajo de la herramienta Rectángulo, encontrará la herramienta Elipse. Elija el color de su esfera usando las muestras o el selector de color, luego, mientras mantiene presionada la tecla Mayús, haga clic y arrastre para crear un círculo. Haga doble clic en el nombre de la capa y cambie el nombre de esta capa Orb.
A continuación, cambiemos la apariencia de nuestra esfera agregando algunos efectos. Haga doble clic en la capa y elija resplandor interior. Debajo de la sección de estructura, haga doble clic en el cuadrado de color para abrir el selector de color. Aquí debe marcar la casilla Solo colores web. Elegí el blanco como mi color. A continuación, elija Centro de origen, aumente el tamaño aproximadamente a la mitad y cambie el rango a aproximadamente un 60%.
Ahora podemos agregar algo de sombra interior para crear profundidad. Aquí podemos cambiar nuestra opacidad de la predeterminada a aproximadamente el 35%. Pongo mi distancia en 5px y mi tamaño en 13px, pero puedes ajustar la tuya dependiendo del tamaño de tu esfera.
Ahora estamos llegando a alguna parte. A continuación, duplico la capa, de modo que tengo dos iguales. Esconde el primer Orbe, cambia el nombre del segundo Bright Orb, y en este haremos doble clic en el efecto de resplandor interior y aumentaremos su fuerza. Cambié mi tamaño a aproximadamente 1/3 ya que esto extendió la luz a una mayor distancia. En Filtro, Render, Destello de lente, elijo 85% para Brillo y dejé el tipo de lente Zoom de 50-300 mm, y coloco la luz cerca del centro de mi orbe.
Ahora estamos listos para animar. Asegúrese de tener abierto el panel de animación, vaya a Ventana y haga clic en Animación. En la parte inferior verá el panel de animación. En el extremo inferior derecho de este panel, queremos hacer clic en el botón que nos lleva a la animación cuadro por cuadro.
Comenzamos en el cuadro uno, por lo que queremos ver solo el Orbe original en este punto. Esconde el orbe brillante y muestra el orbe. Ahora, para agregar un marco, vamos a hacer clic una vez en el Marco 1 y luego hacer clic en el botón Duplicar el marco seleccionado.
Esto nos dará 2 cuadros con el mismo Orbe. Ahora, haga clic una vez en el cuadro 2 y oculte el Orbe original en su panel de capas y muestre el Orbe brillante. Una vez más vamos a hacer clic en el botón Duplicar fotograma seleccionado, y aquí vamos a ocultar el Orbe brillante y mostrar nuestro Orbe original. Esto nos dará los tres puntos de nuestra transición y creará un bonito efecto de bucle.
Aquí viene la parte fácil. Haga clic en el cuadro 1, mantenga presionada la tecla Mayús y haga clic en el cuadro 2 y haga clic en el botón Interpolación.
Aparecerá un cuadro de diálogo, y aquí seleccionamos cuántos fotogramas se van a interpolar. Elegí 5. Deje las otras configuraciones como están y presione Aceptar. Ahora, PS toma un fotograma y lo desvanece en el otro, pero eso no es lo que queremos. Queremos iluminar nuestro primer orbe en nuestro próximo orbe. Logro esto seleccionando cada fotograma entre nuestros dos fotogramas originales y aumentando la Opacidad de la capa Orb a 100. De esta manera, la Capa Bright Orb se superpone a la capa Orb original y hace que se ilumine, en lugar de simplemente desvanecerse.
Ahora hacemos lo mismo en los últimos 2 fotogramas seleccionándolos, interpolando y cambiando la opacidad de la capa Orb a 100, en efecto, invirtiendo nuestro efecto de iluminación. Asegúrese de establecer el tiempo en la parte inferior de cada cuadro en la cantidad de tiempo deseada entre los pasos, elegí 0,1 segundos.
¡Finalmente vamos a guardar nuestro archivo como un gif animado! Vaya al menú de archivo, seleccione Guardar para Web y dispositivos. Si es necesario aquí, puede modificar el tamaño de la imagen o cualquier otra cosa. Asegúrese de que el tipo sea GIF y haga clic en guardar. Hemos creado un gif animado de esfera web brillante muy simple para usar en su sitio web.