Projekt 03 informační panel

3

Projekt 03 ›

Kniha »

Část druhá »

Projekt 03 – Informační panel INFOSIS

Projekt 03 – informační panel Po hře s magickou tabulkou přejdeme k trochu serióznějšímu projektu (což ale vůbec neznamená, že to nebude zábava). Představte si, že dostanete zakázku udělat grafiku pro informační panel – tzv. informační kiosek, který bude umístěn v místě X a bude sloužit občanům, aby zjistili X, Y a Z. Jistě to znáte a ve vašem okolí se podobné zařízení nachází. Zkoumali jste někdy, jak vypadá, jak se pohodlně ovládá, co je uděláno dobře a co byste udělali líp? To by měl být první krok, než se pustíte do práce – poohlédnout se po podobných projektech a detailně je prozkoumat. Nechce-li se vám vstávat ze židle, zkuste alespoň do googlu zadat dotaz a najít ukázky tam. Vpravo vidíte ukázku kiosku z dílny www.valvomo.com U našeho kiosku se ovládání bude realizovat pomocí dotykového displeje, takže grafika by tomu měla odpovídat (především velikost tlačítek). Prozatím stačí navrhnout první obrazovku, lištu s tlačítky (domů, zpět, vpřed, nahoru, dolů, zvuky, nápověda) a logo. Rozlišení obrazovky je 800 × 600 px. Grafika je zcela na vás, zadavatele ale jistě potěší vidět víc barevných variant. Na tomto zadání není nic nereálného, takže se do něj pustíme. Než se však do něj pustíme, řekneme si, co všechno budeme dělat, a jak to bude přibližně vypadat. Začneme tím, že si rozmyslíme rozložení prvků. Při největším zjednodušení bude na obrazovce informační část a lišta s tlačítky. Obrázek vpravo nahoře ukazuje všechny čtyři možné varianty. My zvolíme menu dole, a to z jednoduchého důvodu. Ovládání bude – jak už bylo napsáno – přes dotykový displej a kdyby bylo menu nahoře, uživatel by si vždy rukou zakryl celou obrazovku. Menu vlevo nebo vpravo není výhodné z toho důvodu, že výsledný prostor na obrazovce začíná mít čtvercový tvar – a to není přirozené. Jen se podívejte, kolik je čtvercových televizí a na kolik čtvercových papírů píšete. Pozice je jasná. My ale při tvorbě začneme úplně nečím jiným – pozadím. Zkusíme navrhnout jednoduché, příjemné a nenápadné pozadí. Při jeho tvorbě se inspirujeme pozadím z počítačů MAC – modrou plochou vyplněnou přechodem, přes kterou se náhodně rozprostírají tenké světlé zakroucené čáry. Poté navrhneme vzhled lišty. Aby vypadala lépe, bude uprostřed prohnutá a toto prohnutí se poté projeví na tvaru všech tlačítek v ní umístěných. Následovat bude návrh vzhledu jednotlivých tlačítek a ikonek na ně. Toto je poprvé, kdy se setkáváme s ikonkami v aplikaci, proto začneme velice zlehka. Každá ikonka bude ve skutečnosti akorát hromada teček, které budou uspořádány v mřížce. Je to skoro stejné jako kdybychom nakreslili pixelovou ikonku a poté ji např. osmkrát zvětšili. Pro zlepšení vzhledu ale použijeme efekt, který způsobí, že jednotlivé tečky – pokud budou dostatečně blízko u sebe – se na sebe napojí. Stejně jako se například napojí kapky vody nebo vosk v lava lampě (tento efekt je často nazýván blobs). Naše grafické snažení zakončíme logem. Ale jaképak zakončování? Vždyť jsme ještě nezačali! Takže... s chutí do toho!

‹ ‹202

Kniha »

Část druhá » Projekt 01 – Kalkulačka KALKULON

infosis možné polohy menu:

1

logo bude umístěno v bublině, aby bylo viditelně odděleno od pozadí. A nebo bude logo bublina? :)

2

3

4

na pozadí bude jemný vzorek ze světlých čar – ne ale pixelový vzorek – ten by se v tomto rozlišení úplně ztratil

u kraje lišty bude 1bitová průhlednost – aby šlo zobrazit jakékoliv pozadí, bez nutnosti měnit obrázek lišty

horní část lišty bude prohnutá, jen tak, aby trochu zpestřila grafiku, zároveň všechna tlačítka v liště budou tvarem kopírovat tento obrys IKONKY – budou vytvořeny jednoduchým a přesto efektním způsobem. V mřížce X × Y nakreslíme několik bodů určujících vzhled, tento výběr následně zvetšíme a poté hned zmenšíme. Tím budou jednotlivé body provázány, jak ukazuje třetí obrázek. Vznikne zajímavý efekt:

3›

Kniha »

1

2

3

‹4

Část druhá »


Jaký bude první krok? Správně, nový dokument (Ctrl) + (N) velikosti 800 × 800 px. A jaké bude pozadí? Třeba zelené. Nastavte barvu popředí na jednu zelenou – RGB(38, 113, 101) a barvu pozadí na druhou zelenou RGB(65, 182, 138). Poté vytvořte novou vrstvu přechodu – v menu v paletce vrstev vyberte Přechod | Gradient, nastavte Styl | Style na Kruhový | Radial (1), a přechod z popředí do pozadí (2) (tj. z jedné zelené do druhé zelené) – tak, aby světlejší zelená byla uprostřed. Pokud tomu tak není, zaškrtněte Obrátit | Reverse (3). Rovněž přechod trochu zvětšete, např. na 150 % a posuňte malinko nahoru – tak, že kliknete myší a táhnete v kreslící ploše. To byla rychlost, že? Dobrá, malilinko zpomalíme a řekneme si co budeme v následujících krocích dělat. Máme na pozadí přechod, tak jej trochu zpestříme – přidáme odlesky. Pro simulaci obrazovky přidáme nejprve světlý lineární přechod zespodu (1) a poté dva světlé kruhové přechody uprostřed nahoře (2) a uprostřed dole (3). Tím vznikne efekt nedokonale podsvíceného displeje, který ještě završíme tím, že kolem celé plochy bude vnitřní stín. Jdeme na to! Přidáme další přechod, tentokrát lineární z bílé do zelené barvy, přičemž u zelené bude 100% průhlednost (0% krytí). Této vrstvě nastavíme interakci na Překrýt | Overlay a krytí na 50 %. Tím bude vrstva pod ní nejenom světlejší, ale získá i malinko jiný nádech. Vždy je to o tom zkoušet všechny možné kombinace a vybrat tu nejlepší...

1

2

3

2

1

3

Kniha »

Část druhá »


Pokud byste přeci jen měli problém s nastavením přechodu v minulém kroku, zde je pro jistotu stručný návod. Nejprve klikněte do přechodu (1) pro vyvolání dialogu. V něm nastavte jednu barvu na bílou (2) a druhou na zelenou (3) (nezáleží na tom, jestli to bude světlejší nebo tmavší zelená). První zarážce (4) nastavte krytí na 100 % a druhé zarážce (5) na 0 %. Krytí se nastavuje v místě (6), které je teď ale neaktivní, protože na obrázku je vybrána zarážka barvy.

1

4 2

5 3

6

Další dvě vrstvy přechodu ((1) a (2)) budou přechody z bílé do průhledné, ovšem tentokrát chceme kruhový přechod (3). Obě vrstvy jsou opět nastaveny na Překrýt | Overlay, přičemž spodní vrstva (1) má krytí 50% zatímco horní (2) pouze 20%.

2 3

1

2

4

4

5

Nezapomeňte, že s vrstvou můžete posunovat pouze je-li aktivovano dialogové okno úpravy přechodu (4) (už jen proto, že vrstvy musíte ke krajům posunout ručně).

1

1

Pokud chcete, vytvořte novou vrstvu (Ctrl) + (Alt) + (Shift) + (N). Tu vyplňte bílou barvou ((D) a poté (Ctrl) + (Backspace)) a stáhněte krytí výplně na 0 % (1).

6

Této vrstvě přidejte efekt Vnitřní stín | Inner Shadow, který nastavte na zelenou barvu RGB(40, 117, 103), krytí stáhněte na cca 15 % a Velikost | Size zvětšete alespoň na 70 px. Schválně, kolik klávesových zkratek si ještě pamatujete? A kolik jich používáte?

5›

Kniha »

7

8

9

10

Část druhá »


Pokračovat budeme vytvořením náhodných světlých čar. Ony to nejsou jen tak ledajaké čáry – ale části kruhů a elips. Proto také začneme tím, že nakreslíme vektorový kruh (nástrojem Elipsa | Ellipse Tool (U)). Na velikosti, pozici ani barvě nyní nezáleží. Vrstvě stáhneme krytí výplně na 0 % (1) a přidáme efekt Vytažení | Stroke, nastavený na 1 px a bílou barvu. A jde se kopírovávat a transformovat! Zmenšete si zobrazení například na 25 % (Ctrl) + (-). Vrstvu transformujte (Ctrl) + (T) tak, aby byla vidět v ploše jenom její část. Ať je poznat, že to je část elipsy, ale jen náznakem. Však víte... Jste-li spokojeni, potvrďte transformaci (¢_Enter) a... ...vrstvu zduplikujte (Ctrl) + (J) a opět transformujte. A znovu a znovu a znovu, dokud nebudete spokojeni. Při kopírování a zvětšování zkuste občas posunout vrstvy tak, aby se někdy střetly třeba i tři v jednom místě, vznikne zajímavý efekt.

Nakonec nastavte vrstvám krytí od 5% do cca 20%. Při nastavování používejte čísla na numerické klávesnici. Stiskem jednoho čísla nastavíte krytí v desítkách ((5) nastaví krytí na 50 %, (2) na 20 %, (0) na 100 %). Stiskem dvou čísel zadáte přesnou hodnotu ((1) (2) nastaví krytí na 12 %, (6) (9) na 69 %, (0) (5) na 5 %).

‹6

1

Kniha »

Část druhá »


Aby těch proužků nebylo málo, přidáme ještě čárkovaný obrys koule. Tím vznikne dojem prostoru, a to bez nějaké větší námahy. Uvidíte.

11

Začneme tím, že definujeme nový vzorek vodorovných čar, takže do nové vrstvy nakreslete tužkou vzorek podobný tomu na obrázku vlevo. Jde jen o to nakreslit jeden pixel černý a pod ním pár bílých (v mém případě sedm, ale na přesném počtu zas tolik nezáleží). Oblast označte nástrojem výběr (M) a zvolte Úpravy › Definovat vzorek | Edit › Define Pattern. Tuto nově vytvořenou vrstvu ihned využijeme – vzorkem ji vyplníme. Odznačte výběr (Ctrl) + (D) a stiskněte zkratku (Shift) + (Backspace) pro vyvolání dialogu výplně. Vyberte náš nově definovaný vzorek a potvrďte (_OK_).

12

Přišel čas na efekty! Jeden takový totiž přesně odpovídá našim požadavkům – výběr „prohne“, aby připomínal kruh. Nalézá se v menu Filtr › Deformace › Prohnutí | Filter ›Distort › Pinch a má jen jednu vlastnost. Ta určuje, na kterou stranu se bude prohýbat a jak moc. My zvolíme nejvíc – 100 %.

13

Jelikož chceme zachovat pouze bílé pruhy, celou vrstvu invertujeme zkratkou (Ctrl) + (I) a poté nastavíme na Závoj | Screen a krytí pouze na 5 %. (Na obrázku vlevo je na ukázku průhlednost nastavená na 50 %.) Pozadí máme hotové.

7›

Kniha »

14

Část druhá »


Pozadí máme sice hotové, věnujme mu ale ještě jeden bod. Možná vás totiž napadlo – proč jsme nevytvořili vzorek opačný – jeden bílý bod a potom zbytek černé? Ušetřili bychom si tím zbytečné invertování? Není to pravda – a klidně si to vyzkoušejte sami. Kdybychom měli vzorek inverzní už před aplikováním efektu, efekt by vypadal úplně jinak. A jak jsem na to přišel? Zkoušením! Takže ani vy nepřestávejte zkoušet a když uvidíte v knize něco, co si myslíte že by šlo udělat lépe a rychleji, nezůstávejte jen u myšlení a vyzkoušejte to! Mimochodem, existuje ještě jeden filtr – Filtr › Deformace › Zaoblení | Filter › Disort › Spherize. Ten rovněž přizpůsobí obrázek, aby vypadal jako koule, navíc lze nastavit aplikování efektu pouze po jedné ose... Pro naše účely byl ale vhodnější filtr minulý, tento udělá na přechodu ostré hrany.

15

16

17

‹8

Další na řadě je vytvoření spodní lišty. Nakreslete vektorový obdélník (U) barvy zelené RGB(144, 200, 144) tak, aby zabíral spodní část obrázku. Můžete i podle ruky, jeho výška je cca 120 px. Nástrojem pro výběr cesty (A) označte vektorovou masku a nástrojem Přidat kotevní bod | Add Anchor Point Tool přidejte bod doprostřed (1), který opět označte a posuňte o 20 px dolů (2 × stiskněte (Shift) + (¼)). Tím vznikne prohnutý okraj.

1

Vrstvu zduplikujte (Ctrl) + (J), přebarvěte na tmavší zelenou – RGB(0, 151, 117). Zkratkou (Ctrl) + (T) vyvolejte transformaci, zvětšte vrstvu na 150 % a posuňte o pár pixelů dolů – jak ukazuje obrázek. Tím se stal z minulé vrstvy odlesk, a krásně nám oddělil lištu od pozadí. To nám ale nestačí! Světlejší zelenou vrstvu (1) opět zduplikujte (2), a přebarvěte ještě na světlejší zelenou – RGB(210, 238, 210). Tuto vrstvu posuňte za ostatní zelené vrstvy a o jeden pixel nahoru – stiskem (½). Tím máme poslední nejsvětlejší odlesk. Navíc – tato vrstva bude skvělý základ pro nevyhlazený okraj, který se pokusíme u lišty udělat.

1

2

Kniha »

Část druhá »

1


Při tvorbě nevyhlazeného okraje využijeme podobného postupu jako při tvorbě ikonky u prvního projektu. Vzpomínáte si ještě? Nejprve je nutné převést vektorovou masku na bitmapovou – kliknutím pravým tlačítkem na masku a zvolením Rastrovat vektorovou masku | Rasterize Vector Mask.

18

Poté je třeba z bitmapové masky odstranit všechny odstíny šedi, aby zbyla pouze čistá černá a čistá bílá barva. K tomu poslouží efekt Obraz › Přizpůsobení › Práh | Image › Adjustments › Treshold. Zde nastavte hodnotu tak, aby se vám výsledek líbil. V podstatě je nejlepší zůstat s posuvníkem někde uprostřed.

19

Nakonec vrstvu znovu zduplikujte (1), přebarvěte na velmi tmavý odstín zelené – RGB(0, 74, 71), posuňte pod ostatní vrstvy a o jeden pixel nahoru. Vznikne jednopixelový nevyhlazený okraj, takže od teď už pozadí může mít jakoukoliv barvu.

20

Ve zvětšeném náhledu je okraj vidět ještě lépe.

Nebolí vás z toho věčného posouvání vrstev dozadu a dopředu ruka? Naštěstí i na tyto funkce existují klávesové zkratky. Je dobré si je zapamatovat i z jiného důvodu – až se dostaneme k akcím a jejich nahrávání, jsou klávesové zkratky nepostradatelné (myší nikdy nenasimulujete výběr další nebo předešlé vrstvy). Zde je jejich seznam:

21

(Ctrl) + (¿) / (¡) – posunout vrstvu o jednu níž (1) / výš (2)

8

6

5 7

2 1

4

(Ctrl) + (Shift) + (¿) / (¡) – posunout vrstvu dolů (3) / nahoru (4) (Alt) + (¿) / (¡) – vybrat vrstvu pod (5) / nad (6) aktuální (Alt) + (Shift) + (¿) / (¡) – vybrat první (7) / poslední (8) vrstvu v dokumentu

3

Krom toho klávesy (¿) / (¡) slouží pro nastavení velikosti štětce, v kombinaci s klávesou (Shift) se nastavuje tvrdost.

9›

Kniha »

22

Část druhá »


Lištu pro tlačítka máme hotovou – teď už jen ta tlačítka. Načteme výběr vrstvy zelené – té která je nejvíc nahoře (kliknutím na ni se stisknutou klávesou (Ctrl)), a výběr zúžíme o 10 px – Výběr › Změnit › Zúžit | Select › Modify › Contract. Následně vytvoříme novou vrstvu, kterou vyplníme jakoukoliv barvou (zatím dočasně). Jenže ouha! Výběr se nám zúžil pouze nahoře (1) dole. Na stranách (2) je stále až ke kraji dokumentu.

23

Nebudeme dlouze přemýšlet čím to je, raději výběr odznačíme (Ctrl) + (D), vybereme nástroj výběr (M), nastavíme pevnou velikost (1) např. 10 × 200 px, označíme levou část, odmažeme, odznačíme pravou část, odmažeme, poté nastavíme velikost na 800 × 10 px, odznačíme spodní část a odmažeme.

24

Sedm tlačítek, šířka plochy 780 px, mezi tlačítky šest pětipixelových mezer... Jak bude široké jedno tlačítko? A nebo ne, kašleme na počítání. Místo toho zvolte nástroj výběr (M) nastavený na pevnou velikost 5 × 200 px (1) (šířka mezery), vytvořte novou vrstvu a tu vyplňte černou barvou. Vrstvu zduplikujte celkem osmkrát (Ctrl) + (J) (viz obrázek nahoře) a rozmístěte tak, aby první (2) a poslední (3) vrstva byla přesně zarovnaná s vrstvou bílou (aby se dotýkala kraje, ne aby přesahovala). Všechny tyto vrstvy svažte dohromady (4), zvolte nástroj posun (V) a klikněte na ikonku rozmístění (5). Mezery jsou na místě, takže svázané vrstvy slučte do jedné zkratkou (Ctrl) + (E).

‹ 10

2

1 1

1 2

3 5

4

Kniha »

Část druhá »


Načtěte výběr této nově vzniklé vrstvy ((Ctrl) + klik), vrstvu zneviditelněte, vyberte vrstvu bílou a stiskem tlačítka (Backspace) tuto oblast odmažte. Poté výběr odznačte (Ctrl) + (D). Vypadá to, že i základ pro tlačítka máme hotový, ale neříkal tady někdo něco o kulatých rozích?

25

Říkal! Bohužel – teď už nemůžeme použít nástroj pro obdélník se zakulacenými rohy a kreslit je všude ručně? Ještě že existuje způsob, resp. zjednodušení v podobě filtru Filtr › Šum › Vyhladit | Filter › Noise › Median. Ten má velmi podobné učinky jako filtr pro rozostření, ovšem s tím rozdílem že se žádné rozostření nekoná. Zvolte jej a stejně jako na obrázku vlevo nastavte hodnotu na 2 pixely.

26

Jenomže rohy (spodní) jsou nevyhlazené. A to už moc pěkné není. Jak z toho ven? Použijeme malý trik. Po aplikaci filtru s poloměrem 2 px jej aplikujeme znovu, ovšem tentokrát s poloměrem 3 px.

27

A ten trik? Spočívá ve funkci Úpravy › Zeslabit | Edit › Fade, (Ctrl) + (Shift) + (F).

28

Tato funkce dovoluje nastavit krytí (a interakci) poslední provedené operaci nebo funkci. To znamená, že jakémukoliv efektu nebo akci můžete zpětně nastavit menší krytí, a to právě teď uděláme. Nastavením krytí na 50 % vznikne pěkný vyhlazený okraj.

11 ›

Kniha »

Část druhá »


29

Tlačítka trochu zpestříme – přidáním efektů vrstvy. Věřím, že po všech těch přečtených stranách již máte efekty vrstev naprosto zmáknuté, a tak i u tohoto projektu to bude otázka chvilky. Ale nebojte – neznamená to, že si neukážeme zase něco nového. Třeba 3D efekt vzniklý použitím vnitřního stínu? Možnosti jsou nekonečné.

30

Začneme tím, že vrstvu přebarvíme na zelenou – RGB(0, 151, 117). TIP! – stisknete-li při vyplňování (Ctrl) / (Alt) + (Backspace) i klávesu (Shift), zachová se průhlednost vrstvy (nemusíte zamknout průhlednost klávesou (/)). Je logické, že teď není vrstva ani trochu vidět. To ale hned napravíme přidáním efektu Vnější záře | Outer Glow, ovšem nastaveným na Násobit | Multiply a zelenou barvu – RGB(36, 117, 99). Velikost | Size stáhněte na 1 pixel a Rozsah | Spread na 70 %. Právě tato vlastnost je hlavním důvodem, proč je lepší používat tento efekt než Vytažení | Stroke.

31

Další efekt je Satén | Satin. Tento efekt není moc využívan – což je ale především způsobeno tím, že si málokdo dokáže představit jeho využití. My ano ;) Efekt si různě pohrává s tvarem, který umišťuje dovnitř objektu – rozmazaný, otočený – nastavit lze cokoliv. Nejlépe se ale efekt využije v kombinaci s dalšími, něco na způsob masky. Aplikujeme některý z efektů a poté tímto efektem kus skryjeme.

32

Podívejte se na obrázek vpravo – je to takové klasické nastavení. Nic moc, že? Teď ale změňte barvu na zelenou, nechte interakci na Normální | Normal a průhlednost na 100%. Jakmile přidáme další efekt, bude vidět pouze v místech, kde předtím efekt nebyl, tj. (1), (2) atd. Už si dokážete představit k čemu je takový Satén | Satin dobrý? Takže přidejte Překrytí přechodem | Gradient Overlay z černé do bílé, nastavený na Závoj | Screen, a průhlednost 59 %.

‹ 12

1

2

Kniha »

Část druhá »


Možnosti jsou o hodně větší, ale něco si musíme nechat zase na příště. Teď přidáme efekt Vnitřní stín | Inner Shadow, který při nastavení na bílou barvu, krytí 26 %, Úhel | Angle -90°, Vzdálenost | Distance 5 px, Velikost | Size 0 px, Vyseknutí | Choke 0 px vykouzlí pěkný odlesk zespodu. Jednoduché, praktické.

33

Poslední dobou je v módě ke všem prvkům cpát jednopixelový světlý vnitřní obrys. Nebudeme se bránit a také to zkusíme. Efekt Vnitřní záře | Inner Glow k tomu přímo svádí – stačí nastavit Velikost | Size na 1 px, barvu například na žlutou (popř. i bílou), a pohrát si s krytím.

34

TIP! – při zobrazeném dialogu efekty vrstvy můžete stále posouvat s dokumentem – ale i jej zvětšovat a zmenšovat přes (Ctrl) / (Alt). Nakonec přidáme jednopixelový spodní okraj, který bude simulovat zapadnutí tlačítka do lišty. To vše přes efekt Vržený stín | Drop Shadow, nastavený na Závoj | Screen, Úhel | Angle 90°,Vzdálenost | Distance 1 px, Rozsah | Spread 100 px, Velikost | Size 1 px.

35

Tím máme tlačítka – v jejich základním stavu – hotová:

36

13 ›

Kniha »

Část druhá »


37

Ikonky nemusí být vždy složité, aby splnily svůj ůčel (tj. stylizace, grafické zjednodušení určité akce nebo předmětu). Nyní si ukážeme jeden z těch nejjednodušších způsobů, jak vytvořit efektní ikonky bez větší námahy. Představte si čtverečkovaný papír. Do určitých kolonek nakreslíte vyplněné kruhy, ty potom funkcí spojíte tak, aby se kruhy blízko u sebe trochu napojily a vytvořily tak spojený tvar. A to je celé! Jenže umisťování takových kruhů do sítě je náročné (časově), takže je lepší mít nějaký náčrtek či vzor, podle kterého budeme umisťovat. A tento náčrtek nebude nic jiného než pixelový obrázek ikonek. Dost bylo slov, přejděme rovnou ke kreslení.

38

Vytvoříme novou vrstvu, kterou vyplníme bílou barvou a začneme do ní černou tužkou velikosti 1 px kreslit ikonky. Jedná se o ikonky:

(1) zpět, (2) info, (3) vpřed, (4) posun dolů, (5) zvuky zapnuty, (6) zvuky vypnuty, (7) posun nahoru, (8)

1

2

3

4

5

6

7

8

nápověda. Snažte se kreslit ikonky co nejmenší, ale tak, aby byly stále čitelné. Chcete-li, nejprve si nakreslete pomocné čtverečky, ať mají všechny ikonky podobnou velikost (na obrázku jsou šedé čtverečky velikosti 7 × 6 px). TIP! – přepnout zobrazení tužky (čtvereček / zaměřovač), lze klávesou (Caps_Lock) Snažte se experimentovat a zkoušet různé tvary.

39

40

‹ 14

Jako ikonky by to šlo, ale jakmile aplikujeme efekt spojení sousedních pixelů, nebude výsledek nějak zvláštní. Proč? Efekt se nejlépe projeví když jsou pixely spojeny pouze v rozích (1), ne když jsou hned vedle sebe (2). Takže se jde odmazávat a upravovat tak, aby bylo těch přímých napojení co možné nejméně. U šipek to znamená odmazat zbytečné výplně, u písmene „i“ je to něco na způsob kurzívy a reproduktor (poznali jste, že to je reproduktor?) je ještě o pár pixelů menší. Teď to je ono!

2 1

Kniha »

1 2

Část druhá »


Zatím máme hotové pouze náčrtky. Teď podle nich umístíme (nakreslíme) velké verze ikonek. Řekněme, že chceme mít jednotlivé „tečky“ velké 7 × 7 px, s tím, že mezi nimi bude vždy 1 px mezera (pro znásobení účinku efektu). Abychom se přesně strefili, nastavíme si mřížku. Nejprve zapneme její zobrazení – Zobrazení › Zobrazovat › Mřížku | View › Show › Grid, (Ctrl) + ("). Poté nastavíme její velikost v přednastavení programu – (Ctrl) + (K), záložce Vodítka, mřížka a řezy... | Guides, Grid... Vlastnost Čáry mřížky po | Gridline every nastavte na 80 px a Dělení | Subdivisions na 10. Tím bude mřížka každých 8 px.

41

Zvolíme nástroj Zaoblený obdélník | Rounded Rectangle Tool (U), kterému nastavíme Poloměr | Radius na 5 px a velikost 7 x 7 px. Tím budeme kreslit vlastně kruh, ale kdybychom zvolili nástroj kruh, tak by se nepřichytával na mřížku (což u tohoto nástroje lze nastavit zde – (1)). Pokud si myslíte, že se hned napoprvé strefíte, zvolte pro tentokrát přímé vyplňování pixelů (2), vytvořte novou vrstvu a začněte kreslit, resp. umisťovat jednotlivé tečky podle pixelové předlohy. Výsledek by mohl vypadat například takto (na barvě moc nezáleží):

42

43

15 ›

Kniha »

44

Část druhá »


Konečně se dopracováváme k efektu. Pro lepší náhled si pod aktuální vrstvou vytvořte novou, vyplněnou bílou barvou – ať jsou ikonky dobře vidět. Načtěte výběr vrstvy s ikonkami ((Ctrl) + klik na vrstvu) a vrstvu zneviditelněte. Následně se klávesou (Q) přepněte do režimu rychlé masky. Pamatujete si na něj ještě? V tomto režimu pracujete s výběrem stejně jako kdyby se jednalo o obrázek. To znamená, že jej můžete mazat, kreslit, aplikovat na něj efekty, cokoliv... My začneme tím, že nastavíme zobrazení – dvakrát klikněte na ikonku režimu rychlé masky (1), nastavte libovolnou barvu, ale především krytí na 100%.

45

Teď už můžeme s výběrem dělat psí kusy. To znamená – rozostřit filtrem Filtr › Rozostření › Gaussovské | Filter › Blur › Gaussian Blur. Hodnotu zadejte tak, aby se body slily dohromady, ale aby byl zároveň vidět alespoň trochu tvar.

46

Výsledek zbývá „doostřit“ – funkcí Obraz › Přizpůsobení › Úrovně | Image › Adjustments › Levels, (Ctrl) + (L). V této funkci nastavujeme úroveň nejtmavšího (1), středního (2) a nejsvětlejšího (3) tónu. Nejprve posuneme černý posuvník směrem doprava, až někam na úroveň 180. Jak vidíte, výsledek je ten, že vnitřní část ikonek je nyní tmavší. Světlý posuvník posuneme směrem doleva, např. na hodnotu 210, tím „odsekneme“ poloprůhledné pixely a kraj ikonek dostane jasně definovaný obrys. Žádné rozostřené pixely, jen pěkně slité tečky.

‹ 16

1

1 23

Kniha »

Část druhá »


Proč ale zrovna hodnoty 180 a 210? Nešly by i jiné? Šly!

47

Důležité je, aby byly tyto dva posuvníky blízko u sebe – tím zredukujeme rozostření. Tak blízko, aby u rovných hran byl přechod hrana/pozadí stoprocentní. Tj. aby hrana končila 100% neprůhledným pixelem. To jak budou oba posuvníky vpravo nebo vlevo, tím akorát vybíráme, které pixely z původního obrázku použít. Čím víc jsou oba posuvníky vlevo (1), tím je tvar menší, protože pracujeme s původními tmavšími pixely. Naopak, čím je víc vpravo (2), tím je tvar větší.

1

2

1

2

Nastavte hodnoty, které se vám líbí nejvíc a potvrďte (já jsem nakonec zvolil kompromis a zadal 210 a 234). Přepněte se klávesou (Q) zpět do normálního režimu, skryjte bílou pomocnou vrstvu a novou vrstvu vyplňte barvou RGB(140, 209, 193). Výběr odznačte (Ctrl) + (D).

48

Jednotlivé ikonky umístíme do zvlášť vrstev – vždy označte nástrojem výběr (M) jednu ikonku po druhé a zkratkou (Ctrl) + (Shift) + (J) ji vyjmutím zkopírujete do nové vrstvy vyjmutím (druhá možnost k funkci (Ctrl) + (J) – nová vrstva kopírováním). Tyto dvě funkce jsou přístupné i v kontextovém menu vrstvy (1) a (2). Nakonec jednotlivé ikonky posuňte tak, aby byly správně zarovnané (vrstvy vybírejte (Ctrl) + klik).

49

17 ›

Kniha »

50

Část druhá »


Už máte dost té zelené všude okolo? Nevadí, protože právě teď přidáme barvy další. Nasimulujeme totiž, jak bude vypadat stisknuté tlačítko! A aby se odlišilo pořádně, dáme mu nějakou pořádnou barvu... třeba... bílou. Ta se hodí ke všemu, je krásně výrazná a dá nám mnoho prostoru pro jinak barevnou ikonku. Řekl bych vám, proč nevybereme barvu, která se hodí jen k zelené, ale – nechte se překvapit!

51

Označíme tlačítko, u kterého chceme simulovat over stav, nástrojem výběr (M), vybereme příslušnou vrstvu (1) a tuto část zkopírujeme do nové vrstvy (2) zkratkou (Ctrl) + (J). Zapneme zachování průhlednosti buď (/) nebo (3) a vrstvu vyplníme velmi světlou šedou RGB(230, 230, 230) (je to proto, že na úplně bílé by se ztratily efekty). Jenže ouha, vrstva se vyplnila jen v místech, kde nejsou žádné efekty. Takže vyvolejte dialog efekty vrstvy a jde se měnit!

52

3 2 1

Barvu efektu Satén | Satin změňte na RGB(242, 242, 242), efekt Vnitřní stín | Inner Shadow na Násobit | Multiply, 100% a barvu RGB(228, 228, 228). Vržený stín | Drop Shadow změňte na bílou barvu, Vnější záře | Outer Glow na černou a krytí na 58 %. Jak jste si jistě všimli, už nemáme v efektech vrstvy žádný odstín zelené, a tak půjde vrstva použít na libovolném pozadí. Ale nebudeme předbíhat.

53

Raději se budeme věnovat té ošklivé zelené ikonce, které by určitě slušela jiná barva. Třeba oranžová? Zkopírujte vrstvu ikonky – (Ctrl) + (J) a přebarvěte ji na oranžovou RGB(255, 169, 3). Obě vrstvy – zkopírovanou vrstvu ikonky i tlačítko v over stavu přesuňte úplně nahoru (1).

‹ 18

1

Kniha »

Část druhá »


Zdá se vám, že už jen stále dokola opakujeme stejné věci? Nebojte, hned to změníme a ukážeme si další funkci – jak rychle rozšířit oranžovou ikonku o jeden pixel – aby byla při over stavu větší a tedy i výraznější. Slouží k tomu funkce Filtr › Jiné › Minimum | Filter › Other › Minimum (před jejím aplikováním nezapomeňte vrstvě vypnout zachování průhlednosti (/)). Tato funkce má stejný výsledek jako kdybyste kolem každého tmavého bodu nakreslili tento bod znovu – parametr Poloměr | Radius určuje, jak velký. Nám úplně postačí hodnota 1. Opakem k této funkci je funkce Maximum | Maximum, která naopak rozšiřuje světlé body. Zbývá nám ještě trochu místa, takže si ukážeme ještě jeden malý trik. Jedná se o efekt odrazu na lesklé ploše. Takový, jako když položíte věc na zrcátko. Odraz potom není nic jiného, než převrácená vrstva, která postupně slábne. Tak teď nevím, jestli má vůbec cenu vám to ještě víc rozepisovat, vždyť tohle už přeci musíte zvládat levou zadní... Vrstvu zkopírujte (Ctrl) + (J), převraťte – Úpravy › Transformovat › Převrátit svisle | Edit › Transform › Flip Vertical a posuňte tak, aby byla přesně vespod zarovnaná s vrstvou minulou.

1

2

Vrstvě přidejte masku (1). Do této masky nakreslete nástrojem Nástroj přechod | Gradient Tool přechod z černé do bílé, jak ukazuje obrázek (2). Jen, prosím, tento efekt nepoužívejte všude...

54

55 56 57 58

19 ›

Kniha »

Část druhá »

Projekt 03 » Logo

Logo Text v bublině – tak bude vypadat náš nápis (chcete-li logo) „infosis“. Aby to nebylo jen pouhé přidání textové vrstvy a aplikování efektů vrstvy, ukážeme si další možnosti, jak pracovat s textem. Minule jsme zkoušeli převést text do křivek – ovšem tak, že jsme nejprve vytvořili výběr a křivky jsme nechali vytvořit z tohoto výběru. Pro naše účely to bylo skvělé – protože došlo k deformacím které jsme chtěli. Teď ale naopak chceme, aby vytvořené křivky přesně odpovídaly původnímu tvaru – a co víc – my ještě chceme, aby vertikální a horizontální čáry byly perfektně vyhlazené. Ale nebudeme předbíhat, pojďme si ukázat jedno po druhém.

1

Začneme vektorovým obdélníkem se zakulacenými rohy (U), barvy šedé – RGB(234, 234, 234). Poloměr zakulacení tentokrát nastavte opravdu velký – cca 15–20 px. TIP! – během kreslení můžete s vrstvou posouvat klávesou (_mezerník_)

2

Bublině přidáme šipku (zobáček). Nástrojem výběr cesty (A) vybereme masku a poté nástrojem Pero | Pen tool (P) přidáme tři body, jak ukazuje obrázek vpravo (stačí pouze kliknout v místech (1), (2) a (3)). Pro lepší názornost je spodní zelená vrstva na následujících ukázkách zneviditelněna.

3

Prostřední bod označíme (nástrojem výběr bodu – (A)) a posuneme směrem dolů – myší nebo (¼). Ale – my nechceme kulatý roh, nýbrž hranatý. Co s tím? Musíme body překonvertovat!

4

Nástrojem Změnit bod | Convert Point Tool. S ním postupně na všechny tři body kliknout a ty se automaticky převedou na rohové. Kdybychom chtěli naopak z těchto bodů udělat zpět kulaté, musíme kliknout a táhnout. To si ale ještě ukážeme později.

‹ 20

1

2

3

Kniha »

Část druhá »

Projekt 03 » Logo

Vrstvu malinko zdeformujeme – aby dostala trochu akční ráz a nebyla tak nudná. Zvolte transformaci (Ctrl) + (T) a za jednotlivé rohy tahejte společně se stisknutou klávesou (Ctrl). Co se stane? Je to stejné, jako kdybyste zvolili transformaci typu Deformovat | Distort – měníte perspektivu posouváním jednotlivých rohů.

5

Na konci našeho snažení by vrstva mohla vypadat stejně jako na druhém obrázku vlevo – zas to s tou deformací nepřehánějte, ať uvnitř zbyde dost místa na text. Zelené podkladové vrstvy už můžeme zviditelnit. Přidáme efekty. Ohraničíme tvar efektem Vytažení | Stroke – 3 px, barvy šedé RGB(101, 93, 76). Přidáme odlesk efektem Překrytí přechodem | Gradient Overlay z bílé do průhledné (tak, aby bílá byla dole a průhledná nahoře). A vše dokončíme slabým efektem Vnitřní stín | Inner Shadow. U něj nastavíme barvu na šedou RGB(146, 146, 146), Úhel | Angle -90°, Vzdálenost | Distance 7 px, Rozsah | Choke 100 % (aby byl efekt tvrdý, bez prolnutí), Velikost | Size 10 px. Efekt poté stáhneme na přijatelných 14 %. Základ máme hotov.

6

Dávali jste pozor, když jsme minule vybírali pro projekt ten správný font? Potom pro vás jistě nebude problém najít ten nejlepší ani teď. Dejme tomu, že chceme něco jednoduchého, kulatého, aby se to hodilo k ikonkám... a přesně takový je například font Airstrip Four. Ke stáhnutí jak jinak, než na www.dafont.com. Barva textu je z ikonky – RGB(255, 168, 0).

7

21 ›

Kniha »

8

9

10

Část druhá »

Projekt 03 » Logo

Textovou vrstvu ale zvládne udělat úplně každý. Buďme něčím výjimeční, třeba jen tím, že jedno písmeno trochu posuneme, zdeformujeme, otočíme... Co říkáte? K tomu je nutné nejprve převést vrstvu do křivek – funkcí Vrstva › Textová vrstva › Převést na tvary | Layer › Type › Convert To Shape. Jak je vidět na obrázku (1), z vrstvy se vytvoří nová vrstva výplně s barvou původní textové vrstvy (2) a s vektorovou maskou (3). Pokud bylo v textu použito více barev, tato informace se ztratí – bohužel. Po překonvertování můžeme s vrstvou pracovat jako s normální vektorovou vrstvou. Začneme třeba tím, že nástrojem pro výběr cesty (A) vybereme druhé písmeno „i“ a převrátíme jej – Úpravy › Transformovat › Převrátit svisle | Edit › Transform Path › Flip Vertical. Poté posuneme toto písmeno – resp. teď už jen vektorový tvar – na úroveň ostatních písmen (klávesou (¼)), viz obr. (1).

Vybereme tečku nad tímto písmenem a posuneme ji úplně bokem – až za poslední písmeno „s“. K tomu už nemůžeme použít nástroj pro výběr cesty, ale pro výběr jednotlivých bodů (opět se skrývá pod písmenem (A), ovšem je to ta bílá šipka (1)). TIP! – mezi těmito dvěma nástroji lze rychle přepínat stiskem klávesy (Ctrl) Tečku označte a posuňte stejně, jak ukazuje obrázek vpravo. Pokud se vám ji stále nedaří vybrat, skryje ostatní vektorové vrstvy v dokumentu!

‹ 22

1

2

3

1

1

Kniha »

Část druhá »

Projekt 03 » Logo

Vrstvě přidáme tolik efektů, kolik jen bude možné.

1

11

Nejprve Vytažení | Stroke, 2 px, barva RGB(101, 93, 76). Dále Překrytí přechodem | Gradient Overlay (1), z bílé do průhledné (bílá nahoře), nastavený na 59 %. Pokračujeme efektem Satén | Satin

(2), který v barvě písma s parametry

2

Vzdálenost | Distance 3 px, Velikost | Size 6 px, Úhel | Angle 19° přechod trochu skryje.

Dále efekt Vnitřní záře | Inner Glow

(3) nastavený na barvu RGB(255,

3

4

5

1

2 3

255, 190), krytí 33 %, Velikost | Size 1 px, Vyseknutí | Choke 100 %. Ten přidá pěkný nenápadný jednopixelový vnitřní obrys. Ten pravý 3D efekt obstará Vnitřní stín | Inner Shadow (4), barvy bílé, nastavený na Závoj | Screen, 55 %, Vzdálenost | Distance 5 px, Vyseknutí | Choke na 0, stejně jako Velikost | Size. A tím správným zakončením bude Vržený stín | Drop Shadow (5) barvy šedé RGB(160, 160, 160), 17 % krytí, Úhel | Angle 90°, Vzdálenost | Distance 14 px, Velikost | Size 10 px. Ještě že máme efekty vrstev... Tím ale zdaleka nekončíme. Podívejte se na zvětšenou ukázku. Chtěli jsme dvoupixelový šedý obrys, asi takový, jaký je vidět na písmenu f – (1), pěkný, jasně definovaný a hlavně opravdu jen dva pixely široký. To, co je na ostatních písmenech se pěkným obrysem nazývat nedá. Rozmazané okraje zasahující do tří pixelů (2), nebo jen do jednoho a půl (3)... Co s tím? A proč to tak vůbec je?

12

23 ›

Kniha »

13

Část druhá »

Projekt 03 » Logo

Odpověď je snadná a jasná – je to tím, že už hrany v textové vrstvě nebyly přesně vyhlazené. Jen se podívejte na obrázek, vpravo který ukazuje vrstvu se skrytými efekty. Což mimochodem taky udělejte, pro další kroky to bude nezbytné – stačí kliknout na oko u efektů (1). Jak vidíte na obrázku, hrana končí 100% neprůhledným pixelem pouze u písmene „f“, a to jen na (2). Jinde je to děs a hrůza.

2 1

Vyhlazení vertikálních a horizontálních hran: Photoshop bohužel nemyslí na to, aby hrany končily 100% neprůhledným pixelem. U textu sice nabízí vyhlazení typu Nejostřejší | Sharp, které se snaží poloprůhledné pixely na hranách redukovat, výsledek není ale nikdy stoprocentní. Musíme si tedy pomoci sami. poznámka

A proč vůbec? Obzvlášť u menších velikostí písma (ale i u těch větších) dosáhnete touto technikou ostře vypadajícího nápisu a efekty budou mít opravdu jen X pixelů. S poloprůhlednými pixely vypadají hrany rozmazaně, neurčitě a ošklivě.

14

Při našich úpravách využijeme toho, že vrstva je stále reprezentována vektorovou maskou, a posuneme její kraje tak, aby byly přesně na pixel zarovnány. K tomu potřebujeme mřížku, kterou nastavíme na každý pixel – dialog vyvoláme (Ctrl) + (K) a poté např. Čáry mřížky po | Gridline every 10 px a Dělení | Subdivisions 10. Barvu nastavíme na nějakou méně výraznou, například šedou. Mřížku hned zobrazíme – (Ctrl) + (“).

15

Protože budeme vybírat jednotlivé body vektorového tvaru, je dobré si v dokumentu zneviditelnit všechny ostatní vektorové vrstvy (Photoshop je jinak automaticky vybírá). Místo bubliny (1) si zatím vytvořte třeba normální šedou vrstvu (2)...

‹ 24

1

2

Kniha »

5 2

1

4 3 1

3

4

2

Část druhá »

Projekt 03 » Logo

Dokument zvětšete alespoň na 1200 % (Ctrl) + (+), vyberte nástroj pro výběr bodů (A) a jde se posouvat! Začneme např. písmenem „i“. Body (1) a (2) jsou jen těsně nad pixelem, takže je posuneme směrem dolů. Bod (3) má nejblíže k pravému spodnímu pixelu. A bod (4) je tak napůl, kam s ním? Musíme brát ohled i na ostatní – v tomto případě na bod (5), a proto bod (4) posuneme doleva. Vidíte ten rozdíl?

16

Stejným způsobem pokračujte se všemi ostatními body. Při posouvání si dejte pozor i na ostatní písmena, tj. aby nahoře (1) i dole (2) byly na stejné pozici, stejně tak například body (3) a (4) by měly být správně zarovnány. Chcete-li, vytvořte si pomocnou vrstvu s šířkou stopky písmene a potom podle ní písmena upravujte. Není to ale nutné, o pixel širší nebo užší tloušťka písmene není v této velikosti poznat a ničemu nevadí.

17

Nakonec zviditelněte efekty vrstvy, vrstvu s bublinou, skryjte (nebo smažte) pomocnou šedou vrstvu a logo máme hotové. Obrys je nyní jasný, čistý, bez zbytečných nedostatků. Možná vám to připadá jako maličkost které, si stejně nikdo nevšimne, ale právě tyto maličkosti odlišují profesionála od amatéra. Tak na ně nezapomínejte.

18

25 ›

Kniha »

Část druhá »

Projekt 03 » Barevné variace

Barevné variace Pozadí, lištu, tlačítka, ikonky, logo – to vše máme hotové. Co když se ale ostatním nebude líbit naše zelená? Třeba by chtěli jinou? Modrou? Šedou? Není nic jednoduššího, než udělat několik barevných variant – ať si vyberou! Zákazník se vždy cítí líp, když má z čeho vybírat. Připadá mu pak, že je to podle něj a ne podle vás. A krom toho – takové přebarvení není ani moc namáhavé. Jde jen o to, kterou z možností vybrat...

1

Pro následující kroky si musíme udělat malinko pořádek ve vrstvách. Chceme přebarvovat jenom zelené vrstvy, takže vrstvy s pozadím necháme vzadu (1). Naopak nechceme přebarvovat naše bílé tlačítko s oranžovou ikonkou (2) a ani logo s bublinou (3). Tyto vrstvy přesuneme nahoru. Vrstvy barevných úprav budeme vkládat mezi – (4).

3 2

Vložení nové vrstvy úprav provedeme vždy kliknutím na tlačítko (5). Tím vznikne nová vrstva, která půjde kdykoliv zneviditelnit, upravit nebo smazat (což by nešlo pokud bychom použili odpovající funkce z menu Obraz › Přizpůsobení | Image › Adjustments).

2

‹ 26

Hned jako první se nám nabízí funkce Odstín a sytost | Hue/ Saturation. Tažením H-Odstín | Hue, posouváme barevné spektrum. Nahoře (1) je staré, dole (2) nové. Jak vidíte na obrázku, posuneme posuvník doprava, takže v místě, kde byla zelená (3) je nyní modrá, a proto i zelené pozadí je nyní modré. Jenže ne úplně, posunutí odstínu vše nevyřeší, a tak třeba proužek v liště (4) je stále zelený. Nebo tak alespoň stále vypadá. Posunujte odstín jak chcete, k oranžové z loga se stejně nikdy nedostanete... A nejenom k oranžové, tato funkce nepřináší bohužel moc dobré výsledky.

4 1

5

4

1 2

3

Kniha »

Část druhá »


K čemu lze ale této funkce dobře využít je odbarvení – převodu do šedé. Stačí stáhnout S-Sytost | Saturation na -100 a poté vhodně upravit L-Světlost | Lightness, aby nebyl výsledek moc tmavý nebo moc světlý. Bohužel – posouváním se ztrácí kontrast, takže zázraky nečekejte. Chcete-li, nastavte S-Sytost | Saturation trochu méně, např. na -95, obrázek pak bude mít opravdu nepatrný nádech barvy – tu určíte posuvníkem H-Odstín | Hue.

3

Víc z funkce nedostaneme, takže potvrdíme (_OK_), zneviditelníme, a jdeme na další. Další funkce je Mapovat na přechod | Gradient Map. Ta nejprve převede obrázek do stupní šedi a poté tyto pixely namapuje podle zadaného přechodu. Výsledek velmi záleží na tom, jak vypadal obrázek po převodu do šedé a zároveň to znamená, že se hodně informací ztratí. Přesto to není tak tragické a funkce jde občas pěkně použít.

4

První ukázka je prostý přechod z jedné barvy do druhé s přidanou třetí barvou uprostřed – RGB(154, 149, 181). Ta jasně definuje barvu ve středních tónech, a tím i barvu celého pozadí.

Na druhé ukázce je přechod z černé do bílé (pro zachování kontrastu v nejtmavších a nejsvětlejších oblastech), přičemž do tmavších míst je přidána modrá RGB(108, 180, 193) a do světlých míst žlutozelená RGB(237, 238, 177).

27 ›

Kniha »

5

Část druhá »


Další je Vyvážení barev | Color balance. Tato funkce umožňuje měnit vyvážení barev ve stínech, středních tónech a světlech vždy pomocí tří posuvníků (které, vůbec ne náhodou, reprezentují jednotlivé kanály). Zkusme nejprve změnit barvu pozadí na modrou. To znamená jednak přidat trochu modré – posuvník (1) posunout doleva a také ubrat žlutou – posuvník (2) posunout doprava. Všimněte si, že ačkoliv pracujeme pouze ve středních tónech (3), výsledek už vypadá použitelně, co víc, vypadá líp než změna ostínu na minulé stránce.

1

2 3

6

Vyvážení barev | Color Balance ale nejlépe vynikne na obrázku, který má přibližně stejné zastoupení světlých, středních i tmavých tónu. To bohužel není náš případ – my máme pozadí tak nějak celé šedé... Proto bude lepší si funkci zapamatovat a jít na další. Jistě ji použijete později u některého z vašich projektů.

7

Pokračujeme vrstvou úprav Míchání kanálů | Channel Mixer (nezapomínejte minulé vrstvy úprav vždy zneviditelnit!). Tato funkce dovoluje různě mixovat jednotlivé kanály – jednotlivé barevné složky obrázku. Než s ní začneme pracovat, podíváme se, jak vůbec naše kanály vypadají. Zvolte paletku Kanály | Channels a klikněte na některý z kanálů. Hned v hlavním oknu vidíte jeho obsah. V barevném modelu RGB (ve kterém pracujeme) je ale dost těžké představit si jednotlivé barvy podle kanálů, v tom je model CMYK o hodně lepší. My si ale nějak pomůžeme. Zpět do normálního zobrazení všech kanálů se dostaneme kliknutím na kanál RGB (1). Přidáme onu vrstvu úprav Míchání kanálů | Channel Mixer. A jde se mixovat!

‹ 28

1

Kniha »

1

1 2

4

3

5 6

Část druhá »


To nejjednodušší mixování je převod do odstínů šedi – kliknutím na Monochromatický | Monochrome. Vidíte, že výsledný kanál je jen jeden – Stupně šedi | Gray (1), a posuvníky určujete poměr jednotlivých kanálů. Dejme tomu, že se nám líbil kanál G-Zelená | Green. Stačí jeho posuvník dát na 100 % a ostatní na 0 %. Moc tmavé? Přidáme třeba ještě 20 % z modrého kanálu. Chápete ten princip?

8

Tak si to teď představte v barvě – minulou vrstvu úprav zneviditelněte a přidejte další. Standardně je v každém výstupním kanálu 100 % odpovídajícího kanálu. A my to teď změníme!

9

Řekněme že chceme vyzkoušet přebarvení na oranžovou. Podíváme se, jaké má oranžová barva hodnoty – cca RGB(255, 160, 0). To znamená nejvíc červené (Red), polovinu zelené (Green), skoro žádnou modrou (Blue). Proto první do červeného (1) kanálu přidáme všechny ostatní na 100 % (2), do zeleného (3) přidáme cca 60 % červeného (4), a v modrém (5) nechceme skoro nic, proto jej stáhneme na 80 % (6). Je to jen takový jednoduchý příklad, ne vždy to vyjde tak pěkně. Chce to neustále zkoušet. Hodně záleží na tom, jak jednotlivé kanály vypadají.

Zlehka jsme nakousli otázku přebarvování a barev. Možností přebarvení je – jak jste sami viděli – opravdu hodně. Je jen na vás, kterou si vyberete. Obecně platí, že kolik projektů, tolik postupů. Neexistuje nic obecného. Změna barev není jen změna odstínu a možná proto má Photoshop tolik nástrojů a funkcí.

10

U GUI je ale jedna obrovská výhoda. Můžete použít některý z předešlých postupů na rychlý náhled nových barev, poté vrstvu úprav odstranit a ručně obarvit všechny prvky a vrstvy. Je to namáhavé a pracné, ale je to jediný zaručený způsob, jak mít barvy přesně podle sebe.

29 ›

‹ 30

31 ›

Projekt 03 informační panel

Recommend Documents