Photoshop animaties

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.


Ook leuk. Een hele game welke bestaat uit kleine animaties.

Of de site van de bekende spelletjesmaker Djeco.

Homepage Djeco

Homepage Djeco

 

 

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.

 

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

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/
https://designshack.net/articles/graphics/an-introduction-to-animation-in-web-design/

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.