Animatie banners zijn erg handig om mee te adverteren, maar geven ook veel problemen online. Zo waren sommige banners niet geschikt voor mobiele apparaten en waren er geen subtiele overgangen in de animatie door een te lage resolutie. Door de introductie van de plug-in ‘Bodymovin’ van het Adobe programma After Effects, bestaat er nu de mogelijkheid om kwalitatief goede banners te exporteren naar HTML5. Hieronder wordt uitgelegd hoe dit in zijn werk gaat.
Het probleem van flash en GIF banners
Animatie banners, oftewel banners die op veel websites te zien zijn, zijn een sterk hulpmiddel voor promotie van een merk, dienst of product. Denk aan banners bovenaan een website of aan banners die tussen of om een tekst heen staan. Toch was het adverteren door middel van banners voorheen erg lastig, omdat een banner niet door mobiele apparaten ondersteund werd. Dit was het geval bij een flash banner. Een GIF banner gaf hiervoor de oplossing, alleen zaten aan deze banners ook nadelen. Zo zijn GIF banners niet interactief, beperkt tot 256 kleuren en bevatten ze geen subtiele overgangen. Aan deze problemen is nu een einde gekomen door de introductie van de Bodymovin plug-in van After Effects. Wat deze plug-in precies voor meerwaarde heeft, wordt hieronder uitgelegd.
Bodymovin van After Effects
Bodymovin is een plug-in die animatie banners in After Effects exporteert naar SVG of Canvas bestanden. Deze bestanden zijn zeer geschikt voor animaties met een hoge resolutie zonder kwaliteitsverlies. Bodymovin werkt als volgt: animaties, gemaakt in After Effects, worden direct vanuit After Effects geëxporteerd naar een JavaScript bestand, waardoor de animaties in een webpagina worden opgenomen en direct naar de browser kunnen worden geïmporteerd. Het grote voordeel van deze plug-in is dat Bodymovin alles perfect importeert naar een SVG bestand, oftewel naar een vector bestand zonder kwaliteitsverlies. Dit bestand is overal en in elk formaat te gebruiken.
Bodymovin gebruiken
Voor het gebruiken van Bodymovin, volg de onderstaande stappen om de extensie te activeren.
– Zorg dat je de laatste versie van Bodymovin hebt en raadpleeg Bodymovin’ GitHub, waar ondersteunde functies van Bodymovin worden genoemd;
– Open je After Effects project en selecteer de Bodymovin extensie in Window > Extensions > Bodymovin;
– In de Compositions Panel die nu geopend wordt, klik op ‘Refresh’ om een lijst te krijgen van alle Compositions projecten;
– Selecteer degene die je wilt exporteren;
– Selecteer ‘Destination folder’;
– Klik op ‘Render’;
– Zoek naar de geëxporteerde JSON file.
Heb je afbeeldingen of Adobe Illustrator layers, dan is het raadzaam om deze te converteren naar shapes, zodat de bestanden kunnen worden geëxporteerd naar vector bestanden. Om dit te doen, ga je met je rechtermuisknop naar ‘Create Shapes from Vector Layer’.
Bij het maken van een banner is het tevens belangrijk om rekening te houden met een aantal standaard afmetingen. Google heeft namelijk een aantal regels waar banners aan moeten voldoen. Hieronder staan de meest gangbare en succesvolle maten:
– 336 cm x 280 cm (large rectangle);
– 300 cm x 250 cm (medium rectangle);
– 728 cm x 90 cm (leaderboard);
– 160 cm x 600 cm (wide skyscraper).
Daarnaast hanteert Google Adwords een grootte van maximaal 150 KB. Wordt een banner groter dan dit formaat, dan bestaat de kans dat een banner traag laadt. Hierdoor scrollen website bezoekers verder zonder dat ze de advertentie hebben gezien. Gemiste kans dus.
Wil je eerst een paar voorbeelden zien voordat je begint? Informeer naar onze verschillende geanimeerde banner stijlen.
Succes!
