() translation by (you can also view the original English article)
Ve videu vám ukáži, jak vytvořit tyto kroužky, které najdete na Apple Watch použitím Sketche. Je to perfektní příklad na kterém ukázat, jak moc Sketch miluje matematiku; budete překvapeni, co všechno pro vás Sketch spočítá. Pojďme začít!
Podívejte se na rychlý tip
Kroužky zobrazující aktivity
Podívejme se, čeho chceme dosáhnout. Obrázek je převzat z www.apple.com a ukazuje kroužky v kontextu:
1. Kreslící plátno
Začněte se čtvercovým kreslícím plátnem o rozměru 512 pixelů, je tu již přednastavený profil.
Přidejte pozadí úplně černé barvy (#000000) a potom přidejte kruh na střed s průměrem 300 pixelů. Tenhle kruh nebude mít výplň, ale vytvoří nám pěkný barevný kruh šířky 25px.
2. kruh
Zduplikujte první kruh, a zmenšete ho odečtením 52px z jeho šířky. To můžete udělat snadno tak, že vložíte 300-52 do pole velikosti a Sketch již vše potřebné dopočítá za vás.
Zarovnejte ho na střed s prvním kruhem.
Přebarvěte ho a zopakujte proces i pro třetí kruh.
Z těchto tří kruhů vytvořte skupinu a pojmenujte ji jako "back". Zduplikujte celou skupinu a dejte jí název "front". Teď budeme pracovat se skupinou front, takže prozatím můžete tu druhou schovat.
3. Vytvoření efektu "pomlčky" na konci kruhů
Abychom dodali našim kruhům efekt "ukazatele průběhu", upravíme jejich konce. K tomu použijeme trik, necháme si spočítat přesný průměr kruhu vynásobením šířky pi π. Vložte výpočet 300*3.14159265359 do políčka Intervalu v části Okrajů a kruh nám efektivně zmizí. Děláme to proto, že rozdíl mezi jeho tahy pokrývá celý průměr kruhu. Přidáváním velikosti Pomlčky se náš kruh začne zas objevovat.
Až to budete mít hotové, opět v dialogovém okně Okraje, zaokrouhlete konce tahu:
Nakonec jděte do Vrstva > Transformovat > Vertikálně otočit abyste otočili kruh dokola takže začne na nula stupních.
4. Vraťte zpět skupinu back
Až budete hotovi s kruhy, udělejte skupinu "back" opět viditelnou a stiskněte 1 ke snížení průhlednosti na 10%.
5. Ikony
Jediné, co nám zbývá udělat, je přidání ikon na konce kruhů. Vytvořte nové plátno velikosti 16px a vytvořte jakékoliv ikony chcete. Já vytvořil jednoduché šipky, ale můžete také vzít nějaké ikony z GraphicRiver:
A jsme hotovi!
Toto jsme vytvořili:
Díky, že jste mě sledovali a věřím, že toto rychlé UI cvičení vás naučilo několik nových triků ve Sketchi.
Podobné tutoriály
