Hoe u alle frames van een GIF in Photoshop kunt bewerken. Hoe snel GIF-animatie te maken in Photoshop

Ik stel voor dat u een online editor gebruikt genaamd “ Ezgif.com", waar u niet alleen de grootte van geanimeerde afbeeldingen kunt wijzigen, maar deze ook kunt optimaliseren, d.w.z. hun gewicht kunt verminderen.

Met behulp van deze online-editor kunt u naar eigen inzicht veel banners van internet opnieuw maken en hoeft u niet aan het ontwerp te werken. Je schrijft gewoon je tekst en de banner is klaar.

Laten we hierheen komen

Online editortools "Ezgif.com"

Om GIF-afbeeldingen snel te bewerken, kun je beter een online editor gebruiken dan Photoshop. Veel mensen hebben tenslotte geen idee hoe ze met Photoshop moeten werken, maar hier kun je elke GIF-afbeelding binnen enkele minuten bewerken

De online-editor ziet er als volgt uit:

Editor "Ezgif.com" voor het bewerken van geanimeerde GIF-afbeeldingen

Het bereikt natuurlijk niet de functionaliteit van Photoshop, maar het heeft alle benodigde tools voor het bewerken van GIF-afbeeldingen.

Functies van online-editor:

1. Een afbeelding bijsnijden

2. Formaat wijzigen

3. Beeldoptimalisatie

4. Effecten toevoegen

5. Animatiesnelheid wijzigen

6. Animatie in frames (fragmenten) parseren

7. Tekst toevoegen

8. Overlay nog een afbeelding

Het lijkt een eenvoudige editor, maar wat een krachtige.

Laten we nu alle genoemde tools afzonderlijk bekijken.

Gewas: een eenvoudige online tool voor het knippen van geanimeerde afbeeldingen.

Upload de afbeelding en gebruik vervolgens uw muis om het gewenste deel van de afbeelding te selecteren dat u wilt bijsnijden. Klik dan op " Snijd het bij" en alles is klaar.

Nadat u een afbeelding heeft geüpload, verschijnt informatie erover onder de afbeelding: grootte in KB, afmetingen van de afbeelding en hoeveel frames deze bevat.

Wanneer u een foto bijsnijdt, kunt u het formaat handmatig instellen. Om dit te doen, moet u onder de afbeelding de velden “ Links», « Bovenkant», « Breedte" En " Hoogte» Voer de vereiste waarden in.

Formaat wijzigen: Met dit hulpmiddel kunt u het formaat van de afbeelding wijzigen of bijsnijden. Na verkleining blijft het beeld dezelfde kwaliteit en verandert de animatiesnelheid niet.

In de velden " Nieuwe breedte" En " Nieuwe hoogte" U moet een nieuwe afbeeldingsgrootte instellen, of u kunt eenvoudigweg het percentage (Percentage) opgeven en vervolgens op " klikken Verklein het!" De afbeelding wordt verkleind met het door u opgegeven percentage.

Met deze tool kunt u snel en eenvoudig het formaat van GIF-afbeeldingen wijzigen. Naarmate de afbeelding groter wordt, gaat de kwaliteit verloren.

Als de afbeelding na de wijziging op de een of andere manier de animatie slecht begint weer te geven, kunt u proberen een ander formaat in te stellen

Optimaliseren: en met deze tool kun je de grootte (gewicht) van het GIF-bestand wijzigen. Het gewicht van de afbeelding wordt kleiner door het aantal kleuren in elk frame te verminderen. Elk GIF-frame bevat maximaal 256 unieke kleuren, maar door de hoeveelheid kleur te verminderen kunt u een kleinere bestandsgrootte bereiken.

Optimalisatie kent vele methoden, maar u kunt de beste optie kiezen zodat de beeldkwaliteit goed blijft. Lees meer over optimalisatie op de website.

Effecten (effecten, veranderende afbeeldingskleur): Met dit hulpmiddel kunt u een afbeelding horizontaal en verticaal spiegelen.

Je kunt de afbeelding ook onder een bepaalde hoek draaien als je de graad instelt in het “ Draaien" U kunt de afbeelding een andere kleur geven, deze zwart-wit maken of een andere tint geven.

Snelheid (verander de snelheid van GIF-animatie): Deze tool is ontworpen om de snelheid van animatie te veranderen.

Als je de animatiesnelheid proportioneel wilt wijzigen ten opzichte van de huidige, gebruik dan een percentage " % van huidige snelheid", en om de vertraging tussen frames in te stellen, moet je de methode gebruiken " " Parameter " honderden seconden tussen frames» stelt de vertragingstijd tussen frames in in honderdsten van seconden (1/100)

Splitsen (GIF-afbeelding in frames splitsen): uh Deze tool is ontworpen om geanimeerde GIF-afbeeldingen om te zetten in individuele frames, waarna elk frame afzonderlijk kan worden bewerkt.

Alle frames van de geanimeerde afbeelding kunnen naar uw computer worden gedownload. Om dit te doen, klikt u met de rechtermuisknop op het frame en selecteert u vervolgens “ afbeelding opslaan als..." Je kunt ook alle frames downloaden in één zip-archief door op “ Frames downloaden als ZIP»

Schrijf (voeg tekst toe): uh Met deze tool kun je tekst toevoegen aan GIF-animaties. U kunt tekst toevoegen aan de gehele GIF-afbeelding of aan afzonderlijke frames. De tekst op de afbeelding kan met de muis worden verplaatst.

Overlay (overlay van een andere afbeelding): Met deze tool kunt u een andere afbeelding over een GIF-afbeelding heen leggen, bij voorkeur in PNG- of GIF-indeling.

Ik denk niet dat iemand dat verlangen ooit heeft gehad opnieuw uitvoeren / afwerken / een beetje veranderen GIF-afbeelding gevonden.

Veel mensen zijn vast wel bekend met situaties als:
- het lijkt een leuke kant-en-klare geanimeerde avatar, maar ik wou dat ik het wat langzamer kon doen...
- Ik wou dat ik iets op de animatiefilm kon schrijven...
- het zou leuk zijn om een ​​GIF-formaat te hebben – maak de afbeeldingen kleiner...
- enz. enz.

Daarom zullen we vandaag naar deze vragen kijken.

De laatste keer dat we dat deden, vandaag zullen we dat doen wijzig een kant-en-klare geanimeerde GIF om aan uw behoeften te voldoen.

Geconfronteerd met dit “probleem”, maar ik wist al hoe ik een geanimeerde GIF moest maken, stelde ik voor waar en hoe het mogelijk is om de GIF te veranderen. Ik vond meteen een paar gifs op internet en controleerde mijn gok - het bleek correct te zijn. Maar laten we op volgorde beginnen.

Je hebt dus een voltooide geanimeerde afbeelding. Laten we 3 opties bekijken om het te wijzigen (naar mijn mening zijn dit de meest populaire gevallen):
1. Laten we de animatie vertragen.
2. Laten we iets op de foto schrijven.
3. Wijzig de grootte van de afbeelding.

De animatiesnelheid in de GIF-afbeelding wijzigen.
(verander de snelheid van knipperende foto's)

Open het GIF-bestand waarin u geïnteresseerd bent Adobe ImageReady: Bestand(Bestand) - Open(Open) - …

Laten we nu naar het paneel kijken Animaties

We kijken aandachtig naar deze boekrol en zien dat eronder iedereen“frame” is tijd (in dit geval is deze ingesteld op 0,17 seconden).

Als dit niet het geval is, blijf dan de duur van de frames wijzigen totdat u krijgt wat u wilt.

Dat is het!

Als je het gemerkt hebt, in de nieuwe GIF handtekening verwijderd in de rechter benedenhoek. Dit is wat we nu gaan doen, alleen zullen we een inscriptie aan de foto toevoegen in plaats van deze te verwijderen.

We schrijven woorden op de geanimeerde avatar (afbeelding).

Open binnen Adobe ImageReady geanimeerde avatar: Bestand(Bestand) - Open(Open) - …

Deze gif heeft alleen 2 kaders(en 2 lagen). En het enige dat we hoeven te doen is een inscriptie toevoegen. Dit gebeurt heel snel.

We hebben er nog maar één frame van over. Laten we het "instellen" - we willen de eerste foto (laag 1) en de inscriptie zien - laat ze ingeschakeld (het oog naast de laag is ingeschakeld) en schakel de "onnodige" laag voorlopig uit (klik met de linkermuisknop).

Maak er een kopie van (door te selecteren Kopieer kader in de vervolgkeuzelijst of de overeenkomstige knop rechts van de “speler”).

Je kunt het woord in het tweede frame uitschakelen - dan zal het ook "flikkeren".

En als ik wil dat het beeld “flikkert” letters van het woord werden geleidelijk toegevoegd?

We knippen het woord in afzonderlijke letters (kopiëren de laag met het woord en op elke volgende laag wissen we een letter minder - de eerste laag - de eerste letter van het woord blijft over, de tweede laag - 2 letters, enz. voor het geheel laag). Om dit te doen, pakt u de laag met het woord en sleept u deze naar het pictogram onderaan de lijst met lagen - de laag wordt gekopieerd en verschijnt in de lijst.

Nu hoeft u alleen nog maar nieuwe kaders te maken en op elke volgende een laag met de toegevoegde letter toe te voegen. Schakel tegelijkertijd afwisselend Laag 1 en Laag 2 in/uit (zodat niet alleen het woord, maar ook de afbeelding verandert).

GIF's zijn overal. De ooit bescheiden geanimeerde afbeeldingen zijn nu de onofficiële taal van internet. GIF-animatie is de snelste manier om emoties te uiten op Twitter, en we kunnen er ook uren naar kijken terwijl we door de nieuwsfeed op VK, Facebook of Odnoklassniki scrollen.

Er zijn een behoorlijk groot aantal sites waar je kant-en-klare GIF's over verschillende onderwerpen kunt vinden. Maar er gaat niets boven GIF-animatie die je zelf hebt gemaakt. Denk je dat dit een moeilijk proces is? Je hebt het mis, het is heel simpel. U kunt snel een GIF-animatie maken in de grafische editor van Photoshop, een bestaande video converteren of een reeks statische afbeeldingen gebruiken. Laten we eens nader bekijken hoe dit wordt gedaan.

Opmerking: In alle voorbeelden in dit artikel gebruik ik Photoshop CC 2017.

Eerst moet u Photoshop starten, naar “Bestand” > “Importeren” > “Videoframes naar lagen” gaan en de gewenste video-opname selecteren.

In het dialoogvenster dat wordt geopend, kunt u de gehele video-opname importeren, of slechts een bepaald deel ervan selecteren. Als u de tweede optie kiest, sleept u de handvatten onder het voorbeeldvenster om het begin- en eindpunt in te stellen. Het gedeelte van de video tussen deze handvatten wordt geïmporteerd.

Opmerking: Houd er rekening mee dat hoe meer video je importeert, hoe groter je GIF zal zijn. Als u een video importeert die te lang is, is het kiezen van 'Bewaar elke 2 frames' (of meer) een gemakkelijke manier om de grootte te verkleinen zonder de kwaliteit al te veel te beïnvloeden.

Zorg ervoor dat het selectievakje Frame-voor-frame-animatie maken is ingeschakeld en klik vervolgens op OK. Het video-importproces begint. Dit kan enige tijd duren, afhankelijk van de grootte van de clip. Zodra het importeren is voltooid, wordt een werkgebied geopend waarin elk frame van de video op een eigen laag wordt geplaatst.

Onderaan het scherm bevindt zich een tijdschaalpalet. Het toont alle frames waaruit uw GIF-animatie bestaat.

U kunt naar eigen inzicht kaders toevoegen en verwijderen, of een van de bestaande lagen bewerken op dezelfde manier waarop u lagen in een andere afbeelding bewerkt. Om een ​​voorbeeld van uw GIF-animatie te bekijken, klikt u eenvoudig op de knop Afspelen onder aan de tijdlijn.

Het eindresultaat zou ongeveer zo moeten zijn:

GIF-animatie maken van een reeks statische afbeeldingen

Als u geen videobeelden heeft die u als basis voor uw GIF-animatie kunt gebruiken, kunt u er handmatig een maken op basis van een reeks statische afbeeldingen. Het is iets ingewikkelder, vooral als je iets cools wilt maken, maar het basisproces is eenvoudig.

U maakt uw GIF uit één afbeeldingsbestand dat meerdere lagen bevat. Elke laag is een afzonderlijk frame van je toekomstige animatie. Er zijn twee manieren om aan de slag te gaan:

1. Als u al afbeeldingen voor uw animatie heeft gemaakt, importeert u deze door Bestand > Scripts > Bestanden in stapel laden te kiezen.... Klik op Bladeren, selecteer uw afbeeldingen en klik vervolgens op OK. Elke afbeelding wordt op een aparte laag binnen hetzelfde bestand geplaatst.
2. Als u nog geen afbeeldingen heeft gemaakt, doe dat dan nu. Vergeet niet dat elke afzonderlijke afbeelding deel uitmaakt van de toekomstige animatie.

Nu bent u klaar om te beginnen met het maken van animaties.

Het animeren van statische afbeeldingen

Hier is hoe het werkt. Wanneer u handmatig een animatieframe maakt, wordt elke zichtbare laag daarin opgenomen. Lagen die zijn uitgeschakeld, worden niet opgenomen in het gegenereerde frame.

Om het eerste frame te maken, maakt u de allereerste laag zichtbaar en schakelt u alle andere uit. Maak vervolgens bij het maken van het tweede frame de tweede laag zichtbaar, en vervolgens de derde laag op het derde frame, enzovoort. Als je eenmaal begint, wordt alles duidelijker.

Om te beginnen met het maken van een animatie, opent u de tijdlijn als deze niet automatisch voor u wordt geopend. Om dit te doen, klikt u op “Venster” in het bovenste paneel en selecteert u “Tijdlijn” in het menu dat wordt geopend. Klik in het midden van het paneel dat wordt geopend op 'Frame-animatie maken'. Met deze actie wordt het eerste frame van uw animatie gemaakt. Verberg in het Lagenpalet de lagen waarvan u geen deel wilt uitmaken van het frame.

Klik nu op de knop "Nieuw frame", waardoor het vorige frame wordt gedupliceerd. Verberg opnieuw de extra lagen en maak de lagen die in het frame moeten worden opgenomen zichtbaar.

Herhaal dit proces totdat je alle frames hebt toegevoegd die nodig zijn voor de animatie.

Voltooiing

Stel ten slotte de weergavetijd voor elk frame in. Selecteer het eerste frame en houd vervolgens Shift ingedrukt en klik op het laatste om ze allemaal te selecteren. Klik nu op de pijl naar beneden onder een van de frames en selecteer een vertraging. Geen vertraging betekent dat de animatie snel loopt, terwijl het ingestelde aantal seconden ervoor zorgt dat de frames een bepaalde tijd in beeld blijven.

Stel ten slotte de lusopties in, die u onderaan het tijdlijnpaneel vindt. Deze parameter bepaalt hoe vaak uw animatie wordt afgespeeld. In de meeste gevallen selecteert u de optie 'Altijd'.

Klik nu op de knop Afspelen onder aan het scherm om de resulterende animatie te bekijken. Je zou zoiets als dit moeten zien:

U kunt frames bewerken door ze eenvoudigweg te selecteren en de zichtbaarheid van de lagen te wijzigen (u kunt ook de dekking wijzigen of andere, complexere instellingen maken). Voeg extra lagen toe als je ze nodig hebt, of klik op het prullenbakpictogram om ze te verwijderen.

Als u tevreden bent met het resultaat, kunt u doorgaan naar het gedeelte 'Animatie opslaan' of verder lezen om de resulterende animatie te verbeteren.

Animatie verbeteren door tussenframes toe te voegen

Photoshop ondersteunt een krachtige animatie-tween-functie. Hierdoor kunt u vloeiendere animaties maken door automatisch overgangsframes tussen twee bestaande frames te genereren. In dit voorbeeld ga ik door alle frames heen om de sterrenhemel een fonkelend effect te geven.

Om te beginnen selecteert u het eerste frame en klikt u op de knop Tweaks maken in de werkbalk onder aan de tijdlijn.

In het dialoogvenster dat wordt geopend, stelt u het item 'Tussenframes' in op de waarde 'Volgend frame' en geeft u voor het item 'Frames toevoegen' de waarde naar eigen goeddunken op. Een hogere waarde betekent een vloeiendere maar langzamere overgang. Klik op "OK" om de tussenframes te maken.

Herhaal dit proces nu voor de andere bronframes die u hebt toegevoegd. Wanneer u bij de laatste komt, stelt u "Tussen frames" in op "Eerste frame". Dit zal helpen bij het creëren van een vloeiende overgang naar het begin van uw animatielus.

Eerder op de site hebben we gekeken naar versies van derden, maar de meeste kunnen eenvoudig gewone Photoshop vervangen. Met behulp hiervan kunnen geanimeerde GIF-bestanden vrij eenvoudig en snel worden gemaakt. Ze bestaan ​​meestal uit meerdere afbeeldingen (frames), die, wanneer ze stapsgewijs worden gewijzigd, het eindresultaat vormen. Vandaag zullen we proberen dit probleem van A tot Z zo gedetailleerd mogelijk te bekijken:

De onderstaande schermafbeeldingen zijn afkomstig uit Photoshop CC, maar het werken met GIF-animatie in CS6 en andere versies van het programma is vergelijkbaar, plus of min. Misschien zullen de visuele hulpmiddelen iets anders zijn, maar over het algemeen zijn het principe en het algoritme van acties vergelijkbaar. Denk bijvoorbeeld eens aan de triviale taak van het maken van een GIF-animatie in Photoshop van foto's die elkaar vervangen. Onlangs heb ik met behulp van deze gids een gif gemaakt over mijn avonturen voor de laatste post voor 2016 op mijn persoonlijke blog.

Het proces duurde letterlijk 5-10 minuten. Het belangrijkste hier is om alle stappen zorgvuldig te volgen. Aan het einde van het bericht vindt u een Engelstalige video-tutorial over dit onderwerp.

GIF-animatieafbeeldingen toevoegen in Photoshop

Het eerste dat u hoeft te doen, is alle afbeeldingen/foto's die aan de animatie zullen deelnemen, in de grafische editor laden. Voeg ze toe aan één project in verschillende lagen - dit zijn de frames voor het resulterende GIF-bestand. Controleer de grootte van de afbeeldingen en hun weergave, zodat alles naar wens is. Lagen kunnen worden verborgen (met behulp van het oogpictogram links van de laag) om alle objecten te bekijken.

In het midden van dit paneel bevindt zich een vervolgkeuzelijst waarin u de optie "Frame-animatie maken" moet selecteren en op de knop moet klikken. Als resultaat van deze actie zal de tijdlijn een beetje veranderen en zou je de afbeelding uit de bovenste laag als het eerste frame moeten zien.

In de volgende stap selecteert u alle lagen in het project (klik erop terwijl u de Ctrl-toets ingedrukt houdt). Open daarna het contextmenu in de rechterbovenhoek van het tijdlijnvenster en selecteer "Frames maken van lagen".

Van alle zichtbare en geselecteerde lagen maakt Adobe Photoshop geanimeerde GIF-frames. Als gevolg hiervan ziet u ze in het tijdlijnpaneel.

GIF-animatie-instellingen in Photoshop

Hier moet je 2 dingen opgeven: de duur van de weergave van verschillende frames + het aantal herhalingen van de gif. Laten we beginnen met de eerste. Onder elk afbeeldingsobject in de tijdlijn vindt u de weergavetijd en een pijl naar beneden. Klik erop en selecteer de kaartduur in het pop-upmenu.

U kunt verschillende tijden voor elementen opgeven of de parameter voor meerdere elementen tegelijk instellen (gezamenlijke selectie zoals in lagen - met behulp van Ctrl).

Om een ​​GIF in Photoshop te “loopen” bij het maken van een animatie, selecteert u de Forever-waarde in de juiste instelling, zoals weergegeven in de onderstaande schermafbeelding.

Daar kunt u ook het gewenste aantal herhalingen opgeven. Vlakbij bevindt zich de knop Afspelen, waarmee u een geanimeerde GIF kunt afspelen en kunt zien hoe het eindresultaat eruit zal zien.

GIF-animatie opslaan in Photoshop

In het laatste deel van onze gids zullen we bekijken hoe u GIF-animaties op de juiste manier kunt opslaan in Photoshop. Hiervoor wordt de bekende tool Save for Web gebruikt, maar in de nieuwste versies van Adobe Photoshop CC bevindt deze zich op een nieuwe menulocatie (Bestand - Exporteren). Gelukkig werkt Alt + Shift + Ctrl + S nog steeds.

In het instellingenvenster dat wordt geopend, moet u het GIF-formaat selecteren en ervoor zorgen dat de instelling Looping Options op Forever staat. In de rechter benedenhoek van het venster is er een optie om de geanimeerde GIF die u in Photoshop hebt gemaakt, uit te voeren voor een voorbeeld.

Als alles werkt zoals verwacht, klikt u op Opslaan en slaat u het bestand op uw lokale computer op. Om de functionaliteit van een GIF te controleren, moet je deze in een browser openen, omdat... De ingebouwde Windows-viewer speelt geen animatie af.

Overigens kunt u uw project ook eenvoudig naar videoformaat exporteren. De procedure is hetzelfde als bij het opslaan van GIF-animatie, maar selecteer in het Photoshop-menu Bestand - Exporteren - Video renderen.

In het geopende venster zijn er verschillende video-instellingen, maar u hoeft verder niets te wijzigen. Klik gewoon op de knop Renderen. Als resultaat ontvangt u een mp4-bestand met een diavoorstelling van foto's/afbeeldingen.

Ten slotte raden we u aan een Engelstalige video-tutorial te bekijken over het maken van geanimeerde GIF's in Photoshop. Het algoritme om daar te werken is hetzelfde als in het artikel, maar misschien is het gemakkelijker voor je om de informatie uit de video waar te nemen.

Als je nog vragen hebt over het maken van GIF-animaties in Photoshop of als je aanvullingen hebt, schrijf dan in de reacties.

Het GIF-formaat is heel gebruikelijk op internet. De redenen voor deze hoge populariteit zijn simpel: GIF-bestanden hebben een zeer goed compressie-algoritme, ondersteunen transparantie en maken het mogelijk om zowel eenvoudige als complexe animaties en reclamebanners te maken.

Maar tegelijkertijd zijn er een aantal problemen, waarvan de belangrijkste de noodzaak is om de GIF-grootte te wijzigen. Dit roept de vraag op: hoe kun je de grootte van een GIF verkleinen of vergroten? Hoe GIF bewerken? Moet ik bijvoorbeeld het bestand bijsnijden? Als we met een gewoon JPG-bestand werken, doen dergelijke problemen zich niet voor - in elke, zelfs de eenvoudigste editor, kunnen we immers met een paar klikken de afbeeldingsgrootte wijzigen of een onnodig deel bijsnijden. Hoe GIF bewerken? Met de meeste editors kun je immers alleen met stilstaande beelden werken.

Om dit probleem op te lossen, bieden wij u onze unieke editor aan: GIF Resizer.

• Met zijn hulp kunnen we snel en eenvoudig de grootte van een GIF-bestand wijzigen - indien nodig verkleinen of vergroten. Om dit te doen, volgt u een paar eenvoudige stappen:
• Klik op de knop "Formaat wijzigen".
• Voeg een GIF toe met behulp van de knop Bladeren.
• Vul de gewenste hoogte en breedte in.

Klik op Toepassen.

Een paar seconden - en de grootte van de GIF-animatie werd de gewenste grootte!

Een andere nuance die veel gebruikers hebben bij het werken met GIF is de noodzaak om het in frames op te splitsen. Bovendien is het maken van een GIF van een JPG niet zo'n moeilijke taak. Maar hoe converteer je GIF naar JPG? Of converteren naar PNG?

• De volgorde van acties verandert niet - alles gebeurt snel en eenvoudig: Selecteer
• de gewenste animatie. Klik
• op de knop "Ontleed in frames".

Hoe verwijder ik een logo uit een geanimeerde afbeelding?