Must Read
Beeld: Jeroen Disch
|
Je ziet ze de laatste tijd overal: landingpages met een achtergrond die langzaam ademt, logo’s van vloeibaar chroom, of beelden met een halftoonraster die meebewegen met je cursor. Ze zijn gemaakt met shaders. Een shader is een klein programma dat niet op de processor draait, maar op de GPU. En niet één keer, maar tegelijkertijd op elke pixel van je scherm. |
In plaats van een lijstje instructies (teken een lijn, zet daar een cirkel) schrijf je één regel code, en elke pixel stelt vervolgens dezelfde vraag: gegeven waar ik zit, hoe moet ik eruitzien? Een miljoen vragen, in één frame beantwoord. De term stamt uit de jaren tachtig, toen 3D-graphics licht en schaduw moesten simuleren. Shading dus.
Er zijn verschillende soorten shaders, maar als ontwerper heb je vooral te maken met fragment shaders. Die komen in drie smaken: image filters (dithering, halftone, fluid glass, lensvervorming), generatieve achtergronden (mesh gradients, noise, warp, god rays, metaballs) en logo-effecten (liquid metal, chroom, rook).
Als je alles wil weten over de werking van shaders, dan is de guide Every Pixel Asks a Question van creative coder Koen Mostert iets voor jou.
Figma introduceerde op Config in juni shader fills en effects: je beschrijft wat je wil of geeft een referentiebeeld mee, en de agent bouwt het effect inclusief regelbare controls op het canvas. Elke parameter die zo’n shader blootlegt, kun je keyframen in de nieuwe motion timeline.
Maar er zijn ook genoeg andere plekken waar je kant-en-klare shaders kunt vinden:
Shaders.com shaders.com/presets
Shadertoy shadertoy.com
Paper Shaders shaders.paper.design
Framer Shader Library framershaders.framer.ai
Must See
|
Hele toffe toepassing van Grilli Type’s Planar, in deze visual identity voor Phion Symphony Orchestra, ontworpen door thonik. Het variable font kan extreem ver buigen – tot wel 90°. Dat maakt ‘m ideaal voor het visualiseren van muzikale dynamiek. |
Beeld: thonik
Must Use
Beeld: CMD Methods x AI
CMD Methods x AI laat zien hoe je CMD-onderzoeks- en ontwerpmethodes kan verbeteren, versnellen of verrijken met AI. Met concrete toepassingen, voorbeeldprompts en waarschuwingen.
Jeroen Disch is art-director en voorheen design lead bij digitaal ontwerpbureaus Bravoure en GRRR. Hij geeft gastlessen en trainingen en schrijft over digital design in zijn nieuwsbrief Halfvet.
De redactie heeft geprobeerd om alle rechthebbenden van de beelden te achterhalen. Ben je de rechthebbende van een beeld en heb je geen toestemming gegeven voor de publicatie, neem dan contact op via website@bno.nl.
The editors have tried to find out all rights holders of the images. If you are the rights holder of an image and have not given permission for its publication, please contact website@bno.nl.