Jihočeská Univerzita
Pedagogická fakulta
Katedra informatiky
WWW prezentace obce Jankov
Paint Shop Pro 6.0
Pracovní prostředí a základní techniky tvorby pro web
(Diplomová práce)
autor: Mgr. Radek Šafařík
vedoucí práce: PaedDr. Petr Pexa
konzultant: Michal Půda, Belleville.cz
práce registrována dne: 28. dubna 2000
Prohlášení:
Prohlašuji, že jsem diplomovou práci na téma WWW prezentace obce Jankov, PSP 6.0 – pracovní prostředí a základní techniky tvorby pro web vypracoval samostatně s použitím literatury uvedené v seznamu použité literatury.
V Českých Budějovicích dne 28. dubna 2000
………
1. ÚVOD...6
1.1. Web a grafika...7
1.2. O softwaru PSP 6.0...8
2. NEŽ ZAČNEME KRESLIT …...12
2.1. Obrázek na pracovní ploše – první malé vítězství...12
2.1.1. Nový dokument...12
2.1.1.1. Rozměry obrázku...13
2.1.1.2. Barva pozadí...13
2.1.1.3. Rozlišení (Resolution)...13
2.1.1.4. Hloubka barev (Color Depth)...14
2.1.2. Způsoby otevření obrázku...15
2.1.2.1. Open file...15
2.1.2.2. Browser...16
2.1.2.3. Drag-and-drop...16
2.1.2.4. Duplicate an Image...17
2.1.2.5. Uloupení obrázku...17
3. MŮŽEME ZAČÍT KRESLIT?...19
3.1. Kreslící nástroje...21
3.2. Společný znak...21
3.3. Konečně kreslíme...23
3.3.1. Kreslíme čáru...23
3.3.2. Kreslíme tvary I...25
3.3.3. Kreslíme tvary II...27
3.4. Kreslíme nadpisy I...28
3.5. Kreslíme nadpisy II...30
3.5.1. Nadpis opisující křivku...31
3.5.2. Nadpis opisující tvar...32
4. UKLÁDÁME SVÁ DÍLKA …...34
4.1. Standardní dialog Save as...34
4.2. Dialog Transparent Gif Saver...35
4.3. Dialog JPEG Saver...37
4.4. Dávková konverze (Batch Conversion)...37
5. VRSTVY...39
5.1. Vrstvy v PSP...39
5.2. Možnosti a omezení pro vrstvy...39
5.3. Prostředky pro práci s vrstvami...40
5.3.1. Paleta vrstev...40
5.3.2. Dialog Vlastnosti vrstvy...41
5.4. Kreslíme s vrstvami...42
5.4.1. Vylepšujeme 3D kouli...42
5.4.2. Vylepšujeme tlačítko...43
5.4.3. Vylepšujeme nadpisy...45
5.4.3.1. Chromovaný nadpis I...45
5.4.3.2. Chromovaný nadpis II...46
5.4.3.3. Neonový nadpis...47
6. TUBY OBRÁZKŮ...50
6.1. Co jsou tuby?...50
6.2. Kreslíme s tubou...50
6.2.1. Nastavení parametrů nástroje Picture Tube...51
6.2.2. Jak přidat novou tubu?...52
6.2.3. Tvorba a distribuce vlastních tub...53
7. PRAKTICKÁ ČÁST...55
8. ZÁVĚR...56
9. SEZNAM POUŽITÉ LITERATURY...57
10. Příloha...58
Anotace
Paint Shop Pro 6.0 – nový přírůstek firmy Jasc software, je program, který se jistě stane pro svoji kvalitu pomocníkem řady profesionálních tvůrců webdesignu, pro jednoduchost ovládání a rozšířené standardní funkce setrvá jako hlavní prostředek tvorby grafiky nejen pro web drobných uživatelů.
Velice často je v recenzích PSP srovnáván s produkty jiných firem, například s Adobe PhotoShop či COREL PhotoPaint 8, které jsou již profesionálními produkty. Z těchto recenzí vychází PSP s velice pozitivním hodnocením - pro koupi hovoří velice přijatelná cena při zachovaném vysokém komfortu pracovního prostředí.
1. Úvod
Internet. Slovo, které na nás útočí ze všech stran. Slovo, které ani pro běžného člověka není již pouhým prázdným seskupením osmi písmem. Je to médium, které pro svou rozpínavost hledalo inspiraci v nekonečnosti vesmíru a v pestrosti předčilo karneval v Rio de Janeiru.
Obchod, vzdělání, zábava – to vše (a vlastně ještě mnohem více) nám globální síť nabízí. Můžeme sedět v teple domova o bohatnout na burze, zároveň hovořit (mám na mysli chat) s přáteli, sledovat sportovní utkání, nakupovat….
Toto pohodlí jistě není zadarmo. V současné době ještě není zcela zřejmé, do jaké výše se cena za tento komfort vyšplhá. Pokusme se o pohled do budoucnosti – jakou cenu bude asi muset lidstvo zaplatit? Jak se změní způsob života lidí až internet zcela vytlačí ostatní media? Vždyť již dnes všeobecná vzdělanost a kultura prodělává recesi a zřejmě i v nejbližší budoucnosti se tento trend nezmění. Co teprve v momentě, kdy nebudeme muset ani na okamžik vstát od počítače? Jak by asi vypadalo lidstvo za několik desítek tisíc let, kdy už by byly viditelné výsledky evoluce?
Nohy nám budou moci zakrnět (samozřejmě ne všem – někdo ty objednané pizzy roznášet musí), zůstanou nám ruce přizpůsobené na klávesnici, hlava a smysly – vznikne nový lidský druh Homo Interneticus.
Paměť se zredukuje na minimum (vlastně ji vůbec potřebovat nebudeme) – vše si najdeme na internetu. Abychom nezapomněli, které stránky jsme již navštívili, máme bookmars! A co vzdělání? Nepotřebujeme ho. Ve školách bude k napsání seminární práce či referátu stačit najít, stáhnout a popřípadě přeložit vhodný text z webu a odeslat ho učiteli (mailem). Pokud ještě budeme nikoliv chodit, ale pouze mít nějakou práci, pak po zadání úkolu stačí odvětit (samozřejmě službou typu chat): moment šéfe, najdu si to na síti …!
Při této představě lidstva mě trochu mrazí v zádech, naštěstí jde pouze o náznak vytržený ze souvislostí, který nebere do úvahy mnoho faktorů,
dokonce možná popírá i základní přírodní zákony. Jde mi však hlavně o apel, abychom se nespoléhali pouze na internet, a aby si lidstvo uchovalo alespoň nějakou hodnotu všeobecné erudice.
1.1. Web a grafika
Spolu s rozkvětem služby www (dnes již největší složky internetu) šel vpřed i vývoj programů pro jeho tvorbu. Od html editorů po editory grafické. Má práce je zaměřená na tvorbu grafiky pro www, proto se dále budu věnovat pouze grafické stránce webu.
Přestože tyto grafické editory jsou neustále vylepšovány a na trh přichází stále nové a dokonalejší verze, na kvalitě webu je stejná tendence pozorovatelná jen s velikou námahou. Rozšíření internetu do všech úrovní života přinesla možnost tvorby www stránek i naprostým laikům. Na internetu tedy můžeme vidět spoustu osobních stránek nevelké kvality, stránek malých a středních firem až po stránky nadnárodních organizací, zaměstnávajících programátory a odborníky na webdesign. Posledně jmenované stránky však zabírají z celkového objemu webu velice malé procento, a proto lze říci, že kvalita webu je nízká.
Mým původním záměrem bylo napsat uživatelskou příručku pro grafický editor PSP firmy Jasc verze 6.0, ale s postupem času jsem zjistil, že tento záměr musím změnit. A to i přesto, že absence jakéhokoliv českého dokumentu o PSP je znát velice citelně. Vedly mě k tomu dva základní důvody.
Prvním důvodem byla jedna z předchozích myšlenek. Kvalita webu (stále mám na mysli stránku grafickou), zejména českého, je velice nízká a uživatelskou příručkou bych tuto kvalitu příliš neovlivnil. Proto se v mé práci, která by měla být jakýmsi návodem pro tvorbu jednoduché grafiky, budu věnovat pouze věcem, které jsou méně známé (ale velice potřebné), jako například práce s vrstvami, a dále věcem, které nebyly v předchozích verzích tohoto editoru. Má práce by měla přivést uživatele tohoto programu k efektivitě, pomoci mu objevit nové možnosti (a těch má PSP nekonečně
mnoho). Pak by měla veškerá grafika vycházející z jeho rukou být kvalitativně alespoň o jednu úroveň výš.
Druhým důvodem byla má nepříliš dobrá zkušenost s uživatelskými příručkami na jiný software. Ty příručky, které mi prošly rukama, obsahovaly vesměs nudný popis jednotlivých položek menu doplněných pouze o printscreen rozbalovací nabídky jejich vlastností. Žádný popis činnosti, žádná ukázka konkrétního využití. Této skutečnosti bych se rád v mé práci vyvaroval.
1.2. O softwaru PSP 6.0
Přestože si myslím, že následujícími řádky naplňuji známou myšlenku o nošení dříví do lesa, plním tím alespoň informační povinnost.
Nová verze známého a osvědčeného grafického editoru je cenově dostupný shareware (lze ho objednat, vyzkoušet, vrátit…), jehož pracovní
prostředí se od minulé verze příliš nezměnilo (přibyly pouze ikonky do
obrázek č. 1 : Pracovní plocha PSP.
hlavního menu). To však není kritika – ovládání je velice přehledné, intuitivní. Nehledě na to, že minimum změn uvítají stávající uživatelé PSP.
Oproti minulé verzi přibyly možnosti nastavení kreslících nástrojů.
S tímto rozšířením může být spokojen i profesionál, nyní již zrealizujete i své nejneuvěřitelnější fantazie. Jednotlivé kreslící nástroje se prolínají všemi kapitolami této práce, pokud se na detailní představení nějakého nástroje přeci jen nedostalo, uvádím ukázky práce a nastavení parametrů těchto nástrojů v příloze č.1.
Co však profesionál (především v oboru fotografie) nepřehlédne je fakt, že nedošlo k žádnému rozšíření doostřovacích filtrů. U těchto filtrů nelze ani libovolně měnit parametry (pouze Unsharp mask to dovoluje) a to je velké minus.
Zajímavou novinkou je funkce Tisk více obrázků (Print Multiple Images). Opět přínos především pro fotografy spočívá v úspoře místa a
času. Princip je jednoduchý : stačí otevřít v PSP více obrázků a zvolit
obrázek č. 2: Tisk více obrázků.
zmíněnou položku z menu. Pak jen zvolíte pořadí, velikost a umístění obrázků na stránce. Užití je zřejmé. Tisk čtyř obrázků v pohlednicovém formátu na drahý lesklý papír je typický příklad. Základním předpokladem pro tuto funkci je však nainstalovaná tiskárna.
Nová verze PSP obsahuje i vylepšení dialogu pro ukládání obrázků do základních formátů používaných na webu. Jde o ukládání ve formátu „gif“ a
„jpg“. Umístění této funkce však nenaleznete pod funkcí save či save as, ale trochu nelogicky v položce export menu file. Editor PSP podporuje kromě výše jmenovaných nepřeberné množství formátů, až se i odborník pozastaví nad tím, kolik jich vlastně existuje a k čemu slouží. Protože volba formátu a jeho vlastností ovlivňuje podstatně výslednou kvalitu grafiky, věnuji formátům a ukládání obrázků v PSP samostatnou kapitolu.
Na závěr této minirecenze bych ještě upozornil na dvě velice užitečné funkce, které přešly do nové verze beze změny. První z nich úzce souvisí s předchozím odstavcem – jde o funkci Dávková Konverze (Batch Conversion), s jejíž pomocí převedete celý adresář obrázků např. ve formátu gif na jpg během několika sekund. Detailně tuto funkci popíši v kapitole o ukládání obrázků.
Druhou funkcí je funkce Prohlížeč (Browser). Tato funkce otevře dialog, kde vám v levé části zobrazí položky adresáře v podobě stromu, v pravé pak náhledy jednotlivých obrázků. Supluje tak nutnost instalace podpůrného software (typu ACDSee) a šetří čas přepínání mezi aplikacemi. Funkce Browser je vytížená zejména tehdy, máte-li v adresáři mnoho obrázků podobných názvů a vy chcete otevřít ten jediný správný.
Na úplný závěr (tedy než začneme kreslit) bych velice rád odcitoval několik vět z jedné recenze, se kterými nelze než souhlasit : Paint Shop Pro 6.0 nepředstavuje zásadní průlom v historii produktů od JASC, nicméně jde o příjemnou evoluci. Pro fotografy se zájmem o digitalizaci klasických fotografií jde o jeden z nejvhodnějších produktů - obstojí při úpravách snímku, má velmi slušné možnosti pro tisk, příjemná je i možnost dávkové konverze. To vše za docela rozumnou cenu cca 100 dolarů, navíc je program shareware a každý si ho tedy může předem vyzkoušet. Ani nároky na PC nejsou nijak závratné. Celkové hodnocení je tedy jednoduché - v
absolutním měřítku je PSP 6 dobrý až velmi dobrý, v poměru výkon/cena je však bez debaty výborný.
2. Než začneme kreslit …
2.1. Obrázek na pracovní ploše – první malé vítězství
Abychom mohli využít nástrojů a funkcí PSP , musíme nejprve na pracovní plochu dostat nějaký obrázek. Toho můžeme docílit hned několika způsoby. Můžete vytvořit zcela nový obrázek, otevřít obrázek již existující nebo jej duplikovat. Dalšími možnostmi jsou „ukořistit“ (z anglického capture – přepadnout, ukořistit) obrázek jiné aplikaci – jde tedy obdobu funkce printscreen nebo obrázek načíst pomocí scanneru či digitálního fotoaparátu. Poslední technikou je drag-and-drop, čili chycení a přetažení souboru např. do pracovního okna PSP – způsob fungující, leč z minulého století. Možností je to mnoho, pojďme si je v krátkosti popsat.
2.1.1. Nový dokument
Následující sekvence činností : File > new (také klávesová zkratka Ctrl+N nebo jediný klik na ikonku
„new“) otevře dialog, který vidíte na obrázku. Nastavením parametrů a stiskem tlačítka „OK“ se otevře prázdné okno obrázku. Jaké hodnoty parametrů lze doporučit?
obrázek č. 3: Dialog New Image.
2.1.1.1. Rozměry obrázku
Velikost (Size) udává skutečné rozměry obrázku a to buď v palcích, pixelech nebo centimetrech. Velikost je lépe volit větší. Důvod? V průběhu práce na obrázku je velice často potřeba volný kousek místa například na vyzkoušení efektu, přebarvení písma atd…Velikost obrázku můžete totiž měnit kdykoliv a více způsoby. V menu file jsou položky Přidat okraje (Add Borders), Změnit velikost (Resize) , Vystříhnutí (Crop) a Velikost plátna (Canvas Size). Jde o tak jednoduché akce, že již po prvním vyzkoušení se stanou rutinní záležitostí a věnovat jim více řádek pozbývá významu.
Podotkl bych pouze, že se tyto akce používají tak často, že je z hlediska úspory času vhodné používat klávesových zkratek.
2.1.1.2. Barva pozadí
V rozbalovacím menu dialogu máte k dispozici několik možností nastavení. K dispozici jsou základní barvy modelu RGB a černá a bílá. Za zmínku stojí volba Průhledné pozadí (Transparent), při jehož zvolení se objeví plátno s bílými a šedivými čtverečky jako reprezentace průhlednosti.
Naopak zvolíte-li barvu popředí (Foreground Color) nebo barvu pozadí (Background Color), objeví se plátno zbarvené dle aktivních barev ve vaší paletě (Color Palette).
2.1.1.3. Rozlišení (Resolution)
Než zapíšete jakoukoliv hodnotu do příslušného políčka, je třeba míti na paměti, obzvláště pracujete-li s počítačovou grafikou, že existují tři základní druhy rozlišení. Rozlišení obrázku samotného, rozlišení monitoru, rozlišení tiskárny. Jsou to věci poměrně známé, přesto, pokud tápete a nemáte při ruce patřičnou literaturu, v nápovědě PSP v položce Je důležité vědět (Important Things to Know) najdete stručné a srozumitelné vysvětlení této problematiky (a to i pro méně vyspělého angličtináře).
Zpět k rozlišení obrázku. V editoru PSP tvoříme tzv. bitmapovou grafiku.
Znamená to, že každý obrázek je složen z pole malých, nedělitelných čtverců nazývaných pixely, uspořádaných do řad a sloupců. Pro každý pixel je uchovávána hodnota barvy a umístění. Jak jistě víte, rozlišení je číslo udávající počet pixelů na palec (zkratka ppi) nebo na centimetr. To, jakou hodnotu zvolit, záleží tedy na tom, k jakému účelu budoucí obrázek bude použit. Běžný obrázek, určený k publikování na webu, by měl mít rozlišení 72 ppi.
2.1.1.4. Hloubka barev (Color Depth)
Položka někdy též nazývaná bitová hloubka, udává počet barev, ve kterých může být pixel zobrazen. Např. při hloubce 1 bit může být vyobrazen pouze ve dvou barvách (černé a bílé), při hloubce 8 bitů ve 256 barvách a při 24-bitové hloubce dokonce v 16.7 milionu barev. Počet barev samozřejmě ovlivňuje výslednou velikost obrázku (paměťové nároky).
Doporučení pro nastavení hloubky barev je poměrně jednoznačné.
Nastavte vždy co nejvyšší. Mnoho efektů, deformací, filtrů a barevných přizpůsobování lze použít pouze na 24-bitové hloubce nebo na obrázku v odstínech šedi (Greyscale Image). Po ukončení práce na obrázku můžete použít funkci Snížit bitovou hloubku (Decrease Color Depth), kterou naleznete v menu Colors. Například gif, typický formát obrázků na webu, má 8-bitovou hloubku. Znamená to, že je schopen vyobrazit 256 barev. Pro uskutečnění výše uvedených transformací musíte alespoň dočasně užít opačnou funkci ze stejného menu – Zvýšit barevnou hloubku (Increase Color Depth).
2.1.2. Způsoby otevření obrázku
2.1.2.1. Open file
Existující obrázek otevřete opět několika způsoby. Klasické postupy:
v menu File > open, ikonka „open" na hlavním panelu a klávesová zkratka Ctrl+O. Otevře se dialog, vidíte ho na obrázku č.4, v němž si z patřičného adresáře vyberete „svůj“ obrázek. Správnost volby si ověříte zaškrtnutím políčka Náhled (Show Preview) v levém dolním rohu dialogu.
ubrázek č. 4: Dialog Open File.
2.1.2.2. Browser
K otevření obrázku lze užít pomůcku pro tyto účely vytvořenou - Prohlížeč (Browser). Viz kapitola O software PSP 6.0. Nejjednodušší cestou je dvojklik na náhled obrázku. Pokud potřebujete otevřít více obrázků najednou, označte si je pomocí klávesy Shift (nebo Ctrl) a stiskněte Enter.
Snad jako vše v PSP, i tato operace lze provést několika způsoby. Za zmínku jistě stojí fakt, že browser podporuje mnohé operace nad souborem.
Jaké? To vám prozradí pravý klik nad náhledem obrázku. Mimochodem, zkuste také pravý klik mimo náhled.
obrázek č. 5: Browser.
2.1.2.3. Drag-and-drop
K otevření obrázku vede i následující cesta. V jakémkoli manažeru (např.
Windows Commander) uchopte myší soubor a přetáhněte ho do pracovního okna PSP. Soubor se otevře v obrázek. Opět je možné i mnohonásobné otevření pomocí kláves Shift a Ctrl.
2.1.2.4. Duplicate an Image
Předposlední možností, jak otevřít obrázek, o které se zmíním, je užití funkce Duplicate v menu Window. Je třeba pamatovat na to, že obrázek musí být na pracovní ploše aktivní (vybrán), ať již v normálni či minimalizované podobě. Jde o nejbezpečnejší z cest kopírování obrázků, neboť pouze takto budete mít jistotu, že výsledná kopie obsahuje všechny vrstvy (Layers). Stejného výsledku dosáhnete i pravým klikem na záhlaví obrázku (Title Bar), kde si z příruční nabídky vyberete Kopírovat sloučeně (Copy Merged), opětovným pravým klikem vyberete Vložit jako nový obrázek (Paste as New Image).
Někdy však budete potřebovat zkopírovat pouze jedinou vrstvu. Pak postačí prosté Copy a Paste as New Image. K předchozím úkonům můžete samozřejmě použít funkce z menu Edit nebo ikonky „copy“ a „paste“ na hlavním panelu pracovního okna.
2.1.2.5. Uloupení obrázku
Dle názvu by se mohlo dát, že vás budu nabádat k nekalým věcem, ale k žádné skutečné loupeži nedojde. Využitím funkce Capture hlavního menu si svůj charakter rozhodně nezkazíte. Tato funkce v závislosti na vašem
nastavení provede nafocení plochy jiné aplikace a toto „foto“ otevře na
obrázek č. 6: Dialog Capture Setup.
pracovní ploše PSP. Funkce je dovedena do extrému – můžete ji použít aniž byste měli PSP spuštěn. Dialog nastavení funkce (Capture Setup) vidíte na obrázku č.6.
Můžete si zvolit jakou část plochy aplikace chcete nafotit (Capture), jak funkci budete aktivovat (Activate Capture Using) a ostatní možnosti (Options). Myslím si, že jde o volby velice intuitivní a i ta poslední nejasnost po prvním vyzkoušení zmizí (popř. je tu perfektně zpracovaná nápověda). Z hlediska grafiky je předností této funkce, že nemusíme nic kreslit, nemusíme to nakonec ani umět. Dodejme jen, že to ale musí umět
„olupovaná“ aplikace. Funkci Capture můžete totiž použít pouze na aplikace podporující OLE – Object Linking and Embedding.
3. Můžeme začít kreslit?
V podstatě ano, ale jednalo by se o pouhé experimentování, nikoliv o cílenou tvorbu. Navrhuji tedy ještě na okamžik setrvat v teoretické rovině.
Rád bych ještě upozornil na několik maličkostí, které je třeba míti na paměti, a které usnadňují práci.
Abychom se nezamotali do pojmů, předkládám ještě jednou pro oživení obrázek pracovního prostředí PSP (obr. č.7), tentokráte s popisem.
obrázek č. 7: Pracovní plocha PSP s popisem prostředků tvorby.
Jedna z mých dalších rad se týká stavového řádku (Status Bar). Ať už tvoříte svoji grafiku či pouze upravujete fotografie, je vhodné sledovat stavový řádek. Dozvíte se z něho nejen informace o obrázku (rozměry, počet barev a paměťové nároky), ale též informace o aktuálním dění na plátně. Například, používáte-li právě nástroj Výběr (Selection), objevuje se na stavovém řádku informace o pozicích krajních bodů (levý horní a pravý dolní) a velikost selekce. Obecně status bar popisuje polohu kurzoru na dokumentu (obrázku). Tyto údaje je vhodné si i zaznamenávat, neboť jsou základem přesné a bezchybné práce. Pokud chcete kupříkladu naprosto
přesně „rozstříhat“ fotografii, abyste její fragmenty vložili jako pozadí do buněk tabulky daných velikostí, je záznam těchto údajů nezbytností.
A ještě jedna rada. Možná jste si všimli, že při práci s obrázkem se v záhlaví za jeho jménem objevuje malý křížek. Jde o indikátor změny.
obrázek č. 8: Stavový řádek s údaji o selekci.
obrázek č. 9: Indikátor změn.
Pokud jste ukončili práci na obrázku, je dobré přesvědčit se, zda je tento indikátor přítomen. Pokud ano, provedli jste od posledního uložení obrázku ještě nějaké změny a je třeba operaci uložení zopakovat (o ukládání obrázků si povíme v jedné z následujících kapitol). Soubor v té době uložený na disku, přestože nese stejný název, reprezentuje jiný obrázek!
3.1. Kreslící nástroje
Pokud máte paletu kreslících nástrojů otevřenou, je zpočátku neaktivní.
Aktivuje se po otevření obrázku. Pokud ji otevřenou nemáte, musíte učinit toto : V hlavním menu klik na položku View > Toolbars. Nebo v panelu nástrojů PSP klikněte na ikonku Paleta nástrojů PSP (Tool Palette), kterou reprezentuje klíč. Též pravý klik na okraj pracovního okna vede k úspěchu.
Kreslící nástroje jsou všeobecně poměrně známé a rozdíly mezi jednotlivými grafickými editory jsou minimální. Snad každý uživatel přistupuje k nástrojům zpočátku intuitivně a postupně odhaluje jejich možnosti. V následujících řádcích se již nebudu věnovat základním operacím s nástroji, ale zaměřím se na nejvíce využívané věci (z hlediska publikování pro web) a na novinky.
3.2. Společný znak
Co mají kreslící nástroje v PSP 6.0 společného? Je to plovoucí nabídka vlastností (Tool Options). Ve většině případů obsahuje dvě karty, některé nástroje mají karty tři. Obsah těchto karet se pro jednotlivé nástroje příliš nemění. Popis této plovoucí nabídky provedu na nástroji zvaném Štětec (Paint Brush), jehož všechny tři karty vidíte na obrázku č.12. Obrázek
obrázek č. 10: Paleta kreslících nástrojů.
konkrétních nastavení parametrů štětce předkládám rovněž (obr. č.11).
Obrázky konkrétních nastavení ostatních nástrojů naleznete v příloze.
obrázek č. 11: Nástroj Paint Brush a jeho nastavení.
První karta obsahuje volby, které se týkají přímo štětce. Nastavujeme tvar (Shape), velikost (Size), tvrdost štětce (Hardness), průhlednost (Opacity), krok (Step) a hustotu (Density). Čtyři posledně jmenované parametry jsou udávány v procentech, velikost je udávána v pixelech.
Druhá karta nabízí velké množství textur. Tato technika by se dala popsat takto : představte si, že pod vaším pozadím je „schováno“ ještě jedno a to právě s takovou texturou, jakou jste si zvolili pro štětec. Při každém tahu či dotyku štětce plátna se toto druhé pozadí začne objevovat. Je to však iluze – kreslí opravdu váš štětec!
Třetí karta je naprosto shodná pro všechny nástroje. Můžete si vybrat typ kurzoru (já používám přesný kurzor – volba Use Precise Cursors) a nastavení tabletu, pokud ho používáte. Ten bohužel k dispozici nemám, nemám pro vás tudíž žádnou radu.
3.3. Konečně kreslíme
Položme si otázku, jaké objekty pro web potřebujeme nejčastěji pomocí nástrojů vytvořit. Především efektní nadpisy, horizontální čáry, tlačítka, podkladové obrázky pro animace atd. Jistě mi dáte za pravdu, že základy těchto objektů pomocí kreslících nástrojů snadno vytvoříme, ale pro úpravy do konečné podoby se neobejdeme bez vrstev (Layers). O nich si povíme v dalších kapitolách. Nyní tedy vytvořte nový obrázek o libovolné velikosti a s bílým pozadím. Pro další práci si připravíme základní objekty.
3.3.1. Kreslíme čáru
obrázek č. 12: Karty dialogu nástroje Paint Brush.
Dle zásad Komenského, začínáme od toho nejjednoduššího – od čáry.
V paletě kreslících nástrojů vyberte nástroj Tužka (Draw). Nastavte velikost a ostatní parametry na kartách tohoto nástroje dle kontextu vašeho html dokumentu (nezapomeňte na barvu) a nakreslete čáru potřebné délky.
Nezapomeňte, že levé a pravé tlačítko kreslí jinou barvou dle panelu aktivních barev. Zdaleka ne všechny možnosti můžete vidět na obrázku dole.
Musím ještě popsat vytváření stínů. Máte dvě základní možnosti, jak stín vytvořit.
První způsob vyžaduje precizní vybrání čáry nástrojem na selekci (nejlépe však nástrojem Kouzelná hůlka – Magic Wand). Dále následujte postup : Image > Effects > Drop Shadow. V dialogu nastavte parametry dle vašeho vkusu a uskutečňovaného záměru – výsledek nastavení si můžete ověřit v náhledovém okénku dialogu.
Druhý způsob je méně profesionální, ale vede také k dobrým výsledkům.
Nejprve nakreslete čáru, tu vyberte nástrojem na selekci a následujte postup:
Image > Blur > Blur more. Tento postup opakujte tak dlouho, dokud nebudete s výsledkem spokojeni. Pak ještě jednou nakreslete tutéž čáru, tentokráte posunutou o několik pixelů vertikálně i horizontálně (dle údajů na stavovém řádku).
Výsledky obou technik vidíte na obrázku nahoře. Rozdíl obou postupů není na první pohled patrný ale ve skutečnosti existuje. Spočívá v komfortu práce a především v počtu operací.
3.3.2. Kreslíme tvary I
obrázek č. 13: Kreslíme čáru.
Pokusme se nyní o jednoduchý prvek, který může být pouze doprovodnou grafikou, může však sloužit i jako tlačítko.
Vytvořte nový obrázek s libovolným pozadím. Zvolte si aktivní barvy a nástroj Tvary (Shapes). Nejprve nakreslete kružnici s vlastností Obrys (Stroked) – nezapomeňte zaškrtnout políčko Antialias (vyhlazování). K této kružnici přikreslete dva zaoblené obdélníky (Rounded Rectangle), tak, aby alespoň v jednom bodě pevně přiléhaly k vrchnímu a levému bočnímu krajnímu bodu. Nyní nástrojem Kyblík (Flood Fill) vyplňte prostor mezi kružnicí a obdélníky. Nepřesnosti vyretušujte nástrojem Štětec (Paint Brush) při náležitém zvětšení obrázku (v hlavním menu: View > Zoom in by …).
Nyní nástrojem Výběr (Selection), nastaveným na obdélníkový tvar, odstraňte zbytek kružnice a budete již téměř hotovi. Zbývá aplikovat dva efekty.
obrázek č. 14: Kreslíme tvary I – tlačítko.
Prvním je Vnitřní Úkos (Inner Bevel). Nejprve nástrojem Magická hůlka (Magic Wand) klepněte mimo obrazec na pozadí obrázku. Pak akcí počínající na hlavním menu : Selection > Invert vyberte skutečně a pouze objekt, který kreslíte. Nyní aplikujte efekt Inner Bevel z menu Image >
Effects. Na obrázku č.15 vidíte příklad nastavení parametrů.
Druhým efektem, který zbývá aplikovat je Stín (Drop Shadow).
Nastavení je otázkou vkusu a také závisí na kontextu www stránky. Akcí Image > Effects > Drop Shadow je práce na obrázku u konce.
K výsledku jsme se dobrali způsobem, který není nikterak ekonomický.
Sami uvidíte, že po vysvětlení práce s vrstvami se práce zjednodušší a výsledky budou graficky čistší a vyspělejší.
3.3.3. Kreslíme tvary II
obrázek č. 15: Dialog efektu Inner Bevel.
Pojďme nyní kreslit tvary a přesto nechat nástroj Tvar (Shape) nevyužitý.
Ke kreslení tentokráte užijeme nástroj Výběr (Selection) s nastavenými vlastnostmi Kruh (Circle) a Antialias. Výsledkem bude na pohled trojrozměrná koule s osvětlením.
Vytvořte nový obrázek s bílým pozadím a vyberte nástroj Shape s nastavením uvedeným výše. Vytvořte kruhový výběr libovolné velikosti.
Nyní použijte nástroj Kyblík (Flood Fill), jehož nastavení bude vypadat takto :
Postup a variace výsledného obrázku předkládám na obrázku č.17.
Vylepšení vaší 3D koule je opět možné, provedeme jej až v kapitole o vrstvách.
obrázek č. 16: Karty dialogu nástroje Flood Fill.
3.4. Kreslíme nadpisy I
Pro vytvoření efektního nadpisu použijte nástroj Text. Nastavte font a velikost písma dle situace na vašem www dokumentu, zvolte písmo tučné a nezapomeňte zaškrtnout volbu antialias. Písmo vytvořte jako Plovoucí (Floating).
Je na vás, jaké efekty budete na písmo aplikovat, nejčastěji užívané jsou Vnitřní úkos a Žaluzie – viz. obrázek č.19.
obrázek č. 17: Kreslíme tvary II nástrojem Selection a Flood Fill.
obrázek č. 18: Dialog Edit nástroje Flood Fill.
obrázek č. 19: Kreslíme nadpisy I – obecný nadpis.
Samotné nakreslení nadpisu je věc velice jednoduchá, zkusme ještě totéž pro jednotlivá písmena. Tentokráte použijeme nástroj Čára (Draw).
Na novém obrázku vytvarujte nástrojem Čára s parametry : Freehand Line, Antialias, Stroked a tloušťkou alespoň 10 pixelů písmeno jež potřebujete. V ukázce opět zůstávám u základních a osvědčených efektů – Vnitřní úkos, Stín a Žaluzie.
obrázek č. 20: Kreslíme nadpisy I – křivka doplněná o text.
3.5. Kreslíme nadpisy II
Někdy je vhodným doplňkem vašeho html dokumentu nadpis či obecný text, který je zakřiven, přesně opisuje křivku nebo těsně obtéká jiný objekt.
V této kapitole se naučíte, jak tohoto efektu docílit.
Základním předpokladem úspěchu je vytvořit oba objekty (text i obtékaný objekt) jako vektory. Využíváme zde faktu, že každý vektorový
objekt obsahuje tzv. Cestu (Path). Je to množina bodů, viditelná pouze při tvorbě objektu nebo v režimu Bodové editace (Node Edit), která tento objekt definuje. V této množině je dán První bod (Start), Poslední bod (Close) a je dán směr (Direction). Cesta může obsahovat jednu či více podmnožin zvanou Contour, která popisuje část objektu a obsahuje alespoň dva body (Nodes) spojené obecnou křivkou. Na základě těchto informací o objektu pak editor lehce provede sloučení objektů.
3.5.1. Nadpis opisující křivku
Tento způsob je nazýván Zarovnání textu na otevřenou cestu (Aligning Text on an Open Path). Otevřenou cestu (Open Path) mají objekty vytvořené nástrojem Draw (rovné čáry a neuzavřené křivky).
Způsob zarovnání textu ovlivňujete již při jeho tvorbě nástrojem Text – v dialogu Text Entry. Levé zarovnání se přichytí k počátečnímu bodu cesty obtékaného objektu, pravé zarovnání se přichytí ke koncovému bodu cesty a vycentrované zarovnání se přichytí k objektu tak, že vzdálenosti k počátečnímu i koncovému bodu cesty jsou od počátku i konce textu stejné.
Postup je takovýto : Vytvořte nový obrázek a nástrojem Draw nakreslete libovolnou čáru (např. Bezier Curve) jako vektor. Napište text s patřičným zarovnáním – opět jako vektor a umístěte ho kamkoliv na plátno. Nyní zbývá objekty seskupit. Nástrojem pro selekci vektorových objektů (Vector Object Selection) označte spolu se stiskem klávesy Shift oba objekty. Klik pravým tlačítkem myši zobrazí příruční nabídku, v níž vyberte volbu Přichytit text k cestě (Fit Text to Path). Výsledek můžete přikrášlit stínem – viz. obrázek č.20.
3.5.2. Nadpis opisující tvar
Tento způsob se nazývá Zarovnání textu na uzavřenou cestu (Aligning Text on a Closed Path)a je opět závislý na způsobu zarovnání textu. Postup je anologický jako u křivek. Opět vytvořte oba objekty jako vektory, označte je a slučte a vyberte položku Přichytit text k cestě.
obrázek č. 21: Kreslíme nadpisy II – nadpis opisující křivku.
obrázek č. 22: Kreslíme nadpisy II – nadpis opisující tvar.
Existuje ještě kratší způsob, jak vytvořit totéž. Pokud máte již vytvořený objekt, ke kterému chcete text přichytit, označte ho a aktivujte nástroj Text.
Pokud pak přejedete kurzorem přes vybraný objekt, změní se kurzor na takovýto obrázek : . V tom případě můžete nástroj text použít a výsledný text se sám „přichytí“ k objektu.
Ještě o jedné věci je třeba se zmínit. A to, když má text opisovat danou křivku, která nesmí být na výsledném obrázku vidět. Toho docílíte, pokud objekt, který je obtékán vyberete, a pravým tlačítkem vyvoláte příruční nabídku. V té si vyberete položku Vlastnosti (Properties) a odškrtnete políčko Viditelnost (Visible).
4. Ukládáme svá dílka …
V předešlé kapitole jste se naučili vytvářet základní objekty a bylo by nemilé i ten nejjednoduší nadpis ztratit. Povězme si tedy něco o ukládání obrázků.
4.1. Standardní dialog Save as
Pokud v PSP použijete příkazů Save či Save as, otevře se dialogové okno (na obrázku č.23) obsahující 32 formátů, ze kterých můžete volit. U mnoha z nich ještě můžete nastavit Kompresi (Compression), Kódování (Encoding) a jiné možnosti uložení (Storage Options). Pro publikování na webu jsou k dispozici formáty gif a jpg, během práce v PSP je však dobré pracovat s obrázky ve formátu psp. Tento formát totiž jako jediný podporuje ukládání vrstev, selekcí a ostatních rysů editoru. Při ukládání obrázků do jiných
obrázek č. 23: Dialog Save As – standardní ukládání obrázku.
formátů si PSP automaticky ověřuje, zda je vaše volba definitivní a zda změny, které na struktuře obrázku vykoná, přijmete.
Pro ukládání jednoduché grafiky se tyto možnosti mohou jevit jako dostačující. V okamžiku, kdy budete potřebovat uložit fotografie se situace mění. Fotografii (vlastně každý obrázek) se snažíme uložit tak, aby si zachoval co největší kvalitu při co nejmenších paměťových nárocích.
Standardní dialog Save as a dialog Save Options (na obrázku č.24) neumožňuje sledování změn při nastavování koprese, kódování atd… Proto tvůrci PSP přišli s novinkou, kterou najdete v hlavním menu pod položkou File > Export.
obrázek č. 24: Dialog Save Options.
4.2. Dialog Transparent Gif Saver
Tento dialog zprostředkuje uložení obrázku ve formátu gif. Obsahuje v horní části náhledy obrázku před a po uložení a v dolní části celkem pět karet. Můžete volit Plnou či Částečnou průhlednost (Transparency, Parcial
Transparency), Barvy (Colors) a Formát (Format) obrázku. Poslední karta poskytuje orientační tabulku časů nutných ke stažení obrázku do prohlížeče.
Výhodou oproti standardnímu způsobu ukládání je to, že důsledek každé změny okamžitě vidíte v náhledu a téměř okamžitě se zobrazí i paměťové nároky obrázku po kompresi. Pokud si nebudete jisti, jak hodnoty nastavit, můžete zpočátku používat Kouzelníka – průvodce uložením (tlačítko Use Wizard). Myslím si však, že s ručním a intuitivním nastavením parametrů se Wizard nedá srovnávat. Nakonec bych měl radu : nastavení parametrů volte jako kompromis mezi kvalitou a paměťovými nároky, spíše však preferujte kvalitu – technologie jde dopředu a časy nutné ke stažení dokumentu se neustále budou zkracovat.
obrázek č. 25: Dialog Transparent Gif Saver.
4.3. Dialog JPEG Saver
Tento dialog vám zprostředkuje uložení obrázku ve formátu jpeg či jpg.
Struktura dialogu je stejná jako v předchozím případě – náhledy obrázku a
pod nimi karty. Tentokráte pouze tři. Můžete volit Kvalitu (Quality), Formát (Format) a prohlédnout si orientační tabulku časů nutných ke ztažení dokumentu. Obrázek tohoto dialogu předkládám nahoře (obrázek č.26).
4.4. Dávková konverze (Batch Conversion)
V úvodní minirecenzi jsem slíbil, že se v této kapitole zmíním o funkci, kterou disponovala již předchozí verze PSP – Dávková konverze. Tuto funkci najdete v hlavním menu položka File.
obrázek č. 26: Dialog JPEG Saver.
Jistě jste již někdy potřebovali převést větší množství obrázků, či dokonce celý adresář, z formátu do formátu jiného. Nezbývalo vám asi nic jiného, než trpělivě převádět obrázek po obrázku. Nyní pouze tyto obrázky
označíte a o zbytek se postará PSP. A nejen to, nyní si můžete vybrat adresář, kam se výsledky budou ukládat i formát se všemi jeho vlastnostmi (všech 32 PSP podporovaných formátů je k dispozici).
Typickým příkladem použití funkce Batch Conversion je příprava obrázků pro animaci. Obrázky vytvoříte ve formátu .psp (zachovává vrstvy, selekce atd.), a následně je touto funkcí převedete např. do formátu .emf, v němž tvoří aplikace Flash.
obrázek č. 27: Dialog Batch Conversion.
5. VRSTVY
5.1. Vrstvy v PSP
Layer – vrstva je plocha vyplňující celou plochu plátna, která ovlivňuje výsledné vzezření obrázku. Na rozdíl od malíře, který s každou namalovanou vrstvou mění zcela obsah plátna (prostě obraz přemaluje, pokud s ním není spokojen), můžeme v PSP pomocí další vrstvy měnit i pouhé části plátna, jejich atributy – vrstvy se s původním plátnem skládájí do výsledného obrázku.
V PSP můžete vybírat ze tří typů vrstev : rastrové vrstvy (raster layers), vektorové vrstvy (vector layers) a přizpůsobovací vrstvy (adjustment layers). Rastrové vrstvy obsahují informace pro jednotlivé pixely, vektorové vrstvy obsahují data pro kreslení vektorových čar, tvarů a textů.
Přizpůsobovací vrstvy obsahují informace pro korekci barev, užívají se ke změně vzezření vrstvy pod nimi ležící.
5.2. Možnosti a omezení pro vrstvy
Pokud chcete pracovat s vrstvami (rastrové a přizpůsobovací), musí mít váš obrázek 24-bitovou hloubku nebo být ve stupních šedi. Vektorové vrstvy je možné přidat obrázku jakékoliv barevné hloubky. PSP podporuje až 100 vrstev pro jeden obrázek, aktuální počet vrstev obrázku je pak limitován výší paměti vašeho počítače.
Na rastrové a přizpůsobovací vrstvy můžete aplikovat efekty, deformace a filtry, na vektorové vrstvy však nikoliv. Pokud obrázek obsahuje nějakou selekci, je efekt, deformace či filtr aplikován na selekci náležící aktivní vrstvě. Pokud obrázek selekci neobsahuje, je modifikována celá aktivní vrstva.
Vrstvy si můžete libovolně pojmenovávat (name) a přejmenovávat (rename), seskupovat (group) a slučovat (merge). Vrstvu můžete také
kdykoliv smazat (delete) nebo duplikovat (duplicate). Existuje ještě mnoho operací s vrstvami, o nich si však řekneme až při kreslení.
5.3. Prostředky pro práci s vrstvami
Pro přehlednost vaší práce jsou v PSP k dispozici Paleta vrstev (Layer Palette) a dialog Vlastnosti vrstvy (Layer Properties Dialog Box).
5.3.1. Paleta vrstev
Paleta vrstev je tak využívaným pomocníkem, že je lépe mít ji neustále, například jen v minimalizované podobě, na pracovní ploše. Tam se ocitne, pokud učiníte toto : View > Toolbars > check Layer Palette, nebo pokud pouze stisknete klávesu L.
Paleta vrstev ja rozdělena na dvě okna. V levém okně je seznam vrstev a objektů v nich, před každou vrstvou je vyobrazen typ. Znak brýlí za názvem vrstvy upozorňuje, zda je vrstva viditelná či nikoliv.
Pravé okno zobrazuje vlastnost Průhlednost (Opacity) a charakteristiku míchání barev (na obr. nahoře je charakteristika Normal a Luminance).
obrázek č. 28: Prostředky pro práci s vrstvami – Paleta vrstev.
Zcela vpravo je pak znak zámku, který symbolizuje uzamknutí průhlednosti (Lock Transparency).
5.3.2. Dialog Vlastnosti vrstvy
Tento dialog vyvoláte, pokud pravým klikem na vybranou vrstvu v paletě vrstev vyvoláte příruční nabídku, v níž si vyberete položku Vlastnosti (Properties). Druhou cestou k tomuto dialogu je tato sekvence činností
počínající v hlavním menu : Layers > Properties.
Na dvou kartách jsou, pouze v jiné podobě, zobrazeny tytéž informace a tytéž možnosti volby jako na paletě vrstev. Pro přizpůsobovací vrstvu se však objevuje v tomto dialogu ještě karta třetí, a to karta Přizpůsobení (Adjustment). Na ní je možné volit parametry pro zvolený typ přizpůsobování.
5.4. Kreslíme s vrstvami
obrázek č. 29: Karty dialogu Layer Properties.
5.4.1. Vylepšujeme 3D kouli
V kapitole Kreslíme tvary II jsme opustili kouli v momentě, kdy již začala naplňovat naše představy (viz obr.). Pomocí vrstev dotáhneme naše dílko k dokonalosti (podotýkám ale, že vše je otázkou vkusu).
obrázek č. 30: Vylepšujeme 3D kouli.
Vytvořte tedy novou vrstvu a na ní dříve popsaným postupem opět tuto kouli. Pokud pracujete na 16-ti bitové či nižší grafice, můžete si všimnout, že se na kouli objevují křivky spojující místa, kde se mění barvy. To je samozřejmě nežádoucí. Následujte postup, který je odstraní : Image > Noise
> Add. Nastavte parametr pro úroveň nepořádku (hluku) mezi 2 – 4%.
Nyní si pohrajeme se světlem a stínem. Ověřte si, že je objekt stále vybrán. Vytvořte novou přizpůsobovací vrstvu typu Křivky (Curves).
V dialogu si vyzkoušejte, jaká křivka nejlépe vyhovuje vašemu vkusu a kontextu – při zaškrtnutém políčku autoproof je každá změna na obrázku ihned viditelná. Můžete si zvolit jaký barevný kanál (Channel) budete upravovat a v jaké části spektra se tak bude dít (hodnoty Input a Output).
Vytvořením této vrstvy je naše práce na kouli u konce.
5.4.2. Vylepšujeme tlačítko
V kapitole 4.3.2 jsme vytvořili grafický prvek postupem, který nebyl zcela správný (tyto chyby nyní odstraníme), nebyl však ani efektivní. Nyní nám vrstvy pomohou práci zpřesnit a podstatně zkrátit.
Na novém obrázku vytvořte dvě nové vrstvy, na každé nakreslete jeden zaoblený obdélník (nezapomeňte na antialias) tak, jak ukazuje obrázek č.31.
Nyní vytvořte další vrstvu, kterou v paletě vrstev technikou drag – and – drop přetáhněte až téměř na dno, pouze vrstva pozadí bude níže. Změňte barvu a nakreslete obdélník tak veliký, aby pokrýval celou plochu, kterou v budoucnu bude procházet křivka.
Aktivujte nástroj selekce a v závislosti na vašich požadavcích zvolte parametr kružnice nebo elipsa. Vytvořte selekci dle vašeho uvážení, prozatím se nemusíte starat o to, zda se přesně dotýká objektů či nikoliv, sledujte pouze velikost. Vysekněte (cut out) nyní selekci stiskem klávesy delete.
Vyberte nástroj přesun (Mover) a přesuňte vyseknutou selekci tak, aby se dotýkala obdélníků. Pro přesnější práci si plátno zvětšete (Zoom).
Nástrojem pro selekci s parametrem obdélník se zbavte nepotřebných zbytků obdélníku (označte a vymažte). Pracujte pouze ve vrstvě, kde selekce leží!
Nyní jsme v situaci, ve které jsme v minulé kapitole udělali chybu. Pro změnu barvy pomocného obdélníku jsme volili nástroj kyblík (Flood Fill).
Výsledkem nebyla jednobarevná plocha (důsledek volby antialias) – tu jsme museli pracně vyretušovat nástrojem štětec. Jak se této chybě vyvarovat?
Vyberte nástroj pro záměnu barvy (Color Replacer) a aktivujte barvy popředí a pozadí (na panelu aktivních barev) dle barvy výsledného objektu a pomocného obdélníku. Kurzor umístěte do zbytku pomocného obdélníku a double click zamění barvy.
Posledním krokem je sloučení vrstev. Chceme sloučit pouze vrstvy s objekty a proto : v paletě vrstev zneviditelněte vrstvu pozadí - klikněte na tlačítko viditelnosti (Visibility) pro vrstvu pozadí. Pravým klikem vyvolejte příruční nabídku a vyberte sloučit viditelné. Zbývá již jen aplikovat efekty a filtry dle vašeho uvážení, nezapomeňte si objekt označit (magická hůlka).
obrázek č. 31: Vylepšujeme tlačítko.
5.4.3. Vylepšujeme nadpisy
V PSP existuje skutečně nepřeberné množství technik, jak vytvořit efektní nadpis. Ty nejjednodušší techniky, kdy jsme ještě neznali vrstvy, jsme si předvedli v kapitolách o kreslení nadpisů (kap. 4.4, 4.5). Nyní vytvoříme efektní nadpis právě pomocí vrstev. Následující kapitoly by vám měly otevřít cestu k vlastnímu způsobu tvorby, vlastní fantazii a invenci.
5.4.3.1. Chromovaný nadpis I
Nový obrázek a nová vrstva je opět základním předpokladem naší další práce. Na této vrstvě vytvořte váš nadpis (nástrojem Text), pro který zaškrtněte způsob Selekce (Selection). Zvolte raději písmo tučné, na kterém budou efekty lépe viditelné. Aktivujte nástroj Kyblík a nastavte jeho
parametry tak, jak ukazuje obrázek č.32. Následně vyplňte všechna písmena vašeho nadpisu.
Ještě před tím, než provedeme pochromování textu, musíme našemu obrázku vtisknout poněkud prostorovější tvář – prozatím vypadá příliš rovinně. Ověřte si, že je text vybrán a následujte tuto sekvenci kroků : Image > Effects > Outer Bevel. Parametry nastavte dle obrázku č.33.
Na textu, který je stále v selekci nyní aplikujeme poslední efekt : Image >
Effects > Chrome. Nastavte počet puklin (Flaws) na 1, jas (Brightness) na
obrázek č. 32: Karty dialogu nástroje Flood Fill.
20 a zvolte bílou barvu. Poněkud tmavší výsledek získáte zaškrtnutím políčka Použít originální barvu (Use Original Color).
5.4.3.2. Chromovaný nadpis II
Zkusme nyní aplikovat jiný efekt. Efekt, který rozdělí text na dvě části, každý s jinou barvou.
Zopakujte postup z minulé kapitoly až k momentu, kdy máte text pochromovat. Než tak učiníte, přidejte textu efekt Žaluzie (Blinds), s parametry : opacity = 100, color = black, vlastnost horizontal zaškrtnutá, vlastnost light form right/top nikoliv. Pro správné (optimální) nastavení parametru width použijte posuvníku – dílčí výsledky uvidíte v náhledu.
Zbývá opět již jen aplikovat efekt chrome, tentokráte s nastavením : barva bílá, jas = 20. Počet puklin (Flaws) je plně ve vaší režii, nechť rozhodne váš vkus (v neposlední řadě však rozhoduje velikost textu).
obrázek č. 33: Dialog efektu Outer Bevel.
obrázek č. 35: Chromovaný nadpis II.
5.4.3.3. Neonový nadpis
Na příkladu neonového textu si ukážeme, v čem spočívá síla vrstev.
Obrázek, který následujícím popisem vytvoříme, obsahuje pouhé tři vrstvy.
obrázek č. 34: Chromovaný nadpis I.
Změnou míchání barevných odstínů (Blend Mode) a průhlednosti (Opacity) však lze získat nekonečně mnoho variací tohoto obrázku během několika vteřin. Pokud dodržíte předepsaný postup, měl by váš text vypadat přibližně tak, jak ukazuje obrázek č.36.
Počátek práce je stále tentýž – nový obrázek (černé pozadí), nová vrstva.
Aktivujte nástroj text, vyberete si font, velikost, barvu a vytvořte text jako floating. Abyste se ujistili, že máte vybrán pouze text, stiskněte Ctrl+D
obrázek č. 36: Neonový nadpis.
(odoznačení objektu) a nástrojem magická hůlka klepněte do volné plochy obrázku. Vzniklou selekci inverzujte (Selection > Invert).
Vytvořte novou vrstvu. Sekvence činností : Selection > Modify >
Contract vyvolá dialog, na kterém zvolte hodnotu 2 (2 pixely). Výsledkem je selekce vašeho textu, jejíž obrys je zmenšen o dva pixely. Tuto selekci vyplňte nástrojem Flood Fill bílou barvou. Tuto bílou barvu nyní rozpijte a rozostřete (filtr Gaussian Blur) – parametr nastavte dle vkusu (např. 2,00).
Stiskněte Ctrl+D a udělejte totéž s celým textem, pouze parametr rozpití by měl být nastaven na nižší hodnotu (např. 1,40).
Nyní vytvořte novou vrstvu, která bude tou nejvyšší vrstvou obrázku (v paletě vrstev je nejvýše). Opět vytvořte stejný text (floating), tentokráte s černou barvou. Ke zlepšení vzhledu textu (prozatím není kromě selekce nic vidět) následujte kroky : Image > Effect > Inner Bevel. Z minulých kapitol již víte co a jak nastavit – můžete si tedy s parametry libovolně pohrát.
Nyní vytvoříme neónový vzhled. Na paletě vrstev označte nejvyšší vrstvu a nastavte její míchání barev (Blend Mode) na Screen. Vrstvě s rozpitým bílým textem (2. vrstva zhora) nastavte Blend Mode na Hardlight a posuvník její vlastnosti Opacity nastavte přibližně na polovinu. Pokud tak učiníte, je výsledkem text podobný tomu na obrázku č.37. K částečné či úplné změně vzhledu textu nyní postačí, měníte-li hodnoty parametrů Opacity a Blend Mode jednotlivých vrstev.
obrázek č. 37: Neonový nadpis – práce s vlastnostmi Opacity a Blend Mode jednotlivých vrstev.
6. Tuby obrázků
6.1. Co jsou tuby?
Nemusíte být zrovna úplní mistři v kreslení a přesto v PSP můžete vytvořit nádherné a dokonale ztvárněné obrázky. Ptáte se, jak je to možné?
Tvůrci grafického editoru PSP prostě mysleli i na ty z nás, jež příroda opomněla obdarovat příslušnými talenty či dispozicemi. Vytvořili soubory obrázků, nazvaných Picture Tube, a nástroj na jejich ovládání, který nese stejné jméno – Picture Tube. Tyto dílčí obrázky pak lze bez větší námahy vkládat do našich obrázků. Můžeme si tak do minuty vytvořit vlastní les, vyplnit akvárium pestrými rybkami nebo ztvárnit svou představu o vesmíru.
Proč zprávě název Tuby (Tubes)? Snad proto, že každým klikem jakoby vymáčkneme z tuby trochu umění – krásný obrázek. Snad proto, že není nic jednoduššího než tubu zmáčknout, aby její obsah spatřil světlo světa.
Tuby obsahovala již i pátá řada PSP a stejně jako PSP verze 6.0 je ukládala ve formátu .tub do patřičného adresáře programu – Tubes. Tyto tuby si samozřejmě můžete prohlédnout pomocí browseru.
Každá tuba obsahuje různé varianty objektů s příbuznou tématikou.
Například tuba Mraky (Clouds) obsahuje různé podoby mraků, tuba Zelenina obsahuje různé druhy zeleniny. Tyto dílčí objekty jsou uspořádány vertikálně i horizontálně – každý objekt se nachází ve své buňce. Proč je tomu tak si povíme v kapitole o vytváření tub.
6.2. Kreslíme s tubou
Jak jsem již dříve podotkl, kreslení s tubou je více než jednoduché.
Problém s absencí talentu je díky tubám převeden na problém citu a kompozice, neboť o cit a kompozici tu nyní jde především.
Vytvořte nový obrázek nebo si vyberte vrstvu na obrázku stávajícím a aktivujte nástroj Picture Tube na paletě
nástrojů. Na panelu nástroje nastavte parametry dle vašeho záměru a pak již jen umístěte kurzor do obrázku a užijte click and drug techniku (klik a tah). Objekty tuby se samy budou generovat na plátno.
6.2.1. Nastavení parametrů nástroje Picture Tube
K tomu, abyste mohli nastavit parametry nástroje, musí být tento nástroj aktivován. Na panelu nástroje stiskněte tlačítko Možnosti (Options), které zobrazí požadovaný nastavovací dialog (Picture Tube Options). Vyberte typ tuby, velikost vkládaných objektů, způsob umísťování na plátno, krok (vzdálenost mezi objekty) a způsob výběru objektů z tuby. Toto nastavení si pro vaší další práci můžete uložit (Save as default …). Obrázek č.39 zobrazuje tento dialog.
6.2.2. Jak přidat novou tubu?
obrázek č. 38: Karty dialogu pro nástroj Picture tube.
obrázek č. 39: Dialog Picture Tube Options.
Každý obrázek, který vytvoříte, je možné (po patřičných úpravách) exportovat na váš seznam tub. Co takový obrázek musí splňovat? Především musí mít transparentní pozadí a objekty na plátně musí být pravidelně uspořádány – v přesných intervalech.
Exportování obrázku do Picture Tube uloží kopii vašeho obrázku do patřičného adresáře programu ve formátu .tub, dále program přidá novou položku na seznam tub na paletě nástroje.
K tomu, aby se obrázek přesně transformoval do tuby, je třeba programu sdělit jaké vlastnosti má tato tuba mít. Jde především o počet buněk a možnosti umísťování objektů na plátně. Jak tedy postupovat při přidávání tub?
Předkládám zde postup shrnutý do sedmi bodů :
1. Otevřete obrázek
2. Sekvencí činností File > Export > Picture Tube otevřete dialog vlastností (viz obr. na předcházející straně).
3. V části Uspořádání buněk (Cell Arrangement) nastavte počet buněk v řádcích i sloupcích dle počtu objektů na vašem obrázku.
4. V části Možnosti umístění (Placement Options) vyberte jednu z možností. Tato volba není zcela závazná, je možné ji při použití tohoto nástroje kdykoli změnit.
5. Do okénka Velikost kroku (Step Size) vepište velikost buňky v pixelech.
6. Vyberte jednu z možností výběru objektů tuby (Selection Mode).
Tato volba není opět zcela závazná.
7. Pojmenujte nově vzniknuvší tubu a stikněte OK.
6.2.3. Tvorba a distribuce vlastních tub
Nové tuby si můžete do PSP nejen přidávat, můžete je dokonce tvořit a sdílet s přáteli či kolegy. Abyste vytvořili novou tubu, musíte nejprve vytvořit mřížku (tabulku) buněk a do těchto buněk vložit jednotlivé, předem připravené obrázky. Buňky mohou být libovolně veliké, mějte však na paměti, že každé zvětšení buňky vede ke zvětšení nároků na paměť v momentě použití nástroje.
Jak tedy při tvorbě tuby postupovat? :
1. V hlavním menu klikněte File > Preferences > General Program Preferences. Otevře se příslušný dialog (viz obr. č.40).
2. Za záložku vytáhněte kartu Měřítko a jednotky (Rulers and Units) do popředí.
3. V pravém oddíle vyplňte vertikální a horizontální rozměr buňky, nejlépe v pixelech. Vkládaný obrázek tedy nesmí být větší než velikost buňky. Stiskněte OK.
4. Vytvořte nový obrázek, jehož rozměry jsou celočíselnými násobky vámi zvolené velikosti buňky. Pokud například vytvoříte obrázek o
obrázek č. 40: Dialog Paint Shop Pro Preferences.
rozměrech 400x400 pixelů a vámi nastavené rozměry buňky jsou 100x80 pixelů, získáte obrázek s dvaceti buňkami – čtyři vodorovné a pět svislých.
5. Nastavte transparentní pozadí stiskněte OK.
6. Objeví se obrázek s mřížkou v barvě, kterou jste si také mohli nastavit. Pokud se mřížka neobjevila, vede k nápravě klik v hlavním menu na položku View > Show Grid.
7. Nyní vytvořte jednotlivé obrázky a umístěte je do buněk. V každé buňce musí být právě jeden obrázek. Tuba je takto hotova, zbývá ji ještě výše popsaným způsobem uložit (File > Export > Picture Tube).
obrázek č. 41: Připravená tuba objektů – letadel.
7. Praktická část
Hlavním úkolem praktické části bylo vytvořit www prezentaci obce Jankov, vedlejším úkolem pak bylo umístit tuto prezentaci na server města.obce.cz. První z úkolů se mi podařilo zrealizovat beze změn, druhý úkol již změnu zaznamenal.
Pro obec byla zaregistrována doména Jankov.cz, pro umístění prezentace jsem vybral server Belleville.cz, nejen z finančních důvodů. Tento server poskytl bezkonkurenční podmínky pro umístění stránek, poskytl i bezplatné poradenství při tvorbě projektu. V neposlední řadě pak fungoval jako sponzor této prezentace.
Grafická stránka projektu byla celá, až na jedinou výjimku (aplikace Flash), vytvořena v grafickém editoru Paint Shop Pro 6.0 firmy Jasc Software, Inc. Ze zaměření stránek (účelu), grafického návrhu a celkové kompozice zřetelně vyplynulo, že většina, z téměř nekonečných možností PSP, zůstane nevyužita. Přesto lze vytvořit prezentaci, která je účelná i efektní.
Prezentace obce by měla obec zviditelnit, přilákat turisty, investory…
Proto jsem vytvořil samostatné stránky pro informční servis (o samosprávě, úřední deska obce, turistické informace), historii (od neolitu po Druhou světovou válku) a současnost obce (poslední dva roky veřejného života). Na stránkách galerií obrázků obou správních částí obce jsem zviditelnil to nejkrásnější, co mohou obě části nabídnout pro turisty. Pro udržení lokální přitažlivosti jsem vytvořil stránku fotbalového klubu s pravidelným výsledkovým servisem.
Podoba stránek však není definitivní. Bude se neustále měnit v závislosti na požadavcích představitelů obce a aktuálních událostech.
8. Závěr
Celou mou diplomovou prací se prolíná téma grafické stránky webu a jejího návrhu – webdesign. Přestože jsem v praktické části využil pouze minimum z možností aplikace PSP, lze říci, že šestá řada grafického editoru firmy Jasc Software, Inc. je ideálním pomocníkem pro každého tvůrce webových stránek.
Účelem mé diplomové práce nebylo vyjmenovat jednotlivá menu programu a popsat všechny jeho možnosti. Mým záměrem bylo ukázat, jak program funguje, podělit se s uživateli o zkušenosti a hlavně na jednoduchých příkladech ukázat cestu tvorby základních elementů sloužících k vylepšení grafické stránky webu. Zda se tento záměr podařil záleží nyní na čtenáři, resp. na uživateli, který bude v tomto textu čerpat inspiraci.
9. Seznam použité literatury
Kosek, J.: HTML, tvorba dokonalých WWW stránek. Praha,Grada 1999.
Mikle, P.: Referenční příručka jazyka HTML 3.2. Brno, Unis Publishing Brno 1996
Mikle,P.: Dynamický HTML 4.0, referenční příručka. Brno, Unis Publishing Brno 1997
Satrapa, P.: Webdesign. Praha, Neokorex Praha 1997.
http://grafika.cz
http://home.pf.jcu.cz/~pepe/diplomky http://města.obce.cz
http://www.fotozona.cz
http://www.netins.net/showcase/mmigraphics/index.html http://www.jasc.com
Příloha
Protože se má diplomová práce vztahuje ke grafické stránce webu, jsou i přílohy této práce grafické, připravené ke shlédnutí na přiložené disketě.
Na přiložené disketě naleznete:
1. Přílohu obrázků nastavení parametrů těch kreslících nástrojů PSP, o kterých nebyla zcela detailní zmínka v textu.
2. Ukázky prací, které vznikaly právě při učení se ovládat nástroje PSP. Jsou rozděleny do dvou adresářů – dle formátu obrázku.
Adresář obrázků ve formátu .psp jež uchovává vrstvy, selekce atd.
Adresář obrázků ve formátu .jpg.
