Jak rozostřit pozadí ve Figma – Rychlý průvodce efekty pozadí

Zjistěte, jak rozostřit pozadí ve Figma pomocí rozostření pozadí a efektů vrstev. Ideální pro návrh UI a elegantní překryvy.

Create Stunning Product Video & Docs with AI

Tento tutoriál byl vytvořen pomocí Trupeer za méně než 5 minut

Vytvořit zdarma

V této příručce se naučíte, jak v aplikaci Figma použít efekt rozostření na rámeček pomocí nabídky pro návrh.
Postupujte podle podrobných kroků a dosáhněte požadovaného rozostření prvku ve svém návrhovém projektu.

Efekt rozostření pozadí v aplikaci Figma dodá vašemu návrhu vzhled matného skla, který se běžně používá v modálních oknech, kartách a překryvech.

Krok 1: Připravte vrstvu pro rozostření

Vytvořte tvar
Vytvořte obdélník nebo jakýkoli tvar/rámeček, ve kterém se má efekt rozostření zobrazit.
Přidejte výplň
Vyplňte ji plnou barvou (např. bílou nebo šedou).
Snižte krytí
Zmenšete krytí vrstvy (typicky přibližně 10–40 %). Tento krok je zásadní pro rozostření bez průhlednosti se totiž nezobrazí.

Krok 2: Použijte rozostření pozadí

Vyberte vrstvu
Klikněte na tvar, který jste právě vytvořili.
Přejděte do panelu Efekty
V pravém postranním panelu klikněte na „+“ vedle Effects a poté v rozbalovací nabídce vyberte Background Blur.
Upravte hodnotu rozostření
Klikněte na ikonu nastavení vedle efektu a pomocí posuvníku ovládejte, jak rozostřené bude pozadí.

Volitelné: Jemné doladění

Můžete kombinovat rozostření pozadí s vrženými stíny pro větší hloubku.
Upravte krytí a rozostření společně a vytvořte buď jemný matný vzhled, nebo výrazné, skleněné rozostření.

Krok za krokem: Jak rozostřit pozadí v aplikaci Figma

Krok 1

Než začnete v aplikaci Figma používat efekt rozostření, nejprve vyberte rámeček, který chcete rozostřit.

Přejděte do nabídky pro návrh umístěné na pravé straně rozhraní. V této nabídce najděte sekci s efekty a klikněte na ni.

V sekci s efekty klikněte na „Add a new effect“ tak, že v ní kliknete na symbol „+“.

To begin applying a blur effect in Figma, first select the frame you wish to blur. Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it. In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

Krok 2

Jakmile je nový efekt přidán, zobrazí se rozbalovací nabídka. Klikněte na tuto nabídku a vyberte „Layer Blur“. Efekt rozostření je nyní úspěšně použit na vámi zvolený rámeček.

Once the new effect is added, a drop-down menu will appear. Click on this menu and select 'Layer Blur.' The blur effect has now been successfully applied to your chosen frame.

Tipy pro profesionály, jak rozostřit pozadí v aplikaci Figma

Použijte rozostření na objekt:
Vyberte objekt (obrázek, tvar nebo rámeček), který chcete rozostřit. V pravém postranním panelu v sekci Efekty klikněte na ikonu + a v rozbalovací nabídce vyberte Background Blur nebo Layer Blur.
Upravte intenzitu rozostření:
Po použití rozostření použijte posuvník k úpravě intenzity rozostření. Můžete množství rozostření zvýšit nebo snížit a dosáhnout tak požadovaného efektu.
Pro větší kontrolu použijte Gaussovské rozostření:
Pro přesnější kontrolu efektu rozostření použijte Gaussian Blur, které vytváří plynulejší a postupnější rozostření.
Rozostření obrázků nebo rámečků:
Pokud rozostřujete obrázek nebo rámeček, ujistěte se, že je vybraný právě ten obrázek. Obrázek můžete rozostřit, aniž byste ovlivnili další prvky návrhu.
Více rozostření na vrstvách:
Můžete použít více efektů rozostření na různé vrstvy. Například pokud chcete rozostřené pozadí s čitelným textem, použijte rozostření pouze na vrstvu pozadí.

Nejčastější chyby, když chcete rozostřit pozadí v aplikaci Figma

Rozostření nesprávné vrstvy:
Řešení: Před použitím rozostření si dvakrát zkontrolujte, kterou vrstvu jste vybrali. Použijte panel Vrstvy, abyste se ujistili, že upravujete správnou vrstvu.
Přílišné používání efektu rozostření:
Řešení: Nepoužívejte příliš velké rozostření na důležité prvky, jako je text nebo loga, protože to může snížit čitelnost. Používejte rozostření střídmě pro zvýraznění v návrhu.
Nechtěná čitelnost po rozostření:
Řešení: Pokud rozostření obrázků vede k nežádoucí čitelnosti, upravte množství rozostření a vyzkoušejte různé efekty, jako je Gaussian Blur, abyste dosáhli požadovaného vzhledu.
Rozostření se nezobrazuje při exportu:
Řešení: Pokud se efekt rozostření nezobrazuje při exportu, ujistěte se, že exportujete ve vysokém rozlišení (PNG nebo SVG) pro lepší kvalitu.

Časté dotazy, jak rozostřit pozadí ve Figma

Můžu ve Figma rozostřit text?
I když můžete rozostřit vektorové tvary a obrázky, ve Figma nemůžete text přímo rozostřit. Můžete však převést text do rastrového tvaru a poté použít efekt rozostření.
Jak mohu rozostřit pozadí návrhu?
Vyberte vrstvu pozadí nebo obrázek, použijte efekt Layer Blur a upravte intenzitu. To je skvělé pro vytvoření důrazu na prvky v popředí.
Lze ovládat směr rozostření?
Efekt rozostření ve Figma se aplikuje rovnoměrně. Pokud potřebujete směrové rozostření (např. motion blur), budete muset použít externí nástroje pro úpravu obrázků, jako je Photoshop nebo Illustrator, a poté obrázek zpět importovat do Figma.
Zůstane efekt rozostření i po exportu návrhu?
Ano, efekt rozostření zůstane v exportovaném návrhu, pokud je soubor uložen v podporovaném formátu, jako je PNG nebo JPG.
Existuje způsob, jak rozostřit jen část obrázku?
Ano, ve Figma můžete použít masku k izolaci konkrétní oblasti obrázku a efekt rozostření aplikovat pouze na tuto část.
Jak udělat záznam obrazovky na mac?
Pro záznam obrazovky na Macu můžete použít Trupeer AI. Umožňuje zachytit celou obrazovku a nabízí funkce s umělou inteligencí, jako je přidání AI avatarů, přidání komentáře (voiceover), přidání zoomu dovnitř a ven ve videu. Díky funkci překlad videa s umělou inteligencí od trupeer můžete video přeložit do 30+ jazyků.
Jak přidat AI avatar do záznamu obrazovky?
Chcete-li do záznamu obrazovky přidat AI avatar, budete muset použít nástroj pro záznam obrazovky s AI. Trupeer AI je nástroj pro záznam obrazovky s umělou inteligencí, který vám pomůže vytvářet videa s více avatary a také vám pomůže vytvořit si vlastní avatar pro video.
Jak udělat záznam obrazovky ve Windows?
Pro záznam obrazovky ve Windows můžete použít vestavěný panel Game Bar (Windows + G) nebo pokročilý nástroj s umělou inteligencí, jako je Trupeer AI, pro pokročilejší funkce, jako jsou AI avatary, voiceover, překlad atd.
Jak přidat voiceover do videa?
Chcete-li do videí přidat voiceover, stáhněte si rozšíření trupeer ai pro Chrome. Po přihlášení nahrajte své video s hlasem, vyberte požadovaný voiceover v trupeer a exportujte upravené video.
Jak přiblížit záznam obrazovky?
Chcete-li během záznamu obrazovky přiblížit, použijte efekty zoomu v Trupeer AI, které vám umožní přibližovat a oddalovat v konkrétních okamžicích a zvýraznit tak vizuální dopad vašeho videoobsahu.