Articles

inspirerende forløb på nettet og hvor du kan finde dem

forløb på nettet er tilbage som et designelement for onlineverdenen. De er blevet en nem måde at bringe din hjemmeside til livet.

hvis de anvendes godt, giver de øjet en samlet følelse, der opfordrer brugeren til at blive på hjemmesiden. Denne følelse opstår på grund af manglen på hårde kanter og brud i sidestrukturen.

netgradienter - nyc_pride som du kan se i ovenstående eksempel, beroliger gradienten handlingen af baggrundsbilledet for at gøre det egnet til at være baggrunden for dette UI-design.

vil du vide årsagen til det?

hemmeligheden er, at den harmoni, en gradient spreder, stammer fra fænomener i naturen, hvor der for det meste ikke vises hårde kanter. Alt har en organisk form eller bløde overgange.

også mennesker har en stor farvesyn og nyder at se farver. Forestil dig en sort / hvid gradient. Det afhænger af sagen, men sandsynligvis ser det ikke ud til, at store og farverige gradienter foretrækkes i mange tilfælde.

hvorfor tror du, at alle kan lide at se solnedgange?

netgradienter-solnedgangsgradient

eller bare sætter hovedet op til himlen?

netgradienter - naturgradienter

brug af gradienter i baggrunden på en hjemmeside kan også være en diskret måde at guide den besøgendes syn gennem indholdet uden at skulle placere irriterende pile i forgrunden.

forgrunden skal alligevel bruges til de vigtige oplysninger, og baggrunden kan opfylde et underordnet formål.

anvendt på elementer som knapper og ikoner gradienter kan også føre til en nem 3D-effekt.

det er ikke altid let at finde den passende gradient og anvende den korrekt med alle disse fordele.

bare rolig. Der er en løsning.

der er mange værktøjer online, som allerede tilbyder en masse forberedte gradienter enten bare til inspiration eller direkte til at integrere dem let i din hjemmeside.

nu skal du bare finde ud af, hvilket værktøj der passer bedst til dine behov.

lad os komme i gang.

inspirerende netgradienter…

netgradienter - symodd

Som nævnt er symodd et klassisk eksempel på, hvordan gode netgradienter kan fungere som en simpel baggrund, der alligevel er interessant og fanger.

farvegradienter

bruger ikke kun farvegradienter som baggrund, men de anvendes også på næsten hvert enkelt element, især til ikoner og knapper.

netgradienter - gogoro

Gogoro bruger en gradient i en form, der gør den mere dynamisk og understøtter formålet med mærket.

som du kan se på disse hjemmesider handler det om at finde den rette balance og bruge farver i moderation.

ikke en inspirerende gradient:

netgradienter - badeksempel

denne gradient er så grim, at jeg må undskylde at præsentere den her, fordi det gør ondt i øjet så meget. Det har for mange farver, der alle er meget forskellige. Også den almindelige sorte tekst i forgrunden ser forskudt ud og bliver undertrykt af gradienten.

så hvis du efter at have set disse eksempler stadig ikke er helt sikker på, om du kunne anvende en gradient, der er i stand til at understøtte dit projekt, som det skal, kan du gå dybere ind i Internet og grafisk design.

ikke nok?

Internet DESIGN PROFESSIONAL

Lær mere om vores signaturkursus.
Vælg den bedste tidsplan
for at studere ONLINE eller på skolen.

se kursus

Følg denne vejledning fra for at få en bedre forståelse af gradienttyper og rådgive om bedste praksis.

…og hvor finder man dem

sidegradienter - uiGradients
sidegradienter - uiGradients

uiGradients er meget nemme at bruge, fordi den kun har to hovedskærme. Efter indlæsning kan du direkte se en tilfældig gradient på hele skærmen.

med pilene i siderne kan du skifte inden for det store tilbud af alle slags gradienter. Den anden skærm viser alle gradueringer som en liste til at rulle gennem og sortere efter farve.

den atmosfære, som internetgradienterne skaber, understøttes af dets individuelle navn. Som en speciel funktion kan du også rotere din gradient for at se, hvordan det ser ud fra et andet perspektiv.

for folk, der ønsker at bidrage med deres oprettede gradient til samfundet, findes muligheden for at tilføje din gradient til samlingen via GitHub. Dette gør mangfoldigheden af gradienter næsten ubegrænset.

uiGradients giver tre måder at gemme din valgte gradient. Hvis du vil genskabe gradienten i et grafisk designprogram eller en kode, kan du blot kopiere Sekskantfarvekoden.

for en direkte implementering på din hjemmeside kan du få CSS-koden.

for at gemme gradienten som inspiration skal du bare hente JPEG-filen.

Internetgradienter

internetgradienter

dette værktøj starter med at vise samlingen af 180 internetgradienter som en lang liste, du kan rulle igennem. Når du ønsker at se mere af en gradient blot klikke på dit valg og farven vil blive vist over hele skærmen.

hver gradient har et navn, så det gør deres mulige anvendelse senere mere konkret. drives af itmeo, et firma, der leverer flere digitale værktøjer online. Deres gradient service, i dette tilfælde, er gratis, medmindre du ikke ønsker at hente en skitse eller Photoshop-fil.

som i uiGradients har du også tre muligheder for at gemme din nye fundne gradientinspiration her.

for hver gradient kan du gemme en stor PNG-fil for at bruge den som baggrund for dit eget grafiske design.

for at bruge de nøjagtige farver og gradienten i et grafisk designprogram eller en kode kan du kopiere Sekskantfarvekoden eller få CSS-versionen af gradienten.

coolHue

gradienter - coolHue

denne samling af gradienter vises allerede, når du først åbner hjemmesiden. Du kan vælge inden for 60 farverige gradienter. Bare rul igennem i hvert tilfælde seks fliser i træk af denne række gradient.

Desværre er der ingen måde at vise gradienten i fuld størrelse.

den gode tilføjelse til coolHue er animationen, når du svæver over gradientfliserne, hvilket giver dig et håndgribeligt indtryk af det.

internetgradienterne skal levere deres atmosfære til dig lige gennem farverne. Derfor har de ikke navne i dette værktøj. Derfor har du i nederste højre hjørne flere muligheder for skitse og Photoshop.

Når du holder musepekeren over den valgte gradient, vises der yderligere to indstillinger. Du kan kopiere CSS-koden for en nem implementering i din kode eller hente en lille PNG-fil.

Hvis du vil bruge de nøjagtige farver, kan du bare kopiere Sekskantfarvekoden under gradienten.

ColorSpace

colorspace

ColorSpace giver dig mulighed for at vælge og anvende en gradientfarve i 10 forskellige retninger. For at anvende en farve kan du vælge fra den farvemenu, der dukker op, det samme som du ville finde i et billedredigeringsprogram. Du kan også indsætte en sekskantet farvekode for farven, så du får de nøjagtige farver, du vil bruge.

gradienten anvendes på baggrunden på tværs af hele skærmen. Dette giver dig en meget god fornemmelse af farvernes humør, og motiverer dig til at vælge den farve, som du føler kan bedst passer til det relevante emne, du kan være på udkig efter.

Med ColorSpace kan du også kopiere URL ‘ en for din valgte farvegradient. Dette gør det meget nemt at dele farveindstillingerne uden at skulle gemme en fil og derefter sende den som en vedhæftet fil eller sende specifikationerne ud af, hvad farven er. De kan bare se, hvad du kiggede på ved at klikke på det link, du har sendt, og de vil have alle de oplysninger, de har brug for, de geksadecimale koder og CSS-koden.

men hvis du foretrækker at gemme en billedfil, desværre denne hjemmeside giver dig ikke denne mulighed.

Ultimate CSS Gradient Generator

gradienter - Ultimate CSS Gradient Generator

nu kommer vi til de mere komplekse værktøjer, som i dette tilfælde, som navnet allerede siger, kun bruges til integration i din CSS-kode.grænsefladen er opdelt i fire dele og minder om et typisk Grafisk designprogram. Du kan justere eller oprette forudindstillinger, se dette resultat i en lille forhåndsvisning og se på den fulde CSS-kode.den ultimative CSS-Gradientgenerator er en del af udvidelsen. Dets gradientværktøj giver ubegrænsede muligheder for at oprette gradienter på nettet.

Du kan tilføje så mange farver som du vil, justere farvetone og mætning, som du kender det fra dit grafiske designprogram, vende gradienten og indstille farver, opacitet og placering af gradienten.

bortset fra det kan du gemme din egen oprettede gradient til forudindstillingerne, der er kun den ene måde at eksportere den med CSS-eller SASS-koden.

men før dette er du i stand til at indstille størrelsen på gradienten, ændre orienteringen af den til forskellige retninger og vælge farveformatet ud af fem givne muligheder.

problemer at beslutte?

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

hvilket værktøj til gradienter, der er bedst at bruge, afhænger altid af dit projekt, den tid, du har, og niveauet for individualitet eller andre kvalitetskrav.

tabellen ovenfor kan hjælpe dig med at beslutte, hvilket værktøj du bedst skal bruge til det resultat, du ønsker at have.

husk det vigtigste?

brug ikke for mange farver – den bedste praksis i dag er at bruge kun to farver, som heller ikke er for forskellige.

hvad du også skal være opmærksom på er det generelle design af din gradient, den måde, du anvender det på dit projekt senere, og hvordan det passer ind i dets miljø.

uiGradients tilbyder alle vigtige visuelle funktioner, som du kan se på bordet. Dette værktøj får dig til at forestille dig gradienten til dit projekt på den bedst mulige måde.

Hvis du vil gå dybere ind i at tilpasse gradienten til et internetprojekt af høj kvalitet, kan du kombinere uiGradients med den ultimative CSS Gradientgenerator ved at importere CSS-koden eller det hentede billede.

nu er du klar til at gøre det på egen hånd. Hvis du beslutter at arbejde med gradienter så lad os vide på kvidre.

Internet DESIGN PROFESSIONAL

Lær mere om vores signaturkursus.
Vælg den bedste tidsplan
for at studere ONLINE eller på skolen.

Vis kursus

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.