Kleurverlopen/Gradients

Verlopen zijn een geweldige manier om levensechte verlichting en arcering toe te voegen op oppervlakken. Als een user interface ook op de juiste manier met verlopen binnen elementen word gemaakt zorgen zij ervoor dat het geheel kan worden geschaald en gemakkelijk hergebruikt.

Lineaire verlopen

Lineaire overgangen zijn overgangen in hun meest elementaire vorm. Een geleidelijke overgang tussen de kleuren, het volgen van een rechte lijn. Vrij bekend lijkt me. Ik zal snel verder gaan met interessantere varianten.

linearGradient

 

Weerspiegelde overgangen

 

Weerspiegeld overgangen zijn net als hun lineaire vrienden, maar hier wordt de overgang twee keer te herhaald met en de tweede herhaling gespiegeld. Dit maakt het bewerken van een iets minder vervelend, als dit je gewenste resultaat is natuurlijk.

reflectedGradient

 

Radiale overgangen

 

Radiale overgangen starten vanaf het centrum (of een gekozen punt) en groeien naar buiten toe in een cirkelvormig patroon. Ze zijn handig voor het creëren van een bol, of globe en het toepassen van effecten aan de rand van cirkelvormige elementen. Het middelpunt van de overgang kan worden verplaatst door te klikken en te slepen op het digitale canvas, terwijl het verloop- of laagstijlen venster is geopend.

radialGradient

 

Hoekverlopen

 

Hoekverlopen kunnen een geweldige manier zijn om natuurlijke reflecties op zeer gepolijste metalen voorwerpen na te bootsen. Het middelpunt van de gradiënt kan worden verplaatst door te klikken en te slepen op het canvas, terwijl het verloop- of laagstijlen venster is geopend.

angleGradient

Verlopen op verlopen

 

Iets wat de moeite waard is is ook de moeite waard te overdrijven, toch? Door een combinatie van een verloop laag met een verloop laagstijl kun je meer complexe, en hier komt het interessante, meer dynamische resultaten behalen. Om verlopen te combineren is een overvloei laagstijl (blending) nodig. Voor de onderstaande voorbeelden, heb ik ofwel scherm (screen),  goed voor belichten, of vermenigvuldigen (multiply), goed voor verduistering gebruikt.

combinedGradient

Dithering is alles…

 

Het toevoegen van dithering zorgt voor een verloop met nog vloeiendere resultaten. Niet-dithered gradiënten bevatten vaak zichtbare banden. Dithering is nog belangrijker als je project wordt bekeken op (goedkopere) 6-bits TN LCD’s en bepaalde soorten beeldscherm, welke de neiging kunnen hebben posterisatie problemen te versterken.

ditheringGradient

 

Mocht je hierboven het verschil niet zien, hier is een extreme, volledig onrealistisch voorbeeld van de gradiënt dithering in actie.

dithering-extremeGradient

 

Er voor zorgen dat je verloop gedithered is gemakkelijk te bereiken. Vink gewoon het juiste vakje aan in Photoshop.

check-ditherGradient

 

Houd in je achterhoofd dat de ditherfunctie pas expliciet is toegevoegd vanaf Photoshop CS6. Photoshop CS5 en lager hebben deze functie niet. Ook geplaatste (geplakte) elementen uit bijvoorbeeld Illustrator zijn niet gedithered.

 

Als je transparantie gebruikt in een verloop zal dit ook niet worden gedithered, wat een af en toe een probleem kan zijn. Er is een oplossing voor een aantal specifieke gevallen. Als je een verloop met transparantie gebruikt om een gebied te verlichten met wit, gebruik dan een niet-transparant verloop met een overvloei laagstijl scherm (screen). Op deze manier gebeurt het automatisch. Op dezelfde manier kan een verloop verduisterd worden door overvloei laagstijl vermenigvuldigen (multiply) te gebruiken.

transparencyGradient

 

De hierboven beschreven technieken werden gebruikt om het nieuwe iStat menu pictogram te creëren.

istatmenus-iconGradient

 

Ja, verlopen vind ik erg interessant. Wat ik ook interessant vind zijn afgeronde rechthoeken, texturen en het opzetten van Photoshop zodat kleuren niet veranderen wanneer je elementen opslaat voor het web. Maar deze komen binnenkort.