Diepte creëren in ontwerp

Wanneer je een ontwerp spannend of een professioneel uiterlijk mee wil geven is het toevoegen van een derde dimensie in je ontwerp een goed idee. Nou heb ik het niet meteen over 3D animaties en rode en groene brilletjes maar over een aantal simpele ?trucjes? die je uit kunt halen met je ontwerp.

De simpelste en meest gebruikte vorm om diepte aan je ontwerp te geven is door een schaduw toe te voegen aan bepaalde grafische elementen (zoals je logo) op je website. Photoshop en andere grafische pakketten voegen met een simpele druk op de knop een schaduw toe. Andere effecten vereisen wat meer handelingen. Als we bijvoorbeeld de Google homepage bekijken zie je meteen het effect dat met een simpele slagschaduw en een zogenoemde bevel verkregen wordt. Wanneer we deze schaduw en bevel weg zouden laten zouden het logo en de website er een stuk minder spannend, zelfs onprofessioneel, uitzien.
Photoshop kent naast deze effecten nog een paar andere manieren om simpel diepte te creëren. Ook het Netters logo maakt gebruik van een combinatie van deze effecten.

Drop shadow

Een dropshadow oftewel slagschaduw is een effect waarbij een afbeelding achter zichzelf (meestal in zwart wit) wordt herhaald. Hierbij wordt de illusie gecreëerd dat de afbeelding boven de ondergrond zweeft.

Tip: Zorg ervoor dat je slagschaduw niet alleen maar aan één kant van het element zichtbaar is maar dat het aan alle kanten enigszins zichtbaar is Op deze manier komt het element aan alle kanten los van de achtergrond.

Inner shadow

Een inner shadow creëert een schaduw aan de binnenkant van de uiterste randen van het object. Hierdoor lijkt het hele element te zijn verzonken in de achtergrond.

Bevel

Een bevel is een verhoging of verlaging in je element dat verkregen wordt door gebruik te maken van schaduw- en lichteffecten. Deze effecten worden toegepast over het hele oppervlakte van het element en lopen in elkaar over. Door deze overloop wordt de illusie gecreëerd dat de verhoging of verlaging gelijdelijk afloopt.

Perspectief

Met de genoemde effecten, wat creativiteit en wat kennis van perspectief is het mogelijk om een grafisch element nog wat meer diepte mee te geven. Met de ?free transform tool? van verschillende grafische pakketten kun je een element op allerlei manieren vervormen. Door het element aan de ene kant iets te vergroten krijg je het idee dat je er vanuit een hoek tegenaan kijkt.

3D schaduw

Door een slagschaduw van je originele element te maken en deze vervolgens te vervormen kun je ook een effect creëren waarbij het lijkt dat er een lamp onder een hoek op het element schijnt. De slagschaduw lijkt dan op de grond te vallen.

Weerspiegeling

Door een kopie te maken van een element en dit vervolgens gespiegeld eronder te plaatsen kun je het laten lijken of het element op een glimmende ondergrond staat. Gebruik een zogenaamde ?feather? om de weerspiegeling laten te vervagen.

Liquify

Alle tot nu toe besproken effecten gaan er van uit dat je een effect wil creëren op een vlakke ondergrond. Wanneer je een grafisch element op een oneffen ondergrond wilt plaatsen kun je de liquify tool van bijvoorbeeld Photoshop gebruiken. (linken naar tutorial). Deze tool plakt een afbeelding min of meer als een stikker op een bepaalde ondergrond. Het vergt overigens wel enige oefening om dit onder de knie te krijgen.

Layers / Lagen

Door verschillende gedeeltes van je pagina over elkaar te leggen is het mogelijk om diepte te creëren. Door dit te combineren met de eerder omschreven grafische mogelijkheden kun je gevoel van diepte versterken. Het gebruik van afbeeldingen met een horizon versterkt ook het idee dat een ontwerp diepte heeft.

• Tweet