Zo maak je een animerende header!

  • 19 April 2022
  • 0 reacties
  • 124 Bekeken

Badge

GIF bestanden zijn al even terug van weggeweest: de korte animatiefilmpjes die in een eindeloze loop afspelen. Je ziet ze ook steeds vaker terug op websites of in advertenties, bewegend beeld trekt immers de aandacht. Ik leg je graag uit hoe je een GIF kunt maken én plaatsen in de header van je webwinkel zodat je hier zelf mee aan de slag kunt!

 

GIF maken in Adobe Photoshop

Voor het maken van een GIF, maak ik gebruik van Adobe Photoshop. Ik hou daarbij een grootte van 665 pixels breed en 135 pixels hoog aan. Ik kies daarbij voor een zwarte ondergrond zodat mijn logo goed opvalt.

 

OLLzh5w405INKcEvm8GXyBkxDu3Qa29-jnENu8WWHS6s8NxrzkGBJFQ1nbgWloPoowlFTWAWYRos9xLPga1RNg3KMSOxn1IgGVsPwdcsQpgJmqGdnjIJ4k0a58jYgaKaF-gfKIRp

 

Onder het logo, wil ik graag een geanimeerde tekst plaatsen. De tekst wil ik één voor één in beeld laten springen. Dit kunnen bijvoorbeeld USP’s zijn of een slogan, maar ik kies in dit geval voor de werkzaamheden waar BEUNHAAS | BOUW bij kan helpen (Renovatie, Onderhoud, etc.). Ik maak hiervoor een tijdlijn aan in Photoshop. Dit kun je doen door in Photoshop op ‘Window > Timeline’ te klikken.

 

VtOOLLipxmw9ewmHPc4e0IkTmaMVccwT0uKVQ9Syt5GiW4IivJqRD8m9u8ETv5OPBgG6syWRVnu6D9bpd1VPpmIBcPy8sNWwpyoEEAX1fRH16TzqAqqB1YhV-Oje2Ix6ebEb-KuI

 

Vervolgens verschijnt er een tijdlijn onderaan het beeld met de knop ‘Create Video Timeline’. Hier kun je op klikken zodat een tijdlijn aangemaakt wordt. 

 

rnwako8PA1eamSbbOqrbvctTJTqNrEtzcfhmoFcsf-xHY-EvQCradDD1p7eYsTPBFMyUYiRb3scuxf2Fa8KAKB4_t9RZZhG1fqbCp4N197jjADyLVcKqqy7SbOj2HUGxn-GKFNku

 

Vervolgens worden je lagen opgenomen in de tijdlijn.

 

XEMbbbIsyoFJfHGIJwoq8uTl86RD1G3ZZH2s3cwLQumGjs0vLr9KIjfHC6NWxaPgYgEv4B_sGK8gKXd-OLDxep4NwTxOfUZeIpBKcAYdfhMlpqn4QO3C4LLl43T6Y-3ynYoEuRa5

 

Wanneer je nieuwe lagen aanmaakt door bijvoorbeeld tekst toe te voegen, verschijnen deze ook automatisch in de tijdlijn.

 

BLfiKzkm1JTD9JPjYTIbISN76A_8qT8kfgBbpUA67CdZD2cISB0Ke2qn99pI5oc0YBQ3ejIQQO9OyN95IqBVUjYGk20FTicePBMS0z531jzsetnjK0t7hyMWJlWHevVMbyNtrv-X

zNutzL-oe85_-ABHwlvl40s6xhhOqmLHyrpLiMFq5aw04eLtTVuDSSVNrNPR8wawdcQzQioLzXXTvdRmVr9o_cbN3DUZfQ5lPBeJspV9lYhm8AVKzBEdO-MytCwqobgYFmhTXRpu

 

Je kunt zien dat alle lagen dezelfde looptijd hebben (de paarse vlakken staan voor de looptijd). Ze lopen tot aan het einde van de animatie. Nu wil ik graag dat het logo altijd in beeld blijft, maar de teksten zoals ‘Renovatie’, ‘Onderhoud’, etc. in beeld springen. Ik sleep hiervoor de lagen in de tijdlijn kleiner, zodat ze de eerste paar frames nog niet zichtbaar zijn en later pas in beeld springen.

 

Ljra0fECm4o95f3g-Rq1yfnpTuQBp19cv_QJS2EJ5a_1OW6VavHqdrAgGHeK5_WJrz-4hmW6c0uaASx4G6NYJEyYhrQ1wmrJ4KBfPvczjiBZoo1vwK8BlwPyI6Y9OFA7U6THubQx

 

Je kunt altijd even testen hoe het eruit ziet door op de ‘play’ button te klikken zodat de animatie afgespeeld wordt (zie groen omcirkelde knop).

 

M9F4EhpFiywGfBldiDks5bqIlRtpNGPAi3ls4Gyly5f4L8A6XPT49eIvncSOVWuAo57scAJuV8Ua5WEU8dbjpDxZUU1E3ICVL-lbqrUTiJrTNkCccX64BfQSYPygW5moI76USz8M

 

Indien je tevreden bent en je het GIF bestandje graag wilt opslaan, kun je het bestand exporteren als GIF. Dit kun je doen door in Photoshop op ‘File > Export > Save for Web (Legacy)’ te klikken. Vervolgens kies je voor ‘GIF’ en klik je op ‘Save’.

 

qQARCtXa6BFAhZVbAbLwA0lIUd8KC-jpPd2NNtWOEvtkwVJg3pU4DulZCc3HfydZUrtDYH4uPaVSU7B_da3MO60NCYfvqaC3wcClFv4wR3ZKUsft7PbGLCVlKkuxUzSa8yrKjfPF

 

GIF bestand plaatsen in je webwinkel

Je GIF bestand is nu opgeslagen en klaar om te shinen! In de beheeromgeving van je webwinkel kun je nu naar ‘Instellingen / Vormgeving / Template instellingen / Header’ gaan en je GIF uploaden als headerafbeelding. Het eindresultaat voor BEUNHAAS | BOUW kun je hier terugzien: https://beunhaasbouw.myonline.store/

 

Let op: een GIF bestand met te veel animatie, lange looptijd of een te groot en te zwaar GIF bestand, werkt niet altijd in je webwinkel. Probeer in dat geval het bestand te verkleinen of de bewegingen terug te brengen zodat het bestand weer werkt in je webwinkel!


Kom je er niet uit of wil je graag een (GIF) header door ons laten maken? Stuur ons dan even een mailtje via services@mijnwebwinkel.nl o.v.v. jouw winkelnaam en vermeld hierin wat je wensen zijn. Ik maak dan graag een gave header voor je! 🤩


0 reacties

Geen reactie

Reageer