Cómo hacer girar una imagen en una página web

Escrito por katelyn kelley | Traducido por daniela laura arjones
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer girar una imagen en una página web
Rotar una imagen en un sitio web puede animar una página aburrida. (Jupiterimages/Creatas/Getty Images)

Rotar una imagen en un sitio web puede animar una página aburrida o llamar la atención sobre un área de la página web que quieres que los visitantes noten primero. Puedes girar una imagen fácilmente con un GIF animado, que es reconocido por todos los navegadores web modernos y utilizar una serie de fotogramas que se ejecutan en un bucle continuo para crear el movimiento del objeto. Sin embargo, ten en cuenta que el exceso de movimiento en una página puede ocupar y distraer a los visitantes. La imagen que deseas girar debería ser pequeña y tener un propósito específico.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Software de edición de gráficos con capacidades de animación de fotogramas
  • Software de edición de páginas web
  • Navegador Web

Lista completaMinimizar

Instrucciones

    Girar imágenes con un GIF animado

  1. 1

    Inicia el software de edición de gráficos. Para este artículo se usa el producto de gráficos Web Adobe Fireworks, pero muchos otros programas gráficos como Photoshop, Paint Shop Pro e incluso títulos de shareware pueden crear GIFs animados.

  2. 2

    Crea la imagen que deseas girar o abrir el archivo que lo contiene. Asegúrate de que la imagen tenga un contorno limpio y un fondo transparente.

  3. 3

    Haz una copia de la imagen (menú Edición--> "Duplicar") y gírala a la siguiente posición que deseas que tenga. Una de las animaciones más fáciles de hacer es una serie de giros de 90 grados, ya que sólo requiere de tres copias de la imagen. (Menú Modificar--> "Transformar"--> "Rotar 90 CW").

  4. 4

    Continúa duplicando y rotando la imagen original hasta que tengas una serie de imágenes que representan un movimiento circular a partir de la posición inicial y final de la imagen original.

    Cómo hacer girar una imagen en una página web
    Hacen falta cuatro imágenes para hacer un GIF animado de 90 grados. (Goodshoot/Goodshoot/Getty Images)
  5. 5

    Elige la opción "Seleccionar todo" en el menú Edición para seleccionar todas las imágenes. Para que la imagen que aparece gire, los duplicados necesitan estar en la misma posición de la pantalla como el original. Alínealos para que se ubiquen en la parte superior de uno al otro (menú Modificar--> "Alinear a la izquierda"--> "Alinear arriba").

  6. 6

    Abre la paleta de Fotogramas (en Fireworks está en el lado derecho de la pantalla con la paleta Historia). En este momento todas las imágenes están en el primer fotograma, el Fotograma 1.

    Cómo hacer girar una imagen en una página web
    Animación de GIF. (Jack Hollingsworth/Digital Vision/Getty Images)
  7. 7

    Añade un nuevo fotograma para cada imagen duplicada que hayas realizado. Para el ejemplo de la rotación de 90 grados, hay que añadir 3 nuevos fotogramas.

    Cómo hacer girar una imagen en una página web
    Hay que añadir otros 3 fotogramas para este ejemplo. (Creatas Images/Creatas/Getty Images)
  8. 8

    Haz clic en la etiqueta de fotograma 1 en la paleta de Fotogramas para volver a las imágenes y usando el menú Edición, haz clic, corta y pega cada una de las imágenes duplicadas en uno de los nuevos fotogramas, en el orden de la progresión de la rotación, hasta que esté la imagen del Fotograma 1.

  9. 9

    Haz clic en el botón "Reproducir" en la parte inferior de la ventana de la imagen para probar la animación. Si los fotogramas están fuera de servicio, haz clic y arrastra las etiquetas de fotogramas en la paleta para reordenarlas. Haz doble clic en la etiqueta de fotograma para cambiarle el nombre a algo más significativo, si quieres.

    Cómo hacer girar una imagen en una página web
    Animación. (Jupiterimages/Stockbyte/Getty Images)
  10. 10

    Ajusta la velocidad de la animación haciendo doble clic en la velocidad de cuadro a la derecha de la etiqueta de fotograma (por defecto es de 7/100 segundos).

  11. 11

    Comprueba que la configuración de la animación en bucle esté en "Para siempre" (en la parte inferior de la paleta de Fotogramas), para que se reproduzca continuamente.

  12. 12

    Quita cualquier área de fondo adicional alrededor de tus imágenes (Menú Modificar --> "Lienzo"--> "Recortar lienzo") para reducir el tamaño del archivo y, a continuación, guarda el archivo.

  13. 13

    Exporta tu imagen como un GIF animado (menú Archivo--> "Vista previa").

  14. 14

    Carga el archivo .gif en tu sitio web. A continuación, abre tu página web en tu editor de página web e inserta la imagen GIF o agrega una etiqueta IMG para hacer referencia a la nueva GIF y carga la página web en tu navegador web para probar.

Consejos y advertencias

  • Cuantos más fotogramas (e incrementos del movimiento más pequeños) haya en la animación, más suave será la rotación.
  • Mira el tamaño de tus archivos GIF al exportar para evitar gráficos hinchados que pueden hacer que tu página web se cargue más lentamente.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles