Animaties met Photoshop maken

Met Photoshop kun je eenvoudige animaties maken. Denk hierbij aan kleine repeterende afbeeldingen die je op je site kunt plaatsen. Ideaal voor een bannertje of om wat aandacht te trekken bij een (nieuws)items. De header afbeelding van deze post is een animatie van Guillaume Kurkdjian. Hij post wekelijks een andere animated gif. Zie http://bisouslescopains.tumblr.com/. Zeer de moeite waard!

Een veelgebruikte extensie voor animaties is “.gif”. Het grote voordeel van gif bestanden is dat gifjes transparantie en animatie ondersteunen. Het nadeel is dat een gif uit slechts maximaal 256 kleuren kan bestaan. In de praktijk blijkt dat dit voor kleine foto’s nog best acceptabel is. Gif bestanden zijn echter vooral populair voor line-art en animaties.

Via Pinterest gevonden.

Via Pinterest gevonden.

 

Laurene Boglio

Laurene Boglio http://boglio.tumblr.com/ post geregeld nieuwe gif animaties.

 

Video’tje kijken?

Een Engelstalige video maar recht-toe-recht-aan het maken van een geanimeerde gif in Photoshop.

  • Duurt ca 5 minuten en je leert:
  • het gebruik van de timeline
  • de optie Save for web
  • het loopen van een animatie

Een Engelstalige, zeer uitgebreide tutorial van ca 20 minuten waarin je het volgende leert:

  • werken met 72 dpi
  • het kiezen van een goede filenaam voor het internet
  • het gebruik van een andere brush in Photoshop
  • werken met de timeline
  • de gradient tool
  • layer styles
  • tween animation
  • je bestandsgrootte bepalen

Als gereedschap kun je Photoshop gebruiken maar indien je dit niet wilt kun je op internet diverse andere pakketten vinden waarmee je een geanimeerde gif kunt maken. Het formaat van de banner en de hoeveelheid content staan uiteraard in relatie met elkaar. Op een kleine banner kun je niet veel content kwijt, op een grote wel.

Op deze afbeelding zie je de standaard banner maten. Populair zijn echter de Wide Skyscraper (160 x 600), Leaderboard (728 x 90) en de Medium Rectangle (300 x 250). Let op de eerste maat is altijd de horizontale maat, de tweede de verticale!

Tutorials op het internet

Er zijn niet veel Nederlandstalige tutorials over het maken van een geanimeerde gif.
Via de officiële Adobe tutorial website is uiteraard informatie te vinden.
http://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht

 

Y. Bruin

In het kort komt het neer op de volgende stappen:

  1. Plaats de onderdelen voor je animatie in aparte lagen
  2. Open het timeline venster
  3. Creëer voor iedere fase in je animatie een dia
  4. Zet lagen aan/uit om per dia iets te laten zien
  5. Pas eventueel de tijd aan dat een dia zichtbaar is
  6. Exporteer je bestand met behulp van de Save for Web functie

Nu stap voor stap (met plaatjes)

Links en inspiratie

Gifjes zijn hip
http://gif2fly.com/Cool%20White%20Things.html
http://www.wired.com/2013/09/the-rise-of-subtle-tasteful-and-commissioned-animated-gif-illustrations/