Articles

Inspirational web gradients and where to find them

Web gradients are coming back are BACK are BACK as a design element for the online world. Niistä on tullut helppo tapa herättää sivustosi eloon.

hyvin sovellettuina ne antavat silmälle yhtenäisen tunteen, joka kehottaa käyttäjää pysymään sivustolla. Tämä tunne syntyy siitä, että sivurakenteessa ei ole kovia särmiä ja säröjä.

web gradients - nyc_pride kuten yllä olevasta esimerkistä näkyy, gradientti rauhoittaa taustakuvan toimintaa, jotta se sopii tämän käyttöliittymäsuunnittelun taustaksi.

Haluatko tietää syyn siihen?

salaisuus on, että gradientin levittämä harmonia juontuu luonnossa ilmenevistä ilmiöistä, joissa ei yleensä esiinny kovia särmiä. Kaikella on orgaaninen muoto tai pehmeät siirtymät.

myös ihmisillä on loistava värinäkö ja he nauttivat värien näkemisestä. Kuvitelkaa mustavalkoinen liukuväri. Se riippuu tapauksesta, mutta todennäköisesti se ei näytä, että suuri ja värikäs kaltevuudet ovat suosittuja monissa tapauksissa.

Miksi luulet, että kaikki tykkäävät katsella auringonlaskuja?

web gradientit - auringonlaskun gradientti

vai nostaako vain päänsä taivaalle?

web gradients - nature gradients

käyttämällä gradientteja verkkosivun taustalla voi olla myös huomaamaton tapa ohjata kävijän näkymä sisällön läpi ilman, että etualalle tarvitsee sijoittaa ärsyttäviä nuolia.

tulosaineistoa tulisi joka tapauksessa käyttää tärkeisiin tietoihin ja tausta voi täyttää alempiarvoisen tarkoituksen.

elementtien, kuten painikkeiden ja kuvakkeiden kaltevuudet voivat myös johtaa helppoon 3D-efektiin.

aina ei ole helppoa löytää sopivaa gradienttia ja soveltaa sitä oikein kaikilla näillä eduilla.

älä huoli. Siihen on ratkaisu.

verkossa on monia työkaluja, jotka tarjoavat jo paljon valmiita liukuvärejä joko vain inspiraatioksi tai suoraan niiden integroimiseksi helposti verkkosivustoosi.

nyt on vain selvitettävä, mikä työkalu sopii tarpeisiisi parhaiten.

aloitetaan.

inspiroivat web gradientit…

web gradientit - symodd

kuten mainittiin, symodd on klassinen esimerkki siitä, miten hyvät web gradientit voivat toimia yksinkertaisena taustana, joka on muutenkin mielenkiintoinen ja vangitseva.

web gradientit - qards

ei käytä Qards a-gradienttia vain taustana, vaan niitä sovelletaan myös lähes jokaiseen yksittäiseen elementtiin erityisesti kuvakkeisiin ja painikkeisiin.

web gradients - gogoro

Gogoro käyttää gradienttia muodossa, joka tekee siitä dynaamisemman ja tukee brändin tarkoitusta.

kuten näiltä verkkosivuilta näkyy, kyse on oikean tasapainon löytämisestä ja värien kohtuukäytöstä.

ei ole inspiroiva gradientti:

web gradientit - badExample

tämä gradientti on niin ruma, että joudun pyytämään anteeksi sen esittämistä tässä, koska se sattuu silmään niin paljon. Siinä on liikaa värejä, jotka ovat kaikki hyvin erilaisia. Myös etualalla oleva tavallinen musta teksti näyttää syrjäytetyltä ja jää kaltevuuden vaimentamaksi.

joten, jos nähtyäsi nämä esimerkit et ole vieläkään aivan varma, voisitko käyttää gradienttia, joka pystyy tukemaan projektia niin kuin sen pitäisi, voit mennä syvemmälle web-ja graafiseen suunnitteluun.

ei riitä?

WEB DESIGN PROFESSIONAL

Lue lisää allekirjoituskurssistamme.
Valitse paras aikataulu
opiskella verkossa tai koulussa.

VIEW COURSE

seuraa tätä opasta saadaksesi paremman käsityksen gradienttityypeistä ja neuvoo parhaita käytäntöjä.

…ja mistä niitä löytää

web gradients - uiGradients
web gradients - uiGradients

uiGradients on erittäin helppokäyttöinen, koska siinä on vain kaksi päänäyttöä. Latauksen jälkeen näet suoraan satunnaisen liukuvärin koko näytöllä.

sivuilla olevien nuolien avulla voit vaihtaa suuren tarjouksen sisällä kaikenlaisia kaltevuuksia. Toinen näyttö näyttää kaikki kaltevuudet listana, jota selata ja lajitella värin mukaan.

rainan gradienttien luomaa ilmakehää tukee sen oma nimi. Erikoisuutena voit myös pyörittää liukuväriäsi nähdäksesi, miltä se näyttää toisesta perspektiivistä katsottuna.

niille, jotka haluavat lisätä luodun gradienttinsa yhteisölle, on olemassa mahdollisuus lisätä gradienttisi kokoelmaan Githubin kautta. Tämä tekee kaltevuuksien moninaisuudesta lähes rajattoman.

uiGradients tarjoaa kolme tapaa tallentaa valitsemasi gradientti. Jos haluat luoda gradientin uudelleen graafisen suunnittelun ohjelmistolla tai koodilla, voit kopioida Hex-värikoodin.

suoraan toteutukseen verkkosivuillesi saa CSS-koodin.

tallentaaksesi gradientin inspiraationa lataa JPEG-tiedosto.

Webgradientit

webgradientit - Webgradientit

Tämä työkalu alkaa näyttämällä kokoelman 180 webgradienttia pitkänä luettelona, jota voit selata. Kun haluat nähdä enemmän yhdestä liukuväristä, Napsauta valintaasi ja väri näkyy koko näytöllä.

jokaisella gradientilla on nimi, joten se konkretisoi niiden mahdollista soveltamista myöhemmin.

Webgradientsia ylläpitää itmeo-niminen yritys, joka tarjoaa useita digitaalisia työkaluja verkossa. Niiden gradienttipalvelu on tässä tapauksessa ilmainen, ellet halua ladata Sketch-tai Photoshop-tiedostoa.

kuten uigradienteissa, sinulla on myös kolme mahdollisuutta tallentaa Uusi gradientti-inspiraatiosi tähän.

jokaista gradienttia varten voit tallentaa suuren PNG-tiedoston käyttääksesi sitä taustana omalle graafiselle suunnittelullesi.

tarkkojen värien ja gradientin käyttämiseksi graafisessa suunnitteluohjelmistossa tai koodissa voi kopioida Hex-värikoodin tai saada gradientin CSS-version.

coolHue

web gradients - coolHue

Tämä kokoelma gradientteja näkyy jo, kun avaat sivuston ensimmäisen kerran. Voit valita 60 värikylläistä kaltevuutta. Vain selata kussakin tapauksessa kuusi laatat peräkkäin tämän erilaisia kaltevuus.

valitettavasti gradienttia ei voi näyttää täysikokoisena.

mukava lisä coolhuelle on animaatio, kun leijut gradienttilaatan päällä, jolloin saat siitä konkreettisen vaikutelman.

rainan kaltevuudet tuovat ilmakehänsä juuri värien läpi. Siksi heillä ei ole nimiä tässä työkalussa. Siksi oikeassa alakulmassa, sinulla on enemmän vaihtoehtoja luonnos ja Photoshop.

kun viet valitun liukuvärin päälle, näkyviin tulee vielä kaksi vaihtoehtoa. Voit kopioida CSS-koodin helppoa täytäntöönpanoa varten koodiisi tai ladata pienen PNG-tiedoston.

Jos haluat käyttää tarkkoja värejä, voit kopioida Hex-värikoodin gradientin alapuolelta.

Colourspace

colourspace

ColorSpace tarjoaa mahdollisuuden valita ja levittää gradienttiväriä 10 eri suuntaan. Värin voi valita esiin ponnahtavasta väri-valikosta, joka on sama kuin kuvankäsittelyohjelmassa. Voit myös liittää värin Hex-värikoodin, jotta saat tarkat värit, joita haluat käyttää.

gradientti levitetään taustalle koko kuvaruudulle. Tämä antaa sinulle erittäin hyvän tuntuman värien tunnelmasta ja motivoi sinua valitsemaan värin, joka mielestäsi sopii parhaiten etsimääsi aiheeseen.

Colourspace-ohjelmalla voit myös kopioida valitsemasi värigradientin URL-osoitteen. Tämän ansiosta värivaihtoehtojen jakaminen on erittäin helppoa ilman tiedoston tallentamista ja sen lähettämistä liitetiedostona tai värivaihtoehtojen lähettämistä. He voivat vain nähdä, mitä katselit klikkaamalla linkkiä olet lähettänyt ja heillä on kaikki tarvitsemansa tiedot, heksadesimaalikoodit ja CSS-koodi.

Jos kuitenkin haluat tallentaa kuvatiedoston, valitettavasti tämä sivusto ei anna sinulle tätä vaihtoehtoa.

Ultimate CSS Gradient Generator

web gradients - Ultimate CSS Gradient Generator

nyt tulemme monimutkaisempiin työkaluihin, joita tässä tapauksessa, kuten nimi jo sanoo, käytetään vain integrointiin CSS-koodiin.

käyttöliittymä on jaettu neljään osaan ja muistuttaa tyypillistä graafisen suunnittelun ohjelmistoa. Voit säätää tai luoda esiasetuksia, tarkastella tätä tulosta pieni esikatselu ja vilkaista koko CSS-koodi.

Ultimate CSS Gradienttigeneraattori on osa selainlaajennusta ColorZilla. Sen gradienttityökalu tarjoaa rajattomat mahdollisuudet web gradienttien luomiseen.

voit lisätä niin monta väriä kuin haluat, säätää värisävyä ja värikylläisyyttä kuten tiedät graafisen suunnittelun ohjelmistosta, kääntää liukuväriä ja asettaa liukuvärin värit, peittävyyden ja sijainnin.

sen lisäksi, että, voit tallentaa oman luotu kaltevuus esiasetukset, on vain yksi tapa viedä se CSS tai SASS koodi.

mutta tätä ennen voit asettaa gradientin koon, muuttaa sen suuntaa eri suuntiin ja valita värimuodon viidestä annetusta vaihtoehdosta.

Problems to decide?

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

se, mitä web gradienttityökalua kannattaa käyttää, riippuu aina projektista, ajasta ja yksilöllisyyden tasosta tai muista laatuvaatimuksista.

yllä olevasta taulukosta voi päätellä, mitä työkalua kannattaa parhaiten käyttää toivomaansa lopputulokseen.

Muistatko tärkeimmän?

älä käytä liikaa värejä – tämän päivän paras käytäntö on käyttää vain kahta väriä, jotka eivät myöskään ole liian erilaisia.

sinun tulisi myös kiinnittää huomiota gradienttisi yleiseen rakenteeseen, siihen, miten sovellat sitä projektiisi myöhemmin ja miten se sopii ympäristöönsä.

uiGradients tarjoaa kaikki tärkeät visuaaliset ominaisuudet, kuten taulukosta näkyy. Tämä työkalu saa sinut kuvittelemaan projektisi kaltevuuden parhaalla mahdollisella tavalla.

Jos haluat mennä syvemmälle gradientin mukauttamiseen laadukkaaseen web-projektiin, voit yhdistää uigradientit lopulliseen CSS Gradienttigeneraattoriin tuomalla CSS-koodin tai ladatun kuvan.

nyt olet valmis tekemään sen itse. Jos päätät työskennellä liukuvärien kanssa, kerro siitä meille Twitterissä.

WEB DESIGN PROFESSIONAL

Lue lisää allekirjoituskurssistamme.
Valitse paras aikataulu
opiskella verkossa tai koulussa.

katso kurssi

Vastaa

Sähköpostiosoitettasi ei julkaista.