LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> Gimp - GRAFIKA PRO WEB (1.)

Úvod do problematiky
Dnešním dílem začíná část seriálu o gimpu věnovaná tvorbě webové grafiky, přípravě obrázků pro web. První díl bude úvodem do problematiky webové grafiky.

13.7.2005 06:00 | Yippee | Články autora | přečteno 63272×

Grafický návrh webové stránky zahrnuje tyto základní kroky:

  • koncepce stránky
  • návrh navigace
  • příprava obrázků a jejich optimalizace

U grafiky určené pro webou prezentaci, by nás jako její tvůrce nemělo zajímat jen její vzhled a vhodnost, ale i celá řada dalších faktorů. Na následujících někola řádcích uvedu ty nejdůležitější z nich.

rozlišení - udává míru detailů obrázku, které je schopné zařízení zobrazit, zachytit či reprodukovat. Rozlišení se nejčastěji udává v DPI (Dots Per Inch neboli Bodů na čtvereční palec 1 inch = 2,54 cm) nebo v počtu horizontálních a vertikálních bodů (1 280 x 1 024) a nebo v lpmm (line pairs per millimetre neboli počet černých a bílých řádků, které se vejdou do jednoho milimetru). Při práci s webovou grafikou se nejčastěji budete setkávat s rozlišením udávaným pomocí DPI. 300 Dpi je rozlišení pro kvalitní tištěný výstup, pokud je grafika primárně určena pro zobrazení na monitoru (www stránce), stačí ji uložit v rozlišení 72 Dpi. Jetliže umístíte na www stránku grafiku s větším rozlišením, není to chyba, ale je to zbytečné, protože zobrazovací zařízení nejsou schopna zobrazit grafiku v lepším zobrazení než 72 DPI.

barevná hloubka - udává počet barev, které je možné zaznamenat, zobrazit pomocí příslušného zařízení. Skutečné barvy (tzv. True color) je možné uložit v 8 bitech každou ze tří základních barev, z toho vyplývá, že barevná hloubka obrázku v true color je 24-bitů. V tomto případě máme možnost definovat 256 barev pro jeden obrazový bod. Při ukládání barev v RBG je celkový počet možných barev 256 x 256 x 256 = 16 777 216 barev. Nejčastěji se budeme setkávat s těmito barevnými hloubkami 16 bitovou, 24 bitovou nebo 32 bitovou. Gimp je schopný pracovat s 24 bitovou grafikou. Problematikou barev na webu se budeme zabývat v dlaších dílech.

grafický formát - způsob uložení grafických informací do souboru. Existuje celá řada grafických formátů (informace o gimpem podporovaných formátech najdete v díle č. 2), které lze rozdělit na dvě skupiny vektorové a bitmapové. Na webovských stránkách se můžeme setkat hlavně s obrázky z kategorie bitmapové grafiky. Z vektorových formátů se na internetu začíná prosazovat SVG formát (Scalable Vector Graphics). Gimp bohužel zatím tento formát nepodporuje, proto se jím nebudeme zabývat. Jednotlivé bitmapové formáty vhodné pro internet popíši v samostatných odstavcích. Formát ovlivňuje také velikost obrazu. Kupříkladu soubor, který zabírá v BMP 800 Kb, má jako soubor JPG pouhých 44 Kb.

velikost - jde o rozměry grafiky pro internet. Internetová grafika se musí vtěsnat na monitor.

Tvůrci grafiky pro internetové prezentace musí překonat celou řadu překážek, které vycházejí z podstaty internetové prezentace. Na rozdíl od DTP nikdy dopředu nevíme, na jakém zařízení si uživatelé budou naši prezentaci prohlížet (rozlišení monitoru, barevná hloubka zobrazení, věrnost barev atd.). Na následujících řádcích se seznámíme s možnostmi, jak se s těmito překážkami zdárně vypořádat či jak je nejlépe zmírnit.

Optimalizace obrazových dat

Optimalizace obrazových dat znamená určení optimálního nastavení parametrů obrazu pro snížení objemu dat při zachování potřebné kvality obrazu. Optimalizace se realizuje pomocí následujících úprav:

  • nastavení vhodného rozlišení
  • správná velikost obrazu
  • vhodná paleta barev
  • vybrání správného formát souboru
  • aplikování vhodné komprese dat

Formáty grafických souborů vhodných pro web

GIF

GIF (The Graphics Interchange Format) vyvinula společnost CompuServe v r. 1987. GIF se používá pro zobrazování bitmapové grafiky, která se skládá převážně z jednoduchých čárových objektů a ne příliš velkého počtu barev. Je vhodný pro obrázky s malou barevnou paletou, pro kresby, loga, tlačítka, ikony...

Formát GIF podporuje osmibitovou grafiku, což znamená, že obrázek může mít maximálně 256 barev. Formát GIF dovoluje jednu barvu v obrázku nastavit jako průhlednou. Při zobrazování webové grafiky na webu se často setkáte s prokládaným GIFem, který umožňuje postupné zobrazení obrázku během stahování stránek.

Formát GIF používá bezztrátovou kompresi, to znamená, že uložíte-li obrázek GIF znovu opět ve formátu GIF, klidně i vícekrát za sebou, kvalita obrázku zůstane pořád stejná a žádná data se z obrázku neztratí. Nejlepší komprese se dosahuje, pokud obrázek obsahuje hodně jednobarevných ploch. Další výhodou formátu GIF je možnost vytvářet animace.

Porovnání GIF s různými parametry

gif s různými parametry gif s různými parametry

Porovnání formátu GIF a JPEG

Na zvětšeném obrázku můžete shlédnout nevhodnost formátu JPEG při jeho použití na obrázky s většími jednobarevnými plochy. Nevýhodou je velký soubor, rušivý vzorek a rozmazané okraje.

jpg vs. gif

Jpeg obrázek sice vypadá barevně věrohodněji, ale je deformován a je větší než GIF.

JPEG

Formát JPEG (The Joint Photographics Experts Group) byl od svého prvopočátku koncipován jako grafický formát pro ukládání fotografií. Jpeg zvládá všech 24 bitů tzn. kompletní barevnost, obrázek tedy může obsahovat až 16 777 216 barev.

JPEG používá ztrátovou kompresi. Pokud uložíte nějaký obrázek v souboru typu JPEG, znovu jej otevřete a zase uložíte, kvalita nového obrázku se podle zvoleného stupně komprese sníží, dojde ke ztrátě zobrazovaných dat. Čím vyšší komprese, tím rozmazanější (roztřepenější) obrysy v obrazu. JPEG nepodporuje průhlednost. Stejně jako u Gifu je možné uložit obrázek jako prokládaný.

Ukázky jpeg obrázků při různém nastavení komprese:

jpg originál

kvalita 100 %
vyhlazení: žádné
134 KB

kvalita 50%

kvalita 50 %
vyhlazení: žádné
22,9 KB

kvalita 50%, vyhlazování

kvalita 50 %
vyhlazení: 0,5
20,3 KB

PNG

Formát PNG (The Portable Network Graphics) je jediným oficiálním formátem pro bitmapovou grafiku na internetu, který vznikl v r. 1997. Podobá se více formátu GIF, ale má lepší podporu barev (až 32bitů), lepší podporu průhlednosti (v 256 úrovních barev) a více typů prokládání. Dříve se používal méně než dnes, poněvadž neměl podporu v prohlížečích. Je vhodný pro kresby, loga, ikony, tlačítka, atd. Formát PNG používá bezztrátovou kompresi.

GIF, JPEG a PNG - jak a kdy je použít?

Formát GIF i PNG se hodí pro tvorbu jednoduchých obrázků, jako jsou ikony, navigační prvky na stránce nebo loga. Formát GIF nepoužívejte pro ukládání fotografií. Fotografie zobrazená ve 256 barvách bude vypadat hodně zrnitě a nebude vypadat ani trochu realisticky. Pro fotografie je nejvhodnější formát JPEG, i když i formát PNG lze také použít. JPEG má totiž nejmenší datový objem, v detailním zobrazením při zvětšení je sice JPEG o málo horší než PNG, ale tyto ztráty jsou pro lidské oko téměř nepatrné. Vůbec nedoporučuji používat formát JPEG na ikony či jednoduché grafické prvky. Pozor se musí ovšem dát i na obrázky, kde se vyskytuje text, zde je vhodné použít GIF nebo PNG.

Velikost grafiky

Orientační velikost obrazových dat:

Forma obrazuOptimumMaximálně přípustné
Pozadí stránky 2kB 10kB
Tlačítko 2kB 5kB
Reklamní banner 8kB 20kB
Fotografie 15kB 40kB
Zmenšenina fotky 5kB 10kB
Obrázkový nadpis 3kB 8kB

Jak velké by měly být obrázky na stránce? Lze říci, že čím menší, tím je to lepší. Je ovšem potřeba vzít v úvahu celou stránku (jako optimální velikost jedné stránky se udává 60kb, zde je započítána jak grafika tak html kod). Pokud jsou na stránce pouze dva obrázky, mohou mít větší velikost. Se zvětšujícím se počtem obrázků na stránce roste nutnost použít větší kompresi na všechny obrázky. Uvědomte si, že každý uživatel se nepřipojuje přes kvalitní pevné připojení, proto pokud dáte na stránku velký obrázek, bude se některým načítat třeba třicet sekund, což je doba, po které uživatel raději načítání stránky zastaví a půjde jinam.

Obvyklé velikosti používajících se na webu

Pro ukázku zde uvedu standardní velikosti reklamních pruhů podle IAB (Internet Advertising Bureau) a CASIE (Coalition for Advertising Supported Information and Entertainment)

plný pruh
plný pruh se svislým navigačním pruhem
svislý pruh čtvercový pruh velké tlačítko
minitlačítko
poloviční pruh standardní tlačítko

Barvy

U webové grafiky je barevný prostor definován základními barvami RGB. Základním problémem režimu RGB spočívá v nejednotnosti způsobu zobrazování mezi jednotlivými zobrazovacími zařízeními např. monitory. Neexistuje jednotný kalibrační model pro barvy, které se zobrazují na monitoru. Proto byly definovány tzv. web safe colors (bezpečné barvy).

216 bezpečných barev

Jsou to barvy, které se zobrazí správně i na systémech s pouhými 256 barvami neohlížeje se v jakém prohlížeči si fotografii prohlížíte. Dnes se toto omezení nemusíte brát striktně, poněvadž většina uživatelů pracuje na počítači, kde používá více než 8Mbitovou barevnou hloubku. Několika málo uživatelům, jejichž systém používá 256 barev, se jiné barvy zobrazí rastrovaně, což by nemuselo vadit, ale problém by mohl vzniknout při čtení textu, jež by se stal díky tomu nečitelným. Proto alespoň web safe color používejte na pozadí stránky.

Web safe colors a GIMP

Pokud máme obrázek či fotografii již vytvořené a obsahují mnoho barev, můžeme je převést do obrázku používající pouze bezpečné barvy vhodné k publikování na web. Způsob je jednoduchý, použijeme volbu: Obrázek --> Režim --> Indexovaná... a v dialogovém okně, které se objeví vybereme nabídku Použít paletu optimalizovanou pro WWW, posledním krokem je výběr použitého rozptylu.

Na následujících obrázcích můžete vidět rozdíly při použití různých druhů rozptylů:

rozklad rozklad

Tímto způsobem zároveň vidíme, jak bude zhruba obrázek vypadat, pokud nepoužijeme web safe colors a obrázek necháme, tak jak je..

Když se rozhodneme vytvářet grafiku za použití bezpečných barev hned od začátku, abychom mohli kontrolovat vzhled, je lepší si zobrazit panel bezpečných barev a vybírat barvy přímo z této palety. Dialogy --> palety, a zde najdeme položku Web (216). Dvojitým poklepáním se nám otevře paleta. Zde pouhým dvojklikem na příslušející barvu vyměníme barvu pozadí nebo popředí.

palety web save palets

Je nutné použít pouze barvy z tzv. palety web safe colors?
V dnešní době stále mnoho uživatelů používá monitory, které jsou schopné zobrazit 256 barev. I když v obchodech už tyto stroje dávno nekoupíte, v bazarech jsou ještě k mání. Nové monitory, které se dají koupit v obchodech, jsou schopné zobrazit až milióny barev. Tato otázka se bude stále objevovat do doby než staré monitory vymizí úplně. Pokud vytvoříte obrázek v plno-barevné kvalitě, bude nádherně vypadat na monitorech schopných zobrazit milióny barev, ale na monitorech schopných zobrazit maximálně 256 barev nebude ani v uspokojivé kvalitě. Dochází k tzv. degradaci barevnosti tedy nahrazením chybějící barvy jinou. Předcházející úvahy nebraly v potaz mobilní uživatele (SmartPhone, Palm ...), jejichž zobrazovací zařízení zdaleka nesplňují výše popsaná kritéria. Rozhodnutí o použití tzv. web safe colors záleží na skupině uživatelů, pro které jsou stránky určeny. Pokud tedy vytváříte grafiku pro prezentaci, která má být přístupná pro všechny, používejte jen web save colors.

Gamma korekce

Je postup, kterým se korigují rozdíly v jasové křivce při zobrazování či tisku na různých zařízeních. Jde tedy o vztah mezi vstupním napětím signálu a světlostí (brightness) barev na monitoru. Tato korekce umožňuje nastavit kontrast především u středních tónů provádí se odpovídajícím SW, zpravidla ve 3 krocích: nastavení světlých, středních a tmavých tónů pro tři základní barvy. Gimp nemá v současné době samostatný nástroj schopný tuto korekci provádět. Ale i přesto je možné tuto korekci částečně provést, využívá se k tomu nástroj Úrovně (Vrstva --> Barvy --> Úrovně). Jemným posouváním prostředního trojúhelníku u vstupních úrovní lze nahradit speciální nástroj pro Gamma korekci.

V následujícím dílu se seznámíme se správným výběrem barev pro www prezentaci a optimalizací grafiky pro web.

Verze pro tisk

pridej.cz

 

DISKUZE

GIMP a WWWEB 13.7.2005 21:47 Santus
L Re: GIMP a WWWEB 14.7.2005 10:36 MaReK Olšavský
Webová grafika 14.7.2005 08:01 Petr Zajíc
Hezký článek ale... 15.7.2005 12:23 Ondřej Tůma
L Re: Hezký článek ale... 18.7.2005 07:55 Yippee
Jen 72 DPI? 16.7.2005 01:29 Tomáš Růžička




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

14.11.2017 16:56 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze