Hvis du er havnet her, fordi du undrer dig over, hvordan man laver en GIF med Photoshop, er det sandsynligt, at det video, du har uploadet til din hjemmeside, har bremset indlæsningstiden. I så fald er du kommet til det rette sted. I denne guide vil vi vise dig, hvordan du laver en GIF i Photoshop ud fra videooptagelser. Det vil se godt ud på din side og vil være meget mere optimeret til hastighed end en videofil!
Med hjælp fra en GIF kan du præsentere enhver form for video på en hjemmeside, i en loop. Det kan være et klip fra reklamemateriale, en skærmoptagelse til en tutorial eller stort set alt, hvad du ønsker.
Til denne tutorial skal du bruge noget videooptagelse og Adobe Photoshop. Hvis du ikke har et Photoshop-abonnement, kan du prøve en gratis prøveperiode. Du vil sandsynligvis opdage, at Photoshop er en stor hjælp til webdesign! Hvis din video er meget lang, kan du overveje at klippe den ned først i en videoredigerer som iMovie eller Adobe Premiere. Photoshop har også en trimningsmulighed ved import, men en videoredigerer er bedre, hvis de originale optagelser er ekstremt lange.
Lad os komme i gang.
Sådan Importerer du Video til Photoshop
For at importere videoklippet til Photoshop skal du først være inde i Photoshop-editoren. Derfra skal du klikke på Filer > Importer > Videorammer til Lag. Vælg den video, du vil bruge, og klik på Åbn.
I pop op-dialogboksen har du to valgmuligheder:
- Fra begyndelse til slut – for at bruge videoen i sin helhed.
- Kun valgt område – for at bruge trimningsmuligheden og kun bruge en sektion af videoen.
Nedenunder er der en mulighed for at begrænse importen til et valgt antal rammer. Vælg et lille antal, hvis videoen er kortere, og et større antal, hvis videoen er længere. Dette kan kræve lidt prøve og fejl, indtil du har den rette flow. For eksempel vil optagelser, der har små eller langsomme ændringer, have masser af rammer, der ser næsten ens ud. På den anden side, hvis optagelserne er hurtige med masser af visuelle ændringer, vil det se hakkende ud, hvis du fjerner for mange rammer.
For denne tutorial vælger vi 'Fra begyndelse til slut' og 'Begræns til hver 3. ramme'. Sørg for, at 'Lav rammeanimation' er markeret.
Tilpas Dine Rammer i Photoshop
Dette er det perfekte tidspunkt at foretage enhver form for justering, du ønsker, til dine videooptagelser, fra størrelsesbeskæring til justering af farveniveauer. For eksempel kan der være et grimt objekt i hjørnet af videoen, eller videoens fulde højde er for stor til, hvor du vil placere den i dit websidedesign. Alternativt, hvis videooptagelserne er overmættede, kan du bruge justeringspanelet til at justere mætningen på alle lag på én gang.
For de kreative derude vil justeringer af forskellige lag skabe alle mulige forskellige effekter til din GIF. Hvad du ikke kan gøre, er at fjerne baggrunde eller bruge værktøjer, der kun virker på ét lag ad gangen.
Pro Tip: Sørg for, at uanset hvilken justering du foretager, har du valgt alle lagene.
Sådan Beskærer du Alle Lag på Én Gang
Vælg alle lagene ved at klikke på Lag 1 og derefter, mens du trykker på shift, klikke på det øverste lag. Vælg Rektangulært Markeringsværktøj og vælg det område af videoen, som du vil beholde (ikke det, du vil fjerne). Klik på Billede > Beskær, og områderne uden for markeringen vil forsvinde. I vores video vælger vi hele videoområdet, men lader lidt i toppen være umarkeret. Vi vil gøre hele videoen mindre høj og fjerne den hvide kant af horisonten.
Sådan Justerer du Farverne i GIF'en
Med alle lagene valgt, klik på justeringstabellen i paneler-menuen. Du kan bruge ethvert af justeringsværktøjerne og anvende dem på lagene i din GIF. For eksempel kan du gøre farverne sort-hvide eller give det en duotone-effekt. Vi bruger sort-hvid-justeringen med en toning for at gøre farven på vores video lidt mere kunstnerisk. Dette er perfekt til en baggrund, der ikke vil forstyrre resten af indholdet. Du kan bruge enhver farvetoning, du kan lide, og justere de forskellige farveniveauer, som du ønsker. Bare et godt råd: hvis du tilføjer farvejusteringer, vil din endelige fil være større, end hvis du ikke gør det.
Denne GIF blev downloadet på 211MB uden farvefiltre og på 312MB med farvejusteringer. Hvis du virkelig ønsker farvejusteringerne, skal du klippe rammer ned for at gøre den endelige fil mindre. Mere om det i næste sektion.
Brug Tidslinjen til at Redigere Rammerne
Med tidslinje-vinduet kan du redigere rammerne for at mindske den endelige størrelse af GIF-filen. For eksempel ekstra rammer i slutningen af klippet, som bare ser ud til at lagge eller skabe en statisk sektion. Jo flere rammer du kan fjerne, jo bedre! Men vær forsigtig med at fjerne for mange rammer, da den endelige effekt bliver hakkende. Tag dig tid til at tjekke, hvordan loopet ser ud efter at have slettet nogle rammer.
For at få adgang til tidslinje-vinduet og se, hvordan GIF'en fungerer i en loop, klik på Vindue > Tidslinje. Et langt vandret panel åbnes i den nederste del af din skærm. I nederste venstre hjørne er der nogle kontrolelementer. Vælg loop-indstillingen som 'Evigt' og tryk på afspilningsknappen for at se, hvordan GIF'en ser ud. I vores tilfælde ser vores GIF ret god ud, men er stadig for lang. Med over 200 rammer og en farvejustering er den endelige fil på hele 312MB. Du kan tjekke størrelsen på din endelige fil ved at følge trinene i sektionen 'Gem som GIF' nedenfor. Når du har taget et kig, skal du blot trykke på Annuller i stedet for Gem. Du vil også kunne mindske filstørrelsen med 'Eksporter til Web'-mulighederne.
Sådan Sletter du Rammer for at Gøre GIF-filstørrelsen Mindre
For at gøre vores GIF meget mindre, fjerner vi de sidste 200 rammer. Den komplette video har en sektion, hvor dronekameraet drejer og panorerer til venstre mod parken bag stranden. Vi havde ikke brug for den. Nu vejer vores GIF 160MB. Stadig ret stor. Vi fjerner ikke flere rammer, fordi det vil blive hakkende, så vi lader det være, som det er, for at optimere senere med 'Gem til Web'-mulighederne.
For at slette rammer kan du vælge en og trykke på skraldespandsikonet, som er under afspilningsfunktionerne i tidslinje-vinduet. På samme måde kan du vælge en sammenhængende gruppe af rammer ved at klikke på en og derefter rammer før eller efter ved at trykke på shift+klik. Hvis du ikke vil klippe optagelser fra begyndelsen eller slutningen af GIF'en, men vil gøre den kortere, skal du slette alternative rammer ved at trykke på en og derefter command+klik på hver anden ramme.
Vi elsker, hvordan du, når du laver en GIF i Photoshop med video, kan klippe sektioner af optagelserne både ved import og bagefter! Så praktisk.
Sådan Ændrer du Hastigheden på GIF'en
Tidslinje-vinduet giver dig også mulighed for at sætte farten ned eller op på GIF'en. Hver ramme i tidslinjen har en hastighedskontrol under sig. Standardmålingen er 'ingen forsinkelse' eller '0', men det kan ske, at den video, du brugte, allerede havde en hastighedsjustering. Dette er tilfældet med vores video. Hvis du ser på skærmbilledet ovenfor, hvor vi sletter rammer, kan du se, at vores rammer har en forsinkelse på 0,04 sekunder. Når vi forhåndsviser GIF'en, ser det ud, som om den er accelereret. Det ønsker vi ikke.
Vi vælger alle rammerne i tidslinjen ved at klikke på de tre linjer i øverste venstre hjørne af tidslinje-vinduet og klikke på 'Vælg alle rammer'. På en hvilken som helst af rammerne klikker vi på den lille pil nedad og vælger 'ingen forsinkelse'. Dette vil få vores GIF til at flyde naturligt. For at skabe en GIF, der ser ud som om den kører i slow motion, skal du vælge en værdi over 1 sekund.
Gem som GIF og Optimer
Når alt er færdigt, er det tid til at gem projektet som en GIF. Klik på Filer > Eksporter > Gem til Web (Ældre) og vælg GIF-indstillingen i pop op-dialogboksen. Tjek filens størrelse og overvej dens output. Der er et par ting, du kan gøre for at reducere filstørrelsen:
- Reducer antallet af farver.
- Reducer eller fjern dither.
- Reducer højde og bredde.
For at tjekke, hvordan justeringerne ændrer din GIF, skal du klikke på knappen Forhåndsvisning. Brug fanerne 2-Op og 4-Op for at se forskellige muligheder. Du skal muligvis gå tilbage og fjerne flere rammer, hvis filen stadig er for stor. Sigt efter en filstørrelse under 20 MB. Hvis du opretter en GIF til en fuldbredde-sektion, bliver du nødt til virkelig at skære rammerne ned for at få den i en god størrelse til webbet.
En god tommelfingerregel er at holde dine GIF-filer ikke større end omkring 20 MB. Mere end det er bare for stort. Hvis det lykkes dig at krympe den til under 10MB uden at miste for meget kvalitet, så har du en vinder.
Vi endte med at slette flere rammer fra vores GIF for at få den ned til 18 MB. Derefter kørte vi den igennem GIFCompressor og reducerede den med 55%. GIFCompressor er et gratis onlineværktøj, der reducerer GIF-størrelse uden at miste kvalitet. Du kan uploade en GIF på op til 50MB i størrelse.
Ofte Stillede Spørgsmål
Kan man gemme animation i Photoshop?
Ja, du kan gemme animationer i Photoshop, især som GIF-filer, ved at bruge funktionen 'Gem til Web (Ældre)'.
Hvordan gemmer jeg en GIF fra en video i Photoshop?
Du importerer først videoen som rammer til lag via Filer > Importer > Videorammer til Lag. Derefter redigerer du rammerne på tidslinjen og eksporterer filen som en GIF ved hjælp af Filer > Eksporter > Gem til Web (Ældre).
Hvorfor skal jeg bruge en GIF i stedet for video på min hjemmeside?
GIF'er er ofte meget mindre i filstørrelse end videofiler, hvilket kan forbedre hjemmesidens indlæsningstid betydeligt, især hvis videoen var stor og ubearbejdet.
Hvordan gør jeg min GIF-fil mindre?
Du kan reducere filstørrelsen ved at fjerne rammer fra tidslinjen, reducere antallet af farver i eksportindstillingerne, fjerne eller reducere dither, eller ændre dimensionerne (højde og bredde) under 'Gem til Web'. Eksterne komprimeringsværktøjer kan også hjælpe.
Kan jeg redigere farver eller beskære videoen, efter jeg har importeret den til Photoshop?
Ja, når videoen er importeret som lag, kan du foretage justeringer som beskæring og farvekorrektioner på alle lagene samtidigt. Værktøjer, der kun virker på ét lag ad gangen, eller baggrundsfjernelse er dog ikke muligt på denne måde.
Hvordan ændrer jeg hastigheden på min GIF?
Du kan ændre hastigheden ved at justere forsinkelsen (delay) for hver ramme i tidslinje-vinduet. Vælg alle rammer og indstil forsinkelsen til 'ingen forsinkelse' for normal hastighed, eller vælg en værdi (f.eks. over 1 sekund) for slow motion.
Konklusion
Som du ser, er det ret nemt at lave en GIF i Photoshop ud fra videooptagelser. Den eneste forbehold er længden af den video, du starter med, og hvor mange rammer du fjerner. Hvis du ikke fjerner nok, vil den endelige fil være virkelig enorm, og det vil slet ikke være nogen hjælp. Det kan kræve et par prøvekørsler at få en GIF til at se ud, præcis som du ønsker det. Hvis du opretter GIF'er af skærmbilleder til tutorials, som i denne guide, vil du hurtigt få styr på det, og det bliver enklere hver gang.
Hvis du vil læse andre artikler, der ligner Skab GIF fra Video i Photoshop, kan du besøge kategorien Fotografi.