At tilføje animation og bevægelse til dine digitale annoncer er en yderst effektiv måde at skabe interesse på og øge din klikrate. Udover at fange opmærksomheden, tilføjer det også et element af historiefortælling til dine ellers statiske annoncer. Hvis din designproces involverer at have alle de forskellige annoncestørrelser samlet i én fil for nemt overblik, så er Photoshop et fremragende værktøj til at skabe og eksportere dem som GIF'er.
Her er en detaljeret gennemgang af, hvordan du skaber flere animerede annoncer ved hjælp af Photoshops funktioner:
Opsæt dine Artboards
Det første skridt er at organisere dit arbejdsområde ved at oprette artboards for hver annoncestørrelse, du har brug for. Brug Artboardværktøjet til at tegne hvert artboard, og giv dem tydelige navne, der angiver størrelsen eller formålet. Det er vigtigt at give dig selv tilstrækkeligt med plads omkring hvert artboard, især hvis du planlægger at animere elementer, der bevæger sig ind på eller ud af annoncen. Hvis du er ny til at arbejde med flere artboards i Photoshop, fungerer de meget ligesom grupper i Lagpanelet. Hvert artboard indeholder sine egne lag, hvilket holder dit projekt organiseret, selv når du arbejder med mange forskellige versioner og størrelser samtidigt.
Design én størrelse ad gangen
Begynd med at fokusere på designlayoutet for én annoncestørrelse af gangen. En god strategi er ofte at starte med en mellemstørrelse, som f.eks. 300x250 px, og derefter skalere designet op og ned til de andre størrelser, når det primære layout er godkendt. Design alle de elementer, du planlægger at bruge i annoncen, selv dem der først skal vises senere i animationen. Flyt disse elementer uden for artboardet, hvis de ikke skal være synlige i starten. Det er også en god idé at flette elementer, som du planlægger at animere sammen. For eksempel, hvis du vil have en knap til at vokse eller krympe, flet da teksten og baggrundsformen til ét lag og navngiv det passende, f.eks. "Knap". Dette forenkler animationsprocessen betydeligt, da du kun behøver at animere ét lag i stedet for flere.
Planlæg dine animationer
Animationen styres via Tidslinjepanelet, som du finder under menuen Vindue. Dette panel giver dig fuld kontrol over, hvordan og hvornår dine lag ændrer sig over tid. Træk den nuværende tidsindikator (den røde lodrette linje) til det punkt i animationen, hvor du ønsker at tilføje en ændring. For at starte animationen skal du først trykke på stopursikonet til venstre for den egenskab, du vil animere (f.eks. Position, Opacitet, Transformation), for at oprette den første keyframe. Derefter kan du flytte den nuværende tidsindikator til et andet punkt og justere elementet (flytte det, ændre størrelse, ændre opacitet osv.). Photoshop vil automatisk oprette en ny keyframe, der registrerer denne ændring. Ved at oprette flere keyframes langs tidslinjen kan du definere komplekse bevægelser og transformationer. I et eksempel, hvor du animerer en knaps transformation, kan du sætte den første og sidste keyframe uden transformation for at skabe en problemfri løkke og derefter tilføje keyframes imellem for at definere vækst- eller krympeeffekten. Denne teknik gør det muligt at skabe effektive animationer uden at skulle lære et helt nyt animationsprogram. Du kan forhåndsvise din animation direkte i panelet ved at trykke på mellemrumstasten.
Kopier og indsæt på de andre Artboards
Når du er tilfreds med designet og animationen på den første størrelse, kan du nemt overføre elementerne til de andre artboards. Brug Lagpanelet til at kopiere lagene og indsæt dem på de relevante artboards. Du skal muligvis justere layoutet for hvert element, da annoncens størrelse er forskellig. Vær opmærksom på, at hvis du har brugt keyframes til position (f.eks. flyttet et element fra A til B), skal disse positioner sandsynligvis justeres for hvert nyt artboard, da start- og slutpositionerne vil være forskellige i forhold til det nye artboardets dimensioner. Dog vil keyframes for opacitet og transformationer (størrelse, rotation osv.) typisk overføres korrekt, hvilket sparer dig tid. Du kan se alle artboards samtidigt for at sikre, at design og animationer er konsistente på tværs af alle størrelser. Brugen af smartobjekter og links kan yderligere strømline processen, især hvis du bruger de samme billeder eller grafikker; en ændring i smartobjektet opdateres automatisk på tværs af alle forekomster på alle artboards.
Eksporter hvert Artboard som en GIF
For at eksportere hvert enkelt artboard som en separat GIF-fil, skal du først skjule synligheden af alle de andre artboards. Dette gøres ved at klikke på øjeikonet til venstre for artboardets titel i Lagpanelet. Når kun det artboard, du vil eksportere, er synligt, gå til menuen Filer > Eksporter > Gem til web (ældre). Dette åbner et dedikeret vindue til eksport af webgrafik, herunder GIF-filer.
Mange displayannoncer har strenge krav til filstørrelsen, ofte under 150 KB. Det er vigtigt at holde øje med den estimerede filstørrelse, som vises i nederste venstre hjørne af forhåndsvisningsvinduet. For at reducere filstørrelsen kan du eksperimentere med indstillingerne i højre side af vinduet. Disse inkluderer antallet af farver i GIF'en (færre farver giver mindre fil), dither (hvordan farver simuleres), web snap (tilpasning til webfarver), gennemsigtighed og lossy kompression (en form for kvalitetstab for at reducere størrelse). Sørg for, at billedstørrelsen er præcis den størrelse, annoncen skal have; undlad at skalere her. Under indstillingerne for animation kan du vælge, om GIF'en skal loope én gang eller for evigt. Brug afspilningsknappen til at forhåndsvise animationen og kvaliteten, før du gemmer. Når du er tilfreds med resultatet og filstørrelsen, tryk på 'Gem', navngiv filen korrekt, og gentag denne proces for hvert artboard, du vil eksportere.
Ofte Stillede Spørgsmål
Hvorfor bruge GIF til displayannoncer?
GIF-formatet understøtter animation og er bredt kompatibelt på tværs af webbrowsere og annoncesystemer, hvilket gør det ideelt til simple animerede displayannoncer, der skal være lette og hurtige at indlæse.
Hvordan reducerer jeg filstørrelsen på min GIF?
I 'Gem til web (ældre)' vinduet kan du reducere antallet af farver, justere dither-indstillingerne, aktivere lossy kompression og sikre, at dimensionerne er korrekte. Eksperimenter med disse indstillinger for at finde den bedste balance mellem kvalitet og filstørrelse.
Kan jeg styre, hvor mange gange min GIF looper?
Ja, i 'Gem til web (ældre)' vinduet, under animationsindstillingerne, kan du vælge 'Once' (én gang) eller 'Forever' (for evigt) for at bestemme, hvordan animationen afspilles efter første gennemløb.
Hvorfor skal jeg skjule de andre artboards før eksport?
Photoshop eksporterer baseret på det synlige indhold. Ved at skjule de andre artboards sikrer du, at 'Gem til web (ældre)' kun behandler og eksporterer indholdet fra det specifikke artboard, du ønsker som din GIF-fil.
Hvad er fordelen ved at bruge artboards i Photoshop til annoncer?
Artboards lader dig samle flere forskellige annoncestørrelser og versioner i én enkelt fil. Dette gør det nemt at administrere dine designs, sikre konsistens på tværs af størrelser og effektivisere arbejdsgangen, især når du skal kopiere animationer og elementer mellem forskellige dimensioner.
Med disse trin er dine animerede annoncer nu færdige og klar til at blive uploadet til din annonceplatform!
Hvis du vil læse andre artikler, der ligner Sådan eksporterer du Artboard som GIF i PS, kan du besøge kategorien Photoshop.