Een geanimeerde achtergrond maken in Photoshop

Als u recent op sociale media bent geweest, heeft u mogelijk enkele geanimeerde afbeeldingen opgemerkt in uw newsfeed. Hetzelfde kan gezegd worden voor sommige commerciële websites en persoonlijke blogs.

In dit scenario is wat u echt ziet een geanimeerd GIF-bestand dat beweging in statische afbeeldingen mogelijk maakt. Het is een soort van hybride tussen een video en een stilstaand beeld.

Een GIF kan een handig hulpmiddel zijn om mensen te interesseren voor een foto. Als je heel creatief bent, kunnen bewegende beelden de aandacht van de kijker heel snel vastleggen. Het is dus de moeite en tijd waard om te experimenteren met geanimeerde afbeeldingen om de afbeeldingen op uw website en sociale mediaplatforms te verbeteren.

Het goede nieuws is dat GIF's echt niet zo moeilijk te maken zijn. Als je toegang hebt tot Photoshop en een paar minuten over hebt, kun je snel een geanimeerde GIF maken die aandacht zal genereren.

Voor deze zelfstudie gaan we een achtergrondafbeelding maken die de aandacht trekt.


Stap 1: pas de grootte van de afbeelding aan

Laten we beginnen met het aanpassen van de afbeelding tot 1920 px × 1080 px.


Best size for a background image


Stap 2: Upload afbeeldingen of maak ze een voor een als lagen

Als u al een paar afbeeldingen in gedachten heeft, sla ze op in een enkele map en upload ze naar Photoshop.
U kunt dit doen door te klikken op: Bestand> Scripts> Bestanden laden in stapel


Upload images to Photoshop



Vervolgens kunt u door de gewenste afbeeldingen bladeren en deze selecteren en op OK klikken. Wanneer u dit doet, maakt Photoshop automatisch afzonderlijke lagen voor elke afbeelding.

Je kunt meegaan als je de beelden al hebt, maar om je een beter idee te geven, gaan we één afbeelding selecteren en vervolgens elk frame maken door individuele lagen in te stellen.

De afbeelding die voor deze zelfstudie wordt gebruikt, kan 
hier worden gedownload. Als je klaar bent, hoef je het alleen nog maar naar je Photoshop-canvas te slepen.

Als je wilt, kun je de afbeelding ook aanpassen met effecten zoals Helderheid en Contrast, enz.


Stap 3: plaats tekst in nieuwe lagen

Als u een nieuwe laag wilt toevoegen, hoeft u alleen maar op Laag> Nieuw> Laag te klikken.


New layer


Zorg ervoor dat je elke laag een naam geeft, zodat je hem gemakkelijker kunt bijhouden wanneer je bezig bent met het maken van je GIF.

Als u een naam voor elke laag wilt, gaat u naar het deelvenster Lagen rechtsonder en dubbelklikt u op de standaardlaagnaam (laag 1) en typt u een naam naar keuze in en drukt u op Enter.

Voor deze zelfstudie gaan we ongeveer 12 lagen instellen om de naam DJ K-Beast te benadrukken. De eerste laag heeft de hele naam in een lichtgrijs en de volgende 11 lagen vertegenwoordigen elke letter in het wit.


Tip: Om hier snel doorheen te komen, klik je met de rechtermuisknop op de laag en klik je op Laag dupliceren en herhaal je dit proces totdat elke letter wit is. Verder zal het ook gemakkelijker zijn als je het pictogram uitschakelt dat eruit ziet als een oog om elke laag te verbergen terwijl je door de bewegingen gaat.


Several layers


Stap 4: Stel een tijdlijn in

Nadat u elke tekstlaag hebt ingesteld, bent u klaar om een tijdlijn te openen, dus klik op Venster> Tijdlijn.

Met het gereedschap Tijdlijn kunt u verschillende lagen in verschillende perioden in- en uitschakelen. Dit zal op zijn beurt je statische afbeelding veranderen in een geanimeerde GIF.


Timeline photo


Stap 5: maak een kaderanimatie

Ga naar het tijdlijnvenster en selecteer Create Frame Animation in het drop-down menu in het midden van het venster.


Timeline window


Nu zou je tijdlijn er ongeveer zo uit moeten zien.


Timeline window with frame


Ga vervolgens naar Selecteren> Alle lagen

Zodra u dat hebt gedaan, klikt u op het vervolgkeuzemenu aan de rechterkant van de zijkant van het tijdlijnvenster en klikt u op Nieuwe laag maken voor elk nieuw frame.


Create new layer for each new frame


Zodra u dat hebt gedaan, gaat u terug naar hetzelfde vervolgkeuzemenu en selecteert u Frames maken van lagen.


Make frame from layers


Stap 6: Selecteer de tijd voor elk frame

Selecteer vervolgens onder elk frame hoe lang u wilt dat elk frame wordt weergegeven voordat u naar het volgende frame gaat. Voor deze zelfstudie gaan we met 0,1 seconden om het snel te maken.


Verder kun je ook kiezen hoe vaak je wilt dat het lus. Als u wilt dat het herhaalt, selecteert u Voor altijd.


Time for frames


Nu zul je merken dat er meer frames zijn dan verwacht, maar dat komt omdat de ruimte tussen de twee woorden, de achtergrondafbeelding en de effecten (als je ze hebt gebruikt) hun eigen frames vereisen.

Als je klaar bent, klik je op de afspeelknop om een voorbeeld van de GIF te bekijken. Als u tevreden bent, kunt u doorgaan naar de volgende stap en het bestand opslaan. Maar als u dat niet bent, kunt u altijd teruggaan en wijzigingen aanbrengen in een of meer lagen / frames.


Colored GIF














Stap 7: exporteer het bestand als een GIF

Als u klaar bent om het bestand op te slaan, kiest u Bestand> Exporteren> Opslaan voor internet (oud).

Kies vervolgens het type GIF dat u wilt opslaan zoals in het vervolgkeuzemenu. Als u hellingen hebt, gaat u met dithered GIF's om kleurverzadiging te ontkennen, maar als u veel kleuren hebt, kiest u geen dither.


Save as GIF























Nu ben je klaar om plezier te hebben met je nieuwe GIF!