MASARYKOVA UNIVERZITA

Transkript

1 MASARYKOVA UNIVERZITA PEDAGOGICKÁ FAKULTA Katedra technické a informační výchovy Webová grafika a její tvorba v rámci IT předmětů Bakalářská práce Brno 2012 Autor práce: Vedoucí práce: Radek Lachnit Ing. Martin Dosedla

2 Anotace Tato bakalářská práce se zabývá tvorbou počítačové grafiky, určené pro použití v prostředí sítě internet. Práce je složena ze dvou vzájemně provázaných částí. Obsahem teoretické části je popsání základních principů a zásad tvorby, popis grafických formátů a používaných nástrojů. Praktická část se věnuje vlastnímu procesu tvorby grafiky a použití jednotlivých grafických prvků při návrhu uživatelského prostředí a designu webových stránek. Výsledkem této praktické části je grafický návrh webových stránek. V práci je kladen důraz na možné zapojení látky ve výuce IT předmětů a práce bere v potaz možná omezení školního prostředí. Zpracované téma doplňují praktické příklady a ukázky včetně komentáře. Součástí práce je datová příloha. Klíčová slova Webdesign, počítačová grafika, tvorba grafiky, web, grafické editory, bitmapy, layout, CSS 2

3 Abstract This bachelor's thesis deals with the creation of computer graphics, for use in web presentations and internet network. The thesis consists of two parts. In the theoretical section are described basic principles of computer graphics, description of graphic formats and editors. The practical part deals with the process of creating web graphics and with the use of individual graphic elements in user interface and design of webpages. Result of this section is complete graphic design of webpage. The entire work emphasizes on the possible involvement in the teaching of IT courses and takes into account possible limitations of the school environment. Thesis is supplemented with practical examples and demonstrations including commentary. Keywords Web design, computer graphics, graphics production, web, graphics editors, bitmaps, layout, CSS 3

4 Prohlášení Prohlašuji, že jsem závěrečnou bakalářskou práci vypracoval samostatně, s využitím pouze citovaných literárních pramenů, dalších informací a zdrojů v souladu s Disciplinárním řádem pro studenty Pedagogické fakulty Masarykovy univerzity a se zákonem č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon), ve znění pozdějších předpisů. V Brně dne Radek Lachnit 4

5 Poděkování Velice rád bych poděkoval panu Ing. Martinu Dosedlovi za vedení práce, cenné rady, připomínky a konzultace. 5

6 OBSAH OBSAH... 6 ÚVOD POČÍTAČOVÁ GRAFIKA Úvod do počítačové grafiky Rastrová a vektorová grafika Základní pojmy GRAFIKA PRO WEB A WEBOVÝ DESIGN Stručná historie Současný webový design Omezení webové grafiky Grafické formáty pro web Optimalizace souborů Nástroje pro grafickou tvorbu PRAKTICKÝ WEBDESIGN První kroky při návrhu Rozložení grafiky na stránce Vlastní tvorba Příprava výstupních souborů TVORBA GRAFIKY VE ŠKOLNÍM PROSTŘEDÍ Praktická omezení a řešení ZÁVĚR POUŽITÉ ZDROJE SEZNAM PŘÍLOH

7 ÚVOD Díky rychle mizícím technickým a datovým omezením se dnes vzhled a grafika webových prezentací stává velmi důležitým prvkem. Kvalitně zpracovaný vzhled dokumentu nebo vhodné rozložení webové stránky dokáže nejen zaujmout uživatele, ale zpříjemnit a zefektivnit jeho práci, přitáhnout k prezentovanému tématu pozornost, či v případě komerční prezentace potenciálním zákazníkům vhodně představit výrobek, firmu nebo značku. Cílem práce je vytvořit ucelený soubor informací a praktických postupů, potřebných pro navržení grafické podoby jednoduché webové prezentace, a to vše s ohledem na možnosti zapojení látky ve školním prostředí. První část se věnuje základním zásadám a principům tvorby a zobrazování počítačové grafiky a nejpoužívanějším nástrojům. Druhá část práce demonstruje využití teoretických informací v praxi a obsahuje ukázky a návody pro vytvoření základních grafických prvků webové stránky. Přehledně vytvořené webové stránky mohou žákům sloužit jako zdroje informací, podkladů k samostudiu a nakonec i jako velice dobrý prostředek pro vlastní prezentaci žáků a jejich dovedností. V podobném duchu se vyjadřuje i Rámcový vzdělávací program pro základní vzdělávání (RVP), který na státní úrovni definuje požadavky na výstupní kompetence žáků a absolventů (základních) škol: Zvládnutí výpočetní techniky, zejména rychlého vyhledávání a zpracování potřebných informací pomocí internetu a jiných digitálních médií, umožňuje realizovat metodu učení kdekoliv a kdykoliv, vede k žádoucímu odlehčení paměti při současné možnosti využít mnohonásobně většího počtu dat a informací než dosud, urychluje aktualizaci poznatků a vhodně doplňuje standardní učební texty a pomůcky. 1 V sekci Cílové zaměření vzdělávací oblasti (oblast RVP Informační a komunikační technologie ) se dále můžeme dočíst, že jedním z cílů vzdělávací oblasti je snaha vést žáka k: tvořivému využívání softwarových a hardwarových prostředků při prezentaci výsledků své práce 2 1 Rámcový vzdělávací program pro základní vzdělávání. Str Rámcový vzdělávací program pro základní vzdělávání. Str

8 Téma věnující se tvorbě webové grafiky nebo internetových prezentací nemusí být vždy ve výuce zásadní, jasně ale vidíme, že v RVP toto téma svůj prostor má. Webová grafika jako taková se v současné době částečně probírá v rámci obecných IT předmětů na základních školách nebo je náplní zájmových a volitelných odborných předmětů, seminářů, kroužků a klubů. Větší prostor téma dostává v předmětech odborného zaměření, přičemž se jedná zejména o výuku na středních a vyšších odborných školách nebo přímo školách vysokých (například moderní koncepci výuky počítačové grafiky v rámci technicky zaměřených oborů Pedagogické fakulty Masarykovi univerzity popisuje příspěvek Koncepce a modernizace výuky počítačové grafiky na KTEIV pedagogické fakulty MU Brno 3 ). Předměty obsahující samostatnou práci a rozvíjející vlastní kreativitu jsou u žáků velice oblíbené. I z těchto důvodů je práce koncipována tak, aby mohla sloužit nejen jako inspirace, ale i jako základní materiál pro nahlédnutí do tématu. 3 DOSEDLA, Martin. Koncepce a modernizace výuky počítačové grafiky na KTeIV pedagogické fakulty MU Brno. Moderní technologie ve výuce - 2. Ročník. Str

9 1 POČÍTAČOVÁ GRAFIKA 1.1 Úvod do počítačové grafiky Termín počítačová grafika se poprvé objevuje dlouho před nástupem grafických operačních systémů a aplikací, tak, jak je chápeme a používáme dnes. Po ukončení druhé světové války a zejména v 50. a 60. letech 20. století dochází k masivnímu rozmachu výpočetních technologií. Vzhledem k (především vojenské) povaze výzkumů se samozřejmě jedná pouze o záležitost specializovaných a vědeckých pracovišť, která mají k dispozici sálové počítače s dostatečným výkonem. O provázanosti vývoje počítačové grafiky s vojenskými projekty se zmiňuje například Carlson. 4 I přes tato omezení ale dochází k poměrně rapidnímu rozvoji počítačově zpracovávané grafiky. Kolem roku 1960 (často se uvádí dokonce už rok 1958) například vzniká jedna z prvních grafických počítačových her jménem Tennis for Two, v roce 1961 potom o něco známější titul Spacewar! (celých deset let před první komerčně úspěšnou počítačovou hrou Pong z roku 1972, která je právě často označována jako první grafická počítačová hra). V roce 1963 vzniká v podstatě revoluční vektorový grafický editor Sketchpad, který v mnoha aspektech ovlivnil následný vývoj počítačové grafiky a především vývoj grafických editorů jako takových. 5 První operační systémy s grafickým uživatelským rozhraním současného typu přichází až v 80. letech 20. století, a skutečný rozmach zažívají až v letech devadesátých. 6 Ve vztahu k webové grafice, stojí za zmínku zejména první internetové prohlížeče, jako například známý prohlížeč Netscape dostupný v roce Obsah zobrazovaných internetových stránek je v té době, až na malé výjimky, čistě textový. 4 CARLSON, Wayne. A Critical History of Computer Graphics and Animation. 5 CHANG, Mi Tsung. A Brief History of Computer Graphics. 6 SPINA, Sandro. History of Computer Graphics 7 VEEN, Jeffrey. The Art & Science of Web design. Str

10 Mezi hlavní významy spojení počítačová grafika můžeme zařadit: Zobrazování obrazových dat na výstupu počítače (v podstatě cokoliv, co není textovým nebo zvukovým výstupem počítače). Procesy, nástroje a technologie pro vytváření obrazových dat na počítači (grafický software a editory, specializované programy). Jakékoliv úpravy obrazových dat, přenesených do počítače z reálného světa (např. počítačové úpravy fotografií). Počítačová grafika je také obsahem samostatného vědního oboru, který se zabývá (především matematickými) principy a algoritmy zobrazování digitálních obrazových informací. V dnešní době je grafika na počítači zpracovávána pomocí dvou hlavních a základních principů. Prvním z nich je vektorová grafika, která používá pružný zápis na matematickém principu. Druhým, a z pohledu této práce významnějším, způsobem je rastrová grafika, která obraz definuje pomocí pevně stanovené matice samostatných bodů různých vlastností. Oba uvedené principy mají své výhody a nevýhody, rozdílné způsoby využití a samozřejmě se při práci s nimi používají odlišné nástroje. 10

11 1.2 Rastrová a vektorová grafika Jak už bylo řešeno, vektorová grafika popisuje jednotlivé objekty pomocí matematického zápisu a pro zobrazení grafických objektů využívá základní geometrické tvary, zejména křivky. Každý ze zmíněných prvků je popsán souborem určitých vlastností, může jít o jejich tvar, sílu, barvu, obrys a další vlastnosti. Díky pružnosti tohoto způsobu zápisu je možné vektorový objekt přepočítat na libovolnou velikost (rozlišení) a to bez nežádoucích deformací. Tento zásadní rozdíl mezi chováním vektorové a bitmapové grafiky je ilustrován na obrázku č. 1. Díky těmto vlastnostem nachází vektorová grafika uplatnění zejména v oblastech profesionální tvorby. Můžeme se s ní setkat ve specializovaných programech pro konstrukci a tvorbu technických výkresů nebo v kartografických a mapových systémech. Vektorová grafika se nehodí pro barevně složité grafické objekty, jakými jsou fotografie nebo grafika aplikací zobrazovaných na monitoru (například textury objektů v počítačových hrách a aplikacích). Díky těmto vlastnostem nemá přímo ve statickém designu webových prvků vektorová grafika velké využití. Často se s ní na webu můžeme setkat v případě dynamického obsahu. V takovém případě má vektorová grafika zastoupení hned ve dvou formátech Flash a SVG. Flash je historicky velice oblíbený formát, který umožňuje vytvářet působivé interaktivní animace a dynamicky se měnící prvky a funguje právě na principu vektorové grafiky, kterou používá v kombinaci s vlastní skriptovacím jazykem. Jeho velkou nevýhodu však představuje uzavřenost formátu, potřeba nainstalování proprietárního přehrávače do internetového prohlížeče a ustupující podpora ze strany některých operačních systémů a mobilních zařízení. Jako vektorová alternativa existuje také otevřený formát SVG, který spravuje organizace pro webové standardy W3C. Síla formátu SVG spočívá v tom, že je možné grafické objekty dynamicky měnit pomocí zápisu XML kódu přímo v těle stránky. Je také důležité poznamenat, že formát SVG není plně podporován v některých starších internetových prohlížečích (například Internet Explorer verze 8 a starší). 11

12 Rastrová (tento druh grafiky je také často označován počeštěným názvem bitmapová) grafika pracuje místo matematické definice na principu matice pevně definovaných bodů. Tyto nejmenší stavební body počítačové grafiky, zvané pixely (zkráceně zapisované jako px), jsou zasazeny do pravidelné mřížky a vlastností každého z nich je jeho přesná poloha a barva (případně i průhlednost). Vzhledem k faktu, že naprostá většina statické grafiky internetových stránek je tvořena právě soubory v některém z rastrových formátů, bude se zbytek této práce zabývat rastrovou grafikou. Druhým zásadním důvodem, proč se při přípravě webové grafiky zabývat principy rastrové grafiky je skutečnost, že veškeré počítačové monitory a moderní displeje (například ty v mobilních telefonech) pro zobrazení obsahu využívají právě rastrovou matici nebo některou z jejich modifikací. Díky výše uvedenému je možné konstatovat, že veškeré grafické objekty (i ty vektorové), které vykreslíme na počítačovém monitoru, budou (minimálně v nějaké chvíli) zobrazeny jako rastrová grafika. Princip jednotlivých pixelů umístěných v pravidelné mřížce lze snadno demonstrovat na obrázcích č. 1 a 2. U zvětšeného rastrového výřezu vidíme jasně rozlišené jednotlivé pixely, u vektorového výřezu vidíme hladkou linku obrysu. Druhá zmíněná ilustrace je makro fotografie moderního LCD monitoru, na které jsou viditelné nejenom samotné pixely, ale také tři barevné sub pixely, kterých se využívá pro zobrazení barev pomocí RGB modelu (o barevných modelech je pojednáno dále v práci). Obrázek 1: chování rastrové (pravý výřez) a vektorové (levý výřez) grafiky při velkém zvětšení 12

13 Obrázek 2: makro fotografie LCD panelu Výhody a omezení Díky nastíněným vlastnostem se rastrová grafika hodí pouze pro některé účely. Mezi její výhody patří zejména výborná schopnost práce s množstvím barev a s barevnými přechody, možnost velice přesné práce ve složitějších obrazech (editací po jednotlivých pixelech), velká rozšířenost a kompatibilita jednotlivých formátů a editorů, plná podpora většiny rastrových formátů v prostředí internetu a nakonec i velice dobrá dostupnost vstupních obrazových dat (vytvořených například pomocí digitálního fotoaparátu nebo skeneru). Díky těmto vlastnostem se rastrová grafika používá tam, kde je hlavním výstupním zařízením monitor (WWW stránky, počítačové aplikace), v reklamní grafice, v digitální fotografii (retuše, montáže, úpravy externě vytvořené grafiky) a při tvorbě ilustrací přímo na počítači (například pomocí počítačového tabletu). Zásadní nevýhodou rastrové grafiky jsou omezené možnosti změny velikosti nebo vlastností již hotového rastrového obrázku nebo fotografie. U vektorové grafiky je tento problém eliminován už zmíněným pružným vyjádřením, v případě zvětšení objektu si algoritmus zobrazení pouze dosadí upravené (zvětšené) hodnoty a přepočítaný obrázek si zachová svoji původní kvalitu. U rastrového objektu je ale obraz pevně definován určitými vlastnostmi a počtem pixelů. Pokud se takový obraz pokusíme zvětšit nebo zmenšit, bude počítačový program nucen chybějící pixely do obrazu dodat, případně je odebrat. Takový zásah se neobejde bez zhoršení kvality 13

14 výstupu a při určitém stupni zvětšení nebo zmenšení se výsledný obraz už stane nepoužitelným (ztrácí se ostrost, jsou viditelné jednotlivé pixely a rastr pixelů, na obrazu vznikají obrazové artefakty způsobené nepřesně dopočítanými novými pixely). Na obrázku č. 3 jasně vidíme obrazové deformace způsobené několikanásobným zvětšením původní grafiky. Příčinou těchto deformací je nutnost dodání nepřesných pixelů do původního obrázku. Vidíme, že se ztrácí ostrost a barvy neodpovídají původnímu obrázku. Obrázek 3: deformace rastrové grafiky při přílišném zvětšení Druhou nevýhodou rastrové grafiky, se kterou je nutné počítat, je její větší datová náročnost. Ta je úměrná rozlišení obrazu a množství barevných informací, které výsledný obraz obsahuje. Při složitější práci nebo v oblasti profesionální grafiky se díky tomu můžeme setkávat s grafickými soubory o velikosti desítek i stovek megabytů. Z tohoto důvodu je důležitou součástí procesu tvorby webové grafiky i datová optimalizace výstupních souborů. Bitmapových editorů je velké množství, ty nejpoužívanější z nich jsou popsány dále v práci. Základním editorem je také často vybaven přímo operační systém. 14

15 1.3 Základní pojmy Po rozlišení dvou základních přístupů k tvorbě počítačové grafiky, je také nutné jasně popsat vybrané pojmy související s počítačovou grafikou. Jejich znalost je zásadní při další práci a při jakýchkoliv úpravách obrazových dat. Obrazový soubor jako takový může mít velké množství vlastností, pro tvorbu webové grafiky se stačí orientovat v následujících pojmech. Obrázek 4: ilustrace vybraných parametrů grafického souboru Rozlišení Rozlišení obrázku je zcela základní vlastnost každého grafického souboru, která určuje, jak bude výsledný zobrazený obraz velký, přesněji kolik bude výsledný obraz obsahovat horizontálních a vertikálních pixelů ve své pixelové mřížce. Zapisuje se ve formátu YY x XX (pixelů). Obrázek o rozlišení 1200 x 800 bude mít horizontální hranu pixelové mřížky dlouhou 1200 pixelů a vertikální hranu dlouhou 800 pixelů. Snadno už potom můžeme spočítat, že celková plocha obrázku bude přesně unikátních obrazových bodů. Rozlišení obrázku vždy volíme podle předpokládaného využití hotové grafiky a podle předpokládaného výstupního zařízení. Zatímco dnešní průměrné digitální fotoaparáty jsou schopné zachytit obraz v rozlišení více než 3648 x 2736 pixelů, standardní rozlišení počítačových monitorů se nejčastěji pohybuje od klasického rozlišení 1024 x 768, až po 1920 x 1200 u větších monitorů. 8 8 ČIČÁK, Matěj. Rozlišení obrazovky už není nejpoužívanější. Živě.cz 15

16 Barevný model Barevný model označuje způsob, jakým jsou v obrázku definovány barvy. Používaných barevných modelů je několik a každý z modelů přistupuje k vytvoření požadované barvy odlišným způsobem. Barevný model se volí na základě očekávaného využití hotové grafiky. Všude tam, kde se očekává výstup na monitor počítače, je používán barevný model RGB. Model RGB k zobrazení barev nepotřebuje žádný vnější zdroj světla, protože k míchání barev dochází zvyšováním nebo změnou intenzity kombinace tří základních barev (proto se tento model také popisuje jako aditivní intenzita barev se v tomto způsobu zvyšuje) na podkladu. Tři základní barvy modelu jsou červená, zelená a modrá a jako základní podkladová barva slouží černá. Na základních barvách je dobře vidět, že tento model v podstatě napodobuje princip, jakým vnímá barvy lidské oko. Obrázek 5: princip skládání barev v RGB modelu Samotné kódování a určení barvy pixelů probíhá následujícím způsobem: každý z pixelů je rozdělen na tři kanály podle základních barev. Každý z těchto kanálů potom dostane přidělené číselné vyjádření intenzity daného kanálu. Z hodnot těchto tří intenzit poté vzniká kompletní barevné spektrum. Pro každý z RGB kanálů se nejčastěji využívá 8 bitů (dohromady tedy 24 bitová hloubka na pixel), které umožňují regulovat intenzitu pomocí hodnot V základním RGB zápisu tak například modrou barvu vyjádříme jako 0,0,255. Základní černá bude 0,0,0 a naopak bílá 255,255,255 (je tedy 16

17 tvořena maximální intenzitou všech tří barevných kanálů). 9 Při tvorbě grafiky se používá ještě několik dalších způsobů identifikace barev. Zejména pro HTML a CSS je častěji používaný zápis barvy v hexadecimální podobě. Zmíněná čistě modrá bude hexadecimálně popsána jako #0000FF, ze zápisu můžeme opět vyčíst nulové zastoupení červené a zelené složky a plnou intenzitu modré barvy 10. Tento zápis je pro zapsání do CSS nebo HTML kódu mnohem uživatelsky přívětivější, než množina tří prvků v základním popisu. Ten se zase častěji používá v digitální fotografii, protože umožňuje na první pohled rychleji rozeznat intenzitu jednotlivých barev. Mimo modelu RGB se můžeme při práci s grafikou setkat s některým z dalších barevných modelů. Například pro grafiku připravovanou pro tisk, se používá barevný model CMYK, který funguje na opačném principu, než RGB a barva definovaná pomocí CMYK nebude korektně zobrazena jako RGB a naopak. Obecně lze konstatovat, že každý z barevných modelů používá pro vyjádření barvy soustavu určitých definovatelných parametrů a jejich různých hodnot. Barevná hloubka Barevná hloubka je důležitý parametr, který stanovuje, kolik barevných informací obrázek ponese a kolik barevných odstínů můžeme při jeho tvorbě použít. Barevná hloubka je označována počtem bitů (v digitální technice je bit nejmenší jednotka obsahující informaci) obrazových informací přítomných v každém z pixelů. Jednobitová barevná hloubka bude obsahovat pouze černou a bílou barvu (2 1 = 2 barvy), zatímco 24 bitová barevná hloubka je schopná zachovat přes 16,7 mil. barev a odstínů (2 24 ). V minulosti bylo nutné pro tvorbu internetové grafiky používat pouze omezený rozsah tzv. bezpečných barev, u kterých byla jistota, že je počítač koncového uživatele bude schopen zobrazit, ať už ze strany hardwarové, tak ze strany softwarové výbavy PIHAN, Roman. Barevný model RGB. Fotoroman.cz 10 TÚMA, Tomáš. Počítačová grafika a design. Str GREMILLION, Ben. How to Calibrate Color for the Web. Webdesigner Depot. 17

18 V dnešní době můžeme pro barvy bez obav používat zmíněných 24 bitů. Například statistiky ze stránek w3schools.com z ledna , ukazují, že celých 98 % uživatelů přistupuje na tento web pomocí počítačového monitoru schopného zobrazit barevnou hloubku 24 bitů a větší (server w3schools.com je primárně zaměřený na webové technologie, takže statistika nebude na 100% reprezentovat průměrného uživatele internetu, přesto však poskytne relevantní údaje). S menší barevnou hloubkou se ale stále můžeme setkat například u souborů ve formátu GIF, které jsou schopné zpracovat pouze 256 barev (8 bitů), nebo u černobílé fotografie (kde je ale ve skutečnosti použita škála odstínů šedé). Následující ilustrace ukazuje praktický vliv snížení barevné hloubky obrázku na 2 bity. Obrázek 6: ilustrace redukce barevné hloubky na barevný obrázek 12 Browser Display Statistics. W3Schools.com 18

19 DPI Při tvorbě grafiky je také často možné narazit na parametr označovaný zkratkou DPI. Hodnota DPI (česky bodů na palec) definuje hustotu obrazových bodů na ploše jednoho palce. Tento údaj je důležitý při tisku souborů, kde počet DPI definuje jemnost výsledného vytištěného obrazu nebo fotky. Při tvorbě webové grafiky se hodnotou DPI v podstatě nemusíme zabývat, standardně se pro zobrazování na monitoru používají hodnoty 72 nebo 96 DPI. Při práci s počítačovou grafikou vždy platí, že čím vyšší bude rozlišení a barevná hloubka obrázku, tím vyšší bude jeho datová náročnost a velikost výsledného grafického souboru. Obě vlastnosti přímo ovlivňují celkový počet informací, které obrázek bude obsahovat. Naopak některé vlastnosti obrázku (například zvolený barevný model) nebudou mít na výslednou datovou náročnost výsledného souboru vliv. 2 GRAFIKA PRO WEB A WEBOVÝ DESIGN 19

20 Práce s počítačovou grafikou je velmi obecný termín, který nám toho příliš neřekne, protože jednotlivé způsoby práce s grafikou se mohou (a budou) silně lišit v závislosti na zamýšleném využití hotového produktu. Způsob práce při modelování 3D grafického objektu bude naprosto odlišný od způsobu práce při předtiskové úpravě grafických publikací nebo při retušování digitálních fotografií. Příprava grafiky pro použití na webu je proto specifickým způsobem zpracování 2D grafiky. Je to dáno především technickými omezeními prostředí sítě internet a velkou rozmanitostí zobrazovacích možností u uživatelů, kteří budou grafiku zobrazovat. Jak už bylo poznamenáno v úvodu práce, dobře vytvořený grafický design je klíčovým aspektem každé webové stránky. Z historického hlediska designér často neodpovídal pouze za vzhled internetové stránky, ale také za její funkčnost a naprogramování v jazyce HTML. Což ve své knize zmiňuje jako jeden z mnoha například Eccher (volně přeloženo): V dřívějších dobách webového vývoje, webový design znamenal tvorbu statických HTML stránek s propojeným textem a grafikou. 13 S rozvojem rychlého internetového připojení a bez technických omezení se však z webového designu stala samostatná disciplína webového vývoje a v dnešní době je úkolem webového designéra především připravit samotný návrh vzhledu a chování stránky (takzvaný front-end) a výstupní soubory pro další zpracování, které už potom pouze předává kodérovi webu (který obstará funkční naprogramování pomocí některého z programovacích jazyků, takzvaný back-end). Zároveň nemůžeme za webový design považovat pouze grafické soubory, pod pojem webový design spadá i barevná paleta použitá na stránce, typografické prvky a rozložení uživatelských prvků, jakými jsou menu, odkazy nebo tlačítka. Je jasné, že webdesign je zejména funkční grafikou, zároveň je ale jakákoliv grafika minimálně z části i uměleckou záležitostí a jako taková v čase podléhá specifickým trendům a módním vlnám. Úkolem dobrého webdesignéra je tyto trendy sledovat a umět je zapojit do svých grafických návrhů. 13 ECCHER, Clint. Professional web design Techniques and templates (CSS and XHTML). Str

21 2.1 Stručná historie Historie webového designu je pevně spojena s vývojem internetu na začátku devadesátých let. Za ty nejzásadnější okamžiky můžeme považovat zejména položení základů WWW (World Wide Web) a vznik prvních internetových stránek kolem roku 1989, vytvoření první revize značkovacího jazyka HTML (Hypertext Markup Language) pro tvorbu WWW stránek v roce 1991 a nástup prvních grafických internetových prohlížečů, jakými byly Mosaic nebo Netscape ( ). 14 Díky značným limitacím přenosových rychlostí internetových přípojek se grafické prvky používali pouze velice výjimečně a naprostá většina obsahu stránek byla tvořena textově. Primárním cílem stránek v té době bylo poskytovat informace a minimalizovat načítací čas stránky. Obrázek 7: grafická podoba serveru Seznam.cz v roce 1996 (zdroj: 14 VEEN, Jeffrey. The Art & Science of Web design. Str

22 První snahy o zapojení vizuálních prvků do webových stránek se objevují od roku Velice k tomu přispívá i představení formátovacího jazyka CSS (Cascading Style Sheets) ve stejném roce. Jazyk CSS byl zaveden s úmyslem usnadnit a zlepšit možnosti formátování vzhledu webových stránek postavených na jazyce HTML. Na stránkách se začínají objevovat jednobarevná pozadí, jednoduché grafické prvky, jako jsou tlačítka a ikonky, grafická loga a (často animované) obrázky ve formátu GIF. Po roce 2000 dochází k posunu od čistě statických stránek ke stránkám dynamickým, které kromě informační hodnoty nabízí také hodnotu zábavnou nebo komunikační. Velice populární je v této době, už zmíněná, technologie Adobe Flash, která dovoluje tvorbu přitažlivých a multimediálních a interaktivních internetových prezentací, které jsou však datově náročnější a není u nich zajištěna plná kompatibilita. Obliba této technologie opět začíná pomalu klesat mezi lety 2007 a 2008 a v současné době existuje snaha nahrazovat Flash soubory pomocí technologie HTML 5. Obrázek 8: grafická podoba serveru Seznam.cz v roce 2012 (zdroj: 22

23 Webové stránky se stávají grafickou záležitostí, místo jednotvárných pozadí se používají textury, je kladen důraz na zajímavou typografii stránky, ve webovém designu se do popředí dostává grafický minimalismus a důraz na funkční stránku prezentací. Zároveň dochází k rozvoji sociálních webových služeb, které mají na design specifické požadavky. Od roku 2011 plynule dochází k rozšíření technologie HTML 5 a spolu s ním vzniká nová generace webových stránek Současný webový design Současné trendy, zejména profesionálního, webového designu jsou poměrně snadno definovatelné. Toho se dá velice dobře využít a je možné tyto prvky začlenit i do čistě nekomerčních nebo amatérských grafických návrhů. V posledních letech proběhl na poli webového designu zajímavý posun. Zatímco dříve se designéři snažili využít svých, čím dál méně technologicky omezených grafických efektů k zaujetí návštěvníka, od roku 2010 až 2011 se hlavním trendem webového designu stává čistý, téměř až minimalistický webový design, spojený s funkcionalistickým přístupem k obsahu stránky. Pro webové stránky se používají kompaktnější barevné palety. Pro pozadí stránky jemné a téměř nenápadné textury. Na stránkách se objevuje omezený počet prvků, takže je pozornost návštěvníka efektivně směrována na to, co chceme prezentovat uživatel na stránce nebloudí, téměř okamžitě se zaměří na hlavní body, které mají dost prostoru v designu vyniknout. Designér se nesnaží za každou cenu zaplnit každý volný pixel prostoru, díky tomu vznikají na stránkách velké bloky prázdného prostoru a celý design působí volněji a vzdušněji. Typografie jako taková hraje na stránce zásadní roli, v některých případech se můžeme setkat s tím, že většina vzhledu webu je vystavěna pouze za použití typografických prvků. V nastíněných trendech plánuje webová grafika pokračovat i v budoucích letech. Zejména v posledním roce ale dochází k rozšíření technologie HTML 5 a spolu s ním vzniká nová generace webových stránek. Formát HTML 5 umožňuje vytvářet dynamické 15 ARANDILLA, Rachel. Web Design History: From The Beginning. 1stwebdesigner - Web Design Blog 23

24 stránky bez potřeby dalších technologií a přitom poměrně kvalitně zajišťuje kompatibilitu napříč platformami a zařízeními. Do popředí se také dostává design mobilních verzí webových stránek a internetových služeb. Obrázek 9: příklad moderního, funkčního a minimalistického grafického webového designu (zdroj: 24

25 2.3 Omezení webové grafiky Při tvorbě webové grafiky musíme počítat se dvěma zásadními problémy (nebo chceme-li omezeními). Prvním z nich je samotná přenosová trasa server > uživatel, druhým z nich je zobrazení obsahu na zařízení uživatele. Prvním omezením je tedy rychlost internetového připojení uživatele, který se pokusí na webovou stránku přistoupit. Je jasné, že jakýkoliv grafický soubor bude datově několikanásobně náročnější, než například prostý text. Pokud bude grafických souborů na stránce několik, případně doplněných o další multimediální obsah nebo o skripty na pozadí, bude přímo vzrůstat i objem dat, který musí internetové připojení uživatele přenášet. Historicky se jednalo o zásadní problém, který bránil v rozšíření graficky složitých internetových prezentací. Spolu s rozvojem informačních technologií však došlo i k masivnímu rozšíření rychlého internetového připojení pomocí ADSL a dalších technologií. Pro srovnání je možné se podívat na statistiky internetového serveru DSL.cz, který dlouhodobě zpracovává statistiky o rychlosti internetového připojení v ČR. 16 Průměrná naměřená rychlost připojení k internetu pomocí ADSL v březnu 2012 byla kb/s, to je více než 86x větší přenosová rychlosti, než u historického vytáčeného připojení. Tento vývoj technologií nám dovoluje nasazení poutavé webové grafiky v rozsahu, v jakém by to dříve nebylo možné. Obrázek 10: statistiky rychlosti internetu v období 3/2012 (zdroj: 16 Naměřené rychlosti internetu na DSL.cz v březnu DSL.cz 25

26 Podle serveru HTTP Archive 17 je průměrná velikost dnešní internetové stránky cca 1 MB (přesně 1068 kb). Statistika sice bere v potaz pouze americké weby, podle serveru Živě.cz ale nejsou české weby žádnou výjimkou a jejich velikost se při prvním načtení také pohybuje kolem 1 MB dat. Ze statistik dále vyplynulo, že více než 60% načítaných dat je tvořeno právě grafikou stránek (nebo jinými grafickými prvky, například reklamou). 18 Obrázek 11: průměrná velikost webové stránky podle serveru HTTP Archive s procentuálním rozložením prvků (zdroj: Rychlost načítání stránky můžeme kompenzovat pouze pomocí optimalizace grafických souborů a užíváním vhodných formátů, nemůžeme ho ale nikdy zcela eliminovat. Je nutné počítat s tím faktem, že na pomalejším připojení se bude grafická stránka vždy načítat pomaleji. Mezi další dva problémy, kterým musíme při návrhu designu věnovat pozornost, jsou rozlišení monitoru cílového uživatele a v omezené míře také internetový prohlížeč, který uživatel používá pro přístup k internetu. Rozlišení počítačových monitorů se dlouhou dobu příliš neměnilo, v poslední době však posun technologií ovlivňuje i tuto položku. Podle statistik společnosti StatCounter bylo dlouhodobě nejpoužívanějším rozlišením rozlišení 1024x768 pixelů, v poslední době je však i toho rozlišení 17 Zdroj: 18 ČÍŽEK, Jakub. Současné weby by starý modem stahoval dlouhé minuty. Živě.cz 26

27 nahrazováno vyššími, zejména díky velkému rozmachu notebooků s širokoúhlým rozlišením. 19 Obrázek 12: statistiky nejpoužívanějších rozlišení používaných pro přístup k webu (zdroj: Velice podobné hodnoty můžeme vyčíst i ze statistiky už dříve zmíněného serveru W3Schools.com. V této statistice je sice podíl rozlišení 1024x768 o několik procent menší (17% a 13%), než v předešlé statistice, je to ale dáno odbornějším zaměřením webu a uživatelů, kteří na něj přistupují. Díky těmto statistikám můžeme bezpečně ignorovat rozlišení menší než 1024x768. Se samotným rozlišením 1024x768 ale musíme stále počítat, a v ideálním případě nastavit šířku navrhované stránky tak, aby uživatel nemusel pomocí myši přesouvat obraz pro kompletní zobrazení obsahu stánek, pokud to nebude vyloženě nutné nebo zamýšlené. Z těchto důvodu používá velká část webových designerů pro šířku stránky hodnotu pixelů. 19 ČIČÁK, Matěj. Rozlišení obrazovky už není nejpoužívanější. Živě.cz 27

28 Obrázek 13: statistiky nejčastěji používaného rozlišení návštěvníků stánek W3Schools.com (zdroj: Kompatibilita jednotlivých internetových prohlížečů se nás při návrhu grafického designu příliš netýká. V současné době už všechny majoritní internetové prohlížeče (Internet Explorer, Chrome, Firefox, Opera, Safari) plně podporují používané grafické formáty. Další problémy mohou vznikat zejména při špatném zpracování kódu stránek, u spouštěných skriptů, nebo také u nestandardních fontů (sad počítačových písem). Z tohoto důvodu se užití vlastních fontů na internetových stránkách příliš nedoporučuje a nepoužívá (viz obrázek 18), problémy však mohou vzácně nastat i u velice rozšířených písem, jak varuje například Tůma: Volba písma pro web je zatížena nebezpečím, že vámi předepsaný font návštěvník vašich stránek na svém počítači nemá 20 Obrázek 14: poměr stránek, které obsahují nebo používají nestandardní fonty (zdroj: 20 TŮMA, Tomáš. Počítačová grafika a design. Str

29 Historicky se při návrhu webové grafiky designér setkával ještě s jedním problémem, se kterým se v dnešní době už v podstatě nesetkáme. Tím problémem bylo omezení zobrazovacího hardwaru na straně uživatele, který nemusel vlastnit monitor umožňující zobrazit určitou barevnou hloubku (a zobrazoval například jenom 16 barev), kterou grafika na webové stránce používala. Tento problém byl částečně eliminován použitím palety tzv. bezpečných barev. Jednalo se o soubor 216 bezpečných barev a odstínů, u kterých byla do velké míry zaručena správnost zobrazení na většině monitorů (obrázek 14) 21. I když tento problém dnes neplatí, musíme stále myslet na to, že každý uživatel bude náš design prohlížet v jiném prostředí a na jiném počítačovém monitoru. Proto profesionální weboví designeři často doporučují prohlédnout si výslednou grafiku i v jiném prostředí a na jiném monitoru, než na kterém pracujeme. Krčmář přímo doporučuje: Musíme si uvědomit, že každý návštěvník nesedí ve stejně osvětlené místnosti, design neuvidí na stejném a stejně nastaveném monitoru Výslednou práci je dobré si prohlédnout i na jiných monitorech 22 Obrázek 15: ilustrace rozdílu mezi plnou paletou odstínů a "bezpečnými webovými barvami 21 GREMILLION, Ben. How to Calibrate Color for the Web. Webdesigner Depot 22 KRČMÁŘ, Jakub. Adobe Photoshop - Praktický webdesign. Str

30 Samozřejmě všechna výše uvedené omezení platí pro navrhování internetových stránek, které budou prohlíženy na počítačovém monitoru nebo na displeji přenosného počítače. Rozdílná situace vzniká, pokud navrhujeme internetovou prezentaci pro zobrazení na mobilním zařízení (tablet, PDA, mobilní telefony), musíme počítat s jinými rozlišeními, nižší rychlostí datových přenosů a případnou omezenou funkčností mobilních internetových prohlížečů nebo mobilních operačních systémů. Návrh mobilní verze internetové prezentace však přesahuje záběr této práce a při jejím návrhu se často používá jiných prvků a rozložení stánky (například umístění položek menu a množství grafiky). 2.4 Grafické formáty pro web V prostředí sítě internet se setkáme se třemi nejpoužívanějšími rastrovými grafickými formáty. 23 Při samotném návrhu webu budeme často používat ještě další soubory, které mohou být závislé na použitém grafickém editoru, používají se v průběhu práce nebo mohou sloužit pro snadnou prezentaci webu bez potřeby programování kódu. Mezi tyto soubory patří zejména formáty PSD nebo PDF. JPEG Grafické soubory JPEG jsou díky svým zajímavým vlastnostem zřejmě nejpoužívanějším formátem pro 2D počítačovou grafiku. JPEG je formát velice vhodný pro barevně složité snímky nebo pro snímky s velice jemnými barevnými přechody, protože dokáže (na rozdíl od formátu GIF) pracovat s velkým množstvím barev a s velkou barevnou hloubkou (standardně 24 bitů). Díky těmto vlastnostem je velice oblíbený v digitální fotografii. Soubory ve formátu JPEG jsou ukládány s tzv. ztrátovou kompresí. Velikost souboru je redukována za cenu snížení jeho obrazové kvality. Toho můžeme efektivně využít při optimalizaci grafických souborů pro umístění na webu. Při příliš velkém kompresním poměru ale dochází ke znehodnocení obrazu, které už poté není možné zcela odstranit. Velká rozšířenost a kompatibilita napříč operačními 23 SKŘIVAN, Jaromír. GIF, JPEG a PNG - jak a kdy je použít? Interval.cz 30

31 systémy a internetovými prohlížeči zajistila formátu JPEG velkou oblibu mezi webovými designery. Ještě do nedávné minulosti bylo možné považovat formát JPEG za nepsaný standard pro webovou grafiku. Obrázek 16: JPEG při maximální úrovni kvality a při minimální kompresi Obrázek 17: JPEG při minimální úrovni kvality a při maximální kompresi PNG Formát PNG je bitmapový grafický formát, používající pro ukládání souborů bezztrátovou kompresi. Byl vyvinut především jako náhrada dříve patentovaného formátu GIF. Oproti tomu však nabízí několik výhod, například 24 bitovou barevnou hloubku (ve skutečnosti podporuje dokonce až 32 bitů), díky které umožňuje stejně kvalitní práci s barvami, jako formát JPEG a je tak použitelný i pro fotografie. Zároveň podporuje i tzv. alfa barevný kanál, díky kterému může být PNG obrázek v určitých 31

32 částech průhledný. Díky jiné kompresi jsou soubory formátu PNG lépe schopné zobrazit text, čisté barevné plochy a ostré přechody, na druhou stranu, obecně jsou cca 5x 10x datově náročnější, než stejné soubory ve formátu JPEG. Díky silnému zastarání formátu GIF se formát PNG na internetu velice rychle rozšiřuje. GIF Formát GIF je poslední z trojice nejvyužívanějších bitmapových formátů v prostředí internetu. Z této trojice je také nejstarším. Standard formátu GIF byl vyvinut už v roce 1987 a ještě dnes je druhým nejpoužívanějším bitmapovým formátem (obrázek 25). Nehodí se pro barevně složité grafické objekty, protože podporuje maximálně 8 bitovou barevnou hloubku (takže je schopen zobrazit pouze 256 barev). Mezi jeho výhody patří zejména možná průhlednost (díky přítomnosti alfa kanálu) a bezztrátová komprese při ukládání. Soubor GIF také může obsahovat několik obrázků, čehož se využívá při tvorbě animací. Pokud budeme připravovat grafiku pro použití na webové stránce, bude finální výstup vždy v jednom z těchto tří formátů souborů. Obrázek 18: poměr jednotlivých grafických formátů na webu (zdroj: 32

33 PSD Formát PSD je uzavřený formát společnosti Adobe, která ho používá jako standardní formát pro ukládání souborů v programu Photoshop. Soubory ve formátu PSD jsou datově velice náročné díky tomu, že uchovávají všechna relevantní data použitá při práci se souborem (barevný prostor, vrstvy, vodící čáry a další). Mimo programu Adobe Photoshop dokáží soubory typu PSD zobrazit i další grafické programy, často je to ale pomocí doplňkových modulů a další práce se souborem může být omezená nebo problematická. PDF Formát PDF je formát vyvinutý společností Adobe pro snadné zobrazování souborů bez ohledu na platformu (nezávisle na softwaru a hardwaru). Soubor s příponou PDF proto může obsahovat jak grafiku, tak text. Při tvorbě grafiky pro web můžeme formát PDF použít například pro prezentaci grafického návrhu a budeme mít jistotu, že příjemci se zobrazí obsahu souboru tak, jak bylo zamýšleno. Určení správného grafického formátu výstupních souborů pro web je jednou ze základních dovedností a znalostí každého webového designéra. Ke správnému rozhodování pomůže především znalost technických a praktických výhod a omezení jednotlivých popsaných formátů. Pro ukládání digitálních fotografií na web tak bude nejvhodnější formát JPG, který nabízí nejlepší poměr datové úspory a kvality. Formáty PNG a GIF se nám naopak hodí při exportu jednodušších grafických prvků, které nevyžadují použití plné barevné hloubky, jako jsou ikonky, menu a navigační prvky stránek. Zvláštním využitím formátu GIF jsou jednoduché animace. Oproti animacím ve formátu Flash má GIF výhodu znatelně menší velikosti a větší kompatibility internetových prohlížečů. Naopak GIF animace nemohou používat plné barevné rozsahy nebo interaktivní prvky. Zvláštní kapitolu výstupních souborů tvoří formát PSD, který se používá pouze pro ukázkový výstup kompletního designu. 33

34 2.5 Optimalizace souborů I když není datová náročnost grafických souborů takovým problémem jako dříve, dobrá optimalizace výstupních souborů je stále důležitá a může zredukovat čas potřebný k načtení webové prezentace. Kromě zvolení toho správného grafického formátu, můžeme velikost souborů optimalizovat i několika dalšími způsoby. Redukce barevné hloubky tam, kde všechny barvy nevyužijeme. U některých grafických objektů často nevyužijeme celou barevnou hloubku, kterou daný formát podporuje. V takových případech ji můžeme zredukovat bez zásadního dopadu na kvalitu grafiky (pro tlačítka nebo ikonky nemusíme používat celých 24 bitů). Formát JPEG není pro příliš velkou redukci barevné hloubky vhodný, protože můžeme těžko definovat, kterých barev se bude posun týkat (což je jasně ilustrováno na straně 31). Naopak vhodným formátem pro podobný způsob optimalizace jsou soubory GIF nebo PNG. Na obrázku 18 je příklad takové optimalizace, u takto jednoduchého prvku nám stačí pouze 8 bitů, použitelné jsou dokonce i 4 bity (16 barev). Obrázek 19: optimalizace velikosti pomocí snížení barevné hloubky 34

35 Zvolení vhodného poměru mezi úrovní komprese a požadovanou kvalitou. Tento bod se týká především ukládání grafiky ve formátu se ztrátovou kompresí. JPEG nám dovoluje použít i velice silný kompresní poměr, čehož se dá dobře využít u grafických prvků, které jsou méně náchylné ke vzniku obrazových artefaktů. Toto nastavení bude silně individuální a je nutné se u každého ukládaného souboru přesvědčit, kde je hranice komprese a použitelnosti. Optimálním rozdělení výstupních souborů a použitím stejných prvků. Některé grafické prvky nemusíme na web ukládat celé nebo je načítat vícekrát. U takových prvků nám udělat malý výřez a kódem říct prohlížeči, aby tento prvek zobrazil například x krát vedle sebe, až do potřebné šířky. Tuto metodu je velice vhodné použít u grafických motivů, u kterých se opakuje vzor nebo které slouží jako pozadí stránky. Na obrázku 19 je výstupní soubor, který může na stránce sloužit jako část grafiky menu. Protože se ale jeho vzor (textura) opakuje, můžeme z tohoto prvku vyříznout pouze část o šířce několika pixelů a poté tuto vyříznutou část naklonovat pomocí kódu stránky. Internetový prohlížeč uživatele stáhne pouze vyříznutou část o zanedbatelné velikosti a ne celý obrázek. Obrázek 20: příklad optimalizace grafického prvku "oříznutím" jeho části Pro ilustraci - rozdíl mezi původním obrázkem a jeho vyříznutou částí je přibližně 30 kb, které v této chvíli nebude muset prohlížeč načítat. 35

36 2.6 Nástroje pro grafickou tvorbu Pro praktickou tvorbu webové grafiky budeme potřebovat jeden z bitmapových grafických editorů. V dnešní době se nám nabízí široká možnost volby komerčních i nekomerčních programů. Ty nejpoužívanější a nejvhodnější jsou popsány níže. Pro zúžení výběru se vymezíme pouze na platformu Microsoft Windows. Mimo jiné je to z toho důvodu, že operační systém Windows je dlouhodobě ve školním prostřední nejpoužívanější. Většina uvedených programů je navíc multiplatformní a existuje ve verzích pro ostatní operační systémy. Adobe Photoshop ( Jako příklad plnohodnotného a zcela profesionálního komerčního nástroje pro práci s 2D grafikou je nutné uvést program Adobe Photoshop. Díky možnostem, které tento program nabízí je právem považován za nepsaný standard mezi ostatními bitmapovými grafickými editory. Nejnovější verzí je Adobe Photoshop CS6, který byl představen na začátku roku Největší síla programu spočívá v jeho množství nástrojů a univerzálnosti, díky které můžeme v programu Photoshop pracovat s dvourozměrnou grafikou bez ohledu na zaměření od retušování digitálních fotografií, přes malování, až po grafický design a předtiskovou úpravu. Tomu dopomáhá efektivní systém klávesových zkratek, velké možnosti vlastní konfigurace pracovního prostředí a obecně vysoká úroveň efektivity práce. Mezi profesionálními webdesignery je Photoshop oblíbený zejména pro propracovanou zprávu vrstev v obraze a pro své nástroje, přímo uzpůsobené a vytvořené pro snadnější export hotové grafiky a přípravu grafického designu pro kodéra nebo vývojáře webu ADOBE CREATIVE TEAM. Adobe Photoshop CS5 oficiální výukový kurz. Str , str

37 Obrázek 21: výchozí obrazovka programu Adobe Photoshop CS5 Nezkušené uživatele takové množství možností může spíše odradit. Dalším problémem pro standardního uživatele je vysoká cena programu, která je v současné době přibližně Kč. Společnost Adobe však nabízí i licence pro studenty a pedagogické pracovníky, stejně jako multilicence pro školy a instituce. Cena těchto hromadných licencí je individuální a je podmíněna jasným prokázáním nároku, rozdíl cen však může být v řádech tisíc, až několika desítek tisíc. Pro vyzkoušení je také možné zvolit časově omezenou zkušební verzi. GIMP ( GIMP (GNU Image Manipulation Program) je propracovaný a zdarma poskytovaný editor, který byl původně vyvinut pro operační systém Linux. V současné době existuje verze i pro operační systém Windows. Často se o něm mluví jako o přímé konkurenci pro Adobe Photoshop. Stejně jako Photoshop, i GIMP se neomezuje na jeden směr dvourozměrné grafické tvorby, a je možné v něm stejně dobře upravovat 37

38 digitální fotografie, jako navrhovat webový design. Program podporuje velké množství formátů souborů, plnohodnotnou práci ve vrstvách, množství integrovaných grafických filtrů a další nástroje. Zásadní je pro uživatele nejnovější verze s označením 2.8, vydaná v roce 2012, která kromě dalších vylepšení nabízí i významné zlepšení ergonomie práce v programu a zlepšení uživatelského prostředí. To se nyní vzhledově více přibližuje komerčnímu Photoshopu a při troše snahy je možné si uživatelské prostředí nastavit úplně stejně. Program GIMP je poskytován zdarma. Obrázek 22: výchozí obrazovka programu GIMP Paint.NET ( Paint.NET je další z oblíbených bitmapových editorů. V dřívějších verzích byl vyvíjen pouze jako alternativa k jednoduchému programu Malování, který je standardní součástí Microsoft Windows. V poslední verzi 3.5 však tento program dostal širokou sadu vylepšení a kompletně přepracované uživatelské rozhraní, které z něj dělají velice dobře použitelný bitmapový editor pro tvorbu a úpravu dvourozměrné grafiky. Na první pohled sice nenabízí tolik možností a nástrojů jako už zmíněný Photoshop nebo GIMP, 38

39 jeho silnou stránkou je však malá velikost, velká rychlost a pro začátečníka i velice intuitivní a jednoduché uživatelské rozhraní. Program Paint.NET je poskytován zcela zdarma. 25 Obrázek 23: výchozí obrazovka programu Paint.NET 25 KUBEŠ, Radek. Ušetřete desetitisíce s grafickými programy zdarma. Technet.cz 39

40 Díky rozvoji internetových technologií ale dnes můžeme použít i čistě online grafické editory. Ty nám sice zatím nenabídnou takový komfort práce a rychlost, na jakou jsme zvyklí z plnohodnotných programů, pro někoho ale mohou představovat kvalitní dočasné řešení nebo řešení tam, kde není možné programy nainstalovat přímo. Pro využívání těchto editorů je nutné vlastnit dostatečně rychlé připojení k internetu a aktuální verzi jednoho z moderních internetových prohlížečů (například Google Chrome). Jejich výhodou může být fakt, že nejsou závislé na používaném operačním systému. Pixlr ( První a asi nejznámější čistě online bitmapový editor je Pixlr. Jeho velkou výhodou je kompletní česká lokalizace a uživatelské prostředí, které v podstatě kopíruje uživatelské prostředí klasických editorů. Mezi dostupnými nástroji nechybí žádný ze zásadních a program dokonce obsahuje správu vrstev a vestavěné grafické filtry. Díky tomuto vybavení není Pixlr pouze nástrojem pro úpravu fotografií, ale umožňuje i základní tvorbu grafiky. 26 Splashup ( Aplikace Splashup je druhým zástupcem z kategorie volně použitelných internetových bitmapových editor. Jeho uživatelské rozhraní a rychlost jsou velice podobné předešlému programu, nicméně Splashup na první pohled nenabízí takové možnosti úprav jako Pixlr a také není lokalizován do českého jazyka, což může být pro někoho značná nevýhoda. 26 KUBEŠ, Radek. Ušetřete desetitisíce s grafickými programy zdarma. Technet.cz 40

41 Obrázek 24: výchozí obrazovka aplikace Pixlr Obrázek 25: výchozí obrazovka aplikace Splashup 41

42 Adobe Photoshop CS6 GIMP 2.8 Čeština Podporované OS Cena HW požadavky Ano Ano Windows, Linux, Mac Windows, Linux, Mac Dle licence 27 Intel Pentium 4, 1 GB Ram Zdarma PaintNet 3.5 Ano Windows Zdarma Pixlr Ano Všechny běžné OS Zdarma Splashup Ne Všechny běžné OS Zdarma Adobe Photoshop CS6 Práce ve vrstvách Přímý export do PDF Možnost práce s PSD Nezjištěno CPU 800 Mhz, 512 MB Ram Flash, připojení k internetu Flash, připojení k internetu Vlastní formát Ano Ano Ano, nativně PSD GIMP 2.8 Ano Ano PaintNet 3.5 Ano Ano Ano, modulem Ano, modulem Pixlr Ano Ne Ne Splashup Ano Ne Ne XCF PDN není / běžné formáty Není / běžné formáty Tabulka 1: srovnání základních vlastností zmíněných bitmapových editorů 27 Licence programu Adobe Photoshop CS6 je nabízena v několika verzích, standardní komerční licence stojí od cca Kč (elektronická distribuce) po cca Kč (DVD distribuce). Společnost Adobe nicméně nabízí i znatelně výhodnější školní licence v ceně cca 6000 Kč (pro učitele, studenty a pracovníky ve vzdělávání) nebo hromadné licence pro organizace a velké podniky. Ceny takových licencí jsou často individuální podle rozsahu objednávky a / nebo instituce. (zdroj: 42

43 3 PRAKTICKÝ WEBDESIGN Hlavním cílem této části práce budou demonstrace a ukázky praktického využití informací z předcházejících částí. Výstupem bude realizovaný grafický návrh podoby jednoduchých webových stránek. Z realizace návrhu bude také možné získat dost informací pro porovnání některých možností komerčních a nekomerčních nástrojů a také podklady pro řešení případných omezení nebo problémů, které mohou při práci ve školním prostředí nastat. 3.1 První kroky při návrhu Realizace každé nové internetové stránky je v podstatě tvůrčím procesem, který se skládá z jednotlivých, na sebe navazujících, kroků. Podle typu a rozsáhlosti internetové stránky se tohoto procesu účastní jeden nebo více lidí. Pokud budeme vytvářet stránky malého rozsahu, nekomerční stránky nebo stránky pro vlastní užívání, budeme se na jejich kompletní tvorbě podílet pouze my. Takový proces můžeme přirovnat k domácímu kutilovi, který staví zahradní domek. Sám si zajistí nákres, připraví materiál a domek postaví. Zcela rozdílná potom bude realizace rozsáhlých stránek od grafického nebo webdesign studia. V takovém případě zajišťují jednotlivé kroky realizace rozdílné osoby. Pro ilustraci to můžeme přirovnat ke stavbě domu plány a podobu nakreslí architekt, materiál dodá dodavatel, dům postaví dělníci. Tento přístup byl nastíněn už v úvodu části Grafika pro web a webový design. Realizaci nové internetové stránky nejčastěji tvoří následující kroky: 1. Shromáždění informací o obsahu webu. 2. První náčrt rozložení stránky a vytvoření blokového schématu stránky. 3. Vytvoření vlastních grafických podkladů. 4. Naprogramování kódu stránek. 5. Finální aplikace grafiky. Tyto kroky jsou dodrženy v naprosté většině případů. Nicméně v některých případech mohou být doplněny (například o konzultace se zákazníkem nebo 43

44 s programátorem u komerčních projektů) nebo rozšířeny. Často se navíc pod dílčími kroky nachází kroky menší, které je nutné k úspěšnému dokončení realizace celého webu provést. Velmi dobře a detailně celý proces přípravy (zejména) komerčních projektů popisuje například W. Willardová v knize Web Design: A Beginner s Guide, 28 základní předpoklady k vytvoření správné podoby webu, s ohledem na jeho účel, zmiňuje také C. Eccher ve své knize Professional web design v kapitolách 3 a Jako vhodné cíle pro praktickou část práce byly zvoleny zejména tyto body: 1. Návrh grafické podoby. 2. Vytvoření všech potřebných grafických prvků v editoru. 3. Ukázka přípravy vytvořené grafiky pro export. S ohledem na zaměření a cílovou skupinu této práce (školní výuka) byly jako vhodný ukázkový projekt vybrány internetové stránky menšího rozsahu a jednodušší grafické podoby, která je však dostatečná pro ukázku základních operací v grafickém editoru. 3.2 Rozložení grafiky na stránce Při stanovení nejlepšího možného rozložení prvků stránky je zásadní přihlédnout k zamýšlenému účelu stránky, množství obsahu na stránce a k dalším prvků, které budou na stránce umístěny (například fotogalerie). Obecně můžeme webové stránky podle obsahu rozdělit do několika nejběžněji se vyskytujících typů. Největší zastoupení mají webové stránky, které reprezentují organizace nebo firmy nebo se specializují na poskytnutí informací o určitém tématu. Ty obsahují velké množství informací, často v několika úrovních. Kromě těchto (dá se říci klasických) stránek se můžeme při navrhování setkat minimálně se dvěma dalšími typy webových prezentací. Prvním z nich jsou produktové stránky, často označované jako mini- nebo mikro-weby. Mikroweby jsou specifické webové stránky, které mají za úkol marketingově podpořit přesně definovanou akci, službu nebo produkt. Dalším typem, se kterým se často setkáváme, jsou osobní stránky - blogy. Ty fungují jako internetové zápisníky, slouží pro prezentaci 28 WILLARD, Wendy. Web Design: A Beginner s Guide, Second edition. Část 1, str ECCHER, Clint. Professional web design Techniques and templates (CSS and XHTML). Kapitola 5 a 8. 44

45 názorů, zájmů nebo koníčků vybraného jedince nebo skupiny jedinců nebo mohou sloužit jako neoficiální informační kanál společností. Tento typ stránek má podobnou strukturu, kterou tvoří zveřejňované články, řazené do kategorií podle obsahu nebo podle času publikování. Kromě uvedených typů se samozřejmě na internetu vyskytuje množství dalších webových stránek. Mezi takové webové stránky patří různé informační systémy, vyhledávače, zpravodajské servery, sociální sítě, diskuzní servery a fóra, internetové fotogalerie a další. Každou takovou internetovou stránku můžeme rozebrat na několik dílčích částí (prvků). Nejčastěji používané rozdělení rozlišuje tyto prvky: záhlaví (hlavička webu), tělo stránky, navigace a patička (zápatí). Různé způsoby rozdělení obsahu webových stránek je ilustrováno na následujících stranách. Pomocí vhodné kompozice prvků stránky můžeme zdůraznit žádoucí místa na stránce a efektivně vést pozornost návštěvníka po obsahu stránky podle priority informací, které se mu snažíme sdělovat. Obrázek 26: klasické rozdělení prvků webové stránky 45

46 Obrázek 27: rozložení stránky s kombinací dvou typů navigace Obrázek 28: rozložení stránky s důrazem na obsah 46

47 Hlavička Hlavička je v návrhu grafického designu právě tím prvkem, který by měl na první pohled stránku představit a který by měl zaujmout návštěvníka. V tomto poli se nejčastěji nachází logo a většinou i stručný popis, který jasně vyjadřuje obsah webu. Mohou se v něm nacházet i další zásadní prvky designu například pole pro vyhledávání. V poslední době si také můžeme všimnout trendu, kdy na první stránce celého webu dochází ke spojení hlavičky a těla stránky do jednoho informačněprezentačního celku. Navigace Nejdůležitějším prvkem stránky, který má navíc přímý dopad na uživatelskou přístupnost webu a na návštěvníka je navigace. Tento fakt zdůrazňuje Steve Krug: Vaším cílem by mělo být vytvořit každou stránku natolik intuitivní, aby průměrný uživatel pouhým pohledem pochopil, co je zač 30 Dlouhou dobu bylo standardem levé vertikální menu stránky. V posledních letech však toto uspořádání menu mizí a navigace se přesouvá buď na pravou stranu, kde je blíže uživateli, který nejčastěji používá myš pravou rukou (takže přirozeně s kurzorem setrvává v této části), nebo se mění na horizontální menu, které je umístěno buď na úplném vrcholu stránky (nad hlavičkou) nebo je zakomponované mezi hlavičku a tělo stránky. Navigace by měla mít jasně definované a vypovídající odkazy a měla by být viditelná za všech okolností. Vzhledem k uživateli by navigace měla co nejméně měnit své umístění na stránce, v ideálním případě vůbec. U složitějších vícevrstvých webů je často navigace doplněna o další menu, díky kterému se uživatel může vrátit na ty nejdůležitější části webu. V takových případech se často používá kombinace zmíněných stylů menu, aby došlo k jejich odlišení tak, jak je ukázáno například na obrázku Krug, Steve. Web design - nenuťte uživatele přemýšlet! Str

48 Tělo stránky Tělo stránky obsahuje prezentovaný obsah, ať už ve formě textových nebo grafických informací. Na tuto část stránky chceme nejčastěji přitáhnout pozornost návštěvníka. Respektive pozornost návštěvníka nejčastěji upoutá celkový vzhled webu nebo provedení hlavičky menu, úkolem správného designu je potom tuto získanou pozornost přesměrovat na skutečný obsah webu, umístěný v těle stránky. Patička Patička je zápatím stránky a má stránku vhodně uzavírat graficky a obsahově. V patičce mohou být umístěny i doplňující informace, například o majiteli stránek, o použitých technologiích, kontaktní informace a další. Často je součástí patičky i textová verze navigace, která pomůže návštěvníkovi s orientací v rámci webu. Zatímco historicky obsahovala patička pouze stručné informace (často o způsobu kódování stránek nebo o doporučeném rozlišení), grafické trendy posledních let kladou na patičku vyšší důraz a umísťují do ní mnohem větší množství informací. Důvod vysvětluje v jednom ze svých článků Ben Gremillion: Spodek stránky není konec webu. Informativní, podmanivé zápatí je přirozeným místem, odkud je možné lidi navádět k dalším informacím, které máte uvnitř webu, aby se nepotulovali bezcílně sem a tam. 31 Důvodem pro tento trend může být také fakt, že do hlavičky je možné pohodlně ukrýt prvky, které by jinak rušili jednotný nebo minimalistický design webu. Obrázek 29: patička serveru youtube.com obsahující doplňující údaje o webu 31 GREMILLION, Ben. Jak vytvořit zápatí, za které se nebudete stydět? Interval.cz 48

49 3.3 Vlastní tvorba Vlastní tvorba grafické podoby webu začíná po shromáždění všech zásadních informací, které mohou vzhled nebo rozložení prvků na stránce nějakým způsobem ovlivnit. Na základě těchto informací vypracujeme blokové schéma stránky nebo model, jaký je ukázán na ilustracích číslo Tento náčrt ještě nemusí být zpracován v grafickém editoru, respektive nemusí být vůbec digitálně zpracován. První návrhy webových grafiků často vznikají tužkou na papíře. Praktická část práce probíhá v bitmapovém editoru Adobe Photoshop CS5. Výsledný design je ilustrován na obrázku číslo 30. Jeho složitost (respektive jednoduchost) je zvolena tak, aby ho bylo možné realizovat téměř v každém grafickém editoru a s žáky, kteří mají pouze základní vědomosti o tvorbě počítačové grafiky nebo o prostředí grafických editorů (zejména tedy žáci na úrovni druhého stupně ZŠ). Design využívá jednoduché barevné schéma, složené ze světle šedých odstínů, bílé a odstínů modré. Zvolená kombinace působí dostatečně barevně, vzdušně a lehce. Na stránce je umístěno několik typických grafických prvků, na kterých můžeme snadno ilustrovat základy tvorby, optimalizace a přípravy výstupních souborů. Jednotlivé kroky tvorby jsou pro jednoduchost ilustrovány právě po těchto prvcích. 49

50 Obrázek 30: úvodní stránka webu 50

51 Obrázek 31: druhá úroveň webu a sekundární (vertikální) menu 51

52 Pracovní soubor Jako první krok si vytvoříme hlavní pracovní soubor ve formátu PSD. V menu programu zvolíme Soubor > Nový, pro urychlení také můžeme použít klávesovou zkratku CTRL + N. V dialogu nového souboru nadefinujeme vlastnosti souboru. Tyto hodnoty volíme s ohledem na optimalizaci webu pro vybrané rozlišení (podle části 2.3). V našem případě budou stránky optimalizovány pro rozlišení 800 pixelů horizontálních a větší. Jako šířku celého souboru zvolíme 1000 pixelů, výšku nastavíme takovou, aby byly viditelné všechny prvky, které chceme zobrazit. Rozlišení (DPI), jak už bylo uvedeno, nehraje roli, ponecháme základních 72 DPI. Barevný model vybereme RGB, pozadí bude bílé. Obrázek 32: parametry nového pracovního souboru 52

53 Stanovení vodících linek Nyní v čistém souboru nadefinujeme základní rozložení stránky pomocí vodítek. Vodítka do obrazu umístíme přetažením myší z vertikálních a horizontálních pravítek po stranách pracovního prostoru. V případě potřeby můžeme celou plochu přiblížit nebo oddálit pomocí klávesových zkratek CTRL a + nebo CTRL a a tím upravit citlivost postranních pravítek. Obrázek 33: rozdělení stránky pomocí vodítek 53

54 Tělo stránky Jako první nadefinujeme barvu pozadí celého webu. Zvolíme světle šedou barvu (#DFDFDF), pro rozbití celistvé plochy přidáme do pozadí jemný šum. Šum přidáme z menu Filtry (obrázek 34). Pro rozlišení hlavního obsahu stránky slouží bílý podklad široký 770 pixelů. Podklad vytvoříme v nové vrstvě pomocí nástroje Obdélník (klávesová zkratka U). Po vytvoření můžeme podklad jemně upravit pomocí nástroje Libovolná transformace (CTRL + T). Výslednému podkladu nakonec přidáme stín na obě jeho strany (klikneme pravým tlačítkem na vrstvu a vybereme možnost Volby prolnutí > Vržený stín). U stínu vybereme hodnotu vzdálenosti 0, tím ho umístíme přímo za podklad a pomocí parametru Krytí ho jemně doladíme. Obrázek 34: přidání šumu do obrazu Hlavička Hlavním vizuálním objektem v hlavičce stránky je logo školy a úvodní fotka. Logo školy bylo v tomto případě nadefinováno pomocí nástroje Čára a několika transformací. Nejdříve si pomocí čar navrhneme tvar domu. Poté na jednotlivé čáry aplikujeme nástroj Libovolná transformace > Pokřivit a nakonec je obarvíme pomocí nástroje Plechovka barvy. 54

55 Obrázek 35: úprava čáry pomocí libovolné transformace Fotky umístěné v hlavičce pouze vložíme do souboru, pomocí Libovolné transformace upravíme jejich velikost a natočení. Poté jim přidáme jemný stín a okraj pro zvýraznění. Fotky použité pro ukázku byly volně staženy z databáze referenčních fotografií Při skutečném návrhu samozřejmě použijeme vlastní fotografie školy. Hlavní menu Hlavní horizontální menu vytvoříme pomocí nástroje Zaoblený obdélník. Výplň menu bude tvořit barevný přechod, který celému menu dodá plastičtější vzhled. Klikneme pravým tlačítkem myši na vrstvu s obdélníkem a zvolíme Volby prolnutí. Vybereme možnost Překrytí přechodem. Hodnoty zvolíme podle přiložené ilustrace na obrázku 36. Po kliknutí na přechod se dostaneme na detailnější nastavení barev v přechodu. Barevné hodnoty pro jednotlivé odstíny modré jsou #00599f a #56b4fd. Nastavení si uložíme jako nový přechod, protože ho budeme používat pro další prvky. Pro zvýraznění menu můžeme navíc vybrat možnost Vytáhnout, sílu vybereme jako 1 pixel, tím celému menu nastavíme barevný obrys. Výsledek těchto kroků je na obrázku číslo

56 Obrázek 36: nastavení barevného přechodu menu Do menu zbývá přidat oddělovače tlačítek a vlastní text odkazů. Oddělovač vytvoříme čárou se sílou 1 pixelu. Jako výplň čáry použijeme uložený modrý přechod, pouze otočíme jeho směr o 90. Oddělovač uložíme do samostatné vrstvy a tu podle potřeby duplikujeme. Nakonec mezi oddělovače vložíme text odkazů. Podle potřeby můžeme text dále zvýraznit pomocí možnosti Vytáhnout. Pro potřeby designu se často jedno tlačítko u každého menu zakresluje jako aktivované. Zde to uděláme tak, že jedno pole vybereme pomocí Obdélníkového výběru a vytvoříme z něj novou vrstvu. Tlačítku v nové vrstvě nastavíme odlišnou hodnotu barevného přechodu. Díky nové vrstvě můžeme stav tlačítka jednoduše přepínat pomocí viditelnosti vrstev. Obrázek 37: připravené hlavní menu 56

57 Vedlejší menu Tvorba vedlejšího vertikálního menu je v mnoha krocích podobná jako tvorba hlavního menu. Jako první si opět nadefinujeme tvar menu pomocí nástroje Zaoblený obdélník. Nyní si musíme menu rozdělit na jednotlivá tlačítka. Pomocí nástroje pro Obdélníkový výběr (zkratka M) vybereme rozměry tlačítka, klikneme na výběr pravým tlačítkem a z kontextového menu vytvoříme Vrstvu kopírováním. Tím vytvoříme novou vrstvu požadovaného tvaru. Tento krok provedeme pro všechna tlačítka v menu. Obrázek 38: vytvoření nové vrstvy z výběru Tlačítkům nastavíme Překrytí přechodem jako u hlavního menu. Barvy přechodů volíme opačně než u hlavního menu. Do hotového menu doplníme text a menu nastavíme obrys pomocí Vytáhnout. Potom vytvoříme pro menu novou skupinu vrstev pomocí Vrstva > Nová > Skupina z vrstev. 57

58 Obrázek 39: hotové vertikální menu Samolepky Jako grafické prvky přitahující pozornost obsahující důležité informace jsou na hlavní straně použity dvě graficky ztvárněné kancelářské samolepky (lístečky). Vytvoříme novou vrstvu. V této vrstvě pomocí nástroje Obdélníkový výběr a tlačítka SHIFT vytvoříme čtverec. Ten vyplníme požadovanou barvou (Nástroj plechovka barvy). Tuto vrstvu zkopírujeme, pomocí Libovolné transformace upravíme kopii vrstvy tak, jak je ukázáno na obrázku 40. Poté nastavíme mód vrstvy Násobit, tím se nám barva zintenzivní, ale zůstane odstínem podobná. Barvu doladíme pomocí položky Krytí. Tyto dvě vrstvy spolu svážeme (pomocí CTRL vybereme obě vrstvy a z kontextového menu vybereme možnost Svázat vrstvy). 58

59 Obrázek 40: nastavení krytí vrstev u samolepky K vytvoření stínu postupujeme následujícím způsobem. Vytvoříme další kopii hlavní vrstvy. Pomocí plechovky s barvou tuto novou vrstvu přebarvíme na černo a umístíme pod hlavní vrstvu. Jdeme do menu Filtry > Rozostření > Gaussovské rozostření. Hodnotu nastavíme podle uvážení. Nyní použijeme Libovolná transformace > Pokřivit a vytáhneme stín pomocí bodu v levém spodním rohu (obrázek 42). Stejný postup aplikujeme i na hlavní vrstvu, levý spodní roh lehce natáhneme opačným směrem, než stín. Tím získá samolepka reálnější vzhled. Nyní se opět přepneme do vrstvy stínu, vytvoříme nad touto vrstvou Masku vrstvy a pomocí slabého nástroje Guma jemně vygumujeme stín tam, kde se nám nehodí. Obrázek 41: vytvoření nové masky vrstvy Nakonec vybereme všechny vrstvy samolepky a v menu Vrstva > Nová > Skupina z vrstev vytvoříme pro samolepku novou skupinu. 59

60 Obrázek 42: vytažení stínu pomocí nástroje Pokřivení Patička Patička je v případě ukázkového webu pouze stručně informativní. Graficky ji od obsahu stránky rozdělíme vytvořením přímky šedé barvy, informace doplníme pomocí nástroje Text. Logo z hlavičky zmenšíme a vložíme do patičky. Text Po dosazení všech grafických prvků naplníme texty. Text můžeme vkládat dvěma způsoby pouze kliknutím vložíme jednoduchý text. Tažením myši můžeme vytvořit textové pole, které nám dovoluje využít některé další možnosti formátování textu (například zarovnání do bloků nebo přesné formátování odsazení). Pro přehlednost je vhodné si pro osazování textu zobrazit mřížku pomocí menu Zobrazení > Zobrazovat > Mřížku. Rychle vypnout a zapnout ji potom můžeme pomocí kombinace kláves CTRL + H. 60

61 Obrázek 43: možnosti formátování textu v textovém poli Písma použitá na stránce jsou pouze systémová písma OS Windows podle části 2.3. Text v hlavičce a na menu využívá font Trebuchet MS, ostatní texty potom font Arial nebo Arial Bold různých velikostí. 3.4 Příprava výstupních souborů Příprava výstupních grafických souborů je posledním krokem, který webový grafik v editoru zpracovává. Formát a podoba výstupu bude vždy závislá na domluvě s kodérem webu, protože je nutné zohlednit zamýšlený kód stránek nebo použité technologie. Komprese souborů, barevná hloubka nebo výstupní formáty však závisí čistě na úsudku grafika. Mezi předávané soubory patří také náhled celého webu. Často se také kodérovi k výstupním souborům přikládá i pracovní soubor PSD. Export PSD Pokud budeme předávat i soubor PSD, musíme dodržet několik nepsaných zásad. Správně ošetřené PSD může kodérovi napovědět mnohé o struktuře webu. Protože však kodér není grafik, prvním zásadním krokem je uspořádání vrstev tak, aby se v souboru na první pohled vyznal. 61

62 Grafické objekty by měly být umístěny do vlastní vrstvy, která bude řádně a jednoznačně pojmenovaná. Pokud je to možné, jednotlivé vrstvy objektu sloučíme do jedné. Pokud to možné není, vrstvy spolu svážeme a vytvoříme jim samostatnou skupinu. Ukázka čistého uspořádání je na obrázku číslo 44. Vektorové prvky na stránce (texty a tvary) by měly být před výstupem rastrovány. Toho docílíme kliknutím pravým tlačítkem na prvek a zvolíme možnost Rastrovat text nebo Rastrovat vrstvu. Obrázek 44: uspořádání vrstev ve výstupním PSD souboru Pokud kodér nedisponuje grafickým editorem, který soubor PSD otevře (viz část 4.1), předává se náhled webu v měřítku 1:1 ve formátu PNG v maximální kvalitě. 62

63 Export jednotlivých prvků Jednotlivé prvky webu (menu, loga, oddělovače a další) exportujeme jako samostatné soubory v některém z grafických formátů. Na tomto místě je nutné poznamenat, že není možné jednoznačně stanovit správnou podobu a formát výstupního souboru, protože budou přímo závislé na kódu stránky nebo technologii. Například aktuální verze formátovacího jazyka CSS3 umí mnoho grafických objektů a efektů vykreslit přímo v prohlížeči, bez potřeby nahrání grafického souboru. Toho se často využívá zejména pro menu stránek, jedná se však o pokročilejší kódování, které není vhodné pro začátečníky. Klasický přístup na druhou stranu používá rozřezání grafického prvku na menší části a jejich spojení pomocí kódu. Tento přístup budou ilustrovat následující ukázky exportu hlavního menu stránky z obrázku číslo 37. Obrázek 45: příklad ideálního rozřezání tlačítka Na obrázku číslo 45 je zobrazen jeden z možných rozřezání prvku. V tomto případě se jedná o rozřezání za účelem minimalizování datové náročnosti tak, jak je zmíněno v části 2.5. Tlačítko rozdělíme na tři soubory první soubor obsahuje oblý roh menu, druhý o šířce 1 pixelu bude sloužit jako výplň tlačítka a třetím souborem bude oddělovač. Pro celé menu budeme potřebovat ještě ořez druhého okraje menu a výplň vybraného tlačítka. 63

64 Obrázek 46: zvětšená ilustrace výstupních souborů pro tlačítko hlavního menu Přesný postup je následující: 1. Hlavní menu si přeneseme do samostatného PSD souboru. 2. Vypneme zobrazení vrstvy pozadí tak, aby bylo průhledné (v PSD zobrazené jako šedá šachovnice). 3. Vypneme zobrazení textového obsahu menu. 4. Zbylé vrstvy rastrujeme a spojíme do jedné (Vrstva > Sloučení viditelných). 5. Nyní provedeme ořez podle obrázku číslo Ořezaný prvkem přeneseme do vlastního souboru (Soubor > Nový), v dialogu nového souboru vybereme obsah pozadí jako Průhledná. 7. Soubor uložíme jako PNG (viz část 2.4) Soubor > Uložit jako. Formát PNG byl zvolen na základě vlastností popsaných v části 2.4. Zejména díky tomu, že umožňuje v obrázku nadefinovat průhledný kanál a nepřidává do obrazu artefakty, jako komprese formátu JPG. Takto popsaným principem postupně exportujeme všechny grafické prvky na stránce. Kodér webu potom může tyto prvky libovolně násobit pomocí HTML kódu a tím i variabilně měnit rozměry tlačítek. 64

65 Na ilustraci 47 je zobrazena další možnost rozřezání menu na dílčí prvky. Postup je stejný jako výše, aplikace prvků na web bude jednodušší, nicméně datová náročnost je větší. Obrázek 47: příklad další možnosti rozřezání výstupních souborů Tato možnost je méně vhodná a méně variabilní možnost exportu než způsob na ilustraci 46, protože kodér nemůže tak dobře ovlivnit například šířku prvku v případě, že potřebuje do tlačítka nasadit delší text nebo vytvořit úplně celé nové tlačítko. 65

66 4 TVORBA GRAFIKY VE ŠKOLNÍM PROSTŘEDÍ Při tvorbě počítačové grafiky v prostředí školní učebny se můžeme setkat s různými omezeními hardwarové nebo softwarové povahy. Dalším faktorem, který je nutné při výuce řešit, je zapojení látky do výuky a motivace žáků k vlastní tvorbě. Z dlouhodobých výzkumů pravidelně vyplývá velice vysoká oblíbenost IT předmětů u žáků na školách všech úrovní. Mezi hlavní důvody patří praktická povaha výuky a fakt, že žáci v dnešní době využívají počítače a chytré telefony pravidelně i ve svém volném čase. Nejvhodnější způsobem zapojení výuky počítačové grafiky na obecně zaměřených školách je integrace tématu do výuky předmětu Informační technologie. Praktickou část tvorby je nejvhodnější zapojit do výuky jako hromadný projekt pro více žáků. Témat ze školního prostředí se nabízí hned několik a je vhodné je zvolit tak, aby mohli žáci praktický výsledek své práce dále používat. K takové práci budou žáci přistupovat s větším nadšením a vlastní invencí. Takový projekt může být navázán na další výuku základů programování webových stánek a výsledkem celého dlouhodobějšího projektu mohou být například webové stránky školy, webové stránky třídy nebo specifického předmětu. Na takovém webu si mohou žáci navzájem sdílet informace, učební materiály, fotogalerie a další. 4.1 Praktická omezení a řešení Nedostatečné HW vybavení Bohužel i v dnešní době se často můžeme setkat (zejména na základních školách menšího rozsahu) s omezením v podobě zastaralého počítačového vybavení školy. Hardwarové nároky jednotlivých grafických editorů shrnuje tabulka č. 1. Je ale důležité poznamenat, že tyto minimální nároky umožní spuštění programu, nicméně nemusí zaručovat dostatečný komfort nebo plynulost práce v programu. Řešení: V takovém případě je vhodným řešením využití méně náročného grafického editoru (například místo náročného Adobe Photoshopu můžeme použít Paint.NET). 66

67 Nekompatibilita grafických editorů Pracovní soubory jednotlivých grafických editorů nejsou vzájemně kompatibilní. Tento problém může nastat, pokud používáme v průběhu tvorby dva různé editory, nebo častěji v případě, že chceme využít některý z mnoha dostupných grafických tutoriálů, které jsou většinou zpracovány právě pro Adobe Photoshop. Částečnou kompatibilitu s formátem PSD můžeme v programech Paint.NET a GIMP doplnit pomocí takzvaných zásuvných modulů, které otevření souboru umožní. Často však není zajištěna plná kompatibilita (ilustrace 48 a 49). Na ilustraci je jasně vidět, že PSD soubor byl v obou případech otevřen, ale není příliš použitelný. Prvky jsou sice zobrazeny, ale veškeré nastavení vrstev (stíny, ohraničení nebo i výplně barevnými přechody) nejsou zobrazeny. Řešení: Použití pouze jednoho vybraného grafického editoru v průběhu celé práce nebo export souboru PSD do kompatibilního formátu (například PNG). Obrázek 48: otevření PSD souboru v programu Paint.NET 67

68 Obrázek 49: otevření PSD souboru v programu GIMP Omezení možnosti volně dostupných editorů Většina volně dostupných grafických editorů nenabízí pokročilé možnosti, jaké nabízí například program Adobe Photoshop. v programech Paint.NET a GIMP. Například už zmíněné správa vrstev Řešení: V tomto případě bohužel neexistuje jiné řešení, než vytvářený obsah přizpůsobit možnostem grafického editoru. Je tedy vhodné a žádoucí dopředu zmapovat možnosti jednotlivých editorů a tomu přizpůsobit úkol. Ukázkový web v této práci byl zpracován tak, aby ho bylo možné realizovat bez ohledu na editor. 68