Izdelava vektorskih slik za XAML razvijalce (2. del) – Blend in Combine

Poglejte si članek Izdelava vektorskih slik za XAML razvijalce (1. del) za prvi del, izdelava enostavne ikone s XAML kodo. V tem članku bomo na hitro spoznali Blend orodje, risanje v Blendu, Combine funkcionalnosti in ker se bliža valentinovo, bomo še narisali eno srce.

image

V prejšnjem članku sem prikazal, kako s kodo narediti ikono. Ta članek bo pa namenjen orodju Blend for Visual Studio. To orodje pride skupaj s Visual Studio 2012/2013 (od Professional dalje) in Visual Studio 2012/2013 Express for Windows.

Za Blend ste že najverjetneje že slišali in ste tudi slišali, da je bolj namenjen za designerje kot razvijalce. Za pisanje kode in ročno pisanje XAML-a je Visual Studio res boljši, ampak Blend vam nudi dosti več orodij za oblikovanje uporabniškega vmesnika in njegovega obnašanja (animacije, binding, tranzicije, view states, itd.). Je tudi močno orodje za izdelavo ikon, saj te ikone ne moramo enostavno narediti v Visual Studiu. Prednost Blend-a je še ta, da lahko istočasno oblikujemo stran v Blendu in urejamo kodo v Visual Studiu.

Osnove Blend: http://www.microsoftvirtualacademy.com/training-courses/designing-your-xaml-ui-with-blend-jump-start#?fbid=ivtTM-ZjB7v

Mi se bomo osredotočili na oblikovanje likov. Vsi primeri bodo delovali na vseh XAML platformah. V tem članku ne bomo pisali XAML kode, jo pa lahko vključite v orodju v View –> Active Document View –> Split View (ali 2x F11).

Prvo ustvarimo nov projekt (pazite, da ni HTML projekt)

image

Na levi strani imate večino ukazov, ki jih bomo potrebovali za izdelavo današnjih ikon. Najbolj pomembna je z rdečo označena.

image

Tukaj lahko izbirate med elipso, štirikotnikom in črto.

image

Luna

Za ogrevanje bomo naredili luno za sleep gumbek. Zato bomo narisali dva kroga. Izberite Ellipse in pri risanju kroga uporabite SHIFT.

image

In še en krogec druge barve.

image

Nato izberemo črno miško v levi opravilni vrstici (tipka V), kliknemo na prvi krog in nato CTRL klik na drugi krog, da sta oba izbrana.

image

Kliknite desni klik na manjšo luno (temno modro v mojem primeru) in izberite Combine –> Substract. In uvala, imamo luno. Smeško

image

Isti rezultat, če desno kliknemo na drugo luno:

image

Za zanimive efekte lahko uporabimo še druge “Combine” funkcionalnosti:

Intersect

image

Divide

image

Unite

image

Exclude overlap

image

 

Srce

In ker se bliža valentinovo, lahko s novim znanjem poskusimo narediti ikono srca. Zato rabimo 2 krogca in 3 kvadrate. Prvo začnemo s krogcema, ki sta iste velikosti in se dotikata.

image

Nato narišemo en kvadrat, da le zgornja polovica krogcev gleda ven. Kvadrat naj bo enako širok kot oba krogca skupaj in visok vsaj dvojne višine obeh krogcev.

image

Zaradi boljšega razločevanja med liki bom uporabil za ostala dva kvadrata drugo barvo. Naloga teh dveh kvadratov je odstranitev odvečnega dela prvega kvadrata s pomočjo Combine –> Substract. Narišite kvadrat, nato kliknite in povlecite robne pike, da rotirate kvadrat. S tipko SHIFT lahko rotirate po korakih 15°. Po rotiranju in pozicioniranu, lahko uporabite CTRL + C in CTRL + V za kloniranje trenutnega kvadrata. Še tega pravilno rotirajte in pozicionirajte, da dobite nekaj podobnega spodnji sliki.

image

V primeru, da ste vse narisali pravilno, boste s Combine –> Substract dobili pravilni lik. Jaz ga žal nisem, zaradi česar so potrebni še dodatni koraki. Če ste izvedili substract in niste zadovoljni s rezultatom zaradi krogcev, razveljavite akcijo.

image

Naredite kopijo obeh modrih kvadratov (izberite kvadrat, CTRL+C, CTRL+V). Izberite levi kvadrat in levi krog in naredite Substract na krog. Zdaj še enkrat izberite levi kvadrat in rdeč kvadrat in izvedite Substract na rdeč kvadrat.

image

Ponovite isto za desno stran.

image

Če ste zadovoljni s rezultatom, lahko tukaj končate, če pa niste, pa lahko še poskusimo nekaj še bolj naprednega. Izberite vse oblike in izberite Unite. Zdaj izberite belo miško v levi orodni vrstici (tipka A) in kliknite na srce.

image

Izberite belo piko na levi strani in bi morali videti še eno črto, ki kaže navzgor. Ta črta definira obliko pol kroga.

image

Spreminjajte to črto, zgornjo levo in sredinsko piko dokler ne dobite želen rezultat.

image

Ponovite isto še za drugo stran. S nekaj truda in artističnega občutka lahko dobite pravo srce. Smeško

image

Zdaj lahko rečete svoji boljši polovici, da ste naredili srček samo za njih ali pa ga kar uporabite kot favorite ikono. Smeško
Še XAML koda za srce:

<Path Data="M24.5,-0.499743 C40.2833,-0.499743 55.5,15.5002 54.9231,34.6421 L54.9488,35.6602 L54.9741,35.6602 L54.9999,34.6421 C55.5,12.0002 71.2175,-0.749743 87.0009,-0.749743 C102.785,-0.749743 120.501,15.7502 113.924,34.6421 L54.6673,123 L-3.99996,34.6421 C-11,13.0002 8.7169,-0.499743 24.5,-0.499743 z" Fill="#FFB80000" HorizontalAlignment="Left" Height="123.75" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="120.786"/>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: