Vysvětlení tlačítka

Dobrý den! Chcete-li do Figmy přidat dovednosti manipulace s vrstvami, ukážu vám, jak můžete v závislosti na interních objektech rozzářit zářící tlačítko s maskou.

1. Objekty

Nejprve musíte vytvořit dva objekty

2. Maska

Maskujte objekty tlačítkem v horní části obrazovky Figma nebo ctrl + alt + M. Po vytvoření masky do ní přidejte další obdélník, aby maska ​​nebyla průhledná

3. Rozostření

Elipsě dodáte efekt rozostření vrstvy. Přesuňte ji k okraji tak, aby polovina elipsy přesahovala masku.

4. Znovu maskovat

< p> Vyberte ve vrstvách objekt „Maska“. Dejte mu vržené stíny s dostatečnou intenzitou rozmazání (asi 50). Získáte efekt, že slabá záře elipsy je viditelná mimo masku

Nyní již znáte princip slábnoucí záře mimo masku. Skvělé, vytvořme nyní tlačítko s tímto efektem.

Oznámení na vc.ru Zakázat reklamy Osobní zkušenost Jak jsem investoval 24,5 milionu rublů do reklamy na moji značku sluchátek CaseGuru Ahoj všichni! Jsem tu znovu s vámi, obyvatelem Tyumenu Vadima Bokova – tvůrce značky příslušenství CaseGuru pro smartphony. V …

5. Tlačítko objekty

Vytvořte obdélník, dvě elipsy a text tlačítka. Hlavní místo je, že hranice elipsy leží v jedné části na povrchu obdélníku a v druhé části vyčnívají za jeho okraj.

6. Maska tlačítka

Teď, jak jsem ukázal výše, zabalíme objekty do masky

7. Dekorace

V takovém tlačítku musí mít obdélník, který vytvoříme pro pozadí, velikost masky, včetně zaoblení nebo jiných manipulací, aby se hrany obdélníku a masky shodovaly. (Pro správnou vnitřní záři kolem okraje masky)

Nastavte styl na obdélník:

– Vyplňte # $$$$$$ 1% (libovolná barva)

– Inner Shadow Blur 6 (uprostřed)

Také obarvujeme naše elipsy a dáváme jim efekt rozostření vrstev a dostaneme toto tlačítko

8. Přidání efektu k masce

Na samotnou vrstvu masky můžete přidat 1 nebo 2 vržené stíny, které se vám líbí, ale já použijte dvě vrstvy rozostření s hodnotou 8 a 3 (uprostřed) …

Výsledek: Máme světelné tlačítko, ve kterém jsou zvnějšku zvýrazněny vnitřní efekty, jako by vytvářely slábnoucí záři.

Děkujeme, že jste si přečetli do konce, nebo ještě lépe – pro zábavu, toto je vše na obr.!) Můžete si také přizpůsobit animace pohybu elips při vznášení, ale pokud chcete, v jiné sérii. 🙂

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.