Hvordan lage en frostet glasseffekt i Figma

Frostet glass fungerer godt for privatliv eller for å legge subtilitet til et design, i virkelige og digitale design. Å lage en frostet glasseffekt er enkelt i Figma og kan gi designene dine en unik stil på en måte som ser mye mer kompleks ut enn den er. La oss vise deg hvordan.

Hvordan lage en frostet glasseffekt

For å få full effekt av frostet glass, bør du allerede ha et slags bakgrunnsbilde i designet ditt. Effekten fungerer best på toppen av fotografiske eller visuelt komplekse bilder, i stedet for bare vanlige fargeblokker eller vanlig bakgrunn.

Vi bruker frostet glass-effekten som en punktindikator på et presentasjonsdesign, for å legge til en elegant, minimalistisk effekt til presentasjonen. Dette gir litt ekstra stil til designene dine i stedet for bare å bruke en enkel linje eller vanlig kulepunkt som en indikator.

Du kan lage en mastermal for presentasjoner i Figma og bruk denne frostede glasseffekten i den. Hvis du vil lage en elegant punktindikator, er det bare å følge med.

1. Tegn en linje

Tegn linjen din ved å bruke Linjeverktøy (L). Hold nede for å holde linjen vannrett Skifte mens du tegner den. Velg en farge for linjen ved å klikke på den fargede firkanten under Slag mens linjen er valgt.

Fargen skal være mørk nok til å kontrastere bakgrunnen din, men den må også se bra ut med fargene i presentasjonen. Du kan bruk Adobe Illustrator til å lage en fargepalett å finne farger som fungerer sammen.

Endre bredden på linjen i Stroke-innstillingene; klikk på ikonet med tre horisontale linjer og øk tallet til ønsket tykkelse. For å få avrundede ender, klikk på rullegardinmenyen med en horisontal linje i Strek-menyen, og bla til bunnen av rullegardinmenyen for alternativet for avrundede ender.

2. Tegn en sirkel

Tegn en liten sirkel ved hjelp av Ellipseverktøy (O). Holde nede Skifte mens du tegner sirkelen for å gjøre den perfekt sfærisk. Sirkelen din skal være liten nok til å brukes som et kulepunkt, men stor nok til at det frostede glasset vil være tydelig.

For å legge til farge, velg sirkelen og bruk Fylle på høyre verktøylinje. Du kan bruke en nøytral farge – som grå eller beige – eller en lysere farge fra designens fargepalett.

Deretter endrer du opasitet ved siden av Fylle til hvor som helst mellom 40 % og 70 %. Du vil kunne se designet bak sirkelen mens du fortsatt ser fargen du har fylt sirkelen med.

3. Legg til en bakgrunnsuskarphet

Dette er delen som gir den frostede effekten til formen din. Velg sirkelen og gå til Effekter. Standardeffekten er Drop Shadow, hold musepekeren over den og klikk på pilen som vises. Velge Bakgrunnsuskarphet.

For å øke eller redusere uskarphet, klikk på ikonet ved siden av Bakgrunnsuskarphet, og endre tallet til ønsket uskarphet-effekt.

For å fullføre punktindikatoren, flytt linjen slik at den er på linje med kanten av sirkelen. Velg både linjen og sirkelen, høyreklikk og velg Gruppevalg. Nå kan du flytte eller duplisere dette for bruk på ulike deler av designet ditt.

Uskarpheten fungerer over enhver del av designet på samme måte, som vist i et annet eksempel vi gjorde ovenfor. Hvorfor ikke inkludere denne teknikken en kreativ designutfordring? Effekten vil bli en stor design ressurs.

Legg til elegant minimalisme til designene dine med en frostet glasseffekt

Den frostede glasseffekten i Figma er en enkel måte å legge til en elegant stil til ellers enkle designaspekter. Du kan bruke frostet glass-effekt på mange måter, for eksempel fullfargepaneler, søkefelt eller personvernvinduer over design. Prøv å legge til en kantlinje, lage en gradient eller plasser det frostede laget mellom andre lag for en viss teksturforskjell.

Hvordan lage og legge til Mockups til Figma-designene dine ved å bruke plugins

Les Neste