GIF-filer finns överallt. De en gång ödmjuka animerade bilderna är nu det inofficiella språket på internet. GIF-animering är mest snabbt sätt uttrycka känslor på Twitter, och vi kan också spendera timmar på att titta på det, bläddra igenom nyhetsflödet på VK, Facebook eller Odnoklassniki.

Det finns ett ganska stort antal webbplatser där du kan hitta färdiga GIF-filer om en mängd olika ämnen. Men ingenting kan jämföras med GIF-animationer som görs internt med mina egna händer. Tycker du att det här är en svår process? Du har fel, det är ganska enkelt. Skapa snabbt GIF-animation Du kan använda Photoshops grafikredigerare, konvertera en befintlig video eller använda en serie statiska bilder. Låt oss ta en närmare titt på hur detta går till.

Notera: I alla exempel i den här artikeln använder jag Photoshop CC 2017.

Först måste du starta Photoshop, gå till "Arkiv"> "Importera"> "Videoramar till lager" och välj önskad videoinspelning.

I dialogrutan som öppnas kan du importera hela videoinspelningen, eller bara välja en viss del av den. Om du väljer det andra alternativet, dra handtagen under fönstret förhandsvisning för att ställa in start- och slutpunkter. Den del av videon mellan dessa handtag kommer att importeras.

Notera: Tänk på att ju mer video du importerar, desto större blir din GIF. Om du också importerar en video som är för lång är det ett enkelt sätt att minska storleken genom att välja Keep Every 2 Frames (eller fler) utan att påverka kvaliteten för mycket.

Se till att kryssrutan Skapa bildruta-för-bildruta-animering är markerad och klicka sedan på OK. Videoimportprocessen börjar. Detta kan ta lite tid, beroende på klippets storlek. När importen är klar öppnas den Arbetsyta, där varje videobild kommer att placeras på sitt eget lager.

Längst ner på skärmen finns en tidsskalapalett. Den visar alla ramar som kommer att utgöra din GIF-animation.

Du kan lägga till och ta bort ramar som du vill, eller redigera något av de befintliga lagren precis som du skulle redigera lager i vilken annan bild som helst. För att förhandsgranska din GIF-animation klickar du helt enkelt på Play-knappen längst ned på tidslinjen.

Slutresultatet borde bli ungefär så här:

Skapa GIF-animationer från en serie statiska bilder

Om du inte har videomaterial att använda som grund för din GIF-animering kan du skapa en manuellt från en serie statiska bilder. Det är lite mer komplicerat, speciellt om du vill göra något coolt, men grundprocessen är enkel.

Du skapar din GIF från en enda bildfil som innehåller flera lager. Varje lager är en separat ram för din framtida animation. Det finns två sätt att komma igång:

1. Om du redan har skapat bilder för din animation, importera dem genom att välja Arkiv > Skript > Ladda filer i stack.... Klicka på Bläddra och välj dina bilder och klicka sedan på OK. Varje bild kommer att placeras på ett separat lager i samma fil.
2. Om du inte har skapat bilder än, gör det nu. Kom ihåg att varje enskild bild är en del av den framtida animeringen.

Nu är du redo att börja skapa animationer.

Animera statiska bilder

Så här fungerar det. När du manuellt skapar en animeringsram ingår alla synliga lager i den. Lager som är inaktiverade kommer inte att inkluderas i den genererade ramen.

För att skapa den första ramen, gör det allra första lagret synligt och stäng av alla andra. Sedan, när du skapar den andra ramen, gör du det andra lagret synligt, och sedan det tredje lagret på den tredje ramen, och så vidare. När du väl har börjat blir allt tydligare.

För att börja skapa en animation, öppna tidslinjen om den inte öppnas automatiskt för dig. För att göra detta, klicka på "Fönster" i den övre panelen och välj "Tidslinje" i menyn som öppnas. Klicka på "Skapa ramanimering" i mitten av panelen som öppnas. Denna åtgärd skapar den första bildrutan i din animation. I lagerpaletten döljer du lager som du inte vill ska ingå i ramen.

Klicka nu på knappen "Ny ram", vilket kommer att duplicera den föregående ramen. Göm återigen de extra lagren och gör de som ska ingå i ramen synliga.

Upprepa denna process tills du har lagt till alla ramar som behövs för animeringen.

Komplettering

Slutligen, ställ in visningstiden för varje bildruta. Välj den första bildrutan och sedan Skift-klicka på den sista för att markera dem alla. Klicka nu på nedåtpilen under en av ramarna och välj en fördröjning. Ingen fördröjning betyder att animeringen kommer att köras snabbt, medan det inställda antalet sekunder gör att bildrutorna förblir på skärmen under en viss tidsperiod.

Slutligen ställer du in loopalternativen, som du hittar längst ned på panelen Tidslinje. Den här parametern styr hur många gånger din animation ska spelas. I de flesta fall kommer du att välja alternativet "Alltid".

Klicka nu på knappen Spela längst ned på skärmen för att se den resulterande animationen. Du borde se något sånt här:

Du kan redigera ramar genom att helt enkelt välja dem och ändra synligheten för lagren (du kan också ändra opaciteten eller göra andra mer komplexa inställningar). Lägg till ytterligare lager om du behöver dem, eller klicka på papperskorgen för att ta bort dem.

När du är nöjd med resultatet kan du gå vidare till avsnittet "Spara animering" eller läsa vidare för att förbättra den resulterande animeringen.

Förbättra animering genom att lägga till mellanliggande ramar

Photoshop stöder en kraftfull interpoleringsfunktion för animering. Detta gör att du kan skapa mjukare animationer genom att automatiskt generera övergångsramar mellan två befintliga ramar. I det här exemplet ska jag gå igenom alla ramar för att ge stjärnhimlen en blinkande effekt.

För att börja, välj den första bildrutan och klicka på knappen Skapa justeringar i verktygsfältet längst ned på tidslinjen.

I dialogrutan som öppnas ställer du in objektet "Mellanliggande ramar" till värdet "Nästa ram" och för objektet "Lägg till ramar" anger du värdet efter eget gottfinnande. Ett högre värde innebär en mjukare men långsammare övergång. Klicka på "OK" för att skapa de mellanliggande ramarna.

Upprepa nu denna process för de andra källramarna du lagt till. När du kommer till den sista, ställ in "Inbetween Frames" till "First Frame". Detta kommer att bidra till att skapa en smidig övergång till början av din animationsslinga.

Photoshop kommer definitivt inte att öppna en video som tagits från en digitalkamera. Det gäller telefonvideo, video från webbkameror m.m. Svaret tyder på sig självt. Vi måste konvertera. Det finns många omvandlare, både betalda och gratis, och i grund och botten är de designade för att konvertera ett visst format till ett annat specifikt format, som omvandlarutvecklarna av uppenbara skäl inte berättar om.

Och här kommer den gratis videokonverteraren XviD4PSP 5.0 till vår hjälp, du kan ladda ner den eller på utvecklarnas officiella webbplats. För att den här omvandlaren ska fungera behöver du verktyget AviSynth 2.5.7, som kan laddas ner.

Vi installerar dessa två program på vanligt sätt.

Här är gränssnittet för denna underbara omvandlare:

Öppna programmet. Klicka på Arkiv-->Öppna och välj filen. I huvudprogramfönstret måste du välja följande inställningar:

• Format - AVI DV PAL
• Färgkorrigering och filtrering - avaktiverad
• Videokodning - DV-Video
• Ljudkodning - bryr dig inte

Och klicka på knappen "Koda". Programmet kommer att uppmana dig att välja en spara-mapp, välj den, OK. Vi får en fil med dvsd DVC/DV Video-codec i DV Type 2 AVI Multipart OpenDML AVI-behållaren. Med 90 % sannolikhet kommer Photoshop att äta videor med dessa parametrar.

Låt oss gå vidare till nästa problem. Detta är filstorleken. Faktum är att Photoshop, när man öppnar en video i lager, använder Bagge dator Om du har x64, då finns det inga frågor, du kan installera brickor upp till 128GB. Men av olika anledningar kan folk inte byta till x64 och sitter tyvärr på x86, inte för att de inte kan byta eller religionen inte tillåter, utan av andra helt objektiva skäl. Till exempel, författaren till dessa rader, med all sin höga önskan om det vackra och nya, använder inte x64 på grund av bristen på warez-plugins för 3ds max för det. Vi avviker dock.

Naturligtvis, för uppgifter som utförs med Photoshop, krävs inga långa videor, men endast några dussin bildrutor behövs som mest. Men de måste skäras bort på något sätt. Vanliga videoredigerare som Adobe Premiere Pro kräver kunskap och erfarenhet och tar också upp betydande resurser från RAM och processor. Jag skäms helt enkelt över att säga att de är betalda (och kostar mycket). Kort sagt, för sällsynt användning är det ingen idé att bråka med sådana program. Enkla redigerare som standard Movie Maker låt mig inte kommentera.

Men det finns ett utmärkt lättviktsprogram som heter VirtualDub, men med en nackdel. Det fungerar med en mycket begränsad uppsättning AVI-codecs. Och här minns vi återigen om XviD4PSP-omvandlaren. Med inställningarna som anges ovan kommer videon att fungera med den. Vi väljer de nödvändiga delarna av videon, klipper ut dem, sparar dem och öppnar dem i Photoshop. Du kan göra det på olika sätt, spara enskilda videorutor med VirtualDub och sedan sammanställa en animation från dem i Photoshop. Lägg till exempel de inlärda filerna i en mapp och öppna dem i omgångar i Photoshop i ett dokument på olika lager, men som regel tar detta mer tid, men i alla fall kan vi inte klara oss utan XviD4PSP-omvandlaren.

Tidigare på sajten tittade vi på tredjeparts, men de flesta av dem kan enkelt ersätta vanliga Photoshop. Animerade GIF-filer kan skapas ganska enkelt och snabbt med dess hjälp. De består vanligtvis av flera bilder (ramar), som, när de ändras steg för steg, bildar det slutliga resultatet. Idag kommer vi att försöka överväga denna fråga från A till Ö så detaljerat som möjligt:

Skärmbilderna nedan är från Photoshop CC, men att arbeta med GIF-animering i CS6 och andra versioner av programmet är liknande, plus eller minus. Kanske de visuella verktygen kommer att vara något annorlunda, men i allmänhet är principen och algoritmen för åtgärder lika. Tänk som ett exempel på den triviala uppgiften att skapa en GIF-animation i Photoshop från fotografier som ersätter varandra. Nyligen, med hjälp av den här guiden, gjorde jag en gif om mina äventyr för det sista inlägget för 2016 på min personliga blogg.

Processen tog bokstavligen 5-10 minuter. Det viktiga här är att bara följa alla steg noggrant. I slutet av inlägget hittar du en engelsk videohandledning om detta ämne.

Lägga till GIF-animationsbilder i Photoshop

Först och främst måste du ladda in grafikredigerare alla bilder/foton som kommer att delta i animeringen. Lägg till dem i ett projekt i olika lager - detta kommer att vara ramarna för den resulterande GIF-filen. Kontrollera storleken på bilderna och deras visning så att allt blir som du behöver. Lager kan döljas (med hjälp av ögonikonen till vänster om lagret) för att se alla objekt.

I mitten av denna panel finns en rullgardinslista där du måste välja alternativet "Skapa ramanimering" och klicka på knappen. Som ett resultat av denna åtgärd kommer tidslinjen att ändras lite, och du bör se bilden från det översta lagret som den första bildrutan.

I nästa steg väljer du alla lager i projektet (klicka på dem medan du håller Ctrl-tangenten). Därefter öppnar du snabbmenyn i det övre högra hörnet av tidslinjefönstret och väljer "Gör ramar från lager".

Från alla synliga och utvalda Adobe lager Photoshop kommer att skapa animerade GIF-ramar. Som ett resultat kommer du att se dem i tidslinjepanelen.

GIF-animationsinställningar i Photoshop

Här måste du ange 2 saker: varaktigheten för visning av olika ramar + antalet repetitioner av gif. Låt oss börja med den första. Under varje bildobjekt i tidslinjen hittar du visningstiden och en nedåtpil. Klicka på dem och välj kortets varaktighet i popup-menyn.

Du kan ange olika tidpunkter för element eller ställa in parametern för flera av dem samtidigt (gemensamt val som i lager - med Ctrl).

För att "loopa" en GIF i Photoshop när du skapar en animation, välj värdet Forever i lämplig inställning som visas i skärmdumpen nedan.

Där kan du också ange valfritt antal repetitioner du behöver. I närheten finns Play-knappen, som låter dig spela en animerad GIF och se hur det slutliga resultatet kommer att se ut.

Sparar GIF-animation i Photoshop

I den sista delen av vår guide kommer vi att titta på hur man korrekt sparar GIF-animationer i Photoshop. För detta ändamål används det välbekanta verktyget Save for Web, men i senaste versionerna Adobe Photoshop CC den finns på en ny menyplats (Arkiv - Exportera). Lyckligtvis fungerar Alt + Shift + Ctrl + S fortfarande.

I inställningsfönstret som öppnas måste du välja GIF-format, och även se till att inställningen Looping Options är inställd på Forever. I det nedre högra hörnet av fönstret finns det ett alternativ att köra den animerade GIF som du skapade i Photoshop för en förhandsvisning.

Om allt fungerar som förväntat, klicka på Spara och spara filen till lokal dator. För att kontrollera funktionen hos en GIF måste du öppna den i en webbläsare, eftersom... Den inbyggda Windows-visningen spelar inte upp animationer.

Förresten, du kan också enkelt exportera ditt projekt till videoformat. Proceduren är densamma som när du sparar GIF-animation, men i Photoshop-menyn väljer du Arkiv - Exportera - Rendera video.

I fönstret som öppnas kommer det att finnas olika inställningar video, men du behöver inte ändra något mer, klicka bara på Render-knappen. Som ett resultat kommer du att få en mp4-fil med ett bildspel med foton/bilder.

Slutligen föreslår vi att du tittar på en engelskspråkig videohandledning om att skapa animerade GIF-filer i Photoshop. Algoritmen för att arbeta där är densamma som i artikeln, men kanske blir det lättare för dig att uppfatta informationen från videon.

Om du fortfarande har några frågor om hur man gör GIF-animationer i Photoshop eller har några tillägg, skriv i kommentarerna.

GIF-formatet är mycket vanligt på Internet. Skälen till så hög popularitet är enkla: GIF-filer har en mycket bra komprimeringsalgoritm, stödjer transparens och gör det möjligt att skapa både enkla och komplexa animationer och reklambanners.

Men samtidigt finns det ett par problem, det viktigaste är behovet av att ändra GIF-storleken. Detta väcker frågan: hur man minskar eller ökar storleken på en GIF? Hur redigerar man GIF? Ska jag till exempel beskära filen? I fall vi arbetar med ordinarie JPG-fil, sådana problem uppstår inte - trots allt, i någon, även den enklaste redigeraren, med ett par klick kan vi ändra bildstorleken eller beskära en onödig del. Hur redigerar man GIF? När allt kommer omkring låter de flesta redigerare bara arbeta med stillbilder.

För att lösa detta problem erbjuder vi dig vår unika redigerare - GIF Resizer. Med dess hjälp kan vi snabbt och enkelt ändra storleken på en GIF-fil - minska eller öka den vid behov. För att göra detta, följ några enkla steg:

• Klicka på knappen "Ändra storlek".
• Lägg till en GIF med hjälp av knappen Bläddra.
• Ange den höjd och bredd du behöver.
• Klicka på Använd.

Några sekunder – och storleken på GIF-animationen blev den storlek du ville ha!

Hur konverterar man GIF till JPG och delar upp det i ramar?

En annan nyans som många användare har när de arbetar med GIF är behovet av att dela upp det i ramar. Dessutom är det inte så svårt att göra en GIF från JPG. Men hur konverterar man GIF till JPG? Eller konvertera till PNG?

När du står inför en sådan uppgift kan du vända dig till GIF Resizer igen. Genom att använda den för att ändra storlek på, förminska eller förstora en GIF kan du omedelbart bryta ner GIF:en till ramar och på så sätt konvertera den animation du behöver till JPG.Handlingssekvensen förändras inte - allt händer snabbt och enkelt:

• Väljönskad animation.
• Klick på knappen "Decompose into frames".
• Njut av resultatet!

GIF Resizer-redigeraren ger dig en utmärkt möjlighet att spara tid och ansträngning när du arbetar med GIF-filer. Vad du än behöver - ändra storlek, beskära, förminska eller förstora, dekomponera GIF till ramar, konvertera till JPG, JPEG, konvertera till PNG - vår applikation står alltid till din tjänst! GIF Resizer-redigeraren låter dig lösa följande problem:

• Hur ändrar man storleken på en animerad gif?
• I vilket program kan du ändra storlek på en animerad bild?
• Hur minskar man storleken på en GIF-bild?
• Hur minskar man storleken på en animerad bild?
• Hur ändrar man formatet på animerade bilder?
• Hur tar man bort en logotyp från en animerad bild?

För att få mycket fler alternativ med den kostnadsfria onlineanimeringsmaskinen Gif-bilder Resizer – registrera dig bara på vår hemsida!

Du kan fortsätta skapa Gif-animationer, även om du var tvungen att avbryta ditt arbete under ditt tidigare besök på resursen. När allt kommer omkring kan du alltid hitta alla dina skapelser på sajten! Och de bästa GIF-animationerna som du kunde skapa med vår gratis online-program Gif Resizer kommer att hamna i sajtgalleriet och kommer att kunna bli en källa till din personliga stolthet.

Jag tror inte att någon har haft lusten då och då göra om / avsluta / ändra lite hittade gif-bild.

Säkert många människor känner till situationer som:
- Det verkar som en trevlig färdig animerad avatar, men jag önskar att jag kunde sakta ner den lite...
– Jag önskar att jag kunde skriva något på den animerade bilden...
- det skulle vara trevligt att ha en gif-storlek - gör bilderna mindre...
- etc. och så vidare.

Så vi ska titta på dessa frågor idag.

Förra gången vi, idag kommer vi ändra en färdig animerad GIF för att passa dina behov.

Inför detta "problem", men redan när jag visste hur man skapar en animerad GIF, föreslog jag var och hur det är möjligt att ändra GIF. Jag hittade omedelbart ett par gifs på Internet och kollade min gissning - det visade sig vara korrekt. Men låt oss börja i ordning.

Så du har en färdig animerad bild. Låt oss överväga tre alternativ för att ändra det (enligt min mening är det här de mest populära fallen):
1. Låt oss sakta ner animeringen.
2. Låt oss skriva något på bilden.
3. Ändra storleken på bilden.

Ändra animeringshastigheten i GIF-bilden.
(ändra hastigheten på blinkande bilder)

Det händer ofta att jag gillar till exempel någon form av animerad avatar, men det är för mycket rörelse och jag vill bromsa det åtminstone lite. Detta är vad vi kommer att göra nu. Även om alternativet med ökande hastighet animationer är absolut samma sak.

Öppna gif-filen av intresse för oss i Adobe ImageReady: Fil(fil) – Öppen(Öppen) - …

Låt oss nu titta på panelen Animationer

Vi tittar noggrant på den här rullen och ser den under alla"frame" är tiden (i detta fall är den inställd på 0,17 sekunder).

Detta är indikatorn vi behöver ändra, klicka på kryssrutan och en rullgardinslista visas där vi kan ställa in visningslängden vi behöver alla bildrutor individuellt (eller alla på en gång, markera alla bildrutor samtidigt som du håller ned Skift-tangenten på tangentbordet).

Här och omedelbart kan vi se vad som hände - det finns mer nedan spelarens knappar– titta på animationen i huvudfönstret öppna fil(inte i denna rulla).

Om du är nöjd med allt, spara sedan resultatet: Fil - Spara optimerat som...- Och se vad som hände.

OK

OK

Om inte, fortsätt att ändra längden på ramarna tills du får det du vill ha.

Det är allt!

Om du märkte det, i den nya GIF signaturen togs bort i det nedre högra hörnet. Detta är vad vi kommer att göra nu, bara vi kommer att lägga till en inskription till bilden, snarare än att ta bort den.

Vi skriver ord på den animerade avataren (bild).

Öppna in Adobe ImageReady animerad avatar: Fil(fil) – Öppen(Öppen) - …

Denna gif har bara 2 ramar(och 2 lager). Och allt vi behöver göra är att lägga till en inskription. Detta görs mycket snabbt.

Vi skriver "rätt ord" på bilden på rätt plats med hjälp av verktyget Text(som i Photoshop) skapas ett nytt lager automatiskt i listan över lager.

Låt oss göra det från text rasterbild: i menyn Lager - högerklicka på lagret med texten och välj Rasterisera lager från rullgardinsmenyn - och texten har slutat att vara text, nu är det bara ett grafiskt element som har en (!) färg, vilket är mycket viktigt för filens vikt.

Låt oss nu titta på panelen Animationer(Animation) i det nedre vänstra hörnet av programfönstret (som standard visas det där). Om det inte finns där, måste du få denna "rullning" (panel): i menyn Fönster, välj Animation.

Eftersom det bara finns två ramar är det bättre att skapa dem på nytt:

Öppna rullgardinsmenyn för animering och välj Ta bort ram(Radera ram).

Vi har bara en ram kvar av dem. Låt oss "ställa in" det - vi vill se den första bilden (lager 1) och inskriptionen - lämna dem påslagna (ögat bredvid lagret är påslaget) och stäng av det "onödiga" lagret för nu (klicka med vänster musknapp).

Den första ramen är klar.

Skapa en kopia av den (genom att välja Kopiera ram i rullgardinsmenyn eller motsvarande knapp till höger om "spelaren").

Dök upp andra ramen- ställa upp:
- inskriptionen ingår
- Lager 1 inaktiverat
- Lager 2 aktiverat

Tja, det är i princip det. Starta spelaren och du kommer att se att en inskription nu visas på din animerade avatar.

Om du är nöjd med allt, spara sedan resultatet: File - SaveOptimizedAs...

Du kan stänga av ordet i den andra ramen - då kommer det också att "flimma".

Och om jag vill att bilden ska "flimma" bokstäverna i ordet lades gradvis till?

Vi skär ordet i separata bokstäver (kopiera lagret med ordet och på varje efterföljande lager raderar vi en bokstav mindre - det första lagret - den första bokstaven i ordet är kvar, det andra lagret - 2 bokstäver, etc. för hela lager). För att göra detta, ta tag i lagret med ordet och dra det till ikonen längst ner i listan med lager - lagret kopieras och visas i listan.

Alla ändringar i ett lager görs när lagret som ändras är aktivt, d.v.s. du är på den (vänsterklicka på lagret så kommer det att markeras i en mörkare färg).

Nu återstår bara att skapa nya ramar och på varje efterföljande inkludera ett lager med den tillagda bokstaven. Slå samtidigt på/av lager 1 och lager 2 växelvis (så att inte bara ordet utan även bilden ändras).

Här är vad vi fick: