Kreslíme emotikonu v programu Expression Blend

Kreslení vektorových prvků umožňuje snadné seznámení s programem Expression Blend prostřednictvím známých úkonů. Při provádění kroků uvedených v této lekci se seznámíte s pracovním prostředím programu Blend, jeho nástroji a s tím, jak vytvářet grafické prvky. Dozvíte se také, jaké různé typy štětců jsou k dispozici, a jak štětce uložit pro pozdější opakované použití.

V této lekci budeme vytvářet od začátku emotikonu neboli „smajlíka“. Při použití různých předváděných technik budete moci rozhodnout o kompozici a výrazu své emotikony.

01 Začínáme kreslit

Spusťte program Blend a použijte položku nabídky File > New Project (Soubor > Nový projekt). Jako typ projektu zvolte Silverlight 3 Application + Website (Aplikace + web platformy Silverlight 3) a projekt pojmenujte BasicDrawing (Základní kresba) . Po stisknutí klávesy OK bude projekt vytvořen a na pracovní ploše Artboard bude otevřena hlavní stránka MainPage.

Začínáme kreslit  

02 Nakreslete kruh

Vyhledejte panel Tools (Nástroje) na levé straně pracovního prostředí programu Blend. Klikněte levým tlačítkem na ikonu Rectangle (Obdélník) pro zobrazení panelu další úrovně, který nabízí další obrazce. Klikněte na ikonu elipsy nebo použijte klávesovou zkratku L pro vybrání kreslicího nástroje Ellipse (Elipsa). Nakreslete velký kruh uprostřed pracovní plochy Artboard. Při kreslení podržte stisknutou klávesu Shift, aby šířka a výška zůstaly stejné.

Nakreslete kruh 

03 Změňte typ štětce

Zatímco kruh zůstává vybraný, podívejte se na panel Properties (Vlastnosti) v pravé části pracovního prostředí. Úplně nahoře se nachází sekce Brushes (Štětce). Vyhledejte štětec Fill Brush (Štětec pro vyplnění) a proveďte změnu typu štětce z hodnoty Solid (Plný) na hodnotu Gradient (Přechodový) pomocí ikony Gradient Brush (Přechodový štětec), kterou naleznete v nabídce Brush Type (Typ štětce) pod štětci.

Změňte typ štětce 

04 Přidejte barvu

Aby se emotikona zdála kulatá, proveďte změnu na typ RadialGradient (Radiální přechod) pomocí ikony, která se nachází pod stupnicí přechodu v sekci Brushes (Štětce). Vyberte každou zarážku přechodu a změňte její barvu a pozici. Novou zarážku přidáte kliknutím na stupnici přechodu. Zarážku odstraníte, když na ni dvakrát kliknete. Přechod zobrazený na obrázku má tři zarážky: #FDF365: 34.9%, #FEE834: 71.1% and #DEAE32: 100%.

Přidejte barvu 

05 Nastavte tah

Vyhledejte a vyberte štětec Stroke Brush (Štětec pro tah) pod štětcem Fill Brush (Štětec pro vyplnění). Můžete si všimnout, že v nabídce pro tah jsou k dispozici stejné typy štětců, ale pro naši emotikonu je ideální výchozí štětec Solid Black Brush (Plný černý štětec). Pro lepší vymezení obrazce proveďte změnu vlastnosti StrokeThickness (Šířka tahu) z hodnoty 1 na hodnotu 5. Tuto vlastnost najdete v sekci Appearance (Vzhled).

Nastavte tah 

06 Nakreslete oko

Vyberte nástroj Elipsa (L) a nakreslete menší kruh, který bude představovat oko. Pro změnu pozice nebo velikosti kruhu použijte nástroj Selection (Výběr) s klávesovou zkratkou V. Všimněte si, že výchozím nastavením štětců pro vyplnění a tah je předchozí použitý styl. Změňte přechod výplně s použitím hodnot #FFFFFF: 84,5 %, #545454: 100%, aby kruh vypadal jako oko. Nakreslete menší elipsu s použitím štětce Solid Color Brush (Štětec pro plnou barvu), která bude představovat zornici. Pro přidání odrazu světla nakreslete menší elipsu s výplní plnou bílou barvou bez tahu a umístěte ji do horní levé části zornice.

Nakreslete oko  

07 Uložte štětec pro pozdější použití

Vyberte elipsu představující oko a klikněte na ikonu ve tvaru malého bílého obdélníku vedle štětce pro vyplnění. V místní nabídce klikněte na příkaz Convert to New Resource (Převést na nový prostředek) a novému prostředku dejte název EyeBallBrush (štětec Oko). Prostředky se podobají třídám šablon stylů CSS nebo uloženým stylům v aplikaci Photoshop a je možné je použít jako jediný odkaz na více prvků.

Uložte štětec pro pozdější použití  

08 Vyberte součásti oka

Vyberte tři elipsy, které představují oko, zornici a odraz světla. Toho dosáhnete, když podržíte stisknutou klávesu Shift a kliknete na tři elipsy nacházející se na panelu Objects (Objekty). Případně můžete kolem těchto elips nakreslit obdélník pomocí nástroje Selection (Výběr) s klávesovou zkratkou V. Klikněte na pracovní plochu Artboard, táhněte myší a současně držte stlačené tlačítko myši. Bude vybrána i elipsa představující hlavu, protože se nachází pod součástmi očí. Stav vybrání prvku změníte, když na tento prvek kliknete a současně podržíte klávesu Ctrl.

Vyberte součásti oka 

09 Zkopírování a vložení oka

Klikněte na vybrané prvky pravým tlačítkem nebo použijte příkaz nabídky Object -> Group Into (Objekt -> Seskupit do) a vyberte možnost Grid (Mřížka). Na panelu Objects (Objekty) zadejte název mřížky rightEye (pravé oko) tak, že na ni dvakrát kliknete nebo na ni kliknete pravým tlačítkem a vyberete příkaz Rename (Přejmenovat). Zatímco mřížka rightEye zůstává vybrána, vytvořte nové oko pomocí kopírování a vložení. Přejmenujte mřížku rightEye_Copy (pravé oko_Kopie) na leftEye (levé oko) a umístěte nové oko vedle prvního oka.

Zkopírování a vložení oka 

10 Vyzkoušejte štětec uložený jako prostředek

Teď, když máme dvě oči, si můžeme vyzkoušet, jak funguje prostředek EyeBallBrush. Vyberte panel Resources (Prostředky) v pravé horní části pracovního prostředí a zobrazte dostupné prostředky kliknutím na ikonu šipky, která se nachází vlevo od položky [UserControl] (Uživatelský ovládací prvek) . Klikněte na stupnici přechodu vedle štětce EyeBallBrush, čímž otevřete editor štětce. Změňte šedou zarážku přechodu na světle červenou, aby emotikona vypadala vystresovaná nebo unavená. Všimněte si, že se mění obě oči, protože jsou obě spojeny se stejným štětcem. Vraťte zpět změnu barvy, aby emotikona opět vypadala zdravě.

Vyzkoušejte štětec uložený jako prostředek  

11 Přidejte obočí

V mřížce rightEye (pravé oko) vyberte velký kruh představující oko. Kruh zkopírujte a vložte nový kruh na pozici nepatrně nad původním kruhem. Vložte další kopii umístněnou mnohem výše než původní kruh. Vyberte nejprve níže umístěnou kopii a poté vyberte výše umístěnou kopii. Pak v místní nabídce zvolte příkaz Combine -> Subtract (Zkombinovat -> Odečíst). Nyní můžete měnit velikost a pozici nově vytvořené dráhy stejně jako u jiných prvků.

Přidejte obočí 

12 Vybarvení pomocí kapátka

Vyberte nově vytvořenou dráhu obočí a změňte typ štětce pro vyplnění Fill Brush na hodnotu Solid (Plný). Vyhledejte ikonu nástroje EyeDropper (Kapátko) na kartě Brush Editor (Editor štětce) v levém spodním rohu panelu pro volbu barvy a vyberte nástroj Color EyeDropper (Kapátko barvy). Barva štětce pro vyplnění se změní na barvu pixelu, na který kliknete kdekoli na ploše. V zobrazeném obrázku jsme s použitím nástroje EyeDropper kliknuli na zornici.

Vybarvení pomocí kapátka 

13 Přidejte druhé obočí

Zatímco mřížka leftEye (levé oko) zůstává vybrána, klikněte na nástroj Pen (Pero), klávesová zkratka P, a nakreslete novou dráhu, která bude představovat druhé obočí. Pomocí nástroje pero (P) je možné body přidávat nebo odstraňovat. Body je možné vybrat nebo upravit pomocí nástroje pro přímý výběr (A).

Přidejte druhé obočí 

14 Nakreslete ústa

Vyberte mřížku LayoutRoot (Hlavní rozložení) , klikněte na nástroj Rectangle (Obdélník), klávesová zkratka M, a nakreslete pod očima obdélník. Změňte vlastnosti obdélníku RadiusX (Poloměr X) a RadiusY (Poloměr Y), které se nacházejí v sekci Appearance (Vzhled), na hodnotu 10. Ustaraný výraz z obličeje emotikony odstraníte tak, že kliknete pravým tlačítkem na obdélník a použijete nabídku Path -> Convert to Path (Dráha -> Převést na dráhu). Nyní pomocí nástroje pro přímý výběr (A) vytvořte úsměv stažením spodních dvou bodů dolů a blíž k sobě.

Nakreslete ústa

Expression Blend si můžete vyzkoušet zde.