skip to Main Content

Sa online oglasima se susrećemo čim otvorimo pretraživač, a da li znate kako se zapravo ovi oglasi prave?

Google je stvorio moćnu alatku koja nam omogućava brzo i lako dizajniranjei kreiranje HTML5 oglasa i reklama, koristiće vizuelni i kodni interfejs. Ovo je kompleksan program koji u sebi sadrži veliki broj mogućnosti. Google Web Designer (GWB) takođe nudi skup komponenti koje omogućavaju da dodamo galerije slika, carousel, video zapise.

A najbolje u svemu je to što je potpuno besplatan.

Kako se koristi Google Web Designer?

Google Web Designer možete preuzeti na sledećem linku.

‘’Okej, skinuo sam program, šta dalje, ovo je previše zbunjujuće’’, mislite u sebi sigurno.

Upoznavanje sa programom

Nakon što preuzmemo i instaliramo Google Web Designer, prvi izazov sa kojim se susrećemo je kreiranje datoteke:

Sa leve strane interfejsa biramo tip oglasa (Baner, AMPHTML Baner, Expandable i Interstitial) ili neku od navedenih opcija (HTML, HTML with Pages, CSS, Javascript i XML).

Za sada ćemo se držati baner oglasa. Prelazimo na desni deo ekrana. Dodajemo naziv i lokaciju gde želimo da nam se čuva materijal sa kojim radimo u programu. Sledeća stavka je okruženje (environment) za koje je namenjen naš oglas. Postoje 4 opcije i to: Display & Video 360, Google AdMob, Google Ads, Non-Google Ad. U zavisnosti za koju platformu pravimo oglas, izabraćemo adekvatnu opciju. 

Ovaj put ćemo izabrati Non-Google Ad i odgovarajuće dimenzije, nećemo čekirati Responsive layout i biramo advanced Animation Mode, kako bismo imali više opcija prilikom pravljena animacija u Timeline segmentu.

Google Web Designer interfejs

Nakon kreiranja projekta, susrećemo se sa glavnim interfejsom Google Web Designer programa. Interfejs je podeljen na nekoliko glavnih delova. U centralnom delu, imamo veliko područje za izgradnju projekta i uređivanje samog koda (osnovna radna površina). Na levom kraju ekrana se nalazi traka sa alatima, u donjem delu ekrana je Timeline, a sa desne strane je skup panela koji nam omogućava da menjamo i dodajemo boje, elemente, komponente, razne ‘’event’’-e  i mnoge druge opcije.

U gornjem desnom uglu Google Web Designer-a nalaze se 2 moda za kreiranje oglasa:

  1.     Design View, gde su vizualno prikazane slike, tekst i drugi elementi našeg dokumenta, baš onako kako će izgledati i na pretraživaču
  2.      Code View, gde je prikazan sam kod dokumenta

Tool menu – Alatke

Na krajnjoj levoj strani nalazi se traka sa alatkama.

Ona sadrži sve alate potrebne za kreiranje elemenata (tekst, oblici, maske…). Pomoću trake sa alatima kreiramo tekst i dodajemo elemente koje želimo da imamo na reklami.

Timeline

Pomoću Timeline-a kreiramo animacije putem keyframe-ova. Keyframe predstavlja poziciju određenog objekta u tačno određenom trenutku. Ovo omogućuje da u vremenu odredite kada će se koja komponenta pojaviti i na koji način. U naprednom režimu (advanced mode), se animira svaki element dodavanjem keyframe-ova na Timeline da bi se naznačilo gde animacije počinju i gde se završavaju.

Sada prelazimo na animaciju objekta. Ako želimo, na primer, da tekst GOOGLE WEB DESIGNER animiramo tako da se on pojavljuje sa leve strane:

U Timeline segmentu moraju se dodati 2 keyframe-a, jedan gde je tekst van radne površine sa leve strane i jedan na poziciji gde se trenutno nalazi.

Desnim klikom na timeline gde se nalazi tekst dodajemo keyframe-ove kad želimo. Biramo prvi i menjamo poziciju teksta tako da ona bude van radne površine.

Drugi keyframe je pozicija u kojoj želimo da tekst ostane, tačnije ona sa početka. Pomeranjem scroll-a u Timeline-u možemo proveriti kako izgleda animacija.

Paneli

Paneli u okviru Google Web Designer programa uključuju stavke sa desne strane ekrane i to redom: palete boja i tekst, prikaz trenutnih elemenata na projektu, osobine selektovanog objekta (pozicija, rotacija, fill…), komponente.

Osobine objekta

Menjanje strukture objekta u Google Web Desginer-u se vrši manuelno (pomeranje, povećavanje objekta mišom) ili pomoću panela sa desne strane.

U prostoru sa desne strane se nalaze opcije za:

  1. poziciju i veličinu objekta (ona može biti izražena u pixelima ili u procentima).
  2. rotaciju, 3d rotaciju i odnos u dužini, širini i visini
  3. stil, boja i veličina okvira, da li će biti zakrivljen ili ne
  4. vidljivost objekta (od 0 do 1), gde 0 podrazumeva da je objekat potpuno nevidljiv

Komponente

Komponente su unapred ugrađeni moduli koji omogućavaju da oglasima ili HTML dokumentima dodate određene funkcije. One su organizovane unutar nekoliko manjih sekcija koje se proširuju klikom na naziv neke od sekcija.

Izdvojićemo nekoliko:

Galerije:

 

  • 360’ Gallery
  • Carousel Gallery
  • Gallery Navigation
  • Swipeable Gallery
  • Transition Gallery
  • Amp-carousel (jedino dozvoljen kod AMPHTML oglasa)

 

Interakcija:

 

  • Add to Calendar
  • Gesture
  • Image Button
  • Parallax
  • Tap Area
  • Tap to Call/Text

 

U ovom tekstu smo vas upoznali sa intefejsom i osnovnim funkcijama Google Web Designer programa. Google-ov proizvod koji olakšava kreiranje oglasa kako početnicima, tako i onima koji imaju naprednije znanje. U nekom od narednih tekstova detaljnije ćemo se pozabaviti svim komponentama i ostalim funkcijama Google Web Designer-a.

Digitizer je tu da Vam pruži podršku u osmišljavanju reklamnog nastupa na Google-u. Kontaktirajte nas!

Made by Nemanja Nedeljkovic – Senior Account Manager @Digitizer