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.
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é.
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.
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%.
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).
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.
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ů.
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.
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.
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ě.
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ů.
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.
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).
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ě.
Expression Blend si můžete vyzkoušet zde.