placeholder_200x200

Seneste nyt om grafisk design og digitale medier

Sådan kan du udarbejde avancerede online bannere med Adobe Animate

online bannere med adobe animate

Med Adobe Animate kan du producere online bannere med interaktive elementer. Dine bannere kan eksporteres som HTML5-kode og dermed nemt integreres på mange annonceplatforme, såsom Google Display, Adsense og lignende.

I dette blogindlæg kigger vi på, hvordan du kan udarbejde mere avancerede online bannere ved hjælp af nogle udvidede værktøjer og en lille smule kode. 

Er du nybegynder i Animate? Læs med her om, hvordan du kommer godt fra start i programmet.


Stor efterspørgsel på grafikere der kan udvikle online bannere

Online annoncering udgør i dag en stor del af de fleste virksomheders samlede marketingbudget. Det betyder, at konkurrencen for at trænge igennem på digitale medier til de helt rigtige målgrupper er hård.

Her kan et animeret web-banner gøre en stor forskel når det gælder at tiltrække brugernes opmærksomhed, idet dynamiske elementer og interaktion skaber blikfang i langt højere grad end en statisk eller tekstbaseret annonce.

Adobe Animate – et af den digitale grafikers vigtigste annonceværktøjer

Adobe Animate blev oprindeligt lavet med henblik på at designe små 2D-animationer og interaktive spil i formatet Flash. I de senere år er programmet dog blevet mere målrettet web-banner-produktion og er nu et meget populært værktøj blandt digitale grafikere.

animate-interface1


Adobe Animate ekspert
og instruktør på Softworlds kursus Animate Rutineret, Signe Jørgensen, fortæller, at der er generel mangel på digitale grafikere, der er i stand til at levere avancerede og levende web-bannere i de helt rigtige formater, der samtidig ser godt ud.

»Dét, at du med Adobe Animate netop har muligheden for at eksportere til formater såsom HTML5, GIF og SVG gør, at du kan levere interaktive bannere, som kan implementeres på tværs af hjemmesider, annoncenetværk og apps«, fortæller hun.

Ifølge Signe Jørgensen er det det, der gør Animate til et så vigtigt værktøj i alle digitale grafikeres værktøjskasse over de næste mange år.

 

Om eksperten
Signe Jørgensen er Adobe Animate ekspert og oprindeligt uddannet Webintegrator og grafiker. Hendes særlige erfaring og kompetencer inden for både grafisk design og kodeprogrammering har gjort, at hun har arbejdet i Politikens Hus med produktion af web-bannere samt oplæring af de grafiske medarbejdere i in-house afdelingerne. Som selvstændig producerer hun idag web-bannere og interaktiv grafik for en bred kundegruppe, blandt andet Ekstra Bladet, SAS og HBO.


Kendskab til kode sikrer grafikeren en plads i fremtidens arbejdsmarked

Grundlæggende kendskab til Animate gør, at man kan designe web-bannere til en forholdsvis simpel hjemmeside. Så snart man vil producere bannere, der skal fungere som online annoncer kræver det dog, at man kan arbejde i programmet på et mere avanceret og teknisk niveau.

Signe Jørgensen oplever dog, at der for mange grafikere ligger en udfordring i, at man skal have basalt kendskab til kode for at kunne drage nytte af Animates mere avancerede muligheder og levere de mest efterspurgte web-bannere.

»Ved at have en basis forståelse for kodesprog som HTML og Javascript opnår du fuld kreativ frihed i programmet. Kunderne efterspørger ofte interaktivitet i web-bannere, som f.eks. et nedtællingsur, en knap der pulserer, konfetti der falder ned over banneret eller en video, der afspilles. Det er alt sammen funktionalitet, som du kan tilføje via nogle linjer med kode.«

 

Forskellige krav til teknisk opsætning af bannere til online annoncering

Skal du levere bannere til online annoncering er det også vigtigt at have styr på de tekniske specifikationer. Alt afhængig af hvor de specifikke web-bannere skal vises, kræver de mange forskellige Ad Servere eksempelvis, at der er sat korrekte ClickTags ind i bannerets kode for at det kan genkendes af serverne.

Hvis man er grafiker uden nogle tekniske forkundskaber, skal man ifølge Signe Jørgensen ikke lade sig afskrække af selve kodedelen i Animate. Det behøver nemlig slet ikke at være indviklet.

»I stedet for at se kode som et kompliceret matematisk script hjælper det, hvis man prøver at forstå det som en form for rebus, man skal løse, eller en handling på en historie, der har forskellige udfald alt efter, hvad man gør. Dvs. at man kan prøve at spørge sig selv, hvad skal der skal ske, hvis brugeren trykker på den her knap«, forklarer Signe Jørgensen.

 

animate-kode-snippet
Grafik: Ovenstående kode-bid er et eksempel på, hvordan du tilføjer ClickTags til Google bannere i Animate

 

Derudover behøver man sjældent at skrive sine egne kodescripts fra bunden – man kan sagtens bruge Animates egne kode-snippets, som man copy/paster ind og ændrer lidt på, så de passer til ens ønskede visuelle udtryk. På Softworlds kursus i Animate Rutineret er der således fokus på, hvordan man nemt finder og bruger færdige skabeloner og koder, så man ikke behøver at opfinde den dybe tallerken, hver gang man har brug for en specifik funktionalitet.

 

Få en solid forståelse på et 2-dages Rutineret kursus i Adobe Animate

Har du allerede basis kendskab til Animate ved f.eks. at have deltaget på et kursus i Animate Basis, så kan du med fordel tilmelde dig 2-dages kurset Adobe Animate Rutineret. På kurset bliver du i stand til at lave et avanceret web-banner, som fungerer 100 % både visuelt og teknisk og som derfor kan afleveres direkte til en kunde for implementering.

»Fordi der er mange tekniske benspænd i at designe velfungerende web-bannere, oplever jeg, at mange finder det rigtigt svært blot at se på tutorials på Youtube. Den fundamentale forståelse for, hvordan især HTML-delen af Animate virker er klart mest fordelagtig at lære hands-on, hvor man løbende får mulighed for at stille spørgsmål og prøve sig frem.

Når grundforståelsen er på plads, er det meget nemmere at hente hjælp på nettet,« forklarer Signe Jørgensen.

Animate er stadig primært et visuelt og kreativt værktøj

Det er vigtigt at understrege, at Animate stadig er et meget visuelt og kreativt værktøj med masser af drag & drop funktioner. Kodedelen er et ekstra krydderi, hvor man skal tænke på en lidt anderledes måde. Ifølge Signe Jørgensen tilbyder programmet en god kombination mellem det tekniske og det kreative.

»Det kreative arbejde er spændende, men at få avancerede funktioner til at virke i praksis ved at fejlsøge og forstå logikken i koden kan også være utroligt givende, når det lykkes«, afslutter Signe.

Se alle kurser i video & animation på dette link >>

 




authorIcon Af Softworld-DK

Softblog drives af Softworld, der er et internationalt træningscenter med fokus på digital visuel kommunikation. Siden 1995 har vi hjulpet kreative medarbejdere med at tilegne sig tidssvarende kompetencer i en kreativ og grafisk branche i konstant forandring. Vores dygtige skribenter har en bred og dybdegående teknisk og kreativ erfaring, så du er sikker på at få indholdsrige indlæg fra eksperter med fingeren på pulsen og samlet ét sted.

Seneste blogindlæg


Kurser og workshops
grafiske-kurser-blog

After Effects kurser
På vores certificerede kurser i Aarhus og København får du det fulde overblik over After Effects. Se After Effects kurserne >>

InDesign kurser
Lær InDesign på 2 dage så du kan opsætte grafisk design til plakater, annoncer, foldere og meget mere. Se InDesign kurserne >>

UX design & WordPress kurser
Få en solid og praktisk forståelse for UX Design, så du kan designe gode brugeroplevelser og overbevisende design. Se web design kurserne >>


 

Se flere kurser

Find dit næste kreative kursus

Hos Softworld kan du deltage på en række kurser i InDesign, Photoshop, Illustrator, After Effects og WordPress.