» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #99

Piranja - Een geanimeerde mascotte

Hoe kun je een mascotte ontwerpen die goed bij een bedrijf past en ook voor internet te animeren is? Dit waren de twee doelstellingen die ik had bij het ontwerpen van een mascotte voor mijn eigen bedrijf.

Wil een mascotte goed overkomen, dan moet hij natuurlijk een link hebben met het bedrijf in kwestie. Eerst heb ik allerlei voorbeelden van mascottes en figuren onderzocht: dieren, fantasiefiguren, cartoonfiguren, etc. Daarnaast heb ik de kenmerken van mijn bedrijf Ranja op een rij gezet:

Idee

Ik kwam op het idee om de kwinkslag pi-ranja te gebruiken. De 'echte' piranha is een klein visje dat bij de meeste mensen bekend is door de spectaculaire verhalen die de ronde gaan over het dier. Misschien gaat dat voor mijn bedrijfje ook wel op... Maar de grootste overeenkomst is toch de naam. Pi-ranja klinkt in Nederland fonetisch hetzelfde als piranha. Het Pi-teken is een mooi symbool om te zien en Ranja is natuurlijk mijn bedrijfsnaam.

Als uitgangspunt nam ik een foto van de echte piranha. Om een originele mascotte te krijgen, kun je beter van de realiteit uitgaan dan van een tekening die al door iemand anders bedacht is.

[Foto] Piranha
© Wereld Natuur Fonds
uit: http://www.wnf.nl/dierenbibliotheek/

Schetsen

Het echte uiterlijk van de vis maakt het niet makkelijk: in tegenstelling tot de spectaculaire verhalen ziet het visje er in het echt nogal saai uit. Dus moest ik putten uit mijn fantasie om het gekker te maken. Veel schetsen dus. Hieronder staan slechts enkele voorbeelden. Bij het schetsen is het al belangrijk om te bedenken welke onderdelen van de vis geanimeerd gaan worden.

eerste schetsen piranja

Omdat de tanden van de pi-ranja extra tot de verbeelding moeten spreken gaf ik de vis een overbite. Bij de derde schets heb ik al rekening gehouden met het animeren door losse onderdelen te tekenen. Deze schets besloot ik uit te gaan werken in Adobe Illustrator, en dat doe ik in de kleuren van mijn huisstijl zodat de eenheid van mijn uitingen goed bewaard blijft.

Vormgeving

De schets plaats ik als afbeelding in Illustrator (in een aparte laag, laagopties: afbeelding dimmen naar 50%). In een nieuwe laag trek ik de losse onderdelen over. Onderstaande afbeelding laat de losse onderdelen zien.

eerste ontwerp piranja mascotte

Opnieuw schetsen en vormgeving

Toch was ik niet tevreden over het resultaat. In mijn enthousiasme om het gekker te maken, was ik te veel van de echte piranha afgedreven. De vorm van het lijf was ook niet goed te animeren. Aangezien ik geen last had van een deadline en het wel echt goed wilde hebben, besloot ik opnieuw te beginnen.

vernieuwde schets piranja

Door de vis gewoon na te tekenen van een foto kwam ik erachter dat de echte piranha een kleine maar heuse centenbak heeft en niet een overbite zoals ik eerst dacht. Dat leverde meteen een aantal geschikte schetsen op die ik uit kon gaan werken.

uitgewerkte schets piranja

Op dit moment moet je dus al bedenken welke onderdelen van de tekening geanimeerd gaan worden. De mond bleek lastig te animeren, omdat deze in het lijf verwerkt is. Mijn kennis van Flash was niet groot genoeg om alles uit de kast te trekken, dus besloot ik dat simpel te houden en een blije en een verdrietige versie van mijn vis te maken (zie uitwerking). De ogen en de vinnen leken mij voldoende om uit te werken. Zo wordt het animeren niet te moeilijk en de humor zit dan in de subtiele oog- en zwembewegingen.

De lijnvoering van het vorige ontwerp vond ik te saai. Bovendien wilde ik dunne en dikke lijnen variëren. De definitieve schets werd weer in Illustrator geplaatst en overgetrokken:

eind versie piranja

Ik tekende er een extra gesloten oog bij en een verdrietige mond. Hieronder zijn weer alle losse onderdelen te zien:

eind versie piranja met losse onderdelen

Het kleurenpalet van de vis is nog steeds geheel afgestemd op mijn huisstijlkleuren. Om de link met Ranja nog groter te maken kwam ik op het idee om de vis in een glas ranja te laten zwemmen.

piranja in glas

Animeren

Nu is de mascotte klaar en kan het animeren beginnen. Voordat er ook maar iets in Flash gaat gebeuren moet er wel eerst een ‘verhaaltje’ bedacht worden. Wat gaat de vis doen? Bij mij komt er meestal vlak voordat ik in slaap val (handig, maar niet heus) een grappig verhaaltje in mijn hoofd. De volgende dag schets ik daar een klein storyboard van:

storyboard voor animatie

Het storyboard geeft een houvast bij het animeren. Op dit moment ligt het verhaal redelijk vast en de geluiden ook. In Flash maak ik een nieuw document aan en stel het formaat en de kleuren in. De losse pi-ranja onderdelen heb ik vervolgens een voor een gekopieerd en geplakt in Flash en er library-items van gemaakt d.m.v. ‘convert to symbol’. Ieder onderdeel krijgt een eigen laag en wordt vervolgens geanimeerd. Het uiteindelijke flash-filmpje is op mijn site www.anjaranja.nl te bewonderen.

Je ziet dat een mascotte ontwerpen enige tijd en studie vergt wil je tot een origineel en grappig resultaat komen!

Auteur

Anja Brand-Heemkerk

maakt o.a. illustraties, strips en vormgeving (grafisch en web). En ‘Ranja: illustratieve vormgeving’ is het bedrijf van Anja. Op www.anjaranja.nl kun je haar portfolio bekijken.

Publicatiedatum: 27 januari 2005

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs