Snel en makkelijk animated GIFs maken in Photoshop

Geschreven door Woei-Sang Tang op . Geplaatst in Design, Graphic Design

Animated GIF by NYC Photographer Jamie Beck

© Jamie Beck

Mijn allereerste blogpost! Hopelijk zal ik inspiratie genoeg hebben om meer te schrijven. Om er in te komen zal ik beginnen met een tutorial. In deze tutorial zal ik je leren om heel snel en eenvoudig animated GIFs te maken.

 

Omdat ik al wat ouder ben, heb ik nog het “Web 1.0”-tijdperk meegemaakt als beginnende webdesigner. Vroeger waren webpagina’s heel erg statisch en de enige animaties die op een webpagina gezien kon worden, waren animated GIFs. Toegegeven, er zaten soms hele mooie tussen.

Animated GIF: GarfieldAnimated GIFAnimated GIF: Vegeta

Tegenwoordig worden ze eigenlijk alleen nog maar gebruikt voor reclamebanners. In deze tutorial zal ik je laten zien hoe je heel makkelijk een animated GIF-banner kunt maken in Photoshop. Ik gebruik CS4, maar als het goed is dan werkt het ook in de oudere versies. Laten we een “Volg mij op Twitter”-banner maken.

1. Open Photoshop en maak een nieuw bestand aan (Ctrl+N of Appeltje+N), breedte is 234 pixels, hoogte is 60 pixels, resolutie 72 pixels/inch, kleurmode RGB.

2. Download op de logopagina van Twitter een mooie Twitterlogo, en open dit bestand ook in Photoshop. Selecteer de gehele logo (Ctrl+A), kopieer het (Ctrl+C), selecteer het lege bannerbestand en plak de logo in het bestand (Ctrl+V). Nu heb je de Twitterlogo mooi gecentreerd in het venster zitten.

3. Open het animation-venster (Window > Animation), en dan verschijnt onderin het scherm een tijdlijn of een frames panel. Rechtsonderin het venster zit een klein knopje, als je met je muis er over heen gaat dan staat er Convert to timeline animation of Convert to frame animation. Zorg er voor dat je de frames ziet en niet de tijdlijn.

Stap 3

Stap 3

4. Als het goed is dan zie je dat er al één frame is aangemaakt, namelijk het plaatje zelf. Klik op de Duplicates selected frames-knop, en je hebt nu 2 frames. Selecteer de tweede frame, ga naar de layers-venster, en klik op het oogje, zodat de layer niet meer zichtbaar is.

Stap 4

Stap 4

5. Ga weer terug naar het animation-venster. Onder elke frame staat de tijd hoe lang een frame zichtbaar is. Verander deze naar 0,5 seconde voor beide frames. Linksonder in het venster zit de loopings-knop om te bepalen hoeveel keren de animatie achter elkaar herhaald moet worden. Kies voor Forever. Klik nu op de play-knop om je animatie te zien. Als het goed is heb je nu een irritant knipperende logo.

Stap 5

Stap 5

6. Druk op Ctrl+Alt+Shift+S of ga naar File > Save for Web & Devices. Selecteer bovenaan het rechterkolom voor “GIF 128 Dithered” en klik op Save, en je hebt nu een mooie animated GIF gemaakt.

Irriterende Twitterlogo

Irriterende Twitterlogo

Je weet nu hoe je een animated GIF moet maken, en het is nu aan jouw creativiteit wat je met deze techniek doet.

Animated GIF by NYC Photographer Jamie Beck

© Jamie Beck. Mooie GIFs maken kunnen niet zo veel mensen, dus daarom is het zo speciaal.

Trackback van jouw site.

Laat een reactie achter


6 × = veertig twee