Digitale banners er en fundamental del af moderne online markedsføring. De findes overalt på websites, sociale medier og i annoncenetværk som Google Ads. At skabe et effektivt banner, der fanger øjet og formidler et klart budskab, kræver både kreativitet og det rette værktøj. Adobe tilbyder en række kraftfulde programmer, men hvilket er bedst til netop bannerdesign, og hvordan sikrer du, at dit design har den rette størrelse, det korrekte format og er optimeret til webbrug?
Valget af Adobe-program afhænger i høj grad af typen af banner, du ønsker at skabe, og din erfaring med de forskellige værktøjer. De mest oplagte kandidater er typisk Adobe Photoshop og Adobe Illustrator, men også Adobe Express kan være relevant til hurtigere opgaver.

- Vælg det Rette Adobe Værktøj til Dit Banner
- Opsætning af Dit Bannerprojekt: Størrelse og Opløsning
- Designprincipper for Effektive Digitale Banners
- Ideelle Formater og Eksport af Dine Banners
- Eksportindstillinger i Adobe Programmer
- Eksport til Google Ads (Tidligere AdWords)
- Trin-for-Trin: Oprettelse af et Banner i Photoshop
- Trin-for-Trin: Oprettelse af et Banner i Illustrator
- Ofte Stillede Spørgsmål om Bannerdesign
- Konklusion
Når du skal designe et banner, står valget ofte mellem rasterbaserede programmer som Photoshop og vektorbaserede programmer som Illustrator. Begge har deres styrker, og det optimale valg afhænger af, om dit banner primært består af fotos eller af grafik, illustrationer og tekst.
Adobe Photoshop er standarden inden for billedredigering og manipulation. Hvis dit banner skal indeholde realistiske billeder, fotocollager eller komplekse billedjusteringer, er Photoshop uvurderligt. Det arbejder med pixels, hvilket giver dig fuld kontrol over detaljer, farver og effekter på pixel-niveau. Du kan nemt integrere billeder, justere lys og farver, fjerne uønskede elementer og skabe avancerede grafiske effekter, der bygger på pixeldata.
Fordele ved Photoshop til banners:
- Fremragende til integration og manipulation af fotografier.
- Omfattende værktøjer til billedjustering og retouchering.
- God til at skabe tekst-effekter, der interagerer med billeder.
- Præcis kontrol over rastergrafik.
Ulemper:
- Banners oprettet i Photoshop er rasterbaserede, hvilket betyder, at de kan miste skarphed, hvis de skaleres op.
- Tekst og former er også pixelbaserede, hvilket kan gøre dem mindre skarpe ved skalering sammenlignet med vektor.
Adobe Illustrator: Perfekt til Grafik, Ikoner og Tekst
Adobe Illustrator er et vektorbaseret tegneprogram. I stedet for pixels arbejder Illustrator med matematiske ligninger, der beskriver linjer, kurver og former. Dette gør, at grafik oprettet i Illustrator kan skaleres op og ned i det uendelige uden tab af kvalitet. Hvis dit banner hovedsageligt består af logoer, ikoner, illustrationer, skarpe kanter og tekst, er Illustrator ofte det bedste valg. Teksten forbliver knivskarp uanset bannerets størrelse, hvilket er en stor fordel.
Fordele ved Illustrator til banners:
- Grafik og tekst forbliver skarp ved enhver skalering.
- Ideel til at skabe logoer, ikoner og illustrationer fra bunden.
- Nemmere at redigere former og tekst præcist.
- God til at skabe forskellige størrelser af det samme banner ud fra ét masterdesign.
Ulemper:
- Ikke egnet til kompleks fotomanipulation.
- Arbejdet med billeder er mere begrænset sammenlignet med Photoshop.
Adobe Express (tidligere Adobe Spark) er et online værktøj, der er designet til hurtigt at skabe grafik til sociale medier, web og print ved hjælp af skabeloner. Hvis du har brug for et simpelt banner hurtigt og ikke har dyb erfaring med Photoshop eller Illustrator, kan Express være en god løsning. Det er dog mindre fleksibelt og tilbyder ikke samme niveau af kontrol som de mere professionelle programmer.
Det første skridt i at designe et banner er at definere dets dimensioner. For digitale banners angives størrelsen altid i pixels (px). Opløsningen (målt i PPI - Pixels Per Inch eller DPI - Dots Per Inch) er mindre kritisk for webgrafik, end den er for print. Standard for web er ofte 72 PPI, men det vigtigste er de faktiske pixeldimensioner (f.eks. 300x250 pixels). En opløsning på 72 PPI er helt tilstrækkelig for banners, der skal vises på skærme.
Farvetilstanden for webgrafik skal altid være RGB (Rød, Grøn, Blå), da skærme viser farver ved at kombinere lys i disse tre farver. CMYK (Cyan, Magenta, Gul, Sort) bruges til print.
Interactive Advertising Bureau (IAB) har defineret en række standardstørrelser for digitale reklamer. At bruge disse standardstørrelser sikrer, at dine banners passer ind i de fleste annoncepladser på websites og i annoncenetværk. Her er nogle af de mest almindelige:
| Størrelse (pixels) | Navn | Beskrivelse |
|---|---|---|
| 300x250 | Medium Rectangle | Meget populær, passer godt ind i tekstindhold eller sidebars. |
| 728x90 | Leaderboard | Ofte placeret øverst på websider. |
| 160x600 | Wide Skyscraper | Høj og smal, ofte placeret i sidebars. |
| 300x600 | Half Page | Større og mere iøjnefaldende end Medium Rectangle. |
| 320x50 | Mobile Leaderboard | Optimale størrelse for mobilvisning. |
| 970x250 | Billboard | Stor og prominent placering. |
Når du opretter et nyt dokument i Photoshop eller Illustrator, skal du indtaste den ønskede bredde og højde i pixels. Sørg for at vælge 'Pixels' som enhed og 'RGB' som farvetilstand. For opløsning er 72 PPI et fint udgangspunkt for web.
Uanset hvilket program du bruger, er designet afgørende for bannerets succes. Et godt banner skal hurtigt fange opmærksomheden og formidle sit budskab klart. Her er nogle principper:
- Hold det simpelt: For meget tekst eller for mange billeder kan virke forvirrende. Fokusér på ét hovedbudskab.
- Klart budskab: Hvad tilbyder du? Hvilken handling ønsker du brugeren skal foretage?
- Stærk Call to Action (CTA): Brug knapper eller tekst, der tydeligt opfordrer til handling (f.eks. "Køb nu", "Læs mere", "Tilmeld dig"). Gør CTA'en synlig.
- Brug din branding: Inkluder dit logo og brug dine brandfarver og skrifttyper for genkendelighed.
- Læsbar tekst: Vælg skrifttyper, der er nemme at læse, selv i små størrelser, og sørg for tilstrækkelig kontrast mellem tekst og baggrund.
- Optimer filstørrelsen: Digitale annoncenetværk har ofte begrænsninger på filstørrelsen for banners (typisk under 150 KB). Dette kræver optimering ved eksport.
Når dit bannerdesign er færdigt, skal det gemmes i et passende format til web. De mest almindelige formater er JPG og PNG. Valget mellem dem afhænger af bannerets indhold og dine behov.
JPG (Joint Photographic Group)
JPG er et komprimeret billedformat, der er ideelt til fotografier og billeder med mange farveovergange. Komprimeringen reducerer filstørrelsen betydeligt, men det er en 'lossy' komprimering, hvilket betyder, at noget billeddata går tabt. Jo højere komprimeringsniveau (lavere kvalitet), jo mindre filstørrelse, men også potentielt mere synlige artefakter i billedet. JPG understøtter ikke gennemsigtighed.
Brug JPG til banners, der primært består af billeder.
PNG (Portable Network Graphics)
PNG er et format, der er bedre egnet til grafik, illustrationer, logoer og tekst. Det bruger en 'lossless' komprimering, hvilket betyder, at ingen billeddata går tabt under komprimering. PNG understøtter gennemsigtighed (alfakanal), hvilket er essentielt, hvis dit banner skal have en transparent baggrund eller uregelmæssig form.
Brug PNG til banners med skarpe kanter, tekst, logoer eller behov for gennemsigtighed.

Andre Formater: GIF og HTML5
GIF (Graphics Interchange Format) bruges primært til simple animationer. Hvis du vil have et banner med bevægelse, kan GIF være en mulighed, men animationen er begrænset til en serie af billeder i et loop. Photoshop kan oprette simple GIF-animationer.
HTML5 banners er mere avancerede og kan indeholde interaktivitet, video og mere komplekse animationer. Disse kræver dog typisk brug af andre værktøjer som Adobe Animate eller Google Web Designer, ikke primært Photoshop eller Illustrator til selve animationen.
Eksportindstillinger i Adobe Programmer
I både Photoshop og Illustrator finder du eksportmuligheder, der er optimeret til web. Den mest almindelige metode er via menuen 'File' -> 'Export' -> 'Export As...'. En ældre, men stadig nyttig, funktion i Photoshop er 'File' -> 'Export' -> 'Save for Web (Legacy)', som giver meget finmasket kontrol over komprimering og filstørrelse.
- Ved eksport til JPG: Vælg JPG-formatet. Juster kvalitets-slideren for at finde den rette balance mellem billedkvalitet og filstørrelse. For web er en kvalitet på 60-80 ofte tilstrækkelig. Sørg for at 'Progressive' eller 'Optimized' er valgt.
- Ved eksport til PNG: Vælg PNG-formatet. Vælg mellem PNG-8 (færre farver, mindre filstørrelse, kan understøtte simpel gennemsigtighed) og PNG-24 (flere farver, understøtter fuld alfakanal gennemsigtighed). For de fleste banners er PNG-24 bedst, hvis gennemsigtighed er nødvendig.
Hold øje med den estimerede filstørrelse i eksportdialogboksen for at sikre, at den overholder eventuelle begrænsninger fra annonceplatformen.
Eksport til Google Ads (Tidligere AdWords)
Google Ads accepterer banners i formaterne JPG, PNG, GIF og HTML5. De vigtigste krav udover korrekte dimensioner er filstørrelsen (som nævnt, ofte under 150 KB) og overholdelse af Googles annonceringspolitikker (f.eks. ingen overdreven animation, ingen vildledende indhold, klar læsbarhed). Når du eksporterer fra Photoshop eller Illustrator til brug i Google Ads, skal du blot følge de generelle eksportretningslinjer for JPG eller PNG, idet du nøje overvåger filstørrelsen.
Google Ads tilbyder også et værktøj kaldet Google Web Designer, som er specifikt designet til at skabe HTML5 banners, der er optimeret til deres platform.
Lad os sige, du vil oprette et 300x250 pixel banner i Photoshop:
- Åbn Photoshop.
- Gå til 'File' -> 'New'.
- I 'New Document' dialogboksen:
- Indstil 'Width' til 300 pixels.
- Indstil 'Height' til 250 pixels.
- Sørg for, at enheden er sat til 'Pixels'.
- Sæt 'Resolution' til 72 Pixels/Inch.
- Sæt 'Color Mode' til RGB Color, 8 bit.
- Vælg en baggrund ('White', 'Background Color' eller 'Transparent').
- Klik 'Create'. Du har nu dit lærred i den korrekte størrelse.
- Design dit banner ved at tilføje billeder ('File' -> 'Place Embedded...'), tekst ('Type Tool'), former, og juster farver og effekter ved hjælp af lag og justeringslag.
- Når designet er færdigt, gå til 'File' -> 'Export' -> 'Export As...' (eller 'Save for Web (Legacy)').
- Vælg format (JPG eller PNG). Juster indstillingerne for kvalitet/komprimering for at opnå den ønskede filstørrelse.
- Klik 'Export All' eller 'Save'. Vælg destination, og dit banner er gemt.
At oprette et banner i Illustrator, f.eks. 728x90 pixels, er lige så ligetil:
- Åbn Illustrator.
- Gå til 'File' -> 'New'.
- I 'New Document' dialogboksen:
- Vælg en 'Profile' som 'Web'.
- Indstil 'Width' til 728 pixels.
- Indstil 'Height' til 90 pixels.
- Sørg for, at enheden er sat til 'Pixels'.
- Sæt 'Color Mode' til RGB Color.
- Lad 'Raster Effects' stå på 72 ppi (dette påvirker kun effekter, ikke selve vektorobjekterne).
- Klik 'Create'. Din Artboard er nu din arbejdsflade i den korrekte størrelse.
- Design dit banner ved at bruge Illustrators værktøjer til at tegne former, tilføje tekst ('Type Tool') og importere eventuelle billeder ('File' -> 'Place...'). Husk, at vektorobjekter forbliver skarpe, mens importerede billeder er rasterbaserede.
- Når designet er færdigt, gå til 'File' -> 'Export' -> 'Export As...'.
- Vælg format (JPG eller PNG). Hvis du vælger JPG, sæt 'Quality' og sørg for 'Use Artboards' er valgt. Hvis du vælger PNG, vælg 'PNG-24' og sæt 'Resolution' til 'Screen (72 ppi)' og sørg for 'Use Artboards' er valgt.
- Klik 'Export'. Vælg destination, og dit banner er gemt.
Her er svar på nogle almindelige spørgsmål vedrørende bannerdesign og eksport:
For webbanners er det de fysiske pixeldimensioner (f.eks. 300x250 px), der er vigtigst. Opløsningen (PPI) er mindre afgørende for skærmvisning, og 72 PPI er standard og helt tilstrækkeligt. At bruge en højere PPI (f.eks. 300 PPI) for webbanners vil ikke gøre dem skarpere på skærmen, men vil blot øge filstørrelsen unødvendigt, medmindre du arbejder i Photoshop og skal skalere et billede ned fra en højere opløsning.
Brug JPG, hvis dit banner primært er et fotografi og ikke kræver gennemsigtighed. Brug PNG, hvis dit banner indeholder grafik, logoer, tekst med skarpe kanter, eller hvis du har brug for en gennemsigtig baggrund.
De mest almindelige størrelser er 300x250 (Medium Rectangle), 728x90 (Leaderboard), 160x600 (Wide Skyscraper) og 300x600 (Half Page). For mobil er 320x50 og 320x100 også meget brugt. Det er en god idé at designe dine banners i flere af disse standardstørrelser for at maksimere din rækkevidde.
Filstørrelsen optimeres primært under eksporten. I JPG kan du reducere kvaliteten. I PNG kan du vælge PNG-8 i stedet for PNG-24, hvis banneret har få farver og ikke kræver fuld gennemsigtighed. Generelt hjælper det også at holde designet relativt enkelt og begrænse antallet af komplekse effekter eller meget detaljerede billeder.
Photoshop kan bruges til at skabe simple frame-by-frame animationer, som kan eksporteres som en GIF. Illustrator er primært til statisk grafik. For mere avancerede og interaktive animationer (som ofte bruges i HTML5 banners) er Adobe Animate eller Google Web Designer mere passende værktøjer.
Konklusion
Valget mellem Adobe Photoshop og Adobe Illustrator til bannerdesign afhænger af projektets art – billedbaseret eller grafik/tekst-baseret. Begge programmer giver dig mulighed for at oprette banners i præcise pixeldimensioner og eksportere dem i de nødvendige formater som JPG og PNG, optimeret til webbrug og platforme som Google Ads. Ved at forstå forskellene mellem formaterne, standardstørrelserne og eksportindstillingerne kan du skabe effektive og optimerede digitale banners, der hjælper dine onlinekampagner med at lykkes.
Hvis du vil læse andre artikler, der ligner Bedste Adobe Program til Digitale Banners, kan du besøge kategorien Design.
