Hoe een GIF te maken

Wat je gaat creëren

Photoshop is zeer geavanceerde software, maar het heeft bepaalde hulpmiddelen die zelfs beginners gemakkelijk kunnen gebruiken om verbluffende effecten te creëren. Je hebt bijvoorbeeld geen speciale vaardigheden nodig om geanimeerde GIF's te maken! 

In deze tutorial laat ik je zien hoe je een animatie van een wolf met gloeiende ogen maakt, en dit leert je alles wat je moet weten over het maken van GIF's in Photoshop.

Wat je nodig zult hebben

U kunt elke gewenste foto gebruiken, maar zorg ervoor dat deze van hoge kwaliteit is en dat de ogen goed zichtbaar zijn. Je kunt de foto downloaden die ik hier heb gebruikt:

  • Ogen van een wolf stock foto (Envato Market)
  • Ogen van een wolf stock foto (Envato Elements)

1. Een afbeelding voorbereiden op animatie

Stap 1

GIF is geen goed geoptimaliseerd formaat en de bestanden kunnen erg snel erg groot worden. Daarom moeten we ons imago bijsnijden tot wat het belangrijkste is. Open de afbeelding, neem de Bijsnijden Tool (C), en selecteer het gedeelte van de afbeelding dat u wilt animeren. Sla dan invoeren.

Stap 2

We willen de ogen animeren, dus we moeten ze scheiden van de rest van de afbeelding. Er zijn veel methoden om iets in Photoshop te selecteren, maar ik ga je de gemakkelijkste laten zien.

Ga naar Selecteer> Kleurbereik. kiezen Voeg toe aan monster en klik op alle tinten van het oog, totdat je ze allemaal wit ziet in het voorbeeld.

Stap 3

We hebben alle gele tonen geselecteerd, maar sommige zijn te vinden in de ogenschijnlijk grijze vacht. Om ze uit te sluiten, speel met de vaagheid schuif tot er alleen maar zwart rond de ogen is. Het is erg belangrijk om dit gebied te behouden helemaal zwart!

Stap 4

Nadat u op hebt gedrukt OK, er wordt een selectie gemaakt. Zoals bij elke automatische selectie, is het echter niet helemaal correct. Ga naar Selecteer> Rand verfijnen en gebruik deze instellingen om de selectie soepeler te maken. kiezen Smart Radius en speel met de Glad en Veer opties totdat je tevreden bent met het resultaat. Dan klikken OK.

Stap 5

Kopieer de selectie naar een nieuwe laag met de snelkoppeling Besturing J.

Stap 6

Het laatste: ons imago is erg groot en het is niet wat het GIF-formaat leuk vindt (het is niet goed geoptimaliseerd en het maakt enorme bestanden!). Ga naar Afbeelding> Beeldformaat en verlaag de grootte tot iets redelijks.

2. Hoe Frame-animatie in Photoshop werkt

Stap 1

We zijn nu klaar om een ​​animatie te maken! Ga naar Venster> Tijdlijn om onze editor te openen. Druk vervolgens op Maak kaderanimatie.

Stap 2

De Tijdlijn-editor is heel eenvoudig. Klik op de pijl naast Een keer om de opties voor herhaling te onthullen. U kunt de animatie een keer, 3 keer, voor altijd of een bepaald aantal keren afspelen. Zet het op Voor altijd om het constant te laten spelen.

Stap 3

De andere belangrijke optie is de duur waarvoor één frame wordt gespeeld. Hoe lager de tijd, hoe sneller deze zal verdwijnen en hoe vloeiender de beweging, maar hoe meer frames er voor dit effect nodig zijn.

We willen een soepele overgang en we zullen veel frames hebben, dus klik anders en typ 0.06.

Stap 4

Als u een nieuw kader wilt maken, klikt u op het witte kaartpictogram in de onderste balk.

Stap 5

Elk frame onthoudt de status van de lagen afzonderlijk. Dus als je een laag in het ene frame verbergt, in het andere zal het nog steeds zichtbaar zijn. Let op: hier speelt Photoshop graag trucjes, dus begin altijd bij het eerste frame.

Verberg een laag in één frame en test de animatie door op te drukken Ruimte. Dit is het belangrijkste wat deze tool doet: het verbergt en onthult lagen volgens hun staat opgeslagen in de frames.

3. Hoe Tween-overgang in Photoshop te gebruiken

Stap 1

Maar lagen verbergen en onthullen is niet alles wat het doet! In elk frame kunnen drie andere dingen worden opgeslagen:

  • Positie
  • ondoorzichtigheid
  • Bijwerkingen

Dit betekent dat u deze dingen op één laag in één frame kunt wijzigen en in een ander frame blijft dezelfde laag intact (zorg er opnieuw voor dat u begint bij het eerste frame om verrassingen te voorkomen). En het beste is dat Photoshop in staat is om een ​​automatische overgang te creëren tussen deze toestanden van een enkele laag! Laat me je deze truc tonen op de meest effectieve van de beschikbare staten: effecten.

Maak alle lagen weer zichtbaar op beide frames en selecteer vervolgens het tweede frame en klik met de rechtermuisknop de laag met de ogen. kiezen Meng opties. Vind Kleurbedekking en controleer het.

Stap 2

Selecteer de grijze rechthoek en verander de kleur in iets helders.

Stap 3

Verander de Mengmodus naar Scherm om de ogen helderrood te maken in plaats van ze gewoon met rood te bedekken.

Stap 4

Vind Outer Glow en controleer het.

Stap 5

Geef het dezelfde heldere kleur als voorheen.

Stap 6

Maak de gloed sterker door ermee te spelen Verspreiding en Grootte.

Stap 7

We hebben nu een heel eenvoudige animatie - test deze door op te drukken Ruimte.

Stap 8

Maar het is niet echt een overtuigend effect, toch? Het zou veel beter zijn als de ogen geleidelijk zouden oplichten. Dit is waar de echte kracht van deze tool ligt! Houden Controle en klik op beide lagen om ze te selecteren. Klik op het kleine pijltje in de rechterbovenhoek en selecteer Tween.

Hoe meer frames u toevoegt, hoe vloeiender de overgang en hoe groter de animatie. 10 moet een redelijk aantal zijn.

Merk op dat je Tween alle parameters kunt gebruiken die ik eerder heb genoemd

Stap 9

Klik OK om een ​​hele reeks nieuwe frames te zien tussen de frames die u hebt geselecteerd. druk op Ruimte om de animatie te zien. Veel beter, is het niet?

Stap 10

Er is één probleem met deze animatie: de ogen vervagen te abrupt. Laten we dit oplossen door een nieuwe overgang te maken. Selecteer opnieuw de eerste en laatste frames, en Tween ze met hetzelfde aantal frames als voorheen.

Stap 11

Een laatste ding: vind het frame met de helderste ogen en verander de duur naar een hoger aantal. Hierdoor gaan de ogen langer glanzen.

Perfect!

Stap 12

Eindelijk is het tijd om de animatie op te slaan om deze aan de wereld te presenteren. Ga naar Bestand> Opslaan voor web en selecteer GIF uit de lijst met indelingen. Met de opties hier kun je de animatie optimaliseren voor een kleiner formaat.

Een bonustruc: als je wilt dat je animatie mooier is dan wat GIF-formaat te bieden heeft, kun je de speelanimatie opnemen met een soort software (of exporteren als een video), opslaan als een video en vervolgens een semi-GIF met www.gfycat.com.

Mooi!

Nu weet je hoe je een geanimeerde GIF in Photoshop kunt maken! Als je deze tutorial hebt voltooid, vergeet dan niet je resultaat te delen in het gedeelte met opmerkingen. Ik kan niet wachten om het te zien!

Op Envato Tuts + beperken we de bestandsgrootte van afbeeldingen tot niet meer dan 200 kb. U kunt echter de voltooide GIF in al zijn glorie in onderstaande videoformaat zien.