Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch

Rychlý tip: Vytvořte kroužky aktivity pro Apple Watch ve Sketchi

by
Difficulty:BeginnerLength:ShortLanguages:

Czech (Čeština) translation by Ondřej Vokoun (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:

Kroužky aktivity z Apple Watch UI jsou dobře rozpoznatelné

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.

sketch loves math
Matematika Sketche ♥

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

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.