Přejít na hlavní obsah

Jak vytvořit a stylizovat ozubené kolo v programu Figma-podrobný průvodce pro začátečníky

  • Šimon Veselý
  • Praxe

Ozubené kolo je jedním z hlavních dílů jakéhokoli mechanismu, který má ozubený povrch a používá se k přenosu pohybu a změně rychlosti. Často se v designu a ilustracích používají také obrázky ozubených kol k vytvoření efektu mechanismu nebo mechanické složitosti.

Program Figma je oblíbený nástroj pro design a prototypování, který vám umožňuje vytvářet různé prvky rozhraní a ilustrace. V tomto článku se podíváme na to, jak nakreslit ozubené kolo ve Figmě pomocí základních nástrojů a funkcí programu.

Krok 1: Zapněte nástroj Obdélník v panelu nástrojů Figma. Klikněte na ikonu s obrázkem obdélníku nebo pomocí klávesové zkratky "R" aktivujte nástroj. Poté nakreslete čtverec, který bude sloužit jako základ pro vaše ozubené kolo.

Krok 2: Vyberte vytvořený obdélník a nastavte jeho požadované rozměry pomocí panelu vlastností. Velikost můžete určit v pixelech nebo procentech vzhledem k obrazovce nebo jinému objektu. Ve výchozím nastavení má obdélník stejné strany,ale můžete je změnit a vytvořit libovolný obdélník.

Proč byste měli umět nakreslit ozubené kolo ve Figmě?

1Ozubená kola jsou důležitým prvkem rozhraní webových stránek a mobilních aplikací. Vědět, jak nakreslit ozubené kolo ve Figmě, vám umožňuje vytvářet uživatelská rozhraní pomocí tohoto prvku, díky čemuž je design atraktivnější a intuitivnější.
2Ozubená kola lze použít k vytváření ilustrací a grafů v prezentacích, zprávách nebo jiných dokumentech. Schopnost kreslit ozubené kolo do Figmy usnadňuje vkládání tohoto grafického prvku a vytváření stylových a srozumitelných vizuálních materiálů.
3Práce s ozubenými koly ve Figmě rozvíjí dovednosti vektorového kreslení a manipulace s tvary. Schopnost vytvářet složité tvary a aplikovat na ně různé efekty a styly pomůže vytvořit zajímavější a originálnější design.
4Vývojáři mohou pomocí ozubeného kola ve Figmě vytvořit ikony a ovládací prvky ve webových aplikacích. Schopnost kreslit ozubené kolo ve Figma pomáhá návrhářům a vývojářům navázat spolupráci a usnadňuje proces vytváření webových stránek nebo aplikací.
5Ozubená kola lze použít v různých designových projektech a stylech. Schopnost kreslit ozubené kolo ve Figma dává návrhářům větší svobodu experimentovat a možnost vytvořit jedinečný a neobvyklý design, který upoutá pozornost a vyniká mimo jiné.

Schopnost nakreslit ozubené kolo ve Figmě je tedy nezbytná pro vytvoření kvalitního designu, vývoj rozhraní a vizuálních materiálů. Tento designový prvek má širokou škálu aplikací a je důležitý pro různé profesionály související s webovým designem a vývojem.

Krok 1. Vytvoření nového dokumentu

Chcete-li zahájit proces kreslení ozubeného kola ve Figma, musíte vytvořit nový dokument. Proto:

  1. Otevřete Figma a přihlaste se ke svému účtu.
  2. Na panelu nástrojů vyberte " Vytvořit nový dokument "nebo použijte kombinaci kláves" Ctrl+N "(pro Windows) nebo" Cmd+N " (Pro Mac).
  3. V zobrazeném okně vyberte typ dokumentu. Pro vytvoření ozubeného kola je lepší zvolit prázdný dokument.
  4. Zadejte velikost plátna (šířka a výška) podle vašich preferencí.
  5. Kliknutím na tlačítko" Vytvořit " vytvoříte nový dokument.

Poznámka: Figma poskytuje možnost vytvářet dokumenty s různými nastaveními, jako je typ zařízení, jednotky a další. Tato nastavení můžete nakonfigurovat před vytvořením nového dokumentu, pokud je to nutné.

Gratuluji! Právě jste vytvořili nový dokument ve Figmě a jste připraveni začít kreslit ozubené kolo!

Jak program otevřít a začít?

1. Chcete-li začít ve Figma, musíte otevřít program na vašem zařízení. Figma si můžete stáhnout z oficiálních stránek, kde jsou k dispozici verze pro různé operační systémy.

2. Po instalaci spusťte program Figma pomocí zástupce na ploše nebo v nabídce Start.

3. Při prvním spuštění Figma budete vyzváni k vytvoření účtu nebo přihlášení k již existujícímu. Pokud již účet máte, vyberte možnost Přihlásit se, zadejte své přihlašovací údaje a klikněte na Přihlásit se. Pokud ještě nemáte účet, vyberte možnost "Vytvořit účet" a postupujte podle pokynů pro registraci.

4. Po přihlášení do programu uvidíte okno Figma s panelem nástrojů a pracovní oblastí.

5. Nyní můžete začít pracovat na Figma vytvářením nových projektů otevřením stávajících nebo importováním souborů. Chcete-li vytvořit nový projekt, vyberte možnost "vytvořit projekt" z panelu nástrojů nebo použijte kombinaci kláves Ctrl + N.

6. Po vytvoření projektu budete moci do pracovního prostoru přidat různé designové prvky, včetně ozubených kol, pomocí nástrojů a funkcí Figma.

Klávesové zkratky
Kombinace klávesAkce
Ctrl + NVytvořit nový projekt
Ctrl + OOtevřít stávající projekt
Ctrl + SUložit projekt
Ctrl + ZZrušit poslední akci
Ctrl + YOpakovat poslední akci

Krok 2. Nakreslete základ ozubeného kola

Začneme vytvářet ozubené kolečko od kreslení jeho základů. Je to jednoduchý obrázek, který nakreslíme pomocí nástroje obdélník ve Figmě.

  1. Vyberte nástroj Obdélník z panelu nástrojů vlevo nebo stiskněte klávesu R na klávesnici.
  2. Na plátně Figma klepnutím a přetažením nakreslíte obdélník, který bude sloužit jako základ ozubeného kola.
  3. Pomocí panelu vlastností vpravo upravte rozměry a pozici obdélníku. Můžete zadat přesné hodnoty nebo použít ukazatele v panelu vlastností.
  4. Ujistěte se, že váš obdélník má čtvercový tvar, aby efekt ozubeného kola vypadal realističtěji.
  5. V případě potřeby upravte barvu a okraje ozubeného kola. Pomocí panelu vlastností upravte vyplnění a tah obdélníku.

Základ ozubeného kola je připraven! V dalším kroku přidáme zuby a obdélník proměníme ve skutečné ozubené kolo.

Jak nakreslíte kruh a rozdělíte jej na stejné segmenty?

Nejprve se pustíme do vytváření kruhu. Ve Figma to lze provést pomocí nástroje "Ellipse" (elipsa) umístěného mezi nástroji pro kreslení tvarů. Vyberte tento nástroj a na pracovní ploše stiskněte a podržte levou klávesu myši a nakreslete kruh požadované velikosti.

Jakmile je kruh vytvořen, musí být rozdělen do stejných segmentů. Figma má nástroj "Slice" (segmentace), který umožňuje rozdělit tvar na stejné části. Chcete-li použít tento nástroj, vyberte kruh a klikněte na nástroj "Slice". V zobrazené nabídce vyberte možnost "Divide slice" (rozdělit segmentaci).

Po výběru možnosti "Divide slice" uvidíte, že se kruh automaticky rozdělí na stejné segmenty. Budete mít možnost upravit počet segmentů pomocí posuvníku umístěného v horním panelu. Tímto způsobem můžete získat správný počet rovných sektorů kolem středu kruhu.

Do každého segmentu můžete také přidat další efekty a styly, aby byl váš kruh zajímavější a výraznější. Použijte paletu barev a další nástroje Figma, které dodají vaší postavě osobitost.

Jakmile dokončíte práci na vytvoření kruhu a jeho rozdělení do segmentů, nezapomeňte uložit svou práci. K tomu má Figma možnost exportu v různých formátech, jako je PNG nebo SVG.

Funkce Figma umožňují nejen kreslit složité tvary, ale také s nimi pracovat, přidávat styly a efekty. Nyní víte, jak nakreslit kruh a rozdělit jej na stejné segmenty pomocí Figmy.

Krok 3. Přidáváme ozubená kola do ozubeného kola

Nyní je třeba vytvořit hroty na našem ozubeném kolečku. K tomu používáme nástroj "zlomená čára"nebo " křivka".

Vyberte nástroj zlomená čára nebo křivka z panelu nástrojů Figma a klikněte na okraj ozubeného kola, kam chcete umístit ozubené kolo.

Nakreslete hrot pohybem kurzoru myši podél okraje ráfku tak, aby byl přísně kolmý na okraj ozubeného kola a měl požadovaný tvar.

Jakmile je první Zoubek nakreslen, pokračujte v přidávání dalších zubů podržením klávesy Shift na klávesnici. To umožní Figma automaticky zarovnat nové hroty do kruhu a udržovat stejné vzdálenosti mezi nimi.

Když přidáte všechny potřebné zuby, dokončete vytvoření tvaru kliknutím na poslední ozubené kolo.

Ujistěte se, že všechny zuby mají požadovaný tvar a vzdálenost mezi nimi. V případě potřeby je možné upravit jejich tvar tak, že je jednotlivě zvýrazníte a přesunete nebo změníte uzly čar.

Gratuluji! Právě jste do Figmy přidali ozubená kola. Nyní můžete pokračovat v práci a nakreslit tělo ozubeného kola, použít barvy, stíny nebo jiné efekty, abyste svému ozubenému kolu dodali požadovaný vzhled.

Nezapomeňte si udržet svou práci, abyste nepřišli o veškerou odvedenou práci. Hodně štěstí při vytváření ozubeného kola!

Jak vytvoříte rovnoměrné a symetrické hroty?

Pro vytvoření rovnoměrného a symetrického ozubeného kola ve Figma je nutné správně určit počet a velikost hrotů. K vizuálnímu znázornění procesu vytváření ozubeného kola budete potřebovat tabulku.

Kroky, které byste měli provést:

  1. Určete požadovanou velikost ozubeného kola a počet zubů.
  2. Rozdělte obvod do stejných segmentů, které odpovídají počtu hrotů.
  3. Vytvořte rovnostranný trojúhelník kolem každého segmentu, abyste určili tvar hrotu.
  4. Nakreslete hroty pomocí získaných měření a tvarů.
  5. Odstraňte vnější čáry a kružnice a ponechte pouze hroty.

Vytvoření rovnoměrných a symetrických zubů vyžaduje přesnost a pozornost. Použijte tabulku ke kontrole velikostí a tvarů, abyste získali dokonalé hroty pro své ozubené kolo ve Figmě.

Číslo zubuVelikost zubu
15px
25px
35px
. .

Podle těchto kroků a použití tabulky ke kontrole velikosti hrotů můžete ve Figmě vytvořit rovnoměrné a symetrické ozubené kolečko. Hodně štěstí ve vaší tvorbě!

Krok 4. Natřeme ozubené kolo

Nyní, když máme základ ozubeného kola, pojďme k jeho barvení barvou.

K tomu můžeme použít nástroj výplň, který je v panelu nástrojů vlevo. Vyberte požadovanou barvu, jako je černá nebo šedá, a kliknutím na oblast ozubeného kola ji natřete.

Pokud chcete přidat detaily nebo změnit barvu jednotlivých segmentů ozubeného kola, můžete použít nástroje obrys a výplň k malování a malování požadovaných oblastí. Můžete například nakreslit malé obdélníky, abyste vytvořili ozubená kola, a natřít je správnou barvou.

Tímto způsobem můžete ve Figmě vytvořit malované ozubené kolo pomocí nástrojů výplň a obrys. Pamatujte, že pomocí těchto nástrojů můžete vždy změnit barvu nebo detaily ozubeného kola.