Liukuvärimuodot: aidon näköiset möykyt ja pallot

Liukuvärimuodot ovat möykkyjä, hohtopalloja, palloja ja kapseleita, joiden värisiirtymä saa ne näyttämään valaistuilta ja tilavuudellisilta. Ne näyttävät aidoilta yhden valonlähteen mukaan varjostettuina: kirkas heijastus valon puolella, tummempi ydinvarjo kauempana, hento heijastuneen valon reuna ja pehmeä varjo pohjalla. Jos jokin puuttuu, muoto näyttää litteältä liukuväritarralta. Oikein tehtynä kaksi väriä riittää vihjaamaan kiinteään esineeseen.

Miten valo osuu pyöreään muotoon

Maalarit ovat kuvanneet tätä vuosisatoja, ja se pätee jokaiseen piirtämääsi pyöreään muotoon. Valitse valosuunta ennen väriä ja varjosta alueet järjestyksessä. Ylävasen on totuttu suunta, mutta mikä tahansa toimii johdonmukaisesti käytettynä.

Kopioitavat varjostusohjeet

Nämä näytteet ovat valaistustutkielmia: varjostuksia ympyrän, sylinterin tai kartion sisälle. Kaikki valaistaan ylävasemmalta. Käytä niitä pyöristetyssä muodossa, niin saat kiinteältä näyttävän esineen.

Pallo-ohjeet päättyvät edellistä hieman vaaleampaan väriin. Viimeinen pysäkki on heijastunut reuna, aivan ympyrän sisäreunassa rajauksen säilyttämiseksi. Ilman sitä muodon reuna kuolee ja näyttää reiältä pallon sijaan. Säteittäinen liukuväri selittää keskustan ja koon vaikutuksen hiipumiseen.

Tee liukuväripallo CSS:llä

Tee elementistä ympyrä border-radius: 50%-arvolla ja siirrä liukuvärin keskusta valoa kohti. Ympyrä rajaa liukuvärin, jolloin heijastus on sivussa täydellisen pyöreän muodon sisällä. Sumennettu litistetty ellipsi alla luo heittovarjon.

.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}

Möykyt, kapselit ja orgaaniset muodot

Möykyt tuntuvat ystävällisiltä ja pehmeiltä, joten ne ovat suosittuja hyvinvoinnin, ruoan, lasten ja luovien brändien ilmeissä. Valaistussäännöt ovat samat kuin pallolla, mutta pullistumat keräävät heijastuksia useaan paikkaan. Pidä yksi pääheijastus ja muut hentoina. Tyylistä kertoo orgaaniset muodot suunnittelussa.

• Kapseli: sylinterin tavoin varjostettu pyöristetty suorakulmio, valo pituussuunnassa.
• Kivi: litistetty pallo, laaja vähäkontrastinen heijastus mattakiven tavoin.
• Pisara: pallo kirkkaalla terävällä heijastuksella ja vahvalla reunavalolla, mikä tuntuu kiiltävältä.
• Pilvimöykky: päällekkäiset ympyrät yhdellä yhteisellä heijastuksella näyttävät yhdeltä muodolta.

Miksi liukuvärimuoto näyttää litteältä ja miten korjaat sen

Värilämpötila tekee paljon. Lämmin valo antaa viileät varjot ja viileä lämpimät. Violetti pallo hieman vaaleanpunaisella heijastuksella ja sinivioletilla ydinvarjolla tuntuu aidommalta kuin vaaleasta tummanviolettiin kulkeva. Lämpimät ja viileät värit selittää parin.

Liukuvärimuotojen käyttö sommittelussa

1. 1

   Valitse yksi valonlähde

   Kirjoita se: ylävasen, lämmin. Jokainen muoto, varjo ja heijastus seuraa sitä.

2. 2

   Käytä kolmea kokoa

   Yksi suuri, keskikokoinen ja pieni muoto tuntuvat syvyydeltä. Viisi samankokoista möykkyä konfetilta.

3. 3

   Anna muotojen poistua kuvasta

   Suurimman muodon rajaus reunasta saa kankaan tuntumaan rajojaan suuremmalta.

4. 4

   Jätä rauhallinen tila sanoille

   Muodot ovat levottomia. Aseta ne otsikon ympärille, älä taakse.

5. 5

   Lisää rakeisuutta

   Hieno kohina saa digitaalisen varjostuksen tuntumaan painetulta ja peittää raidoittumista. Katso rakeiset liukuvärit.

Jos et halua varjostaa käsin, Gradientlyn Markit ovat elävä tausta kerrostettuine materiaaleineen, valoineen ja rakeisuuksineen. Ne renderöityvät siististi kaikissa suunnittelukoissa. Yhden hohtavan pallon pääkuvakäytöstä kertoo liukuväripallot.