Articles

inspirerande webbgradienter och var man hittar dem

Webbgradienter kommer tillbaka är tillbaka som ett designelement för onlinevärlden. De har blivit ett enkelt sätt att få din webbplats till liv.

om de tillämpas väl ger de ögat en enhetlig känsla som uppmanar användaren att stanna kvar på webbplatsen. Denna känsla uppstår på grund av bristen på hårda kanter och raster i sidstrukturen.

webbgradienter - nyc_pride som du kan se i exemplet ovan lugnar lutningen bakgrundsbildens verkan för att göra den lämplig för att vara bakgrunden till denna UI-design.

vill du veta orsaken till det?

hemligheten är, att harmonin en gradient sprider härrör från fenomen i naturen där mestadels inga hårda kanter visas. Allt har en organisk form eller mjuka övergångar.

också, människor har en stor färgseende och njuta av att se färger. Föreställ dig en svartvit lutning. Det beror på fallet men troligtvis ser det inte ut att stora och färgglada lutningar föredras i många fall.

Varför tror du att alla gillar att titta på solnedgångar?

webbgradienter-solnedgångsgradient

eller bara sätter huvudet upp mot himlen?

webbgradienter - naturgradient

att använda gradienter i bakgrunden på en webbsida kan också vara ett diskret sätt att styra besökarens syn genom innehållet utan att behöva placera irriterande pilar i förgrunden.

förgrunden ska ändå användas för den viktiga informationen och bakgrunden kan uppfylla ett underordnat syfte.

tillämpas på element som knappar och ikoner gradienter kan också leda till en enkel 3D-effekt.

det är inte alltid lätt att hitta lämplig lutning och tillämpa den ordentligt med alla dessa fördelar.

oroa dig inte. Det finns en lösning.

det finns många verktyg online som redan erbjuder många förberedda gradienter antingen bara för inspiration eller direkt för att enkelt integrera dem på din webbplats.

Nu måste du bara ta reda på vilket verktyg som passar dina behov bäst.

Låt oss komma igång.

inspirerande webbgradienter…

webbgradienter - symodd

som nämnts är symodd ett klassiskt exempel på hur bra webbgradienter kan fungera som en enkel bakgrund som är intressant och fångar ändå.

webbgradienter - qards

använder inte bara Qards en gradient som bakgrund utan också de tillämpas på nästan varje enskilt element, särskilt på ikonerna och knapparna.

webbgradienter - gogoro

Gogoro använder en lutning i en form som gör den mer dynamisk och stöder syftet med varumärket.

som du kan se på dessa webbplatser handlar det om att hitta rätt balans och använda färger med måtta.

inte en inspirerande gradient:

webbgradienter - badExample

denna gradient är så ful att jag måste be om ursäkt för att presentera den här eftersom det gör ont i ögat så mycket. Det har för många färger som alla är väldigt olika. Den vanliga svarta texten i förgrunden ser också förskjuten ut och undertrycks av lutningen.

Så om du efter att ha sett dessa exempel fortfarande inte är helt säker på om du kan tillämpa en gradient som kan stödja ditt projekt som det ska kan du gå djupare in i webb och grafisk design.

inte tillräckligt?

WEB DESIGN PROFESSIONAL

Läs mer om vår signaturkurs.
Välj det bästa schemat
för att studera ONLINE eller på skolan.

visa kurs

följ den här guiden för att få en bättre förståelse för lutningstyper och råd om bästa praxis.

…och var du hittar dem

webbgradienter - uigradienter
webbgradienter - uigradienter

uigradienter är mycket lätt att använda eftersom det bara har två huvudskärmar. Efter laddning kan du direkt se en slumpmässig lutning på hela skärmen.

med pilarna på sidorna kan du växla inom det stora utbudet av alla typer av lutningar. Den andra skärmen visar alla lutningar som en lista för att bläddra igenom och sortera efter färg.

atmosfären som webbgradienterna skapar stöds av dess individuella namn. Som en speciell funktion kan du också rotera din lutning för att se hur den ser ut ur ett annat perspektiv.

för personer som vill bidra med sin skapade gradient till gemenskapen finns alternativet att lägga till din gradient i samlingen via GitHub. Detta gör olika lutningar nästan obegränsade.

uiGradients ger tre sätt att spara din valda lutning. Om du vill återskapa lutningen i en grafisk designprogramvara eller kod kan du helt enkelt kopiera Hex-färgkoden.

för en direkt implementering på din webbplats kan du få CSS-koden.

för att spara lutningen som inspiration, ladda bara ner JPEG-filen.

Webbgradienter

webbgradienter - Webbgradienter

det här verktyget börjar med att visa samlingen av 180 webbgradienter som en lång lista som du kan bläddra igenom. När du vill se mer av en lutning klickar du bara på ditt val och färgen visas över hela skärmen.

varje gradient har ett namn så det gör deras möjliga tillämpning senare mer konkret.

WebGradients drivs av itmeo, ett företag som tillhandahåller flera digitala verktyg online. Deras gradient-tjänst är i detta fall gratis om du inte vill ladda ner en skiss eller Photoshop-fil.

som i uiGradients har du också tre möjligheter att spara din nyfunna gradientinspiration här.

för varje lutning kan du spara en stor PNG-fil för att använda den som bakgrund för din egen grafiska design.

för att använda de exakta färgerna och lutningen i en grafisk designprogramvara eller kod kan du kopiera Hex-färgkoden eller få CSS-versionen av lutningen.

coolHue

webbgradienter - coolHue

denna samling av gradienter visas redan när du först öppnar webbplatsen. Du kan välja inom 60 färgglada lutningar. Bläddra bara igenom i varje fall sex brickor i rad av denna variation av lutning.

tyvärr finns det inget sätt att visa gradienten i full storlek.

det trevliga tillägget för coolHue är animationen när du svävar över lutningsplattorna vilket ger dig ett konkret intryck av det.

webbgradienterna ska leverera sin atmosfär till dig bara genom färgerna. Det är därför de inte har namn i det här verktyget. Därför har du i det nedre högra hörnet fler alternativ för Sketch och Photoshop.

När du håller muspekaren över din valda lutning visas ytterligare två alternativ. Du kan kopiera CSS-koden för en enkel implementering i din kod eller ladda ner en liten PNG-fil.

om du vill använda de exakta färgerna kan du bara kopiera Hex – färgkoden under lutningen.

ColorSpace

colorspace

ColorSpace ger Dig möjlighet att välja och tillämpa en gradientfärg i 10 olika riktningar. För att använda en färg kan du välja från färgmenyn som dyker upp, samma som du hittar i ett bildredigeringsprogram. Du kan också klistra in en Hex – färgkod för färgen så att du får de exakta färgerna du vill använda.

lutningen appliceras på bakgrunden över hela skärmen. Detta ger dig en mycket bra känsla av färgerna humör, och motiverar dig att välja den färg som du känner kan bäst passa relevant ämne du kan söka efter.

med ColorSpace kan du också kopiera webbadressen till din valda färggradient. Detta gör det väldigt enkelt att dela färgalternativen utan att behöva spara en fil och sedan skicka den som en bilaga eller skicka specifikationerna ur vad färgen är. De kan bara se vad du tittade på genom att klicka på länken du har skickat och de kommer att ha all information de behöver, hexadecimala koder och CSS-koden.

men om du föredrar att spara en bildfil, tyvärr denna webbplats inte ger dig det alternativet.

Ultimate CSS Gradient Generator

webbgradienter - Ultimate CSS Gradient Generator

nu kommer vi till de mer komplexa verktyg som i detta fall som namnet redan säger används endast för integration i din CSS-kod.

gränssnittet är uppdelat i fyra delar och påminner om en typisk grafisk designprogramvara. Du kan justera eller skapa förinställningar, se resultatet i en liten förhandsgranskning och titta på hela CSS-koden.

den ultimata CSS Gradient Generator är en del av webbläsartillägget ColorZilla. Dess gradientverktyg ger obegränsade möjligheter att skapa webbgradienter.

Du kan lägga till så många färger du vill, justera nyans och mättnad som du vet från din grafiska designprogramvara, vända lutningen och ställa in färgerna, opaciteten och platsen för lutningen.

bortsett från det kan du spara din egen skapade gradient till förinställningarna, det finns bara ett sätt att exportera det med CSS-eller SASS-koden.

men innan detta kan du ställa in storleken på lutningen, ändra orienteringen av den i olika riktningar och välja färgformat av fem givna alternativ.

problem att bestämma?

uiGradients WebGradients coolHue Gradientify Gradients.io CSS Gradient Generator
Full-screen view + + +
Switch in full-screen view +
List view + + + + + +
Amount of gradients almost unlimited 180 60 45 24 unlimited
Sort gradients by colour
Named gradients + + + +
Rotate gradient (change orientation) + +
Change colour opacity +
Change colour location +
More than two colours + +
Change hue/saturation +
Reverse colours + +
Adding new gradient + +
Import image +
Import CSS code + +
Change export size +
Hex Color Code + + + + +
CSS code + + + + +
Chose colour format (CSS) +
JPEG file 1920 × 1080
PNG file 2400 × 2000 500 × 500

vilket webbgradientverktyg som är bäst att använda beror alltid på ditt projekt, den tid du har och nivån på individualitet eller andra kvalitetskrav.

tabellen ovan kan hjälpa dig att bestämma vilket verktyg du bäst ska använda för det resultat du vill ha.

Kom ihåg det viktigaste?

använd inte för många färger-dagens bästa praxis är att bara använda två färger som inte heller är för olika.

vad du också bör vara uppmärksam på är den allmänna utformningen av din lutning, hur du tillämpar den på ditt projekt senare och hur det passar in i dess miljö.

uiGradients erbjuder alla viktiga visuella funktioner som du kan se på bordet. Det här verktyget får dig att föreställa dig lutningen för ditt projekt på bästa möjliga sätt.

om du vill gå djupare in i att anpassa lutningen för ett högkvalitativt webbprojekt kan du kombinera uigradienter med den ultimata CSS-Gradientgeneratorn genom att importera CSS-koden eller den nedladdade bilden.

nu är du redo att göra det själv. Om du bestämmer dig för att arbeta med gradienter vänligen meddela oss på twitter.

WEB DESIGN PROFESSIONAL

Läs mer om vår signaturkurs.
Välj det bästa schemat
för att studera ONLINE eller på skolan.

visa kurs

Lämna ett svar

Din e-postadress kommer inte publiceras.