Hur man skapar en semesterinspirerad animerad GIF med Stop Motion Photography

Introducerad 1987 av CompuServe är den animerade GIF lika populär idag som någonsin. GIF-animationen har gått igenom många faser genom åren. Det har blivit älskat, hatat och sedan älskat igen. Idag tycker jag att GIF-animationen har funnit sin plats som ett användbart sätt att distribuera korta och roliga animationer online. Nyligen blev jag inspirerad av en GIF som jag såg på Twitter och tyckte att konceptet skulle göra en rolig tutorial. Jag kom tillsammans med vår fotoredigerare på Tuts + för att organisera en tutorial på tvärsidan som visar hur man fotograferar stop-motion fotografering och monterar sedan dessa bilder i en animerad GIF i Photoshop. I den här handledningen visar vi hur du använder Photoshop för att snabbt montera de bilder vi sköt i fotografiet i denna handledning och skapa vår animering. Låt oss börja!


Innan du börjar

Innan du börjar, se till att gå vidare till vår fotograferingswebbplats för att lära dig hur de bilder som användes i den här handledningen sköts.

  • Hur man skjuter Stop-Motion Photography

1. Förbereda bilderna

Om du laddar ned bildsekvenserna som följer med denna handledning behöver du inte slutföra det här steget eftersom jag redan har bytt namn på bilderna för dig. Om du har skott din egen fotografi eller använder dina egna bilder, se till att du använder liknande tekniker.

Steg 1

Nu när vi har skott alla bilderna för den här handledningen. Nästa steg är att förbereda bilderna. Det snabbaste sättet att hitta GIF-animationen är att skapa 2 separata bildgrupper och öppna / importera dem till Photoshop som en bildsekvens. En bildsekvens är i princip en mapp med bilder, där varje bild heter i sekventiell ordning.

I det här fallet har jag bytt namn på alla bilder från fotografen som 0001.jpg, 0002.jpg, 0003.jpg och så fjärde. I den första uppsättningen, 0001.jpg ingår inte en båge. I den andra uppsättningen är bågen helt knuten 0001.jpg. Du kan se hur jag har gjort det här nedan.

I den andra bildsekvensen raderas 0001.jpg och 0045.jpg från mappen. Vi gör detta så att dessa ramar inte upprepas i den sista animationen.


2. Öppna första bildsekvensen

Steg 1

Nu när vi har förberett våra bildsekvenser, är nästa steg att öppna den första bildsekvensen. Du kan göra det genom att helt enkelt gå till Fil > Öppna. Bläddra till katalogen där din första bildsekvens lagras. Klicka på 0001.jpg och välj Bildsekvens checkbox. Klick Öppna. Detta laddar alla dina bilder till Photoshop som en sekvens. Försök inte att välja alla bilder i katalogen. Du behöver bara välja den första.

Steg 2

Nu vill du ställa in din Ramhastighet. Ställ den på 17, som det är bildfrekvensen vi sköt den här animationen för att springa in under fotografisektionen i denna handledning. Om du föredrar att använda en annan bildhastighet, kan du göra det.

Den första bildsekvensen ska nu laddas i Photoshop som en Videolayer. Din Lagerpanel och Tidslinjepanel borde nu likna de nedan angivna skärmdumparna. För att öppna din tidslinje och lagpaneler, gå till Fönster > Lager eller Fönster > tidslinje.


Din lagerstack ska likna den här bilden. Se till att alla lager är organiserade i en videogrupp.

Steg 3

Nu vill vi skapa en liten buffert mellan den första bildsekvensen och den andra. Vi kommer att göra detta genom att infoga 0045.jpg från den första bildsekvensen. Detta lägger till en liten paus till animeringen efter att bågen har slutat binda. Gå till Fil > Plats och välj 0045.jpg.

Denna bild kommer nu att läggas till i din tidslinje. Minska längden på klippet i tidslinjen, som visat, genom att bara dra handtagen så att den blir kortare.


Din lagerstack ska likna den här bilden. Se till att alla lager är organiserade i en videogrupp.
Varaktighet för 0045.jpg är inställd för 00:04.

3. Placera andra bildsekvens

Steg 1

Nu ska vi placera den andra bildsekvensen genom att gå till Fil > Plats. Precis som du gjorde med den första sekvensen i Avsnitt 2.1, bläddra till den andra bildsekvensen, välj 0002.jpg och välj Bildsekvens checkbox. Denna sekvens bör nu läggas till i din tidslinje.


Din lagerstack ska likna den här bilden. Se till att alla lager är organiserade i en videogrupp.

Steg 2

Nu när vi har lagt till båda bildsekvenserna, vill vi lägga till en kort buffert mellan slutet av den här sekvensen och början av den första, eftersom denna GIF kommer att ställas in för att repeteras kontinuerligt. Så precis som du gjorde Avsnitt 2.3, gå till Fil > Plats och välj 0001.jpg från den första bildsekvensen och minska dess varaktighet i tidslinje, som visat. Precis som i Avsnitt 2.3, Detta kommer att ge vår animation en liten paus innan den upprepas.


Din lagerstack ska likna den här bilden. Se till att alla lager är organiserade i en videogrupp. Varaktighet för 0001.jpg är inställd för 00:04.

Vid denna tidpunkt kan du testa din animering genom att klicka på uppspelningsknappen. Om det ser rätt ut, behöver du bara spara animeringen som en GIF.


4. Exportera din GIF-animation

Gå till Fil > Spara för webben.

Exportera filen som en GIF, ställ in Looping Options till Evigt. Jag använde inställningarna i skärmdumpen nedan.

Kom ihåg att filstorlek spelar en viktig roll i en GIF-animering. Du vill minska filstorleken så att den kan delas på webben, men inte tillräckligt så att kvaliteten på den slutliga bilden ser dålig ut. De Spara för webben dialog visar dig exakt hur stor filen är längst ned till vänster på skärmen. Du kan justera Färger, vela, Web Snap, eller någon av de andra inställningarna för att få din bild att se precis rätt.


Slutsats

Photoshop är ett extremt kraftfullt verktyg och kan hjälpa dig att skapa fantastiska GIF-animationer. I den här handledningen visade vi dig hur du inte bara skapar en GIF-animering från en serie bilder, men vi visade också hur du fotograferar också. Du kan använda samma teknik för att skapa egna GIF-animationer med stop-motion. Möjligheterna är oändliga.