Website Background Image

Making the Website Background

As a group, we had established that we wanted the background of our website to be an image of a laptop screen lighting up with various shots from our trailer. I started by using the distort transform tool to make the clip fit correctly on the laptop. I then wanted to create a vignette effect to make the edges of the screen blend in better. I did this by using a layer mask with a gaussian blur. 

I then edited the frames. I wanted the image to repeat back and forth so I made frames 1-10 followed from 9-2 so it would loop seamlessly. Then, I edited the colours in the images to make them more like scenes seen in horror films. 

As the colour coming from the screen was different for each clip, I wanted to change the colour my outline was being lit up. I did this by colouring over the areas where the light hit and changing this into the blend mode soft light. 

Finally, I added a gaussian blur effect to a couple of the frames to give the illusion of the image glitching out. I then needed to arrange the images on the website, so I rendered the image as an mp4 video rather than a GIF as this would make a smaller file. I then set this as the background of the website on Wix. I arranged the typography at the top of the site and made sure they didn't overlap. 

Overall, I am very pleased with the result as it is appropriate for our genre, and I managed to make the image on the screen reasonably realistic. I also really like the effect of the light on my face changing as this adds realism.