pzeleny@kurzygrafiky.cz        Tel.: 724 810 701

Košík je prázdný

Základy počítačové grafiky a webdesignu

Následující text popisuje některé nejdůležitější pojmy používané v počítačové grafice a zejména při návrhu webových stránek. Přečtěte si, kdy je lepší využívat principy vektorové grafiky a naopak kdy bude nutné využít nějaký bitmapový editor. Součástí článku je i základní seznámení s rozlišením (velikostí) obrazu a některé nejčastěji používáné formáty pro ukládání obrázků.

Vektorová a bitmapová grafika

webdesign

V první řadě rozlišujeme aplikace pro práci s bitmapovou, nebo vektorovou grafikou. Jelikož se na webu používají především bitmapové obrázky, zaměříme se hlavně na tuto kategorii. Samozřejmě je možné použít i některý vektorový software, ale export a následné použití grafiky může být někdy složitější.

Bitmapová grafika
Bitmapová grafika je obvykle definována jako čtvercová mřížka (rastr) jednotlivých bodů – pixelů. Velkou výhodou je široká podpora bitmapových obrazů na všech počítačích a na internetu. Nevýhodou je složitější práce s některými objekty, a velmi obtížná změna velikosti, konkrétně zvětšení obrazu. Dalším problémem se kterým se můžete setkat je větší datová náročnost u velkých obrazů, což je v prostředí internetu velmi důležitý aspekt.

Vektorová grafika
Principem vektorové grafiky je matematický popis běžných tvarů. Oproti bitmapové grafice lze vektorové objekty libovolně zvětšovat (zmenšovat) bez ztráty kvality. Vektorovou grafiku je vhodné použít všude kde jsou zvýšené nároky na přesnost. Vše definováno matematicky a máte plnou kontrolu nad pozicí a velikostí objektu. Výhodou je i přímá editace objektů, nemusíte používat vrstvy (i když jsou ve většině vektorových programů dostupné). Bohužel prostředí internetu příliš vektorové formáty nepodporuje. Obvykle je nutné vektorovou kresbu exportovat do některého z bitmapových formátů a teprve poté publikovat na webu.


 

Velikost (rozlišení) obrazu

webdesign

Velikost obrazu je prvním zásadním aspektem pro tvorbu webu. Tím, že bitmapovou grafiku nelze jednoduše zvětšit nebo zmenšit bez ztráty kvality, je potřeba dbát na správnou velikost již od začátku práce. První pravidlo pro rozlišení zní: Pracovat vždy ve zobrazení 1:1 (100% velikosti). Jedině tak uvidíte, jak bude obrázek na webu skutečně vypadat.

V bitmapových obrazech vždy používáme jako jednotky PIXELY (česky – obrazové body). Velikost v pixelech využívají i všechny monitory, digitální fotoaparáty, kamery, obrazovky mobilních telefonů, a další.

Prioritou pro webdesign je velikost monitoru (obrazovky) v pixelech. Tím, že je na trhu velké množství rozměrů, modelů i výrobců, je těžké určit ideální velikost webové stránky vzhledem k velikosti monitoru. Obecně rozšířený názor je tvořit web spíš pro menší monitor tak, aby byl přístupný všem nezávisle na použitém zobrazovacím zařízení.

 

Webovou stránku je sice možné tvořit jako plovoucí (velikost stránky se přizpůsobuje velikosti obrazovky), nebo jako stránku s pevnou šířkou, tzn. Šířkou zadanou přesnou hodnotou v pixelech. O rozdílech mezi plovoucí a pevnou šířkou se více dočtete v následujících kapitolách.

 

Jakou šířku webu tedy zvolit? Za výchozí velikost (rozlišení) monitoru se donedávna považoval rozměr 1024x768 px. V současné době se situace mění a naprostá většina uživatelů již  pracuje s vyšším rozlišením.

webdesign

 


 

Statistiky za posledních několik let dobře ukazují vývoj rozlišení monitorů:

 

rozlišení obrazovky

 

Pokud tedy chcete vytvořit tak, aby se správně zobrazila pro 99% uživatelů, počítejte s rozlišením 1024x758 a vyšším.

 

Pro monitor široký 1024 px je ideální šířka stránky 960px. Pevná šířka webu 960 px je vhodná i pro kompozici webu – viz 960 grid systém.

 


 

Velikost fotografií na webuwebdesign

Dnešní digitální fotoaparáty obvykle pořídí obrázek s výrazně větším rozlišením než je potřebné pro umístění fotografie na web. Nutností je fotografie pro web zmenšovat, hlavně ze dvou důvodů. Jsou to rozměry a datová velikost.

Pro představu uvádím několik typických rozměrů obrázku z digitálního fotoaparátu:

640x480 – Nejmenší rozlišení se kterým se u fotoaparátů můžete setkat. Rozhodně není vhodné pro tisk a úpravy. Pro email nebo umístění na web bývá dostačující.

1216x912 – fotoaparáty s označením 1MP (mega pixel – cca. 1 milion pixelů) vytvářejí obrazy zhruba v této velikosti. Pro moderní monitory téměř ideální.

1600x1200 = 2MP

2240x1680 = 4MP

4064x2704 = 11 MP

Všechny tyto rozměry jsou vhodné pro tisk fotografií, ale pro použití na webu, je doporučené obrázky zmenšit vzhledem k předpokládané velikosti webové stránky. Pokud se chystáte fotky upravovat, např. vyříznout pouze část obrazu, může být vyšší rozlišení vhodné.

Z výše uvedeného vyplývá, že pokud fotografii ze 11MP fotoaparátu otevřeme na počítači s běžným monitorem  ve zobrazení 1:1 (100% zobrazení) bude vidět pouze její část, celá fotografie je zhruba dvakrát větší než obrazovka. Na internetu  můžeme sice zmenšit velikost zobrazení (např. pomocí HTML), to ale může snížit kvalitu zobrazení, a nezmenší datovou velikost.

Ideální velikost fotografie na web je cca. 800x600 pro fotografii v článku (textu), a zhruba 1200x800px pro foto přes celou obrazovku (např. webové fotogalerie).

 


 

Formáty

Grafických formátů používaných na internetu je velké množství. Každý z nich má své výhody a nevýhody. Pro představu si uvedeme a stručně popíšeme některé nejčastěji používané.

.JPG (Joint Photographic Experts Group)
Všeobecně nejčastější formát používaný na osobních počítačích. JPG je formát používající ztrátovou kompresi (při ztrátové kompresi se vždy ztratí část původních dat). Tento formát je vhodný zejména pro ukládání fotografií. Ideální je pro jemné přechody v tónu a barvě. Díky kompresi poskytuje mnohem menší velikost než bezztrátové formáty. Na webu se JPG používá zejména pro fotogalerie, obrázky v textu, a někdy i pro grafické prvky designu. Nevýhodou je ztráta kvality obrazu při vysoké kompresi, nebo při častém ukládání. JPG také nepodporuje průhlednost, ani animace.

.GIF (Graphics Interchange Format)
Je formát využívající bezztrátovou kompresi LZW. Je to bitmapový formát podobně jako JPG, ale na rozdíl od něj pracuje s paletou pouze 256 barev (JPG – cca. 16,7 milionů barev).

Tím je dané použití GIFu – vhodný je pro nápisy, plánky, loga, někdy tlačítka, obvykle spíše jednodušší grafiku. Naopak je GIF téměř nepoužitelný pro fotografie. Výhodou je ovšem možnost používání průhlednosti, a tvorba animovaných GIF obrázků (což je v online prostředí velmi užitečná vlastnost).

.PNG (Portable Network Graphics)
Bezztrátový formát (komprese). Nabízí možnost použití průhlednosti. Pracujese stejnou barevností jako JPG (24 bitová barevná hloubka). V poslední době i možnost animací ve formátu APNG (ten zatím není plně rozšířen). To vše dělá z formátu PNG vhodný nástroj pro tvorbu webového designu. PNG je lepší než JPEG pro obrázky obsahující text, čárovou grafiku, čisté barevné plochy a ostré rozhraní barev. Tam, kde se vyskytují jak fotografické, tak grafické prvky, se musíte rozhodnout mezi čistým zobrazováním bezeztrátového PNG, nebo malým souborem ztrátového JPEG.

.SVG (Scalable Vector Graphics)
SVG je značkovací jazyk (podobně jako HTML) a formát souboru, pro vektorovou grafiku pomocí jazyku XML. Formát SVG je kromě formátu Flash, jediný vektorový formát používaný na internetu. V blízké době se předpokládá výrazný nárůst používání formátu SVG. Zatímco pro rastrovou grafiku je na Internetu formátů dostatek (např. GIF, PNG a JPEG), otevřený vektorový formát zatím na Internetu chyběl.

 

.SWF
Formát programu Adobe Flash je opět vektorovým formátem. Často se používá pro animované bannery, online hry na internetu a různé interaktivní aplikace. Výhodou je malá velikost výsledných souborů. Nevýhodou potom nutnost přehrávání za pomoci Flash prohlížeče (tzv. Flash Player). V mnoha případech jsou flashové aplikace používány jako forma reklamy výrobku, nebo firmy

------ © 2015 KURZY GRAFIKY ------ Všechna práva vyhrazena. Kopírovat obsah bez souhlasu autora je zakázáno.

Icons made by Freepik from www.flaticon.com is licensed by
CC BY 3.0

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie.

 

OBCHODNÍ PODMÍNKY

KURZYGRAFIKY.CZ

Prokop Zelený, DiS.
Veronské nám. 331
Praha 10  10900

pzeleny@kurzygrafiky.cz
tel.: 724 810 701

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie. Informace o cookies ZDE.

  
EU Cookie Directive Module Information