Projekt 04 puzzle. Kniha» Část druhá» Projekt 04 Puzzle EJMAzzle

4

Projekt 04 ›

Kniha »

Část druhá »

Projekt 04 – Puzzle EJMAzzle

Projekt 04 – puzzle Nebudeme si nic nalhávat. Dělat GUI pro programy, ve kterých můžeme klikat, je zábava. Ale dělat GUI pro hru, kterou si poté můžeme zahrát, je teprve ta pravá radost! Proto i my, po krátkém seriózním projektu, přistoupíme k jednoduché hře – puzzleti. Pokud by opravdu šlo o tvorbu GUI pro puzzle, zcela jistě by programátor naprogramoval rozřezání kostiček podle určité šablony sám (takže by mu stačilo dodat jen obrázek). Jenže co když se jedná jen o malou reklamní hru, kde má být pouze pár obrázků a požadavek je na co nejrychlejší vyhotovení? V tom případě bude jistě rychlejší varianta vytvořit dílky už v Photoshopu. A to je přesně náš (fiktivní) případ. Jak budou takové dílky vypadat? Použijeme jednobitovou průhlednost, ovšem s malým trikem, který se jmenuje inverzní antialiasing. Jde o antialiasing i při nevyhlazených krajích (při jednobitové průhlednosti). Což znamená, že se musíme snažit zevnitř objektu (protože vně není možné moc měnit). Tato technika je nejčastěji využívána u her, kdy sprity (postavičky, předměty, nepřátelé), nemohou mít vyhlazené kraje, a tak jediná možnost je poprat se s tím touto cestou. Ačkoliv podpora průhlednosti stoupla a už si s ní skoro ani nemusíte lámat hlavu (pokud netvoříte např. pro mobilní zařízení), tato technika nezmizela a naopak se těší celkem velké přízni. Sprity ve hrách totiž vypadají nevyhlazené lépe než vyhlazené. A abychom dílky malinko oživili, přidáme jeden speciální (ve tvaru kosti), který bude zasahovat do několika okolních. Rozřezání jednotlivých dílků bude vetší zábava, než by se mohlo zdát. Možná i proto, že se podíváme, jak nahrávat a přehrávat akce, takže tuto činnost budeme dělat celkem… jedenkrát! Přesně tak, jen jedenkrát. Nač si zbytečně přidávat práci? K aplikaci vytvoříme i vlastní kurzor. Pěkně se vším všudy, takže výsledný soubor bude *.cur, který je možné bez problému použít v systému Windows. K posunování reálných dílků puzzlete nejčastěji používáte ruku, takže už asi víte, jak bude kurzor vypadat. A to, že je kreslení ruky těžké, toho se vůbec nebojte. Nemyslete si, že jsme zapomněli na GUI jako takové. Dočkáte se okna, menu lišty a všeho na co jste zvyklí. Veškerá pozornost má ale být soustředěna na hru, na puzzle, takže grafika bude nenápadná a velice jednoduchá. Skoro celé okno musí zabírat volná plocha, aby měl hráč dostatek prostoru pro rozházení kostiček. Mnoho puzzlat je proto řešeno jako fullscreen aplikace, kdy odkládací plocha je opravdu přes celou obrazovku (menu je potom nejčastěji řešeno jako paletka, kterou lze kamkoliv přesunout). My ale zvolíme systém klasického okna (je to také z důvodu, že se mi to hodí pro knihu – čím menší aplikace, tím je na screenshotech lépe vidět). Menu, stejně jako hlavní lišta, budou bez nějakých zbytečných efektů (pouze jednobarevné) v horní části aplikace. Novinkou, kterou vyzkoušíme (a která jde trochu proti pravidlům tvorby GUI), budou tlačítka pro nápovědu, minimalizaci a zavření. Budou všechna stejná! Alespoň do té doby, než na ně najedete myší, potom už se ukáže, k čemu které tlačítko slouží. Jde o to, že uživatel už by měl být zvyklý, že pravé horní tlačítko zavře aplikaci, takže si odzkoušíme, jestli tomu tak opravdu je. Druhou novinkou je, že nebude žádný okraj okolo aplikace. Velké jednobarevné plochy už totiž samy o sobě slouží jako okraj, takže není potřeba přidávat další rámeček, jak tomu bylo u předchozích aplikací. Oddělení od pozadí bude v tomto případě dostačující. A abych nezapomněl na to nejdůležitější – hlavní roli bude hrát fena Ejma, na jejíž počest se puzzle jmenuje EJMAzzle.

‹ ‹202

EJMAzzle ikonka velmi jednoduchá – podobná tlačítkům vpravo + znázorňující puzzle

tlačítka pro nápovědu, minimalizaci, zavření – odpovídající obrázek funkce se objeví až při over stavu: ? * —

EJMAzzle start over | shuffle pieces | solve puzzle | select puzzle 1 / 2 / 3 | about menu jednoduché, bez efektů, položky odděleny jen znakem „|“

volné místo pro odkládání kostiček puzzlete

extra dílek puzzlete – kost celá aplikace úplně bez rámečku (přestože to na tomto nákresu není dostatečně vidět), pouze vespod úzký pruh barvou horní lišty (tmavší odstín barvy pozadí aplikace) vlastní kurzor ruky, stylizovaný a vytvořený z geometrických tvarů:

na pozadí aplikace nenápadné zpestřující tvary – např. otisky psích pacek

dílky budou mít standardní tvar, na nákresu nejsou výstupky všude zobrazeny, jistě ale každý alespoň jednou v životě puzzle viděl. A jestli ne, stačí otočit o pár stran dál... (ostatně, otočte o stranu dál tak jako tak)

3›

Kniha »

1

2

3

4

‹4

Část druhá »


Už jste dlouho nevytvářeli nový dokument? Teď je k tomu skvělá příležitost. Oprašte klávesovou zkratku (Ctrl) + (N) a zadejte velikosti např. 520 × 420 px. Proč tak malý dokument? Zaprvé dobře uvidíte každý pixel, zadruhé dělat puzzle s tisíci kousky, byli bychom tady až do Vánoc. Bohatě postačí tato plocha, do které se nám těch pár (cca 20) dílků vejde. A víte co? Začneme rovnou tím puzzle dílkem. Zvolte nástroj výběr (M) a nastavte pevnou velikost 64 × 64 px (což bude velikost jednoho puzzle dílku). Proč zrovna tato? Jen tak ;) Není ani moc velká, ani moc malá... tak akorát. Vytvořte novou vrstvu a tu vyplňte pomocnou barvou, např. RGB(69, 118, 167), a výběr odznačte (Ctrl) + (D). Jako puzzle dílek to zatím moc nevypadá, ale to hned změníme. Znovu zvolte nástroj výběr (M), ale tentokrát nastavte velikost na polovinu – 32 × 32 px. Vyberte levou horní část vrstvy, vyplňte ji tmavší barvou. Poté pravou spodní část vrstvy a tu rovněž vyplňte tmavší barvou. Tím jasně vidíme střed vrstvy, který budeme potřebovat pro správné umístění výstupků...

...které hned nakreslíme. Nástrojem pro eliptický výběr (1) označte kruh odpovídající velikosti (ani velký, ani malý) tak, aby byl přesně v půlce (2) a několik pixelů nad čtvercem – tam později nakreslíme hladké spojení. Ujistěte se, že máte vypnuto vyhlazení. (3). Kruh vyplňte libovolnou barvou.

3 2 1

Kniha »

1

4

2

3

Část druhá »


Nástrojem tužka (B) dokreslíme spojení mezi kruhem a čtvercem. Postupujeme například jako na obrázku vlevo.

5

Spoj (1) je moc malý. Takový by se hned utrhnul. Spoj (2) je lepší, ale je příliš rovný. Přidáním dalších pixelů u spoje (3) získáme efekt zakulacení (v rámci možností). A to je přesně ono. Celý výstupek označte – (M), nástrojem posun (V) se stisknutou klávesou (Alt) (kopírování) přesuňte doprava, otočte funkcí Úpravy › Transformovat › Otočit o 90° doprava | Edit › Transform › Rotate 90° CW a posuňte k prostředku, jako na obrázku (4).

1

Výběr nechte stále označen, a přesuňte jej k levé hraně (1). Zde chceme mít výsek. Nestačí ale jen stisknout klávesu (Delete), tím smažeme pouze výběr. Musíme zvolit nástroj Guma | Eraser Tool (E) a tuto část pěkně odmazat (na nastavení nástroje nezáleží, ovšem čím větší guma, tím rychleji to odmáznete).

6

Stejným způsobem odmázněte i spodní výsek. Aby byla kostička hezčí, v každém rohu umažeme ještě jeden pixel (pro zakulacený vzhled). A teď už můžeme kostičku přebarvit na jednu barvu.

7

Mimochodem, všimli jste si, že výběžky nejsou úplně veprostřed? Je to tím, že mají lichý počet pixelů, a tak do velikosti kostičky nejdou přesně vystředit (převraťte kostičku vodorovně nebo svisle a uvidíte ten rozdíl). To nám ale vůbec nevadí. A jestli jste si toho nevšimli vy... pak už nikdo ;)

5›

Kniha »

Část druhá »


8

Na řadu přichází inverzní antialiasing! První podmínku máme splněnou – náš základ není ani trochu vyhlazený, dílek puzzle obsahuje pouze 100% průhledné nebo 100% neprůhledné pixely. Teď musíme vytvořit ten zbytek – vyhlazení uvnitř objektu tak, aby nebylo poznat, že vně žádné vyhlazení není. Nejlepší bude použít efekty vrstvy a přidat objektu vnitřní obrys. Vhodným nastavením parametrů snadno docílíme požadovaného efektu. Krom toho, vám se snad chce kreslit to po pixelech?

9

Zkusíme efekt Vnitřní stín | Inner Shadow. Nastavením Vzdálenost | Distance na 0 bude efekt okolo celého okraje (proto je nastavení Úhel | Angle zbytečné). Velikost | Size na 1 px je samozřejmost. Co nám tedy zbývá? Je to Vyseknutí | Choke. Posunováním jezdce zjistíte, že efekt skáče mezi dvěma stavy: První (1), s hodnotami 0–50 %, je efekt slabý, nevýrazný. Druhý, s hodnotami 50–100 %, je efekt výrazný až moc. Co víc – v určitých místech není jeden, ale hned dva pixely široký! Tudy cesta nevede, a tak přistoupíme k přesnému nastavení obrysu parametrem Profil | Contour.

10

Je to trochu komplikovanější, ale nejlepší řešení. Vyseknutí | Choke stáhněte zpět na 0 %, a vyvolejte dialog úpravy křivky Profil | Contour (kliknutím na náhled křivky (1)). Přidejte bod (2), který vytáhněte do hodnot 36 %, 99 %. Tím uzamkneme černý jednopixelový obrys. Není úplně černý, pouze v místech, které ukazuje obrázek (3). A právě takto vzniká inverzní antialiasing. Poté přidejte další bod (4) – 15 %, 59 %, který malinko zvýrazní poloprůhledné pixely (křivka je víc prohnutá směrem doleva). Zkuste si, že posunutím bodu směrem doprava poloprůhledné pixely stáhnete, nebo úplně zneviditelníte.

‹6

1

2 3

2 4

1

Kniha »

2 1 1 3

Část druhá »


Přidáme další obrys – bílý. Efekt Vnitřní záře | Inner Glow nastavíme na bílou barvu, Vyseknutí | Choke na 39 %, Velikost | Size 2 px a Profil | Contour naši křivku z minule. Krytí | Opacity stáhneme na cca 69 % (později stáhneme oba efekty na menší hodnoty, teď ale chceme co nejlépe vidět, jak efekt vypadá).

11

Podíváme se, jak nám do sebe jednotlivé kostičky pasují. Několikrát vrstvu rozkopírujeme (Ctrl) + (J) a posuneme. Kostičky pasují pěkně, ale co ten dvoupixelový černý obrys? Hnus největší! Takhle to rozhodně nemůžeme nechat.

12

Zkusíme vrstvy posunout tak, aby se vždy o jeden pixel překrývaly. Teď už to je o hodně lepší. Dvoupixelový obrys zmizel. Jenže nám najednou dílky nějak nepasují, že? Je potřeba to napravit.

13

Smažte dvě pomocné vrstvy (aby byly pouze dvě vrstvy s dílky), skryjte efekty (1) a jednu vrstvu přebarvěte na jinou barvu. Nastavte jí interakci na Násobit | Multiply (2) a posuňte přesně tak, jak má být – tedy jeden pixel přes spodní vrstvu. Pixely se znásobí a tak přesně vidíme, kde se vrstvy překrývají (tmavé pixely), kde jsou těsně vedle sebe a kde je mezi nimi pixel mezera (bílé pixely).

14

My zvolíme nástroj tužka a dokreslíme do modré vrstvy pixely tak, aby se hrany překrývaly kolem celého tvaru – jak ukazuje obrázek (3). To stejné udělejte i se spodním výstupkem. Nakonec pomocnou (fialovou) vrstvu smažte.

7›

Kniha »

15

Část druhá »


Tím máme opět jen jednu vrstvu dílku puzzlete. Jednu, ale správnou. Zkuste si opět rozkopírovat tuto vrstvu. Vidíte jak do ostatních zapadá? Krása! Takže víte co? Zkopírujte tuto vrstvu dvacetkrát, abyste vytvořili plochu 5 × 4 políček. Kopírujte buď zkratkou (Ctrl) + (J) nebo táhněte vrstvu myší se stisknutou klávesou (Alt). Nekopírujte vrstvy náhodně, ale tak, aby vrstvy vedle sebe v obrázku byly i vedle sebe v paletce vrstvy (ušetříte si pak práci s hledáním toho správného dílku).

16

Krajním dílkům (vpravo a nahoře) uřízneme ouška. Zní to moc drasticky? Dobrá, odmažeme ouška. Tak jako tak, označte výběrem část, kam dílky přesahují, vyberte jednu vrstvu, stiskněte klávesu (Delete), vyberte druhou vrstvu, třetí, čtvrtou... rychleji to nejde, ale těch osm vrstev naštěstí moc času nezabere.

17

S levou a spodní řadou to bude horší, ale opět nic nemožného. Dílek po dílku vyberte odpovídající vrstvu, označte díru a vyplňte ji pomocí (Alt) + (Backspace) modrou barvou.

18

A puzzle máme hotovo, takže se můžeme pustit do dalšího projektu... ...ale ne, to na mě jen vlezla nějaká velmi vtipná nálada. Tohle by přeci zvládl každý a ani by k tomu nepotřeboval tuto knihu. Takže se nebojte, zvesela pokračujeme dál. Sem tam někde popřeházíme výstupky – všechny kostičky nemůžou být stejné!

‹8

Kniha »

Část druhá »


Vybereme dílek, který chceme změnit (na ukázce žlutý). Tomuto dílku přehodíme jeden výstupek – ten, který zapadá do oranžové kostičky.

19

Začneme tím, že umažeme pravý výstupek – nejen jej, ale i kus dílku samotného – přesně, jak ukazuje obrázek (hned uvidíte proč).

1

1

2

2

Označíme levou část s dírou (1) tak, aby byla označená plocha větší než odmazaný kus z minule. S klávesou (Alt) přetáhneme tuto část bokem (tím se zkopíruje), převrátíme ji horizontálně a posuneme na správné místo doprava (2). Odznačíme (Ctrl) + (D).

20

Teď ještě upravit dílek vpravo (oranžový). Nejprve označíme díru a tu vyplníme barvou dílku (1). Dále označíme horní výstupek, který posuneme bokem s klávesou (Alt), otočíme doleva funkcí Úpravy › Transformovat › Otočit o 90° doleva | Edit › Transform › Rotate 90° CCW a posuneme na správné místo (2).

21

Jednoduché? Tak si to teď zkuste i s dalšími dílky! Pokračujte, dokud nebudete spokojeni. Zkuste si dílky, které mají jen samé výstupky nebo jen samé díry. Experimentujte a přemýšlejte. Třeba o tom, jak tuto činnost zrychlit. Už víte? Co takhle to udělat naopak – nejprve přidat výstupek, načíst výběr vrstvy, zúžit o pixel a tento výběr odmazat od vrstvy vedlejší?

22

Jak vidíte, obarvil jsem všechny vrstvy na oranžovou, ale to jen tak. K barvám se ještě dostaneme. Teď je na řadě další dílek...

9›

Kniha »

23

Část druhá »


...a nebude to jen tak ledajaký dílek. Bude to psí kost! Tu nějak šikovně zakomponujeme do naší skládačky tak, aby tam přesně pasovala. Nejprve ji ale musíme vytvořit. Prvně prozkoumáme, co nám nabízí Photoshop. Nástroj pro vlastní vektorový tvar (U) opravdu skrývá tvar kosti. Ale jak vidíte sami na obrázku vpravo, s takovou kostí bychom si uřízli ostudu. Je to ale dobrý začátek, podívejte se, z čeho se kost skládá – dva kruhy, obdélník a opět dva kruhy.

24

25

26

Pokusíme se nakreslit něco podobného sami. Zvolte nástroj Pero | Pen tool (P) a klikněte kdekoliv do dokumentu pro vytvoření prvního (rohového) bodu, což bude bod (1) z minulého obrázku. Růžové čáry představují hrubý obrys naší budoucí kosti. Pokračujeme obkreslením pomyslného prvního kruhu (kruh (2) na minulém obrázku). Klikneme myší v místě (3) a táhneme myší směrem dolů pro vytvoření kulatého bodu. Vidíte, že se nám vektorový tvar hned začal vyplňovat barvou. Stejným způsobem vytvořte další část kruhu (4). Spojení pomyslného kruhu s pomyslným odbélníkem provedeme zaoblené. Proto v místech spoje vytvoříme úplně stejným způsobem další bod (5). A teď už jen čtyřikrát to samé – části (6), (7) a (8). Jediný bod (9) bude rohový (vytvoříme ho pouhým kliknutím, bez tažení).

‹ 10

1

1 2

3 4

8 5

7 9 6

Kniha »

Část druhá »


Nejste-li spokojeni s polohou bodu, můžete jej kdykoliv přesunout se stisknutou klávesou (Ctrl), a to včetně bodů určujících zaoblení. Na konci našeho snažení by kost mohla vypadat přibližně jako na obrázku vlevo. Na nějakou přesnost či symetrii neberte vůbec ohled (ale jenom nyní!).

27

Opět zobrazte všechny dílky puzzlete a jde se umisťovat kost. Nejprve ji trochu otočíme – (Ctrl) + (T) a poté zmenšujeme, zvětšujeme a posunujeme tak, aby do puzzlete pěkně zapadla. To znamená, že pokud překrývá nějaký dílek, musí jej překrývat pořádně, aby nevzniklo místo velké jen pár pixelů.

28

Obrázek vlevo ukazuje celkem ideální polohu, stačí odmazat pár spojů, kousek kostiček...

1 2

3

Ale prvně – a to je zásadní – je potřeba převést vrstvu, aby nebyla vyhlazená. Použijeme náš starý známý trik – pravým klikem do vektorové masky a volbou Rastrovat vektorovou masku | Rasterize Vector Mask převedeme masku do bitmapové podoby. Tu funkcí Obraz › Přizpůsobení › Práh | Image › Adjustments › Treshold převedeme na černobílou. Hodnotu volte podle oka, zhruba kolem těch 128.

29

Jen drobná kosmetická změna: v místě původního rohového bodu (1) je zbytečně velká třípixelová „díra“. Po aplikování efektů vrstvy se efekt ještě znásobí. Musíme vybrat např. spodní část (2) a v masce posunout o dva pixely nahoru (3) – klávesou (½) společně s klávesou (Alt) (jinak vznikne vespod díra).

30

11 ›

Kniha »

31

Část druhá »


Jdeme odmazat části dílků do kterých zasahuje kost. Tedy dílků (1) až (6).

1

2

3

4

5

6

Ovšem to znamená nejprve odmazat horní výstupek kostičky (5) a vyplnit spodní díru kostičky (2). Tzn. takto:

32

Potom načteme výběr kosti – (Ctrl) + klik na vrstvu a tento výběr zmenšíme o jeden pixel – Výběr › Změnit › Zúžit | Select › Modify › Contract. Se stále nastaveným výběrem postupně kostičku po kostičce odmažte klávesou (Delete). Pro názornost jsem na obrázku vpravo skryl vrstvu s kostí.

33

To vy ale nedělejte, protože tuto vrstvu přebarvíme na oranžovou (barvu ostatních dílků) a z kteréhokoliv dílku jí zkopírujeme styl. Tj. vybereme dílek, pravý klik na vrstvu a Kopírovat styl vrstvy | Copy Layer Style. Potom pravý klik na vrstvu s kostí a Vložit styl vrstvy | Paste Layer Style.

34

První část máme uspěšně za sebou. Puzzle sice ještě nemá žádný obrázek, už má ale jednotlivé kostičky, které jsou v jednotlivých vrstvách (a to je velmi důležité). Krásně do sebe zapadají a vypadají vyhlazeně, ačkoliv mají všechny pouze jednobitovou průhlednost. Máme dost důvodů k tomu, dát si chvilku přestávku, vypnout Photoshop i počítač a k další straně sednout až za pár hodin...

‹ 12

Kniha »

Část druhá »

Projekt 04 » Barvy, palety a vzorníky

Barvy, palety a vzorníky Stále nemáme vyřešenou barvu (resp. barvy) naší aplikace. Možná je na to ten správný čas, nemyslíte? Nebo jak to je? Pravda je taková, že ten správný čas je vždy. Barvy jsou nedílnou součástí každého návrhu, je jen na vás, kdy a jak se s nimi poperete. Na začátku většinou nemáte úplně jasno, jak chcete, aby projekt vypadal, takže se s barvami tolik netrápíte. Zvolíte pár základních barev, rozmístění prvků je důležitější (a použitím třeba jen bílé, šedé a černé snáze odhalíte nedostatky). Postupně ale začnete barvy měnit, upravovat, krůček po krůčku se dopracovávat k finálnímu vzhledu. V krajním případě – když ani po dokončení nevíte, které barvy by projektu sedly – zkusíte použít různé přebarvení (viz minulý projekt). Proč ale nemít v barvách jasno už teď? Dobrá. Řekněme, že puzzle je pro děti. Mělo by mít teplé, hravé, roztomilé, možná pastelové barvy. Ta oranžová není úplně k zahození, ale v kostičkách bude obrázek a oranžové pozadí by moc řvalo. Takže otevřeme výběr barvy. Co vidíte? Miliony barev a kombinací. Jen pár věcí je jasných (pokud pracujeme v režimu odstínu (1)). Vlevo nahoře (2) je bílá barva, která se směrem dolů mění v šedou až v levém spodním rohu přejde do černé (3). V pravém horním rohu je barva nejvíce nasycená (4), a postupně dolů ztrácí svou světlost, až opět přejde do černé. V ploše mezi těmito extrémy je mnoho dalších barev. Jenže každá barva zabírá přesně jen jeden pixel.

2

4 1

3

A to je ten největší problém! Kolik dokážete vyjmenovat barev? Deset, dvacet? Kolik máte pastelek na kreslení? Padesát, sto? A teď se podívejte na Photoshop. Kolik můžeme vybrat barev? Tisíc, milión, miliardu?

5 8 7

Vidíte ten nepoměr? Když kreslíme pastelkami, a chceme oranžovou barvu, je tam jen jedna. Když chceme oranžovou v Photoshopu, jsou jich tisíce. Situace je o hodně komplikovanější, když máme tak velký výběr. Jak z toho ven?

6

Máme možnost kliknout na tlačítko (Jiná) | (Custom), které přepne do výběru barvy z předem nastaveného vzorníku (5). Primární funkce těchto vzorníků je sice trochu jiná (pro tisk přímými barvami), nám ale krásně poslouží tím, že už nemáme na výběr z milionů, ale stovek či tisíců barev (6). Navíc náhled na barvu (7) je dostatečně velký, abychom si mohli představit, jak bude vypadat například pozadí vyplněné touto barvou (což u normálního náhledu (8) občas prostě nejde). A ta poslední možnost? Ne tisíce, ale desítky barev. Palety, které obsahují jen pár barev, jsou skvělým odrazovým můstkem. Jen se na ně podívejte na dalších stranách. A podívejte se opravdu pozorně.

13 ›

Kniha »

Část druhá »


153, 102, 0

204, 153, 0

255, 204, 0

255, 255, 0

255, 255, 153

255, 219, 157

255, 204, 102

255, 153, 51

255, 121, 75

255, 51, 0

153, 0, 0

0, 102, 0

0, 153, 0

102, 204, 51

153, 255, 102

204, 255, 204

0, 51, 153

0, 102, 204

0, 131, 215

0, 153, 255

62, 153, 222

153, 204, 255

180, 226, 255

222, 255, 255

51, 51, 102

153, 153, 255

102, 102, 204

153, 153, 204

102, 102, 153

204, 204, 255 255, 204, 255

máslo

pomeranč

Nahoře » paleta doporučená Microsoftem pro tvorbu ikonek – viz internet - Creating Windows XP Icons Dole » paleta používaná u ikonek projektu Tango – http://tango.freedesktop.org/ Vpravo a následující dvě strany » standardní paleta z programu Grafx2 96.5 – http://www.eclipse-game.com/

237,212,0

196,160,0

233,185,110

193,125,17

143,89,2

114,159,207

52,101,164

32,74,135

239,41,41

204,0,0

164,0,0

čokoláda

245,121,0

206,92,0

138,226,52

115,210,22

78,154,6

173,127,168

117,80,123

92,53,102

238,238,236

186,189,182

136,138,133

švestka

nebeská modř

hliník

jasně červená

‹ 14

252,175,62 chameleon

252,233,79

Kniha »

Část druhá »


108,108,108

124,128,128

180,180,180

248,244,228

220,208,200

192,172,172

168,140,144

140,108,120

0,204,204

0,184,184

0,232,252

0,192,228

8,168,200

16,204,136

16,152,100

68,116,84

4,224,232

4,208,232

12,196,208

0,152,152

172,112,140

152,84,112

128,60,84

104,40,64

212,152,184

196,140,176

184,128,172

172,120,164

80,56,92

64,40,76

60,36,72

24,0,40

188,152,184

160,124,156

132,96,128

236,0,152

184,0,116

152,0,100

220,68,16

168,48,16

200,104,44

192,88,32

184,72,20

252,168,136

224,140,108

188,104,72

252,124,0

228,100,0

212,124,56

252,244,196

252,240,140

252,236,84

252,232,32

252,216,32

244,200,28

236,184,24

228,168,24

184,140,32

140,112,40

252,244,116

244,208,104

240,176,96

228,156,80

220,140,68

116,76,96

92,64,80

116,96,120

104,84,112

96,76,104

88,64,96

80,56,88

72,48,84

160,200,228

136,180,212

116,164,196

96,148,180

80,132,164

64,116,148

52,100,132

40,88,120

15 ›

Kniha »

‹ 16

Část druhá »


0,192,252

0,176,244

0,160,228

0,144,200

8,132,172

20,112,140

32,84,104

0,52,72

216,252,252

184,248,252

152,248,252

120,248,252

92,244,252

60,244,252

60,224,252

12,212,252

176,0,80

160,0,64

144,0,48

128,0,48

112,0,32

96,0,16

76,0,0

64,0,0

196,192,176

180,176,160

164,160,148

148,148,136

132,132,120

116,116,108

100,100,92

88,88,80

252,248,248

240,208,208

232,168,176

224,136,148

216,100,128

208,72,112

200,44,100

192,16,96

120,56,76

104,52,68

88,44,60

76,36,52

68,32,44

60,28,40

52,24,36

48,24,32

252,180,208

240,144,172

220,124,144

204,108,120

188,92,96

168,80,88

152,72,84

136,64,80

184,184,168

176,176,160

168,168,152

160,160,144

152,152,136

144,144,132

136,136,120

128,128,116

252,252,228

244,244,220

232,232,212

224,224,204

216,216,196

208,208,188

200,200,180

192,192,172

92,124,100

80,112,88

68,100,72

60,88,60

52,76,48

44,64,40

36,52,32

28,40,24

Kniha »

Část druhá »


233,239,237

216,228,224

184,204,196

152,184,172

140,172,156

128,160,144

116,148,128

104,136,112

228,228,228

200,200,200

172,172,176

144,144,152

120,120,132

100,100,112

80,80,92

44,44,56

252,252,240

248,240,220

244,232,204

240,220,188

236,212,172

232,204,156

212,188,152

192,176,148

200,188,172

180,168,148

164,148,124

144,128,100

128,108,76

104,88,60

80,68,44

60,48,32

244,236,216

236,216,192

228,204,172

220,192,156

212,176,140

204,164,128

196,148,112

188,136,100

144,144,160

128,128,144

160,180,196

96,96,112

80,80,96

68,68,84

52,52,68

40,40,56

236,236,236

196,208,216

160,180,196

124,156,176

84,124,148

48,92,120

24,64,92

4,40,64

160,104,160

136,92,144

120,84,132

100,72,120

84,60,104

72,52,92

52,40,80

40,32,68

Poznámka: Vzhledem k tomu, že při tvorbě GUI pracujeme nejčastěji v barevném modelu RGB (který odpovídá zobrazení barev na monitoru), jsou hodnoty barev uvedeny právě v tomto formátu. Tato kniha je ovšem připravena v modelu CMYK, proto zde vyobrazené barvy nemusí přesně odpovídat jejich RGB hodnotám.

17 ›

Kniha »

1

2

Část druhá »


Prohlédli jste si palety pořádně? Teď zkusme najít nějakou barvu, která by se hodila pro pozadí aplikace. Jemná, světlá, ne moc křiklavá, teplá, příjemná. Třeba RGB(220, 208, 200). K ní zvolíme tmavší odstín jako barvu záhlaví – RGB(92, 64, 80) a pro pozadí celého dokumentu zvolíme další podobnou barvu RGB(140, 108, 120). Takže na co ještě čekáte? Vyplňte pozadí dokumentu (1) a vytvořte novou vrstvu s pozadím aplikace (2). Nahoře nechte místo pro menu, po stranách místo na odložení dílků puzzlete.

2 1

U záhlaví použijeme zas něco nového. Pod vrstvou pozadí aplikace (1) vytvoříme novou, ve které vyplníme plochu tak, aby přečnívala nahoře o cca 25 a dole o cca 5 px. Rychle dosáhneme výsledku tak, že načteme výběr vrstvy pozadí aplikace (1), výběr vyplníme barvou záhlaví, posuneme o 25 px nahoru, vrstvu zduplikujeme a posuneme o 30 px dolů (tím bude dole o 5 px přečnívat). Tyto dvě vrstvy sloučíme a hle – máme vrstvu výslednou (2). A nebo to nástrojem výběr (M) tipněte od oka.

3

‹ 18

Pod dílky bude obrázek, proto je musíme zprůhlednit. Při té přiležitosti také stáhneme efekty. Zvolte jeden dílek, černý obrys stáhněte na 75 %, bílý na 25 % a krytí výplně (1) na 0 %. Tento styl zkopírujte, svažte všechny dílky (2) a zvolte z menu jakékoliv svázané vrstvy Vložit styl vrstvy do svázaných | Paste Layer Style to Linked. A rovnou je třeba všechny přesuňte do složky, ať neruší.

1

2

1

2

Kniha »

Část druhá »

3


2

1 1

Než se dáme do přidání a rozřezávání obrázků, dokončíme všechny prvky aplikace. Začneme lištou pro menu, což není nic jiného, než další vrstva vyplněná světlejší barvou horní lišty – RGB(192, 172, 172). Ne náhodou ji najdete o pár stran zpět ve vzorníku. Načteme výběr vrstvy pozadí aplikace (1), nástrojem výběr (M) se stisknutými klávesami (Alt) a (Shift) vytvoříme průnik (2) a výsledný výběr vyplníme (3). A nebo to zas trefíte od oka? To je jen na vás!

3

Nudné tříbarevné pozadí aplikace zkrášlíme ilustrací. Nástroj pro vlastní vektorový tvar skrývá psí tlapky (Paw Prints), které – na rozdíl od kosti – přímo svádí k použití.

4 2

3 1 2

5

Nechte nastavenou barvu lišty menu a párkrát umístěte tlapky – s klávesou (Shift) aby byly zachovány proporce. Následně je různě pootáčejte. Nastavte barvu horní lišty, a opět nakreslete nějaké ty tlapky. Dobré je, když zasahují do stejně barevných oblastí, jako např. (1), (2) nebo (3). To, že zatím zasahují i mimo plochu aplikace nevadí. Všechny tlapky svázejte a umístěte do zvlášť složky (4).

1

3

4

Načtěte výběr vrstvy pozadí aplikace (1) a s nastaveným výběrem přidejte složce s tlapkami masku (2). Úplně stejně jako když přidáváte masku vrstvy. Jenže teď má masku složka, takže tato maska se aplikuje na všechny vrstvy v ní obsažené (3). Je to jako kdybychom každé vrstvě ve složce přidali tuto masku.

6

Nezapomeňte přesunout celou složku pod složku s dílky puzzlete!

19 ›

Kniha »

7

Část druhá »


Menu uděláme čiště textové, bez nějakých rušivých elementů. Textovým nástrojem (T) vytvořte novou textovou vrstvu, do které standardním fontem Tahoma velikosti 10 pt a bez vyhlazení (1), napište jednotlivé položky menu. Ty mezi sebou oddělte znakem |, ten napíšete zkratkou (Alt) + (W). Barvu textu nastavte stejnou jako je barva horního pruhu – RGB(92, 64, 80).

8

Samotný znak | je ale moc malý na to, aby pořádně oddělil jednotlivé položky. Proto vytvořte novou vrstvu, vyberte tužku (B) a s ní doplňte pod a nad každý znak | dva pixely.

9

Menu je hotovo, ještě ale nasimulujeme, jak bude vypadat over stav tlačítek.

1

Pod textovou vrstvou vytvoříme další, kterou vyplníme světlou barvou – RGB(235, 227, 227). Poté přidáme nahoru šipku – opět nástrojem tužka vyplníme pár pixelů – jak ukazuje obrázek vpravo. Tím, že je napojena na horní pruh a má stejnou barvu, vznikne zajímavý efekt (ano, trochu profláknutý).

10

A právě horní pruh je to, co nám zbývá. Zkusíme si udělat takový opravdu standardní pruh – ikonka, název aplikace, tlačítka pro nápovědu, minimalizaci a zavření aplikace. Na druhou stranu – aby nebyl pruh tak úplně standardní, budou všechny tři ikonky vpravo stejné (do doby, než nad nimi uživatel přejede myší). Může se vám to zdát jako matení uživatele, ale jestliže už sto let kliká vpravo nahoru, aby zavřel okno, byl by větší zmatek, kdybychom tlačítka zpřeházeli.

11

Zvolte barvu pozadí aplikace, označte čtverec (nástrojem výběr (M) s klávesou (Shift)) velký cca 10 × 10 px a funkcí Úpravy › Vytáhnout | Edit › Stroke nastavenou na 1 px a Vnitřní | Inside jej vytáhněte. Poté vrstvu zkopírujte dvakrát vedle sebe.

‹ 20

Kniha »

Část druhá »


12

1 1 1

Všechny tři vrstvy zkopírujte ještě jednou (1) – vytvoříme si náhled na over stavy. Ty už budou obsahovat obrázky znázorňující funkci tlačítka. Ikonky kreslíme (nástrojem tužka (B)) co možná nejmenší, aby zabíraly jen malou část už tak malých tlačítek. Přestože jsme spokojeni, můžeme ještě chvíli experimentovat. Zkusíme např. posunout ikonky tak, aby zasahovaly do obrysu a v místě okolo obrys odmázneme. Výsledkem jsou zcela nové ikonky, které však mají příliš sci-fi vzhled a k našemu projektu se nehodí. Nevadí, schováme si je na příště a pro tentokrát použijeme ikonky z minulého kroku.

13

Přesuňme se nyní na liště doleva a podobným způsobem vytvoříme ikonku aplikace.

14

Tentokrát to již není čtverec – protože vpravo je výstupek, který dílek rozšiřuje (proto je obdélník užší než vyšší). V dílku je umístěno písmeno E, což je první písmeno názvu aplikace. Právě přidání názvu aplikace „EJMAzzle“ je dalším krokem. Opět font Tahoma nastavený na 10 pt, barva ale tentokrát bílá.

15

A tady je! Puzzle v celé svojí kráse, které čeká už jen na to, až pro něj vyberete ten vhodný obrázek a podle dílků jej rozřežete. A pak další a další a další, dokud nebudete mít dost. Mimochodem, na pozadí můžeme přidat ještě jeden tvar psích tlapek. Těch není nikdy dost.

21 ›

Kniha »

16

Část druhá »


Kde sehnat vhodný obrázek na kostičky puzzlete? Stáhnout z internetu (např. www.google.com – hledání obrázků), koupit (v jedné ze stovek fotobank) nebo vyfotit. My zvolíme čtvrtou možnost – otevřít si obrázek z přiloženého CD, kde několik vhodných fotek naleznete. Při zkoušení si můžete vybrat tu, která se vám líbí nejvíc. Anebo použít fotku úplně jinou.

17

Fotku v Photoshopu otevřete a přesuňte do dokumentu tak, aby byla pod všemi vrstvami puzzlete. Je obrovská, takže je možné, že vidíte třeba jen hlavu nebo ocas. To teď ale nevadí. Postupně načtěte výběr všech dílků puzzlete – klikáním na vrstvy (1) s klávesami (Ctrl) a (Shift) (ano, opravdu musíte kliknout na každý dílek zvlášť).

1

Tento vytvořený výběr použijte jako masku vrstvy fotky (2). Tím je fotka zobrazena jen tam, kde má být.

18 19

Než se dáme do zmenšování, ujistěte se, že budeme opravdu zmenšovat jenom fotku – tj. je vybrána vrstva (1), ne maska (2) a je zrušeno svázání mezi vrstvou a maskou (3). Zkratkou (Ctrl) + (T) vrstvu zmenšete na požadovanou velikost, (Shift) zajistí zachování proporcí. Kdybychom vrstvu zmenšili už při vložení (ještě před přidáním masky), neviděli bychom úplně přesně, jak bude vypadat. Zmenšujte tak, aby důležité části (např. oči) nevycházely do spojů.

‹ 22

2 2 1 3

Kniha »

Část druhá »


Podíváme se trochu na barvy. Ne naschvál jsem si vybral tak pěknou fotku. Jsem totiž líný ji upravovat (a knih na toto téma existuje víc než dost). Jak vidíte, fotka má pěkně vyvážený kontrast, obsahuje jak nejsvětlejší, tak nejtmavší tóny a i barvy se zdají být v pořádku. Uděláme proto jen kosmetické změny, abychom si ukázali také nějakou další funkci. A pro příště slibuji, že vyberu nějakou bídnou fotku, u které budou úpravy již nutností... Přidáme novou vrstvu úprav Selektivní barva | Selective Color kliknutím v paletce vrstvy (1) společně s klávesou (Alt). Tím se vyvolá dialog, ve kterém zaškrtneme Seskupit s předchozí vrstvou | Group With Previous Layer (2) – úpravy se budou aplikovat pouze na naši vrstvu (což ukazuje šipka (3)).

3

2

1

1

A co teď s tím? Nahoře (1) vybíráme, na jaký rozsah barev se budou aplikovat změny vytvořené pomocí čtyř posuvníků. Začneme třeba hned červenou (Reds) (2). Červené místa máme v obrázku dvě: obojek a pravý horní roh. Přidáním 48 % Magenty (Purpurové) se barvy změní víc na růžovou. A více se budou hodit k barvám aplikace.

2

20 21

22

Z levé strany jde na tělo psa žluté sluneční světlo, které na jednu stranu dodává snímku teplo, na druhou stranu může působit dojemem, že je srst špinavá. Proto tuto záři malinko stáhneme. V záložce Whites (1) stáhneme žlutou (Yellow) složku na -39 % (zkuste si i -100 % – srst sice bude úplně bílá, bude ale působit studeným a nepřirozeným dojmem).

23

Podobným způsobem můžete upravit všechny barvy, které vám nesedí. Každou zvlášť a každou přesně. Selektivní barva | Selective Color je skvělý nástroj, máte-li už všechno hotové a potřebujete jen jemně doladit detaily v barevnosti. Navíc, naše fotka byla z hlediska úpravy barev ideální – tělo dalmatina je černé (Blacks) a bílé (Whites), obojek červený (Reds), levá strana jde do žluta, zatímco pravá do modra. Schválně si ještě zkuste stáhnout všechny složky v modrých (Cyans nebo i Blues) na -100 %. Pravá strana ztratí modrý nádech, vystoupí do popředí a zbyde jen černá a bílá. Obětujte trochu času a pořádně si s barvami pohrajte.

24

1

23 ›

Kniha »

Část druhá »

Projekt 04 » Akce

Akce Puzzle máme jakžtakž hotové. Co nás teď čeká? Rozřezat obrázek na jednotlivé dílky a poté každý zvlášť uložit. Aby nám u dalších obrázků od samého opakování neupadly prsty, ukážeme si, jak můžeme opakovanou práci v Photoshopu co nejvíce zjednodušit použitím akcí. Skoro jakoukoliv činnost lze totiž v Photoshopu nahrát a následně spustit znovu kolikrát chceme. Existují sice jistá omezení, ale i tak jsou akce v určitých situacích neocenitelným pomocníkem.

1 odstranit vybrané

nová akce

nová složka

přehrát akci

nahrát akci

zastavit nahrávání

2 3 4 5 6 7

Základem je paletka akcí – Okna › Akce | Window › Actions. Každá akce musí být ve složce (1), kterou vytvoříme kliknutím na tlačítko (5). Akce samotná se potom vytvoří kliknutím na tlačítko (6). Ihned po vytvoření se začne automaticky nahrávat – stejně jako při kliknutí na tlačítko (3). Nahrávání lze samozřejmě kdykoliv zastavit tlačítkem (2). Tlačítko (7) slouží pro vymazání kroku, celé akce nebo složky (během nahrávání není aktivní). Konečně tlačítko (4) vybranou akci přehraje.

10

Odstraněním „fajfky“ (8) určitou akci nebo její část zneaktivníte (krok se přeskočí). Obrázek (9) v druhém sloupci určuje, zda se má vyvolat dialog funkce (na ukázce je nastaven dialog u funkce Fill). Znamená to, že jakmile se Photoshop dostane k tomuto kroku, vyvolá dialog a počká na zadání hodnot uživatelem a až po potvrzení pokračuje dál. V akcích od cizích uživatelů bývá zvykem přidat před takovou funkci textovou zprávu – kliknutím na šipku (10) a zvolením Vložit přerušení... | Insert Stop... Nebojte, vše si ještě dopodrobna ukážeme. Kliknutím na fialovou šipku (11) se zobrazí podrobné nastavení funkce. Na ukázce například vidíte, že funkce Fill je nastavena na bílou barvu (white). Chcete-li jiné hodnoty, stačí dvakrát kliknout na funkci a zadat nové.

8

11

9

Jakmile začnete nahrávat akci, jste trochu pod tlakem. Přeci jen, každý krok se zaznamená a ačkoliv jej můžete smazat nebo upravit, je stresující nahrávat určitou akci stokrát. Ničeho se nebojte, není to tak hrozné. Hlavní je na to nemyslet. Na co ale myslet musíme, jsou nestandardní situace, do kterých se při nahrávání dostanete. Představte si situace, že chcete vybrat určitou konkrétní vrstvu a chcete s ní něco provést – například ji smazat. Pokud máte vrstvu vybranou, dáte nahrávat akci, vrstvu smažete a zastavíte nahrávání, uloží si Photoshop jen jeden údaj – smazat aktuální vrstvu. Nikde žádná zmínka o tom, jaká vrstva to vůbec je.

‹ 24

Kniha »

Část druhá »

Projekt 04 » Akce

To znamená – dáte-li nahrávat akci a chcete vybrat vrstvu, která je už vybraná, Photoshop to nezaregistruje. Musíte označit jinou vrstvu a potom zpět tu, kterou jste chtěli na začátku. Nebo začít nahrávat akci s označenou jinou vrstvou (což je to nejlepší řešení). Další zásek přichází v případě, že Photoshop nezaregistruje postupy, které děláte – třeba přetažení vrstev z jednoho dokumentu do druhého. Poznáte to tak, že ačkoliv něco uděláte, v akci nepřibude žádný krok. Pak přichází na řadu hledání, ve kterém menu se taková funkce nachází... Chtěl jsem vás ještě trochu postrašit akcemi v různých jazykových mutacích Photoshopu, ale na to přijdete časem sami. Do té doby si snad jen zapamatujte, že pozadí je v českém Photoshopu „Pozadí“ a v anglickém „Background“. Proč to říkám? Jakmile jednou nahrajete v Photoshopu akci, která bude odkazovat na jeden název, bude druhá jazyková mutace zmatená. Takže – zkuste si zapamatovat co nejvíc informací, začínáme nahrávat. Naše akce se bude skládat z těchto kroků: 1) vytvořit pomocný dokument a z původního dokumentu do něj přetáhnout složku s dílky puzzlete a obrázkem (tím pádem s původním dokumentem nebudeme vůbec pracovat); 2) načíst výběr jednoho dílku, vyjmout tuto část z obrázku, sloučit s dílkem, posunout dílek bokem a vytvořit slice z vrstvy; 3) krok 2 zopakovat pro každý dílek.

1

2 3

Před samotným nahráváním se ještě trochu připravíme. Je možné, že ve složce budeme mít víc obrázků. Abychom věděli, s kterým chceme pracovat, pojmenujeme vrstvu “image_back“. Od minule máme u vrstvy ještě druhou vrstvu se změnou barev (Selective Color), takže zkopírujeme obě vrstvy (Ctrl) + (J) (1). Pokud není, přiřadíme vrstvu úprav pouze vrstvě s obrázkem – (Ctrl) + (G) (2), tyto dvě vrstvy svážeme (3), sloučíme do jedné (Ctrl) + (E) (4) a nakonec přejmenujeme.

4

1

1

Dílek kosti, který je stále (zbytečně) reprezentován výplní barvou s maskou (1), převedeme na normální vrstvu. Klikněte pravým tlačítkem, zvolte Rastrovat vrstvu | Rasterize Layer, tím se převede na normální vrstvu (2) s maskou. Masku označte, klikněte na koš (3) a zvolte Použít | Apply – maska se aplikuje na vrstvu a zmizí. Jsme připraveni na akci!

2

3

2

25 ›

Kniha »

3

Část druhá »

Projekt 04 » Akce

Zobrazte paletku akcí a vytvořte novou složku – např. „gui_design“. Do této složky vytvořte novou akci, např. „save_puzzle“, potvrďte kliknutím na tlačítko Začátek nahrávání | Record a... už nahráváme! Říkal jsem něco o stresu? Časem si na to zvyknete.

4

Vytvořte nový dokument velikosti 640 × 480 px, pojmenujte jej „puzzle_2“, pozadí nechejte nastavené na bílou barvu. Potvrďte a podívejte se na paletku akcí. Jak vidíte, akce se stále nahrává (1), a už máme jeden krok – vytvoření nového dokumentu (2). Pěkně nám to jde!

2

1

5

6

Pokračujeme dál. Je potřeba do tohoto dokumentu dostat složku z dokumentu minulého. Pokud jste pozorně četli předchozí stranu, víte, že pouhé přetažení mezi dokumenty nestačí – Photoshop jej nezaregistruje. Musíte označit původní soubor (1), označit složku „puzzle_pieces“ (2), kliknout pravým tlačítkem a zvolit Duplikovat sadu vrstev | Duplicate Layer Set. Jako cílový dokument (3) vybereme ten nový – „puzzle_2“.

Složka je zkopírována a a akce je zaznamenána (1). Skvělý tah! Tím pádem máme první část za sebou. Nyní už minulý dokument nepotřebujeme (klidně jej ale nechejte otevřený, hned na přespříští straně jej budeme opět potřebovat).

‹ 26

1 2

1

3

Kniha »

upozornění

Část druhá »

Projekt 04 » Akce

Je dobré mít paletku akcí stále na očích. Dívejte se pozorně, co se zaznamenává – nemusí to být nutně to, co děláte! Podívejte se na předešlou stránku na krok 5. Když jsme vybrali původní dokument, Photoshop si uložil pouze Vybrat předchozí dokument | Select previous document. Tedy ne vybrat konkrétní dokument! Podobně výběr jakéhokoliv jiného dokumentu se zaznamená jako výběr dalšího, dalšího+1, dalšího+2 atd... Teď nám to ničemu nevadí, až se ale pokusíte akci přehrát a budete mít otevřeno více souborů, nepůjde to (Photoshop přepne zpět do jiného). Nebylo proto nezbytně nutné jej pojmenovávat, Photoshopu to je jedno.

1 2 3

3 4 2

Označíme nový dokument (1), vybereme vrstvu „image_back“ (2), načteme výběr z prvního dílku puzzlete (3), a zkratkou (Ctrl) + (J) zkopírujeme tento výběr. Tím vznikne nová vrstva (4). Vyjmutý kus fotky svážeme s prvním dílkem puzzlete (5) a sloučíme do jedné vrstvy zkratkou (Ctrl) + (E) (6). Poté jej posuneme bokem (7). Nakonec funkcí Vrsva › Nový řez z vrstvy | Layer › New Layer Based Slice vytvoříme slice pro pozdější snadnější ukládání jednotlivých dílků.

5 6 7

A teď znovu úplně stejně pro každý další dílek puzzlete. Zopakujeme si to ještě jednou:

8 1... 2. 3... 4. 5... 6. 7.

7 8

9

(1) označit vrstvu „image_back“ (vrstvu s obrázkem), (2) načíst výběr z dílku puzzlete (jednoho po druhém), (3) s tímto výběrem vyjmout část vstvy s obrázkem, (4) tuto vrstvu svázat s dílkem puzzlete, (5) sloučit tyto dvě vrstvy do jedné, (6) posunout bokem, (7) vytvořit slice z vrstvy. Akce (8) samozřejmě neopakujeme, ty stačilo udělat pouze jednou. Až se doklikáte nakonec, zastavte nahrávání a vyzkoušíme si, jak dobře jste akci provedli. Při zastaveném nahrávání také můžete smazat jakýkoliv krok, který se vám nepovedl a nahrát jej znovu. Označování více kroků je trochu nestandardní – s klávesou (Shift) označujete po jedné, s klávesou (Ctrl) od první do poslední (opačně než je zvykem).

27 ›

Kniha »

10

11

Část druhá »

Projekt 04 » Akce

Vyzkoušíme si, jestli jsme všechny kroky provedli správně. Aby to bylo trochu zajímavější, do starého dokumentu vložte novou fotku a podle pokynů z předchozích stran upravte tak, aby zabírala jen vymezený prostor. Starou fotku skryjte (1), přejmenujte (na jakýkoliv název) a novou (2) přejmenujte na „image_back“. Kliknutím na tlačítko (1) spusťte akci a čekejte. Pokud jste vše provedli správně, na konci by měl vzniknout dokument podobný obrázku vpravo. Dokument se všemi dílky připravený k uložení.

2 1

1

Dobrá, teď už vám při ukládání stovky obrázků neupadnou ruce, ale nešlo by to přehrávání ještě malinko zrychlit? Šlo.

poznámka

12

Volby přehrávání akce: V paletce akcí se pod šipkou skrývá možnost Volby Přehrávání | Playback Options. Zde můžete volit různé rychlosti přehrávání: Krokovat | Step by Step – (standardně) každá akce se provede, jak nejrychleji to Photoshop dokáže, překreslí se obraz a pokračuje se další akcí. Zrychleně | Accelerated – je ještě rychlejší. Photoshop totiž zbytečně nepřekresluje okna, takže se může zdát, že se aplikace zasekla (ve skutečnosti ale počítá a pracuje). Pauzy | Pause For – počká X sekund za každou akcí. Hodí se, pokud hledáte chybu ve vámi nahrané akci, učíte se podle akce nebo při akci naopak vyučujete (a potřebujete dostatečný prostor pro mluvení).

Na konci můžeme svou akci uložit. Ne proto, že by Photoshop do dalšího spuštění akci zapomněl, ale proto, abyste ji mohli použít třeba za rok nebo poslat někomu jinému. Jak akci uložit vám zřejmě dojde dřív, než dočtete tento text. Kliknout na šipku, zvolit Uložit akce | Save Actions a potvrdit. POZOR – ukládat jdou pouze složky! Při označené akci (ne složce), nebude tato funkce aktivní. Výsledný soubor má příponu .atn. Co ještě říct k akcím? Funkcí Volby akce | Action Options můžete nastavit akci klávesovou zkratku. Potom složitou akci vyvoláte (třeba jen) jedním stiskem klávesy. Ušetříte čas i prsty. Inspirací vám pro začátek můžou být standardní Photoshop akce Příkazy | Commands.

‹ 28

Kniha »

Část druhá »

Projekt 04 » Kurzor

Kurzor Proč mít vlastní kurzor? Pomineme nyní fakt, že uživatel může mít nastaven kurzor jakýkoliv (ano, klidně i toho chodícího dinosaura) a představíme si, že běžný uživatel má nastavené běžné kurzory (standardní Windows). Potom jsou dva hlavní důvody pro vlastní kurzor: Zaprvé – nevyhovuje nám styl. Tvoříme-li GUI, které je graficky specifické, je ve většině případů standardní Windows kurzor jako pěst na oko (a teď si představte toho dinosaura). V GUI, které je celé jakoby kreslené od ruky, nemůže být najednou kurzor, který má přesné a rovné tvary. V GUI lesního průvodce nemůžete dát něco, co je tak moc počítačové, když by jako kurzor mohla být například větvička. Příkladů je mnoho, a to jsme ještě nezačali mluvit o hrách. Tam je vlastní kurzor skoro nutností. Zadruhé – potřebný kurzor neexistuje. Nemusíme chodit daleko – stačí, když se podíváme na Photoshop (obrázek vpravo). Štětec, bílá šipka, černá šipka, kapátko, poznámky... To vše jsou kurzory, které obsahují jen pár barev a jejich styl je velmi podobný normálním kurzorům. Přesto musely být vytvořeny znovu, protože systém tyto kurzory neobsahuje. Proč chceme my vlastní kurzor? Z obou důvodů! K přesouvání dílků puzzlete bychom chtěli kurzor ruky (podobný ruce z Photoshopu). Bude-li však dílek zrovna „v ruce“, bude mít kurzor tvar zaťaté pěsti. Tvorba kurzoru je velmi podobná tvorbě ikonky. Opět máme k dispozici pouze vymezený prostor (většinou 32 × 32 px), ovšem v systému Windows XP již nejsme omezeni počtem barev ani barevnou hloubkou. Pro kurzory existují dvě typické vlastnosti: Inverzní barvy – viz obrázek vlevo. Jedna barva se nastaví jako inverzní a potom invertuje barvu podkladovou (vidíte, že u tlačítka Close je invertovaný rámeček a kus textu). Tato vlastnost měla zvýšit kontrast, ovšem měla za následek efekt zcela opačný. Photoshop hojně využívá inverzních kurzorů, na jejichž nedostatek narazíte hned, jak s nimi najedete na šedou plochu. Nejsou totiž vidět! Doplněk 50% šedé je opět 50% šedá. Hot-spot – je naopak jedna z nejdůležitějších vlastností kurzoru. Kurzor samotný je sice velký 32 × 32 px, ale oblast, kterou „kliká“ je velká pouze jeden pixel. A tato oblast se musí nastavit vlastností Hot-spot. Jako příklad vezmeme kurzor z minulého obrázku. Když není hot-spot nastavený, je standardně 0, 0 – tj. v levém horním rohu. Jenže naše šipka má vrchol v bodě 3, 3 – jak ukazuje obrázek vpravo. Proto musíme nastavit hot-spot na tuto hodnotu. Nebojte, vše si ještě dopodrobna ukážeme dál v knize.

29 ›

Kniha »

Část druhá »


Nelekněte se, že jsou na minulé straně screenshoty z úplně jiného programu (konkrétně se jedná o Borland ImageEditor). Je to tím, že v Photoshopu není možné nastavit inverzní barvu ani hot-spot. Přesto budeme všechny kurzory tvořit v Photoshopu a tyto detaily nastavíme později v jiné aplikaci. To jen na úvod. Teď ještě drobné vysvětlení, proč právě ruka. Je totiž nejkomplikovanější. Šipku, textový kurzor, kurzor pro zvětšování, přesný výběr, posun nebo zákaz vytvoříte hned a bez problémů. Ruka je úplně něco jiného – do malého prostoru musíte doslova nacpat (nejčastěji) pět prstů, aby vypadaly přirozeně a aby šlo stále bylo k poznání, že to je ruka. Jak si s tím poradili ostatní? Nejprve se podíváme na černobílé verze (což je ta jednodušší varianta). Na prvním obrázku vidíte různé podoby kurzorů v různých aplikacích. Konkrétně kurzor (1) je z Windows, kurzor (2) z MAC OS, (3) je pouze modifikace tohoto kurzoru. Kurzory (4) a (5) jsou velmi podobné těm, které budeme chtít vytvořit pro přesouvání dílků (jinak jsou ze staré verze Photoshopu). Kurzory (6) a (7) jsou pouze na ukázku, jak různě mohou ruce vypadat. Takových ukázek ale – bohužel – ve světě GUI moc nenajdete. Jak poznáte sami – ruka je oříšek...

1

2

3

4

5

6

7

Především, přijde-li na řadu barva. Následující obrázky nejsou kurzory, ale ikonky z nástrojových lišt. Po aktivování nástroje naprostá většina programů používá kurzor (4) z minulého obrázku. Ikonka (8) je z Adobe Acrobat Reader 5 – jak vidíte, pouze přebarvená černobílá verze. Ikonka (9) je z Photoshopu – opět jen přebarvená černobílá a přidány poloprůhledné pixely. Ikonka (10) vypadá naprosto jinak, že se skoro ani nechce věřit, že je z programu Adobe Acrobat Reader 6. Ikonka (11) vnáší trochu oživení a jiný – velmi zajímavý – styl. Pochází z Macromedia Flash 5. Záhy se ale mění ve verzi 2004 na ikonku (12). Že neuhodnete, kde ta má svůj základ?

8

9

10

11

12

Zpět k našemu kurzoru. Ten bude poloprůhledný, nejlépe černobílý (ale s vyhlazenými kraji), aby připomínal ruku a zároveň byl jednoduchý k vytvoření (nebojte, ani teď nebudou umělecké vlohy zapotřebí). Abychom se do velikosti lépe vešli, zmenšíme počet prstů na 4 (a la Simpsnovi). A provedeme brutální stylizaci do geometrických tvarů – jak vidíte na obrázku vlevo. Trochu to snad ruku připomíná, co myslíte? Zbáva už jen převést tento náčrtek do (funkčního) kurzoru.

‹ 30

Kniha »

Část druhá »


Začneme tím, že a) vytvoříme nový dokument, b) skryjeme všechny vrstvy v původním nebo c) v původním vytvoříme novou vrstvu vyplněnou barvou. Vyberte si, co vám vyhovuje. Důležité je, aby vás teď nic nerušilo. Ať už zvolíte jakoukoliv možnost, dalším krokem je vytvoření nové vrstvy o velikosti 32 × 32 px, vyplněné jakoukoliv barvou – ta nám bude určovat oblast, kam až můžeme kreslit.

1

Když už jsme si na předchozí straně tak krásně načrtli kurzor jako změť geometrických tvarů, byl by hřích toho teď nevyužít. V nastavení (Ctrl) + (K) nastavte mřížku na každý pixel. Nastavíte-li velký i malý krok na 32 px, nemusíte si ani kreslit podkladovou vrstvu. Mřížku zobrazte (Ctrl) + (Shift) + (“) a zapněte přitahování na mřížku – Zobrazení › Přitahovat na › Mřížku | View › Snap To › Grid. Toto nastavení bylo nutné, aby se vektorové tvary přitahovaly přesně na pixel i při kreslení ve velkém zvětšení (nástroj elipsa z nepochopitelného důvodu vlastnost Přitahovat na obr. body | Snap to Pixels neobsahuje). Zobrazte ještě jedno okno dokumentu, ve kterém budeme mít náhled na 100 % (viz tipy na začátku druhé kapitoly) a jde se kreslit. Vektorovým nástrojem pro kreslení elips (U) nakreslíme konečky prstů. Někde při horní hraně, o poloměru 6 px, s jednopixelovou mezerou a prostřední prst o trochu výš než ostatní (přesně, jak ukazuje obrázek). Všimněte si, že vlevo nahoře mám stále zobrazeno druhé okno, ve kterém je vidět dokument ve 100% velikosti.

2

Nebojte se o to, jestli máte tvary na správném místě, vše přesně umístíme později.

Nástroj pro elipsy neopouštíme, protože nakreslíme ještě jeden stejně velký kruh doleva – to bude konec palce. Teď vůbec nemáme tušení, kde bude palec končit, takže ho zatím necháme tak, jak je a raději nakreslíme dva větší kruhy dolů – to bude konec dlaně. Velikost tipněte od oka (klidně by mohly být i větší, než jsou na obrázku vlevo).

3

Důležité ale je, aby byly správně zarovnány vespod a na krajích. To, jestli by neměly být o pár pixelů výš nebo níž se hned dozvíme na další straně, protože přikreslíme všechny prsty i dlaň samotnou.

31 ›

Kniha »

4

5

Část druhá »


Prsty vytvořte nástrojem obdélník tak, aby začínaly vždy v polovině horního kruhu (1) a končily až dole v polovině spodních kruhů (2). Přidejte další obdélník, který nahoře (3) určí výšku dlaně (a tím pádem i délku prstů). Zkoušejte, dokud nenajdete optimální velikost.

Zbývá palec. Ten vytvoříme tak, že jeden z prstů zkopírujeme (Ctrl) + (J) (pouze obdélník) a otočíme (Ctrl) + (T) o -45°, zároveň jej malinko zkrátíme (palec je přeci jen kratší než ostatní prsty). Obdélník posuneme tak, aby začínal od místa, kde končí spodní kruh (1) a podle konce obdélníku posuneme i konec palce – malý kruh (2).

6

Nepočítáme-li vychytávky jako okraj a další drobnosti, máme kurzor hotový. Jen tak zkusmo jej tedy přetáhneme do původního dokumentu, abychom zjistili hroznou věc – je gigantický! Zabírá sice stanovené rozměry, ale díky tomu, že vyplňuje skoro celou plochu, je obrovský! Takhle velká ruka by se hodila maximálně do výstražného dialogu. Takže znovu a menší.

7

Postupujeme úplně stejně, pouze začneme tak, že kraje prstů – kruhy, budou mít průměr pouze 5 pixelů (oproti minulým 6 px). Všimněte si, že prostřední obdélník není nahoře přichycen na pixely, a tak vytvořil poloprůhledný kraj (1). Mimochodem, ačkoli nepíšu, že jednotlivé vrstvy pro přehlednost umisťujeme vždy do složek, nezapomínejte na to a dělejte to.

‹ 32

1

3

2

2 1

1

Kniha »

Část druhá »

34 25 1


Výsledek je určitě lepší, ale stále to není ono. Co takhle si ještě vyzkoušet, jak bude vypadat ruka, která bude mít prsty široké jen 4 pixely? A to je přesně ono!

8

V porovnání se standardním kurzorem šipky vypadá teprve tato ruka velikostí „tak akorát“. Chybí jen přidat obrys a potom doladit detaily. K tomu je potřeba, abychom všechny vrstvy k danému kurzoru (1) přesunuly do složky (2), kterou zkopírujeme a sloučíme do nové vrstvy (3) zkratkou (Ctrl) + (E). To samé můžete udělat i se středním (4) a velkým (5) kurzorem. Pro ten správný obrys stačí efekt vrstvy Vnější záře | Outer Glow, nastavený na černou barvu, Velikost | Size 1 px a Krytí | Opacity 100 %.

9

Jen malinko vyhlazeného vzhledu dosáhneme novým trikem. Místo složitého experimentování s Profil | Contour nastavíme Rozšíření | Range na cca 17 %. Nezapomeňte nastavit Metoda | Technique na Přesná | Precise.

Bílá barva výplně kurzoru propůjčuje kurzoru (společně s černým obrysem) největší možný kontrast a tudíž i nejlepší možné oddělení od pozadí. Na druhou stranu ale nenechává vůbec žádný prostor pro světlejší tóny a efekty s tím spojené. Proto kurzor vyplníme sotva znatelným odstínem šedi – RGB(244, 244, 244). Přidáním efektu Vnitřní záře | Inner Glow pak získáme onen módní vnitřní jednopixelový bílý okraj.

10 11

(Čtete-li snad tuto knihu v době, kdy už není efekt v módě, studujte prosím postupy spíš z hlediska historického ;)

33 ›

Kniha »

12

13

Část druhá »


Z obrázku vpravo je patrné, že kurzor potřebuje malinko doladit. Na konečcích prstů nejsou pixely 100% neprůhledné (1), což ve výsledku způsobí, že i černý okraj je rozmázlý a bílý vnitřní okraj začíná o pixel dál (není to moc vidět, ale je to tak). Nejrychlejší je obkreslit poloprůhledné pixely neprůhlednou tužkou (vím, že víte, jak na to). Poslední detail, který přímo bije do očí, je napojení palce. Podívejte se na svou vlastní ruku a zjitíte, že palec, pokud svírá s dlaní dostatečně ostrý úhel, vytvoří „čárku“. Přesně takovou čárku, kterou vytvoříme my jednopixelovou gumou, nastavenou na 40% krytí (odmažeme dva pixely (1)). Poté snižte krytí na 30 % a odmažte tři pixely dole (2) – po vzoru ruky animovaných postav. Efekty vrstvy zajistí, že se pixely vyplní šedou barvou.

14

Kurzor je hotov! Přesuňte jej do původního dokumentu, ať vidíte, jak krásně ladí k celé aplikaci a jaký je to rozdíl oproti minulému – obrovskému – kurzoru. To ale neznamená, že si nemůžete ostatní kurzory také dodělat – je to jen otázka překopírování stylů vrstev a dokreslení „palcové čárky“.

15

Z Photoshopu musíme dostat kurzor pryč – uložit ve velikosti 32 × 32 px do formátu png. Vytvoříme nový soubor dané velikosti, přesuneme do něj kurzor a uložíme obrázek jako png. Nezapomeňte vymazat pozadí, aby byl obrázek průhledný. Na umístění kurzoru v obrázku nezáleží, hotspot obstará správnou pozici...

‹ 34

1

1

2

Kniha »

Část druhá »


Na chvíli opustíme náš oblíbený Photoshop, abychom dotáhli kurzor do konce (což v našem případě znamená do souboru *.cur). Program, který nám k tomu dopomůže se jmenuje RealWorld Cursor Editor a je možné jej stáhnout na adrese

16

http://www.rw-designer.com/cursor-maker Program je poskytován zdarma pro nekomerční účely, v jiném případě je potřeba koupit licenci (29 USD). Zajímavostí je určitě fakt, že program je českého původu a obsahuje standardně češtinu. A proto bych se vám teď chtěl omluvit, že následující screenshoty jsou z anglické verze. Snad prominete s ohlédnutím k faktu, že všechny předešlé screenshoty z Photoshopu na tom nebyly o nic lépe. Po spuštění programu je třeba zvolit projekt, na kterém chceme pracovat. V našem případě bude kurzor z obrázku – Cursor From Image ta správná volba.

17

Po otevření následujícího dialogu vyberte obrázek, který jsme v posledním kroku na předešlé straně uložili a nezapomeňte odškrtnout Create animated cursor.

5 4 1

Zběžný průlet aplikací:

(1) seznam obrázků

18

v kurzoru (stejně jako u ikonky, i v kurzoru může být víc obrázků – nemá to ale žádný větší význam);

(2) náhled aktuálního obrázku; (3) testovací plocha pro hotspot (viz další strana);

3

(4) kreslící plocha

2

(5) nástroj pro určení

(my už ale máme vše nakresleno, takže stejně jako nástrojů si nemusíme této části vůbec všímat); hot-spotu.

35 ›

Kniha »

19

Část druhá »


Naše jediná práce v programu spočívá v tom, že zvolíme nástroj Cursor Hot Spot a klikneme na místo, které má být oním hotspotem. Jenže, které místo to je? U šipky by bylo rozhodování jednoduché – hotspot by byl na vrcholu šipky (1), u ruky (ukazatele) zase ve zvednutém ukazováčku (2), u hodin, zákazu, přesném výběru a textového kurzoru (3) bývá uprostřed. Ale u ruky?

1 2

3

Popravdě – zde na pozici hotspotu moc nezáleží kurzory na ukázce jsou z balíku Minimal cursors – nebudeme s kurzorem kreslit na pixel přesně, http://sryo.deviantart.com pouze přesouvat dílky puzzlete. Nejdůležitější je, aby byl hotspot v kurzoru. Jestli bude přesně uprostřed (4), uprostřed prstů (5), nebo v některém konkrétním prstu (6) je už jen a jen na vašem rozhodnutí. Pokud stále nevíte, zkuste testovat pozici kreslením v testovací oblasti (7). Mě přišlo nejlepší umístit hotspot do ukazováčku (8). A to je vše. Opravdu vše. Stačí jen zvolit File › Save a uložit kurzor ve formátu *.cur.

8 7

6

5 4

To, co jsme si teď předvedli v programu RealWorld Cursor Editor, berte pouze jako ukázkový příklad. Snažte se nezvykat si příliš na programy, které plní jen zástupné funkce (resp. funkce, které zatím nejsou součástí Photoshopu). Je klidně možné, že program přestane být vyvíjen nebo bude zpoplatněn úplně. K obdobné operaci – nastavení hotspotu a export kurzoru ve formátu *.cur – existuje stovka dalších programů. Komu by se ale chtělo učit stovku programů, každý dopodrobna? Proto ta nejlepší taktika je tvořit co nejdéle v Photoshopu a až když dojdou Photoshopu síly (funkce), tak přepnout do programu jiného. Nebojte, jednoho dne už nebudete muset přepínat vůbec (snad).

‹ 36

Kniha »

Část druhá »


Nastavení kurzoru v systému Windows je hračka (a to doslova – ukažte průměrnému uživateli, jak změnit ukazatel za hezčí a má o zábavu vystaráno). V ovládacích panelech vyberete nastavení myši a záložku Ukazatele | Pointers. Zde je jedna zajímavá volba – Povolit zobrazení stínu ukazatele | Enable pointer shadow (1). Je to stejné, jako když v Photoshopu zapnete vržený stín. Ovšem pozor! Toto nastavení funguje pouze u kurzorů s jednobitovou průhledností. Jakmile nastavíte kurzor s průhledností vyšší, už se žádný stín vykreslovat nebude. A je to logické – vždyť v poloprůhledném kurzoru si stín můžeme nakreslit sami přesně takový, jaký chceme. To vyvolává otázku: proč systém Windows XP používá standardně kurzory s jednobitovou průhledností? Záměrně mate uživatele, aby si mysleli, že k pěknému průhlednému a vyhlazenému kurzoru potřebují další programy, které akorát zaneřádí systém? Odpověď je jednoduchá. Průhledné kurzory nefungují vždy na 100 % (nejčastější problém je problikávání). Takže místo řešení problému je jednodušší nechat staré kurzory... Zvláštní taktika. Stále je to ale lepší, než následující – odstrašující – příklad. A to když se programátor rozhodne, aby kurzor vykreslovala samotná aplikace. Nebavíme se teď o hrách ani fullscreen aplikacích (u těch je to občas nutnost), stále zůstáváme stále na poli GUI – třeba takový CD autorun. Programátor má rád animace a efekty, takže nezahálí a přidá ke kurzoru ocas, který hoří jako prskavka. No a ten standardní – systémový kurzor – skryje. Vše je krásné až do chvíle, kdy procesoru dojde šťáva. Ne žádné zatuhnutí, jen malinké zakolísání. Proces, vykreslující Windows kurzor, by si z toho nic nedělal – má nejvyšší prioritu a uživatel by to ani nepoznal. Ale když je kurzor vykreslován takto? Jakékoliv zaseknutí, zpomalení odezvy je frustrující! Uživatel pohne myší a musí čekat. Není nic horšího, než když si kurzor dělá co chce! Pak jdou všechny ty krásné efekty stranou a zbývá jen aplikaci zavřít. Pokud se ovšem trefíte kurzorem na to správné tlačítko. Shrnuto: nedovolte programátorovi, aby vykresloval kurzor v programu sám (ne přes systém). Tj. pokud po vás požaduje kurzor s tím, že „... *.bmp přeci stačí“. Je to zbytečné a nevýhodné! Windows kurzor může mít průhlednost, může být plnobarevný, animovaný i stínovaný… A velikost? Kdo potřebuje kurzor větší než 32 × 32 px? Nakonec se pokochejte první verzí nových kurzorů pro systém Windows Vista. Jak je vidět, moc se toho na kurzorech měnit nedá. Konečně přibyla průhlednost (vyhlazené kraje), nějaké ty decentní gradienty... Ale jinak se dá říct, že to jsou pořád ty stejné kurzory (snad jen šipka má kratší ocásek). Ó ano – chybí hodiny! Ty nahradil barevný modrý kruh. Že by inspirace u MACu, kde je u stejné akce velmi podobný kurzor – točící se barevné kolečko (dříve černobílé)? No alespoň už žádný dinosaurus nebo loupající se banán! ;)

37 ›

‹ 38

39 ›

Projekt 04 puzzle. Kniha» Část druhá» Projekt 04 Puzzle EJMAzzle

Recommend Documents