Natuurlijk, GIF's zijn vooral bekend om hun meme-potentieel. Maar ze zijn ook een handig, low-lift ontwerptool. We zullen het bewijzen!
Toen Steve Wilhite het Graphic Interchange Format of GIF uitvond, ben ik er vrij zeker van dat hij nooit had verwacht dat het zo'n iconisch onderdeel van de popcultuur zou worden.
Maar GIF's zijn goed voor meer dan virale memes. Sterker nog, lang voor de opkomst van memes in de stratosfeer, werden GIF's gebruikt voor veel andere zakelijke en marketingdoeleinden - en dat kunnen ze nog steeds zijn. De kleine bitmaps nemen bijna geen ruimte in beslag in vergelijking met hun high-fidelity tegenhangers, zoals JPG's of PNG's. Ze worden breed ondersteund op alle grote platforms. En ze hebben het potentieel om heinde en verre te worden geslingerd.
Dus, waar zijn GIF's goed voor, behalve dat je Twitter-volgers kakelen of een saaie e-mailketen oplichten?
Meme-vrije manieren om GIF's te gebruiken
Illustraties of diagrammen verbeteren
Het kan soms moeilijk zijn om de fijne kneepjes van hoe iets werkt over te brengen met statische beelden. Evenzo kan een grafiek of diagram geen impact hebben als er geen grote onthulling is. Een geanimeerde GIF is een leuke manier om die ervaring te verbeteren, omdat het dynamischer kan laten zien hoe het product werkt, of de klant op een onverwachte manier een gevoel van reis kan geven.
Maak tutorials (zoals deze!)
Waarom zou u in plaats van alleen een lijst met opsommingstekens van acties in uw volgende zelfstudie niet hapklare snapshots van het proces zelf aanbieden? Zie bijvoorbeeld het tweede deel van dit stuk.
Gebruikerdemo's presenteren
Iedereen houdt van een set supergladde UI-mockups. Maar hoe goed ze ook zijn, ze kunnen nooit een algemeen beeld geven van hoe een digitaal product werkt. Waarom zou u de volgende keer uw mockups niet begeleiden met een reeks geanimeerde GIF's?
Gebruik ze om te laten zien hoe uw micro-interacties werken, of hoe een gebruiker van het ene scherm naar het andere gaat. Dit maakt uw demo's aantrekkelijker en vergroot hun waarde voor belanghebbenden en ontwikkelaars.
Cinemagraphs maken
Deze animaties, waarbij slechts een klein deel van de foto lijkt te bewegen terwijl de rest stil blijft staan, zijn eenvoudig te maken en hebben onmiddellijke impact. Ze kunnen een productopname of fotoshoot benadrukken, of een kijker betrekken bij een landschap of evenement op een manier die een statische foto of volledig geanimeerde video niet alleen zou kunnen.
Geanimeerde GIF's maken
Ten eerste is het vermeldenswaard dat GIF's slechts een bestandsindeling zijn zoals .jpg, .docx, .psd of elk ander bestand dat u op een computer zou vinden. Je hebt geen dure kit nodig om ze te maken - je telefoon, tablet of laptop zal het werk prima doen - en er is een overvloed aan applicaties (zowel gratis als betaald) om geanimeerde GIF-glorie te bereiken.
U kunt op twee manieren een GIF maken:Begin met een set afbeeldingen en splits ze om de animatie te vormen. Of begin met videobeelden en converteer deze naar het GIF-formaat.
Voor de doeleinden van deze tutorial ga ik uit van de eerste. Ik gebruik Photoshop, maar als je dat programma niet hebt, zijn er andere aanbiedingen om uit te kiezen, zoals GIPHY.
Stap 1
Laten we eerst al onze afbeeldingen in Photoshop (of uw favoriete app) plaatsen. Ga voor Photoshop naar Bestand> Scripts> Bestanden in stapel laden .
De Lagen laden dialoogvenster verschijnt. Dit is in wezen een mooie activakiezer, dus klik op Bladeren . Kies je afbeeldingen en ze verschijnen in de Bronbestanden sectie. Klik op OK .
Photoshop wordt nu geopend en al uw bestanden worden in de stapel geladen, elk op een aparte laag.
Pro-tip: Herschik uw lagen zodat de eerste afbeelding bovenaan de stapel verschijnt en de laatste afbeelding onderaan. Dit is gemakkelijker dan ze later opnieuw te rangschikken. Mogelijk moet u op de laagzichtbaarheid van elke laag op "aan" of "uit" klikken. Doe dit door op het oog . te klikken icoon.
Stap 2
Ga vervolgens naar je menu-opties en kies Venster> Tijdlijn , waarmee de Tijdlijn . wordt geopend paneel, meestal onderaan uw Photoshop-venster.
Zoek het burgermenu in de rechterbovenhoek van de Tijdlijn en kies Kaders maken van lagen . Er wordt voor elke laag een afzonderlijk frame gemaakt, maar dit kan ook omgekeerd zijn. Als dat het geval is, klikt u gewoon op het burgermenu en kies Omgekeerde frames .
Stap 3
Vervolgens moet je beslissen hoe lang elk frame zichtbaar zal zijn in je geanimeerde GIF. Dit is een kwestie van persoonlijke voorkeur en ook van het type GIF dat je aan het maken bent.
Houd er rekening mee dat elk frame niet dezelfde lengte hoeft te hebben. Als je bepaalde punten wilt accentueren of versnellen, voel je vrij. Klik op de pijl omlaag onder elk frame, en je hebt opties voor snelheid (uitgedrukt in seconden).
Pro-tip: U kunt meer dan één frame tegelijk selecteren om de snelheid van alle geselecteerde frames te wijzigen - shift-klik gewoon op de frames.
Stap 4
Om te zien hoe de GIF eruit zal zien, druk je op Afspelen knop en zie de magie gebeuren!
Als je tevreden bent met je creatie, ga je gewoon naar Bestand> Exporteren> Opslaan voor web (verouderd) en er verschijnt een vrij ingewikkeld uitziend dialoogvenster. Maak je geen zorgen, je hoeft maar één optie te wijzigen.
In de Voorinstelling vervolgkeuzelijst aan de rechterkant, kies GIF 128 Dithered . Dit zorgt voor een iets grotere bestandsgrootte dan de andere opties, maar het voorkomt dat er strepen optreden in de uiteindelijke GIF.
Druk nu op Opslaan en je bent klaar!
Het grote GIF-debat
Het is onmogelijk om een artikel over GIF's te schrijven zonder het zeer energieke, langdurige debat te noemen over hoe je zelfs maar GIF zegt . In een notendop, er zijn twee kampen:degenen die het uitspreken als ghifs en degenen die het uitspreken jiffs .
Ghiffers geloof een harde G is vooral toepasselijk vanwege het woord dat de G vertegenwoordigt—grafisch , die wordt uitgesproken met een harde G .
Aan de andere kant, jiffers zeg dat wanneer een G gaat vooraf aan een I , zoals in magie , marge , oorsprong , of engine , het woord wordt uitgesproken met een zachte G .
Ondanks dat de maker zelf aan de kant van de jiffers valt , peiling na peiling laat zien dat de meerderheid van de mensen giffers zijn . De oorlog woedt voort. Nu weet je tenminste hoe je er een meme over kunt maken.
Meer over motion graphics en design, speciaal voor jou:
- NEON:gratis geanimeerd tekstletterbeeld – 36 GRATIS bewegende grafische elementen
- De sluwe en voortdurende kracht van bewegingsontwerp
- Een grafisch ontwerpersdagboek:door Japan reizen door design
- Low-Poly Design:3D-steno en grafisch ontwerptrend
- Ontwerptips die elk legitiem milieuvriendelijk merk moet weten
Omslagafbeelding via Vera Reva.