imagenes con movimiento

Fondo de pantalla animados

Las imágenes animadas incrustadas dentro de un gráfico SVG son una excelente opción para crear logotipos vectoriales o fondos de pantalla animados que se adapten perfectamente a cualquier tamaño sin perder calidad de imagen.

Optimiza tu sitio web con animaciones SVG personalizadas y adaptadas a tus necesidades.

Lo primero que haremos sera elegir el tamaño del logotipo sliders o presentaciones web.

Dentro de las acciones que tenemos que hacer para crear imágenes animadas son:

Lo primero que he pensado es poner una imagen de fondo que tenga la totalidad de nuestro espacio, previamente elegido el tamaño del svg animado.

Insertaremos la imagen para poner de fondo en vuestro gráfico svg, desde el menú principal. Se abrirá la opción de subir la imagen desde tu ordenador a nuestro servidor. Luego, manualmente podrás cambiar la dirección de donde se encuentre esa imagen.

Podemos deformar, mover, escalar la imagen de fondo para que se adapte al espacio. Lo haremos con la imagen seleccionada y con nuestro menú que sale a la derecha de la página web.

Es la hora de elegir las fotos animadas. Al igual que hemos hecho previamente, subiremos a nuestro escenario las fotos animadas.

Con la Estrella de movimiento, moveremos las imágenes en el escenario svg.

Añadiremos cuantas imágenes necesitemos. Lógicamente, necesitaremos imágenes con fondo transparente en formato PNG que acepte este tipo de transparencias para crear un gráfico SVG con muchas imágenes.

En otra entrada de blog enseñaremos cómo podemos animar dichas imágenes. En esta ocasión sólo he enseñado cómo agregar las imágenes a nuestro SVG. Si bien, desde el menú animaciones y con la imagen a animar, podemos crear varios puntos de animación y grabarla.

Desde nuestro creador de logotipos con imagenes, podemos descargarlo en varios tipos de formatos.

Por ahora, no tenemos habilitada la descarga en formato PNG en el collage de imágenes, así que deberemos descargarlo en formato SVG.

Una ventaja de un archivo SVG es que puede ser abierto en un editor de texto simple y ver las líneas de programación. También podemos modificar el texto de las imágenes animadas y que se vean reflejadas en pantalla.

Dentro del código que vemos al abrir el archivo svg algo parecido a esto.

• <svg width="800" height="800">
<image xlink:href="https://creadorlogos.com/imagenes/imagenesclientes/r10animacion-imagenes-fondo.jpg" width="640" height="640" x="0" y="0" </image>
</svg>