Kortversionen
- Ett gradientmaterial är den struktur som färgen fyller: en glans, en glöd, en väv, en sten, ett korn.
- Varje Gradiently-Mark byggs av upp till tre staplade materiallager, ett bas och upp till två till som blandas ovanpå.
- Gradientlys material är grupperade i fjorton familjer, från Gradient och Ljus till Textil, Mineral, Glas, Metall och Färg.
- Ljus, korn och rörelse ställs in i varje lager, så samma material kan vara stilla eller dramatiskt.
- Välj material efter vad ytan antyder: korn för tryck och hantverk, siden för lyx, glas och krom för teknik.
På den här sidan
Gradientmaterial är det som får en gradient att se ut som något i stället för en blandning mellan två färger. Ett material är den struktur som färgen fyller: en riktad glans i Siden, ljusdraperier i Norrsken, mjuka blomningar i Mesh, sand i Silt, ådror i marmor. Varje Gradiently-Mark staplar upp till tre av dem och lägger sedan till ljus, korn och rörelse, och därför kan två Marks med samma palett se helt olika ut.
Vad ett material är
Tänk på paletten som färgen och på materialet som ytan den läggs på. Häll samma marinblå, blågröna och orange på siden, frostat glas eller handgjort papper och du får tre olika föremål. I en Mark hämtar varje material från Markens egen palett, så att byta material ändrar karaktären utan att ändra färgerna.
De fjorton materialfamiljerna
Gradiently grupperar sina material i familjer efter vad de liknar. Namnen nedan är riktiga material du möter på Marknaden, och varje familj rymmer många fler.
Material du möter
Material du möter
Material du möter
Material du möter
Material du möter
Material du möter
Material du möter
Material du möter
Material du möter
Vad det är
Material du möter
Material du möter
Material du möter
Material du möter
Material du möter
Siden, norrsken och mesh
De här tre är de som folk frågar mest om. Siden är en riktad glans över fina trådar: elegant, lite formell och hemma i skönhet och mode. Norrsken är ljusdraperier som stiger från en ljus fåll upp i en mörk himmel, dramatiskt på en tom botten. Mesh är mjuka färgblomningar som smälter in i varandra, den klassiska moderna gradienten, vänlig och mångsidig. Sidengradienter, norrskensgradienter och meshgradienter har var sin guide med CSS.
Korn, papper och tryck
Kornfamiljen får en skärm att se tryckt ut. Fiber är handgjort papper med långa fibrer och enstaka fläckar, Riso är ett tryck i två färger, Film är filmkorn och Dither stegar färg i pixlar. De passar mat, hantverk, böcker och allt som ska kännas handgjort. De döljer också banding, de ränder som uppstår i mjuka gradienter, vilket korniga gradienter förklarar.
Hur lager staplas
En Mark har ett baslager och upp till två till ovanpå. Varje övre lager har sin egen opacitet och ett blandningsläge (normal, screen, multiply, overlay eller mjukt), samma idé som lager i ett bildredigeringsprogram. Ett vanligt recept är en bred bas som Mesh eller Dis för färgfältet, ett strukturlager som Linne eller Halvton för textur och ett ljuslager som Halo eller Ljusläcka för fokus.
.card {
background:
/* top layer: a light, screened over the rest */
radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
/* middle layer: a fine stripe for texture */
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
/* base layer: the colour field */
linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
background-blend-mode: screen, overlay, normal;
}Ljus, korn och rörelse
Inuti varje lager ändrar en handfull inställningar hur materialet beter sig: dess skala, hur mycket det förvrängs, hur mycket finlir det visar, hur starkt det är belyst, hur mycket korn som ligger på det och hur mycket det rör sig. Samma Siden kan vara ett tätt, klart skimmer eller ett brett, dämpat draperi. Rörelsen delas av hela Marken, med egen fart och drift, så att lagren rör sig tillsammans i stället för mot varandra.
En lugn Mark: bred struktur och milt ljus lämnar gott om plats för ord.
En livligare Mark: finare detaljer och starkare ljus passar lanseringar och events.
Detaljer och ord konkurrerar, och därför lugnar Marks stökiga detaljer nära text av sig själva. En Mark vet var orden finns: dess lugnaste område flyttar sig bakom texten och färgerna nära bokstäverna fördjupas eller lyfts, så att även ett strukturerat material håller din rubrik läsbar.
Så väljer du material
Lugna, vardagliga
- Mesh, Dis, Silt, Linne, Fiber
- Breda former, lite detaljer
- Lätta bakom långa rubriker
- Bra för dagliga inlägg och menyer
Slående, för tillfällen
- Norrsken, Neon, Krom, Glitch, Holografisk folie
- Starkt ljus, fin struktur
- Bäst med mycket få ord
- Bra för lanseringar, events, omslag
Fråga vad ditt varumärke är gjort av. Ett bageri är mjöl, papper och varmt ljus, så Fiber eller Lavering. En studio som säljer mjukvara är glas och rent ljus, så Frostat eller Prisma. Fråga sedan hur ofta du ska publicera på det: ju oftare, desto lugnare bör det vara. Så väljer du rätt Mark går igenom resten av beslutet, och på Marknaden kan du filtrera direkt på material.
Vanliga frågor
Vad är ett gradientmaterial?
Den struktur som en gradients färger fyller, som en glans, en glöd, en väv eller en sten. Den avgör om färgen läses som siden, glas, papper eller ljus.
Hur många lager kan en Mark ha?
Upp till tre: ett baslager och upp till två till ovanpå, var och ett med egen opacitet och eget blandningsläge.
Vad är skillnaden mellan siden och norrsken?
Siden är en riktad glans över fina trådar. Norrsken är ljusdraperier som stiger från en ljus kant upp i en mörk himmel.
Gör korn text svårare att läsa?
Lite korn gör det sällan, och det döljer banding. Marks lugnar också stökiga detaljer bakom ord, så att texten förblir läsbar.
Kan jag söka på Marknaden efter material?
Ja. Marknaden går att filtrera på material, och även på färg, botten, stämning och stil, och den går att söka i med ord som ”blått siden”.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil