Technology

How I used AI to convert Hero Images to Videos for a Website


I stumbled across something really interesting recently I found that AI can convert images into video content using something called Runway and I thought wait a second would AI videos work for websites I thought I’d give it a try so I decided to open up my journey generated an image that looked beautiful

And I then exported that image headed to the runway website and used their generation 2 model to create this moving version of the image I had just made using AI you definitely want to know how to do this because I know that mid-journey is already being used to

Generate a landing page images for things like hero sections but this takes it one step further not only can you generate a video for your landing page now which is always better than just a static image but you can do cool things like generating a separate video for a

Mobile phone and that’s definitely great because I know that if I try to reuse my videos for mobile phones they’re always zoomed in so let me show you how I did all of this so here’s the website in question it’s called Runway and I’ll link it in the description below so you

Guys can check it out but they’ve got this new New Gen 2 model which is all this cool stuff that I’ve been talking about I had a look down here and it can do text to video video to video image to video and it basically animates the

Entire frame and you can describe what you wanted to do as part of that animation I’ve looked into their dashboard and they’ve got a few different ways to generate videos I’m just going to use their new Gen 2 model which converts text or images to video

And here I’m going to put in something kind of simple like maybe clouds in the sky this was generated in just about 10 to 20 seconds which isn’t too bad especially for AI video next is the part that I’m kind of excited to see it’s converting an image into video I’ve

Generated a few using my journey this is one of my favorites here because it’s a night sky with lots and lots of colors and so I’ve uploaded this to Runway I’m gonna generate the video based on this image I’m not going to give it any additional text and just hope that it

Comes up with something interesting and unfortunately it didn’t produce what I was expecting it’s kind of transitioning a scene from a night scene to something like a sunset I decided to try and combine this image together with a text prompt and I’m going to use more or less

Of the same prompt that I use when I originally created the mid-journey generation for this image I select to generate and found that the video produced by the AI kind of was the same but also different as if it only pulled inspiration from the photo and created a

New scene to generate a video from I tried it once more just in case this was an accident but no it seems to be generating its own image and then turning that into a video rather than using the exact reference image I provided I think I’ll need to do some

More testing but let me move on quick pause today’s sponsor is called QR tiger there are places that helps you generate QR codes like you can expect QR codes are becoming more and more popular these days from installing apps to ordering online when you need to go to a

Restaurant to many more places QR codes is more or less how we interact and I wouldn’t be surprised if they’re useful business cards in the future too impressive very nice QR tiger makes this whole process easy they’ve actually built a system from the ground up that’s also

Very friendly to developers as well as compliant to the EU as well as CA and many more things I got a chance to have a look at their systems and you can generate some really cool QR codes using custom characters as well as custom looks and realistically if you want to

Get into QR codes this is the place to go to and here’s some trivia do you know what QR code actually stands for it means Quick Response Code it was developed in 1994 by a Japanese company for Logistics and now it’s used pretty much all over the world I took a look at

QR Tiger’s documentation and their API is pretty solid on top of that they’re easy to get started with because it’s entirely free you can check them out in the link below or using the QR code just up here it’s time to test a Runway with an actual website I’m here on wixstudio

I’ve got a hero section here and I want to add a hero image and then convert this image into a video so that it looks a little bit more interesting this website is for a construction so I’m going to head over to unslash and search for a image of a crane I’m just

Gonna select this one on the right hand side and while I could generate something from mid-journey I think this should just do and I’ll head back over to wixstudio and upload it to use it here on the left hand side of the hero section heading back to Runway I’m going

To select to do another image to video I’m going to upload this image of a crane which is about 8K in resolution it’ll be interesting to see how the video handles this but I’m not going to add any text because that didn’t work very well last time this one didn’t do

Too bad but it doesn’t look that real you can definitely tell it’s been generated by AI but let me actually test that out and put it inside of my website to see how it works as a hero section Runway does give you the option to download all the files you generate

Which is free so I’m gonna do that right now and I’m just gonna download it here it looks like it’s maybe a 720p image after this I’m gonna head back over to Wix studio and select to add a new element this time I want to add a video

So I’ll select to drag in the video player and just expand it out to use the entire size then I’ll go to change the video and upload the new file that I just generated from Runway using wixstudio I can customize it a little bit changing its focal point it’s

Basically where it’s positioned on the video but in the middle looks the best and with all that done I can now preview it I’ve got it set to auto play repeating every 4 seconds and I think a moving image is better than a static image though the resolution on it isn’t

That great there are other things I could do like transform these images below to make the static ones more lifelike and I think I’ll give this a shot I’m going to select this middle one here of a bridge and see if I can also turn it into a moving video to give an

Idea of what a page could look like if the entire thing had more animated content rather than static images this time I took a screenshot and simply uploaded it it’s only about 100 pixels by 100 pixels but I’m hoping Runway will generate something useful I added the

Prompt a bridge with time of day slowly changing to evening and I think that kind of comes out in the the video though the movement on it is very subtle I’m going to try and download it and add it to the page as well here once again

On Wix Studio I’ll select to add a new element to replace this image I’ll add the video element once more and select to just drag it in the same position and expand it out to be about the same size as the previous image now for this video

Element I’ll once again upload this file that I generated from Runway and that’s it and now I’ve got this video and I can preview it inside of the website while I think that this video looks better simply because it’s a smaller resolution so it works better in this small frame I

Do feel that there isn’t very much movement happening I tried to fix this up by changing the focal point of this video more to the right hand side where the actual image of the sun setting is but because this video is quite slow you can’t really tell the difference I could

Try Runway and its higher resolution examples especially for the version here with the crane but I think for this point in time the free version is enough to give you an idea of how it works

#convert #Hero #Images #Videos #Website
For More Interesting Article Visit : https://mycyberbase.com/

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *