Gradientin luominen Figmassa

Kun et voi valita yhtä väriä, liukuvärit ovat erinomainen vaihtoehto. Figmassa voit tehdä erilaisia ​​kaltevuustaustoja, laittaa liukuvärin muotoon ja tekstiin, luoda viivan liukuvärejä ja paljon muuta. Voit jopa luoda mesh-gradientteja sumennustehosteella tai Figma-yhteisön mesh-gradient-laajennuksella.

Koska Figmalla on niin monia eri tapoja luoda gradientti, uusien käyttäjien voi olla vaikea ymmärtää niitä kaikkia alusta alkaen. Kokeilu on tietysti osa oppimisprosessia, mutta on paljon helpompaa saada kaikki ohjeet yhteen paikkaan. Ja tämä artikkeli tarjoaa juuri sen.

Kuinka luoda erilaisia ​​gradienttityylejä Figmassa

Figma tarjoaa erilaisia ​​gradienttityylejä, joilla voit täyttää taustat tai esineet kankaalle useilla väreillä.

• Lineaarinen:  Lineaarisissa liukuväreissä on kaksi väriä, jotka sulautuvat toisiinsa suoraksi viivalla.
• Säteittäinen:  Säteittäisissä gradienteissa ensimmäinen väri alkaa yhdestä pisteestä ja sulautuu toiseen kaikkiin suuntiin.
• Kulma:  Kulmagradienteissa voit määrittää kaltevuuden suunnan lisäämällä kulmia. Se on erinomainen vaihtoehto 3D-kuvien luomiseen.
• Timantti:  Kuten nimestä voi päätellä, timanttien kaltevuudet alkavat yhdestä pisteestä ja leviävät timantin muotoon.

Kaikkien näiden liukuvärityylien luomisen vaiheet ovat samat. Ainoa ero on valitsemassasi tyylissä. Voit luoda gradienttimallin Figmassa seuraavasti:

1. Avaa tyhjä Figma-tiedosto.
   
2. Napauta "Suorakulmiotyökalu" vasemmasta työkalupalkista.
   
3. Piirrä työkalun avulla kankaalle suorakulmio käytettäväksi liukuväriviittauksena.
   
4. Valitse luotu suorakulmio.
   
5. Avaa värivalitsin napsauttamalla oikeanpuoleisen paneelin "Täyttö" -kohdassa nykyistä väriä.
   
6. Paina avattavaa valikkoa ja muuta oletusarvo "Kiinteä" haluamallesi liukuväristyylille. Näkyviin tulee kaksi väriä tai ruutua.
   
7. Valitse jokainen väripysähdys ja valitse väri, jonka haluat lisätä liukuväriin.
   
8. Tallenna liukuväri tyyliksi napauttamalla Täytä-kohdan vieressä olevaa neljää pistettä.
   

Tämän jälkeen voit säätää läpinäkyvyyden arvoa, sijoittaa väripysähdykset siihen, mihin haluat yhden värin päättyvän ja toisen alkavan, lisätä toisen värin pysähdyksen, siirtää niitä kankaalla tai muuttaa liukukulmaa. Kun olet tehnyt säätämisen, tallenna gradientti uudelleen (vaihe 8).

Huomautus:  Jos haluat poistaa lisäämäsi väripysähdyksen, valitse pysähdys ja paina "Poista" tai "Askelpalautin" näppäimistöltä.

Nyt voit käyttää gradienttityyliä mihin tahansa haluamaasi objektiin.

Mesh-gradientin luominen Figmassa

Mesh-gradientit ovat suosittuja suurten yritysten ja tuotemerkkien keskuudessa. Jos käytät usein Instagramia, näet sen joka päivä sovelluksen logon. Siten niiden luomisen tietäminen voi olla hyödyllistä tilanteissa, joissa sinun on lisättävä projekteihisi mielenkiintoa.

Kuten mainittiin, mesh-gradientteja voidaan luoda Figma-yhteisön tarjoamalla laajennuksella . Mutta on olemassa selkeämpi tapa lisätä useita värejä haluamaasi paikkaan kankaalle ilman ulkoisia työkaluja.

Näin luot mesh-gradientin Figmassa:

1. Kirjoita uusi Figma-tiedosto.
   
2. Luo kehys.
   
3. Valitse oikeanpuoleisessa paneelissa Leikkaa sisältö -ruutu, jotta kaikki kehyksen ulkopuolelle jäävät asiat leikataan.
   
4. Aloita eri muotojen lisääminen tai luo oma objekti kehyksen sisällä olevalla kynätyökalulla.
   
5. Muuta jokaisen uuden lomakkeen "täyttö" niin, että se eroaa muista.
   
6. Valitse kaikki muodot.
   
7. Paina Tehosteet-kohdassa avattavaa valikkoa ja valitse Tason sumennus.
   
8. Avaa "Layer blur" -asetukset ja lisää arvoa, kunnes et enää näe selkeitä rajoja muotojen välillä.
   
9. Tallenna tyyli kuten yllä ja käytä sitä muissa objekteissa.

Toinen tapa luoda verkkogradientti on käyttää kulmatyyliä. Se antaa hieman erilaisen, mutta yhtä mielenkiintoisen kiehtovan tuloksen kuin ensimmäinen opetusohjelma.

Tässä on mitä sinun tulee tehdä:

1. Avaa tyhjä kangas.
   
2. Käytä haluamaasi muotoa ja lisää se kankaalle.
3. Vaihda "Täyttö"-kohdan "Kiinteä" arvoksi "Kulma".
   
4. Valitse gradientin värit.
   
5. Säädä kulmaa ja muita gradientin näkökohtia.
   
6. Lisää toinen muoto, mieluiten "Eclipse", eli ympyrä.
   
7. Aseta se kankaalle toisen muodon päälle.
   
8. Lisää lineaarinen gradientti ja vaihda väri sellaiseksi, joka sopii hyvin muihin.
   
9. Käytä "Tehosteet" -kohdassa "Layer blur" -tehostetta ja sumenna uuden muodon viivat sulautuaksesi ensimmäiseen muotoon.
   

Kuvan gradientointi Figmassa

Liukuvärin luomisen lisäksi voit myös lisätä olemassa olevan kuvan päälle liukuväriä lisätäksesi ulottuvuutta. Se antaa sille "haalistuvan" efektin tai illuusion näkymättömästä valonlähteestä, joka loistaa kuvaan ulkopuolelta.

Näin lisäät liukuvärin kuvaan Figmassa:

1. Avaa uusi tiedosto Figmassa.
   
2. Vedä ja pudota kuva, johon haluat lisätä liukuvärin, kankaalle.
   
3. Lisää muoto, joka vastaa yläreunassa olevan kuvan kokoa.
   
4. Valitse liukuvärityyli Täytä-osiosta.
   
5. Valitse gradientin värit värivalitsimesta.
   
6. Säädä peittävyyttä, kulmaa jne.
   

Voit myös käyttää kynätyökalua ja piirtää muodon alueelle, jossa haluat liukuvärin olevan.

Tekstin liukuvärjäys Figmassa

Liukuvärin luominen tekstiin Figmassa on melko samanlaista kuin gradientin luominen mille tahansa muulle muodolle. Tässä ovat vaiheet:

1. Avaa uusi kangas Figmassa.
   
2. Paina "Teksti"-työkalua vasemmalla olevasta työkalupalkista.
   
3. Napsauta mitä tahansa kankaalla ja aloita kirjoittaminen.
4. Valitse teksti ja siirry kohtaan "Täytä".
   
5. Valitse gradienttityyli.
   
6. Paina jokaista väriruutua ja etsi väri, jonka haluat lisätä liukuväriin.
   

UKK

Kuinka monta väriä voin lisätä gradienttiin Figmassa?

Voit lisätä niin monta väriä kuin haluat sekä vakio- että mesh-Figma-gradienttityyleissä. Mutta yritä olla menemättä yli laidan. Koska liukuväreillä on useita siirtymävärejä, enemmän kuin viisi saattaa olla liikaa, jopa verkkogradientille.

Voinko tuoda gradientin Figmaan?

Voit tuoda minkä tahansa gradientin Figmaan. Voit esimerkiksi liittää koodin CSS:stä (Cascading Style Sheets) avaamalla "Koodi"-paneelin ja liittämällä koodin. Voit myös tuoda liukuvärejä Adobe Illustratorista.

Mistä löydän ilmaiset Figma-gradientit?

Löydät ilmaiset ja maksulliset Figma-gradientit  Figma-yhteisöstä . Siinä on lukuisia Figman käyttäjien luomia upeita ja ainutlaatuisia malleja. Voit suodattaa lisäosien, tiedostojen ja widgetien mukaan. Kirjoita vain "gradientti" yläreunan hakupalkkiin ja löydä haluamasi.

Hanki funky värikkäiden liukuvärien avulla

Gradientit ovat erinomainen tapa tehdä suunnittelusta erottuva ja persoonallinen. Ja Figman avulla voit tehdä sujuvan siirtymän kahden tai useamman valitsemasi värin välillä. Älä kuitenkaan liioittele sitä. Sekoita hyvin yhteen sopivat värit ja yritä pysyä saman väripaletin sisällä.

Oletko jo kokeillut gradientin tekemistä Figmassa? Kerro meille alla olevissa kommenteissa, mitä gradienttityyliä käytit ja mihin käytit sitä.