Articles

Inspirerende web gradienter og hvor du finner dem

Web gradienter kommer tilbake er TILBAKE SOM et designelement for den elektroniske verden. De har blitt en enkel måte å bringe nettstedet ditt til liv.

hvis de er godt brukt, gir de øyet en enhetlig følelse som inviterer brukeren til å bli på nettstedet. Denne følelsen oppstår ut av mangel på harde kanter og brudd i sidestrukturen.

web gradienter-nyc_pride som du kan se i eksemplet ovenfor, gradienten roer ned handlingen av bakgrunnsbildet for å gjøre det egnet for å være bakgrunnen for DENNE UI design.

Vil du vite årsaken til det?hemmeligheten er, at harmonien en gradient sprer stammer fra fenomener i naturen der det meste ingen harde kanter vises. Alt har en organisk form eller myke overganger.

mennesker har også et flott fargesyn og liker å se farger. Tenk deg en svart og hvit gradient. Det avhenger av saken, men mest sannsynlig ser det ikke ut til at flotte og fargerike gradienter foretrekkes i mange tilfeller.

Hvorfor tror du alle liker å se solnedganger?

web gradienter-solnedgang gradient

Eller bare setter hodet opp til himmelen?

web gradienter - naturgradient

Bruk av gradienter i bakgrunnen på en nettside kan også være en diskret måte å veilede besøkerens syn gjennom innholdet uten å måtte plassere irriterende piler i forgrunnen.

forgrunnen skal brukes til den viktige informasjonen uansett, og bakgrunnen kan oppfylle et underordnet formål.

Brukes på elementer som knapper og ikoner gradienter kan også føre til en enkel 3d-effekt.

det er ikke alltid lett å finne riktig gradient og bruke den riktig med alle disse fordelene.

ikke bekymre deg. Det finnes en løsning.Det er mange verktøy på nettet som allerede tilbyr mange forberedte gradienter, enten bare for inspirasjon eller direkte for å integrere dem enkelt i nettstedet ditt.

Nå må du bare finne ut hvilket verktøy som passer dine behov best.

La oss komme i gang.

Inspirerende webgradienter…

webgradienter-symodd

som nevnt er symodd et klassisk eksempel på hvordan gode webgradienter kan fungere som en enkel bakgrunn som er interessant og fanger uansett.

web gradienter - qards

ikke bare bruker Qards en gradient som bakgrunn, men også de brukes på nesten hvert enkelt element spesielt til ikoner og knapper.

web gradients - gogoro

Gogoro bruker en gradient i en form som gjør den mer dynamisk og støtter formålet med merkevaren.

som du kan se på disse nettstedene handler det om å finne riktig balanse og bruke farger i moderasjon.

Ikke en inspirerende gradient:

web gradienter-badExample

denne gradienten er så stygg at jeg må be om unnskyldning for å presentere den her fordi det gjør vondt i øyet så mye. Den har for mange farger som er veldig forskjellige. Den vanlige svarte teksten i forgrunnen ser også forskjøvet ut og blir undertrykt av gradienten.

Så hvis du etter å ha sett disse eksemplene fortsatt ikke er helt sikker på om du kan bruke en gradient som er i stand til å støtte prosjektet ditt slik det burde, kan du gå dypere inn i web og grafisk design.

Ikke nok?

WEB DESIGN PROFESSIONAL

Lær mer om vårt signaturkurs.
Velg den beste timeplanen
for å studere PÅ NETTET eller på skolen.

VIS KURS

Følg denne veiledningen fra for å få en bedre forståelse av gradienttyper og råd om beste praksis.

…og hvor du finner dem

web gradienter - uigradienter
web gradienter - uigradienter

uigradienter er veldig enkelt å bruke fordi det bare har to hovedskjermer. Etter lasting kan du direkte se en tilfeldig gradient på hele skjermen.

med pilene på sidene kan du bytte innenfor det store tilbudet av alle slags gradienter. Det andre skjermbildet viser alle graderinger som en liste for å bla gjennom og sortere etter farge.

atmosfæren som nettgradientene oppretter, støttes av det individuelle navnet. Som en spesiell funksjon kan du også rotere graderingen for å se hvordan den ser ut fra et annet perspektiv.

for folk som ønsker å bidra med sin opprettede gradering til fellesskapet, finnes det mulighet for å legge til graderingen din i samlingen via GitHub. Dette gjør mangfoldet av gradienter nesten ubegrenset.

uiGradients gir tre måter å lagre den valgte gradienten på. Hvis du vil gjenskape gradienten i en grafisk designprogramvare eller kode, kan du bare kopiere Hex-Fargekoden.

for en direkte implementering på nettstedet ditt, kan DU få CSS-koden.

for å lagre gradienten som inspirasjon bare laste NED JPEG-filen.

WebGradients

webgradients - WebGradients

dette verktøyet starter ved å vise samlingen av 180 webgradienter som en lang liste du kan bla gjennom. Når du vil se mer av en gradient, klikker du bare på valget ditt, og fargen vil bli vist over hele skjermen.

hver gradient har et navn, slik at det gjør deres mulige anvendelse senere mer konkret.WebGradients drives av itmeo, et selskap som tilbyr flere digitale verktøy på nettet. Deres gradienttjeneste, i dette tilfellet, er gratis med mindre du ikke vil laste ned En Skisse eller Photoshop-fil.

Som i uiGradients har du også tre muligheter til å lagre din nye funnet gradientinspirasjon her.

for hver gradering kan du lagre EN STOR PNG-fil for å bruke DEN som bakgrunn for ditt eget grafiske design.

for å kunne bruke de eksakte fargene og graderingen i en grafisk designprogramvare eller kode, kan du kopiere Hex-Fargekoden eller få CSS-versjonen av graderingen.

coolHue

web gradienter-coolHue

denne samlingen av gradienter vises allerede første gang du åpner nettstedet. Du kan velge innen 60 fargerike gradienter. Bare bla gjennom i hvert tilfelle seks fliser på rad av denne rekke gradient.

Dessverre er det ingen måte å vise gradienten i full størrelse.Det fine tillegget for coolHue er animasjonen når du svinger over gradientfliser som gir deg et konkret inntrykk av det.web gradienter skal levere sin atmosfære til deg bare gjennom fargene. Det er derfor de ikke har navn i dette verktøyet. Derfor, i nederste høyre hjørne, har du flere alternativer For Skisse og Photoshop.

når du holder musepekeren over den valgte graderingen, vises to alternativer til. Du kan kopiere CSS-koden for en enkel implementering i koden din eller laste ned en liten PNG-fil.

hvis du vil bruke de eksakte fargene, kan du bare kopiere Hex-Fargekoden fra under gradienten.

ColorSpace

colorspace

ColorSpace gir deg muligheten til å velge og bruke en gradient farge i 10 forskjellige retninger. For å bruke en farge kan du velge fra fargemenyen som dukker opp, det samme som du finner i et bilderedigeringsprogram. Du kan også lime Inn En Hex Fargekode av fargen slik at du får de eksakte fargene du ønsker å bruke.

graderingen brukes på bakgrunnen over hele skjermen. Dette gir deg en veldig god følelse av fargenes humør, og motiverer deg til å velge den fargen du føler passer best til det aktuelle emnet du kanskje søker etter.

Med ColorSpace kan du også kopiere NETTADRESSEN til den valgte fargegradienten. Dette gjør det veldig enkelt å dele fargealternativene uten å måtte lagre en fil og deretter sende den som et vedlegg eller sende spesifikasjonene ut av fargen. De kan bare se hva du så på ved å klikke på linken du har sendt, og de vil ha all den informasjonen de trenger, heksadesimale koder og CSS-koden.

men hvis du foretrekker å lagre en bildefil, dessverre dette nettstedet ikke gir deg det alternativet.

Ultimate CSS Gradient Generator

web gradients-Ultimate CSS Gradient Generator

Nå kommer Vi til de mer komplekse verktøy som i dette tilfellet som navnet allerede sier bare brukes for integrering I CSS-koden.grensesnittet er delt inn i fire deler og minner om en typisk grafisk designprogramvare. Du kan justere eller opprette forhåndsinnstillinger, se dette resultatet i en liten forhåndsvisning og ta en titt på HELE CSS-koden.Den Ultimate CSS Gradient Generator er en del Av nettleserutvidelsen ColorZilla. Dens gradient verktøyet gir ubegrensede muligheter til å lage web gradienter.

Du kan legge til så mange farger du vil, justere fargetone og metning som du vet det fra grafisk designprogramvare, reversere graderingen og angi farger, opasitet og plassering av graderingen.Bortsett Fra det kan du lagre din egen opprettede gradient til forhåndsinnstillingene, det er bare en måte å eksportere DEN med CSS eller SASS-koden.

Men før dette kan du angi størrelsen på gradienten, endre retningen til den i forskjellige retninger og velge fargeformatet ut av fem gitte alternativer.

Problemer med å bestemme?

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

hva web gradients verktøyet er best å bruke alltid avhenger av prosjektet, tiden du har og nivået av individualitet eller andre kvalitetskrav.

tabellen over kan hjelpe deg med å bestemme hvilket verktøy du best bør bruke for utfallet du ønsker å ha.

Husk det viktigste?

ikke bruk for mange farger – dagens beste praksis er å bruke bare to farger som heller ikke er for forskjellige.

det du også bør være oppmerksom på, er den generelle utformingen av gradienten din, måten du bruker den på prosjektet ditt senere og hvordan det passer inn i miljøet.

uiGradients tilbyr alle viktige visuelle funksjoner som du kan se på bordet. Dette verktøyet gjør at du kan forestille deg gradienten for prosjektet ditt på best mulig måte.Hvis du vil gå dypere inn i å tilpasse gradienten for et webprosjekt av høy kvalitet, kan du kombinere uigradienter med Den Ultimate CSS-Gradientgeneratoren ved å importere CSS-koden eller det nedlastede bildet.

nå er du klar til å gjøre det på egen hånd. Hvis du bestemmer deg for å jobbe med Gradienter, vennligst gi oss beskjed på twitter.

WEB DESIGN PROFESSIONAL

Lær mer om vårt signaturkurs.
Velg den beste timeplanen
for å studere PÅ NETTET eller på skolen.

VIS KURS

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.