CÓMO HACER UN TEXTO DESLIZANTE TIPO <MARQUEE> - GIF EN PHOTOSHOP


PASOS A SEGUIR PARA SIMULAR UN MARQUEE


1. Crear un texto COMPLETO.


2. En la ventana Filtro vamos a Otros> Desplazamiento... (Figura 02).


photoshop-marquee-2

3. Rasterizamos (Convertimos en mapa de bits) la capa antes de continuar > OK (Figura 03).


photoshop-marquee-rasterizar

4. En la ventana Desplazamiento, escribimos "Horizontal: -5px" (en este ejemplo), si deseamos que el texto se desplace hacia la izquierda; Si el desplazamiento es hacia la "Derecha" eliminamos el signo menos (-). Damos OK (Figura 04).


photoshop-marquee-4

5. Guardamos la imagen en una carpeta desde Archivo > Guardarpara web con el nombre de marquee-2.


6. Vamos nuevamente a Filtro > Otros > Desplazamiento... y simplemente damos OK, pues ya habíamos determinado los -5px (Sólo dar OK) .

Guardamos esta otra imagen con el nombre de marquee-3.


Repetimos el paso 6: desplazar y guardar, dando un número diferente a cada cuadro, hasta rotar completamente el texto (En el ejemplo se han guardado 34 cuadros).


7. Al finalizar de mover el texto, en la parte de arriba, abrimos Ventana > Animación; seleccionamos el tiempo de retardo de los cuadros (Pestaña 1 seg) y definimos, por ejemplo, 0,5 (Medio segundo).


Podemos seleccionar la cantidad de veces de repetición del movimiento del texto desde la pestaña Infinito que se encuentra debajo del tiempo de retardo de los cuadros (seg).


Damos click en el botón boton-opciones de la derecha de la ventana de Animación para configurar más opciones (Figura 07).


Definir opciones de Animación - Marquee de Texto

8. Click en Cuadro nuevo. Las demás opciones deben quedar deshabilitadas (Sin marcar).

Aparecen ahora dos cuadros iguales en la ventana de Animación (Figura 08).


Crear Cuadro Nuevo para Animación

9. Vamos a la ventana de Capas (Derecha) y damos click sobre los dos ojos Visibilidad de Capa que indican la visibilidad de las capas para que desaparezcan del cuadro 2 de la Animación.

Nos quedan entonces, el cuadro 1 con la imagen de fondo y el cuadro 2 vacío (Figura 09).


photoshop-marquee

10. Para llenar el cuadro 2 de la animación, vamos a Archivo > Colocar y buscamos la carpeta que contiene el marquee-2; lo seleccionamos y damos "Colocar" (O doble click sobre la imagen) para que se ubique en la animación.


Damos Enter (en el teclado) para que se fije la imagen en Photoshop o doble click sobre el banner (Figura 10).


Colocar Capa en Animación

11. Hacemos lo mismo para colocar el marquee-3 y el resto de cuadros (... marquee-34): click en el botón boton-opciones de opciones de la ventana de Animación > Crear nuevo cuadro; en Capas > click en los ojos Visibilidad de Capa de Visibilidad; Ir a Archivo > Colocar > Seleccionar el cuadro en la carpeta > Colocar y Enter (Figura 11).


photoshop-marquee-11

12. Para ver el texto en movimiento, damos click en el botón Play photoshop-boton-play de la ventana de Animación.


Podemos cambiar la velocidad de la animación, cuadro por cuadro, con valores diferentes según la necesidad; También podemos hacer la animación letra por letra, pero siempre empezando con el texto completo; centrarlo e ir borrando uno por uno los caracteres al tiempo que los vamos guardando en una carpeta.

El deslizamiento del texto (Marquee) se puede hacer también de manera VERTICAL desde la ventana de Desplazamiento o Combinado (Horizontal-Vertical), para mover el texto sobre diferentes puntos del banner (Figura 12).


photoshop-marquee-vertical-12

Para deshacer una acción ir a Edición > Paso atrás.


13. Vamos a Archivo > Guardar para web ("Guardar optimizada como...") > Optimizada (Pestaña superior) > Gif > Selectiva > Guardar y seleccionamos la carpeta para guardar el GIF.

Se debe guardar en Formato GIF - Selectiva ya que es una animación (En otro formato no funcionará - Photoshop).


Podemos adaptar el siguiente video para crear un "Texto Marquee". En él se explica otra manera de hacer un gif, con la ayuda de imageready (1K) Adobe ImageReady.

Luego de duplicar las capas (en el video), vamos a Filtro > Otros > Desplazamiento... y simplemente damos OK.


Este gif de texto es muy útil para reemplazar o simular un <marquee> y validar la página sin problemas en W3C; funciona con todos los navegadores:


Marquee - Texto Deslizante
Tutoriales Photoshop

Cómo crear marquees - marquesinas utilizando Adobe Photoshop