Animación gif: efecto de barrido
animación gif: efecto de barrido
Michael Baumgardt
Michael Baumgardt es el autor más conocido y respetado de Alemania sobre diseño web y autoedición. Con más de 17 libros publicados en Alemania y Estados Unidos, es uno de los más expertos en su campo y su libro diseño web con Adobe Photoshop se considera el mejor sobre el tema. Se ha traducido y publicado en todo el mundo. Muchas de las técnicas que ha desarrollado las utilizan hoy en día los diseñadores web y se han hecho hueco en Adobe Photoshop.
¿Desea crear un anuncio de titular que atraiga la atención del público? Una de las formas más sencillas de hacerlo consiste en realizar un barrido entre dos imágenes. Con esta técnica, el tamaño del archivo no mucho mayor que si cambia simplemente las imágenes.
https://www.foro3d.com/extras/tutori...cos_img_64.jpg
1. Crea un conjunto de capas.
Para que esta técnica funcione, todas las capas deben estar en conjuntos de capas. Para cada efecto de barrido se necesita un conjunto de capas. Si desea volver a la primera imagen, debe copiar el primer conjunto de capas mediante el comando duplicar conjunto de capas del menú emergente de la paleta capas.
https://www.foro3d.com/extras/tutori...cos_img_65.jpg
2. Añada máscaras de capa.
Cada uno de los conjuntos de capas (excepto el de más abajo) debe tener una máscara de capa. Seleccione el conjunto de capas y haga clic en el icono de máscara de capa situado en la parte inferior de la paleta capas.
https://www.foro3d.com/extras/tutori...cos_img_66.jpg
3. Desenlace las máscaras de capa.
El truco de crear un efecto de barrido consiste en animar la máscara de capa independientemente del contenido. Para eso, la máscara de capa y la capa deben desenlazarse haciendo clic en el icono de cadena que hay entre ambas.
https://www.foro3d.com/extras/tutori...cos_img_67.jpg
4. Rellene la primera máscara de capa.
El primer paso consiste en hacer que las capas sean transparentes rellenando la máscara de capa de 100% negro para enmascarar por completo el contenido. Comience con la capa superior (para poder seguir lo que ocurre) y seleccione la máscara de capa haciendo clic en ella. A continuación, rellénela con la herramienta bote de pintura o mediante edición > rellenar.
https://www.foro3d.com/extras/tutori...cos_img_68.jpg
5. Rellene la segunda máscara de capa.
Seleccione la segunda máscara de capa y rellénela de negro. Ahora la capa inferior debe estar visible, ya que los dos conjuntos de capas de encima tienen máscaras de capa transparentes. Abra la paleta animación (ventana > animación) y cree un nuevo cuadro en la paleta. Es importante que deje el segundo cuadro de la paleta animación activo antes de continuar con el siguiente paso. Si no está activo, haga clic en él y continúe con el siguiente paso.
6. Anime la máscara de capa.
Haga clic en la máscara de capa del segundo conjunto de capas (en este ejemplo el del centro) y cambie a la herramienta mover de la paleta herramientas. Ahora puede mover la máscara de capa mientras mantiene pulsada la tecla mayúscula (para limitarla a un movimiento horizontal) o, incluso más fácil, mantenga pulsada la tecla mayúscula y pulse la tecla de flecha derecha hasta que la máscara de capa se desplace hasta el extremo derecho.
https://www.foro3d.com/extras/tutori...cos_img_69.jpg
7. Mueva la segunda máscara de capa.
Con el último cuadro (de la ventana animación) seleccionado, cree dos cuadros clave adicionales haciendo clic en el icono cuadro nuevo de la parte inferior de la paleta animación. Seleccione el último cuadro antes de continuar y, a continuación, seleccione la máscara de la capa superior en la paleta capas. De nuevo, cambie a la herramienta mover y utilice la tecla de flecha para mover la máscara hacia la derecha. Durante el proceso la capa inferior se volverá gradualmente visible.
https://www.foro3d.com/extras/tutori...cos_img_70.jpg
8. Intercale los cuadros clave.
Para crear la animación debe crear cuadros entre los cuadros. Esto se realiza con el comando intercalar, que insertara automáticamente los cuadros. Seleccione los dos primeros cuadros y elija el comando intercalar del menú emergente de la paleta. Se puede insertar cualquier número de cuadros, pero en general debe haber entre 10 y 20 cuadros.
https://www.foro3d.com/extras/tutori...cos_img_71.jpg
9. Intercale los dos últimos cuadros clave.
Seleccione los dos últimos cuadros clave y repita el mismo procedimiento. De esta forma se completará la repetición. Si desea que la animación se repita continuamente, asegúrese de que esté seleccionada la opción infinita de la paleta animación.
https://www.foro3d.com/extras/tutori...cos_img_72.jpg
10. Defina el retardo y ejecute la animación.
Es probable que dese detener un poco la animación después de cada efecto de barrido. Seleccione el último cuadro después de que se haya completado el barrido y cambie el retardo a 2 segundos. A continuación, seleccione el último cuadro de la animación y defínalo también en 2 segundos. Para previsualizar la animación, haga clic en el botón reproducir. Es mejor previsualizarla en el navegador pulsando el botón previsualizar del navegador en la paleta herramientas, ya que sólo así podrá hacerse una idea de la rapidez con la que se reproduce la animación.
https://www.foro3d.com/extras/tutori...cos_img_73.jpg
En estas páginas, expertos de Photoshop en fotografía, diseño gráfico, vídeo y diseño web comparten algunos de sus consejos favoritos. Para ver más consejos de Adobe Photoshop y Adobe imageready, visite el centro de especialistas de Photoshop.
