Így készíts üveg-textúrát Figmában Néhány egyszerű lépésben.

1. Ahol az üveg jól mutat

Az üvegtextúra akkor a legszebb, ha mögötte történik valami, például színes foltok vagy egy fotó, amely elmosódva kirajzolódik rajta. Kártyákon és lebegő menükön ad mélységet a felületnek, egyszínű háttér előtt viszont szinte láthatatlan marad.

2. Kitöltés és körvonal

Hozz létre egy egyszerű alakzatot, és adj neki fehér (FFFFFF) Linear gradient kitöltést, amely 63 százalékos opacity-ről 23 százalékosra halványul. Ezután az egész Fill értéket állítsd 50 százalékos opacity-re.

Az alakzat kapjon egy vékony körvonalat is, szintén gradienttel, amely C8C8C7 színről 100 százalékos opacity-vel indul, és D6F4FD színnél 0 százalékra fogy, a körvonal egészét pedig hagyd 100 százalékon. Ettől kap az üveg egy finom peremet, amelyen megcsillan a fény.

3. A három árnyék

Most jönnek az árnyékok, ebből háromra lesz szükség, egymásra rétegezve. Az alábbi értékek egy 548 pixel átmérőjű körhöz tartoznak, kisebb vagy nagyobb alakzatnál arányosan érdemes igazítani őket.

• Az első egy közeli, élesebb árnyék, X 4, Y 6, Blur 14, fekete (000000) színnel, 32 százalékos opacity-vel.
• A második egy távoli, puha árnyék, X 20, Y 24, Blur 94, fekete színnel, 25 százalékos opacity-vel.
• A harmadik a kettő közötti átmenet, X 13, Y 13, Blur 32, fekete színnel, 20 százalékos opacity-vel.

4. Elmosás és szemcse

Ezután még egy Background blur kell az alakzatra, az eredeti receptben 62-es értékkel, és már kész is az üveg alapja. Tegyél mögé valamilyen színes alakzatot, és nézd meg, hogyan rajzolódik ki rajta elmosódva.

Hogy élethűbb legyen, dobj rá egy szemcsés réteget 10 százalékos opacity-vel a Noise nevű plugin segítségével. A valódi matt üveg sosem tökéletesen sima, és ez a finom zaj adja azt az anyagszerűséget, amitől a szem elhiszi a hatást.

5. Olvashatóság az üvegen

Az üvegkártyára kerülő szövegnél figyelj a kontrasztra. Mivel a háttér átsejlik, a szöveg alatt hol világosabb, hol sötétebb rész lesz, és ami egy helyen jól olvasható, egy kicsit odébb már elveszhet. Ilyenkor segít, ha a szöveg mögött erősebb elmosást vagy kevésbé áttetsző kitöltést használsz.

6. A beépített Glass effekt

A Figma újabb verzióiban már beépített Glass effekt is van, amelyet egy alakzatra kapcsolva a fénytörés és a homályosítás erősségét csúszkákkal állíthatod. Ha gyorsan kell eredmény, érdemes azzal kezdeni, ha viszont pontosan szeretnéd irányítani az árnyékokat és a peremet, a fenti, kézzel felépített recept továbbra is jól használható.