Reklamní bannery na webových stránkách bezesporu patří k účinným formám propagace. Statický banner lze bez větších problémů vytvořit v každém trochu pokročilejším grafickém editoru. Vytvořit animovaný banner je již o dost náročnější. Představíme si webovou službu Bannersnack, pomocí které lze bannery, a to i animované, tvořit i bez znalosti kódování.
NahoruVarianty služby
Služba je dostupná na adrese bannersnack.com a k jejímu používání je potřeba si založit uživatelský účet. V bezplatné variantě FREE lze vytvořit celkově pouze 10 statických bannerů, ve kterých navíc bude otisknut vodoznak. Reálně použitelná je tedy až placená varianta STARTER (7 $/měsíc), která nabízí tvorbu až 30 statických bannerů měsíčně. Potřebujeme-li tvořit animované bannery, tak si musíme pořídit minimálně variantu PRO (18 $/měsíc), ve které již počty vytvořených bannerů nejsou nijak limitovány.
NahoruVytvoření nového banneru
Ukažme si postup vytvoření jednoduchého animovaného banneru. Začneme vytvořením statického banneru, který následně rozpohybujeme. V horním panelu klikneme na tlačítko Create new.
Nabídne se nám možnost vytvoření jednoho banneru (volba Single banner) anebo rovnou celé sady bannerů se stejným obsahem, ale s odlišnými rozměry (volba Banner set). Zvolíme možnost Single banner.
V dalším kroku musíme zvolit požadovanou velikost banneru. Buď si můžeme vybrat z předem připravených velikostí klasických webových bannerů (záložka Display) a bannerů pro sociální sítě (záložka Social media) anebo si vytvoříme svou vlastní velikost (volba Custom size). Zvolíme např. možnost Medium Rectangle ze záložky Display.
Zobrazí se nám pracovní plocha s plátnem o zvolených rozměrech, na kterou musíme umístit objekty – pozadí, texty, obrázky, geometrické tvary a tlačítka. Pokud si netroufáme tvořit z ničeho anebo si chceme službu zatím jen rychle vyzkoušet, tak může být rozumné přejít v panelu na levé straně obrazovky na záložku Templates. Najdeme zde totiž řadu hotových šablon, které stačí následně již jen poupravit k obrazu svému.
Ukažme si to prakticky. Zvolíme jednu za šablon, díky čemuž se nám plátno ihned zaplní několika objekty – v našem případě jednobarevným pozadím, fotografií, vektorovým ornamentem, textovým polem a tlačítkem.
NahoruÚprava obsahu banneru
Budeme tvořit reklamní banner na pizzerii, a tak určitě budeme potřebovat vyměnit použitý obrázek. V levém panelu přejdeme na záložku Add image a do vyhledávacího pole zapíšeme heslo „pizza“.
Jeden z nalezených obrázků chytíme a přetáhneme ho na stávající obrázek. Dojde tím k jeho nahrazení.
Dále budeme chtít změnit barvu pozadí. V levém panelu přejdeme na záložku Background a zvolíme např. červenou barvu, čímž pozadí barevně sladíme s obrázkem.
Dále upravíme barvu textu u tlačítka. Tlačítko označíme a v malém postranním panelu klikneme na tlačítko Text s ikonou ve formě písmene „T“. Jako barvu písma zvolíme opět červenou.
Do textového pole budeme potřebovat zapsat vlastní text. Na textové pole dvakrát klikneme, označíme stávající text a zapíšeme místo něj svůj vlastní. Totéž provedeme i s textem u tlačítka.
Nakonec ještě zbývá přidat ke tlačítku odkaz na webovou stránku. Tlačítko označíme, v malém postranním panelu klikneme na možnost Action a řekneme, že po kliknutí na tlačítko má dojít k přechodu na webové stránky (volba GoToURL) se zadanou adresou.
Pokud bychom začínali s prázdným plátnem, tak bychom museli všechny objekty vytvořit ručně pomocí voleb v levém panelu nástrojů na záložkách Background (pozadí včetně přechodových pozadí a textur), Add text (vložení textových polí a jejich skupin), Add image (vložení obrázků z fotobanky anebo nahrání vlastních obrázků), Add shape (vložení geometrických tvarů a vektorových ikon včetně praktických ikon sociálních sítí) a Add button (vložení tlačítek).
Úpravu vložených objektů pak provedeme tak, jak jsme si to již ukazovali – tedy v malém postranním panelu, který se objeví po jejich označení.
Při úpravách se hodí i postranní panel Layers se seznamem objektů. Především v něm můžeme přetažením myší pohodlně měnit pořadí objektů.
NahoruAnimace banneru
Mnohem atraktivnější než statický banner, je banner s pohyblivými prvky, tedy animovaný banner. Nejrychlejším způsobem, jak vytvořený banner rozpohybovat, je přejít v levém postranním panelu na záložku s názvem Magic animator. Najdeme na ní několik animačních schémat. Volbou schématu dojde k rozpohybování všech prvků, ze kterých se banner skládá.
Podobu animace si můžeme ihned zkontrolovat v náhledu.
Pokud bychom chtěli mít…