» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #63

Ontwerpproces in flash - Lijnen, layers, gradients, fills

Door de tijd heen ben ik Flash steeds meer gaan gebruiken als een spil in het ontwerpproces. Waar ik eerst veel ontwerpen en graphics maakte met behulp van Photoshop, gebruik ik tegenwoordig eigenlijk alleen maar Flash voor mijn ontwerpen. Dit heeft een duidelijke invloed gehad op de ontwikkeling van mijn ‘handschrift’.

Flash is qua tekenen nog steeds een Spartaanse ontwikkel-omgeving. De tools zijn sinds MX uitgebreid, maar nog niet te vergelijken met bijvoorbeeld Fireworks of Illustrator. Het zijn echter dezelfde beperkingen die mij juist op het goede spoor hebben gezet. Het dwingt je namelijk als ontwerper tot het maken van harde keuzes. Niet alleen omdat vector graphics worden gekenmerkt door een ‘hard’ karakter in vergelijking met het werken met bitmaps. Maar ook omdat te complex opgezette graphics de performance van de Flash Movie naar beneden kunnen halen. De keuzes die gemaakt moeten worden zijn in wezen altijd een afweging tussen wat visueel nog aantrekkelijk is en wat het minst kost aan performance en bestandsgrootte.

Op het bovenstaande zijn eigenlijk twee uitspraken van toepassing, “Kill your darlings” en “If you can’t beat them, join them”. De eerste is eigenlijk meer een algemene regel voor het ontwerpproces. Ik heb op de harde schijf zeker wel honderden illustraties en schetsen staan die ik met pijn in het hart heb moeten weglaten uit verschillende projecten. Vaak kan een illustratie op zichzelf goed werken, maar in een context van een website of presentatie helemaal dood slaan. Dan kun je nog proberen om de illustratie een beetje aan te passen. Maar als het blijft ‘jeuken’ dan is er maar 1 oplossing: resoluut weghalen en overnieuw beginnen. (Ik bewaar ze vaak wel in een archiefmap, je weet nooit waar het nog eens van pas komt).

“If you can't beat them, join them”. Dit geld in grote mate voor het werken met Flash. Zoals ik al eerder schreef zijn de ontwerptools in Flash behoorlijk Spartaans. Dit is niet zo gek als je bedenkt dat de media waar je mee werkt – lijn, vlak, hoek, curve – ook vrij basic zijn. Dat betekent dat de grootste kracht van het werken met vector graphics schuilt in het gebruik van scherpe, contrastrijke vormen in een uitgekiende compositie. Ik ben daarom opgehouden met het proberen te imiteren van allerlei Photoshop-achtige effecten in Flash. Bijvoorbeeld Blur, Glow etc. Niet dat het niet mogelijk is om deze effecten tot in grote mate na te bouwen, maar de ‘kosten’ ervan zijn dan ook erg hoog: het levert vaak grote, complexe graphics en data op. Niet handig dus.

Na jaren prutsen heb ik me een stijl aangemeten waarbij ik probeer graphics een zowel grafische als ‘realistische’ uitdrukking mee te geven. Dit vertaalt zich naar een combinatie van vette outlines en een Gradient Fill invulling. Het werkproces bestaat vaak uit 3 stadia: schetsen, outline en fills.

Fase 1: Schetsen

De schetsfase bestaat soms uit het opzetten van een ideetje op papier. Dit is vaak niet meer dan een notatie om het idee niet te vergeten. Vaak zet ik er nog wat korte opmerkingen bij om zaken te verduidelijken voor mezelf.

schets: salamander op sterk water

Afb. 1 Eerste schets Grootlicht Portfolio, Concept: salamander op sterk water. Januari 2003

De papieren schets maak ik vaak voor mijn eigen werk. In het werken voor opdrachtgevers begin ik negen van de tien keer meteen te werken in Flash. Dit is vaak puur een kwestie van tijdsdruk. Omdat ik met een Wacom Tablet werk kan ik vrij snel een grove vorm opzetten.

Ik start vaak met het neerzetten van een paar lijnen of een basisvorm van cirkels en vierkanten. Ik gebruik ook in de meeste gevallen eerst een enkele lijnkleur, vaak rood of zwart. Pas als de tekening iets complexere vormen aanneemt gebruik ik soms andere kleuren voor kleine details. Zo kan ik ze later makkelijker selecteren met een dubbelklik.

In eerste instantie gebruik ik in de opzet de lijndikte Hairline. Dit geeft een helder beeld van de graphic tijdens het tekenen. Fouten en overbodige knooppunten vallen dan ook eerder op. Als de vorm eenmaal klaar is kun je altijd de lijndikte aanpassen.

Om het verbinden van lijnen te vereenvoudigen maak ik veel gebruik van de optie Snap. Echter, tijdens het tekenen moet ik vaak wisselen van het uit- en aanzetten van de optie Snap. Ik heb daarom een eigen toetscombinatie aangemaakt die ik met mijn linkerhand kan bedienen. Met de combinatie “Control-Tab” kan ik makkelijk de Snap-optie aan- en uitschakelen. Dit scheelt een hoop geklik via de Toolbox.

Fase 2: Outline

Met verschillende lijndikten probeer ik het volume van een object te versterken. Dat wil zeggen, een dikkere lijn aan de buitenzijde van het object geeft zowel een goede afscheiding van het object ten opzichte van zijn omgeving als een idee van de dikte van het object. Ten tweede geeft de dikkere outline de toeschouwer een focus, binnen de grenzen van de dikkere lijn speelt het verhaal zich af. Dit is niet zo zeer een ontdekking van mijzelf; ik heb veel van dit soort ideeën overgenomen uit strips en manga.

oog

Afb. 2 Het concept van de salamander is vervangen door een oog op sterk water. Links de versie in Hairline, rechts de versie met diverse lijndikten

Bij de eerste opzet gebruik ik geen Fills, dat maakt het aanpassen van lijnen (Curven) tijdens het tekenen alleen maar lastig. Ik ga er van uit dat een lijntekening op zich overeind moet kunnen blijven. Dat er later kleur in zal worden verwerkt is mooi, maar in eerste instantie moet de basis, de tekening, goed zijn.

foto: glaswerk en een oog, tekening: oog op sterk water

Afb. 3 Screenshot van de Stage tijdens het maken van de schets. Het idee van de salamander is inmiddels vervangen door een oog. Beide foto’s gebruik ik als referentie.

Tegen de tijd dat de graphic qua lijntekening klaar lijkt te zijn ga ik vaak even op zoek of er overbodige knooppunten in voorkomen. Een snelle manier om dat te doen is de optie Modify > Optimize, maar dat wil nog wel eens rigoureus de graphic vervormen. In praktijk werkt het veel beter om met de optie Snap de lijnstukken die overbodige punten bevatten naar elkaar toe te trekken. Eventuele vervormingen kun je dan direct daarna corrigeren. Om een snel overzicht te krijgen van de knooppunten gebruik ik vaak de SubSelect Tool, of zet ik de Layer op Outline.

Fase 3: Fills

Na de eerste opzet in lijn ga ik verder met het plaatsen van Fills. In mijn werk maak ik veel gebruik van Gradient Fills. Door het gebruik van gradients is het mogelijk om een graphic snel van een volume te voorzien, zeg maar een 3D effect. Toch zet ik het ontwerp vaak eerst op in een dekkende kleur om een indruk te krijgen wat een bepaalde kleur doet.

oog op sterk water

Afb. 4 Eerste kleur versie

Bij het plaatsen van Gradient Fills gebruik ik vaak een combinatie van de Fill Tool en het Color Mix Panel. Eerst gebruik ik de Fill Tool om een vlak te vullen met een Gradient. Daarna selecteer ik de Fill en maak het selectieraster onzichtbaar met de toetscombinatie “Control-H”. Vervolgens pas ik de Gradient Fill aan in de Color Mix Panel tot het resultaat naar wens is. Eventueel pas ik het nog wat aan met de Fill Transform tool.

oog op sterk water

Afb. 5 Uitgewerkt naar (radial) gradients

Omdat het object ook nog dynamisch van aard is (de pupil reageert middels Action Script op de positie van de muis) zijn de verschillende onderdelen (het glazen potje, het oog, de vloeistof) apart uitgewerkt. Dit heeft een praktische reden; de pupil en het ooglid kunnen zo apart als Instances worden aangestuurd. Maar het heeft ook nog een ontwerptechnische reden. Door het glazen potje, de vloeistof en het oog apart van elkaar te maken ontstaat er een gelaagdheid die natuurlijker overkomt dan wanneer ik het geheel als een platte graphic zou hebben opgezet:

oog op sterk water

Layer opbouw van beneden naar boven:
1. de glazen pot, opgebouwd uit half-transparante gradients
2. de vloeistof, ook opgebouwd uit half-transparante gradients
3. het oog, een aparte Movie Clip bestaande uit:
a. de pupil + oogbol
b. het ooglid. De oogbol is via een masking achter het ooglid geplaatst
c. een extra schaduw over het ooglid en de oogbol
4. een highlight om de reflectie van het glas aan te geven

De gelaagdheid van halftransparante kleuren geeft meer diepte in het object. Er ontstaan kleurverlopen die onmogelijk met een enkele gradient fill te maken zijn. Het is niet anders dan wat er in de werkelijke wereld ook gebeurd; kleur, licht en schaduw van verschillende elementen beïnvloeden elkaar.

Belangrijk in het kleurgebruik is dat ik bijna nooit heldere kleuren gebruik. De kleuren zijn bijna altijd vergrijsd. Dit geldt in het bijzonder voor zwart en wit; in mijn ontwerpen gebruik in zelden puur wit of zwart. Het is altijd donkergrijs met een hele kleine toevoeging van kleur. Hetzelfde geldt voor het wit.

Om het bovenstaande voorbeeld in volle glorie te bekijken nodig ik iedereen uit om eens een bezoek te brengen aan www.grootlicht.com, je kunt het vinden in het onderdeel “about us”.

Meer lezen

Tutorial-sites en forums:
Designers:
Boeken:

Auteur

Ivo van der Grift

deed van 1995 tot 2000 de Leraaropleiding Tekenen/Schilderen aan de Hogeschool voor de Kunsten Arnhem. In 1997 zette hij de eerste stappen met Flash 3, en in 2000 richtte hij Grootlicht Interactive Design op.

Zijn werk werd o.a. gepubliceerd in ‘New Masters of Flash’ van Friends of ED (2000), ‘Web around the world’ – Web Designing (Japan, 2002), ‘Flash around the world’ – Rockport Publishing (US, 2002) en ‘Taschen’s 1000 favorite websites’ - Taschen (2003).

Publicatiedatum: 22 oktober 2003

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-2016 » NAAR VOREN en de auteurs