Creating your own animated Video Banners
PixelHaze Creative Director Ken Rees shares how he creates his own custom animated video banners to add extra depth to your website and its branding.
When considering the virtues of a Video banner, especially an animated one, can be a welcome addition to any Squarespace site, the use of a video banner will often encourage a viewer to stay on a site for far longer and increase engagement, but, is a video banner right for your site?
Pixelhaze champions the use of animated video banners & gifs throughout the site as it perfectly fits within our brand guidelines. We want the Pixelhaze Academy to appear friendly, welcoming and creative, after all we are a creative design agency. The retro 8-bit branding we have developed is meant to evoke a feeling of nostalgia and fun within our intended target audience, animated videos only help heighten our brand and deliver our message far better than still images. Before look into creating your own video banner you must ask yourself, what is your website’s tone of voice?
Looking at this basic chart I’ve created, I’ve positioned Pixelhaze in a position between being an informative site, and an Entertaining one. Pixelhaze champions it’s retro pixelated past through animated illustrations which intend on making the Academy site look playful and welcoming. This tone of voice however would not work on a site which is intended to inform the user. For example, for a funeral planning website you’d want your tone of voice to be reserved and respectful. Introducing fun animated characters running about the site would be highly inappropriate and mostly likely lose you clients. You’d most likely opt for a black and white still images which were peaceful and fitted the business. You’ve got to ask yourself, is my content relevant for an animation?
This may also be the case for different pages on your website. Our landing page is intended to welcome users and show off some of the skill sets we provide as a part of our design agency. On our contact page we’ve minimised this playfulness we’ve championed on our landing page in order to get our viewers straight to the point and relay all the details they need. You’ve got to make sure you use your animated videos in the relevant places.
Making a motion graphic
Before starting any good motion graphic animation, you need an idea. This idea needs to be in line with your brand and help tell the story of your business. Considering the Pixelhaze Academy uses an 8-bit style within it’s brand, we decided that motion could be used to replicate a retro video game. Inspired by Space invaders, we decided to use visual metaphors to show off what exactly we offer here at Pixelhaze Academy. This combined with spaced themed word play helps sell what we offer in a playful manor.
Initial Idea Sketch
The Artboard
With an idea in mind, sketched out and ready to go, the next stage was creating the artboards ready to export into After Effects. Here we make all the moving parts which will be animated using keyframe animation in After Effects. I opt to use After Effects instead of other animation software as it translates to Illustrator very well. I make all my illustrations in Illustrator, organise them and then simply move them across to After Effects to be animated. When creating your moving parts however, I’d make sure you don’t have shapes with lots of details as they can slow up your After effects file. As the Rocket spaceship parts were made up of hundreds of different square blocks, I had to export each part as a png images first and then place them into illustrator. This meant that After Effects only had to load in an image as opposed to hundreds of small square pixels.
The Artboard
Step 1: Creating your pieces
Step 2: Setup
Step 3: Layered Composition
Step 4: Bringing in your illustrator files into After Effects
Step 5: Animating your illustrations
Creating your own banner
As long as you set up your video in a 16:9 ratio, your banner video will work perfectly on any size screen resolution. Below are a few different video banners I created for the Pixelhaze Academy before settling on a final theme. As a Sci-fi enthusiast it was clear that the retro 8-bit Space Invaders style banner had to be the one for us.
If you have any interest in involving animated banner in your website but don’t have the skill set to create them yourself, get in contact with us at Pixelhaze and we’ll add some needed flare to your site.
Launching your business shouldn’t be rocket science!
Lost in the sea of technical jargon
Getting your idea up in the air
